/* ==========================================================================
   Estética "hero" — capa de identidad clara
   --------------------------------------------------------------------------
   Va de última, después de todas las hojas anteriores, y reescribe la
   identidad visual del portal con la paleta del hero de referencia:

     fondo de página   #f0f0ee
     píldoras/chips    #EDEDED
     texto             #111827 / #374151 / #9ca3af
     acento            azul  #3b82f6 (borde #60a5fa, activo #2563eb)
     tipografía        pila del sistema, tamaños 12 / 13 / 14 px
     forma             píldoras redondas y esquinas de 12–16 px, sombra casi nula

   Se apoya primero en los tokens: al cambiarlos aquí, todo lo que los usa
   (tarjetas, filtros, fichas, línea, mapa) se aclara solo. Después vienen los
   ajustes puntuales de los componentes que traían color literal.

   Nada de esto toca el HTML ni el JavaScript: quitar esta hoja del index
   devuelve el portal a como estaba.
   ========================================================================== */

:root{
  /* --- Superficie ------------------------------------------------------ */
  --fondo:#f0f0ee;
  --superficie:#ffffff;
  --borde:#e4e4e0;
  --borde-fuerte:#d2d2cd;

  /* --- Texto ----------------------------------------------------------- */
  --texto:#111827;
  --texto-medio:#374151;
  /* gray-500 y no gray-400: el gris claro del hero sirve para una línea
     suelta de adorno, pero aquí hay avisos y notas legales que deben leerse.
     #5f6773 sobre #f0f0ee da 5.0:1; #9ca3af se queda en 2.3:1. */
  --texto-suave:#5f6773;

  /* --- Acento ---------------------------------------------------------- */
  /* El hero usa blue-500 (#3b82f6). Aquí el azul también lleva texto encima
     —botones llenos, rótulos de 12 px— y blanco sobre #3b82f6 se queda en
     3.7:1. Se corre un paso a blue-600 para pasar AA sin cambiar de familia;
     el #60a5fa del hero se conserva para bordes, que no llevan texto. */
  --acento:#2563eb;
  --acento-oscuro:#1d4ed8;
  --acento-suave:#eff6ff;

  /* Neutros reencauzados: los tonos "madera" que quedaban en las hojas
     viejas se vuelven grises del hero, así ningún resto ocre se cuela. */
  --blanco:#ffffff;
  --gris-25:#fafaf9;
  --gris-50:#f0f0ee;
  --gris-100:#ededed;
  --gris-200:#e4e4e0;
  --gris-300:#d2d2cd;
  --gris-400:#9ca3af;
  --gris-500:#5f6773;
  --gris-700:#374151;
  --gris-900:#111827;

  --marca-amarillo:#3b82f6;
  --oro-300:#9ca3af;
  --oro-500:#6b7280;
  --azul-500:#3b82f6;
  --azul-600:#2563eb;
  --azul-100:#eff6ff;
  --azul-50:#f7f8fa;
  --pergamino:#ffffff;

  /* --- Tipografía: pila del sistema, sin descargas --------------------- */
  --fuente:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --fuente-lectura:var(--fuente);

  --t-micro:11.5px;
  --t-meta:12px;
  --t-small:13px;
  --t-body:14px;
  --t-lead:16px;
  --t-h3:18px;
  --t-h2:22px;
  --t-h1:clamp(24px,2.4vw,28px);

  /* --- Forma ----------------------------------------------------------- */
  --radio-sm:8px;
  --radio:12px;
  --radio-lg:16px;

  --sombra-sm:0 1px 2px rgba(17,24,39,.04);
  --sombra:0 1px 3px rgba(17,24,39,.05);
  --sombra-lg:0 4px 16px rgba(17,24,39,.07);
  --sombra-xl:0 10px 32px rgba(17,24,39,.09);

  --transicion:.2s ease;

  --alto-barra:132px;

  /* La capa anterior (apple-light) tiene su propia paleta y la usan muchas
     piezas. Se reapunta a la del hero para que no convivan dos azules ni dos
     grises distintos. */
  --apple-canvas:#f0f0ee;
  --apple-surface:#ffffff;
  --apple-solid:#ffffff;
  --apple-ink:#111827;
  --apple-secondary:#5f6773;
  --apple-line:#e4e4e0;
  --apple-blue:#2563eb;
  --apple-shadow:0 4px 16px rgba(17,24,39,.07);
  --apple-radius:16px;
}

body{
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--fuente);
  -webkit-font-smoothing:antialiased;
}

/* Títulos: sans del sistema, peso medio y kerning cerrado, como el h1 del hero. */
h1,h2,h3,h4,
.seccion-cab h2,.bibdash-panel-cab h3{
  font-family:var(--fuente);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--texto);
}

/* ===================== BARRA SUPERIOR =====================
   Dos píldoras grises sobre fondo liso, como la navegación del hero: el
   escudo en un círculo y el resto de la barra en un rectángulo redondeado.
   La barra en sí se vuelve transparente para que se vean flotando. */
.barra{
  background:var(--fondo);
  border-bottom:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.barra::before{display:none}

.barra-superior{
  gap:12px;
  min-height:0;
  padding-top:16px;
  padding-bottom:8px;
}

.barra-marca{gap:10px;color:var(--texto)}
.barra-marca .escudo{
  width:40px;height:40px;padding:6px;
  border:0;border-radius:999px;
  background:#EDEDED;
  box-shadow:none;
}
.barra-marca strong{
  font:500 15px/1.15 var(--fuente);
  letter-spacing:-.02em;
  color:var(--texto);
  text-shadow:none;
}
.barra-marca small{
  margin-top:1px;
  font:500 10px var(--fuente);
  letter-spacing:.06em;
  color:var(--texto-suave);
}

/* Buscador de cabecera: píldora gris sin borde, igual que los contenedores
   #EDEDED del hero. */
.barra-buscador{
  height:40px;
  border:1px solid transparent;
  border-radius:12px;
  background:#EDEDED;
  box-shadow:none;
}
.barra-buscador:focus-within{
  border-color:rgba(59,130,246,.35);
  background:#fff;
  box-shadow:0 0 0 3px rgba(59,130,246,.10);
}
.barra-buscador input{color:var(--texto);font-size:13px}
.barra-buscador input::placeholder{color:var(--texto-suave)}
.barra-buscador button{color:var(--acento);font-size:20px}
.barra-buscador button:hover{color:var(--acento-oscuro)}

.barra-avatar{
  width:40px;height:40px;
  border:0;border-radius:999px;
  background:#EDEDED;
  box-shadow:none;
}

/* Segunda fila: el grupo de secciones vive dentro de una sola píldora gris. */
.barra-navegacion{
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.barra-inner{
  justify-content:center;
  gap:10px;
  min-height:0;
  padding:0 0 14px;
}
.barra-nav{
  gap:6px;
  margin-left:0;
  padding:6px 10px;
  border-radius:12px;
  background:#EDEDED;
}
.barra-nav button{
  padding:7px 12px;
  border-radius:999px;
  font:500 12px/1 var(--fuente);
  letter-spacing:.01em;
  color:var(--texto-medio);
  background:transparent;
  transition:color var(--transicion),background var(--transicion);
}
.barra-nav button:hover{
  color:var(--texto);
  background:rgba(255,255,255,.7);
  transform:none;
}
.barra-nav button[aria-current="page"]{
  color:var(--texto);
  background:#fff;
  box-shadow:var(--sombra-sm);
}
/* El botón "INSTRUMENTO" era ámbar; ahora es el azul de acento. */
.barra-principal{color:var(--acento)!important;background:transparent!important;font-weight:500!important}
.barra-principal:hover{background:rgba(255,255,255,.7)!important}
.barra-principal[aria-current="page"]{color:#fff!important;background:var(--acento)!important}

.barra-admin,
.conexion-estado{
  margin-left:0;
  border:0;
  border-radius:999px;
  background:#EDEDED;
  color:var(--texto-medio);
  box-shadow:none;
}
.barra-admin{width:38px;height:38px;display:grid;place-items:center}
.barra-admin:hover{color:var(--acento);background:#e5e7eb}
.conexion-estado{padding:8px 14px;font:500 12px var(--fuente)}

/* ===================== BOTONES =====================
   El patrón del hero: píldora de 13 px, contorno azul fino que se rellena al
   pasar el ratón, y la flecha que se corre medio paso. */
.btn{
  border-radius:999px;
  font:500 13px/1 var(--fuente);
  letter-spacing:0;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-sm{font-size:12px}

.btn-primario{
  background:var(--acento);
  border-color:var(--acento);
  color:#fff;
  box-shadow:none;
}
.btn-primario:hover{background:var(--acento-oscuro);border-color:var(--acento-oscuro);color:#fff}

.btn-linea{
  border:1px solid #60a5fa;
  color:var(--acento);
  background:transparent;
}
.btn-linea:hover{background:var(--acento);border-color:var(--acento);color:#fff}

.btn-suave{
  border:0;
  background:#EDEDED;
  color:var(--texto-medio);
}
.btn-suave:hover{background:#e5e7eb;color:var(--texto)}

/* Flechas que acompañan enlaces y botones. */
.bibdash-doc-flecha,.bibdash-tema-flecha,.bibdash-enlace span{
  display:inline-block;
  transition:transform .2s ease;
}
.bibdash-doc:hover .bibdash-doc-flecha,
.bibdash-tema:hover .bibdash-tema-flecha,
.bibdash-enlace:hover span{transform:translateX(2px)}

/* ===================== SUPERFICIES DE APOYO =====================
   Las tarjetas del tablero y del estante conservan su estética propia —los
   degradados, las cintas de color y los halos de esquina que ya tenían—; esta
   hoja no las toca. Aquí solo quedan las piezas auxiliares que no son tarjeta. */
.filtros,
.top5,
.pestanas{
  border:1px solid var(--borde);
  border-radius:var(--radio-lg);
  background:var(--superficie);
  box-shadow:none;
}

.hero-eyebrow{
  color:var(--acento);
  font:500 11.5px var(--fuente);
  letter-spacing:.06em;
}

/* Las flechas de las filas del tablero se corren medio paso al pasar el ratón,
   como en el hero. Es solo movimiento: no cambia el aspecto en reposo. */
.bibdash-doc-flecha,.bibdash-tema-flecha,.bibdash-enlace span{
  display:inline-block;
  transition:transform .2s ease;
}
.bibdash-doc:hover .bibdash-doc-flecha,
.bibdash-tema:hover .bibdash-tema-flecha,
.bibdash-enlace:hover span{transform:translateX(2px)}

/* Pie: gris tenue, sin peso visual. */
.pie{
  background:var(--fondo);
  border-top:1px solid var(--borde);
  color:var(--texto-suave);
  font-size:12px;
}

/* ===================== FUGA DEL TEMA DE MADERA =====================
   componentes.css todavía pinta `main` y `.tablero` con el dorado y los
   degradados oscuros del tema anterior. Las capas posteriores lo fueron
   tapando pieza por pieza; aquí se corta de raíz, en el contenedor, para que
   ningún texto nuevo herede un color pergamino sobre fondo claro. */
main{
  color:var(--texto);
  background-image:none;
  background-color:transparent;
}
.tablero{color:var(--texto)}

/* Solo la herencia: los títulos, párrafos y botones del tablero conservan el
   estilo que ya tenían en las capas anteriores. */