/* Banner de consentimiento de cookies.
   Usa las variables de style.css: si cambia la paleta del sitio, esto la sigue solo. */

.consenso{
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  background: var(--papel);
  /* Filete de 2px y nada de sombra. La sombra difusa que habia aca
     (0 -8px 32px) era la unica del sitio y salia en las 34 paginas: el resto
     del sistema separa con filetes de un pixel, no con desenfoque.
     Y la animacion de entrada tambien se fue: un aviso legal aparece, no se
     desliza. Era la ultima que quedaba despues de la vuelta del 3/9. */
  border-top: 2px solid var(--tinta-3);
  padding: calc(var(--u) * 3) var(--margen-der);
  font-family: var(--texto);
  color: var(--tinta-2);
}

.consenso[hidden]{ display: none; }

/* El banner recibe el foco al abrirse (consenso.js) para que el lector de pantalla
   lo anuncie entero en vez de leer directo "Aceptar todas". Como es un contenedor y
   no un control, no lleva anillo: el propio banner ya es la senal visual de que algo
   se abrio, y el anillo alrededor de toda la franja se lee como un error. Los
   botones de adentro conservan el suyo. */
.consenso:focus{ outline: none; }

.consenso__caja{
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  gap: calc(var(--u) * 2);
}

.consenso h2{
  font-family: var(--voz);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--tinta);
  margin: 0;
}

.consenso p{
  margin: 0;
  font-size: var(--t-nota);
  line-height: 1.55;
  max-width: var(--medida);
}

.consenso a{ color: var(--bronce); text-decoration: underline; }
.consenso a:hover{ color: var(--bronce-alt); }

.consenso__botones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--u);
}

/* Aceptar y rechazar tienen el MISMO peso visual: lo exige el Garante italiano. */
.consenso__btn{
  font: inherit;
  font-size: var(--t-nota);
  font-weight: 600;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  border-radius: 2px;
  cursor: pointer;
  min-height: 44px;
}
.consenso__btn:hover{ background: var(--tinta-2); border-color: var(--tinta-2); }
.consenso__btn--secundario{
  background: transparent;
  color: var(--tinta);
}
.consenso__btn--secundario:hover{ background: var(--papel-hond); }
.consenso__btn--texto{
  background: transparent;
  border-color: transparent;
  color: var(--tinta-3);
  text-decoration: underline;
  padding-inline: var(--u);
}
.consenso__btn--texto:hover{ color: var(--tinta); background: transparent; }

.consenso__btn:focus-visible,
.consenso__opcion input:focus-visible{
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.consenso__detalle{
  display: grid;
  gap: calc(var(--u) * 1.5);
  padding-top: var(--u);
  border-top: 1px solid var(--linea);
}
.consenso__detalle[hidden]{ display: none; }

.consenso__opcion{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(var(--u) * 1.5);
  align-items: start;
}
.consenso__opcion input{ margin-top: .3em; width: 18px; height: 18px; accent-color: var(--bronce); }
.consenso__opcion strong{ color: var(--tinta); font-size: var(--t-nota); }
.consenso__opcion span{ grid-column: 2; font-size: var(--t-micro); color: var(--tinta-3); line-height: 1.5; }

/* El enlace del pie para volver a abrir el banner. */
.consenso-reabrir{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 46rem){
  .consenso__caja{ grid-template-columns: 1fr auto; align-items: center; }
  /* Solo los hijos directos de la caja entran en las dos columnas: si no, el boton
     de guardar que vive dentro del detalle le abre una segunda columna al detalle. */
  .consenso__caja > .consenso__texto{ grid-column: 1; }
  .consenso__caja > .consenso__botones{ grid-column: 2; justify-content: flex-end; }
  .consenso__caja > .consenso__detalle{ grid-column: 1 / -1; }
  .consenso__detalle .consenso__botones{ justify-content: flex-end; }
}

/* ============================================================
   TELÉFONO — 4-9-2026 (auditoría móvil, tres auditores coincidieron)
   El banner tapaba entre la mitad y dos tercios de la primera pantalla
   de un teléfono, y encima la barra fija de WhatsApp. Un aviso legal
   tiene que verse, no ocupar la pantalla. Compacto por debajo de 900px:
   texto más corto de cuerpo, botones en una fila, y si abre
   "Personalizza" el panel scrollea dentro del banner en vez de salirse
   por arriba.
   ============================================================ */
@media (max-width:900px){
  .consenso{ padding:calc(var(--u)*2) var(--margen-der) calc(var(--u)*2);
    max-height:46vh; max-height:46svh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .consenso__caja{ gap:calc(var(--u)*1.5); }
  .consenso h2, .consenso .consenso__titulo{ font-size:1.05rem; margin-bottom:6px; }
  .consenso p{ font-size:.86rem; line-height:1.45; margin:0 0 10px; }
  .consenso__botones, .consenso__acciones{ display:flex; gap:8px; flex-wrap:wrap; }
  .consenso__btn{ flex:1 1 0; padding:11px 8px; font-size:.86rem; min-height:44px; }
  .consenso__btn--texto{ flex:0 0 auto; min-width:44px; }
}