/* El aviso de la analítica, «Tú eliges» (20-10-2026): la B «Franja a lo ancho abajo» que eligió el usuario
   (docs/maquetas/analitica-2026-10-20/hoja.html), la franja marino del pie con su filo de oro. Solo se carga en las
   páginas que miden (_medicion.twig); lo de dentro es el de Fable Runner y Fable Match (medicion.js). */
.medicion [hidden] { display: none !important; }

/* Mientras se ve, la página deja libre al final lo que mide la franja, para que no tape el pie (medicion.js) */
.pagina { padding-bottom: var(--alto-aviso, 0px); }

.medicion-aviso { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; max-height: 100dvh; overflow: auto;
  padding: 18px 0 max(20px, env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(#123a8a, #0b2a6b 55%, var(--noche));
  box-shadow: 0 -5px 0 var(--aro), 0 -10px 0 var(--canto), 0 -20px 40px rgba(3, 12, 36, .45); }
.medicion-aviso .aviso-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; }
.medicion-aviso .titulo-aviso { margin: 0; padding: 9px 26px 13px; border-radius: 999px; white-space: nowrap; font: 400 32px/1 var(--f-disp); color: #fff;
  paint-order: stroke fill; -webkit-text-stroke: 6px #7a3d00; background: var(--oro-boton); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), 0 6px 0 #b25e00; }
.medicion-texto p { font-size: 16.5px; line-height: 1.5; color: #e6efff; }
.medicion-texto a { color: #ffe48a; text-underline-offset: 3px; }
.medicion-texto .medicion-estado:empty { display: none; }
.medicion-texto .medicion-estado { margin-top: 4px; font-size: 15px; color: #ffe48a; }

/* Los dos botones, del mismo tamaño: rechazar es tan fácil como aceptar */
.medicion-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.btn-aviso { flex: 1; min-width: 150px; padding: 11px 18px 14px; border: 0; border-radius: 999px; cursor: pointer; font: 400 21px/1.1 var(--f-disp); color: #fff;
  paint-order: stroke fill; -webkit-text-stroke: 4px var(--cobalto); background: linear-gradient(#6fb4ff, #3380ee 50%, #1f5ccc);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 0 0 3px #fff, 0 6px 0 3px #17459e, 0 12px 18px rgba(3, 12, 36, .3); }
.btn-aviso.si { -webkit-text-stroke-color: #7a3d00; background: var(--oro-boton);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 0 0 3px #fff, 0 6px 0 3px #b25e00, 0 12px 18px rgba(3, 12, 36, .3); }
.btn-aviso:focus-visible, .medicion-cerrar:focus-visible, .pie-cookies:focus-visible { outline: 3px solid #ffe48a; outline-offset: 4px; }
.medicion-cerrar { flex-basis: 100%; padding: 2px; border: 0; background: none; cursor: pointer; font: 800 15px/1.4 var(--f-texto); color: #cfe0ff; text-decoration: underline; }

/* «Preferencias de cookies», en la columna «Legal» del pie, como los demás enlaces */
.pie-col .pie-cookies { display: block; padding: 4px 0; border: 0; background: none; cursor: pointer; font: 800 15px/1.55 var(--f-texto); color: #cfe0ff; text-align: left; }

@media (max-width: 760px) {
  .medicion-aviso { padding-top: 16px; }
  .medicion-aviso .aviso-in { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; text-align: center; }
  .medicion-aviso .titulo-aviso { justify-self: center; font-size: 27px; padding: 7px 24px 11px; }
  .medicion-texto p { font-size: 15.5px; }
  .btn-aviso { min-width: 0; }
}