/* ============================================================================
   CORRECCIONES DE LEGIBILIDAD

   La hoja componentes.css termina con dos bloques del tema antiguo de madera
   (fondo oscuro, letra dorada). apple-light.css volvió a poner la interfaz en
   claro, pero algunas reglas de aquel tema tienen más peso y se siguen
   aplicando: de ahí los títulos que no se leen y las barras marrones sobre
   fondo blanco.

   Aquí se corrigen esas fugas, una por una, sin tocar las hojas anteriores.
   Se carga la última, así que con la misma especificidad gana.
   ========================================================================== */

:root{
  /* El azul de marca a 4,7:1 solo aguanta sobre blanco puro. Sobre los grises
     y azules pálidos del sistema se queda corto, así que el texto pequeño usa
     esta variante oscurecida. */
  --apple-blue-texto:#0060c0;

  /* "Parcialmente vigente" estaba en 3,78:1 sobre su propio fondo. */
  --parcial:#8a5b06;
}

/* ---------------------------------------------------------------------- */
/* 1. Restos del tema de madera en el tablero de inicio                    */
/*    `.tablero button:not(.btn)` pintaba de marrón oscuro las barras, las   */
/*    tarjetas de tema, las filas de documento y los enlaces del tablero.    */
/* ---------------------------------------------------------------------- */

.tablero button:not(.btn){
  border-color:var(--apple-line,#d2d2d7);
  background:transparent;
  color:var(--apple-ink,#1d1d1f);
}
.tablero button:not(.btn):hover{
  border-color:#b8b8bf;
  background:rgba(0,0,0,.04);
}

/* Las barras de composición y las filas de documento son filas, no botones
   con marco: van sin borde y con la pista clara que define apple-light. */
.tablero button.bibdash-barra,
.tablero button.bibdash-doc{
  border:0;
  background:transparent;
}
.tablero button.bibdash-barra:hover,
.tablero button.bibdash-doc:hover{
  background:rgba(0,0,0,.04);
}
.tablero button.bibdash-tema{
  background:rgba(255,255,255,.92);
}
.tablero button.bibdash-tema:hover{
  background:#fff;
}
.tablero button.bibdash-enlace,
.tablero button.bibdash-limpiar{
  background:rgba(0,113,227,.08);
  border-color:rgba(0,113,227,.22);
  color:var(--apple-blue-texto);
}
.tablero button.bibdash-enlace:hover,
.tablero button.bibdash-limpiar:hover{
  background:rgba(0,113,227,.14);
  border-color:rgba(0,113,227,.34);
}

/* ---------------------------------------------------------------------- */
/* 2. Rótulos dorados sobre superficie clara                               */
/*    `.hero-eyebrow` y `.ficha-tipo` quedaron en oro (#d8a84e): 2:1 contra   */
/*    el fondo blanco, prácticamente invisibles.                             */
/* ---------------------------------------------------------------------- */

.hero-eyebrow,
.ficha-tipo{color:var(--apple-blue-texto)}

/* El diálogo de conexión sí tiene fondo pergamino: allí se conserva el rojo
   institucional que ya define componentes.css. */

/* ---------------------------------------------------------------------- */
/* 3. Texto pequeño en azul de marca                                       */
/* ---------------------------------------------------------------------- */

.barra-avatar,
.bibdash-eyebrow,
.biblioteca-sobrelinea,
.bibdash-tema-num,
.ficha-volver,
.lectura-volver,
.enlace{color:var(--apple-blue-texto)}

.bibdash-tema-sugerido .bibdash-tema-num{color:#55555a}

/* ---------------------------------------------------------------------- */
/* 4. Pestaña activa del menú principal                                    */
/*    INSTRUMENTO activo quedaba en azul marino sobre azul: 3,12:1.          */
/* ---------------------------------------------------------------------- */

.barra-principal[aria-current="page"]{
  background:var(--apple-blue,#0071e3)!important;
  color:#fff!important;
}

/* ---------------------------------------------------------------------- */
/* 5. Cabecera de la ficha y del estante                                   */
/*    Estas cabeceras eran un degradado oscuro y su contenido iba en        */
/*    blanco. apple-light las pasó a fondo claro, pero las reglas del       */
/*    contenido son más específicas y seguían pintando en blanco: las       */
/*    etiquetas de tema y los botones "Guardar" y "Citar" desaparecían.     */
/* ---------------------------------------------------------------------- */

.ficha-cab .ficha-volver,
.ficha-cab .ficha-tipo{color:var(--apple-blue-texto)}
.ficha-cab .ficha-volver:hover{color:#00417f}

.ficha-cab .ficha-dato dt{color:var(--apple-secondary,#6e6e73)}
.ficha-cab .ficha-dato dd{color:var(--apple-ink,#1d1d1f)}
.ficha-cab .ficha-descripcion,
.ficha-cab .ficha-datos dt{color:#3a3a3c}
.ficha-cab .ficha-datos dd{color:var(--apple-ink,#1d1d1f)}

.ficha-temas .tema-tag{
  border-color:rgba(0,113,227,.18);
  background:#edf6ff;
  color:#0064c8;
}
.ficha-temas .tema-tag:hover{
  border-color:rgba(0,113,227,.34);
  background:#dceeff;
}

.ficha-acciones .btn-linea{
  border-color:var(--apple-line,#d2d2d7);
  background:#fff;
  color:var(--apple-blue-texto);
}
.ficha-acciones .btn-linea:hover{
  border-color:rgba(0,113,227,.32);
  background:#f4faff;
}

/* ---------------------------------------------------------------------- */
/* 6. Pestañas y numeración de artículos                                   */
/* ---------------------------------------------------------------------- */

.pestanas button[aria-selected="true"]{color:var(--apple-blue-texto)}
.articulo-num{color:var(--apple-blue-texto)}

/* ---------------------------------------------------------------------- */
/* 7. La escala de grises seguía siendo beige                              */
/*    apple-light.css volvió a mapear los tokens semánticos (--texto,       */
/*    --borde, --azul-*), pero dejó intacta la escala cruda --gris-*, que    */
/*    en tokens.css es la paleta de madera. Las 34 reglas que la usan        */
/*    directamente pintaban pergamino sobre la interfaz clara: pastillas     */
/*    beige, botones color arena. Aquí la escala pasa a gris neutro.         */
/* ---------------------------------------------------------------------- */

:root{
  --gris-25:#fbfbfd;
  --gris-50:#f5f5f7;
  --gris-100:#ececf0;
  --gris-200:#dedee3;
  --gris-300:#c7c7cc;
  --gris-400:#8e8e93;
  --gris-500:#6e6e73;
  --gris-700:#424245;
  --gris-900:#1d1d1f;
}

/* Dos casos que, aun con la escala neutra, se quedaban por debajo de 4,5:1. */
.articulo-enlace{color:var(--texto-suave)}
.rel-fuente{color:#55555a}

/* ---------------------------------------------------------------------- */
/* 8. Sello de la biblioteca en la barra                                   */
/*    El bloque de la derecha era «CB» + «Control Fiscal / Biblioteca        */
/*    institucional». Ahora es solo el sello, al mismo tamaño que el escudo  */
/*    de la Contraloría del extremo izquierdo (50 px, 42 en móvil).          */
/* ---------------------------------------------------------------------- */

.barra-perfil-solo-sello{gap:0}

.barra-avatar{
  width:50px;
  height:50px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:50%;
  background:none;
  box-shadow:none;
}
.barra-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

@media(max-width:720px){
  .barra-avatar{width:42px;height:42px}
}

/* La tercera columna de la barra estaba dimensionada para el bloque de texto
   que había junto a las iniciales: reservaba hasta 260 px. Ahora solo lleva un
   sello de 50 px, así que se ajusta al contenido y el ancho sobrante vuelve al
   buscador, que es lo que de verdad se usa.

   Va dentro de una media query a propósito: por debajo de 980 px la barra pasa
   a dos columnas con desplazamiento horizontal, y una regla sin condición
   pisaba ese cambio.

   El mínimo de la primera columna sube de 300 a 340 px porque «Biblioteca de
   Control Fiscal» con su escudo mide 323: con 300 el nombre se salía de su
   columna entre 981 y 1040 px de ancho. */
@media (min-width:981px){
  .barra-superior{
    grid-template-columns:minmax(340px,1fr) minmax(300px,1.8fr) auto;
  }
}

/* En móvil el sello se queda oculto, como ya estaba el bloque que sustituye.
   No cabe en la primera fila junto a la marca y el menú, y se llevaba una fila
   entera para él solo: tres filas de cabecera antes de ver nada. Tampoco hace
   falta, porque ahí ya están el escudo de la Contraloría y el nombre completo
   de la biblioteca escrito al lado. */
@media(max-width:720px){
  .barra-superior .barra-menu{color:var(--apple-ink,#1d1d1f)}
}