/* =====================================================================
   Norte — sistema visual
   Estilo Apple: tipografia del sistema, materiales translucidos,
   movimiento por resortes, jerarquia por peso.
   Ver docs/DISENO.md §9.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENS
   El tema tiene TRES estados: claro, oscuro y sistema (por defecto).
   "Sistema" no estampa atributo: se resuelve con prefers-color-scheme.
   Por eso cada color se define primero en :root pelado, luego se
   redefine bajo el medio, y otra vez bajo [data-tema] para que el
   selector manual gane en ambos sentidos.
   --------------------------------------------------------------------- */

:root {
  /* Superficies */
  --fondo:          #F5F5F7;
  --superficie:     #FFFFFF;
  --superficie-2:   #F2F2F7;
  --superficie-3:   #E9E9EE;

  /* Texto */
  --texto:          #1D1D1F;
  --texto-2:        #6E6E73;
  --texto-3:        #8E8E93;

  /* Lineas */
  --borde:          rgba(0, 0, 0, .08);
  --borde-fuerte:   rgba(0, 0, 0, .14);
  --separador:      rgba(0, 0, 0, .06);

  /* Acentos. Los tonos vivos de iOS no pasan AA sobre blanco:
     en claro se usan versiones oscurecidas que si cumplen 4.5:1. */
  --azul:           #0071E3;
  --azul-suave:     rgba(0, 113, 227, .10);
  --verde:          #248A3D;
  --verde-suave:    rgba(36, 138, 61, .10);
  --rojo:           #D70015;
  --rojo-suave:     rgba(215, 0, 21, .10);
  --naranja:        #C93400;
  --naranja-suave:  rgba(201, 52, 0, .10);
  --morado:         #6A3DBD;

  /* Material translucido de las barras */
  --material:       rgba(255, 255, 255, .72);
  --material-borde: rgba(255, 255, 255, .55);

  /* Sombras: bajas y suaves, nunca duras */
  --sombra-1: 0 1px 2px rgba(0,0,0,.04);
  --sombra-2: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sombra-3: 0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.12);

  /* Radios */
  --r-tarjeta:  18px;
  --r-control:  12px;
  --r-chip:     999px;

  /* Espaciado en rem: si el usuario agranda el texto, el diseño crece
     con el en vez de romperse. */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;

  /* Movimiento. Los resortes de verdad viven en JS (resorte.js);
     estas curvas son para transiciones que el dedo no toca. */
  --t-rapida: 140ms cubic-bezier(.32, .72, 0, 1);
  --t-media:  260ms cubic-bezier(.32, .72, 0, 1);

  --barra-alto: 3.25rem;
  --tab-alto:   3.75rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:          #000000;
    --superficie:     #1C1C1E;
    --superficie-2:   #2C2C2E;
    --superficie-3:   #3A3A3C;

    --texto:          #F5F5F7;
    --texto-2:        #98989D;
    --texto-3:        #6E6E73;

    --borde:          rgba(255, 255, 255, .10);
    --borde-fuerte:   rgba(255, 255, 255, .18);
    --separador:      rgba(255, 255, 255, .08);

    /* En oscuro si van los tonos vivos: contrastan de sobra */
    --azul:           #0A84FF;
    --azul-suave:     rgba(10, 132, 255, .16);
    --verde:          #30D158;
    --verde-suave:    rgba(48, 209, 88, .16);
    --rojo:           #FF453A;
    --rojo-suave:     rgba(255, 69, 58, .16);
    --naranja:        #FF9F0A;
    --naranja-suave:  rgba(255, 159, 10, .16);
    --morado:         #BF5AF2;

    --material:       rgba(28, 28, 30, .72);
    --material-borde: rgba(255, 255, 255, .08);

    --sombra-1: 0 1px 2px rgba(0,0,0,.5);
    --sombra-2: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
    --sombra-3: 0 2px 6px rgba(0,0,0,.6), 0 18px 48px rgba(0,0,0,.5);
  }
}

:root[data-tema="oscuro"] {
  --fondo:          #000000;
  --superficie:     #1C1C1E;
  --superficie-2:   #2C2C2E;
  --superficie-3:   #3A3A3C;
  --texto:          #F5F5F7;
  --texto-2:        #98989D;
  --texto-3:        #6E6E73;
  --borde:          rgba(255, 255, 255, .10);
  --borde-fuerte:   rgba(255, 255, 255, .18);
  --separador:      rgba(255, 255, 255, .08);
  --azul:           #0A84FF;
  --azul-suave:     rgba(10, 132, 255, .16);
  --verde:          #30D158;
  --verde-suave:    rgba(48, 209, 88, .16);
  --rojo:           #FF453A;
  --rojo-suave:     rgba(255, 69, 58, .16);
  --naranja:        #FF9F0A;
  --naranja-suave:  rgba(255, 159, 10, .16);
  --morado:         #BF5AF2;
  --material:       rgba(28, 28, 30, .72);
  --material-borde: rgba(255, 255, 255, .08);
  --sombra-1: 0 1px 2px rgba(0,0,0,.5);
  --sombra-2: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --sombra-3: 0 2px 6px rgba(0,0,0,.6), 0 18px 48px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  /* La pila del sistema primero: ya trae tallado optico, tablas de
     tracking y ajustes de legibilidad que ninguna fuente web replica. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI Variable Text", "Segoe UI", Inter, system-ui,
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* El area segura del telefono (notch, barra de gestos) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: none;
}

/* ---------------------------------------------------------------------
   TIPOGRAFIA
   El tracking es especifico del tamaño, nunca uno solo para todo:
   el texto grande se lee separado si no se aprieta, y el chiquito se
   apelmaza si no se abre. El interlineado va al reves del tamaño.
   --------------------------------------------------------------------- */

.display {
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.024em;
  font-weight: 700;
  margin: 0;
}

h1, .t1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em;  font-weight: 700; margin: 0; }
h2, .t2 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.015em; font-weight: 650; margin: 0; }
h3, .t3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em;  font-weight: 600; margin: 0; }

.cuerpo   { font-size: 1rem;     line-height: 1.5;  letter-spacing: 0; }
.chico    { font-size: .875rem;  line-height: 1.45; letter-spacing: .005em; color: var(--texto-2); }
.etiqueta {
  font-size: .75rem; line-height: 1.35; letter-spacing: .01em;
  font-weight: 600; color: var(--texto-2);
}
.mayuscula {
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 650; color: var(--texto-3);
}

/* Cifras tabulares en TODO lo que sea dinero. Sin esto las columnas
   bailan al cambiar de valor y la tabla se ve barata. */
.cifra, td.cifra, .monto, input[inputmode="decimal"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.monto-grande {
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* El color nunca es el unico portador de significado: entra/sale
   llevan ademas signo y flecha. */
.entra { color: var(--verde); }
.sale  { color: var(--rojo); }
.aten  { color: var(--naranja); }

/* ---------------------------------------------------------------------
   MATERIALES: barras translucidas con el contenido pasando por debajo
   --------------------------------------------------------------------- */

.barra {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--barra-alto);
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e4);
  background: var(--material);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--material-borde);
}

/* Borde de scroll por degradado, no una linea dura bajo el encabezado */
.barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.5rem;
  height: 1.5rem; pointer-events: none;
  background: linear-gradient(to bottom, var(--fondo), transparent);
  opacity: .85;
}

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: var(--e2) var(--e2) calc(var(--e2) + env(safe-area-inset-bottom));
  background: var(--material);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--material-borde);
}

.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 44px; padding: var(--e1);
  border: 0; background: none; cursor: pointer;
  color: var(--texto-3); font-size: .625rem; font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-control);
  transition: color var(--t-rapida);
}
.tab[aria-current="page"] { color: var(--azul); }
.tab:active { transform: scale(.94); }
.tab svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------
   SUPERFICIES
   --------------------------------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
  padding: var(--e4);
}
.tarjeta.alzada { box-shadow: var(--sombra-2); }

/* Lista agrupada tipo Ajustes de iOS */
.grupo {
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  border: 1px solid var(--borde);
  overflow: hidden;
}
.grupo > .fila + .fila { border-top: 1px solid var(--separador); }

.fila {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 44px; padding: var(--e3) var(--e4);
  width: 100%; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
button.fila, a.fila { cursor: pointer; }
button.fila:active, a.fila:active { background: var(--superficie-2); }
.fila .crece { flex: 1; min-width: 0; }
.fila .trunca {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------------
   CONTROLES
   Feedback al pointerdown (:active), no al click. 44x44 minimo.
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: 44px; padding: 0 var(--e5);
  border: 0; border-radius: var(--r-control);
  background: var(--azul); color: #fff;
  font: inherit; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: transform 100ms ease-out, opacity var(--t-rapida);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn.secundario { background: var(--superficie-2); color: var(--texto); }
.btn.plano      { background: none; color: var(--azul); padding: 0 var(--e3); }
.btn.peligro    { background: var(--rojo); color: #fff; }
.btn.ancho      { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 32px; padding: 0 var(--e3);
  border-radius: var(--r-chip);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: .8125rem; font-weight: 600; color: var(--texto-2);
  cursor: pointer;
  transition: transform 100ms ease-out;
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

/* Campos */
.campo { display: block; margin-bottom: var(--e4); }
.campo > label {
  display: block; margin-bottom: var(--e1);
  font-size: .8125rem; font-weight: 600; color: var(--texto-2);
}
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 44px;
  padding: var(--e2) var(--e3);
  font: inherit; color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-control);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3.5px var(--azul-suave);
}
.campo .ayuda { margin-top: var(--e1); font-size: .8125rem; color: var(--texto-3); }
/* El error va PEGADO al campo, no en una lista arriba */
.campo .error { margin-top: var(--e1); font-size: .8125rem; color: var(--rojo); }
.campo.malo input, .campo.malo select { border-color: var(--rojo); }

/* El foco de teclado SIEMPRE visible. Nunca outline:none sin reemplazo. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   BARRA DE PUNTAJE (motor de prioridades)
   --------------------------------------------------------------------- */

.medidor {
  height: 6px; border-radius: 999px;
  background: var(--superficie-3); overflow: hidden;
}
.medidor > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--azul);
  transform-origin: left center;
  transition: transform var(--t-media);
}

/* ---------------------------------------------------------------------
   ESTADOS: cargando, vacio, error
   El esqueleto reserva el espacio EXACTO del contenido real para que no
   haya salto de layout cuando llegan los datos.
   --------------------------------------------------------------------- */

.esqueleto {
  background: linear-gradient(90deg,
    var(--superficie-2) 25%, var(--superficie-3) 37%, var(--superficie-2) 63%);
  background-size: 400% 100%;
  border-radius: 8px;
  animation: brillo 1.4s ease-in-out infinite;
}
@keyframes brillo { to { background-position: -135% 0; } }

.vacio {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e3); padding: var(--e7) var(--e4); text-align: center;
}
.vacio svg { width: 40px; height: 40px; color: var(--texto-3); }
.vacio p { margin: 0; color: var(--texto-2); max-width: 30ch; }

/* ---------------------------------------------------------------------
   HOJA (sheet) — se arrastra 1:1 con el dedo desde JS
   --------------------------------------------------------------------- */

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity var(--t-media);
}
.velo.visible { opacity: 1; }

.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 92dvh; overflow: hidden auto;
  background: var(--superficie);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--sombra-3);
  padding: var(--e3) var(--e4) calc(var(--e6) + env(safe-area-inset-bottom));
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
.hoja .agarre {
  width: 36px; height: 5px; margin: 0 auto var(--e4);
  border-radius: 999px; background: var(--borde-fuerte);
}
@media (min-width: 640px) {
  .hoja {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(34rem, 92vw);
    transform: translate3d(-50%, -50%, 0);
    border-radius: var(--r-tarjeta);
  }
}

/* ---------------------------------------------------------------------
   DISPOSICION
   Movil primero. En escritorio la barra inferior pasa a lateral.
   --------------------------------------------------------------------- */

.pantalla {
  max-width: 46rem; margin: 0 auto;
  padding: var(--e4) var(--e4) calc(var(--tab-alto) + var(--e7));
  display: flex; flex-direction: column; gap: var(--e4);
}

@media (min-width: 900px) {
  .tabs {
    top: 0; right: auto; width: 15rem;
    grid-auto-flow: row; grid-auto-columns: none;
    align-content: start; gap: var(--e1);
    padding: var(--e5) var(--e3);
    border-top: 0; border-right: 1px solid var(--material-borde);
  }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: var(--e3);
    padding: var(--e3); font-size: .9375rem;
  }
  .tab[aria-current="page"] { background: var(--azul-suave); }
  .principal { margin-left: 15rem; }
  .pantalla { padding-bottom: var(--e7); }
}

.rejilla {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* Tabla ancha: scrollea DENTRO de su caja, el cuerpo nunca de lado */
.desliza-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------
   ACCESIBILIDAD
   Movimiento reducido no significa sin retroalimentacion: significa
   fundido en vez de desplazamiento.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 140ms !important;
  }
  .hoja { transition: opacity 200ms ease; }
  .btn:active, .chip:active, .tab:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .barra, .tabs { background: var(--superficie); backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --borde: rgba(0,0,0,.35); --borde-fuerte: rgba(0,0,0,.55); }
  .barra, .tabs { background: var(--superficie); backdrop-filter: none; }
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}