/* Banner de consentimiento.

   Tres decisiones defensivas, las tres aprendidas a golpes:

   1. Los valores de respaldo van en :root, no en el propio banner. Puestos en
      .jfcd-banner tapaban a los del sitio, porque una variable declarada mas cerca
      del elemento gana: el plugin se veia siempre gris hiciera lo que hiciera el
      administrador. Las del sitio se añaden despues, en linea, y ganan por orden.

   2. Los botones se pintan con #jfcd-banner y con !important. Este plugin corre
      sobre ocho temas distintos y casi todos dan estilo a "button" y a "a": sin
      esto, cada sitio pinta el banner a su manera y "Rechazar todas" puede acabar
      pareciendo menos disponible que "Aceptar todas". Que se vean iguales no es
      estetica, es lo que exige la ley.

   3. No hay una sola medida en rem. El rem lo fija el tema, no el banner: basta un
      html{font-size:62.5%} —el viejo truco de "1rem = 10px", que arrastran muchas
      plantillas— para que el banner salga diminuto sobre un sitio que se ve normal,
      o al reves. Los tamaños de letra van en em, relativos a los 15px que fija el
      propio banner; el espaciado va en px, para que no se componga al anidar. */
:root{
  --jfcd-acento:#1A1A1A; --jfcd-acento-texto:#fff; --jfcd-acento-hover:#333;
  --jfcd-acento-suave:#EFEFEF; --jfcd-boton-fondo:#fff; --jfcd-boton-tinta:#111;
  --jfcd-sombra:0 6px 20px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14);
}
.jfcd-banner,.jfcd-bloqueado{--jfcd-fondo:#fff;--jfcd-tinta:#16181C;
  --jfcd-suave:#5A6069;--jfcd-linea:#E4E6EA}
.jfcd-tema-oscuro.jfcd-banner,.jfcd-tema-oscuro.jfcd-bloqueado{
  --jfcd-fondo:#15171B;--jfcd-tinta:#F2F3F5;--jfcd-suave:#AEB4BD;--jfcd-linea:#2C3037}
@media (prefers-color-scheme:dark){
  .jfcd-tema-auto.jfcd-banner,.jfcd-tema-auto.jfcd-bloqueado{
    --jfcd-fondo:#15171B;--jfcd-tinta:#F2F3F5;--jfcd-suave:#AEB4BD;--jfcd-linea:#2C3037}
}

#jfcd-banner.jfcd-banner{position:fixed;left:0;right:0;bottom:0;z-index:999999;
  background:var(--jfcd-fondo);color:var(--jfcd-tinta);margin:0;
  border:0;border-top:1px solid var(--jfcd-linea);box-shadow:0 -10px 34px rgba(0,0,0,.16);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  max-height:92vh;overflow:auto}
#jfcd-banner:before{content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--jfcd-acento),var(--jfcd-acento-hover))}
/* El cuerpo, el comprobante y el panel comparten caja: mismo ancho maximo y mismo
   margen lateral. Son tres momentos del mismo banner, y si cada uno trae el suyo el
   texto se corre unos pixeles al pasar de uno a otro. En movil se veia. */
#jfcd-banner .jfcd-banner-cuerpo,
#jfcd-banner .jfcd-comprobante{max-width:1120px;margin:0 auto;padding:22px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap}
#jfcd-banner .jfcd-texto{flex:1 1 400px;min-width:0;display:flex;gap:14px;align-items:flex-start}
#jfcd-banner .jfcd-marca{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--jfcd-acento-suave);display:flex;align-items:center;justify-content:center;
  color:var(--jfcd-acento)}
#jfcd-banner h2{margin:0 0 5px;font-size:1.06em;font-weight:700;line-height:1.3;
  color:var(--jfcd-tinta);padding:0;letter-spacing:0;text-transform:none}
#jfcd-banner p{margin:0;color:var(--jfcd-suave);font-size:0.95em}
#jfcd-banner .jfcd-texto a{color:var(--jfcd-acento);text-decoration:underline}
#jfcd-banner .jfcd-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

#jfcd-banner .jfcd-btn{font:inherit;font-size:0.95em!important;font-weight:650!important;
  padding:11px 19px!important;border-radius:9px!important;border:2px solid transparent!important;
  cursor:pointer;line-height:1.2!important;text-transform:none!important;letter-spacing:0!important;
  width:auto!important;min-width:0!important;text-decoration:none!important;
  transition:background .15s ease,color .15s ease,transform .12s ease}
#jfcd-banner .jfcd-btn:active{transform:translateY(1px)}
/* Aceptar y rechazar comparten estilo exacto, a proposito. */
#jfcd-banner .jfcd-btn-primario{background:var(--jfcd-acento)!important;
  color:var(--jfcd-acento-texto)!important;border-color:var(--jfcd-acento)!important}
#jfcd-banner .jfcd-btn-primario:hover{background:var(--jfcd-acento-hover)!important;
  border-color:var(--jfcd-acento-hover)!important}
#jfcd-banner .jfcd-btn-secundario{background:transparent!important;color:var(--jfcd-tinta)!important;
  border-color:var(--jfcd-linea)!important}
#jfcd-banner .jfcd-btn-secundario:hover{background:var(--jfcd-acento-suave)!important;
  border-color:var(--jfcd-acento)!important}
#jfcd-banner .jfcd-btn:focus-visible{outline:3px solid var(--jfcd-acento);outline-offset:2px}

#jfcd-banner .jfcd-panel{max-width:1120px;margin:0 auto;padding:0 22px 22px;
  border-top:1px solid var(--jfcd-linea)}
#jfcd-banner .jfcd-cat{padding:15px 0;border-bottom:1px solid var(--jfcd-linea)}
#jfcd-banner .jfcd-cat label{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600}
#jfcd-banner .jfcd-cat input{accent-color:var(--jfcd-acento);width:17px;height:17px}
#jfcd-banner .jfcd-cat p{margin:6px 0 0 28px;font-size:0.9em}
#jfcd-banner .jfcd-siempre{font-size:0.78em;font-weight:500;
  background:var(--jfcd-acento-suave);color:var(--jfcd-acento);padding:2px 9px;border-radius:99px}

/* Icono flotante: un circulo sin contorno, con sombra, y el dibujo dentro.
   A la izquierda por defecto, porque los botones de WhatsApp suelen ir a la derecha. */
#jfcd-flotante.jfcd-flotante{position:fixed;bottom:20px;z-index:999998;
  width:54px!important;height:54px!important;border-radius:50%!important;
  border:0!important;padding:0!important;margin:0;cursor:pointer;
  background:var(--jfcd-boton-fondo)!important;color:var(--jfcd-acento)!important;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  box-shadow:var(--jfcd-sombra)!important;transition:transform .18s ease}
.jfcd-flotante--izquierda{left:20px;right:auto}
.jfcd-flotante--derecha{right:20px;left:auto}
#jfcd-flotante:hover{transform:translateY(-2px) scale(1.06)}
#jfcd-flotante:focus-visible{outline:3px solid var(--jfcd-acento);outline-offset:3px}
.jfcd-icono{display:block;pointer-events:none;max-width:none}

/* En movil manda una sola cosa: que todo empiece en la misma linea vertical.
   El titulo, el texto y los botones comparten un margen de 16px, y las tres partes
   del banner —cuerpo, comprobante y panel— lo comparten entre si. Antes solo el
   cuerpo tenia margen propio de movil: el comprobante y el panel se quedaban con el
   de escritorio y el texto saltaba unos pixeles al cambiar de uno a otro.

   El circulo con la galleta se retira: es decorativo —lleva aria-hidden, el lector
   de pantalla nunca lo ha nombrado— y en una pantalla de 360px se comia 56px de
   ancho por linea y dejaba el texto sangrado respecto de los botones. */
@media (max-width:600px){
  #jfcd-flotante.jfcd-flotante{width:48px!important;height:48px!important;bottom:16px}
  .jfcd-flotante--izquierda{left:14px} .jfcd-flotante--derecha{right:14px}
  #jfcd-banner .jfcd-banner-cuerpo,
  #jfcd-banner .jfcd-comprobante{padding:18px 16px;gap:16px}
  #jfcd-banner .jfcd-panel{padding:0 16px 18px}
  #jfcd-banner .jfcd-marca{display:none}
  /* Un boton por linea, todos del mismo ancho. Repartiendo la fila entre ellos manda
     el largo del texto: «Aceptar todas» se quedaba solo a todo el ancho y «Rechazar
     todas» debajo a la mitad, o cabian los dos pero al segundo se le partia la frase
     en dos lineas y quedaba mas alto que el primero. Que uno se vea distinto del otro
     no es un descuido estetico —la ley pide que rechazar sea tan facil como aceptar—,
     y dependiendo del largo de la palabra se rompe otra vez en cada traduccion. */
  #jfcd-banner .jfcd-acciones{width:100%;flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  #jfcd-flotante,#jfcd-banner .jfcd-btn{transition:none}
  #jfcd-flotante:hover{transform:none}
}

/* Marcador de contenido externo bloqueado */
.jfcd-bloqueado{position:relative;background:var(--jfcd-acento-suave);
  border:1px dashed var(--jfcd-acento);border-radius:12px;padding:26px;text-align:center;
  min-height:180px;display:flex;align-items:center;justify-content:center;
  color:var(--jfcd-tinta);font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.jfcd-bloqueado-aviso{max-width:512px}
.jfcd-bloqueado-aviso p{margin:5px 0 14px;color:var(--jfcd-suave);font-size:0.94em}

/* Comprobante: el codigo con que el visitante puede reclamar despues.
   Ocupa el mismo lugar que el cuerpo del banner, no una capa encima: la ley pide
   que la decision quede acreditada, no que se le celebre al visitante. */
#jfcd-banner .jfcd-comprobante-cuerpo{flex:1 1 400px;min-width:0;display:flex;gap:14px;align-items:flex-start}
#jfcd-banner .jfcd-codigo{margin:8px 0 0;font-size:1em}
/* El chip del codigo NO se pinta con el acento sobre su propio tono suave: con un
   acento claro eso baja a 2:1 de contraste, justo en el unico dato que el visitante
   tiene que poder copiar. Tinta del banner sobre un gris translucido, que se lee
   igual en el tema claro y en el oscuro. */
#jfcd-banner .jfcd-codigo strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.08em;letter-spacing:.06em;background:rgba(128,128,128,.18);color:var(--jfcd-tinta);
  border:1px solid var(--jfcd-linea);padding:4px 10px;border-radius:7px;user-select:all}
#jfcd-banner .jfcd-codigo-fecha{color:var(--jfcd-suave);font-size:0.88em;margin-left:9px}
#jfcd-banner .jfcd-eco{margin:14px 0 0;font-size:0.88em;color:var(--jfcd-suave)}
#jfcd-banner .jfcd-eco strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--jfcd-tinta);user-select:all}

/* TODO lo que lleva el atributo `hidden` se apaga aqui, en un solo sitio y con la
   fuerza suficiente. No es una redundancia: es el fallo que mas veces ha vuelto.

   El `[hidden]{display:none}` que trae el navegador es una regla de hoja de usuario,
   la mas debil que existe. Cualquier `display` que se declare aqui la tapa, y arriba
   se declaran cuatro: el banner, el cuerpo, el comprobante y el flotante son `flex`,
   escritos con un id delante. El resultado es que se ponia el atributo y no se ocultaba
   nada. Asi salia el comprobante —«Tu decision quedo registrada» con el recuadro del
   codigo vacio— encima del banner de bienvenida, sin que el visitante hubiera pulsado
   nada, porque el comprobante nace `hidden` en el HTML y ese `hidden` no valia.

   Con `!important` y no solo con mas peso, porque el otro que declara `display` sobre
   estos elementos es el tema del sitio, y son ocho temas distintos.

   Al añadir un elemento nuevo al banner NO hay que acordarse de darle su regla: el
   selector descendiente cubre todo lo que cuelgue de #jfcd-banner. */
#jfcd-banner[hidden],
#jfcd-banner [hidden],
#jfcd-flotante[hidden]{display:none!important}