/* =================================================================== */
/* 1. FOUNDATIONS: Colores y Tipografía (Variables CSS)                */
/* =================================================================== */
/*
*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Verdana&display=swap');
@font-face {
  font-family: 'Material Symbols Local';
  font-style: normal;
  font-weight: 400; 
  font-display: block;  
  src: url('../Fonts/material-symbols.woff2') format('woff2');
}
.material-symbols-outlined {
   font-family: 'Material Symbols Local' !important;
   opacity: 0;
   transition: opacity 0.3s ease-out;
}
body.fonts-loaded .material-symbols-outlined {
  opacity: 1;
}

:root {
   --Header-Gov: #0943B5;
   /* Neutros */
   --Neutral-0: #000000;
   --Neutral-10: #141414;
   --Neutral-20: #222222;
   --Neutral-30: #383838;
   --Neutral-40: #555555;
   --Neutral-50: #6C6C6C;
   --Neutral-60: #838383;
   --Neutral-70: #A4A4A4;
   --Neutral-80: #C4C4C4;
   --Neutral-90: #E1E1E1;
   --Neutral-95: #F0F0F0;
   --Neutral-98: #F8F8F8;
   --Neutral-100: #FFFFFF;
   /* Primarios LEGACY (apagados) */
   /* 
   --Primario-10: #071329;
   --Primario-20: #0F2140;
   --Primario-30: #1B3460;
   --Primario-40: #2C518F;
   --Primario-50: #3A67B4;
   --Primario-60: #5682CF;
   --Primario-70: #85A5DC;
   --Primario-80: #B0C5E8;  
   --Primario-90: #D3DFF2;
   --Primario-98: #F6F9FC; 
   */
   /* Secundarios LEGACY (vivos) */
   /* 
   --Secundario-10: #000B31;
   --Secundario-20: #00164D;
   --Secundario-30: #042871;
   --Secundario-40: #0A3FA7;
   --Secundario-50: #1055D9;
   --Secundario-60: #3D7BF5;
   --Secundario-70: #71A0F8;
   --Secundario-80: #A7C5FA;
   --Secundario-90: #D3E2FD;
   --Secundario-98: #F5F9FE; 
   */
   /* Paleta primaria */
   --Primario-10: #071329;
   --Primario-20: #0F2140;
   --Primario-30: #042871;
   --Primario-40: #0A3FA7;
   --Primario-50: #1053D4;
   --Primario-60: #3D7BF5;
   --Primario-70: #71A0F8;
   --Primario-80: #B0C5E8;
   --Primario-90: #D3E2FD;
   --Primario-98: #F0F5FE;
   /* Paleta secundaria */
   --Secundario-10: #0F2140;
   --Secundario-20: #00164D;
   --Secundario-30: #1B3460;
   --Secundario-40: #2B4E8B;
   --Secundario-50: #3C69B8;
   --Secundario-60: #3D7BF5;
   --Secundario-70: #7D9FD9;
   --Secundario-80: #A7C5FA;
   --Secundario-90: #D8E4F3;
   --Secundario-98: #F2F5FB;
   /* Complementarios */
   --Complementario-10: #300900;
   --Complementario-20: #471200;
   --Complementario-30: #702100;
   --Complementario-40: #983000;
   --Complementario-50: #D04400;
   --Complementario-60: #EF5411;
   --Complementario-70: #F97B50;
   --Complementario-80: #FBAF96;
   --Complementario-90: #FDD8CC;
   --Complementario-98: #FEF2EE;
   /* Alertas */
   --Alerta-10: #1F1402;
   --Alerta-20: #332304;
   --Alerta-30: #583D00;
   --Alerta-40: #735100;
   --Alerta-50: #A27400;
   --Alerta-60: #D49800;
   --Alerta-70: #F8B300;
   --Alerta-80: #FACD7D;
   --Alerta-90: #FFE8C2;
   --Alerta-98: #FFF7EB;

   /* Chips OM3 - Colores de filtro por template */
   --om3-chip-pub-selected: #DEA0C5;
   --om3-chip-pub-unselected: #F9D2E9;
   --om3-chip-informes-selected: #A6A0DE;
   --om3-chip-informes-unselected: #D3D2F9;
   --om3-chip-data-selected: #A4F985;
   --om3-chip-data-unselected: #DBFCCF;
   /* Additional project specific colours */
   --nav-hover-blue: #000B31;
   --Observatorio-Background: #86005C;
   /* Variable para tipografía dividida - Color rosa/magenta OM3 */
   --Pink-accent: #F40090;

   /* OM3 Menu Card Variant - Tarjetas de submenú con enlace completo */
   --om3-menucard-text: #312D83;
   --om3-menucard-bg: var(--Neutral-100);
   --om3-menucard-border: #312D83;
   --om3-menucard-hover-bg: #DAD9F2;
   --om3-menucard-hover-text: var(--Neutral-30);
   --om3-menucard-focus-bg: #F3F3FB;
   --om3-menucard-focus-text: var(--Neutral-30);
   --om3-menucard-focus-border: var(--Complementario-60);

   /* OM3 Menu Card Icon Variant - Tarjetas con icono centrado */
   --om3-menucard-icon-border: #615CC7;
   --om3-menucard-icon-hover-border: #7873CF;
   --om3-menucard-icon-size: 80px;
   /* RGB components for colours used in rgba() contexts */
   --Neutral-0-rgb: 0, 0, 0;
   --Neutral-10-rgb: 20, 20, 20;
   --Neutral-98-rgb: 245, 245, 245;
   --Neutral-100-rgb: 255, 255, 255;
   --Primario-40-rgb: 10, 63, 167;
   --Primario-70-rgb: 113, 160, 248;
   /* RGB values for intermediate primary hues */
   --Primario-30-rgb: 4, 40, 113;
   --Primario-50-rgb: 16, 83, 212;
   --Secundario-20-rgb: 0, 22, 77;
  --Secundario-30-rgb: 27, 52, 96;
   --Alerta-70-rgb: 248, 179, 0;
   --nav-hover-blue-rgb: 0, 11, 49;

   /* =================================================================== */
   /* ALIASES SEMÁNTICOS DE DISEÑO                                        */
   /* =================================================================== */

   /* Aliases de colores semánticos */
   --color-primary: var(--Primario-50);
   --color-primary-dark: var(--Primario-30);
   --color-primary-light: var(--Primario-70);
   --color-text-light: var(--Neutral-100);
   --color-text-dark: var(--Neutral-10);
   --color-bg-primary: var(--Neutral-100);
   --color-bg-secondary: var(--Neutral-98);

   /* Paleta OM3 Purple (usada en news.css para publicaciones) */
   --om3-purple: #443CE7;
   --om3-purple-dark: #3730a3;
   --om3-purple-darker: #3f3a9a;
   --om3-purple-rgb: 68, 60, 231;

   /* Colores de paginación OM3 */
   --om3-publication-pagination: #D90B87;
   --om3-reports-pagination: #403AAA;

   /* Gobierno adicional */
   --government-blue: #005A8F;

   /* Sombras estandarizadas */
   --shadow-sm: 0 2px 8px rgba(var(--Neutral-0-rgb), 0.1);
   --shadow-md: 0 4px 12px rgba(var(--Neutral-0-rgb), 0.1);
   --shadow-lg: 0 8px 24px rgba(var(--Neutral-0-rgb), 0.15);
   --shadow-hover: 0 4px 12px rgba(var(--Neutral-0-rgb), 0.15);
   --shadow-card: 0 2px 4px rgba(var(--Neutral-0-rgb), 0.05);

   /* Border radius estandarizados */
   --border-radius-sm: 6px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
   --border-radius-xl: 16px;
   --border-radius-full: 9999px;

   /* Transiciones estandarizadas */
   --transition-fast: all 0.2s ease;
   --transition-default: all 0.3s ease;
   --transition-slow: all 0.4s ease;
   --transition-color: color 0.2s ease;
   --transition-transform: transform 0.2s ease;
   --transition-opacity: opacity 0.3s ease;

   /* Transformaciones para hover */
   --transform-hover-lift: translateY(-4px);
   --transform-hover-scale: scale(1.02);
   --transform-hover-scale-sm: scale(1.01);

   /* Familia de fuente base */
   --nunito-font: "Nunito Sans", sans-serif;

   /* Variables de tipografía H1 */
   --h1-font-family: "Nunito Sans", Helvetica;
   --h1-font-size-large: 42px;
   --h1-font-size-medium: 34px;
   --h1-line-height: 1.2;
   --h1-letter-spacing: 0px;
   --h1-font-style: normal;
   --h1-font-weight: 400;
   --h1-font-weight-semibold: 600;
   --h1-font-weight-bold: 700;
   --h1-font-weight-black: 900;

   /* Variables de tipografía H2 */
   --h2-font-family: "Nunito Sans", Helvetica;
   --h2-font-size-large: 32px;
   --h2-font-size-medium: 28px;
   --h2-line-height: 1.3;
   --h2-letter-spacing: 0px;
   --h2-font-style: normal;
   --h2-font-weight: 400;
   --h2-font-weight-semibold: 600;
   --h2-font-weight-bold: 700;
   --h2-font-weight-black: 900;

   /* Variables de tipografía H3 */
   --h3-font-family: "Nunito Sans", Helvetica;
   --h3-font-size-large: 28px;
   --h3-font-size-medium: 24px;
   --h3-line-height: 1.3;
   --h3-letter-spacing: 0px;
   --h3-font-style: normal;
   --h3-font-weight: 400;
   --h3-font-weight-semibold: 600;
   --h3-font-weight-bold: 700;
   --h3-font-weight-black: 900;

   /* Variables de tipografía H4 */
   --h4-font-family: "Nunito Sans", Helvetica;
   --h4-font-size-large: 24px;
   --h4-font-size-medium: 22px;
   --h4-line-height: 1.4;
   --h4-letter-spacing: 0px;
   --h4-font-style: normal;
   --h4-font-weight: 400;
   --h4-font-weight-bold: 700;
   --h4-font-weight-extrabold: 800;
   --h4-font-weight-black: 900;

   /* Variables de tipografía H5 */
   --h5-font-family: "Nunito Sans", Helvetica;
   --h5-font-size-large: 20px;
   --h5-font-size-medium: 18px;
   --h5-line-height: 1.4;
   --h5-letter-spacing: 0px;
   --h5-font-style: normal;
   --h5-font-weight: 400;
   --h5-font-weight-bold: 700;
   --h5-font-weight-black: 900;

   /* Variables de tipografía H6 */
   --h6-font-family: "Nunito Sans", Helvetica;
   --h6-font-weight: 900; /* Black */
   --h6-font-size-large: 18px;
   --h6-font-size-medium: 16px;
   --h6-line-height: 1.4;
   --h6-letter-spacing: 0px;
   --h6-font-style: normal;

   /* Variables para descripción */
   --description-font-family: "Nunito Sans";
   --description-font-size: 18px;
   --description-font-weight: 500; /* Medium - corregido desde 400 */

   /* Variables de párrafos y texto descriptivo */
   --paragraph-font-family: "Verdana";
   --paragraph-font-size: 13px;
   --paragraph-font-weight: 400;
   --paragraph-font-size-large: 15px;
   --paragraph-font-size-medium: 14px;
   --paragraph-font-size-small: 13px;
   --paragraph-line-height: 1.6;
   --paragraph-letter-spacing: 0px;
   --paragraph-font-style: normal;

   /* Variables de captions */
   --caption-font-family: "Verdana"; /* Corregido desde "Nunito Sans" */
   --caption-font-weight: 400; /* Regular */
   --caption-font-size: 11px;
   --caption-line-height: 1.4;
   --caption-letter-spacing: 0px;
   --caption-font-style: normal;

   /* Variables de captions featured (fechas destacadas en noticias) */
   --caption-featured-font-size: 12px;
   --caption-featured-line-height: 16px;

   /* Variables de enlaces interactivos */
   --link-font-family: "Nunito Sans";
   --link-font-weight: 600;
   --link-font-size: 15px;
   --link-line-height: 1.2;
   --link-letter-spacing: 0px;
   --link-font-style: normal;
   --link-color-primary: #0000FF;

   /* Variables para menú */
   --menu-font-family: "Nunito Sans";
   --menu-font-size: 14px;
   --menu-font-weight: 500; /* Medium - corregido desde 400 (large screens) */

   /* Variables para búsqueda */
   --searchbar-font-family: "Nunito Sans";
   --searchbar-font-size: 14px;

   /* Variables para etiquetas */
   --label-font-family: "Nunito Sans";
   --label-font-size: 13px;

   /* Variables para botones */
   --button1-font-size: 14px;
   --button1-font-weight: 700;
   --button2-font-size: 12px;
   --button2-font-weight: 900;

   /* Otras variables de diseño */
   --border-radius-footer: 10px;
   --footer-padding-y: 28px;
   --footer-padding-x: 48px;
   --transition-hover: 0.2s ease;

   /* Dimensiones y espaciados */
   --nav-bar-height: 4px;
   --nav-tab-padding-x: 32px;
   --nav-tab-height: 46px; /* Actualizado según Figma */
   --nav-dropdown-radius: 16px;
   --nav-tab-radius: 10px;
   --nav-left-panel-width: 250px;
   --nav-l2-padding-left: 64px;
   --nav-l2-item-height: 32px;
   --nav-column-width: 170px;
   --nav-column-gap: 28px;
   --nav-l1-gap: 24px;

   /* Sombra del dropdown */
   --nav-dropdown-shadow: 0 7px 14px rgba(var(--Neutral-0-rgb), 0.35);

   /* Heredamos las variables existentes y añadimos las específicas del carousel */
   --carousel-height: 600px;
   --carousel-height-mobile: 400px;
   /* Usamos la variante Secundario-30 para generar las superposiciones */
   --carousel-overlay-dark: rgba(var(--Secundario-30-rgb), 0.7);
   --carousel-overlay-gradient: linear-gradient(0deg, rgba(var(--Secundario-30-rgb), 0.85) 0%, rgba(var(--Secundario-30-rgb), 0.4) 50%, rgba(var(--Secundario-30-rgb), 0.1) 100%);
   --carousel-transition: 0.6s;
   --carousel-caption-max-width: 800px;
   --carousel-control-size: 60px;
   --carousel-control-size-mobile: 40px;

   /* =================================================================== */
   /* VARIABLES ADICIONALES: Cumplimiento de typography.md               */
   /* =================================================================== */

   /* Paragraph 2 (Light variant) */
   --paragraph2-font-size-small: 12px;
   --paragraph2-font-size-large: 13px;
   --paragraph2-font-weight: 300;

   /* Description - tamaños responsive */
   --description-font-size-small: 16px;
   --description-font-size-large: 18px;

   /* Links - pesos y tamaños responsive */
   --link-font-weight-small: 500;
   --link-font-weight-large: 900;
   --link-font-size-small: 14px;

   /* Lists (para documentación y herencia) */
   --list-font-family: var(--paragraph-font-family);
   --list-font-size-small: 14px;
   --list-font-size-large: 15px;
   --list-line-height: 1.6;

   /* Labels - completar especificación */
   --label-font-weight: 300;
   --label-font-size-small: 12px;
   --label-line-height: 1.4;

   /* Buttons - tamaños y pesos responsive */
   --button1-font-size-small: 12px;
   --button2-font-size-small: 11px;
   --button2-font-weight-small: 800;
   --button2-font-weight-large: 900;

   /* Menu - pesos y tamaños responsive */
   --menu-font-weight-small: 600;
   --menu-font-weight-large: 500;
   --menu-font-size-small: 16px;

   /* Searchbar - completar especificación */
   --searchbar-font-weight: 400;
   --searchbar-font-size-small: 13px;
   --searchbar-line-height: 1.4;

   /* =================================================================== */
   /* TRAMITE CARD MAX-WIDTHS - Calculados por breakpoint Bootstrap       */
   /* Fórmula: (container - 156px) / 4                                    */
   /* Deducción total: padding 24px + gaps 48px + wrapper margins 64px + buffer 20px */
   /* =================================================================== */
   --tramite-card-max-width-xxl: 260px;  /* (1320 - 156) / 4 ≈ 291 → 260 */
   --tramite-card-max-width-xl: 200px;   /* (1140 - 156) / 4 - para 1280x720 */
   --tramite-card-max-width-lg: 180px;   /* (960 - 156) / 4 ≈ 201 → 180 */
   --tramite-card-max-width-md: 130px;   /* (720 - 156) / 4 ≈ 141 → 130 */
   --tramite-card-max-width-sm: 90px;    /* (540 - 156) / 4 ≈ 96 → 90 */
}