/* =====================================================================
   OpoReal · Cookies · el banner
   =====================================================================
   Prefijo `opr-ck-`. Registro de prefijos en el documento 02.

   Es una barra abajo, no una cortina que tape la página. Tapar la web entera
   para pedir permiso es lo que hace que la gente acepte por quitárselo de
   encima, y un consentimiento arrancado así no vale de nada.
   ===================================================================== */
.opr-ck.opr-ck-capa{
  position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:9998 !important;
  padding:clamp(12px,2vw,20px) !important;
  display:flex !important; justify-content:center !important;
  pointer-events:none !important;
}
.opr-ck .opr-ck-caja{
  pointer-events:auto !important;
  width:100% !important; max-width:940px !important;
  background:var(--superficie) !important;
  border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important;
  box-shadow:0 18px 44px rgba(16,22,29,.16), 0 2px 8px rgba(16,22,29,.08) !important;
  padding:clamp(18px,2.2vw,24px) !important;
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important;
  gap:clamp(16px,2.4vw,28px) !important; align-items:center !important;
}
.opr-ck .opr-ck-titulo{
  font-size:1rem !important; font-weight:800 !important; letter-spacing:-.014em !important;
  color:var(--tinta) !important; margin-bottom:6px !important;
}
.opr-ck .opr-ck-texto p{
  font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important;
  max-width:62ch !important; text-wrap:pretty !important;
}
.opr-ck .opr-ck-texto strong{color:var(--tinta) !important; font-weight:600 !important}
.opr-ck .opr-ck-enlaces{display:flex !important; flex-wrap:wrap !important; gap:16px !important; margin-top:8px !important}
.opr-ck .opr-ck-enlaces a{
  font-size:.8125rem !important; color:var(--tenue) !important; text-decoration:underline !important;
  text-underline-offset:3px !important;
}
.opr-ck .opr-ck-enlaces a:hover{color:var(--tinta) !important}


/* --- los botones --- */
.opr-ck .opr-ck-botones{display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important}
.opr-ck .opr-ck-botones .opr-btn{min-height:44px !important; padding:11px 22px !important; white-space:nowrap !important}
.opr-ck .opr-ck-ajustes-abrir{
  min-height:44px !important; padding:11px 14px !important;
  font-size:.875rem !important; font-weight:600 !important; color:var(--tenue) !important;
  background:transparent !important; border:0 !important; cursor:pointer !important;
  text-decoration:underline !important; text-underline-offset:3px !important;
}
.opr-ck .opr-ck-ajustes-abrir:hover{color:var(--tinta) !important}


/* --- el detalle --- */
.opr-ck .opr-ck-panel{
  grid-column:1 / -1 !important;
  border-top:1px solid var(--borde) !important; padding-top:16px !important; margin-top:2px !important;
  display:grid !important; gap:14px !important;
}
.opr-ck .opr-ck-fila{
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important;
  gap:16px !important; align-items:start !important;
}
.opr-ck .opr-ck-fila b{
  display:block !important; font-size:.9375rem !important; font-weight:700 !important;
  letter-spacing:-.008em !important; color:var(--tinta) !important; margin-bottom:3px !important;
}
.opr-ck .opr-ck-fila span{
  display:block !important; font-size:.8125rem !important; line-height:1.5 !important; color:var(--tenue) !important;
  max-width:66ch !important;
}
.opr-ck .opr-ck-siempre{
  font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important;
  padding:7px 12px !important; border-radius:999px !important; background:var(--p100) !important;
  white-space:nowrap !important;
}


/* El interruptor. Sin colorines: encendido es tinta, apagado es gris. El verde
   de este sistema significa «acierto», no «activado». */
/* La caja mide 44 px de alto aunque el carril se vea de 27: lo que se pulsa
   con el dedo es la caja, y 27 px es un objetivo demasiado pequeño. */
.opr-ck .opr-ck-interruptor{position:relative !important; display:block !important; width:46px !important; height:44px !important; flex:0 0 auto !important}
.opr-ck .opr-ck-interruptor input{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  margin:0 !important; opacity:0 !important; cursor:pointer !important; z-index:2 !important;
}
.opr-ck .opr-ck-interruptor span{
  position:absolute !important; left:0 !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important;
  height:27px !important; border-radius:999px !important;
  background:var(--p300) !important; transition:background .16s !important;
}
.opr-ck .opr-ck-interruptor span::after{
  content:'' !important; position:absolute !important; top:3px !important; left:3px !important;
  width:21px !important; height:21px !important; border-radius:50% !important;
  background:var(--superficie) !important; box-shadow:0 1px 3px rgba(16,22,29,.28) !important;
  transition:transform .16s !important;
}
.opr-ck .opr-ck-interruptor input:checked + span{background:var(--tinta) !important}
.opr-ck .opr-ck-interruptor input:checked + span::after{transform:translateX(19px) !important}
.opr-ck .opr-ck-interruptor input:focus-visible + span{
  outline:2px solid var(--tinta) !important; outline-offset:2px !important;
}
.opr-ck .opr-ck-panel-pie{display:flex !important; justify-content:flex-end !important}
.opr-ck .opr-ck-panel-pie .opr-btn{min-height:44px !important}


/* --- el enlace del pie, que pone el JavaScript --- */
.opr-ck-reabrir{
  font:inherit !important; color:inherit !important; background:transparent !important; border:0 !important;
  padding:0 !important; cursor:pointer !important; text-decoration:underline !important; text-underline-offset:3px !important;
}
@media (max-width:860px){
.opr-ck .opr-ck-caja{grid-template-columns:1fr !important; gap:16px !important}
.opr-ck .opr-ck-botones{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important}

  /* «Ajustes» ocupa la fila entera debajo: en un móvil, tres botones en una
     línea salen a 90 px y se pulsa el que no es. */
.opr-ck .opr-ck-ajustes-abrir{grid-column:1 / -1 !important}
.opr-ck .opr-ck-fila{grid-template-columns:minmax(0,1fr) auto !important}
}



/* =====================================================================
   Y AL FINAL, LO QUE HACE QUE `hidden` SIRVA DE ALGO
   =====================================================================
   Es la trampa n.º 4 del documento 02, y aquí mordió DOS veces. El atributo
   `[hidden]` del navegador vale display none con peso (0,1,0). Las reglas de
   la capa y del panel pesan (0,2,0) y van blindadas: ganaban ellas, así que ni
   el banner se cerraba ni el detalle empezaba plegado.

   No se veía en el arnés porque el arnés preguntaba por el ATRIBUTO —que sí
   estaba puesto— en vez de por lo que se pinta. Se vio en una captura. Desde
   hoy el arnés mira el display calculado.

   Con la clase delante del atributo, (0,3,0), gana `hidden`. Y va al final del
   fichero por si algún día se empatara.

   OJO: aquí NO se escriben llaves dentro de un comentario. El empaquetador
   busca bloques por llaves y se come el comentario entero. Costó una hora.
   `build.py` ahora se para si encuentra una.
   ===================================================================== */
.opr-ck.opr-ck-capa[hidden]{display:none !important}
.opr-ck .opr-ck-panel[hidden]{display:none !important}