/* Nexioma · aviso de cookies de la primera visita y panel «Configurar cookies» (consent.js), en el color de cada página.
   Asset del contrato público (public-contract/ecosystem-shell.v1.json, brand.assets, revisión 2026-10-27.2): se copia byte
   a byte con su sha256, junto a consent.js, que no cambia. El aviso sale en la primera página de Nexioma que se abre, sea
   cual sea (web de empresa, Nexioma Federated, Nexioma Synthetic Lab, la landing de Nexioma Clinics o Nexioma Academy), y
   toma el mundo de esa página con estas variables, que cada sitio (o cada página) define en su propia hoja, en el body o en
   un antepasado del aviso y del <dialog>. Sin ellas, se ve en la casa (tinta), con los tokens de pulso.css:
     --consent-ground             fondo del aviso y del panel                     (var(--panel))
     --consent-text               título, enlaces, nombres de categoría          (var(--text))
     --consent-text-2             texto, estado guardado                          (var(--text-2))
     --consent-text-3             estados («Siempre activas»), interruptor apagado (var(--text-3))
     --consent-rule               anillo del aviso y del panel, separadores      (var(--rule))
     --consent-shadow             sombra de capa flotante                         (0 24px 60px rgba(0, 0, 0, .5))
     --consent-backdrop           fondo de detrás del panel abierto               (rgba(7, 9, 11, .72))
     --consent-button-ring        anillo de «Aceptar», «Rechazar» y «Configurar» (rgba(214, 228, 232, .3))
     --consent-button-ring-hover  el mismo anillo al pasar el puntero             (var(--consent-text-2))
     --consent-switch-on          interruptor encendido                           (var(--consent-text))
     --consent-switch-knob        mando del interruptor encendido                 (var(--void))
     --consent-focus              anillo de foco dentro del aviso y del panel     (var(--research), el foco de la casa)
   Solo cambian los colores: la disposición, el tamaño, que las tres acciones sean el mismo botón (ninguna destaca), el
   orden del foco y el comportamiento son los mismos en todos los sitios. «Guardar preferencias» y «Cerrar» son el .btn y el
   .btn--ghost del sitio. Sin animación ni transición: el aviso y los interruptores cambian al instante.

   Panel de configuración: un <dialog> nativo, un panel como el menú móvil (fondo, anillo y sombra de capa flotante) con
   interruptores. Encendido es la inversión del mundo (--consent-switch-on con el mando en --consent-switch-knob), como el
   botón principal; apagado, un anillo --consent-text-3 con el mando del mismo color. Desactivados (siempre activas o «No
   usamos»), a media opacidad. El panel recorta (overflow: hidden) y lo que se desplaza es su contenido, .ck__box: así la
   barra de desplazamiento clásica (Windows, Linux) queda dentro de las esquinas redondeadas en vez de cuadrarlas. */
.ck {
  --ck-max: calc(100dvh - 2 * var(--gutter));
  width: min(560px, calc(100% - 2 * var(--gutter))); max-width: none; max-height: var(--ck-max);
  margin: auto; padding: 0; border: 0; border-radius: 24px; overflow: hidden;
  background: var(--consent-ground, var(--panel)); color: var(--consent-text, var(--text)); box-shadow: 0 0 0 1px var(--consent-rule, var(--rule)), var(--consent-shadow, 0 24px 60px rgba(0, 0, 0, .5));
}
.ck::backdrop { background: var(--consent-backdrop, rgba(7, 9, 11, .72)); }
.cn :focus-visible, .ck :focus-visible { outline-color: var(--consent-focus, var(--research)); }
/* Con el panel abierto, la página de detrás no se desplaza; el hueco de la barra se conserva para que nada salte. */
html:has(.ck[open]) { overflow: hidden; scrollbar-gutter: stable; }
.ck__box {
  display: grid; gap: 18px; max-height: var(--ck-max); padding: clamp(24px, 4vw, 36px); overflow: auto; overscroll-behavior: contain;
  scroll-padding-block: clamp(24px, 4vw, 36px); /* la confirmación se deja a la vista con el margen del panel */
  scrollbar-width: thin; scrollbar-color: var(--consent-text-3, var(--text-3)) transparent;
}
.ck h2 { font-size: var(--t-l); line-height: 1.2; }
.ck__intro { color: var(--consent-text-2, var(--text-2)); font-size: var(--t-s); line-height: 1.5; }
.ck__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--consent-rule, var(--rule)); }
.ck__cat { display: grid; gap: 6px; padding-block: 16px; border-bottom: 1px solid var(--consent-rule, var(--rule)); }
.ck__row { display: flex; align-items: center; gap: 12px; }
.ck__name { margin-right: auto; font-size: var(--t-s); font-weight: 500; }
.ck__name:has(+ .ck__switch:not(:disabled)) { cursor: pointer; }
.ck__state { color: var(--consent-text-3, var(--text-3)); font-size: var(--t-xs); text-align: end; }
.ck__text { max-width: 34em; color: var(--consent-text-2, var(--text-2)); font-size: var(--t-xs); line-height: 1.55; }
.ck__text code { font: inherit; color: var(--consent-text, var(--text)); white-space: nowrap; }
.ck__switch {
  appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0;
  border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--consent-text-3, var(--text-3)); cursor: pointer;
}
.ck__switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--consent-text-3, var(--text-3)); }
.ck__switch:checked { background: var(--consent-switch-on, var(--consent-text, var(--text))); box-shadow: none; }
.ck__switch:checked::before { left: 22px; background: var(--consent-switch-knob, var(--void)); }
.ck__switch:disabled { opacity: .45; cursor: not-allowed; }
.ck__more { justify-self: start; }
.ck__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* La confirmación aparece junto a «Guardar preferencias», donde sigue el foco; vacía, no ocupa alto. */
.ck__status { flex: 1 1 12em; min-width: 0; color: var(--consent-text-2, var(--text-2)); font-size: var(--t-xs); line-height: 1.45; }
.ck__date { white-space: nowrap; }
@media (forced-colors: active) {
  .ck { border: 1px solid CanvasText; }
  .ck__switch { border: 1px solid CanvasText; }
  .ck__switch::before { background: CanvasText; }
  .ck__switch:checked { background: Highlight; }
  .ck__switch:checked::before { background: HighlightText; }
  .ck__switch:disabled { opacity: 1; border-color: GrayText; }
  .ck__switch:disabled::before { background: GrayText; }
}

/* Aviso de la primera visita (fundadores, 27 de octubre de 2026). Una tarjeta fija al pie de la pantalla, como el panel de
   cookies (fondo, anillo y sombra de capa flotante), que no tapa la página entera: en el escritorio, el texto a la
   izquierda y las tres acciones en fila a la derecha; por debajo de 52rem, una columna con las tres acciones debajo, en
   fila y del mismo ancho (a 320 px, con la letra del texto); solo por debajo de 20rem (una letra del navegador mayor,
   porque los rem crecen con ella), una debajo de otra. Las tres son el mismo botón: ninguna destaca sobre las demás. Nunca
   pasa por debajo de la cabecera: si no cabe (pantallas bajas, zoom del 400 %), el texto se desplaza dentro de la tarjeta
   y las acciones siguen a la vista; en pantallas bajas (móvil apaisado, zoom) es más compacta. Mientras se ve
   (html.consent-pending), la página deja al final el hueco que ocupa (--consent-space, medido por consent.js) y el foco
   nunca queda debajo (scroll-padding-bottom). Sin animación: aparece y desaparece al instante. */
.cn {
  --cn-bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  --cn-max: calc(100vh - var(--head-h) - env(safe-area-inset-top, 0px) - 16px - var(--cn-bottom));
  position: fixed; z-index: 35; left: var(--gutter); right: var(--gutter); bottom: var(--cn-bottom);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 14px 32px;
  max-width: 64rem; max-height: var(--cn-max); margin-inline: auto; padding: 18px 18px 18px 24px;
  border-radius: 20px; background: var(--consent-ground, var(--panel)); color: var(--consent-text, var(--text)); box-shadow: 0 0 0 1px var(--consent-rule, var(--rule)), var(--consent-shadow, 0 24px 60px rgba(0, 0, 0, .5));
}
@supports (height: 100dvh) { .cn { --cn-max: calc(100dvh - var(--head-h) - env(safe-area-inset-top, 0px) - 16px - var(--cn-bottom)); } }
.cn[hidden] { display: none; }
/* Lo que se desplaza es el texto, que ocupa su fila entera (desde arriba: centrado, lo que no cabe quedaría fuera del
   alcance del desplazamiento); el margen interior, compensado fuera, deja sitio al anillo de foco del enlace. */
.cn__copy {
  display: grid; align-self: stretch; align-content: start; gap: 4px; min-width: 0; min-height: 0; margin: -6px; padding: 6px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--consent-text-3, var(--text-3)) transparent;
}
.cn__title { font-size: var(--t-s); font-weight: 500; line-height: 1.35; }
.cn__text { max-width: 42em; color: var(--consent-text-2, var(--text-2)); font-size: var(--t-xs); line-height: 1.5; }
.cn__more { color: var(--consent-text, var(--text)); text-underline-offset: 2px; white-space: nowrap; }
:lang(ja) .cn__text { word-break: auto-phrase; }
.cn__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cn .cn__btn { min-height: 44px; padding: 0 18px; background: transparent; color: var(--consent-text, var(--text)); box-shadow: inset 0 0 0 1px var(--consent-button-ring, rgba(214, 228, 232, .3)); }
.cn .cn__btn:hover { box-shadow: inset 0 0 0 1px var(--consent-button-ring-hover, var(--consent-text-2, var(--text-2))); }
html.consent-pending { scroll-padding-bottom: calc(var(--consent-space, 0px) + 16px); }
html.consent-pending body { padding-bottom: var(--consent-space, 0px); }
@media (max-width: 52rem) {
  .cn { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 16px; border-radius: 18px; }
  .cn .cn__btn { padding: 0 10px; }
}
/* En el móvil, una hoja pegada al borde inferior, a todo el ancho: el texto gana una línea y la tarjeta tapa menos. */
@media (max-width: 36rem) {
  .cn { --cn-bottom: 0px; left: 0; right: 0; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; }
}
@media (max-width: 22.49rem) { .cn .cn__btn { padding: 0 6px; font-size: var(--t-xs); } }
@media (max-width: 19.99rem) { .cn__actions { grid-template-columns: minmax(0, 1fr); } }
/* Pantallas bajas: menos relleno y el título y los botones al tamaño del texto. */
@media (max-height: 30rem) {
  .cn { gap: 8px 20px; padding: 10px 10px 10px 16px; border-radius: 14px; }
  .cn__copy { gap: 2px; }
  .cn__title { font-size: var(--t-xs); }
  .cn__text { line-height: 1.4; }
  .cn__actions { gap: 6px; }
  .cn .cn__btn { padding: 0 6px; font-size: var(--t-xs); }
}
@media (max-height: 30rem) and (max-width: 36rem) {
  .cn { padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0; }
}
@media (forced-colors: active) {
  .cn { border: 1px solid CanvasText; }
  .cn .cn__btn { border: 1px solid ButtonText; }
}
@media print { .cn { display: none; } }