/* ==========================================================================
   Tablero de inicio — proporción de los paneles de gráficos.

   Los dos paneles son hermanos de una rejilla, así que la altura la fija el
   más alto y el otro se estira. Antes el de composición se quedaba con el
   contenido arriba y 150 px de vacío debajo: cuatro barras de 24 px en una
   caja de 340. Aquí el panel se vuelve columna y el contenido reparte el
   alto que le toca, en lugar de amontonarse.
   ========================================================================== */

.bibdash-graficos .bibdash-panel{
  display:flex;
  flex-direction:column;
}
.bibdash-graficos .bibdash-panel-cab{flex:none;}

/* --- Composición: tipos documentales ----------------------------------- */

.bibdash-barras{
  flex:1;
  /* `space-between` clava la primera fila contra el encabezado y la última
     contra el borde; `space-evenly` reparte también los extremos y las cuatro
     barras se leen como un grupo con aire propio. */
  align-content:space-evenly;
  gap:var(--e2);
}

/* La etiqueta ocupaba `1fr` de un panel de 800 px: «Ley» se llevaba 165 px y
   dejaba un pasillo vacío antes de la barra. Ahora la columna se ajusta al
   texto con un techo, y todo lo que sobra es barra. */
.bibdash-barra{
  grid-template-columns:minmax(88px,124px) minmax(0,1fr) 34px;
  gap:var(--e3);
  padding:8px;
  border-radius:var(--radio);
}
.bibdash-barra-etiqueta{font-size:var(--t-meta);}
.bibdash-barra-pista{height:12px;background:#e9eaef;}
.bibdash-barra>strong{
  font-size:var(--t-small);
  font-variant-numeric:tabular-nums;
}

/* --- Estado: vigencia del corpus ---------------------------------------- */

.bibdash-vigencia{
  flex:1;
  gap:clamp(16px,2.6vw,32px);
  min-height:0;
}

/* Aro fino: con un solo estado al 100 % el aro grueso era una mancha de color
   y el número —lo que de verdad se lee— quedaba pequeño dentro de ella. */
.bibdash-donut{width:146px;height:146px;}
.bibdash-donut::before{width:110px;height:110px;}
.bibdash-donut strong{
  /* Heredaba un dorado del tema de madera anterior (#ead8b8) y sobre blanco
     casi no se leía. */
  color:var(--apple-ink,var(--texto));
  font-size:32px;
  font-variant-numeric:tabular-nums;
}
.bibdash-donut small{font-size:11px;}

/* La leyenda es una sola rejilla y las filas se disuelven en ella.

   Antes cada fila era su propia rejilla con la columna del nombre en `1fr`:
   «Vigente» ocupaba 43 px de texto en una columna de 117 y el conteo acababa
   a 90 px de distancia, como si fuera de otra cosa. `max-content` en la
   rejilla común hace que la columna mida lo que mide el nombre más largo de
   todos: los conteos siguen alineados entre sí —que es lo que permite
   compararlos de un vistazo— pero pegados al texto y no al borde del panel.

   `display:contents` disuelve el <li>, así que se le devuelven los roles a
   mano para no perder la lista de cara al lector de pantalla. */
.bibdash-vigencia ul{
  display:grid;
  grid-template-columns:10px max-content auto;
  align-items:center;
  justify-content:start;
  flex:none;
  min-width:0;
  width:auto;
  max-width:100%;
  gap:var(--e3) var(--e4);
}
.bibdash-vigencia li{display:contents;}
.bibdash-vigencia li i{width:10px;height:10px;}
.bibdash-vigencia li span{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  font-size:var(--t-micro);
}
/* El porcentaje va bajo el nombre y no junto al número: leído en la misma
   línea competía con el conteo y no se sabía cuál de los dos era la cifra. */
.bibdash-vigencia li em{
  font-style:normal;
  font-size:var(--t-micro);
  color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}
.bibdash-vigencia li strong{
  justify-self:end;
  font-size:var(--t-small);
  font-variant-numeric:tabular-nums;
}

@media(max-width:720px){
  .bibdash-barra{grid-template-columns:minmax(78px,110px) minmax(0,1fr) 30px;gap:var(--e3);}
  .bibdash-donut{width:132px;height:132px;}
  .bibdash-donut::before{width:94px;height:94px;}
  .bibdash-donut strong{font-size:27px;}
  .bibdash-vigencia ul{max-width:none;width:100%;}
}

/* ==========================================================================
   Estética del tablero — indicadores, temas y filas de documento.

   apple-light marca con `!important` casi todo lo de estas piezas (era la
   forma de tapar el tema de madera anterior), así que lo que hay que pisar
   aquí va también marcado. No es un capricho: sin la marca, la regla se
   ignora y parece que el cambio no entró.
   ========================================================================== */

/* --- Indicadores -------------------------------------------------------- */

/* El disco de color de la esquina se veía como un recorte pegado: borde duro,
   posición arbitraria. Pasa a ser un halo que se desvanece, y el color deja de
   ser adorno para amarrarse al dato: la etiqueta del indicador se tiñe del
   mismo tono, así el verde de «Artículos» significa algo. */
.bibdash-kpi::after{
  right:-46px;
  bottom:-56px;
  width:150px;
  height:150px;
  opacity:1;
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--kpi-tinta,#0071e3) 22%,transparent) 0%,
    transparent 68%);
}
.bibdash-kpi>span{color:var(--kpi-tinta,#0071e3);}
.bibdash-kpi strong{font-variant-numeric:tabular-nums;}

/* --- Temas -------------------------------------------------------------- */

.bibdash-temas{gap:var(--e3);}

.bibdash-tema{
  min-height:86px;
  padding:var(--e4) var(--e4) var(--e4) var(--e3)!important;
  border-radius:var(--radio-lg)!important;
  /* El acento entra por la izquierda al pasar el cursor. Antes el único
     cambio era el fondo, y en una rejilla de quince cajas iguales cuesta
     saber sobre cuál se está. */
  box-shadow:inset 3px 0 0 transparent!important;
  transition:box-shadow var(--transicion),border-color var(--transicion),
             background var(--transicion),transform var(--transicion);
}
.bibdash-tema:hover{
  box-shadow:inset 3px 0 0 var(--apple-blue)!important;
}

/* El número era una pastilla cuadrada de 10 px que competía con el nombre.
   Redondo, más callado y con la cifra legible: ordena sin gritar. */
.bibdash-tema-num{
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:var(--t-micro);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background var(--transicion),color var(--transicion);
}
.bibdash-tema:hover .bibdash-tema-num{
  background:var(--apple-blue);
  color:#fff;
}

/* 13 y 10 px eran letra de pie de página para lo que es el título de la
   tarjeta y su dato. */
.bibdash-tema strong{font-size:var(--t-small);letter-spacing:-.01em;}
.bibdash-tema small{margin-top:3px;font-size:var(--t-micro);}

/* La flecha vivía clavada a la derecha con un vacío enorme delante, quince
   veces repetida. Ahora aparece al pasar por encima, que es cuando dice algo. */
.bibdash-tema-flecha{
  opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--transicion),transform var(--transicion);
}
.bibdash-tema:hover .bibdash-tema-flecha{
  opacity:1;
  transform:translateX(0);
  color:var(--apple-blue);
}

/* Rutas sugeridas: son estantes vacíos, no temas del fondo. La cursiva las
   hacía parecer un error de maquetación; una etiqueta las declara. */
.bibdash-tema-sugerido small{
  /* `inline-block` no sirve aquí: el <small> es celda de la rejilla de la
     tarjeta y las celdas se bloquean, así que la etiqueta se estiraba de lado
     a lado y parecía una barra de carga. `justify-self` es lo que la encoge
     hasta su texto. */
  justify-self:start;
  padding:2px 8px;
  border-radius:var(--radio-pill);
  background:#f0f0f3;
  font-style:normal;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* --- Filas de documento -------------------------------------------------- */

.bibdash-doc{border-radius:var(--radio)!important;}
.bibdash-doc>i{height:40px;}
.bibdash-doc-cuerpo>strong{font-size:var(--t-small);}
.bibdash-doc-cuerpo>span{font-size:var(--t-micro);}
.bibdash-doc-articulos{font-variant-numeric:tabular-nums;}
.bibdash-doc-flecha{
  opacity:0;
  transition:opacity var(--transicion),color var(--transicion);
}
.bibdash-doc:hover .bibdash-doc-flecha{opacity:1;color:var(--apple-blue);}

@media(max-width:720px){
  .bibdash-tema{min-height:76px;}
  /* Sin cursor no hay «hover»: la flecha se queda visible o no se ve nunca. */
  .bibdash-tema-flecha,.bibdash-doc-flecha{opacity:1;transform:none;}
}

/* ==========================================================================
   Cabecera del estante.

   Todo va acotado a `#vista-estante`: `.ficha-cab` es el mismo componente que
   encabeza una norma y la vista de lectura, y ahí no se toca nada.

   Lo que había: el nombre y las cuatro cifras apilados en una sola columna a
   la izquierda, con media banda vacía a la derecha y las cifras a 14 px bajo
   una regla, como un pie de página. Ahora el nombre y los datos se reparten
   el ancho, y las cifras tienen el tamaño que corresponde a lo que son: el
   dato por el que se entra al estante.
   ========================================================================== */

#vista-estante .ficha-cab{padding:var(--e5) 0 var(--e6);}

.estante-cab{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--e4) var(--e7);
}
.estante-cab-texto{flex:1 1 340px;min-width:0;}
#vista-estante .ficha-cab h1{margin-bottom:0;}
#vista-estante .ficha-descripcion{margin-top:var(--e3);}

/* Las cifras dejan de ser un pie bajo una regla y pasan a ser una tira de
   indicadores, separados por filetes en vez de por hueco: con solo espacio
   entre ellos no se sabía si «1993–2022» y «02_LEYES» eran dos datos o uno. */
#vista-estante .ficha-datos{
  flex:none;
  gap:0;
  margin-top:0;
  padding-top:0;
  border-top:0;
}
#vista-estante .ficha-dato{
  padding:0 var(--e5);
  border-left:1px solid var(--apple-line,rgba(0,0,0,.1));
}
#vista-estante .ficha-dato:first-child{padding-left:0;border-left:0;}
#vista-estante .ficha-dato:last-child{padding-right:0;}
#vista-estante .ficha-dato dt{
  margin-bottom:var(--e1);
  font-size:var(--t-micro);
}
#vista-estante .ficha-dato dd{
  font-size:24px;
  font-weight:650;
  line-height:1.1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

@media(max-width:720px){
  #vista-estante .ficha-cab{padding:var(--e4) 0 var(--e5);}
  /* En una columna estrecha los filetes verticales cortan mal; las cifras
     bajan de tamaño y se separan por aire.

     Y la lista recupera `flex:1 1 100%`: con `flex:none` se quedaba a su
     ancho natural, nunca rompía línea y las cuatro cifras se salían por la
     derecha de la pantalla. */
  #vista-estante .ficha-datos{
    flex:1 1 100%;
    min-width:0;
    gap:var(--e3) var(--e5);
  }
  #vista-estante .ficha-dato{padding:0;border-left:0;}
  #vista-estante .ficha-dato dd{font-size:var(--t-h3);}
}

/* ==========================================================================
   El nicho de la biblioteca, en tres piezas de una misma foto.

   Sustituye al nicho que estaba dibujado con degradados (pared, laterales en
   perspectiva, techo, haz y foco). Aquellas capas quedan anuladas aquí abajo:
   nicho.css sigue definiéndolas y pintarían por debajo de la foto.

   El reparto del alto: techo y repisa conservan su proporción original —su
   alto sale del ancho, no del contenido—, y el muro se queda con lo que
   sobre. Por eso los libros pueden ser tres o quince sin que la luz del techo
   se achate ni la balda se estire.
   ========================================================================== */

.biblioteca-mueble.nicho{position:relative;}

.nicho-caja{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  pointer-events:none;
  /* `z-index:0` —que es lo que traía— crea un contexto de apilado y encierra
     dentro todo lo que cuelga de la caja. El interruptor quedaba atrapado por
     debajo de `.estantes`, que va a z-index 1: el clic se lo comía la
     estantería y la luz no respondía al ratón (por código sí, y por eso no se
     vio antes). Con `auto` la caja sigue pintando donde estaba —el velo por
     debajo de los libros— pero el botón ya puede subir por su cuenta. */
  z-index:auto;
}

/* `aspect-ratio` con ancho completo: el alto de la pieza lo fija el ancho del
   mueble, que es justo lo que mantiene la foto sin deformar. */
.nicho-techo,
.nicho-piso{
  flex:none;
  width:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  /* `.nicho-techo` ya existía en nicho.css como una tira absoluta con alto
     fijo y `clip-path`. Ese alto explícito gana siempre a `aspect-ratio`, así
     que la pieza salía de 65 px en vez de 365 y la luz no se veía. Hay que
     devolverla al flujo y soltarle el alto.

     `relative` en vez de `static` porque el interruptor vive dentro del techo
     y se coloca en porcentajes suyos. Sin esto se medía contra el mueble
     entero —690 px en vez de 365— y el plafón le quedaba a media pared. */
  position:relative;
  inset:auto;
  height:auto;
  clip-path:none;
}
.nicho-techo{
  aspect-ratio:1672/470;
  background-image:url(../images/nicho-techo.png);
}
.nicho-piso{
  aspect-ratio:1672/241;
  background-image:url(../images/nicho-repisa.png);
}

/* La franja del muro se estira en vertical. El degradado que trae es
   horizontal —el sombreado de los costados—, así que estirarla a lo alto no
   lo deforma. */
.nicho-muro{
  flex:1;
  min-height:0;
  background:url(../images/nicho-muro.png) center/100% 100% repeat-y;
}

/* Anulación de las capas del nicho dibujado. */
.nicho-pared,
.nicho-lateral,
.nicho-haz,
.nicho-foco,
.nicho-repisa{display:none!important;}

/* El mueble no mete margen lateral: lo pone cada balda por su cuenta.

   La razón es de medida, no de gusto. Los porcentajes de relleno se calculan
   contra el ancho del elemento que los contiene, y la foto se escala con el
   ancho del mueble. Con el margen aquí, `.estantes` medía 1118 px mientras la
   foto medía 1297, y todo lo que colocaba en porcentaje —la cara de la tabla,
   sobre todo— caía un 14 % corto: los libros quedaban 21 px por debajo de
   donde se apoyan. Con el margen en la balda, las dos medidas son la misma. */
.biblioteca-mueble.nicho{padding-inline:0;}

/* Con más estantes de los que caben, la fila se salía por los dos lados del
   mueble: `.estantes` es un flex sin envoltura y nadie recortaba lo que
   sobraba. Ahora se desliza dentro del hueco.

   Deslizar y no envolver en varias filas es lo que pide esta foto: tiene una
   sola balda, y una segunda fila de libros quedaría flotando sin nada debajo.
   El contenedor mide 565 px y el libro más alto 468, así que recortar en
   vertical no llega a tocarlos. */
.biblioteca-mueble.nicho .estantes{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}

/* --- Baldas: una fila de libros, una balda ------------------------------

   `.estantes` deja de ser una fila que se desliza y pasa a ser una columna de
   baldas. Cada fila lleva su tabla debajo, recortada de la misma foto; la de
   abajo del todo no la necesita porque se apoya en la que ya trae el nicho,
   la única que tiene vuelo y sombra.

   El nicho crece hacia abajo por sí solo: el muro es la pieza elástica de las
   tres y absorbe lo que ocupen las baldas nuevas. */

.biblioteca-mueble.nicho .estantes{
  display:flex;
  flex-direction:column;
  /* `align-items:flex-end` venía de cuando esto era UNA fila de libros
     apoyados en el suelo. Ahora el eje es vertical, así que ese valor alinea
     las baldas a la derecha y las encoge a lo que ocupen sus libros: la fila
     quedaba corrida y las tablas no llegaban a los costados del nicho. */
  align-items:stretch;
  gap:0;
  overflow:visible;
  min-height:0;
  /* El suelo dibujado de antes: un borde inferior de 16 px con su sombra, más
     el reflejo de fondo. Todo eso lo pone ahora la foto, y esos 16 px eran los
     que dejaban los libros por debajo de la cara de la tabla. */
  /* Hueco reservado para el techo. Sin él, el alto del mueble lo fijaba solo
     el libro más alto más su apoyo —479 px— cuando las piezas de la foto
     necesitan 552 (techo 365 + repisa 187): el techo se comía a los libros y
     los lomos salían por encima del marco.

     El canto interior del techo está a 150 px de un original de 1672 de
     ancho, o sea un 8,97 %. Se deja en 7,9 % —unos 40 px menos que el 11 %
     con el que se estrenó— para bajar el mueble sin perder el dedo de aire
     entre el filo del libro y el marco: un libro que roza el techo parece
     encajado a presión, no puesto en un estante.

     El suelo es 42,5 % (techo 28,11 + repisa 14,41): por debajo de ahí las
     dos piezas se solapan. A 7,9 % quedan unos 98 px de holgura. */
  padding-top:7.9%;
  /* Y fuera su relleno lateral de 54 px, que volvía a romper la equivalencia:
     la balda medía sus porcentajes contra 1188 px y la foto contra 1297. El
     margen del marco lo pone la propia balda. */
  padding-inline:0;
  border-bottom:0;
  background:none;
  box-shadow:none;
}

.estante-fila{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:23px;
  /* El marco de la foto mide 44 px de un original de 1672. Los libros se
     meten esa misma proporción hacia dentro, así que se deslizan por detrás
     del canto blanco a cualquier tamaño. La tabla, en cambio, va de lado a
     lado: es parte de la foto. */
  padding-inline:2.1%;
  /* La tabla tiene dos líneas: la costura con el fondo (y=760 en la foto) y
     el filo del canto (y=827). Los libros apoyan justo en medio, y=793, que
     es donde se posa algo que de verdad está sobre una balda y no pegado a la
     pared. El recorte llega a 812 —justo antes del rótulo, que asoma desde
     y=813— así que el hueco es (812-793)/1672. */
  padding-bottom:calc(1.14% + var(--apoyo-baja));
  background:url(../images/nicho-balda.png) bottom center/100% auto no-repeat;
}

/* Ajuste fino del apoyo, si alguna vez hace falta moverlo. En negativo baja
   los libros, en positivo los sube. A cero, apoyan en el punto medido de la
   foto. Un solo número para todas las baldas, para que ninguna quede
   desalineada con las demás. */
.biblioteca-mueble.nicho{--apoyo-baja:0%;}

/* La última se apoya en la balda que ya trae la foto. El mismo punto medio,
   y=793, medido desde abajo sobre el alto original de 941: (941-793)/1672. */
.estante-fila-ultima{
  padding-bottom:calc(8.85% + var(--apoyo-baja));
  background:none;
}

/* El relleno inferior del mueble desplazaba esa cuenta hacia arriba: la
   referencia tiene que ser el borde del nicho, que es donde está la foto. */
.biblioteca-mueble.nicho{padding-bottom:0;}

/* El lomo deja de estirarse para repartirse el ancho sobrante: si crece, tres
   libros solos ocuparían la balda entera y el cuarto la partiría a la mitad.
   Con ancho fijo, la fila se centra y todas las baldas se leen igual. */
.estante-fila .estante-card{
  flex:0 0 214px;
  max-width:214px;
}

@media(max-width:720px){
  .estante-fila{gap:14px;}
}

/* --- Talla del libro ----------------------------------------------------

   El hueco del nicho, del techo a la cara de la tabla, mide un 37,9 % del
   ancho del mueble: 491 px cuando el mueble mide 1297. Los lomos llegaban a
   468, o sea 23 px de aire, y por eso rozaban la luz del plafón. A 364 el más
   alto deja 127 px de respiro y el libro se ve puesto en un estante, no
   encajado a presión.

   La reducción es del 78 %, alto y ancho a la vez, para que la tapa no se
   deforme; el contenido de la tapa baja en la misma proporción o el lomo se
   queda sin márgenes. */

.biblioteca-mueble.nicho .estante-card{
  --libro-alto:352px;
  min-width:0;
  padding:0 10px 12px;
}
.biblioteca-mueble.nicho .estante-card:nth-child(3n+2){--libro-alto:330px;}
.biblioteca-mueble.nicho .estante-card:nth-child(4n+3){--libro-alto:364px;}
.biblioteca-mueble.nicho .estante-card:nth-child(5n){--libro-alto:344px;}

/* El interior de la tapa, a la misma escala. */
.biblioteca-mueble.nicho .estante-placa{padding-top:20px;gap:7px;}
.biblioteca-mueble.nicho .estante-placa strong{font-size:15px;}
.biblioteca-mueble.nicho .estante-sello{width:38px;height:38px;margin:9px auto 8px;}
.biblioteca-mueble.nicho .estante-ornamento:first-child{width:25px;height:19px;}
.biblioteca-mueble.nicho .estante-meta{font-size:9px;}
.biblioteca-mueble.nicho .estante-meta strong{font-size:11px;}
.biblioteca-mueble.nicho .estante-accion{padding:6px 7px;font-size:8px;}

/* La talla del lomo vive aquí y el reparto en filas la lee de aquí: si se
   declara dos veces, tarde o temprano una de las dos se queda atrás y la
   cuenta de cuántos caben deja de coincidir con lo que se ve. */
.biblioteca-mueble.nicho .estantes{
  --libro-ancho:168px;
  --libro-hueco:23px;
}
.estante-fila{gap:var(--libro-hueco);}
.biblioteca-mueble.nicho .estante-fila .estante-card{
  flex:0 0 var(--libro-ancho);
  min-width:0;
  max-width:var(--libro-ancho);
}

@media(max-width:720px){
  /* En una pantalla de 375 px un lomo de 168 se come media pantalla y solo
     caben dos: a esta talla entran tres y siguen leyéndose. */
  .biblioteca-mueble.nicho .estantes{
    --libro-ancho:104px;
    --libro-hueco:12px;
  }
  .biblioteca-mueble.nicho .estante-card{
    --libro-alto:232px;
    /* nicho.css fija aquí `height:auto` con `min-height:400px`, y ese mínimo
       ignoraba la talla nueva: el lomo salía de 104 × 400, una tira. Hay que
       devolverle el alto a la variable. */
    height:var(--libro-alto);
    min-height:0;
    min-width:0;
    padding:0 7px 9px;
  }
  .biblioteca-mueble.nicho .estante-card:nth-child(3n+2){--libro-alto:218px;}
  .biblioteca-mueble.nicho .estante-card:nth-child(4n+3){--libro-alto:240px;}
  .biblioteca-mueble.nicho .estante-card:nth-child(5n){--libro-alto:226px;}
  .biblioteca-mueble.nicho .estante-placa{padding-top:12px;gap:4px;}
  .biblioteca-mueble.nicho .estante-placa strong{font-size:11px;}
  .biblioteca-mueble.nicho .estante-sello{width:26px;height:26px;margin:6px auto 5px;}
  .biblioteca-mueble.nicho .estante-ornamento:first-child{width:18px;height:14px;}
  .biblioteca-mueble.nicho .estante-meta{font-size:8px;}
  .biblioteca-mueble.nicho .estante-meta strong{font-size:9px;}
  .biblioteca-mueble.nicho .estante-accion{padding:4px 5px;font-size:7px;}
}

/* ==========================================================================
   La luz del nicho se enciende y se apaga.

   El resplandor viene revelado en la foto, así que no se puede quitar: lo que
   se hace es apagarlo. Se le baja el brillo y el color a las tres piezas —el
   dorado del plafón se vuelve gris— y encima se posa un velo frío, que es lo
   que hace leer la escena como una vitrina sin luz y no como una foto
   oscurecida.
   ========================================================================== */

/* Caja del mando: mismo ancho y misma proporción que el techo, para que los
   porcentajes del botón midan contra lo mismo que antes. Va aparte del nicho
   porque el techo se filtra al apagar y un filtro encierra lo que cuelga de
   él. */
.nicho-mando{
  position:absolute;
  left:0;
  right:0;
  top:0;
  aspect-ratio:1672/470;
  z-index:2;
  pointer-events:none;
}

.nicho-interruptor{
  position:absolute;
  left:50%;
  /* El plafón está a 103 px del techo, que mide 470: un 21,9 % de su alto.
     Medido contra el techo y no contra el mueble, cae en su sitio a cualquier
     ancho. */
  top:21.9%;
  /* Zona de clic generosa: el plafón mide 5 % de ancho y acertarle a ciegas
     es pedir mucho. Se agranda a 13 %, que sigue cayendo dentro del techo y
     lejos de los libros. */
  width:13%;
  height:52%;
  transform:translate(-50%,-50%);
  padding:0;
  border:0;
  border-radius:var(--radio-pill);
  background:none;
  cursor:pointer;
  /* Su caja no recibe ratón; este botón sí, y es el único. La caja va a
     z-index 2 para pasar por encima de `.estantes`, que está en 1 y cuyo
     relleno superior cubre justo la zona del plafón. */
  pointer-events:auto;
}
.nicho-interruptor:focus-visible{
  outline:2px solid var(--apple-blue,#0071e3);
  outline-offset:3px;
}

/* Un control invisible no existe. Al pasar por encima se enciende un halo
   alrededor del plafón: dice «esto se pulsa» sin ensuciar la foto cuando
   nadie lo está buscando. */
.nicho-interruptor::before{
  content:"";
  position:absolute;
  inset:14% 18%;
  border-radius:var(--radio-pill);
  background:radial-gradient(ellipse at center,
    rgba(255,238,201,.85) 0%,
    rgba(255,232,186,.35) 45%,
    transparent 72%);
  opacity:0;
  transform:scale(.7);
  transition:opacity var(--transicion),transform var(--transicion);
  pointer-events:none;
}
.nicho-interruptor:hover::before,
.nicho-interruptor:focus-visible::before{
  opacity:1;
  transform:scale(1);
}
/* Apagada, el halo es frío: si fuera cálido parecería que ya está encendida. */
.biblioteca-mueble.nicho[data-luz="apagada"] .nicho-interruptor::before{
  background:radial-gradient(ellipse at center,
    rgba(214,228,255,.7) 0%,
    rgba(190,208,240,.3) 45%,
    transparent 72%);
}
.nicho-interruptor:active{transform:translate(-50%,-50%) scale(.94);}

/* --- Apagado ------------------------------------------------------------- */

.nicho-techo,
.nicho-muro,
.nicho-piso,
.biblioteca-mueble.nicho .estante-card{
  transition:filter .55s cubic-bezier(.4,0,.2,1);
}

.biblioteca-mueble.nicho[data-luz="apagada"] .nicho-techo,
.biblioteca-mueble.nicho[data-luz="apagada"] .nicho-muro,
.biblioteca-mueble.nicho[data-luz="apagada"] .nicho-piso{
  filter:brightness(.74) saturate(.35);
}
/* Los lomos pierden algo menos: en la penumbra el color de un libro se apaga,
   pero sigue siendo lo único con color de la escena. */
.biblioteca-mueble.nicho[data-luz="apagada"] .estante-card{
  filter:brightness(.72) saturate(.72);
}

/* El velo frío. Va sobre la caja y por debajo de los libros, que llevan su
   propio filtro, para que la penumbra no le coma el relieve a las tapas. */
.nicho-caja::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(18,28,52,.34),rgba(18,28,52,.14));
  opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.biblioteca-mueble.nicho[data-luz="apagada"] .nicho-caja::after{opacity:1;}

/* El parpadeo del arranque. Un fluorescente no enciende de golpe, y ese
   titubeo es lo que hace que el clic se sienta como un interruptor. */
@keyframes nicho-parpadeo{
  0%   {opacity:1}
  10%  {opacity:.15}
  18%  {opacity:.85}
  30%  {opacity:.1}
  42%  {opacity:.55}
  60%  {opacity:0}
  72%  {opacity:.28}
  100% {opacity:0}
}
.biblioteca-mueble.nicho[data-encendiendo] .nicho-caja::after{
  animation:nicho-parpadeo .62s cubic-bezier(.4,0,.2,1);
}

/* Quien pide menos movimiento recibe el cambio, no el espectáculo. */
@media(prefers-reduced-motion:reduce){
  .nicho-techo,.nicho-muro,.nicho-piso,
  .biblioteca-mueble.nicho .estante-card,
  .nicho-caja::after{transition-duration:.01ms;}
  .biblioteca-mueble.nicho[data-encendiendo] .nicho-caja::after{animation:none;}
}

/* ==========================================================================
   Resumen del corpus — indicadores.

   Formas elegidas por el trabajo del dato, no por variedad:
     · «10 documentos» es una cifra de titular, no un gráfico de una barra.
     · «Por tipo» compara magnitudes: barras ordenadas, un solo tono, cifra
       escrita. La longitud compara; el nombre identifica.
     · «Vigencia» y «Cobertura» son razones contra un límite: medidor, no
       tarta de dos porciones.

   El color no identifica nada aquí: se midió con el validador y las paletas de
   la casa no separan lo suficiente para ese trabajo. Lleva estado —bien, aviso,
   bajo— y siempre acompañado de la palabra escrita.
   ========================================================================== */

.resumen-menudo{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e2) var(--e5);
  margin:var(--e4) 0 0;
}
.resumen-menudo div{display:flex;flex-direction:column;gap:2px;}
.resumen-menudo dt{
  font-size:var(--t-micro);
  color:var(--texto-suave);
}
.resumen-menudo dd{
  margin:0;
  font-size:var(--t-lead);
  font-weight:650;
  /* Tabular solo aquí: son cifras en columna que deben alinearse entre sí. La
     cifra de titular usa las proporcionales, que a tamaño grande no quedan
     sueltas. */
  font-variant-numeric:tabular-nums;
  color:var(--texto);
}

/* --- Barras ordenadas ---------------------------------------------------- */

.viz-barras{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--e3);
}
/* Dos renglones por barra y no cuatro columnas: en un panel de 180 px, con el
   nombre y la pista compartiendo línea, «Parcialmente vigente» se quedaba en
   «Parcialm…». Un rótulo recortado no identifica nada, que es justo lo que se
   le pide aquí al texto. */
.viz-barras li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;
  gap:3px var(--e3);
  font-size:var(--t-micro);
}
.viz-barras-nombre{
  min-width:0;
  color:var(--texto-medio);
}
.viz-barras-pista{grid-column:1/-1;}
/* Marca fina y extremo redondeado de 4 px anclado a la base. */
.viz-barras-pista{
  height:7px;
  border-radius:4px;
  background:var(--azul-100,#e5f2ff);
  overflow:hidden;
}
.viz-barras-pista i{
  display:block;
  height:100%;
  border-radius:4px;
  background:var(--apple-blue,#0071e3);
}
.viz-barras-valor{
  font-weight:650;
  font-variant-numeric:tabular-nums;
  color:var(--texto);
}
.viz-barras-pct{
  min-width:34px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--texto-suave);
}

/* --- Medidor -------------------------------------------------------------- */

.viz-medidor{display:grid;gap:var(--e2);}
.viz-medidor-cifra{
  display:flex;
  align-items:baseline;
  gap:var(--e2);
  margin:0;
}
.viz-medidor-cifra strong{
  font-size:28px;
  font-weight:680;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--texto);
}
.viz-medidor-cifra span{
  font-size:var(--t-micro);
  color:var(--texto-suave);
}
/* La pista es un paso claro del MISMO tono que el relleno, no un gris: así el
   estado se lee a lo largo de toda la barra y no solo en el trozo pintado. */
.viz-medidor-pista{
  height:10px;
  border-radius:5px;
  background:var(--viz-pista);
  overflow:hidden;
}
.viz-medidor-pista i{
  display:block;
  height:100%;
  border-radius:5px;
  background:var(--viz-relleno);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.viz-medidor-pie{
  margin:0;
  font-size:var(--t-micro);
  color:var(--texto-suave);
}

/* Estados. Nunca van solos: la palabra que los explica está siempre al lado,
   porque el par ámbar/verde de la casa queda en la banda de aviso del
   validador (ΔE 6,1 en protanopia) y el color por sí solo no puede cargar
   con el significado. */
.viz-medidor[data-tono="bien"]  {--viz-relleno:#1f7a4d;--viz-pista:#dcefe4;}
.viz-medidor[data-tono="aviso"] {--viz-relleno:#a9700f;--viz-pista:#f6e9d2;}
.viz-medidor[data-tono="bajo"]  {--viz-relleno:#b3311c;--viz-pista:#f7dfda;}

.viz-pie{margin:var(--e2) 0 0;font-size:var(--t-micro);color:var(--texto-suave);}

@media(max-width:720px){
  .viz-barras li{gap:2px var(--e2);}
  .viz-medidor-cifra strong{font-size:24px;}
}

/* ==========================================================================
   Resumen en minicards.

   El contenedor deja de ser una tarjeta con separadores dentro y pasa a ser
   una rejilla: la piel —borde fino, blanco translúcido, radio grande, sombra
   difusa y desenfoque de fondo— la lleva cada tarjeta, igual que el marco del
   mapa y los indicadores del tablero. Cuatro cifras arriba, tres gráficos
   abajo.
   ========================================================================== */

.resumen{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  /* La piel se va al hijo. Con `!important` porque tres hojas distintas le
     ponen fondo, borde y relleno a este contenedor. */
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

.resumen-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid var(--apple-line,var(--borde));
  border-radius:20px;
  box-shadow:0 12px 34px rgba(0,0,0,.065);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.resumen-card-ancha{grid-column:span 2;}

/* El rótulo de la tarjeta y el de los gráficos son la misma voz. */
.resumen-card-rotulo,
.resumen-card h3{
  margin:0;
  color:var(--apple-secondary,var(--texto-suave));
  font-size:11px;
  font-weight:750;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.resumen-card h3{margin-bottom:var(--e4);}

/* --- Las cuatro cifras --------------------------------------------------- */

.resumen-card-cifra strong{
  display:block;
  margin:10px 0 5px;
  color:var(--apple-ink,var(--texto));
  font-size:clamp(28px,3.2vw,40px);
  font-weight:680;
  line-height:1;
  letter-spacing:-.045em;
  /* Proporcionales, no tabulares: a este tamaño `tabular-nums` da a cada dígito
     el ancho de un cero y un «11» queda flojo. Lo tabular es para columnas. */
  font-variant-numeric:normal;
}
.resumen-card-cifra small{
  margin-top:auto;
  color:var(--apple-secondary,var(--texto-suave));
  font-size:12px;
}

/* Relieve sin color.

   Antes cada tarjeta llevaba un halo de su propio tono en la esquina. Con
   cuatro tonos seguidos, la fila parecía codificar algo que no codifica: el
   morado de «Temas» no significa nada. El relieve lo dan ahora la luz y la
   sombra, que es lo que de verdad separa una tarjeta del fondo.

   Dos capas: un brillo desde la esquina superior izquierda —de donde viene la
   luz en toda la interfaz— y una sombra difusa en la inferior derecha. Ambas
   en gris azulado, el mismo del texto, para que no tiñan el blanco. */
.resumen-card{
  background:
    radial-gradient(120% 100% at 0% 0%,
      rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 80% at 100% 100%,
      rgba(31,45,71,.055) 0%, rgba(31,45,71,0) 62%),
    linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(241,243,247,.88) 100%);
}

/* Lo que va dentro de las tarjetas de gráfico se apoya en el fondo, no en el
   borde: el separador vertical que partía el bloque antiguo ya no existe. */
/* `margin-top:auto` empujaba la lista al fondo y abría un hueco muerto justo
   bajo el título. Ocupando el alto y repartiendo las barras a partes iguales,
   el hueco se convierte en el aire entre ellas. */
.resumen-card .viz-barras{
  flex:1;
  align-content:space-evenly;
}
.resumen-card .viz-medidor + .viz-barras{margin-top:var(--e4);}
.resumen-card .resumen-enlace{
  margin-top:var(--e4);
  align-self:flex-start;
}

.resumen-pie{
  grid-column:1/-1;
  margin:0;
  text-align:right;
  font-size:var(--t-micro);
  color:var(--texto-suave);
}

@media(max-width:1040px){
  .resumen{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .resumen-card-ancha{grid-column:span 2;}
}
@media(max-width:640px){
  .resumen{grid-template-columns:1fr!important;gap:10px!important;}
  .resumen-card{padding:16px;border-radius:18px;}
  .resumen-card-ancha{grid-column:span 1;}
  .resumen-pie{text-align:left;}
}

/* ==========================================================================
   Los temas, en minicards.

   Misma piel que las del resumen y el marco del mapa: borde fino, degradado
   neutro, radio grande, sombra difusa. Antes eran cajas blancas planas, sin
   más jerarquía que el tamaño de la letra.
   ========================================================================== */

.temas-grid .tema-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--e2);
  min-height:118px;
  padding:18px!important;
  border:1px solid var(--apple-line,var(--borde))!important;
  border-radius:20px!important;
  background:
    radial-gradient(120% 100% at 0% 0%,
      rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 80% at 100% 100%,
      rgba(31,45,71,.055) 0%, rgba(31,45,71,0) 62%),
    linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(241,243,247,.88) 100%)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.065)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  text-align:left;
  cursor:pointer;
  transition:transform var(--transicion),box-shadow var(--transicion),
             border-color var(--transicion);
}
.temas-grid .tema-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,113,227,.32)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.10)!important;
}

.temas-grid .tema-card h3{
  margin:0;
  color:var(--apple-ink,var(--texto))!important;
  font-size:var(--t-body);
  font-weight:650;
  letter-spacing:-.015em;
  text-transform:capitalize;
}
.temas-grid .tema-card p{
  margin:0;
  color:var(--apple-secondary,var(--texto-suave))!important;
  font-size:var(--t-micro);
  font-variant-numeric:tabular-nums;
}

/* El peso del tema: cinco tramos, un solo tono. La cifra escrita arriba ya
   dice cuánto hay; esto solo lo hace comparable de un vistazo entre tarjetas.
   Va pegado al fondo para que todas las barras queden a la misma altura por
   larga que sea la línea del título. */
.temas-grid .tema-card-barra{
  display:flex;
  gap:3px;
  margin-top:auto;
  padding-top:var(--e3);
}
.temas-grid .tema-card-barra span{
  flex:1;
  height:5px;
  border-radius:3px;
  background:var(--gris-100,#e9eaef);
}
.temas-grid .tema-card-barra span.lleno{
  background:var(--apple-blue,#0071e3)!important;
}

@media(max-width:640px){
  .temas-grid .tema-card{min-height:0;padding:15px!important;border-radius:18px!important;}
}