/* Verificador de comprobantes — hoja única, escrita a mano, mobile-first.
   Se diseña para un celular en el mostrador: una columna, targets grandes,
   nada que se desborde horizontalmente. */

:root {
  --bg: #f5f6f7;
  --card: #ffffff;
  --texto: #16181c;
  --tenue: #61656e;
  --borde: #e2e4e8;

  --ok: #17803d;
  --ok-bg: #e8f6ed;
  --warn: #9a6400;
  --warn-bg: #fdf3e0;
  --bad: #c62828;
  --bad-bg: #fdeaea;
  --alarm: #ffffff;
  --alarm-bg: #c62828;
  --mute: #4b5563;
  --mute-bg: #eef0f2;

  --radio: 12px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101214;
    --card: #191c1f;
    --texto: #e9eaec;
    --tenue: #9aa0a8;
    --borde: #2a2e33;

    --ok: #6ee7a0;
    --ok-bg: #10301e;
    --warn: #f5c265;
    --warn-bg: #33260c;
    --bad: #ff8f8f;
    --bad-bg: #391616;
    --mute: #b3b8bf;
    --mute-bg: #24282c;
  }
}

* { box-sizing: border-box; }

/* El foco de teclado no tenía ningún estilo: era invisible en toda la app.
   Sin `border-radius` acá: esa línea le PISABA el radio a lo que enfocaba —un
   campo de 8px pasaba a 4px al recibir el foco— y el anillo quedaba con las
   esquinas peleadas contra las del campo. El outline sigue solo el radio de
   cada elemento. */
:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  /* 16 × 1.5 = 24px exactos. Con 1.45 la interlínea daba 23,2 y esa fracción
     se propagaba por todo el layout: los elementos caían en medio píxel y el
     navegador los antialiaseaba distinto según dónde quedaran. */
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 12px 64px;
}

a { color: inherit; }

/* ── Cabecera y navegación ── */

.top {
  background: var(--card);
  border-bottom: 1px solid var(--borde);
  padding: 10px 12px 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.whoami { color: var(--tenue); font-size: 13px; line-height: 20px; margin-top: 2px; }

.linklike {
  background: none; border: none; color: var(--tenue);
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px; min-height: var(--tap);
}

.tabs {
  display: flex;
  background: var(--card);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 61px;
  z-index: 9;
}
.tabs a {
  flex: 1;
  text-align: center;
  padding: 12px 4px;
  min-height: var(--tap);
  text-decoration: none;
  color: var(--tenue);
  font-size: 15px;
  border-bottom: 2px solid transparent;
}
.tabs a.on { color: var(--texto); font-weight: 600; border-bottom-color: currentColor; }

/* ── Resumen del día ── */

.resumen { display: grid; gap: 10px; margin-bottom: 6px; }

.resumen-local {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
}
.resumen-local.con-alarma { border-color: var(--bad); border-width: 2px; }
.resumen-local h2 { margin: 0 0 6px; font-size: 14px; color: var(--tenue); font-weight: 600; }

.acreditado { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acreditado small { display: block; font-size: 13px; font-weight: 400; color: var(--tenue); letter-spacing: 0; }

.alarma-banner {
  margin: 10px 0 0;
  background: var(--alarm-bg);
  color: var(--alarm);
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; }
.chip { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--mute-bg); color: var(--mute); }
.chip b { font-weight: 700; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.alarm { background: var(--alarm-bg); color: var(--alarm); }

.seccion { font-size: 14px; color: var(--tenue); margin: 18px 0 8px; font-weight: 600; }

/* ── Vista Hoy: agrupada por lo que hay que hacer ──
   El caso normal no lleva color. Si algo tiene color, es porque hay que mirarlo. */

.fecha-hoy { margin: 2px 0 14px; font-size: 13px; color: var(--tenue); }

.grupo { margin-bottom: 26px; }

.grupo-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
/* El título de alerta lleva ícono: van juntos a la izquierda, no repartidos. */
.grupo-tit.alerta { color: var(--bad); justify-content: flex-start; gap: 7px; }
.grupo-tit .ico { vertical-align: 0; }
.grupo-tit svg { flex-shrink: 0; }
.grupo-total {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.por-local {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: -4px 0 10px;
  font-size: 13px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

/* Lo que necesita acción: tarjeta propia, motivo en palabras. */
.tarjetas-alerta { display: grid; gap: 8px; }

.alerta-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--bad);
  border-radius: var(--radio);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: background-color .12s ease-out;
}
.alerta-card:hover { background: var(--bad-bg); }

.alerta-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.alerta-que { font-size: 13px; font-weight: 700; color: var(--bad); text-align: right; }
.alerta-quien { font-size: 14px; margin-top: 6px; }
.alerta-accion { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--bad); }

/* Panel continuo: una sola superficie con divisiones finas, sin tarjeta por fila. */
.panel {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.fila-plana {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  min-height: var(--tap);
  transition: background-color .12s ease-out;
}
.fila-plana + .fila-plana { border-top: 1px solid var(--mute-bg); }
.fila-plana:hover { background: var(--mute-bg); }
.fila-plana:active { background: var(--borde); }

.fila-plana .monto { font-size: 17px; line-height: 24px; font-weight: 600; }
.fila-plana-quien {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 20px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.estado-palabra { font-size: 13px; line-height: 20px; font-weight: 600; justify-self: end; }
.estado-palabra.ok { color: var(--ok); }
.estado-palabra.warn { color: var(--warn); }
.estado-palabra.bad { color: var(--bad); }
.estado-palabra.alarm { color: var(--bad); }
.estado-palabra.mute { color: var(--mute); }

/* ── Lista de verificaciones ── */

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.fila {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.fila > a, .fila > .mov { display: block; padding: 12px 14px; text-decoration: none; color: inherit; }
/* La fila entera es tappable; sin esto no había ninguna señal de que lo fuera. */
.fila > a { transition: background-color .12s ease-out; }
.fila > a:hover { background: var(--mute-bg); }
.fila > a:active { background: var(--borde); }
.fila-alarma { border-color: var(--bad); border-width: 2px; }
.fila-descartada { opacity: 0.6; }

.fila-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Los montos se comparan contra el total de la caja: tabulares para que las
   cifras se alineen y la diferencia salte a la vista. */
.monto {
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Un monto que salió de la imagen y no de la cuenta es una afirmación, no un
   hecho — y se ve como tal. Antes esto era un `?` en superíndice que nadie
   podía descifrar en el mostrador. */
.monto-sin-confirmar {
  font-weight: 600;
  color: var(--tenue);
  border-bottom: 1px dotted currentColor;
}

.fila-sub { display: flex; gap: 10px; color: var(--texto); font-size: 14px; line-height: 20px; margin-top: 4px; }
.fila-sub span:first-child { color: var(--tenue); font-variant-numeric: tabular-nums; }
.fila-meta { color: var(--tenue); font-size: 12px; line-height: 16px; margin-top: 3px; }

/* ── Íconos ──
   Alineados ópticamente con el texto, no matemáticamente: el centro visual
   de un glifo cae por encima de su baseline. */
.ico {
  flex-shrink: 0;
  vertical-align: -0.16em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 16px;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--mute-bg);
  color: var(--mute);
  font-weight: 600;
}
.badge .ico { vertical-align: 0; }

/* En los filtros el ícono lleva el color del estado, no el del texto. */
.check-ico { display: inline-flex; }
.check-ico.ok { color: var(--ok); }
.check-ico.warn { color: var(--warn); }
.check-ico.bad { color: var(--bad); }
.check-ico.alarm { color: var(--bad); }
.check-ico.mute { color: var(--mute); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.alarm { background: var(--alarm-bg); color: var(--alarm); }
.badge.grande { font-size: 14px; padding: 6px 12px; }

.vacio { color: var(--tenue); text-align: center; padding: 28px 12px; }
.chico { font-size: 13px; line-height: 20px; color: var(--tenue); }

/* ── Filtros ── */

.filtros {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 4px 14px;
  margin-bottom: 10px;
}
.filtros summary { padding: 12px 0; cursor: pointer; font-weight: 600; min-height: var(--tap); }
.filtros form { display: grid; gap: 12px; padding-bottom: 14px; }

.filtros-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* `end` alineaba por el borde de abajo, así que un control más alto que
     otro empujaba su etiqueta hacia arriba. Con `stretch` cada columna ocupa
     el alto completo y las etiquetas arrancan todas a la misma altura. */
  align-items: stretch;
  background: var(--card); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px;
}
.filtros-inline > label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 140px;
  min-width: 0;
}
.filtros-inline > button {
  align-self: end;
  height: var(--tap);
  min-height: 0;
  flex: 0 0 auto;
}

/* Cuando no entra en la misma fila que los filtros, el botón toma el ancho
   completo: baja igual, pero se lee como decisión y no como algo que sobró. */
@media (max-width: 480px) {
  .filtros-inline > button { flex: 1 0 100%; }
}

label { display: block; font-size: 13px; color: var(--tenue); }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* `input:not([type])` no es decorativo: un input sin atributo `type` NO matchea
   `input[type="text"]`, aunque el navegador lo trate como texto. Sin esta línea
   ese campo se dibuja con el estilo del navegador —otra altura, otro borde—
   al lado de uno nuestro. Es lo que pasaba en el login. */
input:not([type]),
input[type="text"], input[type="date"], input[type="search"],
input[type="password"], select {
  width: 100%;
  /* Altura exacta, no mínima: Safari dibuja input[type=date] más alto que un
     select, y con alturas distintas las etiquetas quedan desalineadas. */
  height: var(--tap);
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  line-height: 1.2;
  color: var(--texto);
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  /* Safari le pone su propio estilo a date y select; esto los empareja. */
  -webkit-appearance: none;
  appearance: none;
}
select {
  /* La flecha propia, ya que se quitó la nativa. */
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%),
                    linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
input[type="date"] { min-width: 0; }

/* En un campo el anillo general de 3px flotando a 2px pesa de más y hace que
   el campo enfocado se lea más grande que el de al lado. Acá va pegado y más
   fino —sigue por encima del mínimo de 2px que pide WCAG— y el borde acompaña,
   que es lo que hace que se lea como "este campo está activo" y no como un
   recuadro nuevo. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-width: 2px;
  outline-offset: 1px;
  border-color: var(--texto);
}

fieldset { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 0; }
legend { font-size: 12px; color: var(--tenue); padding: 0 4px; }
.check {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 10px 2px 0; padding: 4px 0;
  font-size: 14px; color: var(--texto);
  min-height: var(--tap);
}
.check input { width: 20px; height: 20px; }

button, .btn-sec {
  min-height: var(--tap);
  padding: 10px 16px;
  line-height: 1.2;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--texto);
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-sec { background: var(--bg); color: var(--texto); border-color: var(--borde); }

/* Las filas de la lista respondían al toque y los botones no: se apretaba y no
   pasaba nada hasta que la página cambiaba. En un mostrador eso se siente como
   que no registró, y la persona vuelve a apretar. */
button:hover, .btn-sec:hover { filter: brightness(1.12); }
button:active, .btn-sec:active { transform: translateY(1px); filter: brightness(0.94); }
button, .btn-sec { transition: filter .12s ease, transform .06s ease; }

.acciones { display: flex; gap: 10px; }

.export { margin: 4px 0; font-size: 14px; }
.export a {
  color: var(--tenue);
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 2px;
}

.paginacion {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; font-size: 14px; color: var(--tenue); gap: 10px;
}
.paginacion a { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ── Detalle ── */

.volver { margin: 0 0 10px; font-size: 14px; }
.volver a { color: var(--tenue); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }

.detalle-head {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 10px;
}
.detalle-head.con-alarma { border-color: var(--bad); border-width: 2px; }
.monto-grande { font-size: 34px; line-height: 40px; font-weight: 700; margin: 10px 0 2px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.monto-origen { margin: 0; font-size: 13px; color: var(--tenue); }
.detalle-meta { margin: 8px 0 0; font-size: 13px; color: var(--tenue); }

.tarjeta {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  margin-bottom: 10px;
}
.tarjeta h2 { margin: 0 0 10px; font-size: 14px; color: var(--tenue); font-weight: 600; }

.zoom { display: block; }
.zoom img {
  width: 100%; height: auto; display: block;
  border-radius: 8px; border: 1px solid var(--borde);
  background: var(--bg);
}

.sin-imagen {
  text-align: center; padding: 28px 14px;
  background: var(--bg); border: 1px dashed var(--borde); border-radius: 8px;
}
.sin-imagen-tit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 17px; margin: 0 0 6px; color: var(--tenue);
}
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--tenue); word-break: break-all; }

.campos { margin: 0; display: grid; gap: 1px; background: var(--borde); border-radius: 8px; overflow: hidden; }
.campo { display: flex; justify-content: space-between; gap: 12px; background: var(--card); padding: 9px 10px; }
.campo dt { color: var(--tenue); font-size: 13px; line-height: 20px; flex-shrink: 0; }
.campo dd { margin: 0; text-align: right; font-size: 14px; line-height: 20px; word-break: break-word; min-width: 0; }

.confianza { font-weight: 700; }
.confianza.ok { color: var(--ok); }
.confianza.warn { color: var(--warn); }
.confianza.bad { color: var(--bad); }

.fallo { background: var(--bad-bg); border-radius: 8px; padding: 12px; }
.fallo-check {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; font-weight: 700; color: var(--bad);
}
.fallo .campos { margin-top: 8px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding-left: 12px;
  border-left: 2px solid var(--borde);
  font-size: 13px;
}
.t-hora { color: var(--tenue); font-variant-numeric: tabular-nums; grid-column: 1; }
.t-tipo { font-weight: 600; grid-column: 2; }
.t-actor { grid-column: 2; color: var(--tenue); font-size: 12px; }
.t-actor.bot { font-style: italic; }
.t-detalle { grid-column: 1 / -1; color: var(--tenue); font-size: 12px; word-break: break-word; }

/* ── Conciliación ── */

/* El egreso se lee como salida: ícono + monto, sin el signo menos tipográfico. */
.egreso-monto { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); }

.mov-accion { margin: 6px 0 0; }
.mov-accion a { display: inline-flex; align-items: center; min-height: var(--tap); }
.mov-accion form, form.mov-accion { display: grid; gap: 8px; }
form.mov-accion input[type="text"] { margin-top: 0; }

/* ── Login ── */

.login-body {
  display: grid;
  place-items: center;
  /* `100vh` en Safari móvil cuenta la barra de direcciones que después se
     retrae: la tarjeta quedaba corrida y el botón por debajo del pliegue.
     `svh` mide el viewport chico, que es el que siempre está disponible. */
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
}

.login {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
}

/* La cabecera es un bloque propio y respira más abajo que arriba: separa del
   formulario sin que haga falta una línea divisoria. */
.login-cabecera { display: grid; justify-items: center; text-align: center; margin-bottom: 28px; }
.login-marca {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: 50%;
}
.login-marca svg { width: 24px; height: 24px; }
.login-cabecera h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.login-cabecera p { margin: 4px 0 0; font-size: 14px; color: var(--tenue); }

/* 20px entre campos y 6px entre etiqueta y campo: cada par se lee como una
   unidad y los pares no se confunden entre sí. */
.login form { display: grid; gap: 20px; }
.login label { font-size: 13px; font-weight: 500; color: var(--texto); }
.login label input { margin-top: 6px; }
.login button { width: 100%; margin-top: 4px; }

.error {
  background: var(--bad-bg); color: var(--bad);
  padding: 10px 12px; border-radius: 8px; font-size: 14px; margin: 0 0 20px;
}

/* En pantallas anchas el resumen se reparte, pero la lista sigue en una columna:
   leer de arriba a abajo es lo que hace el encargado, no comparar en grilla. */
@media (min-width: 640px) {
  .resumen { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}