/* Banner de consentimiento y panel de autorizaciones.

   Portado del plugin de WordPress. Se conservan sus dos decisiones defensivas,
   las dos aprendidas a golpes:

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

   2. Los botones se pintan con #jfd-banner y con !important. El mismo codigo corre
      sobre una portada estatica, sobre KumbiaPHP y sobre Laravel, y cada uno da
      estilo a "button" y a "a" a su manera: sin esto, "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. miinfo.cl declara html{font-size:62.5%} —el
      viejo truco de "1rem = 10px"— y el banner salia diminuto sobre un sitio que
      se ve normal. Los tamanos 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{
  --jfd-acento:#1A1A1A; --jfd-acento-texto:#fff; --jfd-acento-hover:#333;
  --jfd-acento-suave:#EFEFEF; --jfd-boton-fondo:#fff; --jfd-boton-tinta:#111;
  --jfd-sombra:0 6px 20px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14);
}
.jfd-banner,.jfd-bloqueado{--jfd-fondo:#fff;--jfd-tinta:#16181C;
  --jfd-suave:#5A6069;--jfd-linea:#E4E6EA}
.jfd-tema-oscuro.jfd-banner,.jfd-tema-oscuro.jfd-bloqueado{
  --jfd-fondo:#15171B;--jfd-tinta:#F2F3F5;--jfd-suave:#AEB4BD;--jfd-linea:#2C3037}
@media (prefers-color-scheme:dark){
  .jfd-tema-auto.jfd-banner,.jfd-tema-auto.jfd-bloqueado{
    --jfd-fondo:#15171B;--jfd-tinta:#F2F3F5;--jfd-suave:#AEB4BD;--jfd-linea:#2C3037}
}

#jfd-banner.jfd-banner{position:fixed;left:0;right:0;bottom:0;z-index:999999;
  background:var(--jfd-fondo);color:var(--jfd-tinta);margin:0;
  border:0;border-top:1px solid var(--jfd-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}
#jfd-banner:before{content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--jfd-acento),var(--jfd-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. */
#jfd-banner .jfd-banner-cuerpo,
#jfd-banner .jfd-comprobante{max-width:1120px;margin:0 auto;padding:22px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap}
#jfd-banner .jfd-texto{flex:1 1 400px;min-width:0;display:flex;gap:14px;align-items:flex-start}
#jfd-banner .jfd-marca{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--jfd-acento-suave);display:flex;align-items:center;justify-content:center;
  color:var(--jfd-acento)}
#jfd-banner h2{margin:0 0 5px;font-size:1.06em;font-weight:700;line-height:1.3;
  color:var(--jfd-tinta);padding:0;letter-spacing:0;text-transform:none}
#jfd-banner p{margin:0;color:var(--jfd-suave);font-size:0.95em}
#jfd-banner .jfd-texto a{color:var(--jfd-acento);text-decoration:underline}
#jfd-banner .jfd-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

#jfd-banner .jfd-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}
#jfd-banner .jfd-btn:active{transform:translateY(1px)}
/* Aceptar y rechazar comparten estilo exacto, a proposito. */
#jfd-banner .jfd-btn-primario{background:var(--jfd-acento)!important;
  color:var(--jfd-acento-texto)!important;border-color:var(--jfd-acento)!important}
#jfd-banner .jfd-btn-primario:hover{background:var(--jfd-acento-hover)!important;
  border-color:var(--jfd-acento-hover)!important}
#jfd-banner .jfd-btn-secundario{background:transparent!important;color:var(--jfd-tinta)!important;
  border-color:var(--jfd-linea)!important}
#jfd-banner .jfd-btn-secundario:hover{background:var(--jfd-acento-suave)!important;
  border-color:var(--jfd-acento)!important}
#jfd-banner .jfd-btn:focus-visible{outline:3px solid var(--jfd-acento);outline-offset:2px}

#jfd-banner .jfd-panel{max-width:1120px;margin:0 auto;padding:0 22px 22px;
  border-top:1px solid var(--jfd-linea)}
#jfd-banner .jfd-cat{padding:15px 0;border-bottom:1px solid var(--jfd-linea)}
#jfd-banner .jfd-cat label{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600}
#jfd-banner .jfd-cat input{accent-color:var(--jfd-acento);width:17px;height:17px}
#jfd-banner .jfd-cat p{margin:6px 0 0 28px;font-size:0.9em}
#jfd-banner .jfd-siempre{font-size:0.78em;font-weight:500;
  background:var(--jfd-acento-suave);color:var(--jfd-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. */
#jfd-flotante.jfd-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(--jfd-boton-fondo)!important;color:var(--jfd-acento)!important;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  box-shadow:var(--jfd-sombra)!important;transition:transform .18s ease}
.jfd-flotante--izquierda{left:20px;right:auto}
.jfd-flotante--derecha{right:20px;left:auto}
#jfd-flotante:hover{transform:translateY(-2px) scale(1.06)}
#jfd-flotante:focus-visible{outline:3px solid var(--jfd-acento);outline-offset:3px}
.jfd-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. El circulo con la
   galleta se retira: es decorativo —lleva aria-hidden— 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){
  #jfd-flotante.jfd-flotante{width:48px!important;height:48px!important;bottom:16px}
  .jfd-flotante--izquierda{left:14px} .jfd-flotante--derecha{right:14px}
  #jfd-banner .jfd-banner-cuerpo,
  #jfd-banner .jfd-comprobante{padding:18px 16px;gap:16px}
  #jfd-banner .jfd-panel{padding:0 16px 18px}
  #jfd-banner .jfd-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. */
  #jfd-banner .jfd-acciones{width:100%;flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  #jfd-flotante,#jfd-banner .jfd-btn{transition:none}
  #jfd-flotante:hover{transform:none}
}

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


/* -- Mis autorizaciones ----------------------------------------------------
   Vive dentro de la aplicacion, no flotando sobre ella: hereda el ancho del
   contenedor del sitio y solo pinta lo suyo. */
.jfd-autorizaciones{font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--jfd-tinta,#16181C);max-width:832px}
.jfd-autorizaciones h2{font-size:1.2em;margin:0 0 6px}
.jfd-autorizaciones h3{font-size:1em;margin:29px 0 8px}
.jfd-autorizaciones .jfd-cat{padding:14px 0;border-bottom:1px solid var(--jfd-linea,#E4E6EA)}
.jfd-autorizaciones .jfd-cat label{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600}
.jfd-autorizaciones .jfd-cat input{accent-color:var(--jfd-acento);width:17px;height:17px}
.jfd-autorizaciones .jfd-cat p{margin:5px 0 0 28px;font-size:0.92em;color:var(--jfd-suave,#5A6069)}
.jfd-autorizaciones .jfd-meta{font-size:0.84em}
.jfd-suave{color:var(--jfd-suave,#5A6069);font-size:0.92em}
.jfd-lista{margin:6px 0 0;padding-left:19px}
.jfd-lista li{margin:6px 0;font-size:0.92em}
.jfd-tabla{border-collapse:collapse;width:100%;font-size:0.88em;margin-top:6px}
.jfd-tabla th,.jfd-tabla td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--jfd-linea,#E4E6EA)}
.jfd-autorizaciones .jfd-acciones{margin-top:18px}
.jfd-autorizaciones .jfd-btn,.jfd-form .jfd-btn{font:inherit;font-size:0.95em;font-weight:650;
  padding:11px 19px;border-radius:9px;border:2px solid var(--jfd-acento);cursor:pointer;
  background:var(--jfd-acento);color:var(--jfd-acento-texto)}

/* Avisos de resultado: el color solo en el borde, para no gritar. */
.jfd-aviso{border-left:4px solid var(--jfd-acento);background:var(--jfd-acento-suave);
  padding:11px 16px;border-radius:0 8px 8px 0;margin:0 0 16px}
.jfd-aviso p{margin:0}
.jfd-aviso-ok{border-left-color:#1E7B34;background:#F1F8F2}
.jfd-aviso-error{border-left-color:#B32D2E;background:#FDF3F3}

/* Formulario de derechos */
.jfd-form{max-width:544px;font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.jfd-form input[type=text],.jfd-form input[type=email],.jfd-form select,.jfd-form textarea{
  width:100%;font:inherit;padding:8px 10px;border:1px solid var(--jfd-linea,#CDD2D9);border-radius:8px;
  background:#fff;color:#16181C}
.jfd-form small{color:var(--jfd-suave,#5A6069)}
.jfd-enlaces a{text-decoration:underline}

/* Comprobante: el codigo con que la persona 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 a nadie. */
#jfd-banner .jfd-comprobante-cuerpo{flex:1 1 400px;min-width:0;display:flex;gap:14px;align-items:flex-start}
#jfd-banner .jfd-codigo{margin:8px 0 0;font-size:1em}
/* El chip del codigo NO se pinta con el acento sobre su propio tono suave: con el
   verde de Mi Avance eso daba 2,05:1 de contraste, justo en el unico dato que la
   persona tiene que poder copiar. Va con la tinta del banner sobre un gris
   translucido, que se lee igual en el tema claro y en el oscuro. */
#jfd-banner .jfd-codigo strong,.jfd-codigo-linea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.08em;letter-spacing:.06em;background:rgba(128,128,128,.18);color:var(--jfd-tinta,#16181C);
  border:1px solid var(--jfd-linea,#E4E6EA);padding:4px 10px;border-radius:7px;user-select:all}
#jfd-banner .jfd-codigo-fecha{color:var(--jfd-suave);font-size:0.88em;margin-left:9px}
#jfd-banner .jfd-eco{margin:14px 0 0;font-size:0.88em;color:var(--jfd-suave)}
#jfd-banner .jfd-eco strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--jfd-tinta);user-select:all}
.jfd-tabla code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}

/* 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 #jfd-banner. */
#jfd-banner[hidden],
#jfd-banner [hidden],
#jfd-flotante[hidden]{display:none!important}