/* ==========================================================================
   TEMA DE MARCA — Portal Agroclimático FENALCE
   FUENTE ÚNICA DE VERDAD para los colores institucionales.

   Valores extraídos de los archivos oficiales en:
   "Productos - Branding Fenalce" (logo oficial PNG + tema del .pptx corporativo).
   No modificar a mano sin volver a validar contra esos archivos.

   ── CÓMO USARLO ──────────────────────────────────────────────────────────
   Cada dashboard enlaza este archivo ANTES de su propio <style> y mapea sus
   variables internas a las --fnc-* de aquí. Ejemplo:
       :root { --text-main: var(--fnc-navy); --accent-green: var(--fnc-verde); }

   ── POR QUÉ SOLO HAY VARIABLES ───────────────────────────────────────────
   Este archivo define UNICAMENTE custom properties. A proposito no incluye
   reglas de elemento (body, h1...) ni @media (prefers-color-scheme), porque:
     - Los 4 dashboards ya traen su propio tema claro/oscuro con [data-theme].
       Un @media del sistema operativo competiria con ese toggle y produciria
       estados mixtos (fondo oscuro con texto oscuro, por ejemplo).
     - Reglas de elemento aqui pisarian el CSS embebido de cada dashboard.
   Asi, enlazar este archivo es siempre seguro y nunca cambia el layout.
   ========================================================================== */

:root{
  /* ---- Paleta institucional (valores oficiales, no derivados) ---- */
  --fnc-navy:        #133353; /* azul institucional principal (tema oficial .pptx) */
  --fnc-gold:        #F3C26B; /* dorado institucional (tema oficial .pptx, exacto en logo) */
  --fnc-terracota:   #BE7275; /* rojo terracota del logo */
  --fnc-naranja:     #F8A46E; /* naranja / durazno del logo */
  --fnc-azul-pizarra:#6E8B9F; /* azul grisaceo del logo */
  --fnc-verde:       #6AA183; /* verde del logo */
  --fnc-salvia:      #AEC68E; /* verde salvia (hojas del logo) */
  --fnc-crema:       #EAE2CC; /* crema del logo (fondo calido neutro) */

  /* ---- Variantes derivadas ----
     No son colores nuevos de marca: son la misma tinta aclarada u oscurecida,
     necesarias para contraste de texto legible y para el modo oscuro. */
  --fnc-navy-2:      #0D2A44; /* navy oscurecido: gradientes y hover */
  --fnc-navy-soft:   #1F3A56; /* navy suavizado: texto de cuerpo */
  --fnc-gold-ink:    #B8823A; /* dorado oscurecido: legible sobre blanco */
  --fnc-verde-ink:   #446F57; /* verde oscurecido: 5.2:1 sobre fondo claro (AA) */
  --fnc-pizarra-ink: #546D80; /* pizarra oscurecido: 4.9:1 sobre fondo claro (AA) */
  --fnc-verde-claro:   #8FC0A4; /* verde aclarado: acentos en modo oscuro */
  --fnc-gold-claro:    #F7D49A; /* dorado aclarado: acentos en modo oscuro */
  --fnc-pizarra-claro: #A8BFCD; /* pizarra aclarado: acentos en modo oscuro */
  --fnc-crema-panel:   #F7F5EE; /* crema muy claro: fondo de pagina en modo claro */
  --fnc-crema-borde:   #E6DECA; /* crema apenas oscurecido: bordes sobre fondo claro */

  /* ---- Tipografia institucional ----
     Montserrat es la fuente corporativa oficial de FENALCE (Manual de
     Identidad Visual). Se usa tanto en titulos como en cuerpo de texto:
     antes cada tablero traia una distinta (Inter, Outfit, Manrope, system-ui). */
  --fnc-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ---- Escala tipografica compartida ----
     Un solo set de tamanos para que los encabezados no cambien de tablero
     a tablero. Los h1 usan clamp() para adaptarse a pantallas angostas. */
  --fnc-h1:      clamp(28px, 3.4vw, 40px);
  --fnc-h2:      20px;
  --fnc-h3:      16px;
  --fnc-eyebrow: 12px;   /* etiqueta superior en mayusculas */
  --fnc-sub:     14px;   /* bajada / descripcion del encabezado */
  --fnc-body:    14px;
  --fnc-small:   12px;

  /* ---- Superficies de los controles del encabezado ---- */
  --fnc-ctrl-bg:     #FFFFFF;
  --fnc-ctrl-border: var(--fnc-crema-borde);
  --fnc-ctrl-text:   var(--fnc-navy);
}

:root[data-theme="dark"]{
  --fnc-ctrl-bg:     rgba(255,255,255,.10);
  --fnc-ctrl-border: rgba(255,255,255,.22);
  --fnc-ctrl-text:   #F5F3EC;
}

/* ==========================================================================
   CONTROLES DEL ENCABEZADO — compartidos por los cuatro tableros
   Antes cada tablero colocaba el boton de portal y el de modo oscuro en un
   sitio distinto y con estilo propio. Estas clases los fijan en la misma
   posicion (extremo derecho del encabezado) y con el mismo aspecto.
   Se aplican sobre fondo claro; los tableros con encabezado oscuro usan
   ademas .fnc-header-actions--sobre-oscuro.
   ========================================================================== */
.fnc-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  margin-left:auto;   /* siempre pegado al extremo derecho */
}
.fnc-btn-portal,
.fnc-btn-theme{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  box-sizing:border-box;
  background:var(--fnc-ctrl-bg);
  border:1px solid var(--fnc-ctrl-border);
  color:var(--fnc-ctrl-text);
  font-family:var(--fnc-font);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.fnc-btn-portal{ gap:8px; padding:0 16px; border-radius:20px; }
.fnc-btn-theme { width:40px; padding:0; border-radius:20px; font-size:16px; }
.fnc-btn-portal:hover,
.fnc-btn-theme:hover{
  border-color:var(--fnc-verde);
  transform:translateY(-1px);
}
/* Encabezados con fondo oscuro (estaciones, nexo en modo noche) */
.fnc-header-actions--sobre-oscuro .fnc-btn-portal,
.fnc-header-actions--sobre-oscuro .fnc-btn-theme{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
  color:#FFFFFF;
}
/* El icono de sol solo aparece en modo noche y la luna en modo dia */
.fnc-btn-theme .icon-sun{ display:none; }
.fnc-btn-theme .icon-moon{ display:inline; }
:root[data-theme="dark"] .fnc-btn-theme .icon-sun{ display:inline; }
:root[data-theme="dark"] .fnc-btn-theme .icon-moon{ display:none; }

@media (max-width:640px){
  .fnc-btn-portal .label{ display:none; }
  .fnc-btn-portal{ padding:0 12px; }
}

/* ==========================================================================
   ENCABEZADO CENTRADO — compartido por los cuatro tableros
   Los controles quedan arriba a la derecha y el bloque de marca
   (logo + etiqueta + titulo + bajada) se centra debajo.
   ========================================================================== */
.fnc-encabezado{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.fnc-encabezado .fnc-header-actions{
  align-self:flex-end;   /* controles arriba a la derecha */
  margin-left:0;
}
.fnc-encabezado .fnc-marca{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:900px;
}
/* Al centrar, la barra vertical que separaba logo y texto deja de tener
   sentido: se sustituye por un filete horizontal bajo el titulo. */
.fnc-encabezado .fnc-marca .title-block,
.fnc-encabezado .fnc-marca .hero-titleblock{
  padding-left:0;
  text-align:center;
}
.fnc-encabezado .fnc-marca .title-block::before{
  left:50%;
  top:auto;
  bottom:-12px;
  transform:translateX(-50%);
  width:72px;
  height:4px;
  border-radius:4px;
}

/* ==========================================================================
   FONDOS PARAFISCALES — franja de pie compartida
   FENALCE administra los Fondos Nacionales de Fomento de Cereales (FNC),
   Leguminosas (FNL) y Soya (FNS). El manual de marca los define como
   identidades propias e independientes que pueden coexistir con el logotipo
   de FENALCE "conservando la jerarquia visual": por eso van al pie, a menor
   tamano que la marca principal, y nunca en el encabezado.
   Se usa el archivo oficial con los tres juntos, que ya trae el espaciado
   y las proporciones correctas entre ellos.
   ========================================================================== */
.fnc-fondos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:22px 16px 4px;
  text-align:center;
}
.fnc-fondos__rotulo{
  font-family:var(--fnc-font);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fnc-pizarra-ink);
  margin:0;
}
.fnc-fondos__logos{
  width:100%;
  max-width:560px;   /* la tira es muy apaisada (9:1): se limita el ancho */
  height:auto;
  display:block;
}
/* La version de letra blanca solo aparece en modo noche */
.fnc-fondos__logos--claro{ display:block; }
.fnc-fondos__logos--oscuro{ display:none; }
:root[data-theme="dark"] .fnc-fondos__rotulo{ color:var(--fnc-pizarra-claro); }
:root[data-theme="dark"] .fnc-fondos__logos--claro{ display:none; }
:root[data-theme="dark"] .fnc-fondos__logos--oscuro{ display:block; }

@media (max-width:600px){
  .fnc-fondos__logos{ max-width:100%; }
  .fnc-fondos__rotulo{ font-size:11px; letter-spacing:.1em; }
}