/* SincroTaquilla — hoja única.
   Es una herramienta que se opera de pie y con afán, no un documento: tipos
   grandes, objetivos de clic amplios y el estado codificado en color y forma. */

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

:root {
  --paper:      #ffffff;
  --paper-2:    #f4f7f8;
  --paper-3:    #e9eef0;
  --rule:       #dfe6e9;
  --hairline:   #eaf0f1;

  --c-ink:      #0b3f4d;
  --c-1:        #0e6072;
  --c-2:        #147d94;
  --c-accent:   #0e6072;
  --c-wash:     rgba(14,96,114,.07);
  --c-edge:     rgba(14,96,114,.22);

  --ok:         #15633c;
  --ok-wash:    #eef6f1;
  --ok-edge:    rgba(21,99,60,.24);
  --warn:       #8a5a12;
  --warn-wash:  #fdf6e8;
  --warn-edge:  rgba(138,90,18,.24);
  --crit:       #a52620;
  --crit-wash:  #fcf1f0;
  --crit-edge:  rgba(165,38,32,.24);

  --text:       #0d1a20;
  --text-muted: #4c5f68;
  --text-dim:   #6a7c85;

  --shadow:     0 1px 2px rgba(13,26,32,.05), 0 4px 14px rgba(13,26,32,.06);
  --shadow-lg:  0 10px 40px rgba(13,26,32,.18);

  --f-ui:   'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper-2); color: var(--text); font-family: var(--f-ui); font-size: 15px; line-height: 1.5; }

/* ===== BARRA ===== */
.topbar { background: var(--c-ink); color: #fff; padding: 0 20px; height: 58px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 40; }
.topbar .marca { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.topbar .marca span { color: #7ecfe0; }
.topbar nav { display: flex; gap: 4px; margin-left: 10px; }
.topbar nav a { color: rgba(255,255,255,.72); text-decoration: none; padding: 7px 13px; border-radius: 7px; font-size: 14px; }
.topbar nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.topbar nav a.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.topbar .quien { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: rgba(255,255,255,.78); }
.topbar .quien b { color: #fff; font-weight: 600; }
.topbar .salir { background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-family: inherit; }
.topbar .salir:hover { background: rgba(255,255,255,.12); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }

.cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cab h1 { font-size: 24px; letter-spacing: -.015em; }
.cab .sub { color: var(--text-muted); font-size: 14px; margin-top: 2px; }

/* ===== BOTONES ===== */
.btn { font-family: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 9px; padding: 10px 18px; cursor: pointer; background: var(--c-1); color: #fff; }
.btn:hover { background: var(--c-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sec { background: var(--paper); color: var(--c-accent); border-color: var(--c-edge); }
.btn.sec:hover { background: var(--c-wash); }
.btn.gris { background: var(--paper); color: var(--text-muted); border-color: var(--rule); }
.btn.gris:hover { background: var(--paper-3); }
.btn.peligro { background: var(--crit); }
.btn.peligro:hover { filter: brightness(.9); }
.btn.grande { font-size: 16px; padding: 13px 26px; }
.btn.full { width: 100%; }

/* ===== TARJETAS ===== */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 13px; box-shadow: var(--shadow); }
.card .card-cab { padding: 14px 18px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card .card-cab h2 { font-size: 16px; }
.card .card-cuerpo { padding: 18px; }

/* ===== TABLERO DE DESPACHOS ===== */
.grupo { margin-bottom: 30px; }
.grupo > h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-accent); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.grupo > h2::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.despachos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); }

.nuevo {
  border: 2px dashed var(--c-edge); border-radius: 13px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 168px; cursor: pointer; color: var(--c-accent); font-weight: 600; font-size: 15px;
}
.nuevo:hover { background: var(--c-wash); border-color: var(--c-1); }
.nuevo .mas { font-size: 30px; line-height: 1; font-weight: 300; }

.desp { background: var(--paper); border: 1px solid var(--rule); border-radius: 13px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; min-height: 168px; }
.desp.despachado { opacity: .62; }
.desp .horas { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.desp .horas b { display: block; font-size: 15px; color: var(--text); font-family: var(--f-mono); }
.desp .horas .salida b { color: var(--ok); }
.desp .veh { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.desp .veh small { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); font-family: var(--f-mono); letter-spacing: .04em; margin-top: 1px; }
.desp .barra { height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
.desp .barra i { display: block; height: 100%; background: var(--c-2); }
.desp .barra.lleno i { background: var(--warn); }
.desp .cupo { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); }
.desp .cupo b { color: var(--text); }
.desp .acciones { display: flex; gap: 8px; margin-top: auto; }
.desp .acciones .btn { flex: 1; padding: 9px 10px; font-size: 13px; }

.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pill.abierto { color: var(--ok); background: var(--ok-wash); border: 1px solid var(--ok-edge); }
.pill.despachado { color: var(--text-dim); background: var(--paper-3); border: 1px solid var(--rule); }
.pill.anulado { color: var(--crit); background: var(--crit-wash); border: 1px solid var(--crit-edge); }
.pill.menor { color: var(--warn); background: var(--warn-wash); border: 1px solid var(--warn-edge); }

/* ===== FORMULARIOS ===== */
.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.campo > span .req { color: var(--crit); }
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 9px; padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-2); box-shadow: 0 0 0 3px var(--c-wash); }
input:disabled { background: var(--paper-2); color: var(--text-dim); }
.fila { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: center; gap: 9px; font-size: 14.5px; cursor: pointer; padding: 10px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--c-1); }

/* ===== MODAL ===== */
.velo { position: fixed; inset: 0; background: rgba(13,26,32,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 60; }
.velo[hidden] { display: none; }
.modal { background: var(--paper); border-radius: 15px; width: 100%; max-width: 680px; box-shadow: var(--shadow-lg); }
.modal .m-cab { padding: 18px 22px; border-bottom: 1px solid var(--hairline); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal .m-cab h2 { font-size: 19px; }
.modal .m-cab .ctx { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-family: var(--f-mono); }
.modal .m-cab .cerrar { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 0 4px; }
.modal .m-cuerpo { padding: 22px; }
.modal .m-pie { padding: 16px 22px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper-2); border-radius: 0 0 15px 15px; }
.total { font-size: 13px; color: var(--text-muted); }
.total b { display: block; font-size: 26px; color: var(--c-ink); font-family: var(--f-mono); font-weight: 700; }

fieldset { border: 1px solid var(--rule); border-radius: 11px; padding: 16px; margin-top: 6px; }
fieldset legend { font-size: 12.5px; font-weight: 700; color: var(--warn); padding: 0 7px; text-transform: uppercase; letter-spacing: .05em; }

/* ===== TABLAS ===== */
.tabla-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
/* Dentro de .tabla-scroll (overflow) un sticky con top>0 se corre hacia abajo
   y tapa las primeras filas; con top:0 queda en su puesto. */
thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); background: var(--paper-2); position: sticky; top: 0; }
tbody tr:hover { background: var(--c-wash); }
td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
tr.anulado td { color: var(--text-dim); text-decoration: line-through; }

/* ===== AVISOS ===== */
.aviso { border-radius: 10px; padding: 13px 16px; font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.aviso.err { color: var(--crit); background: var(--crit-wash); border-color: var(--crit-edge); }
.aviso.ok  { color: var(--ok);  background: var(--ok-wash);  border-color: var(--ok-edge); }
.aviso.info{ color: var(--warn);background: var(--warn-wash);border-color: var(--warn-edge); }
.aviso[hidden] { display: none; }

.vacio { text-align: center; padding: 50px 20px; color: var(--text-dim); }

/* ===== LOGIN ===== */
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(160deg, var(--c-ink), #123f4c 60%, #0c2f3a); }
.login-caja { background: var(--paper); border-radius: 17px; padding: 38px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); }
.login-caja h1 { font-size: 25px; text-align: center; letter-spacing: -.02em; }
.login-caja h1 span { color: var(--c-2); }
.login-caja .lema { text-align: center; color: var(--text-muted); font-size: 13.5px; margin: 6px 0 26px; }

@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar nav a { padding: 6px 9px; font-size: 13px; }
  .topbar .quien span { display: none; }
  .wrap { padding: 16px 12px 50px; }
  .despachos { grid-template-columns: 1fr; }
}