:root{
  --blue:#0b42ad;--blue2:#0b55d4;--green:#176b2a;--green-bg:#eaf7eb;
  --red:#a61b1b;--red-bg:#fff0f0;--amber:#8a5a00;--amber-bg:#fff7df;
  --ink:#1f2937;--muted:#667085;--line:#e6eaf0;--bg:#f3f6fa;--card:#fff;
  --shadow:0 16px 40px rgba(16,24,40,.10)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--blue2);text-decoration:none}.wrap{width:min(100% - 28px,980px);margin:28px auto}.verify-card{width:min(100%,620px);margin:24px auto;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #edf0f4}.verify-head{background:var(--blue);color:#fff;text-align:center;padding:26px 20px;font-weight:700;letter-spacing:.08em;font-size:18px}.status{padding:28px 22px;text-align:center}.status .check{font-size:54px;font-weight:800;line-height:1;color:var(--green)}.status .label{font-size:24px;letter-spacing:.08em;margin-top:6px;font-weight:700}.status.active{background:var(--green-bg);color:var(--green)}.status.bad{background:var(--red-bg);color:var(--red)}.status.warn{background:var(--amber-bg);color:var(--amber)}.section{padding:22px 28px;border-top:1px solid var(--line)}.section-title{font-size:12px;font-weight:800;letter-spacing:.11em;color:#667085;margin:0 0 14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}.field.full{grid-column:1/-1}.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:#667085;margin-bottom:5px}.field .value{font-size:17px;line-height:1.35;overflow-wrap:anywhere}.vehicle{background:#f7f8fb;border-left:4px solid var(--blue2);padding:14px 16px;border-radius:12px}.footer{text-align:center;color:#98a2b3;padding:20px;font-size:12px;background:#fafbfc}.admin-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.admin-top h1{margin:0}.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;background:var(--blue);color:#fff}.btn.secondary{background:#eef2f7;color:#344054}.btn.danger{background:#b42318}.btn.small{padding:7px 10px;font-size:13px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 8px 25px rgba(16,24,40,.05)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}.table th{font-size:12px;color:#667085;letter-spacing:.05em}.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:12px;font-weight:800}.badge.active{background:#eaf7eb;color:#176b2a}.badge.inactive,.badge.revoked,.badge.expired{background:#fff0f0;color:#a61b1b}.badge.scheduled{background:#fff7df;color:#8a5a00}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-row.full{grid-column:1/-1}.form-row label{display:block;font-size:12px;font-weight:800;color:#475467;margin-bottom:6px}.input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:11px 12px;font:inherit;background:#fff}.input:focus,select:focus,textarea:focus{outline:3px solid rgba(11,85,212,.13);border-color:#6b9af0}.login{width:min(100% - 28px,420px);margin:10vh auto}.login h1{text-align:center}.notice{border-radius:10px;padding:12px 14px;margin-bottom:14px;background:#eef4ff;color:#1849a9}.error{background:#fff1f0;color:#b42318}.muted{color:#667085;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.qrbox{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.qrbox img{width:220px;height:220px;border:1px solid var(--line);background:white;padding:8px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all;background:#f8fafc;padding:10px;border-radius:8px}.searchbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.searchbar .input{max-width:420px}
@media (max-width:700px){.grid,.form-grid{grid-template-columns:1fr}.field.full,.form-row.full{grid-column:auto}.section{padding:20px}.status .check{font-size:44px}.verify-card{border-radius:18px}.admin-top{align-items:flex-start;flex-direction:column}.table th,.table td{padding:10px 8px}}
/* ==================================================
   CABECERA PUBLICA - LOGO + PATRON + ESTADO
   ================================================== */

.verify-card .verify-head.hero-pattern{
    position:relative;
    background:
        linear-gradient(
            rgba(108, 12, 49, .78),
            rgba(108, 12, 49, .78)
        ),
        url('/assets/images/pattern.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    padding:30px 20px 82px;
    text-align:center;
}

/* Logo: conservar proporciones originales */
.verify-card .hero-logo{
    display:block;
    width:min(260px, 72vw);
    height:auto;
    max-height:100px;
    object-fit:contain;
    margin:0 auto;
}

/* Convertir VIGENTE en tarjeta blanca flotante */
.verify-card > .status{
    position:relative;
    z-index:5;

    width:calc(100% - 64px);
    max-width:360px;

    margin:-52px auto 22px;

    padding:18px 16px 17px;

    background:#ffffff !important;

    border:1px solid rgba(90, 20, 48, .10);
    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(47, 18, 31, .14);

    text-align:center;
}

/* Mantener verde cuando está vigente */
.verify-card > .status.active .check,
.verify-card > .status.active .label{
    color:#176b42;
}

/* Ajuste del check */
.verify-card > .status .check{
    line-height:1;
    margin-bottom:7px;
}

/* Ajuste del texto */
.verify-card > .status .label{
    font-weight:800;
    letter-spacing:.10em;
}

/* Teléfonos */
@media (max-width:700px){

    .verify-card .verify-head.hero-pattern{
        padding:24px 18px 74px;
    }

    .verify-card .hero-logo{
        width:250px;
        max-width:76%;
        height:auto;
    }

    .verify-card > .status{
        width:calc(100% - 36px);
        margin-top:-46px;
        margin-bottom:18px;
        border-radius:18px;
    }
}
/* ===== TITULO PRINCIPAL DE LA VERIFICACION ===== */

.verify-card .hero-title{
    position:relative;
    z-index:2;

    max-width:560px;
    margin:0 auto;

    color:#ffffff;

    font-size:clamp(24px, 5vw, 34px);
    line-height:1.18;
    font-weight:700;
    letter-spacing:.01em;

    text-align:center;

    text-shadow:
        0 3px 10px rgba(48, 5, 22, .30);
}

/* Ajuste elegante de la cabecera */
.verify-card .verify-head.hero-pattern{
    padding:38px 28px 86px;
}

/* Móvil */
@media (max-width:700px){

    .verify-card .hero-title{
        font-size:26px;
        line-height:1.2;
        max-width:330px;
    }

    .verify-card .verify-head.hero-pattern{
        padding:32px 20px 78px;
    }
}
/* Imagen de fondo decorativa */
.verify-card::after{
    content:"";
    position:absolute;

    top:220px;
    left:50%;
    transform:translateX(-50%);

    width:88%;
    height:430px;

    background-image:url('/assets/images/watermark.png?v=2');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;

    opacity:.10;
    filter:grayscale(100%);

    pointer-events:none;
    z-index:0;
}

/* Todo el contenido queda delante de la mujer */
.verify-card > *{
    position:relative;
    z-index:1;
}

/* No alterar visualmente las secciones */
.verify-card .section{
    background:transparent;
}

/* En celular */
@media (max-width:700px){
    .verify-card::after{
        content:"";
        position:absolute;

        top:290px;
        left:50%;
        transform:translateX(-50%);

        width:96%;
        height:455px;

        background-image:url('/assets/images/watermark.png?v=3');
        background-repeat:no-repeat;
        background-position:center top;
        background-size:contain;

        opacity:.09;
        filter:grayscale(100%);
        pointer-events:none;
        z-index:0;
    }
}
/* ===== FONDO BLANCO COMPLETO EN VISTA PUBLICA ===== */

html,
body.verify-page{
    background:#ffffff !important;
}

body.verify-page .wrap{
    width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
}

/* Quitar efecto de ventana exterior */
body.verify-page .verify-card{
    box-shadow:none !important;
    border:none !important;
}

/* En teléfono, ocupar completamente la pantalla */
@media (max-width:700px){

    body.verify-page .verify-card{
        width:100% !important;
        max-width:none !important;
        border-radius:0 !important;
        margin:0 !important;
    }
}
/* ===== LOGOTIPOS AL FINAL ===== */

.footer-brands{
    width:100%;
    background:#ffffff;
    text-align:center;
    padding:22px 18px 30px;
    border-top:1px solid #eeeeee;
}

.footer-brands-img{
    display:block;
    width:100%;
    max-width:460px;
    height:auto;
    margin:0 auto;
    object-fit:contain;
}

@media (max-width:700px){
    .footer-brands{
        padding:20px 22px 28px;
    }

    .footer-brands-img{
        width:100%;
        max-width:none;
    }
}
.footer-brand-label{
    margin-top:10px;
    text-align:center;
    font-size:11px;
    color:#a0a4aa;
}