/* =====================================================================
   Gestión de Turismo - estilos base
   Pensado primero para celular. El color principal y el de acento
   llegan desde la configuración (variables --primario y --acento).
   ===================================================================== */

:root {
    --primario: #0B6E8A;
    --acento: #F0A202;
    --tinta: #12252E;
    --tinta-suave: #4C616B;
    --fondo: #EEF3F5;
    --superficie: #FFFFFF;
    --borde: #D3DFE4;
    --ok: #1E7B4F;
    --ok-fondo: #E3F4EB;
    --error: #B3261E;
    --error-fondo: #FCE9E7;
    --info-fondo: #E2F0F5;
    --aviso-fondo: #FFF3D6;
    --radio: 10px;
    --alto-topbar: 56px;
    --alto-inferior: 62px;
    --ancho-lateral: 248px;
    --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--primario); }
img { max-width: 100%; }

.ico { width: 22px; height: 22px; flex: none; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Barra superior (celular)
   --------------------------------------------------------------------- */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    height: calc(var(--alto-topbar) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
    padding-right: 14px;
    background: var(--primario);
    color: #fff;
}
.topbar__menu {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 0; background: transparent; color: inherit;
    border-radius: 50%;
    cursor: pointer;
}
.topbar__menu:active { background: rgba(255,255,255,.16); }
.topbar__titulo { font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------
   Menú lateral (cajón en celular, fijo en escritorio)
   --------------------------------------------------------------------- */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(9, 24, 31, .5); }
.velo[hidden] { display: none; }

.lateral {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 50;
    width: min(84vw, 300px);
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    transform: translateX(-102%);
    transition: transform .22s ease;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lateral.abierto { transform: translateX(0); }

.lateral__marca {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 14px;
    font-weight: 700; font-size: 16px;
    border-bottom: 1px solid var(--borde);
}
.lateral__marca span { flex: 1; line-height: 1.2; }
.lateral__cerrar {
    border: 0; background: transparent; color: var(--tinta-suave);
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
}

.lateral__nav { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.lateral__nav a,
.lateral__nav .apagado {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px;
    border-radius: var(--radio);
    color: var(--tinta);
    text-decoration: none;
    font-weight: 500;
}
.lateral__nav a:hover { background: var(--fondo); }
.lateral__nav a.activo { background: var(--primario); color: #fff; }
.lateral__nav .apagado { color: #93A4AC; cursor: default; }
.lateral__nav .apagado small { margin-left: auto; font-size: 11px; }

.lateral__pie { border-top: 1px solid var(--borde); padding: 12px 14px 14px; }
.lateral__usuario { display: flex; flex-direction: column; margin-bottom: 8px; min-width: 0; }
.lateral__usuario strong { font-size: 14px; }
.lateral__usuario small { color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; }
.lateral__salir {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px; border-radius: var(--radio);
    color: var(--error); text-decoration: none; font-weight: 600;
}
.lateral__salir:hover { background: var(--error-fondo); }

/* ---------------------------------------------------------------------
   Contenido
   --------------------------------------------------------------------- */
.contenido {
    padding: calc(var(--alto-topbar) + env(safe-area-inset-top, 0px) + 16px) 14px
             calc(var(--alto-inferior) + env(safe-area-inset-bottom, 0px) + 22px);
    max-width: 1100px;
    margin: 0 auto;
}
.pagina-titulo { display: none; margin: 0 0 18px; font-size: 26px; line-height: 1.2; }

/* ---------------------------------------------------------------------
   Navegación inferior (celular)
   --------------------------------------------------------------------- */
.inferior {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    height: calc(var(--alto-inferior) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--superficie);
    border-top: 1px solid var(--borde);
}
.inferior a,
.inferior button {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: transparent;
    font: inherit; font-size: 11px; font-weight: 600;
    color: var(--tinta-suave);
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
}
.inferior a.activo { color: var(--primario); }

/* ---------------------------------------------------------------------
   Componentes
   --------------------------------------------------------------------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
    margin-bottom: 16px;
}
.tarjeta > h2 { margin: 0 0 12px; font-size: 17px; }
.tarjeta > .ayuda { margin-top: -6px; }

.ayuda { color: var(--tinta-suave); font-size: 13px; margin: 4px 0 0; }

.aviso {
    padding: 12px 14px;
    border-radius: var(--radio);
    margin-bottom: 14px;
    font-weight: 500;
    border: 1px solid transparent;
}
.aviso--ok    { background: var(--ok-fondo);    border-color: #B7DFC8; color: #14573A; }
.aviso--error { background: var(--error-fondo); border-color: #F1B9B4; color: #8A1B15; }
.aviso--info  { background: var(--info-fondo);  border-color: #B4D6E2; color: #0A4F63; }
.aviso--alerta{ background: var(--aviso-fondo); border-color: #F1D68C; color: #6B4C00; }

/* Formularios: 16px en los campos evita el zoom automático de iOS */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--tinta);
    background: #fff;
    border: 1px solid #B7C7CE;
    border-radius: 8px;
    padding: 11px 12px;
    min-height: 46px;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 3px solid rgba(11,110,138,.25); border-color: var(--primario); }
.campo input[type="color"] { padding: 4px; }

.grilla { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px;
    padding: 10px 20px;
    font: inherit; font-weight: 600; font-size: 16px;
    color: #fff; background: var(--primario);
    border: 0; border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(.92); }
.btn--claro { background: #fff; color: var(--primario); border: 1px solid var(--primario); }
.btn--peligro { background: var(--error); }
.btn--bloque { width: 100%; }

/* Tablas: en celular cada fila se convierte en una tarjeta */
.tabla-caja { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
table.tabla th { text-align: left; font-size: 13px; color: var(--tinta-suave); padding: 10px 12px; border-bottom: 1px solid var(--borde); }
table.tabla td { padding: 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }

@media (max-width: 719px) {
    table.tabla thead { display: none; }
    table.tabla, table.tabla tbody, table.tabla tr, table.tabla td { display: block; width: 100%; }
    table.tabla tr {
        background: var(--superficie);
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        padding: 8px 12px;
        margin-bottom: 10px;
    }
    table.tabla td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; }
    table.tabla td::before { content: attr(data-label); font-weight: 600; color: var(--tinta-suave); }
}

/* Ventanas emergentes */
.modal {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center;
    background: rgba(9, 24, 31, .55);
    padding: 12px;
}
.modal.abierto { display: flex; }
.modal__caja {
    width: 95%; max-width: 560px; max-height: 92vh; overflow-y: auto;
    background: var(--superficie); border-radius: 14px; padding: 18px;
}

/* Tablero de inicio */
.atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.atajo {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
}
.atajo .ico { color: var(--primario); }
.atajo small { font-weight: 400; color: var(--tinta-suave); }
.atajo--apagado { color: #93A4AC; }
.atajo--apagado .ico { color: #B5C3C9; }

/* ---------------------------------------------------------------------
   Pantalla de ingreso
   --------------------------------------------------------------------- */
.ingreso {
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: 20px;
    background: var(--primario);
}
.ingreso__caja {
    width: 100%; max-width: 400px;
    background: var(--superficie);
    border-radius: 16px;
    padding: 26px 22px;
}
.ingreso__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ingreso__marca img { width: 44px; height: 44px; }
.ingreso__marca strong { font-size: 19px; line-height: 1.2; }
.ingreso__marca small { display: block; color: var(--tinta-suave); font-weight: 500; }

/* ---------------------------------------------------------------------
   Escritorio
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
    .topbar, .inferior, .velo, .lateral__cerrar { display: none !important; }

    .lateral { transform: none; width: var(--ancho-lateral); border-right: 1px solid var(--borde); }

    .contenido {
        margin: 0 0 0 var(--ancho-lateral);
        max-width: none;
        padding: 28px 32px 40px;
    }
    .contenido > * { max-width: 1040px; }
    .pagina-titulo { display: block; }

    .grilla--2 { grid-template-columns: 1fr 1fr; }
    .atajos { grid-template-columns: repeat(4, 1fr); }
    .modal__caja { width: 100%; }
}

@media (min-width: 720px) and (max-width: 899px) {
    .grilla--2 { grid-template-columns: 1fr 1fr; }
    .atajos { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .lateral { transition: none; }
}


/* =====================================================================
   FASE 2 - viajes, coches, pasajeros
   ===================================================================== */
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.barra--separada { justify-content: space-between; }

.btn--chico { min-height: 38px; padding: 6px 14px; font-size: 14px; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros input[type="search"],
.filtros select {
    font: inherit; font-size: 16px; min-height: 46px;
    padding: 8px 12px;
    border: 1px solid #B7C7CE; border-radius: 8px; background: #fff; color: var(--tinta);
}
.filtros input[type="search"] { flex: 1 1 220px; min-width: 0; }

.vacio { color: var(--tinta-suave); margin: 8px 0; }

.acciones { white-space: nowrap; }
.acciones form { margin: 0 2px; }
@media (max-width: 719px) {
    table.tabla td.acciones { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
    table.tabla td.acciones::before { content: none; }
}
@media (min-width: 720px) {
    table.tabla td.acciones { text-align: right; }
}

.badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; line-height: 1.6;
}
.badge--gris   { background: #E6ECEF; color: #3B4F58; }
.badge--ok     { background: var(--ok-fondo); color: #14573A; }
.badge--alerta { background: var(--aviso-fondo); color: #6B4C00; }
.badge--info   { background: var(--info-fondo); color: #0A4F63; }
.badge--error  { background: var(--error-fondo); color: #8A1B15; }

.ficha { display: grid; grid-template-columns: 1fr; gap: 2px 24px; }
.ficha__fila {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.ficha__fila span { color: var(--tinta-suave); }
.ficha__fila strong { text-align: right; font-weight: 600; }
@media (min-width: 720px) { .ficha { grid-template-columns: 1fr 1fr; } }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }

/* ---- Mapa de asientos ---- */
.bus-mapa { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; padding: 6px 0 2px; }
.bus {
    border: 2px solid #9FB4BD; border-radius: 28px 28px 12px 12px;
    background: #F7FAFB; padding: 12px 14px 16px;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.bus__piso { font-weight: 700; font-size: 14px; }
.bus__frente {
    width: 100%; text-align: center; font-size: 12px; color: var(--tinta-suave);
    border-bottom: 2px dashed #C3D2D8; padding-bottom: 6px; margin-bottom: 2px;
}
.bus__fila { display: flex; gap: 6px; align-items: center; }
.bus__pasillo { width: 26px; flex: none; }

.asiento {
    width: 46px; height: 46px; flex: none;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1.05;
    color: var(--tinta); background: #fff;
    border: 2px solid #9FB4BD; border-radius: 9px 9px 5px 5px;
    padding: 0; cursor: default;
}
.asiento small { font-size: 9px; font-weight: 600; max-width: 42px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
button.asiento { cursor: pointer; touch-action: manipulation; }
button.asiento:hover { border-color: var(--primario); }
.asiento--ocupado { background: var(--primario); border-color: var(--primario); color: #fff; }
button.asiento--ocupado:hover { filter: brightness(1.1); }
.asiento--muestra { width: 18px; height: 18px; display: inline-block; vertical-align: middle; border-radius: 4px; margin-right: 4px; }

.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 12px; font-size: 14px; }


/* =====================================================================
   Marcas de pasajeros (restricciones alimentarias y observaciones)
   ===================================================================== */
.marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

fieldset.marcas-form {
    border: 1px solid var(--borde); border-radius: 10px;
    margin: 0 0 14px; padding: 8px 14px 12px;
}
fieldset.marcas-form legend { font-weight: 600; font-size: 14px; padding: 0 6px; }

.checks { display: grid; grid-template-columns: 1fr; gap: 2px 18px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; }
.check input[type="checkbox"] { width: 22px; height: 22px; flex: none; min-height: 0; }
@media (min-width: 720px) { .checks { grid-template-columns: 1fr 1fr; } }

.fila-marca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.fila-marca__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 320px; }
.fila-marca__form input[type="text"],
.fila-marca__form select {
    font: inherit; font-size: 16px; min-height: 42px; padding: 6px 10px;
    border: 1px solid #B7C7CE; border-radius: 8px; background: #fff; color: var(--tinta);
}
.fila-marca__form input[type="text"] { flex: 1 1 200px; min-width: 0; }


/* =====================================================================
   FASE 4a - caja, cuotas, liquidaciones
   ===================================================================== */
@media (min-width: 720px) {
    table.tabla th.num, table.tabla td.num { text-align: right; }
}
.entrada-tabla {
    font: inherit; font-size: 16px; min-height: 42px; padding: 6px 10px; width: 100%; max-width: 180px;
    border: 1px solid #B7C7CE; border-radius: 8px; background: #fff; color: var(--tinta);
}
@media (max-width: 719px) { .entrada-tabla { max-width: 190px; } }
summary::-webkit-details-marker { display: none; }

/* Al imprimir cualquier pantalla del sistema (por ejemplo el libro de caja) */
@media print {
    .topbar, .lateral, .inferior, .velo, .no-imprimir, .barra, .filtros, button, .btn { display: none !important; }
    body { background: #fff; }
    .contenido { margin: 0 !important; padding: 0 !important; max-width: none; }
    .tarjeta { break-inside: avoid; border-color: #999; }
    .pagina-titulo { display: block; }
}