/* Housekeeping Payroll -- sistema de diseno.
 *
 * TRES REGLAS, y de ellas sale todo lo demas.
 *
 * 1. Un solo tema, oscuro. No es "dark mode": no hay version clara de la que
 *    esta sea el reverso. color-scheme: dark le dice al navegador que pinte
 *    los controles nativos y las barras de scroll en oscuro, porque un select
 *    blanco en una pantalla negra es lo que delata a una interfaz que en
 *    realidad es clara con los colores dados vuelta.
 *
 * 2. El cromo es acromatico. EL COLOR SIGNIFICA ESTADO DE PLATA, nunca
 *    decoracion: ambar es una tarea marcada, rojo es una que no se paga,
 *    verde es una quincena aprobada. La marca, los links y el anillo de foco
 *    no llevan color. En una pantalla de 54 filas eso es lo que hace que el
 *    ojo vaya solo a las tres que necesitan una decision humana -- si el
 *    acento de la interfaz fuera ambar, competiria con el unico ambar que
 *    tiene que significar algo.
 *
 * 3. Toda la plata va en monoespaciada con tabular-nums. Las columnas de
 *    numeros se alinean por el punto decimal y el calculo se lee como una
 *    formula verificable, no como prosa. Es una herramienta de auditoria: el
 *    numero tiene que poder recorrerse con el dedo.
 *
 * Nada de fuentes remotas. La app corre en un VPS y una fuente que no carga
 * deja la pantalla con otra tipografia sin avisar. Las familias de abajo son
 * las que ya existen en la maquina de quien mira: en una Mac son SF Pro y
 * SF Mono de verdad.
 */

:root {
  color-scheme: dark;

  /* --- fondos: negro frio con sesgo verde-azul, no negro puro --- */
  --ground:     #0A0E10;
  --slate:      #12181A;
  --slate-2:    #171F21;
  --slate-3:    #1D2629;

  /* --- filetes --- */
  --line:       #1F282B;
  --line-2:     #2B3639;

  /* --- texto --- */
  --frost:      #E7ECEB;
  --haze:       #99A5A6;
  --haze-2:     #6B7779;

  /* --- estado de plata. El unico color de la interfaz. --- */
  --flag:       #E0A34A;
  --flag-bg:    #241C10;
  --stop:       #E0796A;
  --stop-bg:    #261613;
  --paid:       #7CC4A8;
  --paid-bg:    #12241D;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
          'Segoe UI Variable Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
          'Segoe UI Variable Display', 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono',
          Consolas, monospace;

  --radio: 8px;
  --radio-chico: 5px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--frost);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La escala tipografica: pocos pasos, tracking negativo creciente con el
   tamano. Un titulo grande con el tracking del cuerpo se ve suelto. */
h1, h2, h3 {
  font-family: var(--display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 23px; font-weight: 600; letter-spacing: -0.024em; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.008em; }

a { color: var(--frost); text-decoration-color: var(--haze-2); }
a:hover { text-decoration-color: var(--frost); }

/* Anillo de foco sin color: el color esta reservado para el estado de las
   tareas. Un anillo blanco sobre negro contrasta mas que cualquier acento. */
:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--frost);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- utilidades ---------- */

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--haze-2);
}

.plata {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* El calculo es el dato mas caracteristico del producto: el rastro
   aritmetico de cada monto. No va escondido en un tooltip. */
.calculo {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--haze);
  font-variant-numeric: tabular-nums;
}

.apagado { color: var(--haze-2); }
.en-flag { color: var(--flag); }
.tachado { text-decoration: line-through; text-decoration-color: var(--flag); }

/* ---------- barra superior ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 52px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--frost);
  white-space: nowrap;
}
.wordmark span { color: var(--haze-2); font-weight: 400; }

.topbar nav { display: flex; gap: 22px; font-size: 13px; }
.topbar nav a {
  color: var(--haze);
  text-decoration: none;
  line-height: 51px;
  border-bottom: 1px solid transparent;
}
.topbar nav a:hover { color: var(--frost); }
.topbar nav a[aria-current] { color: var(--frost); border-bottom-color: var(--frost); }

.whoami {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--haze-2);
  white-space: nowrap;
}

/* ---------- marco de pagina ---------- */

.marco {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 22px 80px;
}

.encabezado {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.encabezado .titulo { display: flex; flex-direction: column; gap: 6px; }
/* Lo que venga despues del titulo se va al otro extremo. Cubre .acciones y
   tambien el details de crear una quincena, que no va envuelto en .acciones
   porque necesita ser el contenedor posicionado de su propio popover. */
.encabezado > :not(.titulo) { margin-inline-start: auto; }
.encabezado .acciones { display: flex; align-items: center; gap: 8px; }

.migaja {
  font-size: 12.5px;
  color: var(--haze-2);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}
.migaja:hover { color: var(--frost); }

/* ---------- botones ---------- */

/* Boton primario sin color: relleno claro, texto oscuro. Es el unico
   elemento invertido de la pantalla, y eso solo ya lo hace el mas fuerte. */
.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  padding: 8px 15px;
  border: 1px solid var(--frost);
  border-radius: var(--radio-chico);
  background: var(--frost);
  color: var(--ground);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #FFF; border-color: #FFF; }
.btn:disabled {
  background: transparent;
  border-color: var(--line-2);
  color: var(--haze-2);
  cursor: not-allowed;
}

.btn-plano {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--haze);
  cursor: pointer;
  white-space: nowrap;
}
.btn-plano:hover { border-color: var(--haze-2); color: var(--frost); }

/* ---------- formularios ---------- */

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo label { font-size: 12.5px; color: var(--haze); }

.campo input, .campo select {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--radio-chico);
  background: var(--slate);
  color: var(--frost);
}
.campo input:focus, .campo select:focus { border-color: var(--haze); }
.campo input[type="date"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.campo-pista { font-size: 12px; color: var(--haze-2); margin: 0; }

/* Crear una quincena: details/summary como popover, sin una linea de JS.
   El summary lleva la clase .btn y se le saca el triangulito nativo. */
.crear { position: relative; }
.crear summary { list-style: none; display: inline-flex; }
.crear summary::-webkit-details-marker { display: none; }
.crear summary::marker { content: ""; }

.crear-form {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 9px);
  z-index: 5;
  width: 290px;
  max-width: calc(100vw - 44px);
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  background: var(--slate);
  border: 1px solid var(--line-2);
  border-radius: var(--radio);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.5);
}

/* ---------- pills de estado ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.pill-draft  { background: var(--slate-3); color: var(--haze); }
.pill-review { background: var(--flag-bg);  color: var(--flag); }
.pill-flag   { background: var(--flag-bg);  color: var(--flag); }
.pill-stop   { background: var(--stop-bg);  color: var(--stop); }
.pill-ok     { background: var(--paid-bg);  color: var(--paid); }

/* ---------- avisos ---------- */

.aviso {
  padding: 11px 14px;
  border-radius: var(--radio-chico);
  font-size: 13px;
  border: 1px solid;
}
.aviso-error { background: var(--stop-bg); color: var(--stop); border-color: var(--stop); }

/* ---------- login ---------- */

.login-marco { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

.login-caja {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radio);
}
.login-caja h1 { font-size: 20px; }
.login-caja form { display: flex; flex-direction: column; gap: 15px; }
.login-pie { font-size: 12px; color: var(--haze-2); margin: 0; }

/* ---------- la lista de quincenas: un libro mayor, no una grilla de cards ---------- */

.ledger {
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--slate);
  overflow: hidden;
}

.ledger-fila {
  display: grid;
  grid-template-columns: 12.5rem 8.5rem 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.ledger-fila:last-child { border-bottom: 0; }
.ledger-fila:hover { background: var(--slate-2); }

.ledger-fecha {
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--frost);
}
.ledger-anio { display: block; font-size: 11.5px; color: var(--haze-2); margin-top: 2px; }

.ledger-meta { font-size: 12.5px; color: var(--haze); }
/* La fecha de pago va debajo del conteo de tareas, no al lado del total: es
   informacion de cuando, no de cuanto. */
.ledger-pago { display: block; font-size: 11.5px; color: var(--haze-2); margin-top: 3px; }

.ledger-montos { text-align: end; }
.ledger-total { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.ledger-retenido { font-size: 11.5px; color: var(--flag); margin-top: 3px; }

/* ---------- panel de la corrida de import ---------- */

.corrida {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 18px;
  margin-bottom: 20px;
  background: var(--slate);
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--line-2);
  border-radius: var(--radio);
}
.corrida p { margin: 0; font-size: 13px; color: var(--haze); max-width: 70ch; }

/* Mientras corre, el filete de la izquierda late: es la unica animacion de la
   app, y esta porque "esto sigue trabajando" es informacion que el texto solo
   no transmite. Se respeta prefers-reduced-motion mas abajo. */
.corrida-running,
.corrida-pending { border-inline-start-color: var(--frost); }
.corrida-running { animation: latir 2s ease-in-out infinite; }
.corrida-failed { border-inline-start-color: var(--stop); }
.corrida-failed .eyebrow { color: var(--stop); }
.corrida-done { border-inline-start-color: var(--paid); }

@keyframes latir {
  0%, 100% { border-inline-start-color: var(--line-2); }
  50%      { border-inline-start-color: var(--frost); }
}

.corrida-cuentas { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.corrida-cuentas strong { color: var(--frost); font-weight: 600; }
.corrida-quien { font-size: 11.5px; color: var(--haze-2); }

/* El traceback. Scrollea solo, no estira la pagina. */
.traza {
  margin: 0;
  max-height: 11em;
  overflow: auto;
  padding: 11px 13px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radio-chico);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--stop);
  white-space: pre;
}

/* ---------- detalle: riel + hoja ---------- */

.detalle {
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: 26px;
  align-items: start;
}

/* min-width: 0 no es decorativo: un item de grid arranca en min-width auto y
   la tabla ancha estiraria la columna hasta romper la grilla en vez de
   scrollear dentro de .tabla-marco. */
.hoja { min-width: 0; }

.riel {
  position: sticky;
  top: 78px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radio);
}

/* LA CIFRA. Es el unico elemento grande de la pantalla; ahi se gasta toda la
   audacia del diseno, y por eso no hay nada mas compitiendo en el riel. Los
   centavos van atenuados: se leen si hacen falta y no le roban peso al monto. */
.cifra {
  font-family: var(--mono);
  font-size: 33px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  display: block;
}
.cifra-cents { color: var(--haze-2); }
.cifra-flag { color: var(--flag); }

.bloque { display: flex; flex-direction: column; gap: 7px; }
.bloque-pie { font-size: 12px; color: var(--haze-2); }

.riel-sep { height: 1px; background: var(--line); }

/* El reparto por housekeeper: nombre, barra de proporcion, monto. La barra es
   acromatica a proposito -- es magnitud, no estado. */
.reparto { display: flex; flex-direction: column; gap: 4px; }

/* Cada fila es un link que filtra la tabla por esa persona. El padding
   negativo la hace un blanco de clic comodo sin desalinear el riel. */
.reparto-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  row-gap: 5px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: var(--radio-chico);
  text-decoration: none;
  color: inherit;
}
.reparto-fila:hover { background: var(--slate-3); }
.reparto-fila[aria-current] { background: var(--slate-3); box-shadow: inset 2px 0 0 var(--frost); }

.reparto-nombre { font-size: 13px; }
.reparto-monto { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.reparto-barra {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--line-2);
  border-radius: 1px;
  overflow: hidden;
}
.reparto-barra span { display: block; height: 100%; background: var(--haze); }
.reparto-tareas { grid-column: 1 / -1; font-size: 11.5px; color: var(--haze-2); }

/* El motivo por el que no se puede aprobar todavia. Va en el riel, al lado de
   la cifra, no en un tooltip. */
.bloqueo {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--flag);
}

/* ---------- chips de filtro ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: transparent;
  color: var(--haze);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--haze-2); color: var(--frost); }
.chip[aria-current] { background: var(--frost); border-color: var(--frost); color: var(--ground); }
.chip-cuenta { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ---------- tablas ---------- */

.tabla-marco {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--slate);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  position: sticky;
  top: 52px;
  text-align: start;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--haze-2);
  padding: 11px 14px;
  background: var(--slate-2);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--slate-2); }

td.num, th.num { text-align: end; }
td.fecha { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--haze); }

.celda-propiedad { display: block; max-width: 22ch; }
.celda-tarea { display: block; max-width: 26ch; }

/* La franja de severidad. SOLO se pinta lo que necesita atencion: si se
   marcaran tambien las filas limpias, no quedaria nada destacado. */
tr.marcada td:first-child { box-shadow: inset 2px 0 0 var(--flag); }
tr.detenida td:first-child { box-shadow: inset 2px 0 0 var(--stop); }

.motivo { display: block; font-size: 11.5px; color: var(--flag); margin-top: 4px; }
.motivo-stop { color: var(--stop); }

.etiqueta-manual {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haze-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 0 4px;
  margin-inline-start: 6px;
  vertical-align: 1px;
}

/* ---------- vacios ---------- */

/* Una pantalla vacia es una invitacion a hacer algo, no un cartel de error. */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radio);
}
.vacio h2 { font-weight: 500; }
.vacio p { margin: 0; max-width: 42ch; font-size: 13px; color: var(--haze); }

/* ---------- angosto ---------- */

@media (max-width: 940px) {
  .detalle { grid-template-columns: 1fr; }
  .riel { position: static; }
  .ledger-fila { grid-template-columns: 1fr auto; row-gap: 10px; }
  .ledger-meta { grid-column: 1; }
  .ledger-montos { grid-column: 2; grid-row: 2; }
  thead th { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}