/* ============================================================================
   Charlie · Hoja de estilos base (rediseño UX)
   Un solo origen de tokens: color, tipografía, espaciado, esquinas, sombras.
   Las páginas enlazan este archivo y consumen las variables --ch-*.
   Modo claro únicamente.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
  /* ---- Superficies ---- */
  --ch-bg:            #F6F7F9;   /* fondo de la aplicación */
  --ch-surface:       #FFFFFF;   /* tarjetas, tablas, paneles */
  --ch-surface-2:     #FAFAFB;   /* encabezados de tabla, zonas sutiles */
  --ch-surface-hover: #F0F1F4;   /* hover de filas / items de menú */

  /* ---- Marca (Manual de Identidad Acertijo, sección 1.4) ---- */
  /* Azul marino = color base corporativo (RGB 48/66/90). Principal: botones,
     nav activa, logotipo "Charlie", serie principal de gráficos. */
  --ch-navy:          #30425A;
  --ch-navy-hover:    #26364B;   /* hover del principal (más oscuro) */
  --ch-navy-ink:      #FFFFFF;   /* texto sobre azul marino */
  --ch-navy-soft:     #E7EAEF;   /* tinte azul para rellenos sutiles */
  --ch-navy-border:   #C9D2DD;

  /* Teal = complementario 1 (RGB 64/151/170). Acento secundario general:
     badges, iconos, resaltados, enlaces, 2a serie de gráficos. */
  --ch-teal:          #4097AA;   /* rellenos, bordes, iconos, elementos grandes */
  --ch-teal-ink:      #276270;   /* teal legible para texto pequeño / enlaces */
  --ch-teal-soft:     #E4F0F2;   /* tinte */

  /* Acción principal (botones). Por decisión del usuario = teal de marca #4097AA.
     Nota de contraste: blanco sobre #4097AA da 3.37:1 (bajo el 4.5:1 de AA para
     texto normal).
     10 sep 2026 (fase 5b) — DECISIÓN EXPLÍCITA DEL USUARIO: se mantiene el teal exacto
     del manual (#4097AA) con --ch-btn-ink blanco, aceptando ese 3.37:1. No revertir
     "por accesibilidad" sin volver a preguntar. Alternativas evaluadas y descartadas:
       · #35808F — 4.53:1, pasa AA y conserva el teal (hoy es --ch-btn-hover).
       · #327A88 — 4.91:1, pasa AA y conserva el teal.
       · #30425A (navy) — 10.23:1, pero no conserva el teal de marca.
     Se prefirió la fidelidad al Manual de Identidad sobre el umbral AA en este token. */
  --ch-btn:           #4097AA;
  --ch-btn-hover:     #35808F;
  --ch-btn-ink:       #FFFFFF;

  /* Coral = complementario 2 (RGB 250/149/131). Color de "cuidado" de la marca:
     cubre TODAS las advertencias de la app (impuestos y vencimientos, pero también
     datos incompletos, pagos sin clasificar, avisos del proceso). 10 sep 2026 — antes
     convivía con un ámbar #F4A623 heredado; ese ámbar se retiró para no tener dos
     colores de advertencia en la misma pantalla. No usar el coral en texto sobre
     blanco: para texto va --ch-coral-ink. */
  --ch-coral:         #FA9583;   /* acento, borde de aviso */
  --ch-coral-soft:    #FDECE7;   /* fondo del bloque de aviso */
  --ch-coral-border:  #F5C9BC;
  --ch-coral-ink:     #B14A33;   /* coral oscuro legible sobre coral-soft (icono, énfasis) */

  /* ---- Neutros ---- */
  --ch-border:        #E6E7EB;   /* bordes y divisores estándar (hairline funcional) */
  --ch-border-strong: #D8D9DE;   /* borde de campos de formulario en reposo */

  /* ---- Texto ---- */
  --ch-text:          #0B0B0B;   /* texto fuerte, números, títulos */
  --ch-text-2:        #333333;   /* texto de cuerpo (gris neutro del manual, RGB 51/51/51) */
  --ch-muted:         #6B7280;   /* texto apagado, ayudas, metadatos */
  --ch-placeholder:   #8A8B93;   /* texto de ejemplo dentro de un campo vacío */

  /* ---- Estado (funcionales, no están en el manual) ---- */
  --ch-pos:           #16A34A;   /* sube / positivo — rellenos, puntos, barras */
  /* 10 sep 2026 (fase 5b) — el verde de relleno da 3.3:1 sobre blanco: no alcanza AA para
     texto normal, y la app lo usaba como color de TEXTO en montos, chips y badges (hallazgo
     del barrido de contraste). --ch-pos-ink es el verde legible para texto pequeño: 5.4:1
     sobre blanco y 4.9:1 sobre --ch-pos-soft. Misma pareja que --ch-teal / --ch-teal-ink. */
  --ch-pos-ink:       #127A39;
  --ch-pos-soft:      #E7F6EC;
  --ch-neg:           #DC2626;   /* baja / negativo / peligro */
  --ch-neg-soft:      #FBEAEA;
  --ch-neg-border:    #EBB9B9;
  /* Advertencias (de cualquier tipo, no solo fiscales): bloque coral suave
     (--ch-coral-soft) + texto/icono coral oscuro (--ch-coral-ink). */

  /* Tinta genérica para texto sobre cualquier relleno de color saturado que NO sea
     azul marino ni el botón principal: toast verde (--ch-pos-ink), botón destructivo
     (--ch-neg), etc. 11 sep 2026 — esos dos componentes venían usando --ch-navy-ink,
     que está documentado como "texto sobre azul marino": renderizaban bien pero
     quedaban atados a un token de otra superficie. No usar para navy (va --ch-navy-ink)
     ni para el botón de acción (va --ch-btn-ink). */
  --ch-on-dark:       #FFFFFF;

  /* ---- Tipografía ---- */
  --ch-font:          'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ch-fs-xs:         12px;
  --ch-fs-sm:         13px;
  --ch-fs-base:       15px;
  --ch-fs-lg:         18px;
  --ch-fs-xl:         24px;
  --ch-fs-2xl:        30px;
  --ch-lh:            1.55;

  /* ---- Esquinas ---- */
  --ch-r-card:        14px;
  --ch-r-btn:         10px;
  --ch-r-input:       10px;
  --ch-r-pill:        999px;

  /* ---- Sombras ---- */
  --ch-shadow:        0 1px 2px rgba(11,11,11,.04), 0 6px 20px rgba(11,11,11,.05);
  --ch-shadow-sm:     0 1px 2px rgba(11,11,11,.06);

  /* ---- Espaciado (aire generoso) ---- */
  --ch-space-1:       4px;
  --ch-space-2:       8px;
  --ch-space-3:       12px;
  --ch-space-4:       16px;
  --ch-space-5:       20px;
  --ch-space-6:       24px;
  --ch-space-8:       32px;

  /* ---- Gráficos ---- */
  --ch-chart-primary:   #30425A;   /* serie principal (azul marino de marca) */
  --ch-chart-secondary: #4097AA;   /* serie secundaria / comparativo (teal de marca) */
  --ch-chart-grid:      #EDEEF1;   /* líneas de cuadrícula */
  --ch-chart-pos:       #16A34A;
  --ch-chart-neg:       #DC2626;
}

/* ============================================================================
   Base — se aplica a la página que enlace este archivo.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--ch-bg);
  color: var(--ch-text-2);
  font-family: var(--ch-font);
  font-size: var(--ch-fs-base);
  line-height: var(--ch-lh);
  -webkit-font-smoothing: antialiased;
}

/* 10 sep 2026 (fase 5b) — pedido explícito: los títulos van en el azul marino de la marca y
   en negrilla. Antes eran --ch-text (casi negro), indistinguibles del cuerpo salvo por el
   peso. --ch-navy da 10,2:1 sobre blanco, así que no hay costo de legibilidad. */
h1, h2, h3, h4 { color: var(--ch-navy); font-weight: 800; letter-spacing: -.02em; margin: 0; }
h1 { font-size: var(--ch-fs-xl); }
h2 { font-size: var(--ch-fs-lg); }
h3 { font-size: var(--ch-fs-base); }

a { color: var(--ch-navy); text-decoration: none; font-weight: 700; }
a:hover { color: var(--ch-navy-hover); }

/* Cifras: alineadas en columna */
.ch-num, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================================
   Componentes reutilizables
   ========================================================================== */

/* ---- Logotipo de texto ---- */
.ch-logo {
  font-family: var(--ch-font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--ch-navy);
  line-height: 1;
}
.ch-logo--on-navy { color: var(--ch-navy-ink); }

/* ---- Tarjeta ---- */
.ch-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-r-card);
  box-shadow: var(--ch-shadow);
  padding: var(--ch-space-5);
}

/* ---- Botones ---- */
.ch-btn {
  font-family: var(--ch-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--ch-r-btn);
  border: 1px solid transparent;
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ch-btn:focus-visible { outline: 2px solid var(--ch-navy); outline-offset: 2px; }
.ch-btn--primary  { background: var(--ch-btn); color: var(--ch-btn-ink); }
.ch-btn--primary:hover  { background: var(--ch-btn-hover); }
.ch-btn--outline  { background: var(--ch-surface); color: var(--ch-navy); border-color: var(--ch-teal); }
.ch-btn--outline:hover  { border-color: var(--ch-navy); }
.ch-btn--ghost    { background: transparent; color: var(--ch-muted); border-color: var(--ch-border); }
.ch-btn--ghost:hover    { background: var(--ch-surface-hover); color: var(--ch-text-2); }
.ch-btn--danger   { background: var(--ch-surface); color: var(--ch-neg); border-color: var(--ch-neg-border); }
.ch-btn--danger:hover   { background: var(--ch-neg-soft); }
.ch-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Navegación tipo píldora ---- */
.ch-nav { display: flex; gap: var(--ch-space-2); flex-wrap: wrap; }
.ch-nav a {
  padding: 8px 14px;
  border-radius: var(--ch-r-pill);
  color: var(--ch-muted);
  font-size: 14px;
  font-weight: 600;
}
.ch-nav a:hover { background: var(--ch-surface-hover); color: var(--ch-text-2); }
.ch-nav a.is-active { background: var(--ch-navy); color: var(--ch-navy-ink); }

/* ---- Campos de formulario ---- */
.ch-label {
  display: block;
  font-size: var(--ch-fs-sm);
  font-weight: 700;
  color: var(--ch-text-2);
  margin-bottom: 6px;
}
.ch-input {
  width: 100%;
  font-family: var(--ch-font);
  font-size: 14px;
  color: var(--ch-text);
  padding: 11px 13px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border-strong);
  border-radius: var(--ch-r-input);
}
/* 10 sep 2026 (fase 5b) — el gris anterior (#B9BAC0) daba 1,8:1 sobre el fondo de la app:
   el texto de ejemplo prácticamente no se leía. --ch-placeholder sube a 3,4:1, sin llegar al
   tono del texto real para que no se confunda un campo vacío con uno diligenciado. */
.ch-input::placeholder { color: var(--ch-placeholder); }
.ch-input:focus {
  outline: 2px solid var(--ch-navy);
  outline-offset: 1px;
  border-color: var(--ch-navy);
}
.ch-hint { font-size: var(--ch-fs-xs); color: var(--ch-muted); margin-top: 6px; }
.ch-error { font-size: var(--ch-fs-xs); color: var(--ch-neg); font-weight: 600; margin-top: 6px; }

/* ---- Tabla ---- */
.ch-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-r-card);
  overflow: hidden;
  box-shadow: var(--ch-shadow);
}
.ch-table th, .ch-table td { text-align: left; padding: 13px 18px; font-size: 14px; }
.ch-table th {
  background: var(--ch-surface-2);
  color: var(--ch-teal-ink);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ch-border);
}
.ch-table td { border-bottom: 1px solid var(--ch-border); color: var(--ch-text-2); }
.ch-table tr:last-child td { border-bottom: none; }
.ch-table .is-right { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Chips de estado ---- */
.ch-chip {
  font-size: var(--ch-fs-xs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--ch-r-pill);
  display: inline-block;
}
/* 10 sep 2026 (fase 5b) — los chips son texto de 12px: van con las tintas legibles
   (--ch-pos-ink / --ch-text-2), no con los colores de relleno. */
.ch-chip--ok      { background: var(--ch-pos-soft); color: var(--ch-pos-ink); }
.ch-chip--pending { background: var(--ch-surface-hover); color: var(--ch-text-2); }
.ch-chip--alert   { background: var(--ch-coral-soft); color: var(--ch-coral-ink); }

/* ---- Valores con dirección ---- */
.ch-up   { color: var(--ch-pos-ink); }
.ch-down { color: var(--ch-neg); }

/* ---- KPI ---- */
.ch-kpi { padding: var(--ch-space-5); }
.ch-kpi__label { color: var(--ch-muted); font-size: var(--ch-fs-sm); font-weight: 600; margin-bottom: 10px; }
.ch-kpi__value { font-size: var(--ch-fs-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--ch-text); }
.ch-kpi__delta { font-size: var(--ch-fs-sm); font-weight: 700; margin-top: 8px; display: flex; align-items: center; gap: 5px; }

/* ---- Alerta (coral de marca — cualquier advertencia, no solo impuestos) ---- */
.ch-alert {
  display: flex;
  gap: var(--ch-space-3);
  align-items: flex-start;
  background: var(--ch-coral-soft);
  border: 1px solid var(--ch-coral-border);
  border-radius: 12px;
  padding: 15px 17px;
}
.ch-alert__icon { flex: none; color: var(--ch-coral-ink); margin-top: 1px; }
.ch-alert__title { font-weight: 700; color: var(--ch-coral-ink); }
.ch-alert__body { color: var(--ch-text-2); font-size: 14px; }

/* ---- Utilidades ---- */
.ch-muted { color: var(--ch-muted); }
.ch-section-title {
  font-size: var(--ch-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ch-teal-ink);
  margin: var(--ch-space-8) 0 var(--ch-space-3);
}

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