/* ============================================================
   Lobbo (antes Cuotas) — design tokens
   Producto: cobros, recepción e invitados para edificios y residenciales premium.
   Identidad 2026-09 (docs/MARCA-LOBBO.md): "piedra, latón y verde profundo":
   piedra clara como papel, verde profundo como tinta y acción, latón solo como
   acento de luz (nunca como color de texto pequeño sobre piedra clara salvo --brass).
   Claro por defecto (administrador en escritorio, residente e invitado en móvil);
   oscuro automático con prefers-color-scheme.
   El nombre de marca vive en --marca-nombre y en brand/brand.js (window.MARCA).
   Sin fuentes ni recursos externos (CSP). Propietario: ARCHITECT.
   Documentación: docs/DISENO-CUOTAS.md
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Color: fondo y superficies ---------- */
  --marca-nombre:  "Lobbo"; /* única fuente del nombre en CSS: content: var(--marca-nombre) */
  --bg:            #f2f0ea;   /* piedra clara */
  --bg-elev:       #e9e6dd;   /* barra lateral, cabeceras de tabla */
  --surface:       #fdfcfa;   /* tarjetas, formularios, estados de cuenta */
  --surface-2:     #f6f4ef;   /* filas alternas, inputs */
  --surface-3:     #e3dfd4;   /* hover, chips */
  --overlay:       rgba(28, 35, 33, 0.45);

  /* ---------- Color: bordes ---------- */
  --border:        #d8d3c7;
  --border-strong: #aea79a;

  /* ---------- Color: texto ---------- */
  --text:          #171f1c;   /* tinta verde profunda */
  --text-muted:    #545c58;
  --text-faint:    #7f8682;   /* solo decorativo o ≥ 18 px */
  --text-inverse:  #ffffff;

  /* ---------- Color: primario (verde profundo) ---------- */
  --accent:        #0d5c47;   /* enlaces, foco, iconos activos (7:1 sobre piedra) */
  --accent-strong: #0d5c47;   /* botón primario */
  --accent-hover:  #0a4737;
  --accent-soft:   rgba(13, 92, 71, 0.10);
  --accent-ink:    #ffffff;
  --accent-2:      #2fa57f;   /* verde claro para degradados y halos, nunca texto */

  /* ---------- Color: latón (acento de luz) ---------- */
  --brass:         #8a6420;   /* texto pequeño permitido (4.7:1 sobre piedra) */
  --brass-bright:  #c9a24e;   /* filetes, puntos, degradados; solo decorativo */
  --brass-soft:    rgba(201, 162, 78, 0.16);
  --brass-ink:     #1a1407;

  /* ---------- Color: estado contable ---------- */
  --success:       #1a7a48;   /* pagado, conciliado */
  --success-soft:  rgba(26, 122, 72, 0.12);
  --warning:       #8f5400;   /* pendiente, vence pronto */
  --warning-soft:  rgba(143, 84, 0, 0.12);
  --danger:        #b01f14;   /* moroso, error */
  --danger-soft:   rgba(176, 31, 20, 0.10);
  --info:          #1d5a85;
  --info-soft:     rgba(29, 90, 133, 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: #0d5c47;   /* verde */
  --chart-2: #1d5a85;   /* azul */
  --chart-3: #a8792a;   /* latón */
  --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(13, 92, 71, 0.28);

  /* ---------- Movimiento ---------- */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --enter: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  --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);

  /* ---------- Skin v2 (docs/LINEA-VISUAL-V2.md) ---------- */
  --brillo: rgba(255, 255, 255, 0.75);           /* línea de luz interior en tarjetas */
  --borde-luz: rgba(13, 92, 71, 0.32);           /* borde al pasar el puntero */
  --glow: rgba(13, 92, 71, 0.14);                /* spotlight */
  --sk: var(--surface-3);                        /* esqueletos */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --row-h: 2.5rem; --row-h-touch: 4.5rem; --head-h: 2rem;
  --focus: 2px solid var(--accent);
  --shadow-menu: var(--shadow-md);
  --z-sticky: 10; --z-dropdown: 20; --z-modal: 40; --z-toast: 50;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121917; --bg-elev: #0f1513; --surface: #1a2320; --surface-2: #212c28; --surface-3: #2b3833;
    --overlay: rgba(0, 0, 0, 0.6);
    --border: #2d3b35; --border-strong: #465c54;
    --text: #e9ede9; --text-muted: #a5b0aa; --text-faint: #717d77; --text-inverse: #121917;
    --accent: #7fd3b5; --accent-strong: #7fd3b5; --accent-hover: #9be2c9; --accent-soft: rgba(127, 211, 181, 0.14); --accent-ink: #0d1f19; --accent-2: #4fbf95;
    --brass: #dcb768; --brass-bright: #e8c97e; --brass-soft: rgba(220, 183, 104, 0.16); --brass-ink: #1a1407;
    --success: #74cf9a; --success-soft: rgba(116, 207, 154, 0.14);
    --warning: #efbb5f; --warning-soft: rgba(239, 187, 95, 0.14);
    --danger: #f39089; --danger-soft: rgba(243, 144, 137, 0.14);
    --info: #93c6ea; --info-soft: rgba(147, 198, 234, 0.14);
    --chart-1: #7fd3b5; --chart-2: #93c6ea; --chart-3: #dcb768; --chart-4: #c3a6e6; --chart-5: #f0a07a; --chart-6: #a5b0aa;
    --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(127, 211, 181, 0.35);
    --brillo: rgba(255, 255, 255, 0.07); --borde-luz: rgba(127, 211, 181, 0.45); --glow: rgba(127, 211, 181, 0.12); --sk: #2b3833;
  }
}

/* ============================================================ Base mínima */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--bg); background-image: var(--grano); background-blend-mode: soft-light; 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-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease-out); pointer-events: none; }
@media (hover: hover) { .btn-primary:hover::after { transform: translateX(120%); } }
.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 { --x: 50%; --y: 50%; position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--brillo); transition: border-color var(--dur-base) var(--ease-out); }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(240px circle at var(--x) var(--y), var(--glow), transparent 60%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; }
@media (hover: hover) { .card:hover { border-color: var(--borde-luz); } .card:hover::before { opacity: 1; } }
.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); }
.badge-accent::before, .badge-success::before, .badge-warning::before, .badge-danger::before, .badge-info::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); flex: none; }

.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-2) var(--sp-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table td { height: var(--row-h); }
.table th { height: var(--head-h); padding-top: 0; padding-bottom: 0; }
.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); }

/* ============================================================ Utilidades del kit funcional y del skin v2 (antes con fallback en app.css) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skeleton { display: inline-block; background: var(--sk); border-radius: var(--radius-sm); animation: skel 1.2s ease-in-out 1; min-height: 1em; vertical-align: middle; }
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.skel-row { height: var(--row-h); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); }
.skel-row .skeleton { height: 0.9em; } .skel-head { height: var(--head-h); background: var(--bg-elev); }
.enter { animation: entrar var(--dur-fast) var(--ease-out) 1; }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kbd { font-family: var(--font-mono); font-size: 11px; line-height: 1; padding: 2px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text-muted); margin-left: 6px; vertical-align: middle; }
.btn-primary .kbd { background: transparent; color: inherit; border-color: rgba(255, 255, 255, 0.5); }
.busca { position: relative; display: inline-flex; align-items: center; max-width: 100%; } .busca .kbd { position: absolute; right: 8px; pointer-events: none; margin: 0; } .busca .input { padding-right: 34px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity var(--dur-instant) var(--ease); }
tr:hover .row-actions, tr:focus-within .row-actions { opacity: 1; }
.toast-action { background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: inherit; border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font: inherit; white-space: nowrap; }
.toast-action:hover { background: rgba(255, 255, 255, 0.15); }
.empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.empty h2 { margin: 0 0 var(--sp-2); color: var(--text); font-size: var(--fs-lg); } .empty p { margin: 0 0 var(--sp-4); }
.table-dense th { height: var(--head-h); padding: 0 var(--sp-3); } .table-dense td { height: var(--row-h); padding: 0 var(--sp-3); }
.autosave { color: var(--success); font-size: var(--fs-xs); font-weight: var(--fw-medium); animation: entrar var(--dur-fast) var(--ease-out) 1; }
@media (pointer: coarse) { .kbd { display: none; } .row-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skeleton, .enter, .autosave { animation: none; } .btn-primary::after { display: none; } }

/* ---- Skin v2 · piezas con marcado (contrato compartido Cuotas/Ruta, 2026-09-08) ----
   Sparkline: <span class="spark" aria-hidden="true"><i style="--v:.4"></i>…×7 (último con class="hoy")</span>
   Delta:     <span class="delta" data-tono="bien|mal|neutro">+12 % vs. mes pasado</span>
   Plan:      <a class="plan-mini" data-status="prueba|pagado|gratis|excedido"><span class="plan-mini-k">Plan Pro · prueba</span><strong>12 días restantes</strong><span class="bar"><i style="width:43%"></i></span><small>3 de 5 proyectos</small></a> */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 1.75rem; width: 100%; max-width: 9rem; margin-top: auto; }
.spark i { display: block; flex: 1 1 0; min-width: 3px; height: max(2px, calc(var(--v, 0) * 100%)); border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 28%, var(--surface-3)); }
.spark i.hoy { background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.kpi .spark { margin-top: var(--sp-2); }
.delta { display: inline; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.delta::before { display: inline-block; vertical-align: middle; margin-right: 4px; }
.delta::before { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.delta[data-tono="bien"] { color: var(--success); } .delta[data-tono="bien"]::before { border-bottom: 6px solid currentColor; }
.delta[data-tono="mal"] { color: var(--danger); } .delta[data-tono="mal"]::before { border-top: 6px solid currentColor; }
.delta[data-tono="neutro"] { color: var(--text-muted); } .delta[data-tono="neutro"]::before { width: 6px; height: 2px; border: 0; background: currentColor; }
/* data-signo (opcional) manda sobre la flecha; el color sigue siendo data-tono */
.delta[data-signo="pos"]::before { width: 0; height: 0; background: none; border: 4px solid transparent; border-top: 0; border-bottom: 6px solid currentColor; }
.delta[data-signo="neg"]::before { width: 0; height: 0; background: none; border: 4px solid transparent; border-bottom: 0; border-top: 6px solid currentColor; }
.delta[data-signo="cero"]::before { width: 6px; height: 2px; border: 0; background: currentColor; }
.plan-mini { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--brillo); font-size: var(--fs-sm); }
a.plan-mini:hover { border-color: var(--borde-luz); }
.plan-mini .plan-mini-k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.plan-mini .plan-mini-k::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.plan-mini[data-status="excedido"] .plan-mini-k::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.plan-mini[data-status="gratis"] .plan-mini-k::before { background: var(--text-faint); box-shadow: none; }
.plan-mini strong { font-size: var(--fs-md); letter-spacing: -0.01em; }
.plan-mini .bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 2px 0; }
.plan-mini .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); transition: width var(--dur-slow) var(--ease-out); }
.plan-mini[data-status="excedido"] .bar i { background: linear-gradient(90deg, #f87171, var(--danger)); }
.plan-mini small { color: var(--text-muted); font-size: var(--fs-xs); }
.plan-mini .btn { align-self: flex-start; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .plan-mini .bar i { transition: none; } }