/* =====================================================================
   Sistema de Estacionamiento · Estilos
   Paleta: azul profundo #15212F · azul corporativo #2E3A47 ·
           azul grisáceo #8296A9 · naranja #D98918 · blanco #FFFFFF
   Tipografía: Montserrat (Light 300 · Bold 700 · Extra Bold 800)
   ===================================================================== */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-latin-800-normal.woff2') format('woff2'); }

:root {
  --azul-profundo: #15212F;
  --azul-corp: #2E3A47;
  --azul-gris: #8296A9;
  --naranja: #D98918;
  --blanco: #FFFFFF;
  --gris-fondo: #F3F5F7;           /* tinte de azul grisáceo */
  --gris-borde: rgba(130, 150, 169, 0.35);
  --gris-suave: rgba(130, 150, 169, 0.14);
  --naranja-suave: rgba(217, 137, 24, 0.14);
  --radio: 18px;
  --sombra: 0 2px 10px rgba(21, 33, 47, 0.06);

  --bs-body-font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-font-weight: 300;
  --bs-body-color: #15212F;
  --bs-body-bg: #F3F5F7;
  --bs-primary: #15212F;
  --bs-primary-rgb: 21, 33, 47;
  --bs-secondary: #8296A9;
  --bs-secondary-rgb: 130, 150, 169;
  --bs-warning: #D98918;
  --bs-warning-rgb: 217, 137, 24;
  --bs-link-color: #2E3A47;
  --bs-link-hover-color: #D98918;
  --bs-border-color: rgba(130, 150, 169, 0.35);
  --bs-border-radius: 14px;
  --bs-border-radius-lg: 18px;
}

html, body { height: 100%; }
body { font-family: var(--bs-body-font-family); font-weight: 300; color: var(--azul-profundo); background: var(--gris-fondo); -webkit-font-smoothing: antialiased; }
b, strong, .fw-bold { font-weight: 700 !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 800; letter-spacing: -0.01em; color: var(--azul-corp); }
.titulo { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--azul-corp); }
.subtitulo { font-weight: 700; color: var(--azul-gris); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.text-naranja { color: var(--naranja) !important; }
.text-azul-gris { color: var(--azul-gris) !important; }
.text-azul { color: var(--azul-corp) !important; }
.bg-azul-profundo { background: var(--azul-profundo) !important; color: #fff; }
.bg-naranja { background: var(--naranja) !important; color: #fff; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }

/* ---------- Barra superior ---------- */
.topbar { background: var(--azul-profundo); color: #fff; padding: 0.65rem 1rem; box-shadow: 0 2px 12px rgba(21,33,47,.25); position: sticky; top: 0; z-index: 1030; }
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; }
.topbar .brand .isotipo { width: 30px; height: 30px; border-radius: 50% 50% 50% 8px; background: var(--naranja); display: inline-block; }
.topbar .user-chip { background: rgba(255,255,255,.08); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; display: inline-flex; align-items: center; gap: .5rem; }
.topbar .user-chip .rol { color: var(--naranja); font-weight: 700; letter-spacing: .06em; font-size: .72rem; text-transform: uppercase; }
.topbar .btn-salir { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: .35rem 1rem; font-weight: 700; font-size: .8rem; }
.topbar .btn-salir:hover { background: var(--naranja); border-color: var(--naranja); }
.topbar .nav-back { font-weight: 700; font-size: .85rem; opacity: .85; }
.topbar .nav-back:hover { opacity: 1; color: var(--naranja); }

/* ---------- Contenedor ---------- */
.page { padding: 1.5rem 1rem 3rem; max-width: 1200px; margin: 0 auto; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.page-header h1 small { display: block; font-weight: 700; color: var(--azul-gris); font-size: .8rem; letter-spacing: .08em; margin-top: .25rem; }

/* ---------- Tarjetas ---------- */
.card { border: 1px solid var(--gris-borde); border-radius: var(--radio); box-shadow: var(--sombra); background: #fff; }
.card-header { background: transparent; border-bottom: 1px solid var(--gris-borde); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--azul-gris); padding: .9rem 1.25rem; border-radius: var(--radio) var(--radio) 0 0 !important; }

/* ---------- Botones grandes (menú principal) ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.big-btn { display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 1.5rem; border-radius: 24px; background: #fff; border: 2px solid transparent; color: var(--azul-profundo); text-decoration: none; box-shadow: var(--sombra); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; position: relative; overflow: hidden; }
.big-btn:hover, .big-btn:focus-visible { transform: translateY(-2px); border-color: var(--naranja); box-shadow: 0 8px 24px rgba(21,33,47,.12); color: var(--azul-profundo); outline: none; }
.big-btn:active { transform: translateY(0); }
.big-btn .icono { width: 54px; height: 54px; border-radius: 16px; background: var(--gris-suave); display: flex; align-items: center; justify-content: center; color: var(--azul-corp); }
.big-btn .icono svg { width: 30px; height: 30px; }
.big-btn .etiqueta { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1.15rem; line-height: 1.2; margin-top: 1rem; }
.big-btn .detalle { font-weight: 300; color: var(--azul-gris); font-size: .85rem; margin-top: .25rem; }
.big-btn.primario { background: var(--azul-profundo); color: #fff; }
.big-btn.primario .icono { background: var(--naranja); color: #fff; }
.big-btn.primario .detalle { color: rgba(255,255,255,.65); }
.big-btn.primario:hover { color: #fff; }
.big-btn.acento .icono { background: var(--naranja-suave); color: var(--naranja); }
.big-btn::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--gris-suave); opacity: .6; }
.big-btn.primario::after { background: rgba(255,255,255,.06); }
.big-btn .contador { position: absolute; top: 1.25rem; right: 1.25rem; background: var(--naranja); color: #fff; font-weight: 800; border-radius: 999px; padding: .25rem .8rem; font-size: 1rem; }

/* ---------- Botones ---------- */
.btn { font-weight: 700; border-radius: 14px; letter-spacing: .03em; }
.btn-lg, .btn-xl { padding: .9rem 1.5rem; font-size: 1.05rem; text-transform: uppercase; }
.btn-xl { padding: 1.1rem 1.5rem; font-size: 1.2rem; min-height: 64px; }
.btn-primary { --bs-btn-bg: #15212F; --bs-btn-border-color: #15212F; --bs-btn-hover-bg: #2E3A47; --bs-btn-hover-border-color: #2E3A47; --bs-btn-active-bg: #2E3A47; --bs-btn-active-border-color: #2E3A47; --bs-btn-disabled-bg: #8296A9; --bs-btn-disabled-border-color: #8296A9; }
.btn-naranja { --bs-btn-bg: #D98918; --bs-btn-border-color: #D98918; --bs-btn-color: #fff; --bs-btn-hover-bg: #c27a13; --bs-btn-hover-border-color: #c27a13; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #c27a13; --bs-btn-active-border-color: #c27a13; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #e9c48b; --bs-btn-disabled-border-color: #e9c48b; --bs-btn-disabled-color: #fff; }
.btn-outline-azul { --bs-btn-color: #2E3A47; --bs-btn-border-color: #8296A9; --bs-btn-hover-bg: #2E3A47; --bs-btn-hover-border-color: #2E3A47; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #2E3A47; --bs-btn-active-border-color: #2E3A47; --bs-btn-active-color: #fff; }
.btn-suave { --bs-btn-bg: rgba(130,150,169,.14); --bs-btn-border-color: transparent; --bs-btn-color: #2E3A47; --bs-btn-hover-bg: rgba(130,150,169,.28); --bs-btn-hover-color: #15212F; --bs-btn-active-bg: rgba(130,150,169,.35); }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(217,137,24,.35); }

/* ---------- Formularios ---------- */
.form-label { font-weight: 700; color: var(--azul-corp); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.form-control, .form-select { border-radius: 14px; border: 1.5px solid var(--gris-borde); padding: .7rem .9rem; font-weight: 300; color: var(--azul-profundo); }
.form-control:focus, .form-select:focus { border-color: var(--naranja); box-shadow: 0 0 0 .2rem rgba(217,137,24,.2); }
.form-control-xl { font-size: 1.6rem; padding: .9rem 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.form-control::placeholder { color: rgba(130,150,169,.8); font-weight: 300; text-transform: none; letter-spacing: 0; }
.input-scan { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; text-align: center; letter-spacing: .08em; padding: 1rem; border: 2px dashed var(--azul-gris); background: #fff; }
.input-scan:focus { border-style: solid; border-color: var(--naranja); }
.input-scan.flex-grow-1 { width: auto; min-width: 220px; }
.ticket-head .badge-abierto { background: rgba(255,255,255,.16); color: #fff; }
.ticket-head .badge-cancelado { color: #fff; border-color: rgba(255,255,255,.6); }
.form-check-input:checked { background-color: var(--azul-profundo); border-color: var(--azul-profundo); }

/* Selector de modalidad (botones grandes tipo radio) */
.modalidad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modalidad-opt input { position: absolute; opacity: 0; pointer-events: none; }
.modalidad-opt label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 110px; border: 2px solid var(--gris-borde); border-radius: 20px; background: #fff; cursor: pointer; text-align: center; padding: 1rem; transition: all .12s ease; }
.modalidad-opt label .nombre { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; color: var(--azul-corp); }
.modalidad-opt label .precio { font-weight: 300; color: var(--azul-gris); font-size: .9rem; }
.modalidad-opt input:checked + label { border-color: var(--naranja); background: var(--azul-profundo); }
.modalidad-opt input:checked + label .nombre { color: #fff; }
.modalidad-opt input:checked + label .precio { color: var(--naranja); font-weight: 700; }
.modalidad-opt input:focus-visible + label { box-shadow: 0 0 0 .25rem rgba(217,137,24,.35); }

/* ---------- Badges de estado ---------- */
.badge { font-weight: 700; letter-spacing: .06em; border-radius: 999px; padding: .4em .85em; font-size: .72rem; text-transform: uppercase; }
.badge-abierto { background: var(--gris-suave); color: var(--azul-corp); }
.badge-pagado { background: var(--naranja); color: #fff; }
.badge-cerrado { background: var(--azul-corp); color: #fff; }
.badge-cancelado { background: transparent; color: var(--azul-gris); border: 1px solid var(--azul-gris); }
.badge-modalidad { background: var(--azul-profundo); color: #fff; }
.badge-libre { background: var(--naranja-suave); color: var(--naranja); }

/* ---------- Alertas ---------- */
.alert { border-radius: 16px; border: 0; font-weight: 300; }
.alert-success { background: var(--azul-profundo); color: #fff; }
.alert-success strong { color: var(--naranja); }
.alert-warning, .alert-danger, .alert-error { background: var(--naranja-suave); color: #8a5510; border-left: 4px solid var(--naranja); }
.alert-info { background: var(--gris-suave); color: var(--azul-corp); }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; font-size: .92rem; }
.table thead th { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--azul-gris); border-bottom: 2px solid var(--gris-borde); white-space: nowrap; }
.table td { vertical-align: middle; border-color: var(--gris-suave); }
.table-hover tbody tr:hover { background: rgba(217,137,24,.06); }
.table .placa { font-weight: 800; letter-spacing: .1em; font-size: 1.05rem; }
.table .folio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }

/* ---------- KPIs ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.kpi { background: #fff; border-radius: var(--radio); padding: 1.1rem 1.25rem; border: 1px solid var(--gris-borde); box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi .kpi-label { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--azul-gris); }
.kpi .kpi-value { font-weight: 800; font-size: 1.75rem; color: var(--azul-corp); line-height: 1.1; margin-top: .35rem; }
.kpi .kpi-sub { font-size: .78rem; color: var(--azul-gris); margin-top: .2rem; }
.kpi.kpi-dark { background: var(--azul-profundo); border-color: var(--azul-profundo); }
.kpi.kpi-dark .kpi-label { color: rgba(255,255,255,.65); }
.kpi.kpi-dark .kpi-value { color: #fff; }
.kpi.kpi-dark .kpi-sub { color: var(--naranja); }
.kpi.kpi-naranja .kpi-value { color: var(--naranja); }
.kpi::after { content: ''; position: absolute; right: -24px; top: -24px; width: 70px; height: 70px; border-radius: 50%; background: var(--gris-suave); }
.kpi.kpi-dark::after { background: rgba(255,255,255,.05); }

/* ---------- Panel de ticket en salida ---------- */
.ticket-panel { background: #fff; border-radius: 24px; border: 1px solid var(--gris-borde); box-shadow: var(--sombra); overflow: hidden; }
.ticket-panel .ticket-head { background: var(--azul-profundo); color: #fff; padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.ticket-panel .ticket-head .placa { font-weight: 800; font-size: 2rem; letter-spacing: .12em; }
.ticket-panel .ticket-head .folio { font-family: ui-monospace, Menlo, monospace; color: var(--naranja); font-weight: 700; font-size: 1.05rem; }
.ticket-panel .dato { padding: .6rem 0; border-bottom: 1px solid var(--gris-suave); display: flex; justify-content: space-between; gap: 1rem; }
.ticket-panel .dato .k { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--azul-gris); }
.ticket-panel .dato .v { font-weight: 700; color: var(--azul-corp); text-align: right; }
.ticket-panel .total { background: var(--gris-fondo); border-radius: 18px; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.ticket-panel .total .k { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ticket-panel .total .v { font-weight: 800; font-size: 2.4rem; color: var(--naranja); }
.linea-desglose { display: flex; justify-content: space-between; font-size: .9rem; color: var(--azul-corp); padding: .2rem 0; }
.linea-desglose.beneficio { color: var(--naranja); font-weight: 700; }

/* ---------- Lista de coincidencias ---------- */
.match-item { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border: 1px solid var(--gris-borde); border-radius: 14px; background: #fff; cursor: pointer; margin-bottom: .5rem; }
.match-item:hover { border-color: var(--naranja); }

/* ---------- Utilidades ---------- */
.tiempo-vivo { font-variant-numeric: tabular-nums; }
.sep { height: 1px; background: var(--gris-borde); margin: 1.25rem 0; }
.nota { font-size: .82rem; color: var(--azul-gris); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.pill-filtro { border-radius: 999px; font-weight: 700; font-size: .8rem; padding: .45rem 1rem; }
.pill-filtro.active { background: var(--azul-profundo) !important; color: #fff !important; border-color: var(--azul-profundo) !important; }
.modal-content { border-radius: 22px; border: 0; }
.modal-header { border-bottom: 1px solid var(--gris-borde); }
.modal-title { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-side { background: var(--azul-profundo); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-side::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--naranja); right: -180px; bottom: -180px; opacity: .9; }
.login-side::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(130,150,169,.25); left: -100px; top: 30%; }
.login-side h1 { color: #fff; font-size: 2rem; text-transform: uppercase; letter-spacing: .04em; }
.login-side p { color: rgba(255,255,255,.75); max-width: 380px; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-form .card { width: 100%; max-width: 420px; padding: 2rem; }
@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-side { min-height: 220px; padding: 2rem; } .login-side::after { width: 260px; height: 260px; right: -120px; bottom: -140px; } }
@media (max-width: 576px) { .page { padding: 1rem .75rem 2.5rem; } .modalidad-grid { grid-template-columns: 1fr; } .ticket-panel .ticket-head .placa { font-size: 1.5rem; } .ticket-panel .total .v { font-size: 1.9rem; } .page-header h1 { font-size: 1.2rem; } }

/* Camera modal */
#camReader { width: 100%; min-height: 280px; border-radius: 16px; overflow: hidden; background: #000; }
#camReader video { width: 100% !important; border-radius: 16px; }

/* Print: la interfaz no se imprime */
@media print { .no-print, .topbar, .page-header .acciones { display: none !important; } body { background: #fff; } }