/* Pie con foto de las tarjetas del catálogo: una sola pieza para las dos.

   La tarjeta de categoría (css/tarjeta-categoria.css, .pc-cat__franja) y la de
   especialidad (css/tarjeta-subcategoria.css, .sc-card__pie) tienen su propia
   silueta —una lleva la onda y la otra una banda recta—, pero el pie se comporta
   igual en las dos: es una franja con su fondo de siempre y, cuando el
   administrador sube una imagen en «Fondo del pie de la tarjeta», esa imagen la
   cubre entera y el número, el nombre y el botón se dibujan encima en HTML.
   Estas reglas son ese comportamiento común; cada hoja solo añade lo suyo.

   Por qué existe este archivo (2026-10-23): las dos hojas resolvían lo mismo por
   caminos distintos y las dos apagaban la foto subida. La de categoría pintaba su
   onda encima al 42 % de opacidad; la de especialidad, un degradado azul de hasta
   el 50 %. En las dos la foto llegaba lavada, y arreglar una no arreglaba la otra.

   La regla ahora es una: NINGUNA capa tiñe la foto, y el texto va blanco, sin
   sombra (2026-10-26). Nada de filtros, escala de grises, mezclas ni opacidad
   sobre la imagen.

   Lo cargan las páginas que dibujan estas tarjetas: el inicio, /category/, el
   listado de cada categoría y las dos vistas previas del admin. */

/* La imagen del pie: cubre la franja entera y conserva sus colores. */
.fc-pie-foto{
  position:absolute;z-index:1;inset:0;
  display:block;width:100%;max-width:none;height:100%;
  object-fit:cover;object-position:50% 50%;
  /* Explícito a propósito: aquí es donde antes se apagaba la foto. */
  filter:none;opacity:1;mix-blend-mode:normal}

/* Nada se pinta encima de la foto: ni sobre toda la franja ni detrás de cada
   texto. Hubo las dos cosas y las dos se quitaron. Primero un degradado que
   cruzaba la franja entera —con un arte oscuro no se notaba, pero sobre las
   fotos claras del catálogo legal (232 de luminancia media donde va el texto)
   la franja se veía gris—. Después, platos pequeños detrás de cada pieza, que
   resolvían el contraste pero dejaban recuadros grises sobre la fotografía.

   Las letras tampoco llevan sombra (2026-10-26, pedido del usuario): hubo
   text-shadow y drop-shadow oscuros sobre el número, el nombre, la bajada y el
   botón, y se quitaron para que el texto quede blanco, plano y nítido. El
   número y el botón conservan el vidrio que les da su propia hoja.

   Lo que esto cuesta, para que quede dicho: sobre una foto muy clara el blanco
   se lee solo por contraste de color. Si alguna imagen del admin no deja leer
   su pie, el remedio es esa imagen —más oscura o con la izquierda tranquila—,
   no una capa encima. */
.fc-pie--con-foto{
  /* El texto secundario sube de tono sobre una foto: el azul grisáceo que lleva
     sobre la franja lisa se pierde contra cualquier imagen con luz. Las dos
     hojas lo leen de aquí y traen ese azul como valor por defecto. */
  --fc-pie-bajada:#eef4ff}

/* ---------- Con foto: el pie se compone en vidrio, no en placas ----------
   Lo de antes eran dos extremos: primero una capa sobre toda la franja, después
   platos opacos detrás de cada texto. Aquí cada zona lleva su propio vidrio muy
   transparente y desenfocado: la fotografía se sigue viendo a través de las tres
   —basta mirar el pie para distinguir lo que hay detrás— y el texto se apoya en
   ellas. Nada se pinta de lado a lado.

   Todo cuelga de .fc-pie--con-foto: sin imagen del admin, el pie es el de
   siempre y ninguna de estas reglas existe. */

/* El número: su propio vidrio azul y su filo claro, en su caja de siempre. */
.fc-pie--con-foto .sc-card__numero{
  background:rgba(var(--fcp-numero-fondo-rgb,var(--fcp-boton-rgb,10,52,130)),var(--fcp-numero-fondo-alpha,var(--fcp-numero-fondo-alpha-defecto,var(--fcp-boton-alpha,.34))));
  border-color:var(--fcp-numero-borde-color,rgba(255,255,255,.58));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* El nombre y su bajada no llevan fondo ni sombra: debajo queda la fotografía
   entera. El filo de la izquierda los separa del número: va en un
   pseudo-elemento para no añadir ninguna columna a la grilla del pie, que está
   congelada (.sc-card__texto es position:relative en su hoja). */
.fc-pie--con-foto .sc-card__texto::before{
  content:"";position:absolute;left:calc(-13*var(--r));top:50%;
  width:1px;height:58%;transform:translateY(-50%);
  background:var(--fcp-separador-color,rgba(255,255,255,.55));
  /* Su propio filo oscuro: un pelo blanco sobre una foto clara no se ve. */
  box-shadow:0 0 0 .5px rgba(2,14,46,.38)}

/* El botón, su píldora de vidrio azul: sigue siendo un botón y deja ver la foto. */
.fc-pie--con-foto .sc-card__boton{
  background:rgba(var(--fcp-boton-fondo-rgb,var(--fcp-boton-rgb,10,62,165)),var(--fcp-boton-fondo-alpha,var(--fcp-boton-fondo-alpha-defecto,var(--fcp-boton-alpha,.4))));
  border-color:var(--fcp-boton-borde-color,rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}

/* ---------- Hover: gana cuerpo, no blanco ----------
   La hoja de la tarjeta vuelve el botón blanco sólido al pasar el mouse
   (css/tarjeta-subcategoria.css): sobre la franja azul lisa funciona, pero sobre
   una foto clara el pie entero se lavaba y el texto desaparecía. Con foto, el
   vidrio se cierra un punto, el filo se aclara y el botón sube un píxel.
   Si el admin eligió fondo o borde (-hover-foto, apps/category/models.py,
   DERIVADAS_PIE), el hover los conserva tal cual: un 0 % sigue invisible. */
.sc-card:is(:hover,:focus-visible) .fc-pie--con-foto .sc-card__boton,
.sc-card:is(:hover,:focus-visible) .sc-card__pie.fc-pie--con-foto .sc-card__boton{
  background:var(--fcp-boton-fondo-hover-foto,rgba(var(--fcp-boton-rgb,8,56,155),calc(var(--fcp-boton-alpha,.4) + .22)));
  border-color:var(--fcp-boton-borde-hover-foto,rgba(255,255,255,.85));color:var(--fcp-boton-texto,#fff);
  transform:translateY(-1px);box-shadow:0 3px 10px rgba(2,14,46,.35)}
.sc-card:is(:hover,:focus-visible) .fc-pie--con-foto .sc-card__numero{
  background:var(--fcp-numero-fondo-hover-foto,rgba(var(--fcp-boton-rgb,10,52,130),calc(var(--fcp-boton-alpha,.34) + .12)));
  border-color:var(--fcp-numero-borde-hover-foto,rgba(255,255,255,.7))}