/* 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[hidden]{display:none}
#jfd-banner:before{content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--jfd-acento),var(--jfd-acento-hover))}
#jfd-banner .jfd-banner-cuerpo{max-width:1120px;margin:0 auto;padding:22px 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-panel[hidden]{display:none}
#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[hidden]{display:none}
.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}

@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{padding:18px;gap:16px}
  #jfd-banner .jfd-acciones{width:100%}
  #jfd-banner .jfd-acciones .jfd-btn{flex:1 1 auto}
}
@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}