/* Padia Pro Design System — Tokens
 * Fuente: brand board Padia Pro v1 (oct 2026).
 * Tipografía: Source Sans 3 (Calibri solo en .pptx/.docx editables — ver --pp-font-office).
 * Espaciado entre letras: 0% (única excepción: etiquetas de contexto en mayúsculas). Interlineado 120% en web/app.
 * Modos: claro (por defecto). El modo oscuro existe, pero los tokens oscuros de Padia Pro están PENDIENTES (DESIGN.md §19) —
 * nunca construir el modo oscuro invirtiendo colores.
 * Superficie de página: BG-26 por defecto (apps nuevas 2026). Plataforma actual: agregar data-pp-surface="platform".
 * Los tokens marcados LEGACY no están en DESIGN.md v8 — se mantienen por compatibilidad, no usar en trabajos nuevos.
 */

/* Archivos de fuentes locales (en /fonts/, junto a esta hoja de estilos). Las rutas se
   resuelven relativas a la hoja de estilos — las fuentes funcionan esté donde esté el HTML. */
@font-face { font-family: "Source Sans 3"; font-weight: 200; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-Light.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-Italic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-Medium.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-Bold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 800; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("fonts/SourceSans3-Black.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 900; font-style: italic; font-display: swap;
  src: url("fonts/SourceSans3-BlackItalic.ttf") format("truetype"); }

:root {
  /* ── Marca Padia Pro (brand board v1 · oct 2026) ──────────── */
  --pp-petroleo:    #0B6B63;  /* COLOR PRINCIPAL — verde petróleo (= primary-500) */
  --pp-tinta:       #0B1F1C;  /* texto, botón primario, fondos oscuros de marca */
  --pp-sello:       #19C68A;  /* acento secundario de marca (lente del isotipo) */
  --pp-sello-texto: #0B7A55;  /* verde para texto/enlaces sobre fondos claros */
  --pp-niebla:      #DDE4E1;  /* bordes sutiles, neutros */
  --pp-papel:       #FFFFFF;  /* superficies */

  /* ── Colores base / semánticos ───────────────────────────────── */
  --pp-color-primary:    #0B6B63;  /* verde — MARCA + estado ACTIVO (nav, tabs, stepper), enlaces, foco, tags informativos. NO es el botón primario. */
  --pp-color-secondary:  #0B1F1C;  /* tinta — ACCIÓN (botón primario) + estructura, texto */
  --pp-color-default:    #DDE4E1;  /* neutro por defecto */
  --pp-color-success:    #04B763;
  --pp-color-warning:    #C99D00;
  --pp-color-danger:     #CC0000;
  --pp-color-justwhite:  #FFFFFF;

  /* ── Escala primaria (verde petróleo) ───────────────────────────────── */
  --pp-primary-50:  #EAF6F4;
  --pp-primary-100: #CDEAE6;
  --pp-primary-200: #9FD5CE;
  --pp-primary-300: #67B9B0;
  --pp-primary-400: #37998F;
  --pp-primary-500: #0B6B63;
  --pp-primary-600: #095C55;
  --pp-primary-700: #084D47;
  --pp-primary-800: #073F3A;
  --pp-primary-900: #06322E;
  --pp-primary-950: #031E1B;

  /* ── Escala secundaria (tinta) ───────────────────────── */
  --pp-secondary-50:  #F3F5F4;
  --pp-secondary-100: #E7ECEA;
  --pp-secondary-200: #DDE4E1;
  --pp-secondary-300: #B9C6C1;
  --pp-secondary-400: #758780;
  --pp-secondary-500: #5E706A;
  --pp-secondary-600: #4A5C56;
  --pp-secondary-700: #33463F;
  --pp-secondary-800: #0B1F1C;
  --pp-secondary-900: #081815;
  --pp-secondary-950: #050F0D;

  /* ── Escala default — LEGACY (v8 solo define default #DDE4E1) ─ */
  --pp-default-50:  #F3F8F8;
  --pp-default-100: #DDE4E1;
  --pp-default-200: #C5D9DC;
  --pp-default-300: #9DBFC3;
  --pp-default-400: #6E9CA2;
  --pp-default-500: #538187;
  --pp-default-600: #476B73;
  --pp-default-700: #3E5960;
  --pp-default-800: #394B51;
  --pp-default-900: #334146;
  --pp-default-950: #1E292E;

  /* ── Escalas success / warning / danger ────────────────────── */
  --pp-success-50:  #EEFFF6;
  --pp-success-100: #D8FFEC;
  --pp-success-200: #B3FFDA;
  --pp-success-300: #79FCBD;
  --pp-success-400: #37F199;
  --pp-success-500: #0DDA79;
  --pp-success-600: #04B763;
  --pp-success-700: #078E50;
  --pp-success-800: #0C6F42;
  --pp-success-900: #0C5B38;
  --pp-success-950: #00331D;

  --pp-warning-50:  #FEFEE8;
  --pp-warning-100: #FEFFC2;
  --pp-warning-200: #FFFE88;
  --pp-warning-300: #FFF743;
  --pp-warning-400: #FFE810;
  --pp-warning-500: #EFCE03;
  --pp-warning-600: #C99D00;
  --pp-warning-700: #A47404;
  --pp-warning-800: #875A0C;
  --pp-warning-900: #734910;
  --pp-warning-950: #432605;

  --pp-danger-50:  #FFF0F0;
  --pp-danger-100: #FFDDDD;
  --pp-danger-200: #FFC1C1;
  --pp-danger-300: #FF9595;
  --pp-danger-400: #FF5959;
  --pp-danger-500: #FF2626;
  --pp-danger-600: #FC0606;
  --pp-danger-700: #CC0000;
  --pp-danger-800: #AF0505;
  --pp-danger-900: #900C0C;
  --pp-danger-950: #500000;

  /* ── Fondos ──────────────────────────────────────────── */
  --pp-bg-26: #F3F5F4; /* Fondo de página POR DEFECTO para toda app nueva desde 2026 (superficies blancas encima) */
  /* bg1–bg8: plataforma Padia Pro actual (en migración a BG-26). Nunca mezclar con BG-26 en una misma pantalla. */
  --pp-bg-1: #F6F8F7;  /* plataforma actual — superficies elevadas sobre bg3 */
  --pp-bg-2: #F3F6F5;
  --pp-bg-3: #F0F4F2;  /* plataforma actual — fondo de página */
  --pp-bg-4: #EDF2F0;
  --pp-bg-5: #EAF0EE;
  --pp-bg-6: #E7EEEB;
  --pp-bg-7: #E4ECE9;
  --pp-bg-8: #E1EAE6;  /* nunca como fondo de página completa */

  /* ── Escala cebra de tablas ────────────────────────────────────── */
  --pp-table-1: #FFFFFF;
  --pp-table-2: #FAFBFB;
  --pp-table-3: #F6F8F7;
  --pp-table-4: #F1F4F3;
  --pp-table-5: #ECF0EE;
  --pp-table-6: #E7ECEA;
  --pp-table-7: #E2E8E5;
  --pp-table-8: #DDE4E1;

  /* ── Paleta de gráficos / visualización ────────────────────────── */
  /* Tier 1 (saturado, por defecto) — usar en un solo dataset.      */
  --pp-chart-green-1:     #2EB78D;
  --pp-chart-blue-1:      #2E9ABF;
  --pp-chart-lightblue-1: #0B6B63;
  --pp-chart-purple-1:    #AE52D8;
  --pp-chart-pink-1:      #E061C8;
  --pp-chart-red-1:       #E0657F;
  --pp-chart-orange-1:    #E8836B;
  --pp-chart-yellow-1:    #E2B95D;
  /* Tier 2 (profundo) — dataset aparte; NO mezclar con tier 1     */
  --pp-chart-green-2:     #189E71;
  --pp-chart-blue-2:      #077AAD;
  --pp-chart-lightblue-2: #0091E2;
  --pp-chart-purple-2:    #8B40B2;
  --pp-chart-pink-2:      #C63CAC;
  --pp-chart-red-2:       #C43B58;
  --pp-chart-orange-2:    #CC5F3E;
  --pp-chart-yellow-2:    #CCA440;

  /* ── Paleta de dashboards (v8) — complementa tier 1/2 */
  --pp-dash-purple:          #8244AC; /* totales, alto potencial */
  --pp-dash-purple-light:    #B28ECD; /* degradado morado de ranking */
  --pp-dash-lilac:           #A357D1; /* indicadores de cierre, destello IA */
  --pp-dash-magenta:         #B747A8; /* tasas */
  --pp-dash-magenta-series:  #C3408D; /* serie "Realizado" */
  --pp-dash-magenta-light:   #D169C3; /* KPI de compromisos abiertos */
  --pp-dash-red:             #B5465A; /* KPI crítico */
  --pp-dash-rose:            #D16C80; /* crítico, vencido, no cumple */
  --pp-dash-yellow:          #D9A839; /* en riesgo, abierto */
  --pp-dash-orange:          #DA8871; /* bajo el umbral, atrasado */
  --pp-dash-green:           #5CB590; /* cumple, cerrado */
  --pp-dash-blue:            #408FDC; /* serie azul principal */
  --pp-dash-blue-light:      #75B2E3; /* degradado azul, abierto y vigente */
  --pp-dash-blue-lighter:    #7CBBEA; /* degradado azul */
  --pp-dash-steel:           #5098BB; /* verificación, cerrado vencido */
  --pp-dash-cyan:            #55B9E0; /* cerca de la meta */
  --pp-dash-gray:            #B3BEC4; /* planificado, serie de referencia */
  --pp-dash-nodata:          #C9D9DC; /* sin datos */
  /* Escala secuencial de heatmap 0% → 50% → 100% */
  --pp-heat-0:   #C2F3FD;
  --pp-heat-50:  #57BDE3;
  --pp-heat-100: #357697;

  /* ── Escala de cumplimiento (%) — cortes relativos a la meta del indicador (por defecto 95) */
  /* solid = barras/medidores (texto Bold blanco) · tint = celdas/pills · on-tint = texto Bold sobre tint */
  --pp-compliance-goal-default: 95; /* @kind other */
  --pp-comp-ok:            #5CB590; /* Cumple · ≥ meta */
  --pp-comp-ok-tint:       #E0F4EA;
  --pp-comp-ok-text:       #1F6B4B;
  --pp-comp-near:          #55B9E0; /* Cerca de la meta · meta−5 a meta */
  --pp-comp-near-tint:     #DDF2FA;
  --pp-comp-near-text:     #145E7A;
  --pp-comp-risk:          #D9A839; /* En riesgo · meta−20 a meta−5 */
  --pp-comp-risk-tint:     #FBF0D6;
  --pp-comp-risk-text:     #7A5A12;
  --pp-comp-critical:      #D16C80; /* Crítico · < meta−20 */
  --pp-comp-critical-tint: #F8E1E6;
  --pp-comp-critical-text: #8A2E40;
  --pp-comp-nodata:        #C9D9DC; /* Sin datos — el gris NUNCA es un nivel de cumplimiento */
  --pp-comp-nodata-tint:   #EEF3F4;
  --pp-comp-nodata-text:   #4A5A5E;

  /* ── Semáforo de matriz de riesgo (solo dentro del módulo de matriz) */
  --pp-risk-low:          #0DDA79;
  --pp-risk-medium:       #FFE810;
  --pp-risk-considerable: #F18F45;
  --pp-risk-high:         #DC3232;

  /* ── Roles semánticos (usar estos en componentes) ───────────── */
  --pp-brand:          var(--pp-color-primary);   /* verde — color de marca */
  --pp-active:         var(--pp-color-primary);   /* ítem de nav activo, tab, stepper, foco */
  --pp-active-tint:    var(--pp-primary-50);      /* fondo del ítem de nav activo */
  --pp-action:         var(--pp-secondary-800);   /* #0B1F1C — botón primario, segmentado activo */
  --pp-action-hover:   var(--pp-secondary-950);   /* propuesta — v8 no define hover/activo */

  --pp-text:           var(--pp-secondary-800);   /* #0B1F1C — TODO el texto */
  --pp-text-muted:     #5A6B66;                  /* texto secundario (v8) */
  --pp-text-subtle:    var(--pp-secondary-400);   /* LEGACY — no está en v8 */
  --pp-text-on-dark:   var(--pp-color-justwhite);
  --pp-link:           var(--pp-color-primary);

  --pp-surface-page:    var(--pp-bg-26);          /* fondo de página — BG-26 (apps nuevas) */
  --pp-surface-raised:  #FFFFFF;                 /* tarjetas / paneles sobre BG-26 */
  --pp-surface-white:   #FFFFFF;

  --pp-border-default:  var(--pp-secondary-300);  /* #B9C6C1 */
  --pp-border-subtle:   var(--pp-secondary-200);  /* #DDE4E1 */
  --pp-border-strong:   var(--pp-secondary-400);

  --pp-focus-ring:      var(--pp-color-primary);

  /* ── Layout / radios / bordes / espaciado ──────────────────── */
  --pp-radius-0:       0px;     /* tablas, chips técnicos */
  --pp-radius-sm:      3px;     /* inputs, badges pequeños */
  --pp-radius-md:      6px;     /* POR DEFECTO — tarjetas, dropdowns */
  --pp-radius-lg:      9px;     /* modales, paneles — máximo para UI no pill */
  --pp-radius-xl:     25px;     /* rounded-extralarge — tags de estado */
  --pp-radius-full:  999px;     /* botones primario/secundario, pills, controles segmentados, stepper */

  --pp-border-sm: 1px;          /* borde por defecto */
  --pp-border-md: 2px;          /* foco / activo */
  --pp-border-lg: 3px;          /* énfasis fuerte / seleccionado */

  --pp-leading-tiny:   16px;
  --pp-leading-small:  20px;
  --pp-leading-large:  24px;
  --pp-leading-medium: 28px;

  /* espaciado base 8px — siempre múltiplos de 8 */
  --pp-space-1:  4px;
  --pp-space-2:  8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-5: 24px;
  --pp-space-6: 32px;
  --pp-space-7: 48px;
  --pp-space-8: 64px;

  /* ── Tipografía — base ──────────────────────────────────────────── */
  --pp-font:        "Source Sans 3", system-ui, sans-serif;
  /* Office editable (.pptx / .docx) usa Calibri — se define en el archivo Office, nunca en CSS web. */
  --pp-letter:      0;
  --pp-line-web:    120%;

  /* Escala web / escritorio */
  --pp-fs-xsmall:    11px;   /* metadatos, tooltips */
  --pp-fs-small:     12px;   /* leyendas */
  --pp-fs-base:      14px;   /* cuerpo */
  --pp-fs-large:     16px;   /* cuerpo destacado */
  --pp-fs-h6:        18px;
  --pp-fs-h5:        20px;
  --pp-fs-h4:        22px;
  --pp-fs-h3:        25px;
  --pp-fs-h2:        28px;
  --pp-fs-h1:        32px;   /* título de página — peso Black permitido solo aquí */
  --pp-fs-mega-h2:   60px;   /* dashboards */
  --pp-fs-mega-h1:   80px;   /* pantallas de impacto / KPI */

  /* Escala móvil — LEGACY (no está en v8) */
  --pp-fs-mobile-xxsmall: 14px;
  --pp-fs-mobile-xsmall:  16px;
  --pp-fs-mobile-small:   20px;
  --pp-fs-mobile-base:    22px;
  --pp-fs-mobile-large:   24px;

  /* Escala de PDF exportables — NO usar en app/web */
  --pp-fs-pdf-xsmall:  6px;   /* v8: mínimo PDF */
  --pp-fs-pdf-xxsmall: 6px;   /* alias LEGACY — usar pdf-xsmall */
  --pp-fs-pdf-small:   8px;
  --pp-fs-pdf-base:    10px;
  --pp-fs-pdf-titulos: 12px;
  --pp-fs-pdf-h1:      14px;
  --pp-fs-pdf-numeros: 16px;

  /* Escala de slides / presentaciones — NO usar en app/web */
  --pp-fs-slides-text:   28px;
  --pp-fs-slides-tittle: 35px;
  --pp-fs-slides-h4:     40px;
  --pp-fs-slides-h3:     60px;
  --pp-fs-slides-h2:     80px;
  --pp-fs-slides-h1:    100px;

  --pp-fw-regular:  400; /* @kind font */
  --pp-fw-medium:   500; /* @kind font */ /* LEGACY — no está en v8 */
  --pp-fw-semibold: 600; /* @kind font */
  --pp-fw-bold:     700; /* @kind font */
  --pp-fw-black:    900; /* @kind font */ /* solo H1, MEGA, cifras KPI, SLIDES */

  /* ── Sombras (solo funcionales — nunca decorativas) ───────── */
  /* Usar SOLO cuando el elemento flota sobre el contenido. */
  --pp-shadow-flo:           0 2px 8px rgba(11,31,28,0.08), 0 1px 2px rgba(11,31,28,0.06);
  --pp-shadow-desktop-menu:  0 8px 24px rgba(11,31,28,0.12), 0 2px 6px rgba(11,31,28,0.06);
  --pp-shadow-submenu:       0 4px 16px rgba(11,31,28,0.10);
  --pp-shadow-movil-header:  0 2px 4px rgba(11,31,28,0.08);
  --pp-shadow-movil-footer:  0 -2px 4px rgba(11,31,28,0.08);
  --pp-shadow-movil-menu:    0 -8px 32px rgba(11,31,28,0.18);
}

/* ── Resets que aplican los valores por defecto de Padia Pro ─────────────────────────── */
html, body {
  font-family: var(--pp-font);
  font-size: var(--pp-fs-base);
  line-height: var(--pp-line-web);
  letter-spacing: var(--pp-letter);
  color: var(--pp-text);
  background: var(--pp-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Plataforma Padia Pro actual (en migración a BG-26): página bg3 + superficies elevadas bg1 */
[data-pp-surface="platform"] {
  --pp-surface-page:   var(--pp-bg-3);
  --pp-surface-raised: var(--pp-bg-1);
}

/* ── Roles tipográficos semánticos (Source Sans 3, interlineado 120%) ────── */
.pp-h1   { font: var(--pp-fw-bold)     var(--pp-fs-h1)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-h1-black { font: var(--pp-fw-black) var(--pp-fs-h1)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-h2   { font: var(--pp-fw-bold)     var(--pp-fs-h2)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-h3   { font: var(--pp-fw-bold)     var(--pp-fs-h3)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-h4   { font: var(--pp-fw-semibold) var(--pp-fs-h4)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-h5   { font: var(--pp-fw-semibold) var(--pp-fs-h5)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-h6   { font: var(--pp-fw-semibold) var(--pp-fs-h6)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-large{ font: var(--pp-fw-regular)  var(--pp-fs-large)/var(--pp-line-web) var(--pp-font); color: var(--pp-text); }
.pp-body { font: var(--pp-fw-regular)  var(--pp-fs-base)/var(--pp-line-web)  var(--pp-font); color: var(--pp-text); }
.pp-strong { font-weight: var(--pp-fw-semibold); }
.pp-small{ font: var(--pp-fw-regular)  var(--pp-fs-small)/var(--pp-line-web) var(--pp-font); color: var(--pp-text-muted); }
.pp-xsmall { font: var(--pp-fw-regular) var(--pp-fs-xsmall)/var(--pp-line-web) var(--pp-font); color: var(--pp-text-muted); }
.pp-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }

.pp-link { color: var(--pp-link); text-decoration: none; }
.pp-link:hover { text-decoration: underline; }

/* Tipografía Mega — solo en dashboards/superficies KPI (Black según v8) */
.pp-mega-h1 { font: var(--pp-fw-black) var(--pp-fs-mega-h1)/100% var(--pp-font); letter-spacing: 0; }
.pp-mega-h2 { font: var(--pp-fw-black) var(--pp-fs-mega-h2)/100% var(--pp-font); letter-spacing: 0; }