:root {
  --azul: #00153f; --azul-700: #1b2d5a; --lavanda: #dcd9e2; --niebla: #efedf2; --blanco: #ffffff;
  --oro: #d4af37; --grafito: #383838; --pizarra: #5d6680;
  --ok: #1d7a55; --atencion: #f2b53a; --alerta: #c4321c;
  --radio: 20px; --radio-sm: 14px;
  --sobre-marca: #dcd9e2; --marca: #00153f; --marca-2: #1b2d5a; --sup: #ffffff; --lavanda-2: #cfcbd8; --barra: #00153f; --hoy: #fbeec7; --vencida: #f8ded9; --neg: #c4321c; --enlace: #1b2d5a;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --azul: #eceef5; --azul-700: #c9cfe2; --lavanda: #2f3d5c; --niebla: #0d1526; --grafito: #d5d8e3; --pizarra: #a7afc6; --ok: #2c9a70;
  --marca: #1b2d5a; --marca-2: #27407a; --sup: #162036; --lavanda-2: #3a4a6e; --barra: #8ea2d6; --hoy: #4a3c12; --vencida: #52211a; --neg: #ff8f7c; --enlace: #a9bdf0; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --azul: #eceef5; --azul-700: #c9cfe2; --lavanda: #2f3d5c; --niebla: #0d1526; --grafito: #d5d8e3; --pizarra: #a7afc6; --ok: #2c9a70;
  --marca: #1b2d5a; --marca-2: #27407a; --sup: #162036; --lavanda-2: #3a4a6e; --barra: #8ea2d6; --hoy: #4a3c12; --vencida: #52211a; --neg: #ff8f7c; --enlace: #a9bdf0; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--niebla); color: var(--azul); font-family: 'League Spartan', system-ui, sans-serif; font-size: 16px; line-height: 1.35; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 34px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 22px; font-weight: 600; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 600; }
button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit; touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
button, a, label { -webkit-tap-highlight-color: transparent; }
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.muted { color: var(--pizarra); }
.chico { font-size: 14px; }
.etq { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pizarra); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.neg { color: var(--neg); }

/* Botones */
.btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radio-sm); font-weight: 600; cursor: pointer; background: var(--lavanda); color: var(--azul); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:hover { background: var(--lavanda-2); }
.btn.prim { background: var(--marca); color: #fff; }
.btn.prim:hover { background: var(--marca-2); }
.btn.lin { background: transparent; border: 2px solid var(--azul); }
.btn.lin:hover { background: var(--niebla); }
.btn.peligro { background: var(--alerta); color: #fff; }
.btn.mini { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .celda-btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 15px; font-weight: 600; }
.campo input, .campo select, .campo textarea { min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--lavanda); border-radius: var(--radio-sm); background: var(--niebla); width: 100%; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo .ayuda { font-size: 14px; color: var(--pizarra); }
.grilla-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }

/* Login */
.login { min-height: 100vh; min-height: 100dvh; background: var(--marca); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 32px 16px; }
.login .marca { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.login .marca-txt { font-size: 28px; letter-spacing: .04em; font-weight: 700; }
.login form, .login .tarjeta-login { background: var(--sup); color: var(--azul); border-radius: 24px; padding: 28px 24px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; }
.login .pie { color: var(--sobre-marca); font-size: 14px; text-align: center; }
.err { color: var(--alerta); font-weight: 600; font-size: 15px; }
.opcion-empresa { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 14px 18px; border: 1.5px solid var(--lavanda); border-radius: var(--radio-sm); background: var(--niebla); cursor: pointer; font-size: 19px; font-weight: 600; text-align: left; }
.opcion-empresa:hover { border-color: var(--azul); }

/* Estructura */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.lateral { background: var(--marca); color: #fff; padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral .logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 700; font-size: 18px; letter-spacing: .03em; line-height: 1.05; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--sobre-marca); text-align: left; font-size: 16px; font-weight: 500; cursor: pointer; width: 100%; }
.nav button:hover { background: var(--marca-2); color: #fff; }
.nav button[aria-current="page"] { background: var(--sup); color: var(--azul); font-weight: 600; }
.nav svg { flex: none; }
.lateral .bajo { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--sobre-marca); }
.lateral .bajo button { background: none; border: 0; color: var(--sobre-marca); text-align: left; padding: 8px 12px; min-height: 40px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.lateral .bajo button:hover { background: var(--marca-2); color: #fff; }
.principal { padding: 24px 32px 96px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cabecera { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: flex-end; }
.cabecera .sub { color: var(--pizarra); margin-top: 4px; }
.selector-empresa { display: inline-flex; background: var(--sup); border-radius: 12px; padding: 4px; gap: 4px; }
.selector-empresa button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; cursor: pointer; color: var(--pizarra); }
.selector-empresa button[aria-pressed="true"] { background: var(--marca); color: #fff; }
.aviso-borrador { background: var(--lavanda); border-radius: 12px; padding: 8px 14px; font-size: 14px; }

/* Tarjetas */
.tarjeta { background: var(--sup); border-radius: var(--radio); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tarjeta > .tit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { background: var(--sup); border-radius: var(--radio); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi.fuerte { background: var(--marca); color: #fff; }
.kpi.fuerte .etq, .kpi.fuerte .muted { color: var(--sobre-marca); }
.kpi .val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.kpi.fuerte .neg { color: #ffb4a6; }
.dos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Alertas */
.alerta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-radius: var(--radio-sm); padding: 12px 16px; font-weight: 500; }
.alerta.roja { background: var(--alerta); color: #fff; }
.alerta.amarilla { background: var(--atencion); color: #00153f; }
.alerta.lavanda { background: var(--lavanda); }
.alerta .btn { margin-left: auto; }
.alerta.roja .btn { background: var(--sup); color: var(--alerta); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--lavanda); white-space: nowrap; }
.chip.ok { background: var(--ok); color: #fff; }
.chip.atencion { background: var(--atencion); color: #00153f; }
.chip.alerta-c { background: var(--alerta); color: #fff; }
.chip.azul { background: var(--marca); color: #fff; }
.chip.oro { background: transparent; border: 1.5px solid var(--oro); color: var(--grafito); }

/* Composición */
.grupo { border-top: 1px solid var(--lavanda); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.grupo:first-of-type { border-top: 0; padding-top: 0; }
.grupo-tit { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 17px; }
.linea { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; padding-left: 12px; color: var(--grafito); }
.linea .der { display: flex; gap: 8px; align-items: center; }
.link { background: none; border: 0; padding: 0 4px; min-height: 28px; color: var(--enlace); text-decoration: underline; cursor: pointer; font-size: 14px; }
.total-liquidez { display: flex; justify-content: space-between; background: var(--niebla); border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 18px; }

/* Agenda */
.agenda-grupo { display: flex; flex-direction: column; gap: 6px; }
.tarea { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--niebla); }
.tarea .dia { text-align: center; line-height: 1; }
.tarea .dia b { display: block; font-size: 21px; }
.tarea .dia span { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--pizarra); }
.tarea.hoy { background: var(--hoy); }
.tarea.vencida { background: var(--vencida); }
.tarea .tt { font-weight: 600; overflow-wrap: anywhere; }
.tarea .der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* Tablas */
.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--pizarra); padding: 8px 10px; border-bottom: 1.5px solid var(--lavanda); white-space: nowrap; background: var(--sup); }
td { padding: 8px 10px; border-bottom: 1px solid var(--niebla); vertical-align: middle; }
th.num { text-align: right; }
tfoot td, tr.total td { font-weight: 700; border-top: 1.5px solid var(--lavanda); background: var(--sup); }
tr.tachado td { color: var(--pizarra); }
tr.tachado .tx { text-decoration: line-through; }
.fija { position: sticky; left: 0; background: var(--sup); z-index: 1; }
.haber-ind { padding-left: 30px; }
.celda-btn { background: none; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; width: 100%; text-align: right; font-size: 15px; }
.celda-btn:hover { background: var(--niebla); }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; }
.pestanas button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sup); font-weight: 600; cursor: pointer; color: var(--pizarra); }
.pestanas button[aria-pressed="true"] { background: var(--marca); color: #fff; }
.vacio { padding: 20px; text-align: center; color: var(--pizarra); background: var(--niebla); border-radius: 12px; }
.candado { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--pizarra); }

/* Caja */
.pregunta { background: var(--marca); color: #fff; }
.pregunta h2 { color: #fff; }
.pregunta .muted { color: var(--sobre-marca); }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opcion { min-height: 76px; padding: 12px 16px; border: 0; border-radius: var(--radio-sm); background: var(--sup); color: var(--azul); font-size: 18px; font-weight: 600; cursor: pointer; text-align: left; }
.opcion small { display: block; font-size: 14px; font-weight: 400; color: var(--pizarra); margin-top: 2px; }
.opcion:hover { background: var(--lavanda); }
.pregunta form { background: var(--sup); color: var(--azul); border-radius: var(--radio-sm); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.vista-asiento { background: var(--niebla); border-radius: 10px; padding: 10px 14px; font-size: 15px; display: flex; flex-direction: column; gap: 3px; }
.vista-asiento .fila { display: flex; justify-content: space-between; gap: 12px; }

/* Modal */
.fondo-modal { position: fixed; inset: 0; background: rgba(0, 21, 63, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 40; }
.modal { background: var(--sup); border-radius: var(--radio); padding: 22px; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.modal.ancho { width: min(820px, 100%); }
.modal .pie-modal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--marca); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 500; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .15s; max-width: calc(100% - 32px); }
#toast.ver { opacity: 1; }
#tooltip { position: fixed; background: var(--marca); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 14px; pointer-events: none; z-index: 70; white-space: nowrap; }

/* Voz */
.mic-flotante { position: fixed; right: 24px; bottom: 24px; min-height: 56px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--marca); color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; z-index: 30; box-shadow: 0 4px 16px rgba(0, 21, 63, .35); }
.mic-flotante:hover { background: var(--marca-2); }
.mic-gran { width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--marca); color: #fff; align-self: center; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mic-gran.oyendo { background: var(--alerta); animation: pulso 1.2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(196, 50, 28, .45); } 100% { box-shadow: 0 0 0 20px rgba(196, 50, 28, 0); } }
@media (prefers-reduced-motion: reduce) { .mic-gran.oyendo { animation: none; } }
.propuesta { background: var(--niebla); border-radius: var(--radio-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.ejemplos button { background: var(--niebla); border: 0; border-radius: 999px; padding: 6px 12px; min-height: 34px; font-size: 14px; cursor: pointer; }

/* Gráfico */
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; }
.barra { fill: var(--barra); }
.barra-hit:hover + .barra, .barra-hit:focus + .barra { fill: var(--pizarra); }

/* Agregados: clientes, usuarios, autocompletar, confirmación */
.kpis-uno { grid-template-columns: minmax(0, 340px); }
.resumen-asientos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; font-variant-numeric: tabular-nums; }
#confirm-root .fondo-modal { z-index: 50; }
.resumen-cambio { background: var(--niebla); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.resumen-cambio div { display: flex; justify-content: space-between; gap: 14px; }
.resumen-cambio span:first-child { color: var(--pizarra); }
.resumen-cambio span:last-child { text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.ac { position: relative; }
.ac-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--sup); border: 1.5px solid var(--lavanda); border-radius: 12px; z-index: 45; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 21, 63, .25); }
.ac-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--azul); }
.ac-lista button:hover, .ac-lista button:focus { background: var(--niebla); }
.ac-lista .cod { color: var(--pizarra); font-size: 13px; margin-right: 6px; }
.ac-lista .nuevo { font-weight: 600; border-top: 1px solid var(--lavanda); }
.tecnicos { border: 1.5px solid var(--lavanda); border-radius: var(--radio-sm); padding: 8px 14px 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.tecnicos legend { font-size: 15px; font-weight: 600; padding: 0 6px; }
.tecnicos label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.foto { border-radius: 50%; object-fit: cover; flex: none; background: var(--lavanda); color: var(--azul); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.lateral .bajo .sesion { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.link-claro { background: none; border: 0; color: var(--sobre-marca); text-decoration: underline; cursor: pointer; font-size: 14px; min-height: 36px; }
.login .tarjeta-login .link-oscuro, .login form .link-oscuro { background: none; border: 0; color: var(--enlace); text-decoration: underline; cursor: pointer; font-size: 14px; min-height: 32px; align-self: center; }
.link-sobre { color: var(--sobre-marca); padding: 0; }
.celda-input { width: 100%; min-width: 120px; min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--lavanda); border-radius: 10px; background: var(--niebla); }
.permiso { text-align: center; }
.permiso input { width: 20px; height: 20px; }
.buscador { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.buscador .campo { flex: 1; min-width: 200px; }

/* Pantallas medianas */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos { grid-template-columns: minmax(0, 1fr); }
}

/* Móvil */
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; padding: 12px 16px; gap: 12px; }
  .lateral .bajo { flex-direction: row; flex-wrap: wrap; margin-top: 0; gap: 2px 6px; }
  .lateral .bajo button { min-height: 36px; padding: 4px 8px; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .nav button { width: auto; white-space: nowrap; flex: none; }
  .principal { padding: 16px 16px 96px; }
  .tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 28px; }
  .mic-flotante { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .kpis, .tres, .opciones { grid-template-columns: minmax(0, 1fr); }
  .mic-flotante span { display: none; }
  .mic-flotante { padding: 0 16px; }
}