/*
 * El panel. Un fichero, sin preprocesador y sin framework.
 *
 * Los colores viven todos aqui arriba como variables y el resto de la hoja los usa
 * por su papel (--surface, --series-1) y nunca por su valor. Asi el modo oscuro es
 * un bloque de variables y no una segunda hoja de estilos que se desincroniza.
 *
 * La paleta categorica esta validada para daltonismo: el orden de --series-1 a
 * --series-8 es el mecanismo de seguridad, no una eleccion estetica. Reordenarla o
 * cambiar un tono exige volver a pasar el validador (ver docs/panel.md).
 */

:root {
  color-scheme: light;

  --page: #f9f9f7;
  --surface: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --wash: rgba(11, 11, 11, 0.04);

  /* Categoricos. Orden validado: no reordenar sin volver a validar. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  /* Escalon claro del mismo azul, para lo que esta ahi pero no es lo elegido. */
  --series-1-soft: #86b6ef;

  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Para lo que se copia y no se lee: una direccion, un codigo. En monoespaciada
     porque ahi la l y el 1 tienen que distinguirse. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --page: #0d0d0d;
    --surface: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --wash: rgba(255, 255, 255, 0.06);

    /* Los mismos ocho tonos, escalonados para el fondo oscuro. No es un volteo
       automatico del modo claro: cada valor esta elegido y validado contra este
       fondo. */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-1-soft: #1c5cab;

    --good-text: #0ca30c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1rem;
}

button {
  font: inherit;
  cursor: pointer;
}

/* --- Estructura ----------------------------------------------------------- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.brand {
  font-size: 1rem;
  font-weight: 600;
}

.brand small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.topbar .spacer {
  flex: 1;
}

.month-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}

.month-picker output {
  min-width: 11ch;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  padding: 6px 12px;
  font-size: 0.85rem;
}

.ghost:hover:not(:disabled) {
  background: var(--wash);
  color: var(--text-primary);
}

.ghost:disabled {
  opacity: 0.4;
  cursor: default;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.card > header {
  margin-bottom: 16px;
}

.caption {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 780px) {
  .two-up {
    grid-template-columns: 1fr;
  }
}

/* --- Cifras de cabecera --------------------------------------------------- */

.hero {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.hero .figure {
  /* Cifras proporcionales, no tabulares: a este tamano las tabulares se ven sueltas. */
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.delta {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Gastar menos es bueno, asi que la flecha hacia abajo es la verde. La direccion
   sola no basta: el signo y la palabra van siempre al lado. */
.delta.down { color: var(--good-text); }
.delta.up { color: var(--critical); }
.delta.flat { color: var(--text-secondary); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.tile .label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.tile .value {
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2px;
}

.tile.attention {
  border-color: var(--warning);
}

.note {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding-left: 12px;
  border-left: 2px solid var(--axis);
}

/* --- Graficas ------------------------------------------------------------- */

.chart {
  display: block;
  overflow: visible;
}

.chart .tick,
.chart .row-label {
  font-variant-numeric: tabular-nums;
}

.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--page);
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.8rem;
  line-height: 1.35;
  max-width: 240px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.tooltip[hidden] {
  display: none;
}

/* La leyenda con importes es tambien la vista en tabla: tres de los tonos
   categoricos quedan por debajo de 3:1 sobre el fondo claro, y la regla es que
   entonces el valor tiene que estar escrito, no solo pintado. */
.legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.legend .name {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend .value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Tablas --------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

tbody tr.clickable:hover {
  background: var(--wash);
  cursor: pointer;
}

td.amount, th.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}

.reason {
  display: block;
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* --- Estado del documento ------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* El color nunca va solo: cada estado lleva su punto y su palabra. */
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.pill.processed .dot, .pill.confirmed .dot { background: var(--good); }
.pill.needs_review .dot { background: var(--warning); }
.pill.failed .dot { background: var(--critical); }
.pill.duplicate .dot { background: var(--serious); }
.pill.stored .dot, .pill.processing .dot, .pill.received .dot { background: var(--text-muted); }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters button[aria-pressed="true"] {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--page);
}

/* --- Login ---------------------------------------------------------------- */

.login {
  max-width: 380px;
  margin: 12vh auto;
}

.login h1 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.field {
  display: block;
  margin-top: 16px;
}

.field span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

input[type="email"],
input[type="password"],
input[type="search"] {
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
}

input:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

.primary {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--text-primary);
  color: var(--page);
  font-weight: 600;
}

.primary:disabled {
  opacity: 0.5;
  cursor: default;
}

.error {
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--critical);
  color: var(--critical);
  font-size: 0.85rem;
}

.empty {
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 8px 0;
  margin: 0;
}

/* --- Ficha del documento -------------------------------------------------- */

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  padding: 0;
  width: min(680px, calc(100vw - 32px));
  max-height: 86vh;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.sheet {
  padding: 22px;
  overflow-y: auto;
  max-height: 86vh;
}

.sheet header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.sheet header h2 {
  flex: 1;
  font-size: 1.15rem;
}

/* La direccion de reenvio. En monoespaciada y con `user-select: all` porque son doce
   caracteres aleatorios: nadie la lee, se copia — y en el movil, donde no hay boton
   de copiar del portapapeles fiable, un toque la selecciona entera. */
.address {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  user-select: all;
  overflow-wrap: anywhere;
  background: var(--wash);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.facts div span {
  display: block;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.facts div strong {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.balance {
  margin: 4px 0 16px;
  font-size: 0.84rem;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--wash);
}

/* --- Subir un documento --------------------------------------------------- */

.dropzone {
  border: 1px dashed var(--axis);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 0.88rem;
}

.dropzone p {
  margin: 0;
}

.dropzone.over {
  border-color: var(--series-1);
  border-style: solid;
  background: var(--wash);
}

.linky {
  background: none;
  border: none;
  padding: 0;
  color: var(--series-1);
  font: inherit;
  text-decoration: underline;
}

.upload-status {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}

.upload-status.error {
  color: var(--critical);
}

/* Lo que ha pasado al compartir desde el móvil. Se recibe entrando a la página, así
   que va arriba del todo y no dentro de ninguna tarjeta. */
.banner {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--good);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
}

.banner.warn {
  border-color: var(--warning);
}

/* Quien comparte el hogar. Una línea por persona y sin tabla: son dos o tres, y una
   tabla de tres filas es más chrome que dato. */
.people {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.people li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Un enlace que se comporta como botón: conectar Gmail es una navegación de verdad
   a la pantalla de permisos de Google, no una llamada del panel. */
.as-button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* --- Corregir un documento ------------------------------------------------ */

.field.compact {
  margin-top: 0;
}

.field.compact span {
  font-size: 0.76rem;
}

.field.compact input,
.field.compact select {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 9px;
  border: 1px solid var(--axis);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-primary);
}

form.facts {
  align-items: start;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
}

.primary.compact {
  width: auto;
  margin-top: 0;
  padding: 8px 16px;
  font-size: 0.9rem;
}

/* El aviso de que esto se parece a un gasto que ya estaba. Va en ambar y no en rojo:
   no es un error, es una pregunta — y la respuesta puede ser perfectamente "son dos
   gastos distintos". */
.notice {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--warning);
  border-radius: 8px;
  font-size: 0.88rem;
}

.notice p {
  margin: 6px 0 0;
}

.notice .actions {
  margin-top: 12px;
}

.search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.search-row input {
  flex: 1;
}

.search-row button {
  flex: none;
}

.product-result {
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  width: 100%;
  font-size: 0.88rem;
}

.product-result:hover,
.product-result[aria-pressed="true"] {
  background: var(--wash);
}

.product-result small {
  color: var(--text-secondary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Prosa ----------------------------------------------------------------
   Para los documentos que no son el panel: hoy, la politica de privacidad. Va
   acotado a `.prose` y no suelto, porque el resto de la aplicacion son tarjetas con
   su propio ritmo y `h2 { margin: 0 }` esta puesto a proposito para ellas. Un texto
   largo necesita justo lo contrario. */

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin: 28px 0 8px;
  font-size: 1.05rem;
}

.prose p,
.prose ul {
  margin: 0 0 12px;
  line-height: 1.6;
}

.prose ul {
  padding-left: 20px;
}

.prose li {
  margin-bottom: 6px;
}

.prose code {
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--wash);
  /* Una etiqueta de Gmail o un scope de OAuth: se copian y se pegan tal cual, y una
     letra de mas rompe el montaje sin decir por que. */
  word-break: break-word;
}

[hidden] {
  display: none !important;
}