/*  */
/* tokens.css  src/styles/tokens.css                                 */
/* Sistema de design tokens CSS de Gradar.                            */
/* Fuente de verdad: gradar_marco_ui_v0_3_0.md sec2                   */
/*                                                                     */
/* :root = tema DARK (default).                                       */
/* LIGHT y custom: ThemeContext inyecta overrides via setProperty.    */
/* Regla: nunca hex directo en componentes  siempre var(--token).    */
/*                                                                     */
/* v0.3.0  2026-04-10  paleta base dark/light                         */
/* v0.7.1  2026-04-12  badge etapa/subetapa/tarea, gantt-bloqueado    */
/* v0.7.2  2026-04-12  paleta badge y semanticos desaturados          */
/* v0.10.0 2026-04-17  fill-solid Gantt, segmentos v2                 */
/* v0.10.x 2026-04-18  f1-tenant-bg, f1-tenant-border                 */
/* v0.11.0 2026-04-19  Etapa 1:                                       */
/*   FIX: color-row-bg/subtle/dimmed/subrow corregidos a valores DARK */
/*        (eran valores LIGHT heredados de v2.x hardcodeados en :root)*/
/*   FIX: gantt-scroll-thumb alineado con TEMA_DARK en themeTokensData*/
/*   NEW: font-size-nodo-etapa/subetapa/tarea/badge                   */
/*   NEW: font-size-gantt-etapa/subetapa/tarea                        */
/*   NEW: font-size-lectura + lectura-min + lectura-max               */
/*   NEW: gantt-row-etapa/subetapa/tarea (ROW_H desde tokens)         */
/*  */
:root {

    /*  PLATAFORMA  */
    --app-min-width: 1280px;

    /*  TIPOGRAFIA GENERICA  */
    --font-family:  'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

    --font-size-xs:   9px;
    --font-size-sm:   10px;
    --font-size-base: 11px;
    --font-size-md:   12px;
    --font-size-lg:   14px;
    --font-size-xl:   15px;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /*  TIPOGRAFIA SEMANTICA  NODOS DEL ARBOL  */
    /* Tokens independientes por nivel. Cambiar estos NO afecta         */
    /* el resto de la UI (dashboard, forms, etc.).                      */
    /* Usados en TabArbol.tsx exclusivamente.                           */
    --font-size-nodo-etapa:    12px;
    --font-size-nodo-subetapa: 11px;
    --font-size-nodo-tarea:    10px;
    --font-size-nodo-badge:    10px;   /* badge tipoCodigo en todos los niveles */

    /*  TIPOGRAFIA SEMANTICA  GANTT  */
    /* Usados en TabGantt.tsx columna de nombres.                       */
    --font-size-gantt-etapa:    12px;
    --font-size-gantt-subetapa: 11px;
    --font-size-gantt-tarea:    10px;

    /*  TIPOGRAFIA SEMANTICA  LECTURA LARGA  */
    /* Para textareas: objetivo, problema, beneficio, notas.            */
    /* El icono +/- en campo modifica estado local React en ese campo.  */
    /* Min/max: limites del control, no se persisten en el tema.        */
    --font-size-lectura:     11px;
    --font-size-lectura-min: 10px;
    --font-size-lectura-max: 15px;

    /*  PAGE BACKGROUND  */
    --color-page-bg-1:         #070F1A;
    --color-page-bg-2:         #0C1829;
    --color-page-bg-3:         #111D2E;

    /*  F1 APPHEADER  */
    --color-f1-bg:             rgba(7, 15, 26, 0.85);
    --color-f1-border:         rgba(148, 163, 184, 0.08);
    --color-f1-border-strong:  rgba(148, 163, 184, 0.25);
    --color-f1-text:           #64748B;
    --color-f1-tenant:         #E2E8F0;
    --color-f1-tenant-bg:      rgba(148, 163, 184, 0.06);
    --color-f1-tenant-border:  rgba(148, 163, 184, 0.12);

    /*  F2 APPNAV  */
    --color-f2-bg:             rgba(12, 24, 41, 0.7);
    --color-f2-border:         rgba(148, 163, 184, 0.06);
    --color-f2-active:         #38BDF8;
    --color-f2-active-bg:      rgba(56, 189, 248, 0.10);
    --color-f2-text:           rgba(148, 163, 184, 0.5);
    --color-f2-text-hover:     rgba(148, 163, 184, 0.85);
    --color-f2-text-active:    #E2E8F0;

    /*  F3 BREADCRUMB  */
    --color-f3-bg:             rgba(15, 23, 42, 0.5);
    --color-f3-border:         rgba(148, 163, 184, 0.08);
    --color-f3-text:           #475569;
    --color-f3-text-active:    #CBD5E1;

    /*  F4 CONTENT  */
    --color-f4-bg:             #0B1220;

    /*  ACCENT  */
    --color-accent:            #38BDF8;
    --color-accent-dark:       #0EA5E9;
    --color-accent-bg:         rgba(56, 189, 248, 0.08);
    --color-accent-border:     rgba(56, 189, 248, 0.2);

    /*  CARD / SURFACE  */
    --color-card-bg:           rgba(15, 23, 42, 0.55);
    --color-card-border:       rgba(148, 163, 184, 0.08);
    --color-card-shadow:       0 4px 24px rgba(0, 0, 0, 0.3);

    /*  ROW BACKGROUNDS  */
    /* FIX v0.11.0: eran #EDF1F7/#E8EDF3/#F1F5F9/#EAF0F7 (valores LIGHT */
    /* de v2.x), corregidos a los valores DARK de themeTokensData.       */
    --color-row-bg:              #0E1B2E;
    --color-row-bg-subtle:       #0C1829;
    --color-row-bg-dimmed:       #0B1524;
    --color-subrow-bg:           #0D1827;
    --color-row-bg-etapa:        rgba(56, 189, 248, 0.07);
    --color-row-bg-subetapa:     rgba(139, 92, 246, 0.04);
    --color-row-bg-tarea:        transparent;

    /*  TABLE  */
    --color-table-header-bg:   rgba(15, 23, 42, 0.7);
    --color-table-row-hover:   rgba(56, 189, 248, 0.04);
    --color-table-border:      rgba(148, 163, 184, 0.06);

    /*  TEXT  */
    --color-text-primary:      #E2E8F0;
    --color-text-secondary:    #CBD5E1;
    --color-text-muted:        #64748B;
    --color-text-disabled:     #475569;
    --color-text-placeholder:  #475569;
    --color-text-inverse:      #0F172A;

    /*  SEMANTICOS  SUCCESS  */
    --color-success:           #4ADE80;
    --color-success-dark:      #22C55E;
    --color-success-bg:        rgba(34, 197, 94, 0.08);
    --color-success-border:    rgba(34, 197, 94, 0.18);
    --color-success-text:      #6BAF82;
    --color-success-glow:      rgba(34, 197, 94, 0.2);

    /*  SEMANTICOS  WARNING  */
    --color-warning:           #FBBF24;
    --color-warning-dark:      #F59E0B;
    --color-warning-bg:        rgba(245, 158, 11, 0.08);
    --color-warning-border:    rgba(245, 158, 11, 0.18);
    --color-warning-text:      #C9973A;
    --color-warning-glow:      rgba(245, 158, 11, 0.2);

    /*  SEMANTICOS  DANGER  */
    --color-danger:            #F87171;
    --color-danger-dark:       #EF4444;
    --color-danger-bg:         rgba(239, 68, 68, 0.08);
    --color-danger-border:     rgba(239, 68, 68, 0.18);
    --color-danger-text:       #C06060;
    --color-danger-glow:       rgba(239, 68, 68, 0.2);

    /*  SEMANTICOS  INFO  */
    --color-info:              #38BDF8;
    --color-info-bg:           rgba(56, 189, 248, 0.08);
    --color-info-border:       rgba(56, 189, 248, 0.15);
    --color-info-text:         #38BDF8;

    /*  SEMANTICOS  RISK  */
    --color-risk:              #FBBF24;
    --color-risk-bg:           rgba(245, 158, 11, 0.08);
    --color-risk-border:       rgba(245, 158, 11, 0.15);
    --color-risk-text:         #FBBF24;

    /*  BADGE VARIANTS  */
    --badge-blue-bg:           rgba(56, 189, 248, 0.08);
    --badge-blue-border:       rgba(56, 189, 248, 0.18);
    --badge-blue-text:         #7BBFD4;

    --badge-green-bg:          rgba(34, 197, 94, 0.08);
    --badge-green-border:      rgba(34, 197, 94, 0.18);
    --badge-green-text:        #6BAF82;

    --badge-yellow-bg:         rgba(245, 158, 11, 0.08);
    --badge-yellow-border:     rgba(245, 158, 11, 0.18);
    --badge-yellow-text:       #C9973A;

    --badge-red-bg:            rgba(239, 68, 68, 0.08);
    --badge-red-border:        rgba(239, 68, 68, 0.18);
    --badge-red-text:          #C06060;

    --badge-gray-bg:           rgba(148, 163, 184, 0.08);
    --badge-gray-border:       rgba(148, 163, 184, 0.14);
    --badge-gray-text:         #7A8FA3;

    --badge-purple-bg:         rgba(139, 92, 246, 0.08);
    --badge-purple-border:     rgba(139, 92, 246, 0.18);
    --badge-purple-text:       #9B86C8;

    /*  BADGE NIVEL DE NODO (arbol)  */
    --badge-etapa-bg:          rgba(56, 189, 248, 0.08);
    --badge-etapa-border:      rgba(56, 189, 248, 0.22);
    --badge-etapa-text:        #6BAFC4;

    --badge-subetapa-bg:       rgba(139, 92, 246, 0.08);
    --badge-subetapa-border:   rgba(139, 92, 246, 0.22);
    --badge-subetapa-text:     #9B86C8;

    --badge-tarea-bg:          rgba(148, 163, 184, 0.08);
    --badge-tarea-border:      rgba(148, 163, 184, 0.16);
    --badge-tarea-text:        #7A8FA3;

    /*  ARBOL DE PROYECTO  LAYOUT  */
    --tree-indent-etapa:       50px;
    --tree-indent-subetapa:    100px;
    --tree-indent-tarea:       200px;
    --tree-line-width:         2px;
    --tree-line-opacity:       0.8;

    /*  GANTT  layout  */
    --gantt-px-dia:            28px;
    --gantt-col-nombre:        220px;
    --gantt-fila-height:       36px;
    --gantt-barra-etapa:       18px;
    --gantt-barra-subetapa:    14px;
    --gantt-barra-tarea:       10px;
    /* Alturas de fila por tipo  leidas por TabGantt.tsx en ROW_H      */
    --gantt-row-etapa:         32px;
    --gantt-row-subetapa:      28px;
    --gantt-row-tarea:         24px;

    /*  GANTT  colores barra (legacy, por estado)  */
    --color-gantt-barra-pendiente:  #64748B;
    --color-gantt-barra-activa:     #4BA8C8;
    --color-gantt-barra-riesgo:     #C9973A;
    --color-gantt-barra-atrasada:   #C06060;
    --color-gantt-barra-completada: #4BAF78;
    --color-gantt-barra-bloqueado:  #C9A84C;

    /*  GANTT FILL / BORDE  */
    --color-gantt-fill-pendiente:        rgba(100, 116, 139, 0.10);
    --color-gantt-fill-pendiente-solid:  #6B8399;
    --color-gantt-borde-pendiente:       #6B8399;

    --color-gantt-fill-activa:           rgba(75, 168, 200, 0.10);
    --color-gantt-fill-activa-solid:     #4FA8C4;
    --color-gantt-borde-activa:          #4FA8C4;

    --color-gantt-fill-riesgo:           rgba(201, 151, 58, 0.10);
    --color-gantt-fill-riesgo-solid:     #C49050;
    --color-gantt-borde-riesgo:          #C49050;

    --color-gantt-fill-atrasada:         rgba(192, 96, 96, 0.10);
    --color-gantt-fill-atrasada-solid:   #B86060;
    --color-gantt-borde-atrasada:        #B86060;

    --color-gantt-fill-completada:       rgba(75, 175, 120, 0.10);
    --color-gantt-fill-completada-solid: #4FAD88;
    --color-gantt-borde-completada:      #4FAD88;

    --color-gantt-fill-bloqueado:        rgba(201, 168, 76, 0.10);
    --color-gantt-fill-bloqueado-solid:  #C4A040;
    --color-gantt-borde-bloqueado:       #C4A040;

    /*  GANTT  dias no laborales  */
    --color-gantt-no-laboral:        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(148, 163, 184, 0.14) 3px,
            rgba(148, 163, 184, 0.14) 4.5px
    );
    --color-gantt-no-laboral-header: rgba(148, 163, 184, 0.20);

    /*  GANTT  anticipado  */
    --color-gantt-anticipo:          repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(79, 173, 136, 0.20) 3px,
            rgba(79, 173, 136, 0.20) 4.5px
    );
    --color-gantt-anticipo-borde:    #4FAD88;

    /*  GANTT  segmentos v2  */
    --color-gantt-seg-atraso-inicio-fill:    rgba(192, 96, 96, 0.08);
    --color-gantt-seg-atraso-inicio-borde:   #B86060;

    --color-gantt-seg-anticipo-inicio-fill:  rgba(75, 168, 200, 0.08);
    --color-gantt-seg-anticipo-inicio-borde: #4FA8C4;

    --color-gantt-seg-plan-restante-fill:    rgba(100, 116, 139, 0.08);
    --color-gantt-seg-plan-restante-borde:   #6B8399;

    --color-gantt-seg-atraso-prov-fill:      rgba(192, 96, 96, 0.55);
    --color-gantt-seg-atraso-prov-borde:     #B86060;

    /*  GANTT  columna hoy  */
    --color-gantt-hoy-col:           rgba(59, 130, 246, 0.07);
    --color-gantt-hoy-col-header:    rgba(59, 130, 246, 0.15);
    --color-gantt-hoy-borde:         rgba(59, 130, 246, 0.30);
    --color-gantt-hoy-texto:         rgba(59, 130, 246, 0.90);
    --color-gantt-hoy-linea:         rgba(30, 64, 175, 0.70);
    --color-gantt-row-hover:         rgba(59, 130, 246, 0.08);

    /* FIX v0.11.0: era rgba(100,116,139,0.4/0.65)  alineado con TEMA_DARK */
    --color-gantt-scroll-thumb:       rgba(56, 189, 248, 0.25);
    --color-gantt-scroll-thumb-hover: rgba(56, 189, 248, 0.45);

    /*  HITOS EN GANTT  */
    --color-hito-cumplido:   var(--color-success);
    --color-hito-pendiente:  rgba(148, 163, 184, 0.70);

    /*  DRAG & DROP  */
    --drag-zona-borrar:        60px;
    --drag-zona-ascender:      80px;
    --drag-zona-descender:     160px;

    /*  LINEAS DE IDENTACION  */
    --indent-done:             var(--color-success);
    --indent-active:           var(--color-accent);
    --indent-risk:             var(--color-warning);
    --indent-late:             var(--color-danger);
    --indent-pending:          var(--color-text-disabled);

    /*  PROGRESS BAR  */
    --progress-bg:             rgba(148, 163, 184, 0.1);
    --progress-fill:           var(--color-accent);

    /*  INLINE ADD ROW  */
    --inline-add-bg:           rgba(56, 189, 248, 0.03);
    --inline-add-border:       rgba(56, 189, 248, 0.12);
    --inline-add-placeholder:  var(--color-text-disabled);

    /*  DROPDOWN / MENU  */
    --dropdown-bg:             rgba(15, 23, 42, 0.92);
    --dropdown-border:         rgba(148, 163, 184, 0.1);
    --dropdown-hover:          rgba(56, 189, 248, 0.06);
    --dropdown-profile-bg:     rgba(7, 15, 26, 0.5);

    /*  GLASS MORPHISM  */
    --glass-blur-sm:           8px;
    --glass-blur-md:           12px;
    --glass-blur-lg:           16px;
    --glass-blur-xl:           20px;

    /*  BUTTON PRIMARY  */
    --btn-primary-bg:          #2563EB;
    --btn-primary-hover:       #3B82F6;
    --btn-primary-text:        #FFFFFF;

    /*  BUTTON SUCCESS  */
    --btn-success-bg:          #22C55E;
    --btn-success-hover:       #16A34A;
    --btn-success-text:        #FFFFFF;
    --btn-success-shadow:      0 1px 3px rgba(34, 197, 94, 0.3);

    /*  BUTTON WARNING  */
    --btn-warning-bg:          #F59E0B;
    --btn-warning-hover:       #D97706;
    --btn-warning-text:        #0F172A;

    /*  BUTTON DANGER  */
    --btn-danger-bg:           #EF4444;
    --btn-danger-hover:        #DC2626;
    --btn-danger-text:         #FFFFFF;

    /*  BUTTON SECONDARY  */
    --btn-secondary-bg:        transparent;
    --btn-secondary-border:    rgba(148, 163, 184, 0.2);
    --btn-secondary-text:      #CBD5E1;
    --btn-secondary-hover-bg:  rgba(148, 163, 184, 0.06);

    /*  BUTTON GHOST  */
    --btn-ghost-text:          var(--color-accent);
    --btn-ghost-hover-bg:      var(--color-accent-bg);

    /*  AVATAR  */
    --avatar-default-bg:       #2563EB;
    --avatar-pmo-bg:           #7C3AED;
    --avatar-superadmin-bg:    #DC2626;

    /*  LAYOUT F1F4  */
    --f1-height:    48px;
    --f2-height:    38px;
    --f3-height:    34px;
    --f4-padding:   10px 16px;
    --f4-gap:       8px;

    /*  ESPACIADO  */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 12px;
    --space-6: 14px;
    --space-7: 16px;

    /*  RADIO DE BORDE  */
    --radius-sm:   3px;
    --radius-md:   5px;
    --radius-lg:   6px;
    --radius-xl:   8px;
    --radius-full: 9999px;

    /*  SOMBRAS  */
    --shadow-card:     0 0 0 0.5px var(--color-card-border);
    --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.4);

    /*  ICONOS  */
    --icon-size-sm:  10px;
    --icon-size-md:  12px;
    --icon-size-lg:  14px;
    --icon-stroke:   1.8;

    /*  SUSCRIPCION BLOQUEADA  */
    --blocked-blur:        4px;
    --blocked-overlay-bg:  rgba(7, 15, 26, 0.6);

    /*  DATE PICKER  */
    /* Componente DatePicker propio  src/components/ui/DatePicker.tsx */
    /* Todos los valores son alias de tokens existentes  sin hex nuevos */
    --datepicker-day-size:       28px;
    --datepicker-header-color:   var(--color-text-secondary);
    --datepicker-weekday-color:  var(--color-text-muted);
    --datepicker-selected-bg:    var(--color-accent-bg);
    --datepicker-selected-border: var(--color-accent);
    --datepicker-selected-text:  var(--color-accent);
    --datepicker-today-dot:      var(--color-accent);
    --datepicker-other-month:    var(--color-text-disabled);
    --datepicker-hover-bg:       var(--color-table-row-hover);

    /*  TEXTAREA ZOOM  */
    /* Botones A/A dentro de textareas  src/pages/iniciativas/IniciativaNueva.tsx */
    --textarea-zoom-btn-color:       var(--color-text-muted);
    --textarea-zoom-btn-hover:       var(--color-text-secondary);
    --textarea-zoom-btn-bg-hover:    var(--color-accent-bg);

}