:root{
    --navy:#0c2f63;
    --navy-soft:#31597f;
    --blue:#2f80ed;
    --cyan:#27c2d8;
    --teal:#25c58a;
    --white:#ffffff;
    --bg:#f6fafc;
    --soft:#edf6f9;
    --line:#d7e6ed;
    --text:#173653;
    --muted:#687d90;
    --error:#a33d48;
    --error-bg:#fff2f4;
    --ok:#207655;
    --ok-bg:#eefaf5;
    --shadow:0 15px 36px rgba(38,79,108,.10);
}

*{
    box-sizing:border-box;
}

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

body{
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:var(--bg);
}

a{
    color:inherit;
    text-decoration:none;
}

input,
button{
    font:inherit;
}

/* ============================================================
   LOGIN
   ============================================================ */

.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 0;
    background:
        radial-gradient(circle at 9% 12%,rgba(39,194,216,.11),transparent 25%),
        radial-gradient(circle at 91% 86%,rgba(37,197,138,.09),transparent 25%),
        #f7fbfc;
}

.login-shell{
    width:90%;
    max-width:1120px;
    min-height:620px;
    display:grid;
    grid-template-columns:1fr .92fr;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:26px;
    background:#fff;
    box-shadow:var(--shadow);
}

.login-marca{
    padding:52px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:
        radial-gradient(circle at 82% 15%,rgba(39,194,216,.14),transparent 26%),
        linear-gradient(145deg,#f5fafc,#edf8f5);
    border-right:1px solid var(--line);
}

.login-logo{
    width:min(310px,82%);
    margin-bottom:30px;
}

.login-etiqueta{
    width:max-content;
    margin-bottom:13px;
    padding:6px 10px;
    border:1px solid #cce4e5;
    border-radius:8px;
    background:#fff;
    color:var(--teal);
    font-size:10px;
    font-weight:bold;
    letter-spacing:.1em;
}

.login-marca h1{
    max-width:540px;
    margin:0 0 17px 0;
    color:var(--navy);
    font-size:clamp(30px,4vw,45px);
    line-height:1.05;
    letter-spacing:-.035em;
}

.login-marca p{
    max-width:540px;
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
}

.login-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:25px;
}

.login-badges span{
    padding:8px 10px;
    border:1px solid #d0e3e8;
    border-radius:9px;
    background:rgba(255,255,255,.86);
    color:var(--navy-soft);
    font-size:10px;
    font-weight:bold;
}

.login-form-panel{
    padding:45px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-form{
    width:100%;
    max-width:405px;
}

.login-form h2{
    margin:0;
    color:var(--navy);
    text-align:center;
    font-size:25px;
}

.login-subtitulo{
    margin:8px 0 24px;
    color:var(--muted);
    text-align:center;
    font-size:13px;
    line-height:1.5;
}

.grupo{
    margin-bottom:16px;
}

.grupo label,
.captcha-caja > label{
    display:block;
    margin-bottom:7px;
    color:var(--navy);
    font-size:11px;
    font-weight:bold;
}

.grupo input,
.captcha-caja input{
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #bfd4df;
    border-radius:10px;
    outline:none;
    background:#fbfdfe;
    color:var(--text);
}

.grupo input:focus,
.captcha-caja input:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(39,194,216,.09);
}

.captcha-caja{
    margin:18px 0;
    padding:15px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#f8fbfc;
}

.captcha-imagen-wrap{
    min-height:86px;
    margin-bottom:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid #d8e6ec;
    border-radius:10px;
    background:#fff;
}

.captcha-imagen{
    display:block;
    max-width:100%;
    max-height:100px;
    object-fit:contain;
}

.captcha-texto{
    padding:18px;
    color:var(--navy);
    text-align:center;
    font-size:17px;
    font-weight:bold;
}

.btn{
    width:100%;
    min-height:44px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
}

.btn-principal{
    border:0;
    background:linear-gradient(135deg,var(--blue),var(--teal));
    color:#fff;
}

.btn-secundario{
    border:1px solid #bcd4df;
    background:#fff;
    color:var(--navy);
}

.regresar-sitio{
    display:block;
    margin-top:18px;
    color:#8495a4;
    text-align:center;
    font-size:10px;
    font-weight:bold;
}

.mensaje{
    margin-bottom:16px;
    padding:11px 13px;
    border-radius:9px;
    font-size:12px;
    line-height:1.45;
    text-align:center;
}

.mensaje.error{
    border:1px solid #e7c5ca;
    background:var(--error-bg);
    color:var(--error);
}

.mensaje.ok{
    border:1px solid #c7e5d8;
    background:var(--ok-bg);
    color:var(--ok);
}

/* ============================================================
   HEADER / MENÚ
   ============================================================ */

.header-app{
    border-bottom:1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 18% 0%,rgba(39,194,216,.13),transparent 28%),
        linear-gradient(135deg,#0b2745 0%,#0c3458 55%,#123f61 100%);
    box-shadow:0 10px 24px rgba(10,39,69,.14);
}

.header-app-interior{
    width:90%;
    min-height:88px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.marca-app{
    min-width:0;
    display:flex;
    align-items:center;
    gap:18px;
}

.marca-app img{
    width:150px;
    max-height:64px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.98))
        drop-shadow(0 0 8px rgba(255,255,255,.72))
        drop-shadow(0 5px 10px rgba(0,0,0,.22));
}

.marca-app strong,
.marca-app span,
.usuario-app strong,
.usuario-app span{
    display:block;
}

.marca-app strong{
    color:#ffffff;
    font-size:17px;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.marca-app span{
    margin-top:4px;
    color:#c8e4f2;
    font-size:10px;
    font-weight:bold;
    letter-spacing:.03em;
}

.usuario-app{
    display:flex;
    align-items:center;
    gap:16px;
    text-align:right;
}

.usuario-app strong{
    color:#ffffff;
    font-size:13px;
}

.usuario-app span{
    margin-top:3px;
    color:#83e6cd;
    font-size:10px;
    font-weight:bold;
}

.btn-salir{
    min-height:40px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.38);
    border-radius:9px;
    background:rgba(255,255,255,.11);
    color:#ffffff;
    font-size:10px;
    font-weight:bold;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.contenedor-app{
    width:90%;
    margin:auto;
    padding:32px 0 50px;
}

.titulo-app span{
    display:block;
    margin-bottom:5px;
    color:var(--teal);
    font-size:10px;
    font-weight:bold;
    letter-spacing:.12em;
}

.titulo-app h1{
    margin:0;
    color:var(--navy);
    font-size:28px;
}

.titulo-app p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
}

.resumen-grid{
    margin-top:24px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
}

.resumen-grid article{
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}

.resumen-grid span{
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:bold;
}

.resumen-grid strong{
    display:block;
    margin-top:8px;
    color:var(--navy);
    font-size:28px;
}

.barra-aforo-caja{
    margin-top:13px;
    padding:17px 20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:linear-gradient(135deg,#f1f8fb,#edf9f5);
}

.barra-aforo-caja > div:first-child{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:9px;
    color:var(--navy);
    font-size:11px;
}

.barra-aforo{
    height:9px;
    overflow:hidden;
    border-radius:8px;
    background:#dde9ee;
}

.barra-aforo span{
    display:block;
    height:100%;
    border-radius:8px;
    background:linear-gradient(90deg,var(--blue),var(--teal));
}

.grupo-modulos{
    margin-top:31px;
}

.grupo-modulos h2{
    margin:0 0 11px;
    padding-bottom:8px;
    border-bottom:1px solid var(--line);
    color:var(--navy);
    font-size:13px;
}

.modulos-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}

.modulos-grid a{
    min-height:100px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
}

.modulos-grid strong{
    color:var(--navy);
    font-size:13px;
}

.modulos-grid span{
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
    line-height:1.4;
}

/*
 * Sin efectos de cambio de color al pasar el cursor.
 */
a:hover,
button:hover{
    color:inherit;
}

@media(max-width:900px){

    .login-shell{
        grid-template-columns:1fr;
    }

    .login-marca{
        padding:34px;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .login-logo{
        width:220px;
    }

    .login-form-panel{
        padding:34px;
    }

    .header-app-interior{
        padding:14px 0;
        align-items:flex-start;
        flex-direction:column;
    }

    .usuario-app{
        width:100%;
        justify-content:space-between;
        text-align:left;
    }

    .resumen-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .modulos-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:560px){

    .login-page{
        padding:0;
        align-items:stretch;
    }

    .login-shell{
        width:100%;
        min-height:100vh;
        border:0;
        border-radius:0;
    }

    .login-marca{
        padding:27px 23px;
    }

    .login-marca h1{
        font-size:28px;
    }

    .login-form-panel{
        padding:28px 23px;
    }

    .marca-app{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .marca-app img{
        width:125px;
    }

    .usuario-app{
        align-items:flex-start;
        flex-direction:column;
    }

    .resumen-grid,
    .modulos-grid{
        grid-template-columns:1fr;
    }

    .titulo-app h1{
        font-size:23px;
    }
}


/* ============================================================
   COLORES DE MÓDULOS VAGAPP
   ============================================================ */

.modulo-color{
    position:relative;
    overflow:hidden;
    border-width:1px !important;
}

.modulo-color::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
}

.modulo-azul{
    background:#f2f7ff !important;
    border-color:#cbdcf5 !important;
}

.modulo-azul::before{
    background:#2f80ed;
}

.modulo-verde{
    background:#f0faf5 !important;
    border-color:#c9e9d9 !important;
}

.modulo-verde::before{
    background:#25c58a;
}

.modulo-celeste{
    background:#f0fbfd !important;
    border-color:#c8e9ef !important;
}

.modulo-celeste::before{
    background:#27c2d8;
}

.modulo-lila{
    background:#f8f5fd !important;
    border-color:#ddd2f0 !important;
}

.modulo-lila::before{
    background:#8b6fc4;
}

.modulo-turquesa{
    background:#eefaf9 !important;
    border-color:#c8e9e4 !important;
}

.modulo-turquesa::before{
    background:#32b9aa;
}

.modulo-naranja{
    background:#fff8ef !important;
    border-color:#efdcc0 !important;
}

.modulo-naranja::before{
    background:#e79a39;
}

.modulo-admin{
    background:
        linear-gradient(
            135deg,
            #edf6ff,
            #eefaf6
        ) !important;
    border-color:#bddce7 !important;
    min-height:115px !important;
}

.modulo-admin::before{
    background:
        linear-gradient(
            180deg,
            #2f80ed,
            #25c58a
        );
}

.modulos-grid-administracion{
    grid-template-columns:minmax(300px,520px);
}

.acciones-inferiores{
    margin-top:28px;
    display:flex;
    justify-content:flex-end;
}

.btn-regresar-modulo{
    width:auto;
    min-width:220px;
    padding:0 20px;
}

/*
 * Los colores permanecen fijos.
 * No se cambia fondo, sombra ni tamaño al pasar el cursor.
 */
.modulo-color:hover{
    transform:none;
    box-shadow:none;
}


/* Encabezado oscuro VagApp: colores fijos */
.header-app .btn-salir:hover{
    background:rgba(255,255,255,.11);
    border-color:rgba(255,255,255,.38);
    color:#ffffff;
    transform:none;
}


/* ============================================================
   CAMBIO DE CONTRASEÑA / ADMINISTRACIÓN
   ============================================================ */

.modulo-rojo-suave{
    background:#fff4f5 !important;
    border-color:#eccfd3 !important;
}

.modulo-rojo-suave::before{
    background:#d66b78;
}

.formulario-card{
    width:min(620px,100%);
    margin-top:25px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 10px 26px rgba(38,79,108,.06);
}

.formulario-clave{
    margin-left:auto;
    margin-right:auto;
}

.formulario-card .grupo:last-of-type{
    margin-bottom:20px;
}


/* ============================================================
   VAGAPP - AJUSTE VISUAL FINAL
   SOLO DOS COLORES EN BOTONES + EMOTICONES
   ============================================================ */

/* ENCABEZADO MÁS OSCURO */
.header-app{
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(39,194,216,.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06182b 0%,
            #08243d 50%,
            #0b3150 100%
        ) !important;
    border-bottom:1px solid rgba(255,255,255,.15) !important;
    box-shadow:0 10px 26px rgba(4,20,36,.28) !important;
}

.header-app .marca-app img{
    width:155px !important;
    max-height:68px !important;
    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 6px rgba(255,255,255,.92))
        drop-shadow(0 0 13px rgba(255,255,255,.55))
        drop-shadow(0 6px 10px rgba(0,0,0,.38)) !important;
}

.header-app .marca-app strong,
.header-app .usuario-app strong{
    color:#ffffff !important;
}

.header-app .marca-app span{
    color:#c5e8f5 !important;
}

.header-app .usuario-app span{
    color:#80e7ca !important;
}

.header-app .btn-salir{
    background:#0b3b5a !important;
    border:1px solid #4c7690 !important;
    color:#ffffff !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 5px 12px rgba(0,0,0,.16) !important;
}

.header-app .btn-salir:hover{
    background:#0b3b5a !important;
    border-color:#4c7690 !important;
    color:#ffffff !important;
    transform:none !important;
}

/* SOLO DOS COLORES PARA TODOS LOS MÓDULOS */
.modulo-color{
    border-width:1px !important;
    box-shadow:0 7px 16px rgba(16,45,69,.12) !important;
}

.modulo-color strong{
    color:#ffffff !important;
    font-size:14px !important;
}

.modulo-color span{
    color:rgba(255,255,255,.88) !important;
    font-size:12px !important;
}

/* COLOR 1: AZUL */
.modulo-azul,
.modulo-celeste,
.modulo-lila,
.modulo-admin{
    background:linear-gradient(135deg,#2b67a8,#3979b9) !important;
    border-color:#245d99 !important;
}

.modulo-azul::before,
.modulo-celeste::before,
.modulo-lila::before,
.modulo-admin::before{
    background:#8fd6ff !important;
}

/* COLOR 2: TURQUESA */
.modulo-verde,
.modulo-turquesa,
.modulo-naranja,
.modulo-rojo-suave{
    background:linear-gradient(135deg,#218b87,#2ca4a0) !important;
    border-color:#1d7c78 !important;
}

.modulo-verde::before,
.modulo-turquesa::before,
.modulo-naranja::before,
.modulo-rojo-suave::before{
    background:#9be9e2 !important;
}

/* BOTONES GENERALES OSCUROS */
.btn-principal{
    background:linear-gradient(135deg,#2b67a8,#2ca4a0) !important;
    color:#ffffff !important;
    box-shadow:0 6px 14px rgba(20,75,103,.16) !important;
}

.btn-secundario{
    background:#183d5a !important;
    border-color:#315d78 !important;
    color:#ffffff !important;
}

/* COLORES FIJOS */
.modulo-color:hover,
.btn-principal:hover,
.btn-secundario:hover{
    transform:none !important;
    filter:none !important;
}

.modulo-azul:hover,
.modulo-celeste:hover,
.modulo-lila:hover,
.modulo-admin:hover{
    background:linear-gradient(135deg,#2b67a8,#3979b9) !important;
}

.modulo-verde:hover,
.modulo-turquesa:hover,
.modulo-naranja:hover,
.modulo-rojo-suave:hover{
    background:linear-gradient(135deg,#218b87,#2ca4a0) !important;
}

.btn-principal:hover{
    background:linear-gradient(135deg,#2b67a8,#2ca4a0) !important;
    color:#ffffff !important;
}

.btn-secundario:hover{
    background:#183d5a !important;
    border-color:#315d78 !important;
    color:#ffffff !important;
}

@media(max-width:560px){
    .header-app .marca-app img{
        width:140px !important;
    }
}


/* ============================================================
   VAGAPP - BOTONES DE MÓDULOS SOLO AZULES
   ============================================================ */

.modulo-azul,
.modulo-celeste,
.modulo-lila,
.modulo-admin,
.modulo-verde,
.modulo-turquesa,
.modulo-naranja,
.modulo-rojo-suave{
    background:
        linear-gradient(
            135deg,
            #2b67a8,
            #3979b9
        ) !important;

    border-color:#245d99 !important;
}

.modulo-azul::before,
.modulo-celeste::before,
.modulo-lila::before,
.modulo-admin::before,
.modulo-verde::before,
.modulo-turquesa::before,
.modulo-naranja::before,
.modulo-rojo-suave::before{
    background:#8fd6ff !important;
}

.modulo-azul:hover,
.modulo-celeste:hover,
.modulo-lila:hover,
.modulo-admin:hover,
.modulo-verde:hover,
.modulo-turquesa:hover,
.modulo-naranja:hover,
.modulo-rojo-suave:hover{
    background:
        linear-gradient(
            135deg,
            #2b67a8,
            #3979b9
        ) !important;

    border-color:#245d99 !important;
    color:#ffffff !important;
    transform:none !important;
}


/* ============================================================
   EMOTICONES DE MÓDULOS - 100% MÁS GRANDES
   ============================================================ */

.modulo-color strong{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.modulo-color .modulo-emoji{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;

    font-size:28px !important;
    line-height:1 !important;
}

.modulo-color .modulo-titulo{
    display:inline-block !important;
    font-size:14px !important;
    line-height:1.2 !important;
}


/* ============================================================
   VAGAPP - ENCABEZADO CENTRADO
   CLIENTE IZQUIERDA · LOGO CENTRO · USUARIO DERECHA
   ============================================================ */

.header-app-interior{
    width:90% !important;
    min-height:118px !important;
    margin:auto !important;

    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:24px !important;
}

.cliente-app{
    min-width:0;
    justify-self:start;
    text-align:left;
}

.cliente-app strong,
.cliente-app span{
    display:block;
}

.cliente-app strong{
    color:#ffffff !important;
    font-size:17px !important;
    font-weight:800 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.20);
}

.cliente-app span{
    margin-top:5px;
    color:#c5e8f5 !important;
    font-size:10px !important;
    font-weight:bold !important;
    letter-spacing:.04em;
}

.logo-centro-app{
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-centro-app img{
    width:230px !important;
    max-width:100% !important;
    max-height:96px !important;
    object-fit:contain !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 7px rgba(255,255,255,.95))
        drop-shadow(0 0 15px rgba(255,255,255,.62))
        drop-shadow(0 7px 12px rgba(0,0,0,.40)) !important;
}

.header-app .usuario-app{
    justify-self:end;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:16px !important;
    text-align:right !important;
}

@media(max-width:850px){

    .header-app-interior{
        grid-template-columns:1fr auto !important;
        grid-template-areas:
            "cliente logo"
            "usuario usuario" !important;
        min-height:auto !important;
        padding:16px 0 !important;
        row-gap:14px !important;
    }

    .cliente-app{
        grid-area:cliente;
    }

    .logo-centro-app{
        grid-area:logo;
        justify-self:end;
    }

    .logo-centro-app img{
        width:185px !important;
        max-height:78px !important;
    }

    .header-app .usuario-app{
        grid-area:usuario;
        width:100% !important;
        justify-self:stretch !important;
        justify-content:space-between !important;
        text-align:left !important;
    }
}

@media(max-width:520px){

    .header-app-interior{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "logo"
            "cliente"
            "usuario" !important;
        text-align:center !important;
    }

    .logo-centro-app{
        justify-self:center !important;
    }

    .logo-centro-app img{
        width:175px !important;
    }

    .cliente-app{
        justify-self:center !important;
        text-align:center !important;
    }

    .header-app .usuario-app{
        align-items:center !important;
    }
}


/* ============================================================
   VAGAPP - LOGO DEL ENCABEZADO MÁS VISIBLE
   +25% DE TAMAÑO + FONDO CLARO SUAVE
   ============================================================ */

.header-app-interior{
    min-height:138px !important;
}

.logo-centro-app{
    padding:8px 22px !important;

    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:18px !important;

    background:rgba(255,255,255,.94) !important;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.10),
        0 0 20px rgba(255,255,255,.32),
        0 9px 20px rgba(0,0,0,.22) !important;
}

.logo-centro-app img{
    width:288px !important;
    max-width:100% !important;
    max-height:112px !important;

    object-fit:contain !important;

    filter:
        drop-shadow(0 2px 3px rgba(8,36,61,.18))
        drop-shadow(0 0 2px rgba(255,255,255,.95)) !important;
}


/* TABLET */
@media(max-width:850px){

    .logo-centro-app{
        padding:7px 17px !important;
    }

    .logo-centro-app img{
        width:230px !important;
        max-height:92px !important;
    }
}


/* CELULAR */
@media(max-width:520px){

    .logo-centro-app{
        padding:7px 14px !important;
    }

    .logo-centro-app img{
        width:218px !important;
        max-height:88px !important;
    }
}


/* ============================================================
   VAGAPP - INGRESAR VEHÍCULO
   ============================================================ */

.ingreso-page{
    padding-bottom:60px;
}

.ingreso-mensaje{
    width:min(760px,100%);
    margin:22px auto 0;
}

.ingreso-consulta-card,
.ingreso-resultado{
    width:min(760px,100%);
    margin:24px auto 0;
    padding:24px;

    border:1px solid var(--line);
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 10px 28px rgba(25,62,91,.08);
}

.ingreso-consulta-form{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:14px;
}

.ingreso-consulta-form .grupo{
    margin:0;
}

.ingreso-grupo-placa input{
    height:54px;
    font-size:23px !important;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#0c2f63;
}

.ingreso-btn-consultar{
    width:auto !important;
    min-width:190px;
    height:54px;
    margin:0 !important;
    padding:0 22px;
}

.ingreso-resultado{
    text-align:center;
}

.ingreso-alerta{
    border-color:#e9c7cc;
    background:#fffafb;
}

.ingreso-correcto{
    border-color:#c9e5d9;
    background:#fafffd;
}

.ingreso-icono-grande{
    font-size:55px;
    line-height:1;
    margin-bottom:12px;
}

.ingreso-estado{
    color:#a64550;
    font-size:15px;
    font-weight:900;
    line-height:1.35;
}

.ingreso-estado-ok,
.ingreso-estado-nuevo{
    color:#2b67a8;
}

.ingreso-placa{
    margin-top:15px;

    color:#0c2f63;

    font-size:38px;
    font-weight:900;
    letter-spacing:4px;
}

.ingreso-tipo{
    margin-top:7px;

    color:#3979b9;

    font-size:17px;
    font-weight:800;
}

.ingreso-fecha{
    margin-top:13px;
    color:#647b8e;
    font-size:13px;
}

.ingreso-datos-grid{
    margin-top:22px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.ingreso-datos-grid > div{
    padding:15px;

    border:1px solid #d9e6ed;
    border-radius:12px;

    background:#f6fafc;
}

.ingreso-datos-grid span,
.ingreso-datos-grid strong{
    display:block;
}

.ingreso-datos-grid span{
    color:#6d8193;
    font-size:10px;
    font-weight:800;
}

.ingreso-datos-grid strong{
    margin-top:6px;

    color:#0c2f63;
    font-size:14px;
}

.ingreso-tarifas{
    margin-top:25px;
    text-align:left;
}

.ingreso-tarifas h3{
    margin:0 0 10px;
    color:#0c2f63;
    font-size:12px;
}

.ingreso-tarifa-fila{
    margin-bottom:8px;
    padding:13px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    border:1px solid #cfe0eb;
    border-radius:11px;

    background:#f4f8fc;
}

.ingreso-tarifa-fila span{
    color:#315985;
    font-size:12px;
    font-weight:800;
}

.ingreso-tarifa-fila strong{
    color:#2b67a8;
    font-size:17px;
}

.ingreso-sin-tarifa{
    padding:14px;

    border:1px solid #e9c7cc;
    border-radius:11px;

    background:#fff5f6;

    color:#a64550;
    font-size:12px;
    font-weight:800;
    text-align:center;
}

.ingreso-ayuda{
    padding:14px;

    border:1px dashed #bfd3e0;
    border-radius:11px;

    background:#f8fbfd;

    color:#6d8193;
    font-size:12px;
    text-align:center;
}

.ingreso-form-registrar,
.ingreso-form-nuevo{
    margin-top:22px;
}

.ingreso-form-nuevo{
    text-align:left;
}

.ingreso-form-nuevo select{
    width:100%;
    min-height:48px;
    padding:10px 12px;

    border:1px solid #bfd4df;
    border-radius:10px;

    background:#fbfdfe;
    color:#173653;

    font-size:14px;
    font-weight:700;
}

.ingreso-form-nuevo select:focus{
    outline:none;
    border-color:#3979b9;
    box-shadow:0 0 0 3px rgba(57,121,185,.09);
}

.ingreso-form-nuevo .btn{
    margin-top:20px;
}

.ingreso-form-nuevo .btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.ingreso-acciones{
    width:min(420px,100%);
    margin:25px auto 0;
}

.ingreso-acciones form{
    margin:0;
}

.ingreso-acciones-secundarias{
    width:min(760px,100%);
    margin:14px auto 0;
}

.ingreso-acciones-secundarias form{
    margin:0;
}

.ingreso-acciones-secundarias .btn{
    width:auto;
    min-width:220px;
    margin-left:auto;
}

@media(max-width:700px){

    .ingreso-consulta-form{
        grid-template-columns:1fr;
    }

    .ingreso-btn-consultar{
        width:100% !important;
    }

    .ingreso-datos-grid{
        grid-template-columns:1fr;
    }

    .ingreso-consulta-card,
    .ingreso-resultado{
        padding:19px;
    }

    .ingreso-placa{
        font-size:32px;
    }

    .ingreso-acciones-secundarias .btn{
        width:100%;
    }
}


/* ============================================================
   VAGAPP - RECIBO DE INGRESO / IMPRESORA TÉRMICA 80 MM
   ============================================================ */

.recibo-ingreso-print{
    display:none;
}

.ingreso-acciones{
    display:grid;
    gap:10px;
}

.ingreso-acciones .btn{
    width:100%;
}

@media print{

    @page{
        size:80mm auto;
        margin:0;
    }

    html,
    body{
        width:80mm !important;
        margin:0 !important;
        padding:0 !important;
        background:#ffffff !important;
    }

    body *{
        visibility:hidden !important;
    }

    #reciboIngresoVagApp,
    #reciboIngresoVagApp *{
        visibility:visible !important;
    }

    #reciboIngresoVagApp{
        display:block !important;
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        width:80mm !important;
        margin:0 !important;
        padding:0 !important;
        background:#ffffff !important;
    }

    .recibo-ingreso-ticket{
        width:72mm !important;
        margin:0 auto !important;
        padding:4mm 2mm 6mm !important;
        box-sizing:border-box !important;
        color:#000000 !important;
        background:#ffffff !important;
        font-family:Arial,Helvetica,sans-serif !important;
        text-align:center !important;
    }

    .recibo-logo{
        display:block !important;
        width:43mm !important;
        max-height:18mm !important;
        object-fit:contain !important;
        margin:0 auto 2mm !important;
        filter:none !important;
    }

    .recibo-titulo{
        font-size:10pt !important;
        font-weight:900 !important;
        margin-bottom:3mm !important;
    }

    .recibo-parqueadero{
        font-size:10.5pt !important;
        font-weight:900 !important;
        line-height:1.2 !important;
    }

    .recibo-direccion{
        margin-top:1mm !important;
        font-size:7pt !important;
        line-height:1.25 !important;
    }

    .recibo-linea{
        border-top:1px dashed #000000 !important;
        margin:3mm 0 !important;
    }

    .recibo-numero{
        font-size:8pt !important;
        font-weight:800 !important;
    }

    .recibo-placa{
        margin:2mm 0 1mm !important;
        font-size:25pt !important;
        font-weight:900 !important;
        letter-spacing:2pt !important;
        line-height:1 !important;
    }

    .recibo-tipo{
        font-size:10pt !important;
        font-weight:800 !important;
    }

    .recibo-fila{
        display:flex !important;
        justify-content:space-between !important;
        gap:2mm !important;
        margin:1.5mm 0 !important;
        font-size:7.5pt !important;
        text-align:left !important;
    }

    .recibo-fila span{
        font-weight:700 !important;
    }

    .recibo-fila strong{
        text-align:right !important;
        font-weight:900 !important;
    }

    .recibo-aviso{
        font-size:9pt !important;
        font-weight:900 !important;
    }

    .recibo-nota{
        margin-top:1.5mm !important;
        font-size:7pt !important;
        line-height:1.3 !important;
    }

    .recibo-pie{
        margin-top:4mm !important;
        font-size:6.5pt !important;
    }
}


/* ============================================================
   VAGAPP - VEHÍCULOS PARQUEADOS
   ============================================================ */

.parqueados-page{
    padding-bottom:60px;
}

.parqueados-resumen{
    width:100%;
    margin-top:22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:16px 18px;

    border:1px solid #cfe0eb;
    border-radius:15px;

    background:#ffffff;

    box-shadow:
        0 8px 20px rgba(25,62,91,.06);
}

.parqueados-total{
    display:flex;
    align-items:center;
    gap:12px;
}

.parqueados-total-icono{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#e9f3fc;

    font-size:24px;
}

.parqueados-total strong,
.parqueados-total span{
    display:block;
}

.parqueados-total strong{
    color:#0c2f63;
    font-size:14px;
    font-weight:900;
}

.parqueados-total span{
    margin-top:3px;
    color:#71869a;
    font-size:11px;
}

.parqueados-actualizado{
    color:#71869a;
    font-size:10px;
    text-align:right;
}

.parqueados-actualizado strong{
    display:block;
    margin-top:3px;
    color:#0c2f63;
    font-size:11px;
}

.parqueados-filtro{
    margin-top:14px;

    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
}

.parqueados-buscador{
    min-height:50px;
    padding:0 13px;

    display:flex;
    align-items:center;
    gap:10px;

    border:1px solid #cfe0eb;
    border-radius:13px;

    background:#ffffff;
}

.parqueados-buscador > span{
    font-size:18px;
}

.parqueados-buscador input{
    flex:1;
    min-width:0;

    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;

    background:transparent !important;

    color:#173653;

    font-size:12px;
    font-weight:700;
}

.parqueados-limpiar{
    padding:7px 10px;

    border:0;
    border-radius:8px;

    background:#eaf2f8;
    color:#315985;

    font-size:9px;
    font-weight:800;

    cursor:pointer;
}

.parqueados-actualizar{
    width:auto !important;
    min-width:135px;
    margin:0 !important;
}

.parqueados-grid{
    margin-top:18px;

    display:grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:16px;
}

.parqueado-card{
    padding:17px;

    border:1px solid #c7deed;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 8px 22px rgba(25,62,91,.07);
}

.parqueado-cabecera{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
}

.parqueado-icono{
    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #c7deed;
    border-radius:50%;

    background:#eaf4fc;

    font-size:28px;
}

.parqueado-identidad{
    min-width:0;
}

.parqueado-identidad strong,
.parqueado-identidad span{
    display:block;
}

.parqueado-identidad strong{
    color:#0c2f63;

    font-size:22px;
    font-weight:900;
    letter-spacing:2px;
}

.parqueado-identidad span{
    margin-top:3px;

    color:#3979b9;

    font-size:11px;
    font-weight:800;
}

.parqueado-concepto{
    max-width:150px;
    padding:7px 10px;

    border:1px solid #c4d9ea;
    border-radius:20px;

    background:#eef5fb;

    color:#315985;

    font-size:9px;
    font-weight:900;
    text-align:center;
}

.parqueado-info{
    margin-top:14px;
    padding:13px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;

    border-radius:13px;

    background:#f6f9fc;
}

.parqueado-info span,
.parqueado-info strong{
    display:block;
}

.parqueado-info span{
    color:#74899c;
    font-size:9px;
    font-weight:800;
}

.parqueado-info strong{
    margin-top:4px;

    color:#173653;

    font-size:12px;
}

.parqueado-pie{
    margin-top:13px;

    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:stretch;
}

.parqueado-valor{
    padding:12px 14px;

    border:1px solid #cfe0eb;
    border-radius:13px;

    background:#eef5fb;
}

.parqueado-valor span,
.parqueado-valor strong{
    display:block;
}

.parqueado-valor span{
    color:#71869a;

    font-size:9px;
    font-weight:800;
}

.parqueado-valor strong{
    margin-top:3px;

    color:#2b67a8;

    font-size:20px;
    font-weight:900;
}

.parqueado-salida-form{
    margin:0;
}

.parqueado-btn-salida{
    height:100%;
    min-height:58px;
    padding:0 16px !important;

    border:1px solid #245d99 !important;
    border-radius:11px !important;

    background:
        linear-gradient(
            135deg,
            #2b67a8,
            #3979b9
        ) !important;

    color:#ffffff !important;

    font-size:10px !important;
    font-weight:900 !important;

    cursor:pointer;
}

.parqueado-btn-salida:hover{
    background:
        linear-gradient(
            135deg,
            #2b67a8,
            #3979b9
        ) !important;

    color:#ffffff !important;
    transform:none !important;
}

.parqueados-vacio{
    width:min(650px,100%);
    margin:25px auto 0;
    padding:35px 24px;

    border:1px solid #cfe0eb;
    border-radius:18px;

    background:#ffffff;

    text-align:center;

    box-shadow:
        0 8px 22px rgba(25,62,91,.06);
}

.parqueados-vacio-icono{
    font-size:52px;
}

.parqueados-vacio h2{
    margin:12px 0 7px;

    color:#0c2f63;

    font-size:16px;
}

.parqueados-vacio p{
    margin:0 0 20px;

    color:#74899c;
    font-size:12px;
}

.parqueados-vacio .btn{
    width:min(260px,100%);
    margin:auto;
}

.parqueados-sin-resultados{
    display:none;
}


@media(max-width:900px){

    .parqueados-grid{
        grid-template-columns:1fr;
    }
}


@media(max-width:650px){

    .parqueados-resumen{
        align-items:flex-start;
        flex-direction:column;
    }

    .parqueados-actualizado{
        text-align:left;
    }

    .parqueados-filtro{
        grid-template-columns:1fr;
    }

    .parqueados-actualizar{
        width:100% !important;
    }

    .parqueado-cabecera{
        grid-template-columns:auto 1fr;
    }

    .parqueado-concepto{
        grid-column:1 / -1;
        max-width:none;
    }

    .parqueado-info{
        grid-template-columns:1fr;
    }

    .parqueado-pie{
        grid-template-columns:1fr;
    }

    .parqueado-btn-salida{
        width:100%;
        min-height:48px;
    }
}