*{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:#05080d;
    --card:#0c141e;
    --card2:#101a26;
    --border:#1c2c3d;
    --text:#fff;
    --muted:#91a0b2;
    --blue:#1595ff;
    --blue2:#0078e8;
    --green:#28df96;
    --red:#ff6e6e;
}

html,body{width:100%;min-height:100%}

body{
    background:#020509;
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
}

button{font-family:inherit}

.app{
    width:100%;
    max-width:520px;
    min-height:100vh;
    margin:0 auto;
    background:
        radial-gradient(circle at 85% 0%,rgba(21,149,255,.13),transparent 28%),
        var(--bg);
    overflow:hidden;
}

/* HEADER */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:20px 20px 16px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.brand-mark{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #23425d;
    border-radius:12px;
    background:#08111b;
    color:var(--blue);
    font-size:22px;
    font-weight:900;
    box-shadow:0 0 25px rgba(21,149,255,.10);
}

.brand strong{
    display:block;
    font-size:23px;
    letter-spacing:-.8px;
}

.brand strong span,.footer-logo span{color:var(--blue)}

.brand small{
    display:block;
    margin-top:3px;
    color:#748395;
    font-size:7px;
    letter-spacing:1.8px;
}

.status-pill{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border:1px solid #174b3b;
    border-radius:20px;
    background:#071812;
    color:#61e6b0;
    font-size:7px;
    font-weight:800;
    letter-spacing:.8px;
    white-space:nowrap;
}

.status-dot{
    width:6px;height:6px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 10px rgba(40,223,150,.7);
}

/* VEHICLE HERO */
.vehicle-hero{
    position:relative;
    margin:8px 16px 0;
    padding:25px 22px 20px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:24px;
    background:
        linear-gradient(145deg,#101c2a,#081019);
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.hero-glow{
    position:absolute;
    width:190px;height:190px;
    right:-90px;top:-90px;
    border-radius:50%;
    background:rgba(21,149,255,.14);
    filter:blur(5px);
}

.vehicle-symbol{
    position:absolute;
    right:18px;
    top:20px;
    font-size:60px;
    opacity:.13;
    filter:grayscale(1);
}

.vehicle-copy{position:relative}

.eyebrow{
    display:block;
    color:#7f8ea0;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.vehicle-copy h1{
    margin-top:7px;
    font-size:35px;
    letter-spacing:4px;
}

.vehicle-copy p{
    margin-top:5px;
    color:#b1bdca;
    font-size:15px;
}

.vehicle-tags{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:17px;
}

.vehicle-tags span{
    padding:6px 9px;
    border:1px solid #24394c;
    border-radius:8px;
    background:#09131d;
    color:#9cacbc;
    font-size:8px;
    font-weight:700;
    letter-spacing:.5px;
}

.vehicle-tags span:first-child{
    border-color:#185b46;
    background:#071b14;
    color:#55dda7;
}

/* DOCUMENTS */
.documents-section{padding:28px 16px 6px}

.section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.section-heading h2{
    margin-top:5px;
    font-size:20px;
    font-weight:700;
}

.secure-mini{
    padding:6px 8px;
    border:1px solid #1e3346;
    border-radius:8px;
    color:#8292a4;
    font-size:7px;
    font-weight:800;
    letter-spacing:.8px;
}

.documents-list{display:grid;gap:10px}

.document-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:16px;
    background:linear-gradient(145deg,#101a26,#0a121b);
}

.document-card.available{
    border-color:#20374b;
}

.document-icon{
    flex:0 0 45px;
    width:45px;height:45px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #21435d;
    border-radius:12px;
    background:#07121c;
    font-size:21px;
}

.document-info{
    flex:1;
    min-width:0;
}

.document-info strong{
    display:block;
    font-size:14px;
}

.document-info small{
    display:block;
    margin-top:5px;
    color:var(--green);
    font-size:10px;
    font-weight:700;
}

.document-info small.not-available{color:#657487}

.document-button{
    flex:0 0 58px;
    height:38px;
    border:0;
    border-radius:9px;
    background:var(--blue);
    color:#fff;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.document-button:active{transform:scale(.96)}
.document-button.disabled{
    background:#17212c;
    color:#5c6a7a;
}

/* QUICK */
.quick-section{padding:15px 16px 4px}

.quick-card{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:15px;
    background:#0b131d;
    cursor:pointer;
}

.quick-icon{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:11px;
    background:#091a28;
    border:1px solid #1c405b;
    font-size:18px;
}

.quick-card div:nth-child(2){flex:1}

.quick-card strong{display:block;font-size:13px}
.quick-card small{display:block;margin-top:4px;color:#78889a;font-size:10px}
.quick-card>span{color:#607286;font-size:25px}

/* FOOTER */
footer{
    padding:30px 20px 38px;
    text-align:center;
    color:#657487;
    font-size:8px;
    letter-spacing:1.4px;
}

.footer-logo{
    color:#fff;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.5px;
    margin-bottom:6px;
}

footer small{
    display:block;
    margin-top:8px;
    color:#4f5e6e;
    font-size:8px;
    letter-spacing:0;
}

/* PIN */
.pin-screen{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:48px 20px 28px;
    background:
        radial-gradient(circle at 50% 0%,rgba(21,149,255,.15),transparent 34%),
        var(--bg);
}

.pin-brand{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:38px;
}

.pin-logo{
    width:46px;height:46px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #24435c;
    border-radius:13px;
    background:#08111b;
    color:var(--blue);
    font-size:24px;
    font-weight:900;
}

.pin-brand strong{
    display:block;
    font-size:26px;
}

.pin-brand strong span{color:var(--blue)}
.pin-brand>div>span{
    display:block;
    margin-top:3px;
    color:#778697;
    font-size:7px;
    letter-spacing:2px;
}

.pin-card{
    width:100%;
    max-width:400px;
    padding:28px 23px 25px;
    border:1px solid #213246;
    border-radius:24px;
    background:linear-gradient(145deg,#101a27,#0a121b);
    text-align:center;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.security-badge{
    width:64px;height:64px;
    margin:0 auto 16px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #1d4968;
    border-radius:18px;
    background:#071522;
    font-size:28px;
}

.pin-eyebrow{
    color:var(--blue);
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.pin-card h1{
    margin-top:8px;
    font-size:24px;
}

.pin-card p{
    margin:10px 0 20px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.plate-label{
    color:#718093;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.pin-patente{
    display:inline-block;
    margin:7px 0 20px;
    padding:8px 17px;
    border:1px solid #29435a;
    border-radius:9px;
    background:#080f17;
    font-size:18px;
    font-weight:900;
    letter-spacing:3px;
}

.pin-input{
    width:100%;
    height:60px;
    border:1px solid #29435a;
    border-radius:13px;
    outline:none;
    background:#070e16;
    color:#fff;
    text-align:center;
    font-size:27px;
    font-weight:800;
    letter-spacing:10px;
}

.pin-input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(21,149,255,.10);
}

.modal-action{
    width:100%;
    min-height:49px;
    margin-top:13px;
    padding:0 18px;
    border:0;
    border-radius:11px;
    background:var(--blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.6px;
    cursor:pointer;
}

.modal-action:disabled{opacity:.6}

.pin-error{
    min-height:20px;
    margin-top:13px;
    color:#ff7070;
    font-size:12px;
}

.pin-help{
    margin-top:auto;
    padding-top:38px;
    color:#566577;
    text-align:center;
    font-size:8px;
    line-height:1.7;
    letter-spacing:.8px;
}

/* MODAL */
.modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:14px;
    background:rgba(0,0,0,.78);
}

.modal.hidden{display:none}

.modal-box{
    width:100%;
    max-width:470px;
    position:relative;
    padding:30px 20px 24px;
    border:1px solid #24384d;
    border-radius:21px;
    background:#0c151f;
}

.modal-box h2{
    margin-bottom:14px;
    font-size:20px;
}

.modal-box p{
    margin-bottom:13px;
    color:#9ba9b9;
    font-size:13px;
    line-height:1.5;
}

.close{
    position:absolute;
    top:5px;
    right:10px;
    border:0;
    background:transparent;
    color:#8795a5;
    font-size:29px;
    cursor:pointer;
}

.modal-big-icon,.modal-document-icon{
    width:58px;height:58px;
    margin:0 auto 15px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #20435e;
    border-radius:16px;
    background:#07131e;
    font-size:25px;
}

.modal-document{text-align:center}

.contact-number{
    margin:10px 0 15px;
    padding:13px;
    border:1px solid #20374a;
    border-radius:11px;
    background:#080f17;
    color:#fff;
    text-align:center;
    font-size:18px;
    font-weight:800;
}

.vehicle-detail{
    display:grid;
    gap:9px;
}

.vehicle-detail div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:11px 0;
    border-bottom:1px solid #192837;
}

.vehicle-detail span{color:#778799;font-size:12px}
.vehicle-detail strong{text-align:right;font-size:13px}

@media(min-width:700px){
    body{padding:25px 0}
    .app{
        border:1px solid #192a3b;
        border-radius:25px;
        box-shadow:0 25px 80px rgba(0,0,0,.5);
    }
}

/* =========================================================
   LOGO OFICIAL NEXUMID - CABECERA
   Mantiene siempre la proporción original del PNG.
   ========================================================= */
.topbar .brand{
    flex:1 1 auto;
    min-width:0;
    gap:0;
}

.topbar .brand-logo{
    display:block;
    width:210px;
    max-width:min(58vw, 210px);
    height:auto;
    max-height:58px;
    object-fit:contain;
    object-position:left center;
    flex-shrink:1;
}

@media(max-width:480px){
    .topbar{
        gap:10px;
    }

    .topbar .brand-logo{
        width:190px;
        max-width:62vw;
        height:auto;
    }
}

@media(max-width:360px){
    .topbar .brand-logo{
        width:165px;
        max-width:60vw;
        height:auto;
    }
}
/* ==========================================
   FIX LOGO NEXUMID - PANTALLA PIN
   ========================================== */

.pin-brand {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 28px 0;
    padding: 0;
}

.pin-brand-logo {
    display: block !important;
    width: 190px !important;
    max-width: 60vw !important;
    height: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
}


/* NEXUMID - LANDING COMERCIAL */
.app:has(.landing){max-width:none;min-height:100vh;background:#03070b}
body:has(.landing){padding:0}
.landing{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 82% 4%,rgba(21,149,255,.15),transparent 23%),radial-gradient(circle at 15% 30%,rgba(44,111,164,.08),transparent 26%),#03070b;color:#fff}
.landing-header{width:min(1120px,calc(100% - 36px));margin:0 auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.landing-logo{width:210px;max-width:58vw;height:auto;display:block}
.landing-badge,.landing-kicker{color:#8fa0b3;font-size:9px;font-weight:800;letter-spacing:2.2px}
.landing-badge{padding:8px 11px;border:1px solid #203448;border-radius:999px;background:rgba(7,16,25,.7)}
.landing-hero{width:min(1120px,calc(100% - 36px));min-height:680px;margin:0 auto;padding:105px 0 90px;position:relative}
.landing-kicker{color:#3fa9ff}
.landing-hero h1{max-width:700px;margin-top:18px;font-size:clamp(42px,7vw,78px);line-height:.98;letter-spacing:-3px}
.landing-lead{max-width:610px;margin-top:25px;color:#9eacbb;font-size:17px;line-height:1.7}
.landing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.landing-actions a{min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;text-decoration:none;font-size:10px;font-weight:900;letter-spacing:.8px}
.landing-primary{background:#1595ff;color:#fff}.landing-secondary{border:1px solid #26394c;background:#08111a;color:#c5d0db}
.landing-card{width:340px;min-height:210px;position:absolute;right:2%;bottom:85px;padding:24px;border:1px solid #294158;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 35%),linear-gradient(145deg,#111b25,#060b10);box-shadow:0 35px 90px rgba(0,0,0,.55),0 0 45px rgba(21,149,255,.09);transform:rotate(-4deg)}
.landing-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.08) 42%,transparent 55%);pointer-events:none}
.landing-card-top{display:flex;justify-content:space-between;color:#75889b;font-size:8px;font-weight:900;letter-spacing:1.5px}.landing-live{color:#68dcb0}.landing-live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#28df96}
.landing-nfc{width:48px;height:48px;margin:30px 0 15px;display:flex;align-items:center;justify-content:center;border:1px solid #315b79;border-radius:13px;color:#65bfff;font-size:10px;font-weight:900;letter-spacing:1px}
.landing-card strong{display:block;font-size:18px}.landing-card small{display:block;margin-top:7px;color:#7f8fa0}.landing-tech{position:absolute;right:22px;bottom:20px;color:#516274;font-size:7px;letter-spacing:1.5px}
.landing-section{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:105px 0}
.landing-section h2,.landing-cta h2{max-width:700px;margin-top:12px;font-size:clamp(30px,5vw,50px);line-height:1.08;letter-spacing:-1.6px}
.landing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:45px}
.landing-grid article{min-height:210px;padding:25px;border:1px solid #172a3b;border-radius:19px;background:linear-gradient(145deg,#0c151f,#070d13)}
.landing-grid b{color:#1595ff;font-size:12px;letter-spacing:1px}.landing-grid h3{margin-top:35px;font-size:18px}.landing-grid p,.landing-section-copy{margin-top:10px;color:#8595a6;font-size:14px;line-height:1.65}
.landing-dark{border-top:1px solid #101d29;border-bottom:1px solid #101d29}.landing-docs{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.landing-docs span,.landing-security-row span{padding:10px 12px;border:1px solid #203448;border-radius:9px;background:#071019;color:#aebdcb;font-size:9px;font-weight:800;letter-spacing:.5px}
.landing-security-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.landing-cta{width:min(1120px,calc(100% - 36px));margin:20px auto 0;padding:85px 45px;border:1px solid #20384d;border-radius:28px;background:radial-gradient(circle at 85% 20%,rgba(21,149,255,.18),transparent 30%),linear-gradient(145deg,#0d1823,#060b10)}
.landing-cta p{margin-top:16px;color:#8e9dad;line-height:1.6}.landing-slogan{margin-top:34px;color:#fff;font-size:18px;font-weight:800}
.landing-footer{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:65px 0 45px;text-align:left}.landing-footer-logo{width:170px;height:auto;margin-bottom:14px}.landing-footer div{color:#718194;font-size:8px;letter-spacing:1.7px}.landing-footer small{margin-top:8px}
@media(max-width:820px){.landing-hero{min-height:auto;padding:75px 0 55px}.landing-hero h1{letter-spacing:-2px}.landing-card{width:100%;max-width:390px;min-height:205px;position:relative;right:auto;bottom:auto;margin:55px auto 5px;transform:rotate(-2deg)}.landing-grid{grid-template-columns:1fr}}
@media(max-width:520px){.landing-header{min-height:75px}.landing-logo{width:175px}.landing-badge{font-size:7px;letter-spacing:1.2px}.landing-hero{padding-top:62px}.landing-hero h1{font-size:45px;letter-spacing:-2px}.landing-lead{font-size:15px}.landing-section{padding:78px 0}.landing-grid{margin-top:30px}.landing-grid article{min-height:170px}.landing-grid h3{margin-top:24px}.landing-cta{padding:55px 24px;border-radius:22px}}


/* ==========================================
   RESUMEN DE DOCUMENTACIÓN
   ========================================== */
.doc-summary{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.035);
}
.doc-summary-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:20px;
    font-weight:800;
}
.doc-summary strong{
    display:block;
    color:#f5f8fc;
    font-size:15px;
    line-height:1.35;
}
.doc-summary small{
    display:block;
    margin-top:4px;
    color:#94a3b5;
    line-height:1.45;
}
.doc-summary.ok{
    border-color:rgba(101,227,177,.24);
    background:rgba(101,227,177,.055);
}
.doc-summary.ok .doc-summary-icon{
    color:#65e3b1;
    background:rgba(101,227,177,.12);
}
.doc-summary.warning{
    border-color:rgba(255,203,112,.28);
    background:rgba(255,203,112,.06);
}
.doc-summary.warning .doc-summary-icon{
    color:#ffcb70;
    background:rgba(255,203,112,.12);
}
.doc-summary.danger{
    border-color:rgba(255,136,136,.28);
    background:rgba(255,136,136,.06);
}
.doc-summary.danger .doc-summary-icon{
    color:#ff8888;
    background:rgba(255,136,136,.12);
}