/* ══ Netebu · consentimiento de cookies ════════════════════════ */
.nb-ck{
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-violet:#7B5CF6; --nb-violet-aa:#6B48F2;
  --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85;
  --nb-line:#E9E4F3; --nb-line-2:#D8D0EC;
  --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE;
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
}

/* ── el aviso ─────────────────────────────────────────────────── */
/* VA ENCIMA DEL BOTON FLOTANTE, NO CENTRADO ABAJO. Los dos son la
   misma cosa —tu decision sobre las cookies— y asi se ve de donde sale
   el aviso y adonde vuelve al cerrarlo. Los 80 px de abajo son los 18
   del boton, mas sus 48 de alto, mas 14 de aire entre ambos: si se
   cambia el tamano del boton, hay que rehacer esta cuenta. */
.nb-ck-aviso{
  position:fixed; z-index:2147483000;
  right:18px; bottom:80px; left:auto; margin:0;
  max-width:420px;
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:18px;
  box-shadow:0 2px 6px rgba(20,17,31,0.06), 0 26px 60px -22px rgba(20,17,31,0.34);
  padding:22px 24px 20px;
  font-family:var(--nb-ff-b); color:var(--nb-ink-2);
  transform-origin:100% 100%;   /* crece desde la esquina del boton */
  animation:nb-ck-entra 0.34s cubic-bezier(0.2,0.7,0.3,1) both;
}
@keyframes nb-ck-entra{from{opacity:0; transform:translateY(12px) scale(0.98)} to{opacity:1; transform:none}}
.nb-ck-aviso h2{
  margin:0 0 9px !important; padding:0;
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.18rem !important; line-height:1.3;
  letter-spacing:-0.018em; color:var(--nb-ink) !important;
}
.nb-ck-aviso p{
  margin:0 0 16px !important; font-size:0.95rem; line-height:1.6;
  color:var(--nb-ink-2) !important;
}
.nb-ck-aviso a{color:var(--nb-violet-aa) !important; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(107,72,242,0.4)}

/* LOS DOS BOTONES, DEL MISMO TAMANO Y AL MISMO NIVEL. La guia de la
   AEPD pide que rechazar sea tan facil como aceptar: misma medida,
   misma jerarquia y ninguno escondido detras de un enlace. */
.nb-ck-botones{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.nb-ck-b{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 18px; border-radius:12px;
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.95rem;
  cursor:pointer; border:1.5px solid transparent; text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.nb-ck-b:hover{transform:translateY(-1px)}
.nb-ck-b--si{
  background:var(--nb-grad); color:#fff;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border:0; box-shadow:0 10px 24px -12px rgba(123,92,246,0.6);
}
.nb-ck-b--no{
  background:var(--nb-paper); color:var(--nb-ink);
  border-color:var(--nb-line-2);
}
.nb-ck-b--no:hover{border-color:var(--nb-violet)}
.nb-ck-b--txt{
  grid-column:1 / -1; background:none; border:0; min-height:38px;
  color:var(--nb-ink-3); font-size:0.9rem; text-decoration:underline;
  text-underline-offset:3px;
}
.nb-ck-b--txt:hover{color:var(--nb-violet-aa)}

/* ── el botón flotante, que no se va nunca ────────────────────── */
/* Es la forma de retirar el consentimiento en cualquier momento sin
   tener que buscarlo: la guia lo pide tan accesible como darlo. */
.nb-ck-flotante{
  position:fixed; z-index:2147482000;
  right:18px; bottom:18px;
  width:48px; height:48px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--nb-paper); color:var(--nb-violet-aa);
  border:1px solid var(--nb-line); cursor:pointer;
  /* Sombra teñida de violeta ya en reposo, igual que el botón de subir
     de `netebu_subir.php`. Los dos flotan en las esquinas de abajo y se
     ven a la vez: si uno lleva sombra gris y el otro violeta, se nota. */
  box-shadow:0 2px 6px rgba(123,92,246,0.10), 0 14px 30px -14px rgba(123,92,246,0.26);
  transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.nb-ck-flotante:hover{
  transform:translateY(-3px); border-color:var(--nb-violet);
  box-shadow:0 4px 10px rgba(20,17,31,0.1), 0 20px 40px -16px rgba(90,60,200,0.44);
}
/* EL BADGE DE reCAPTCHA VIVE EN LA MISMA ESQUINA. Google lo fija en
   `bottom:14px` con 60 px de alto y lo deja colapsado contra el borde
   derecho (`right:-186px`), justo donde cae este boton: medido, 48x48
   px de solape exacto, uno encima del otro.
   Se sube el NUESTRO, no el suyo: moverle el badge a Google entra en
   sus condiciones de uso, que exigen que quede visible.
   Con `:has()` solo se sube donde el badge existe —contacto y abrir
   ticket—, y en el resto del sitio el boton se queda donde estaba. Si
   el navegador no soporta `:has()` (Chrome 105-, Safari 15.3-) se
   queda como hasta ahora, que es el comportamiento de hoy: no rompe
   nada, simplemente no mejora. */
body:has(.grecaptcha-badge) .nb-ck-flotante{ bottom:88px }
.nb-ck-flotante svg{width:21px; height:21px}
/* la etiqueta aparece al pasar el ratón, sin ocupar sitio en reposo */
.nb-ck-flotante::after{
  content:attr(data-txt); position:absolute; right:58px;
  white-space:nowrap; background:var(--nb-ink); color:#fff;
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.8rem;
  padding:7px 11px; border-radius:9px;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.nb-ck-flotante:hover::after,
.nb-ck-flotante:focus-visible::after{opacity:1; transform:none}

/* ── el panel de preferencias ─────────────────────────────────── */
.nb-ck-fondo{
  position:fixed; inset:0; z-index:2147483100;
  background:rgba(11,10,22,0.58); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:nb-ck-fade 0.24s ease both;
}
@keyframes nb-ck-fade{from{opacity:0} to{opacity:1}}
.nb-ck-panel{
  background:var(--nb-paper); border-radius:20px;
  border:1px solid var(--nb-line);
  box-shadow:0 30px 70px -24px rgba(0,0,0,0.5);
  width:100%; max-width:520px; max-height:86vh; overflow-y:auto;
  padding:26px 26px 22px; font-family:var(--nb-ff-b);
}
.nb-ck-panel h2{
  margin:0 0 6px !important; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important; font-size:1.3rem !important;
  color:var(--nb-ink) !important; letter-spacing:-0.02em;
}
.nb-ck-panel > p{
  margin:0 0 18px !important; font-size:0.94rem; line-height:1.6;
  color:var(--nb-ink-2) !important;
}
.nb-ck-cat{
  border:1px solid var(--nb-line); border-radius:14px;
  padding:16px 18px; margin:0 0 11px;
  background:var(--nb-paper-2);
}
.nb-ck-cat-cab{display:flex; align-items:center; justify-content:space-between; gap:14px}
.nb-ck-cat h3{
  margin:0 !important; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important; font-size:1rem !important;
  color:var(--nb-ink) !important;
}
.nb-ck-cat p{
  margin:8px 0 0 !important; font-size:0.88rem; line-height:1.55;
  color:var(--nb-ink-2) !important;
}
.nb-ck-cat code{
  font-size:0.82rem; background:rgba(123,92,246,0.09);
  color:var(--nb-violet-aa); padding:1px 6px; border-radius:5px;
}
/* el interruptor */
.nb-ck-sw{position:relative; flex:0 0 auto; width:46px; height:26px}
.nb-ck-sw input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2}
.nb-ck-sw span{
  position:absolute; inset:0; border-radius:999px;
  background:#D8D0EC; transition:background 0.24s ease;
}
.nb-ck-sw span::before{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.24);
  transition:transform 0.24s cubic-bezier(0.2,0.7,0.3,1);
}
.nb-ck-sw input:checked + span{background:var(--nb-violet)}
.nb-ck-sw input:checked + span::before{transform:translateX(20px)}
.nb-ck-sw input:focus-visible + span{outline:2px solid var(--nb-violet-aa); outline-offset:2px}
.nb-ck-sw input:disabled + span{background:var(--nb-violet); opacity:0.45; cursor:not-allowed}
.nb-ck-panel-pie{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
.nb-ck-panel-pie .nb-ck-b{width:100%}
.nb-ck-guardar{grid-column:1 / -1}

@media (max-width:520px){
  /* 12 del boton + 48 de alto + 12 de aire */
  .nb-ck-aviso{
    left:12px; right:12px; bottom:72px; max-width:none;
    padding:16px 16px 14px;
  }

  /* EL AVISO OCUPABA EL 44 % DE UN iPHONE: 373 px de 844, medido en un
     390x844. Tapaba el titular entero de la portada y dejaba la pagina
     inservible hasta responderlo, que es justo lo que la guia de la
     AEPD pide evitar —el aviso informa, no secuestra la pantalla—.
     De donde salian esos 373 px: tres botones apilados a 58 px cada
     uno son 174, mas el parrafo a cinco lineas.
     Se recorta sin quitar ni una palabra ni una opcion. */

  /* Rechazar y aceptar, en fila y del MISMO ancho. Ahorra 116 px y
     ademas deja las dos decisiones a la misma altura y con el mismo
     tamano, que es como tiene que ser: rechazar no puede costar mas
     que aceptar. */
  .nb-ck-botones{grid-template-columns:1fr 1fr; gap:8px}
  .nb-ck-botones .nb-ck-b{padding:11px 10px; font-size:0.9rem}
  /* «Elegir que acepto» no es una tercera decision al mismo nivel:
     es el camino largo. Ocupa su propia linea, sin caja. */
  .nb-ck-botones .nb-ck-b--txt{grid-column:1 / -1; padding:4px 0 0}

  .nb-ck-aviso h2{font-size:1.06rem !important; margin-bottom:6px !important}
  .nb-ck-aviso p{font-size:0.9rem; line-height:1.5; margin-bottom:12px !important}

  .nb-ck-panel-pie{grid-template-columns:1fr}
  .nb-ck-flotante{right:12px; bottom:12px}
}

/* Pantallas cortas —un iPhone SE son 667 px, y en horizontal cualquier
   movil baja de 500—: ahi el aviso no puede pasar de un tercio. */
@media (max-width:520px) and (max-height:700px){
  .nb-ck-aviso{padding:14px 14px 12px}
  .nb-ck-aviso p{font-size:0.86rem; line-height:1.45; margin-bottom:10px !important}
}
@media (prefers-reduced-motion:reduce){
  .nb-ck-aviso, .nb-ck-fondo{animation:none}
  .nb-ck-b, .nb-ck-flotante, .nb-ck-sw span, .nb-ck-sw span::before{transition:none}
  .nb-ck-b:hover, .nb-ck-flotante:hover{transform:none}
}