/* Portal de Descuentos — descuentos.sigapsa.cl
   Quien entra acá es alguien de Recursos Humanos de una empresa con convenio,
   no un usuario del sistema: pocas pantallas, textos claros y todo legible
   desde el celular. */

:root {
  --azul: #004693;
  --azul-oscuro: #00356f;
  --naranja: #fc7112;
  --texto: #1f2933;
  --suave: #6b7785;
  --borde: #dfe3e8;
  --fondo: #f4f6f9;
  --superficie: #ffffff;
  --verde: #15803d;
  --rojo: #b91c1c;
  --ambar: #b45309;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

/* ── Barra de marca ─────────────────────────────────────────────────────── */
.marca {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.marca-logo { height: 24px; width: auto; }

.marca-sub {
  font-size: 0.85rem;
  color: var(--suave);
  border-left: 1px solid var(--borde);
  padding-left: 14px;
}

.salir {
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.85rem;
  color: var(--suave);
  cursor: pointer;
}

.salir:hover { color: var(--texto); border-color: var(--suave); }

/* Interruptor de tema. Lleva el margen automático para quedar pegado a la
   derecha aunque el botón de salir esté oculto (pantalla de ingreso). */
.tema {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  line-height: 1;
  color: var(--suave);
  cursor: pointer;
  flex: 0 0 auto;
}

.tema:hover { color: var(--texto); border-color: var(--suave); }

/* ── Pantallas ──────────────────────────────────────────────────────────── */
.pantalla {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.portada { margin-bottom: 28px; }

.portada h1 {
  margin: 0 0 8px;
  font-size: 1.6rem;
  color: var(--azul);
}

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

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

.pie {
  text-align: center;
  color: var(--suave);
  font-size: 0.85rem;
  padding: 0 20px 40px;
}

/* ── Tarjeta de ingreso ─────────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}

.tarjeta-login {
  max-width: 420px;
  margin: 40px auto 0;
}

.tarjeta-login h1 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: var(--azul);
}

.tarjeta-login .ayuda { margin-bottom: 22px; }

.tarjeta-login label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 16px 0 6px;
}

.tarjeta-login input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--superficie);
  color: var(--texto);
}

.tarjeta-login input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 70, 147, 0.12);
}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn-principal,
.btn-secundario {
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-principal {
  background: var(--azul);
  color: #fff;
  width: 100%;
  margin-top: 22px;
}

.btn-principal:hover { background: var(--azul-oscuro); }
.btn-principal:disabled { opacity: 0.6; cursor: default; }

.btn-secundario {
  background: transparent;
  border-color: var(--borde);
  color: var(--suave);
}

.btn-secundario:hover { color: var(--texto); }

.error {
  color: var(--rojo);
  font-size: 0.88rem;
  margin: 14px 0 0;
  background: rgba(185, 28, 28, 0.07);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ── Lista de descuentos ────────────────────────────────────────────────── */
.lista-descuentos { display: flex; flex-direction: column; gap: 14px; }

.descuento {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.descuento-datos { flex: 1 1 260px; }

.descuento h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--azul);
}

.descuento-empresa {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--suave);
}

.descuento-desc {
  margin: 6px 0 0;
  font-size: 0.9rem;
}

.descuento-estado {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--suave);
}

.descuento .btn-principal { width: auto; margin: 0; flex: 0 0 auto; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: var(--superficie);
  border-radius: 16px;
  width: min(560px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.modal-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--borde);
}

.modal-titulo h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--azul);
}

.cerrar {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--suave);
  cursor: pointer;
  padding: 0 4px;
}

.modal-cuerpo { padding: 24px; overflow-y: auto; }

.modal-pie {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--borde);
}

.modal-pie .btn-principal { width: auto; margin: 0; }

/* ── Zona de archivo ────────────────────────────────────────────────────── */
.zona-archivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px dashed var(--borde);
  border-radius: 14px;
  padding: 40px 20px;
  cursor: pointer;
  text-align: center;
}

.zona-archivo:hover { border-color: var(--azul); background: rgba(0, 70, 147, 0.03); }

.zona-icono { font-size: 2rem; color: var(--azul); line-height: 1; }
.zona-texto { font-weight: 600; }
.zona-sub { font-size: 0.85rem; color: var(--suave); }

.nombre-archivo {
  margin: 14px 0 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--suave);
}

/* ── Vista previa ───────────────────────────────────────────────────────── */
.dato-grande { text-align: center; margin-bottom: 20px; }

.dato-grande .numero {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--azul);
  line-height: 1.1;
}

.dato-grande .etiqueta { font-size: 0.92rem; color: var(--suave); }

.dato-fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 14px 0;
}

.dato-fila > div { display: flex; flex-direction: column; }
.dato-fila span:first-child { font-size: 1.25rem; font-weight: 700; }
.dato-fila span:last-child { font-size: 0.78rem; color: var(--suave); }
.dato-fila .alta { color: var(--verde); }
.dato-fila .baja { color: var(--rojo); }
.dato-fila .malo { color: var(--rojo); }

.como-se-leyo {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--suave);
  text-align: center;
}

.invalidos {
  margin-top: 18px;
  font-size: 0.85rem;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(180, 83, 9, 0.06);
  border-radius: 10px;
  padding: 12px 16px;
}

.invalidos ul { margin: 8px 0 0; padding-left: 1.2rem; }
.invalidos li { padding: 2px 0; }

.invalidos code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

.confirmar {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--ambar);
  text-align: center;
}

/* ── Resultado ──────────────────────────────────────────────────────────── */
.resultado-ok,
.resultado-parcial,
.resultado-error { text-align: center; padding: 10px 0; }

.tic {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 14px;
  color: #fff;
}

.resultado-ok .tic { background: var(--verde); }
.resultado-parcial .tic { background: var(--ambar); }
.resultado-error .tic { background: var(--rojo); }

.modal-cuerpo h3 { margin: 0 0 6px; font-size: 1.2rem; }
.resultado-ok p,
.resultado-parcial p,
.resultado-error p { margin: 0; color: var(--suave); font-size: 0.92rem; }

.referencia {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--suave);
}

/* ── Cargando ───────────────────────────────────────────────────────────── */
.cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 0;
  color: var(--suave);
  font-size: 0.9rem;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--borde);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* El logo es horizontal y ancho: en 390 px hay que dejarlo encoger, o empuja
     el botón de salir fuera de la pantalla y aparece scroll lateral. */
  .marca-inner { padding: 10px 14px; gap: 10px; }
  .marca-logo { height: 19px; max-width: 110px; object-fit: contain; flex: 0 1 auto; }
  .marca-sub { padding-left: 8px; font-size: 0.72rem; min-width: 0; }
  .salir { padding: 6px 8px; font-size: 0.72rem; white-space: nowrap; flex: 0 0 auto; }

  .pantalla { padding: 24px 14px 40px; }
  .tarjeta { padding: 24px 20px; }
  .tarjeta-login { margin-top: 20px; }

  .descuento { flex-direction: column; align-items: stretch; padding: 18px 20px; }
  /* En columna, `flex-basis` manda sobre el alto: sin esto la tarjeta se estira
     260 px y deja un hueco enorme bajo el texto. */
  .descuento-datos { flex: 0 0 auto; }
  .descuento .btn-principal { width: 100%; }

  .dato-fila { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
  .modal-pie { flex-direction: column-reverse; }
  .modal-pie .btn-principal,
  .modal-pie .btn-secundario { width: 100%; }
}

/* ── Modo oscuro ────────────────────────────────────────────────────────────
   Opcional y a pulso: el modo claro es el de siempre y el oscuro solo entra si
   la persona lo elige con el interruptor. A propósito NO se usa
   `prefers-color-scheme`, para que a nadie se le vuelva oscuro solo porque su
   computador está configurado así. */
:root[data-tema='oscuro'] {
  --texto: #e5e7eb;
  --suave: #9aa5b1;
  --borde: #2f3742;
  --fondo: #171b21;
  --superficie: #1f242c;
}

:root[data-tema='oscuro'] .marca-logo { filter: brightness(1.6); }
:root[data-tema='oscuro'] .zona-archivo:hover { background: rgba(255, 255, 255, 0.03); }
:root[data-tema='oscuro'] .invalidos code { background: rgba(255, 255, 255, 0.08); }
:root[data-tema='oscuro'] .clave-caja { background: rgba(255, 255, 255, 0.03); }

/* El azul de la marca es muy oscuro para leerlo sobre fondo oscuro: los textos
   suben a un tono claro. Los botones siguen con el azul de marca, que con
   texto blanco encima se lee bien. */
:root[data-tema='oscuro'] .portada h1,
:root[data-tema='oscuro'] .tarjeta-login h1,
:root[data-tema='oscuro'] .descuento h2,
:root[data-tema='oscuro'] .modal-titulo h2,
:root[data-tema='oscuro'] .dato-grande .numero,
:root[data-tema='oscuro'] .zona-icono { color: #6aa9e9; }

:root[data-tema='oscuro'] .confirmar { color: #e0a23c; }
:root[data-tema='oscuro'] .error { color: #f87171; background: rgba(248, 113, 113, 0.1); }
:root[data-tema='oscuro'] .dato-fila .alta { color: #4ade80; }
:root[data-tema='oscuro'] .dato-fila .baja,
:root[data-tema='oscuro'] .dato-fila .malo { color: #f87171; }