/* ============================================================
   Cuotas — design tokens (cuotas.xterraengine.com)
   Producto: cobros y administración de condominios (Guatemala)
   Identidad: "libro contable claro": papel cálido, verde de confianza,
   cifras tabulares. Claro por defecto (administrador en escritorio,
   residente en móvil); oscuro automático con prefers-color-scheme.
   Sin fuentes ni recursos externos (CSP). Propietario: ARCHITECT.
   Documentación: docs/DISENO-CUOTAS.md
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Color: fondo y superficies ---------- */
  --bg:            #f5f4ef;   /* papel cálido */
  --bg-elev:       #ecebe4;   /* barra lateral, cabeceras de tabla */
  --surface:       #ffffff;   /* tarjetas, formularios, estados de cuenta */
  --surface-2:     #f8f7f3;   /* filas alternas, inputs */
  --surface-3:     #e6e4dc;   /* hover, chips */
  --overlay:       rgba(28, 35, 33, 0.45);

  /* ---------- Color: bordes ---------- */
  --border:        #dcdad1;
  --border-strong: #b9b6aa;

  /* ---------- Color: texto ---------- */
  --text:          #1c2321;
  --text-muted:    #5b625f;
  --text-faint:    #8b918e;
  --text-inverse:  #ffffff;

  /* ---------- Color: primario (verde contable) ---------- */
  --accent:        #0f6e56;   /* enlaces, foco, iconos activos */
  --accent-strong: #0f6e56;   /* botón primario */
  --accent-hover:  #0b5743;
  --accent-soft:   rgba(15, 110, 86, 0.10);
  --accent-ink:    #ffffff;

  /* ---------- Color: estado contable ---------- */
  --success:       #1a7f4b;   /* pagado, conciliado */
  --success-soft:  rgba(26, 127, 75, 0.12);
  --warning:       #9a5b00;   /* pendiente, vence pronto */
  --warning-soft:  rgba(154, 91, 0, 0.12);
  --danger:        #b42318;   /* moroso, error */
  --danger-soft:   rgba(180, 35, 24, 0.10);
  --info:          #1f5f8a;
  --info-soft:     rgba(31, 95, 138, 0.10);

  /* Saldos: a favor / en contra (además del signo, nunca solo color) */
  --amount-pos:    var(--success);
  --amount-neg:    var(--danger);

  /* ---------- Color: escala categórica para gráficas (6) ---------- */
  --chart-1: #0f6e56;   /* verde */
  --chart-2: #1f5f8a;   /* azul */
  --chart-3: #b8860b;   /* ocre */
  --chart-4: #7a4d9c;   /* ciruela */
  --chart-5: #c2410c;   /* teja */
  --chart-6: #5b625f;   /* gris */
  --chart-grid:  rgba(28, 35, 33, 0.10);
  --chart-axis:  var(--text-faint);
  --chart-empty: var(--surface-2);

  /* ---------- Tipografía ---------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-md:  1rem;      /* 16 */
  --fs-lg:  1.125rem;  /* 18 */
  --fs-xl:  1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36  saldo grande del portal */
  --fs-4xl: clamp(2.25rem, 4vw + 1rem, 3.5rem);

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --ls-tight: -0.02em;
  --ls-wide:   0.06em;

  /* ---------- Espaciado (4px) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem;

  /* ---------- Layout ---------- */
  --container:        80rem;   /* 1280: tablas anchas de unidades */
  --container-narrow: 34rem;   /* portal del residente, acceso */
  --sidebar-w:        15rem;
  --control-h:        2.75rem; /* 44 */
  --control-h-sm:     2.25rem; /* 36 */

  /* ---------- Radios ---------- */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 999px;

  /* ---------- Sombras (suaves, cálidas) ---------- */
  --shadow-sm: 0 1px 2px rgba(28, 35, 33, 0.08);
  --shadow-md: 0 4px 12px rgba(28, 35, 33, 0.10), 0 1px 2px rgba(28, 35, 33, 0.06);
  --shadow-lg: 0 16px 40px rgba(28, 35, 33, 0.16);
  --ring: 0 0 0 3px rgba(15, 110, 86, 0.28);

  /* ---------- Movimiento ---------- */
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition: color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);

  --z-sticky: 10; --z-dropdown: 20; --z-modal: 40; --z-toast: 50;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #15201c; --bg-elev: #121b18; --surface: #1c2924; --surface-2: #23332d; --surface-3: #2c3f38;
    --overlay: rgba(0, 0, 0, 0.6);
    --border: #2f423b; --border-strong: #46605a;
    --text: #e8ede9; --text-muted: #a3b0aa; --text-faint: #6f7d77; --text-inverse: #15201c;
    --accent: #6fcfae; --accent-strong: #6fcfae; --accent-hover: #8fe0c3; --accent-soft: rgba(111, 207, 174, 0.14); --accent-ink: #0d1f19;
    --success: #6fcf97; --success-soft: rgba(111, 207, 151, 0.14);
    --warning: #f0b95a; --warning-soft: rgba(240, 185, 90, 0.14);
    --danger: #f28b82; --danger-soft: rgba(242, 139, 130, 0.14);
    --info: #8fc4ea; --info-soft: rgba(143, 196, 234, 0.14);
    --chart-1: #6fcfae; --chart-2: #8fc4ea; --chart-3: #e6c15a; --chart-4: #c3a6e6; --chart-5: #f0a07a; --chart-6: #a3b0aa;
    --chart-grid: rgba(232, 237, 233, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(111, 207, 174, 0.35);
  }
}

/* ============================================================ Base mínima */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: var(--lh-normal); -webkit-text-size-adjust: 100%; font-synthesis: none; }
body { margin: 0; min-height: 100dvh; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* ============================================================ Utilidades */
.label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.amount-pos { color: var(--amount-pos); } .amount-neg { color: var(--amount-neg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-h); padding: 0 var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: var(--transition); -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); border-color: transparent; }
.btn-sm { min-height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn-lg { min-height: 3.25rem; padding: 0 var(--sp-6); font-size: var(--fs-md); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.input { display: block; width: 100%; min-height: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); transition: var(--transition); }
textarea.input { min-height: 6rem; padding: var(--sp-3); resize: vertical; line-height: var(--lh-normal); }
select.input { padding-right: var(--sp-8); }
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input:disabled, .input[readonly] { background: var(--surface-2); opacity: 0.8; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.input-mono { font-family: var(--font-mono); }
.input-amount { font-variant-numeric: tabular-nums; text-align: right; }

.badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); min-height: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; }
.badge-accent  { background: var(--accent-soft);  border-color: transparent; color: var(--accent); }
.badge-success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.badge-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  border-color: transparent; color: var(--danger); }
.badge-info    { background: var(--info-soft);    border-color: transparent; color: var(--info); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table th { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); background: var(--bg-elev); position: sticky; top: 0; z-index: 1; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; }
.table tfoot td { font-weight: var(--fw-semibold); background: var(--surface-2); border-top: 2px solid var(--border-strong); }