/* ============================================================================
   FSH Design Tokens — Family Success Hub
   Derivados de la implementación real de FSH (2026-10-13). Pensados para copiar
   a otra aplicación como PRIMERA hoja global y referenciarlos desde su CSS.

   Convención de comentarios:
     [FSH]       valor literal que FSH usa hoy (hex/px repetidos en app.css y vistas).
     [PROPUESTA] normalización que FSH NO tiene centralizada; se propone para reutilizar.
   FSH no fue modificado para crear estos tokens.

   Copia en el portal de Mesa de ayuda: el original está en
   https://familias.activelearning.com.ar/css/design-system/FSH-DESIGN-TOKENS.css
   y no se edita acá. Lo propio del portal va en el bloque del final.
   ============================================================================ */

:root {
  /* ── Color: marca / acento ─────────────────────────────────────────────── */
  --color-primary:          #4f46e5;   /* [FSH] .btn-primary, --fsh, paginación actual */
  --color-primary-hover:    #4338ca;   /* [FSH] hover de botones; texto chips seleccionados */
  --color-primary-strong:   #3730a3;   /* [FSH] texto ítem activo sidebar */
  --color-primary-soft:     #6366f1;   /* [FSH] breadcrumb links, icono activo, spinner */
  --color-primary-light:    #818cf8;   /* [FSH] borde de foco de .fi */
  --color-primary-lighter:  #a5b4fc;   /* [FSH] hover de chips, focus ring de la sidebar */
  --color-primary-bg:       #eef2ff;   /* [FSH] fondo activo/seleccionado */
  --color-primary-border:   #c7d2fe;   /* [FSH] .btn-secondary, badges indigo */
  --color-primary-gradient: linear-gradient(135deg, #6366f1, #4f46e5); /* [FSH] .btn-full, avatar fallback */
  --color-focus-ring:       rgba(129, 140, 248, .15);               /* [FSH] .fi:focus box-shadow 0 0 0 3px */

  /* ── Color: fondos y superficies ───────────────────────────────────────── */
  --color-background:        #F8FAFC;  /* [FSH] efectivo en admin (head.ejs pisa a app.css) */
  --color-background-alt:    #F6F8FB;  /* [FSH] app.css / Login */
  --color-sidebar:           #FAFBFD;  /* [FSH] .fsh-sb */
  --color-topbar:            #FFFFFF;  /* [FSH] .fsh-top */
  --color-surface:           #FFFFFF;  /* [FSH] .card */
  --color-surface-2:         #f8fafc;  /* [FSH] th, tiles, meta-item, fila expandida */
  --color-surface-3:         #f1f5f9;  /* [FSH] hover neutro, chips, .code */
  --color-surface-modal-head:#fafbfd;  /* [FSH] cabeceras de modal */
  --color-row-hover:         #fafbfc;  /* [FSH] tr:hover td */
  --color-row-selected:      #eef2ff;  /* [FSH] fila seleccionada */

  /* ── Color: texto ──────────────────────────────────────────────────────── */
  --color-text:            #0f172a;    /* [FSH] títulos, valores (slate-900) */
  --color-text-body:       #334155;    /* [FSH] celdas, inputs (slate-700) */
  --color-text-base:       #1e293b;    /* [FSH] body en app.css (slate-800) */
  --color-text-secondary:  #475569;    /* [FSH] nav, labels, ghost (slate-600) */
  --color-text-muted:      #64748b;    /* [FSH] subtítulos, info (slate-500) */
  --color-text-faint:      #94a3b8;    /* [FSH] eyebrows, placeholders, hints (slate-400) */
  --color-text-disabled:   #cbd5e1;    /* [FSH] «—», separadores (slate-300) */
  --color-text-on-primary: #ffffff;

  /* ── Color: bordes ─────────────────────────────────────────────────────── */
  --color-border:        #e2e8f0;      /* [FSH] tablas, controles, drawer (slate-200) */
  --color-border-card:   #e0e6ef;      /* [FSH] .card */
  --color-border-input:  #dde3ec;      /* [FSH] .fi */
  --color-border-soft:   #f1f5f9;      /* [FSH] filas, separadores de card */
  --color-border-subtle: #eef1f6;      /* [FSH] sidebar, paneles (también #eef2f7 / #f0f3f8) */

  /* ── Color: estados semánticos (tríadas fondo · borde · texto) ─────────── */
  --color-success-bg:     #f0fdf4;     /* [FSH] */
  --color-success-border: #bbf7d0;     /* [FSH] */
  --color-success-text:   #15803d;     /* [FSH] (alterno #16a34a en .btn-success / badges) */
  --color-success-solid:  #16a34a;     /* [FSH] dots, iconos ok */

  --color-warning-bg:     #fffbeb;     /* [FSH] */
  --color-warning-border: #fde68a;     /* [FSH] */
  --color-warning-text:   #92400e;     /* [FSH] (alternos #b45309, #d97706) */
  --color-warning-solid:  #d97706;     /* [FSH] .btn-amber texto, botón «dirty» */

  --color-danger-bg:      #fff1f2;     /* [FSH] */
  --color-danger-border:  #fecdd3;     /* [FSH] (alterno #fca5a5 en .btn-danger) */
  --color-danger-text:    #be123c;     /* [FSH] deuda, crítica (alterno #dc2626) */
  --color-danger-solid:   #dc2626;     /* [FSH] .btn-danger-solid */
  --color-danger-solid-hover: #b91c1c; /* [FSH] */

  --color-info-bg:        #eff6ff;     /* [FSH] */
  --color-info-border:    #bfdbfe;     /* [FSH] */
  --color-info-text:      #1d4ed8;     /* [FSH] (alterno #0369a1) */

  --color-orange-bg:      #fff7ed;     /* [FSH] «alta», PAUSED, PARTIAL */
  --color-orange-border:  #fed7aa;     /* [FSH] */
  --color-orange-text:    #c2410c;     /* [FSH] */

  --color-yellow-bg:      #fefce8;     /* [FSH] «media», BCRA ámbar, RUNNING */
  --color-yellow-border:  #fef08a;     /* [FSH] */
  --color-yellow-text:    #a16207;     /* [FSH] */

  --color-violet-bg:      #f5f3ff;     /* [FSH] QUEUED, STALE, tokens (también #ede9fe) */
  --color-violet-border:  #ddd6fe;     /* [FSH] */
  --color-violet-text:    #6d28d9;     /* [FSH] (alterno #7c3aed) */

  --color-neutral-bg:     #f8fafc;     /* [FSH] .badge-inactive, DRAFT */
  --color-neutral-border: #e2e8f0;     /* [FSH] */
  --color-neutral-text:   #94a3b8;     /* [FSH] (alterno #475569 para DRAFT) */

  --color-notification:   #e11d48;     /* [FSH] badges contadores (sidebar, no leídas), --bad */
  --color-urgent:         #ea580c;     /* [FSH] --warn, toast «por vencer» */

  --color-whatsapp:       #25d366;     /* [FSH] --wa */
  --color-whatsapp-dark:  #128c3e;     /* [FSH] --wa-dark */
  --color-whatsapp-soft:  #e7f9ee;     /* [FSH] --wa-soft */

  --color-scrim:          rgba(15, 23, 42, .45); /* [PROPUESTA] hoy .42/.46/.5/.55 y rgba(0,0,0,.32) */
  --color-scrim-nav:      rgba(0, 0, 0, .35);    /* [FSH] overlay del menú mobile */

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, sans-serif;            /* [FSH] */
  --font-mono: ui-monospace, Menlo, monospace;            /* [FSH] */

  --text-2xs:  10px;    /* [FSH] panel labels, badges mini */
  --text-xs:   11px;    /* [FSH] th, badges, hints */
  --text-sm:   12px;    /* [FSH] labels, metadatos (el más usado) */
  --text-base: 13px;    /* [FSH] cuerpo: celdas, botones, inputs */
  --text-md:   14px;    /* [FSH] títulos de card, .btn-lg */
  --text-lg:   16px;    /* [FSH] títulos de drawer/modal */
  --text-xl:   19px;    /* [FSH] títulos operativos (Conversaciones, Dashboard), KPIs chicos */
  --text-2xl:  24px;    /* [FSH] .ph-title, .kpi-mini-val */
  --text-3xl:  28px;    /* [FSH] home-title (Asignaciones usa 30) */
  /* [PROPUESTA] evitar los medios 11.5 / 12.5 / 13.5 que FSH también usa */

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;  /* [FSH] usado en títulos/KPIs; [PROPUESTA] cargar Inter hasta 800 */

  --leading-none:   1;    /* [FSH] cifras */
  --leading-tight:  1.2;  /* [FSH] títulos */
  --leading-normal: 1.5;  /* [FSH] cuerpo */

  --tracking-tight:     -.01em;  /* [FSH] títulos */
  --tracking-tighter:   -.02em;  /* [FSH] KPIs grandes (hasta -.04em) */
  --tracking-caps:       .05em;  /* [FSH] th, labels */
  --tracking-caps-wide:  .08em;  /* [FSH] cabeceras de grupo de la sidebar, panel labels */

  /* ── Radios ────────────────────────────────────────────────────────────── */
  --radius-xs:    4px;    /* [FSH] .code, .chip-mini */
  --radius-sm:    6px;    /* [FSH] .badge, .role-badge */
  --radius-md:    8px;    /* [FSH] ítems nav, tabs, dropdown-close (el más usado) */
  --radius-input: 9px;    /* [FSH] .fi, .btn */
  --radius-lg:   10px;    /* [FSH] .alert, .dropdown-menu, .chip, .meta-item */
  --radius-xl:   12px;    /* [FSH] .kpi-mini, .m-card, panel de familia */
  --radius-2xl:  16px;    /* [FSH] .card (app.css), modal */
  --radius-3xl:  20px;    /* [FSH] cards de Cobranzas/Ficha (18), module-card, modal grande */
  --radius-full: 9999px;  /* [FSH] pills, avatares */

  /* ── Espaciado ─────────────────────────────────────────────────────────── */
  /* [PROPUESTA] escala sobre los valores que FSH repite: 4·6·8·10·12·14·16·20·24·28·32·40·48 */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --space-card-padding:   20px;        /* [FSH] .card-body (22–24 en formularios) */
  --space-card-gap:       16px;        /* [FSH] gap entre cards (16–20) */
  --space-control-gap:     8px;        /* [FSH] gap de toolbar / acciones */
  --space-chip-gap:        6px;        /* [FSH] .chips-wrap */
  --space-field-gap:      14px;        /* [FSH] .field-wrap / .form-row (14–16) */
  --space-page-x:         24px;        /* [FSH] .page-wrap horizontal */
  --space-page-top:       28px;        /* [FSH] .page-wrap superior */
  --space-page-bottom:    80px;        /* [FSH] .page-wrap inferior */
  --space-page-x-mobile:  14px;        /* [FSH] .page-wrap ≤767 */
  --space-page-top-mobile:16px;        /* [FSH] */
  --space-cell-y:         11px;        /* [FSH] td padding vertical */
  --space-cell-x:         14px;        /* [FSH] td padding horizontal */

  /* ── Sombras ───────────────────────────────────────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(15, 23, 42, .04);                                   /* [FSH] Dashboard, --ff-shadow */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, .06);                                      /* [FSH] .card */
  --shadow-card-2:  0 2px 8px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .03);        /* [FSH] cards de Cobranzas */
  --shadow-md:      0 8px 24px rgba(0, 0, 0, .12);                                     /* [FSH] dropdowns / popovers */
  --shadow-panel:   0 8px 32px -4px rgba(15, 23, 42, .10), 0 2px 8px rgba(0, 0, 0, .04); /* [FSH] panel lateral, .fc-card */
  --shadow-lg:      0 24px 60px rgba(15, 23, 42, .28);                                 /* [FSH] modales */
  --shadow-drawer: -4px 0 24px rgba(0, 0, 0, .12);                                     /* [FSH] .drawer */
  --shadow-sidebar: 2px 0 10px rgba(0, 0, 0, .04);                                     /* [FSH] .fsh-sb */
  --shadow-hover:   0 8px 24px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .05);        /* [FSH] .module-card:hover */

  /* ── Dimensiones ───────────────────────────────────────────────────────── */
  --sidebar-width:           252px;    /* [FSH] */
  --sidebar-width-collapsed:  72px;    /* [FSH] */
  --sb-offset: var(--sidebar-width);   /* [FSH] nombre literal usado por FSH (body padding-left) */
  --topbar-height:            52px;    /* [FSH] mobile */
  --brand-height:             64px;    /* [FSH] cabecera de la sidebar */
  --nav-item-height:          30px;    /* [FSH] .fsh-lnk */
  --nav-icon-size:            16px;    /* [FSH] --nav-gutter */

  --control-height:     38px;          /* [FSH] .btn, .fi */
  --control-height-sm:  30px;          /* [FSH] .btn-sm (inputs .fi-sm 32) */
  --control-height-lg:  44px;          /* [FSH] .btn-lg */

  --content-max:        1400px;        /* [FSH] .page-wrap */
  --content-max-narrow:  900px;        /* [FSH] .page-wrap--narrow */
  --content-max-wide:   1520px;        /* [FSH] .page-wrap--wide */
  --content-max-data:   1680px;        /* [FSH] Cobranzas / Ficha / Portal */

  --drawer-width:  400px;              /* [FSH] (460 en Usuarios) */
  --modal-sm:      460px;              /* [FSH] renombrar */
  --modal-md:      640px;              /* [FSH] roles y colegios, tokens, BCRA (660) */
  --modal-lg:      860px;              /* [FSH] PDF */
  --modal-max-height: 88vh;            /* [FSH] (82–88; 95 en mobile) */

  /* ── Capas (z-index) ───────────────────────────────────────────────────── */
  /* [PROPUESTA] escala única; FSH usa 40/45/50 (nav), 50–100 (dropdown), 900 (toast),
     1000–1001 (overlay/modal/drawer) y hasta 1500/2000 en modales puntuales. */
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-topbar:      400;
  --z-nav-overlay: 450;
  --z-sidebar:     500;
  --z-toast:       900;
  --z-overlay:    1000;
  --z-modal:      1001;

  /* ── Movimiento ────────────────────────────────────────────────────────── */
  --transition-fast:   120ms;          /* [FSH] hover de botones/chips */
  --transition-input:  130ms;          /* [FSH] foco de .fi */
  --transition-layout: 200ms ease;     /* [FSH] sidebar ancho/transform */
  --transition-drawer: 250ms cubic-bezier(.4, 0, .2, 1); /* [FSH] .drawer */

  /* ── Breakpoints (referencia; CSS no admite var() en @media) ───────────── */
  /* [PROPUESTA] sobre los valores reales de FSH:
       --bp-sm  640px  → padding de página, grids 1 col, botones full-width
       --bp-md  768px  → sidebar ↔ topbar + hamburguesa; tablas → cards
       --bp-lg  900px  → formularios de dos columnas → una
       --bp-xl 1024px  → padding de página amplio
       --bp-2xl 1280px → tabla + panel lateral; grids de 4 cards (1200) */
}

/* ── Portal Mesa de ayuda ──────────────────────────────────────────────────
   Lo que FSH no tiene y el portal sí: los colores y tamaños que un admin
   puede cambiar desde Configuración › Diseño. Los colores editables son
   tokens de FSH (--color-primary, --color-sidebar, --color-background,
   --color-text, --color-surface, --color-text-body) más estos tres; si se
   cambia el acento, /css/paleta.css recalcula también sus tonos derivados.
   Los --fs-* son multiplicadores de la escala de FSH, por sector. */
:root {
  --sb-ink:         #475569;   /* texto de los ítems de la barra lateral */
  --finalizar-bg:   #16a34a;   /* botón Finalizar tarea: verde de éxito */
  --finalizar-ink:  #ffffff;

  --fs-menu:      1;
  --fs-titulos:   1;
  --fs-tarjetas:  1;
  --fs-botones:   1;
  --fs-finalizar: 1;
  --fs-footer:    1;
}

/* ── Fundamentos mínimos (opcional, mismos valores que FSH) ────────────────── */
/*
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-background);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-base);
}
@media (min-width: 768px) { body { padding-left: var(--sb-offset); transition: padding-left .2s ease; } }
@media (max-width: 767px) { body { padding-top: var(--topbar-height); } }
*/