/* Fonts are linked from templates/base.html, not imported here — see the note there. */

:root {
    /* Brand palette, from the ABASCARGUA brand book section 10. Token names are
       unchanged from the previous palette so every rule below inherits the new
       values; each comment names the brand-book colour it now carries. */
    --red: #651C2A;        /* Wine Red - color principal institucional */
    --red-dark: #4C1520;   /* shade of Wine Red, for hover and pressed states */
    --blue: #4997D0;       /* Guatemala Blue - FILLS AND ACCENTS ONLY. It sits at
                              2.8:1 on ivory, so it can never carry body text.
                              Use --blue-on-dark over a dark ground instead. */
    --navy: #2F2124;       /* Institutional dark ground. Graphite warmed 22%
                              toward Wine Red: the brand book has no navy, and a
                              neutral black over this much surface reads as
                              absence of brand rather than as the brand. */
    --black: #202322;      /* Graphite - textos, monocromo y contraste */
    --charcoal: #2f3333;
    --stone: #5F5F5B;      /* Muted text. #676763 was tuned against a FLAT
                              #EDE4D4 (4.50, a zero-margin pass) and missed the
                              6% wine gradient that same section lays over its
                              top-left: the real ground there is ~#E7DBCC, which
                              dragged eight elements on the member pages down to
                              4.17-4.46. This is the lightest grey clearing 4.5
                              on all four grounds it meets -- ivory 5.70, white
                              6.41, card 5.08, tinted card 4.70. */
    --line: #E5DCCB;       /* Divider, warmed so it belongs on ivory */
    --warm-white: #F6F1E7; /* Ivory - color de fondo y superficies claras */
    --white: #fff;
    --sandstone: #D7C2A3;  /* Sandstone - apoyo para acentos y fondos */
    --copper: #A9653F;     /* Copper - acento para elementos destacados */

    /* Tints for use over --navy or --black. All measured at 4.5:1 or better
       against those grounds; the base brand colours are too dark to read there. */
    --blue-on-dark: #6DACD9;
    --wine-on-dark: #BA999F;
    --muted-on-dark: #B0A8A3;
    --line-on-dark: #534647;

    /* Alarm. Bootstrap's stock #dc3545 measures 4.02 on ivory and misses AA on
       the one surface where every validation message lives. Measured 4.99 here.
       Kept 2.1x away from Wine on purpose: Wine is this site's "everything is
       normal" colour, so an alarm painted in it reads as brand furniture. */
    --danger: #CA2112;
    --bs-danger-rgb: 202, 33, 18;

    /* Input boundary. --line (#E5DCCB) is a divider, and at 1.21 against ivory
       it cannot also serve as a field edge: WCAG 1.4.11 wants 3:1 for a control
       boundary. Measured 3.50 on ivory and 3.94 on the white fill. */
    --field-line: #8A7F6B;

    /* Type. Two families with distinct jobs — never two doing the same job.
       --f-text  : everything a person reads as language.
       --f-ident : everything a person reads as a CODE and compares against a
                   physical object — member numbers, plates, DPI, access codes.
                   Montserrat is geometric: O/0 are near-identical and I/l are
                   the same vertical stroke. On a 54mm card or a decal at 15m
                   that is a defect, because these strings are the payload.
                   Plex Mono dots its zero and tails its l. */
    --f-text: "Montserrat", sans-serif;
    --f-ident: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Role scale. Nine steps, each with a job. Replaces 20+ accumulated sizes
       where .76/.77/.78 were three separate decisions rendering identically.
       The .id-* credential card keeps its own scale: it is a printed CR80
       artifact tuned in millimetres and verified in print. */
    --t-micro: .69rem;   /* legal lines, QR caption */
    --t-label: .75rem;   /* uppercase labels, dt, eyebrows */
    --t-meta: .84rem;    /* secondary and metadata */
    --t-small: .93rem;   /* dense UI, buttons, nav */
    --t-body: 1rem;      /* reading default */
    --t-lead: 1.15rem;   /* intro paragraphs */
    --t-h3: 1.4rem;
    --t-h2: 1.65rem;
    --t-h1: 2.5rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--black);
    background: var(--warm-white);
    font-family: var(--f-text);
    -webkit-font-smoothing: antialiased;
    /* No overflow-x: clip. It hid a genuinely broken row layout on the vehicle
       list instead of preventing it, and it also blinds any automated overflow
       check — scrollWidth can never exceed clientWidth once content is clipped,
       so the page measures "clean" while looking wrong. Let breakage show. */
}

.skip-link {
    position: fixed;
    z-index: 1100;
    top: 1rem;
    left: 1rem;
    padding: .75rem 1rem;
    color: var(--white);
    background: var(--black);
    transform: translateY(-160%);
}

.skip-link:focus {
    color: var(--white);
    transform: translateY(0);
}

h1,
h2,
h3,
.brand-name {
    font-family: var(--f-text);
    letter-spacing: -.035em;
}

p {
    line-height: 1.7;
}

.site-nav {
    min-height: 88px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.brand-logo {
    display: block;
    width: 270px;
    height: auto;
}

.navbar-brand {
    display: flex;
    align-items: center;
    color: var(--black);
}

.navbar-brand:hover {
    color: var(--red);
}

.brand-name {
    font-size: var(--t-body);
    font-weight: 800;
    letter-spacing: .08em;
}

.navbar .nav-link {
    padding: .65rem .8rem !important;
    color: var(--charcoal);
    font-size: var(--t-small);
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--red);
}

.navbar .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .45rem;
}

.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--field-line);
    border-radius: 2px;
}

/* Nav links measured 43.1px tall — a target that misses the 44px floor by less
   than a pixel still misses it. */
.site-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(101, 28, 42, .14);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23171715' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.6' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

.nav-action {
    display: inline-block;
    padding: .7rem 1rem;
    color: var(--white);
    background: var(--black);
    border: 1px solid var(--black);
    border-radius: 2px;
    font-size: var(--t-meta);
    font-weight: 700;
    text-decoration: none;
}

button.nav-action {
    cursor: pointer;
}

.nav-action:hover,
.nav-action:focus {
    color: var(--white);
    background: var(--red);
    border-color: var(--red);
}

.hero {
    min-height: 650px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 88% 24%, rgba(73, 151, 208, .22), transparent 28%),
        linear-gradient(120deg, var(--navy), #421F26);
    border-bottom: 1px solid var(--line);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
    gap: 6rem;
    align-items: center;
    padding: 7rem 0;
}

.hero-copy,
.hero-symbol {
    min-width: 0;
}

.hero-copy h1 {
    max-width: 850px;
    margin: 1.4rem 0 1.6rem;
    color: var(--white);
    /* 3.3rem was a hard floor that stayed 52.8px at 412px, and `anywhere` let
       it break mid-syllable to fit -- "Unimos proveedore/s, conectamo/s
       mercados" was the first thing a mobile visitor saw. The floor now scales
       with the viewport, and only genuinely over-long words may break. */
    font-size: clamp(2.4rem, 9vw, 6.2rem);
    font-weight: 800;
    line-height: .98;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.hero-lead {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: var(--t-lead);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem;
}

.hero-symbol {
    position: relative;
    display: grid;
    min-height: 390px;
    place-items: center;
    /* Centre the ROWS too, not just each item within its row. min-height exceeds
       the content, and the default (stretch) hands that surplus out per row -- so
       a second child silently pushes the symbol off the centre of the circle,
       which is absolutely positioned and always centres on the full box. */
    align-content: center;
}

/* The disc was a fixed 380px, so once .hero-symbol fell below ~321px wide it
   painted past the viewport -- 18px of overflow at 360px. A pseudo-element is
   invisible to an element-rect sweep, so nothing caught it until overflow-x:
   clip came off the body and the page could finally scroll sideways. */
.hero-symbol::before {
    content: "";
    position: absolute;
    width: min(380px, 100%);
    aspect-ratio: 1;
    background: #F6F1E7;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.hero-symbol img {
    position: relative;
    z-index: 1;
    width: min(310px, 80%);
    height: auto;
    transform: scale(1.25);
}

.hero .eyebrow {
    color: var(--blue-on-dark);
}

.hero .text-link {
    color: var(--white);
    border-color: rgba(255, 255, 255, .65);
}

/* Without this, links fall through to Bootstrap's blue: 4.0:1 on ivory, and
   not a brand colour. Wine Red measures 10.6 and is the institutional colour. */
a {
    color: var(--red);
}

a:hover,
a:focus {
    color: var(--red-dark);
}

.eyebrow {
    color: var(--red);
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.btn-brand {
    padding: .9rem 1.35rem;
    color: var(--white);
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 2px;
    font-size: var(--t-small);
    font-weight: 700;
}

.btn-brand:hover,
.btn-brand:focus {
    color: var(--white);
    background: var(--red-dark);
    border-color: var(--red-dark);
}

.text-link {
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--black);
}

.text-link:hover {
    color: var(--red);
    border-color: var(--red);
}

.principles,
.news-section {
    padding: 7rem 0;
}

.sector-strip {
    color: var(--white);
    background: var(--white);
    color: var(--navy);
    border-bottom: 1px solid var(--line);
}

.sector-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.sector-strip p {
    margin: 0;
    padding: 1.35rem 2rem;
    border-right: 1px solid var(--line);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.sector-strip p:first-child {
    padding-left: 0;
}

.sector-strip p:last-child {
    padding-right: 0;
    border-right: 0;
}

.content-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.section-intro {
    max-width: 620px;
    margin-bottom: 4rem;
}

.section-intro h2,
.section-heading h2 {
    margin: 1rem 0 0;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 700;
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--black);
}

.principle-item {
    padding: 2rem 2.5rem 1rem 0;
    border-right: 1px solid var(--line);
}

.principle-item + .principle-item {
    padding-left: 2.5rem;
}

.principle-item:last-child {
    border-right: 0;
}

.feature-number,
.benefit-item > span {
    display: block;
    margin-bottom: 3.5rem;
    color: var(--red);
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .12em;
}

.principle-item h2,
.benefit-item h2 {
    font-weight: 700;
}

.principle-item p,
.benefit-item p {
    color: var(--stone);
}

.news-section {
    color: var(--white);
    background: var(--black);
}

.news-section .eyebrow {
    color: var(--wine-on-dark);
}

.news-section .text-link {
    color: var(--white);
    border-color: var(--white);
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 4rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line-on-dark);
}

.news-card {
    min-height: 280px;
    padding: 2rem 2.5rem 1rem 0;
    border-right: 1px solid var(--line-on-dark);
}

.news-card + .news-card {
    padding-left: 2.5rem;
}

.news-card:last-child {
    border-right: 0;
}

.news-card h3 {
    margin: 2.5rem 0 1rem;
    font-size: var(--t-h2);
}

.news-card p:last-child {
    color: var(--muted-on-dark);
}

.news-date {
    color: var(--red);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.news-section .news-date {
    color: var(--wine-on-dark);
}

.membership-cta {
    padding: 7rem 0;
    border-top: 1px solid var(--line);
}

.membership-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 6rem;
    align-items: end;
}

.membership-grid h2 {
    max-width: 760px;
    margin: 1rem 0 0;
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 700;
    line-height: 1;
}

.membership-copy {
    padding-left: 3rem;
    border-left: 1px solid var(--line);
}

.membership-copy p {
    margin-bottom: 2rem;
    color: var(--stone);
    font-size: var(--t-lead);
}

.page-header {
    color: var(--white);
    background: var(--black);
}

/* The default eyebrow is Wine Red, a text colour for light grounds. Over the
   dark page header it measured 1.32:1 and over the wine credential header 1.0 --
   invisible in both. Sandstone clears 4.5 on either ground, so one rule serves
   both instead of a per-header exception. */
.page-header .eyebrow {
    color: var(--sandstone);
}

.page-header-inner {
    padding-top: 7rem;
    padding-bottom: 6rem;
}

.page-header h1 {
    margin: 1.2rem 0;
    font-size: clamp(4rem, 9vw, 7.5rem);
    font-weight: 700;
    line-height: .95;
}

.page-header p {
    max-width: 720px;
    margin: 0;
    color: var(--muted-on-dark);
    font-size: var(--t-lead);
}

.content-section h2 {
    margin-bottom: 2rem;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
}

.body-large {
    color: var(--stone);
    font-size: var(--t-lead);
}

.callout {
    padding: 2rem;
    background: transparent;
    border-top: 1px solid var(--red);
    border-bottom: 1px solid var(--line);
}

.callout h3 {
    color: var(--red);
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--black);
}

.benefit-item {
    min-height: 280px;
    padding: 2rem 3rem 2rem 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.benefit-item:nth-child(even) {
    padding-left: 3rem;
    border-right: 0;
}

.news-list {
    border-top: 1px solid var(--black);
}

.news-list-item {
    display: grid;
    grid-template-columns: 170px minmax(220px, .8fr) minmax(280px, 1.2fr);
    gap: 2.5rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
}

.news-list-item h2 {
    margin: 0;
    font-size: var(--t-h2);
}

.news-content {
    color: var(--stone);
}

.empty-state {
    padding: 4rem 0;
    color: var(--stone);
    border-top: 1px solid var(--line);
}

.login-section {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, var(--black) 0 38%, var(--warm-white) 38%);
}

.login-container {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.login-card {
    padding: 3.5rem;
    background: var(--white);
    border: 1px solid var(--line);
}

.login-card h1 {
    margin: 1rem 0;
    font-size: var(--t-h1);
    font-weight: 700;
}

.login-card > p {
    color: var(--stone);
}

.form-label {
    font-size: var(--t-meta);
    font-weight: 700;
    letter-spacing: .04em;
}

/* A field has to read as a well before it is touched. Ivory-on-ivory with a
   divider-weight border measured 1.21:1 against the page, so eleven inputs on
   the registration form looked like flat bands rather than places to type. */
.form-control,
.form-select {
    border: 1px solid var(--field-line);
    border-radius: 2px;
    background: var(--white);
}

.form-control:focus,
.form-select:focus {
    background: var(--white);
    border-color: var(--red);
    box-shadow: 0 0 0 .2rem rgba(101, 28, 42, .12);
}

/* An invalid field is marked by weight and colour together, never colour
   alone — the border thickens so the state survives a greyscale screenshot. */
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-width: 2px;
    border-color: var(--danger);
}

.field-error {
    margin-top: .35rem;
    color: var(--danger);
    font-size: var(--t-meta);
    font-weight: 700;
}

/* Touch targets. The registration form is filled standing up, one-handed, on a
   phone: 38px inputs and an 18px consent box are misses waiting to happen.
   44px is the floor. */
.form-control,
.form-select {
    min-height: 44px;
}

.form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
    border-color: var(--field-line);
}

.form-check-input:checked {
    background-color: var(--red);
    border-color: var(--red);
}

/* The label is the target, not just the box: a 24px checkbox is under the
   44px floor, but clicking anywhere in its label toggles it, so the label is
   what has to clear the floor. */
.privacy-toggle,
.consent-check {
    min-height: 44px;
    padding: .5rem 0;
    cursor: pointer;
}

.privacy-toggle {
    display: flex;
    gap: .8rem;
    align-items: center;
    line-height: 1.55;
}

.consent-more a,
.my-data-summary a,
.text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* The summary is the first thing a returning-from-error member meets, so it
   carries the site's top-rule device rather than arriving as a stray red box. */
.form-error-summary {
    margin-bottom: 1.8rem;
    padding: 1.1rem 1.3rem;
    background: var(--white);
    border-top: 4px solid var(--danger);
}

.form-error-summary:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

.form-error-summary h2 {
    margin: 0 0 .6rem;
    font-size: var(--t-h3);
    color: var(--danger);
}

.form-error-summary ol {
    margin: 0;
    padding-left: 1.2rem;
}

.form-error-summary li + li {
    margin-top: .3rem;
}

.form-error-summary a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--black);
}

/* Browsers cannot repopulate a file input, so a member who failed validation
   on any OTHER field silently loses the photo they just took. Saying so is the
   only fix available from the server side. */
.photo-notice {
    margin-top: .5rem;
    padding: .7rem .9rem;
    background: var(--warm-white);
    border-top: 3px solid var(--copper);
    font-size: var(--t-meta);
}

.footer {
    color: var(--white);
    background: var(--navy);
}

.footer-logo {
    width: 245px;
    height: auto;
    padding: .5rem;
    /* The mark needs a light backing on a dark ground; ivory rather than pure
       white so it matches the hero symbol and stays inside the palette. */
    background: var(--warm-white);
    border-radius: 2px;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    align-items: end;
    gap: 2rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--white);
    font-size: var(--t-meta);
    font-weight: 700;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus {
    text-decoration: underline;
    text-underline-offset: .3rem;
}

.footer-copy,
.footer-note {
    color: rgba(255, 255, 255, .72);
    font-size: var(--t-meta);
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 1rem 0 1.25rem;
    }

    .nav-action {
        margin-top: .5rem;
    }

    .hero {
        min-height: auto;
        background: var(--warm-white);
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        padding: 6rem 0;
    }

    .hero-statement {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }

    .membership-grid {
        gap: 3rem;
    }

    .membership-copy {
        padding-left: 2rem;
    }

    .news-list-item {
        grid-template-columns: 130px 1fr;
    }

    .news-content {
        grid-column: 2;
    }
}

@media (max-width: 767.98px) {
    .hero-grid,
    .principles,
    .news-section,
    .content-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 15vw, 4.3rem);
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.4rem;
    }

    .hero-statement {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .sector-strip-grid,
    .principle-grid,
    .news-grid,
    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .sector-strip p,
    .sector-strip p:first-child,
    .sector-strip p:last-child {
        padding: 1rem 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .24);
        text-align: left;
    }

    .sector-strip p:last-child {
        border-bottom: 0;
    }

    .principle-item,
    .principle-item + .principle-item,
    .news-card,
    .news-card + .news-card,
    .benefit-item,
    .benefit-item:nth-child(even) {
        min-height: auto;
        padding: 2rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .news-card,
    .news-card + .news-card {
        border-color: #4a4944;
    }

    .feature-number,
    .benefit-item > span {
        margin-bottom: 2rem;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-header-inner {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }

    .page-header h1 {
        font-size: clamp(3.5rem, 18vw, 5.5rem);
    }

    .news-list-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .news-content {
        grid-column: auto;
    }

    .login-section {
        background: var(--warm-white);
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

    .membership-cta {
        padding: 4.5rem 0;
    }

    .membership-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .membership-copy {
        padding: 0;
        border-left: 0;
    }

    .footer-inner {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}

.btn-outline-brand {
    padding: .9rem 1.35rem;
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--navy);
    border-radius: 2px;
    font-size: var(--t-small);
    font-weight: 700;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    color: var(--white);
    background: var(--navy);
}

.credential-header {
    background:
        linear-gradient(120deg, rgba(101, 28, 42, .95), rgba(76, 21, 32, .98)),
        var(--red);
}

.credential-toolbar {
    flex-wrap: wrap;
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.credential-list {
    border-top: 2px solid var(--navy);
}

/* Compact single-line rows: this list has to stay usable at 300+ members. */
.credential-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
}

/* A row that needs doing should look like it. Copper, not a colour-only cue:
   it also gains a left rule and its action reads "Revisar" instead of "Editar". */
.credential-row.is-pending {
    background: rgba(169, 101, 63, .07);
    box-shadow: inset 3px 0 0 var(--copper);
}

.status-badge {
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pending {
    color: #6B3A1F;
    background: #F3E3D6;
}

.status-active {
    color: #1f5c36;
    background: #dff2e6;
}

.status-inactive {
    color: #7A1A10;
    background: #F6DCD9;
}

/* ---------------------------------------------------------------------------
   Staff panel. Lifted out of a page-local <style> block whose hard-coded hexes
   shadowed the palette tokens (including a #6D6D69 near-duplicate of --stone).
   --------------------------------------------------------------------------- */

.panel-section-title {
    margin: 2.5rem 0 1rem;
    font-size: var(--t-h3);
    letter-spacing: -.01em;
}

.panel-section-title:first-child {
    margin-top: 0;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

/* Work to do reads as work to do: copper ground, a top rule and a verb —
   not a number that differs from the neutral tiles only in hue. */
.panel-tile {
    display: block;
    padding: 1.4rem 1.5rem;
    color: inherit;
    background: var(--white);
    border: 1px solid var(--line);
    /* Squared, like every other top-rule block on this site. A thick rule
       meeting a rounded corner curves and frays; the incumbent accent blocks
       (.form-error-summary, .consent-block, .legal-callout-*) all carry no
       radius, and this tile had no reason to be the exception. */
    border-top: 5px solid var(--copper);
    text-decoration: none;
}

.panel-tile:hover,
.panel-tile:focus-visible {
    background: rgba(169, 101, 63, .07);
}

.panel-tile .num {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--copper);
}

.panel-tile .label {
    display: block;
    margin-top: .5rem;
    font-size: var(--t-small);
    font-weight: 700;
}

.panel-tile .cue {
    display: block;
    margin-top: .6rem;
    color: var(--red);
    font-size: var(--t-meta);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .25rem;
}

.panel-clear {
    padding: 1.1rem 1.3rem;
    background: var(--white);
    border-top: 4px solid var(--blue);
    font-weight: 600;
}

/* Numbers you read, not act on. Deliberately quieter than the tiles above. */
.panel-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.panel-stat {
    padding: 1.1rem 1.2rem;
    color: inherit;
    background: var(--warm-white);
    text-decoration: none;
}

.panel-stat:hover,
.panel-stat:focus-visible {
    background: var(--white);
}

.panel-stat .num {
    display: block;
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1;
}

.panel-stat .label {
    display: block;
    margin-top: .4rem;
    color: var(--stone);
    font-size: var(--t-meta);
}

.panel-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.panel-list {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.panel-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-small);
}

.panel-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.panel-muted {
    color: var(--stone);
    font-size: var(--t-meta);
}

.panel-footnote {
    margin-top: 2rem;
    color: var(--stone);
    font-size: var(--t-meta);
}

/* At 412px the four-column row did not reflow: names clipped to 6-31px of
   visible width ("Maria Jose Ramirez Lopez" rendered as "M."), and the 74px
   page title pushed the document 85px wider than the viewport. The roster was
   effectively unreadable on a phone. */
@media (max-width: 767.98px) {
    .credential-header h1 {
        font-size: var(--t-h1);
        overflow-wrap: break-word;
    }

    .credential-row,
    .credential-row-employee {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .3rem .8rem;
        padding: .9rem 0;
    }

    .credential-number {
        grid-column: 1;
    }

    .status-badge {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .credential-name,
    .credential-meta {
        grid-column: 1 / -1;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .credential-row-actions {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .credential-row-employee .credential-number {
        padding-left: 0;
    }

    .credential-search {
        width: 100%;
        margin-left: 0;
    }
}

.credential-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.credential-filter {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    color: var(--black);
    background: var(--white);
    border: 1px solid var(--field-line);
    border-radius: 999px;
    font-size: var(--t-meta);
    font-weight: 700;
    text-decoration: none;
}

.credential-filter.is-current {
    color: var(--white);
    background: var(--red);
    border-color: var(--red);
}

.credential-row:hover {
    background: rgba(101, 28, 42, .04);
}

.credential-name {
    overflow: hidden;
    font-size: var(--t-small);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credential-meta {
    overflow: hidden;
    color: var(--stone);
    font-size: var(--t-meta);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credential-row-employee {
    background: rgba(47, 33, 36, .03);
}

.credential-row-employee .credential-number {
    padding-left: 1.2rem;
}

.credential-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.credential-search input {
    /* min-width: 18rem was a hard floor that pushed the toolbar 10px past the
       container at 412px and took the search button off-screen with it. */
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
    padding: .55rem .8rem;
    background: var(--white);
    border: 1px solid var(--field-line);
    border-radius: 8px;
}

.credential-search-clear {
    color: var(--stone);
    font-size: var(--t-meta);
}

.credential-count {
    margin: 0 0 .4rem;
    color: var(--stone);
    font-size: var(--t-meta);
    font-weight: 700;
    text-transform: uppercase;
}



.credential-row p {
    margin: 0;
    color: var(--stone);
}

.credential-row-employee {
    padding-left: 3rem;
    background: linear-gradient(90deg, rgba(73, 151, 208, .06), transparent);
}

.credential-number {
    color: var(--red);
    font-family: var(--f-ident);
    font-size: var(--t-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

/* The identifier role, for numbers rendered outside a dedicated component.
   Anything a person reads as a code and compares against a physical object. */
.ident {
    font-family: var(--f-ident);
    /* Optical size match: Plex Mono's x-height is smaller than Montserrat's,
       so the same computed size reads visibly smaller beside it. */
    font-size: 1.04em;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.credential-row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* "Ver" is only three characters wide, so height alone did not get it to
       the 44px floor. */
    min-width: 44px;
    min-height: 44px;
}

.account-action {
    margin-top: 2rem;
}

.credential-row-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.credential-row-actions a {
    color: var(--navy);
    font-weight: 700;
}

.credential-preview-section {
    min-height: calc(100vh - 88px);
    padding: 5rem 0;
    background:
        linear-gradient(135deg, rgba(101, 28, 42, .06), transparent 35%),
        #EDE4D4;
}

.credential-preview-heading {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
}

.credential-preview-heading h1 {
    margin: .8rem 0 .25rem;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
}

.credential-preview-heading p {
    margin: 0;
    color: var(--stone);
}

.credential-preview-actions {
    display: flex;
    gap: 1rem;
}

.id-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 420px));
    justify-content: center;
    gap: 3rem;
}

.id-card {
    position: relative;
    aspect-ratio: 53.98 / 85.6;
    overflow: hidden;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(47, 33, 36, .18);
}

.id-front {
    display: flex;
    align-items: center;
    flex-direction: column;
    /* Bottom padding reserves the absolutely-positioned .id-footer (112px),
       otherwise the ID number slides underneath it. */
    padding: 17% 2rem 1.75rem;
}

.id-front::before,
.id-front::after {
    content: "";
    position: absolute;
    top: 30%;
    width: 110px;
    height: 180px;
    z-index: 0;
}

.id-front::before {
    left: -55px;
    background: var(--red);
    transform: rotate(45deg);
}

.id-front::after {
    right: -55px;
    background: var(--blue);
    transform: rotate(45deg);
}

.id-hole {
    position: absolute;
    /* Standard slot punch: 15 x 3 mm, 4 mm down from the top edge. */
    top: 4.7%;
    left: 50%;
    z-index: 5;
    width: 27.8%;
    aspect-ratio: 5;
    background: var(--ivory);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(47, 33, 36, .45);
    transform: translateX(-50%);
}

.id-logo {
    position: relative;
    z-index: 1;
    width: 95%;
    margin-bottom: 1.2rem;
}

.id-logo img {
    width: 100%;
}

.id-photo-frame {
    position: relative;
    z-index: 1;
    width: 68%;
    aspect-ratio: .88;
    overflow: hidden;
    margin-bottom: 1.1rem;
    background: #EADECC;
    border-radius: 18px;
}

.id-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.id-photo-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--red);
    font-size: 6rem;
    font-weight: 800;
}

.id-front h2 {
    position: relative;
    z-index: 1;
    /* Inset so the name never runs into the red/blue side shapes. */
    width: 88%;
    margin: 0 0 .15rem;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.id-front h2 span {
    /* Given names and surnames each own a line, instead of wrapping
       wherever the width happens to run out. */
    display: block;
}

.id-role {
    position: relative;
    z-index: 1;
    margin: .35rem 0 .2rem;
    color: var(--red);
    font-size: .85rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.id-company {
    position: relative;
    z-index: 1;
    min-height: 2.4em;
    margin: .5rem 0 1rem;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}

.id-label {
    color: var(--stone);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.id-number {
    display: block;
    min-width: 62%;
    margin-top: .35rem;
    padding: .45rem .8rem;
    color: var(--white);
    background: var(--red);
    border-radius: 7px;
    /* Family only — the 1.35rem is part of the card's print-tuned scale. */
    font-family: var(--f-ident);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    text-align: center;
}

.id-footer {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 112px;
    padding: 1rem 1.4rem;
    color: var(--white);
    background: var(--navy);
}

.id-footer img {
    width: 78px;
    height: 78px;
    padding: 4px;
    background: var(--white);
    border-radius: 5px;
}

.id-footer p {
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
}

.id-footer span {
    color: var(--blue-on-dark);
    font-size: .78rem;
    text-transform: lowercase;
}

.id-back {
    /* The header is height:29% (of card HEIGHT). Percentage padding resolves
       against WIDTH, so 31% was only ~129px against a 192px header and hid the
       ID row. 29% of height == 46.2% of width at this 54:86 ratio. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(37% + .9rem);
    /* Matches .id-back-footer so the data block centres in the space that is
       actually free, rather than sitting hard against the header. */
    padding-bottom: 96px;
}

.id-back-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: .9rem;
    height: 23%;
    padding: 0 1.5rem 1.1rem;
    color: var(--white);
    background: linear-gradient(135deg, var(--red), #7B3C48);
    border-bottom: 9px solid var(--blue);
}

.id-back-header img {
    width: 66px;
    filter: brightness(0) invert(1);
}

.id-back-header strong {
    font-size: 1.6rem;
}

.id-back dl {
    margin: 0;
    padding: 0 2.5rem;
}

.id-back dl div {
    padding: .4rem 0;
    border-bottom: 1px solid var(--line);
}

.id-back dt {
    color: var(--stone);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.id-back dd {
    margin: .15rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.id-mission {
    margin: .9rem 2.5rem 0;
    color: var(--navy);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
}

.id-qr {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: .8rem;
    padding: 0 2.5rem;
}

.id-qr img {
    width: 42%;
    aspect-ratio: 1;
    padding: 8px;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 10px;
}

.id-qr p {
    margin: .4rem 0 0;
    color: var(--stone);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.id-back-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: 88px;
    padding: 1rem 2rem;
    color: var(--white);
    background: var(--navy);
    border-top: 7px solid var(--red);
}

.id-back-footer span {
    max-width: 55%;
    font-size: .62rem;
    line-height: 1.5;
    text-transform: uppercase;
}

.id-back-footer strong {
    color: var(--blue-on-dark);
    font-size: .78rem;
}

.verification-section {
    min-height: calc(100vh - 88px);
    padding: 5rem 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(73, 151, 208, .14), transparent 25%),
        linear-gradient(145deg, var(--navy), #471F27);
}

.verification-shell {
    display: flex;
    justify-content: center;
}

.verification-card {
    width: min(720px, 100%);
    padding: 3rem;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
}

.verification-brand img {
    width: min(360px, 100%);
    height: auto;
}

/* The verdict was 12px sitting beside a 40px name, so the reader took in the
   name and never registered the status. It is the answer to the only question
   this page is asked. */
.verification-status {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 2.5rem 0;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    font-size: var(--t-small);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Not colour alone: the tick pairs with the cross on the invalid state. */
.verification-status.is-active::before {
    content: "\2713";
    font-size: 1.25em;
    line-height: 1;
}

.verification-status.is-active {
    color: #1f5c36;
    background: #dff2e6;
}

/* An invalid credential is the one verdict this page exists to deliver, and it
   is read in sunlight, at arm's length, by someone who wants to move on. So it
   gets the top of the card, a mark that survives greyscale, and a statement at
   heading weight — never a chip that differs from "activa" only in hue. */
/* No top rule here: a 10px border meeting this card's 18px radius frays at the
   corners, and the alarm field below is already the at-a-glance signal. */
.verification-card.is-invalid {
    box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
}

.verification-alarm {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin: 2.5rem 0;
    padding: 1.5rem 1.6rem;
    color: var(--white);
    background: var(--danger);
    border-radius: 10px;
}

.verification-alarm-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 3px solid currentColor;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Renders as a <p> beside a named person, and as the <h1> when there is no
   person to name. Same size either way — it is the same statement. */
.verification-alarm-title {
    margin: 0 0 .35rem;
    letter-spacing: normal;
    font-size: var(--t-h3);
    font-weight: 800;
    line-height: 1.15;
    text-wrap: balance;
}

.verification-alarm-detail {
    margin: 0;
    font-size: var(--t-body);
}

/* The face still has to be comparable — it is how the reader knows they are
   looking at the right person's revoked credential — so it is dimmed and
   marked, never hidden. */
.is-invalid .verification-photo {
    filter: grayscale(1) contrast(.92);
    outline: 3px solid var(--danger);
    outline-offset: -3px;
}

.verification-profile {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 2rem;
    align-items: center;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}

.verification-photo {
    width: 150px;
    height: 175px;
    object-fit: cover;
    border-radius: 12px;
}

.verification-placeholder {
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--red);
    font-size: 4rem;
    font-weight: 800;
}

.verification-type {
    margin: 0 0 .5rem;
    color: var(--red);
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.verification-profile h1 {
    margin: 0 0 .5rem;
    font-size: var(--t-h1);
    font-weight: 800;
}

.verification-role,
.verification-company {
    margin: 0;
}

.verification-role {
    font-weight: 700;
}

.verification-company {
    color: var(--stone);
}

.verification-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
}

.verification-data div {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}

.verification-data div:nth-child(odd) {
    padding-right: 1.5rem;
}

.verification-data dt {
    color: var(--stone);
    font-size: var(--t-label);
    text-transform: uppercase;
}

.verification-data dd {
    margin: .3rem 0 0;
    font-weight: 700;
}

.verification-data > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.verification-note {
    margin: 2rem 0 0;
    color: var(--stone);
    font-size: var(--t-meta);
}

@media (max-width: 991.98px) {
    .brand-logo {
        width: 225px;
    }

    .hero-symbol {
        min-height: 260px;
    }

    .hero {
        background:
            radial-gradient(circle at 88% 24%, rgba(73, 151, 208, .22), transparent 28%),
            linear-gradient(120deg, var(--navy), #421F26);
    }

    .hero-symbol img {
        width: 180px;
        transform: scale(1.35);
    }
}

@media (max-width: 767.98px) {
    .credential-toolbar,
    .credential-row,
    .credential-row-actions,
    .credential-preview-heading,
    .credential-preview-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .credential-row-employee {
        padding-left: 1.25rem;
    }

    .id-pair {
        grid-template-columns: minmax(280px, 390px);
    }

    .verification-card {
        padding: 2rem 1.25rem;
    }

    .verification-profile {
        grid-template-columns: 1fr;
    }

    .verification-data {
        grid-template-columns: 1fr;
    }

    .verification-data div:nth-child(odd) {
        padding-right: 0;
    }
}

@media print {
    .site-nav,
    .footer,
    .credential-preview-heading {
        display: none !important;
    }

    .credential-preview-section {
        padding: 0;
        background: var(--white);
    }

    .id-pair {
        gap: 10mm;
    }

    .id-card {
        width: 53.98mm;
        height: 85.6mm;
        box-shadow: none;
        break-inside: avoid;
    }
}

.verification-block-title {
    margin: 2.5rem 0 .9rem;
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stone);
}

.verification-fleet {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.fleet-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.fleet-plate {
    flex: none;
    padding: .38rem .6rem;
    border: 2px solid var(--black);
    border-radius: 5px;
    font-family: var(--f-ident);
    font-size: var(--t-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .07em;
    white-space: nowrap;
}

.fleet-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fleet-kind {
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* Wine Red, not Guatemala Blue: this is the one place the blue was being
       asked to carry text, and at .75rem it measured 2.8:1 on the card. */
    color: var(--red);
}

.fleet-model {
    font-size: var(--t-meta);
    color: var(--stone);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verification-fleet-note {
    margin: 1rem 0 0;
    font-size: var(--t-meta);
    line-height: 1.6;
    color: var(--stone);
}

.fleet-status {
    margin-left: auto;
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    white-space: nowrap;
}

/* Removing a vehicle is irreversible and takes it off the member's public
   credential, so it must not be the loudest thing in its own row. A quiet
   control that says what it removes, sitting on its own line. */
.fleet-remove {
    flex: 0 0 100%;
    order: 9;
    padding-top: .6rem;
    margin-top: .2rem;
    border-top: 1px solid var(--line);
}

.fleet-remove a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 0;
    color: var(--stone);
    font-size: var(--t-meta);
    font-weight: 600;
    text-underline-offset: .25rem;
}

.fleet-remove a:hover,
.fleet-remove a:focus-visible {
    color: var(--danger);
}

/* The confirmation page repeats the plate chip so the member is looking at the
   same object they clicked, not at a sentence about it. */
.confirm-subject {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem 1.1rem;
    background: var(--white);
    border-top: 4px solid var(--danger);
}

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.8rem;
}

/* Bootstrap's stock danger button hard-codes #dc3545, which carries white text
   at 3.9:1. Ours is the measured token. */
.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #A81B0F;
    --bs-btn-hover-border-color: #A81B0F;
    --bs-btn-active-bg: #A81B0F;
    --bs-btn-active-border-color: #A81B0F;
}

@media (max-width: 767.98px) {
    /* The desktop row never wrapped, so the model ellipsised to "Isuz..." and
       the member could not tell which truck a row referred to. */
    .fleet-item {
        flex-wrap: wrap;
        gap: .5rem .8rem;
    }

    .fleet-meta {
        flex: 1 1 100%;
        order: 5;
    }

    .fleet-model {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .fleet-status {
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------------------
   Privacy notice, consent, and the legal blocks that sit on public pages.
   --------------------------------------------------------------------------- */

.legal-doc {
    max-width: 760px;
}

.legal-doc h2 {
    margin: 2.6rem 0 .9rem;
    font-size: var(--t-h3);
    color: var(--red);
}

.legal-doc h2:first-of-type {
    margin-top: 1.4rem;
}

.legal-doc p {
    line-height: 1.7;
}

.legal-version {
    padding: .85rem 1.1rem;
    background: var(--white);
    border-top: 3px solid var(--blue);
    font-size: var(--t-meta);
    color: var(--stone);
}

.legal-list {
    margin: 0;
    display: grid;
    gap: .1rem;
}

.legal-list > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.2rem;
    padding: .8rem 0;
    border-top: 1px solid var(--line);
}

.legal-list dt {
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
}

.legal-list dd {
    margin: 0;
    line-height: 1.6;
}

.legal-bullets {
    padding-left: 1.2rem;
    line-height: 1.75;
}

.legal-bullets li {
    margin-bottom: .4rem;
}

/* The two callouts are the section members actually need: colour-coded so the
   difference between "public" and "never public" survives a fast skim. */
.legal-callout {
    margin: 1.2rem 0;
    padding: 1.2rem 1.4rem;
    background: var(--white);
    border-top: 4px solid var(--stone);
}

.legal-callout h3 {
    margin: 0 0 .6rem;
    font-size: var(--t-lead);
}

.legal-callout p {
    margin-bottom: .6rem;
}

.legal-callout-public {
    border-top-color: var(--blue);
}

.legal-callout-public h3 {
    color: var(--navy);
}

.legal-callout-private {
    border-top-color: var(--red);
}

.legal-callout-private h3 {
    color: var(--red);
}

.legal-footnote {
    margin-top: 2.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-size: var(--t-meta);
    color: var(--stone);
}

/* Consent on the registration form. */
.consent-block {
    margin: 1.8rem 0 1.6rem;
    padding: 1.1rem 1.3rem;
    background: var(--white);
    border-top: 4px solid var(--red);
}

.consent-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    cursor: pointer;
    line-height: 1.55;
}

.consent-check .form-check-input {
    /* 1.15rem measured 18.4px square. This checkbox gates legal consent and is
       ticked on a phone, so it takes the 1.5rem floor like every other control. */
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
}

.consent-more {
    margin: .7rem 0 0 2.3rem;
    font-size: var(--t-meta);
}

/* Legal footer on the public verification page. */
.verification-legal {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.verification-legal .verification-note {
    margin-top: 0;
}

.verification-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .7rem 0 0;
    /* Was --t-micro (11.04px). This block carries the privacy link and how to
       correct a record, which is the reader's only route to acting on their
       own data — too small to read on a phone is the same as absent. */
    font-size: var(--t-meta);
    color: var(--stone);
}

.verification-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* "What is public about me" summary inside the member's own account. */
.my-data-summary {
    margin: 0 0 1.2rem;
    padding: 1rem 1.2rem;
    background: var(--white);
    border-top: 4px solid var(--blue);
    font-size: var(--t-meta);
    line-height: 1.65;
}

.my-data-summary p {
    margin-bottom: .5rem;
}

@media (max-width: 575.98px) {
    .legal-list > div {
        grid-template-columns: 1fr;
        gap: .3rem;
    }
}