/**
 * Estilos de la sección Gaceta Oficial (arquitectura de preguntas).
 * Se apoya en tokens.css y hub.css (topbar, bottom-nav, tool-card, card-moment)
 * ya cargados antes de este archivo. Aquí solo lo específico de Gaceta.
 * Ver Herizo_Resumen_Sesion, secciones 4bis y 4ter.
 */

/* La cabecera de subpágina (topbar--sub, subpage-brand, icon-btn-spacer,
   icon-back) vive en hub.css desde el 5 de agosto de 2026. */

/* Color de selección propio de Gaceta (12 ago 2026). Antes las 11 secciones
   se iluminaban con el rosa global (--selection), que competía con los verdes
   degradados de los iconos temáticos. Producto pidió un tono suave que armonice
   con esos verdes -> verde claro. NO se toca --selection global: otros módulos
   lo siguen usando. Solo aplica a .category-card / .question-card. */
:root {
  --gaceta-select: #93d9b6;
}

.gaceta-breadcrumb {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

/* Cabecera de categoría: icono temático + nombre (preguntas y respuesta) */
.gaceta-category-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.gaceta-category-heading__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0.55rem;
}

.gaceta-category-heading__name {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

/* —— Masthead editorial (icono + tagline + regla + aviso) ——
   Corrección (10 ago 2026): de centrado a alineado a la izquierda, con el
   icono propio del módulo junto al titular — mismo margen/sangría que el
   resto del texto de la app (lo da .app-shell, no hace falta uno propio). */
.gaceta-masthead {
  text-align: left;
  padding: 0.15rem 0 0.4rem;
}

.gaceta-masthead__row {
  display: flex;
  /* 25 ago 2026: `stretch` y no `center`. La etiqueta «¿Qué hace?» cuelga
     debajo del disparador, y el disparador solo medía lo que el icono —menos
     que el bloque de título+bajada—, así que la etiqueta caía A LA ALTURA de
     «explicada con claridad» y las dos se leían como una línea apelotonada.
     Estirando el disparador hasta el alto de la fila, la etiqueta baja por
     debajo de todo y recupera su renglón. */
  align-items: stretch;
  gap: 0.75rem;
}

.gaceta-masthead__row .module-info-trigger {
  align-self: stretch;
  align-items: center;
}

.gaceta-masthead__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.gaceta-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  min-width: 0;
}

.gaceta-tagline__title {
  font-family: var(--font-headline);
  font-size: clamp(1.35rem, 5.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #ffffff;
}

/* .gaceta-tagline__soft — la bajada «explicada con claridad». Retirada del
   marcado el 25 ago 2026 (ver el comentario en index.html). La regla se va con
   ella: una clase sin nadie que la use es una pista falsa para el siguiente
   que lea este fichero. */

.gaceta-divider {
  width: 2.25rem;
  height: 1px;
  margin: 0.9rem 0;
  border: none;
  background: color-mix(in srgb, var(--on-surface-muted) 45%, transparent);
}

.gaceta-disclaimer {
  margin: 0;
  max-width: 30rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.6;
  color: var(--on-surface-muted);
}

.gaceta-disclaimer strong {
  color: var(--on-surface);
  font-weight: 700;
}

.disclaimer-footer {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--on-surface-muted);
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}

/* —— Testigo: canal directo de consultas/sugerencias/correcciones ——
   Recurso visible del segmento, no escondido. Punto en blanco con parpadeo
   lento tipo indicador de estado ("dando señales") — antes ámbar, ahora
   neutro (10 ago 2026): el ámbar queda fuera de la decoración. */
.gaceta-witness {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-surface-muted);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gaceta-witness__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--on-surface);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--on-surface) 55%, transparent);
  flex-shrink: 0;
  animation: witness-pulse 2.4s ease-in-out infinite;
}

@keyframes witness-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--on-surface) 55%, transparent);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 1px 0 transparent;
  }
}

.gaceta-witness--footer {
  display: flex;
  width: fit-content;
  margin: 1rem 0 0;
}

@media (hover: hover) {
  .gaceta-witness:hover {
    border-color: color-mix(in srgb, var(--on-surface) 45%, transparent);
    background: color-mix(in srgb, var(--on-surface) 12%, transparent);
    color: var(--on-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gaceta-witness__dot {
    animation: none;
  }
}

/* —— Modal del testigo: consultas y correcciones ——
   Panel con marca completa (borde con resplandor en blanco, barra
   superior degradada — antes ámbar, 10 ago 2026) para que la experiencia
   de escribir llegue con la misma estética que el resto del producto. La
   entrega final sigue siendo el correo nativo del usuario (mailto), pero
   ya redactado. */
.witness-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--navy-deep) 78%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.witness-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 640px) {
  .witness-overlay {
    align-items: center;
    padding: 1.5rem;
  }
}

.witness-panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #16294a 0%, var(--navy-deep) 60%);
  border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-surface) 8%, transparent),
    0 -12px 40px color-mix(in srgb, #000000 45%, transparent);
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(12px);
  transition: transform 0.2s ease;
}

.witness-overlay.is-open .witness-panel {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .witness-panel {
    border-radius: var(--radius-card);
  }
}

.witness-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--on-surface),
    transparent
  );
  opacity: 0.7;
}

.witness-close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.witness-close:hover {
  background: color-mix(in srgb, var(--on-surface) 14%, transparent);
  color: var(--on-surface);
}

.witness-close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.witness-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 1.75rem 0.35rem 0;
}

.witness-header__mark {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  object-fit: contain;
  flex-shrink: 0;
}

.witness-header__title {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #ffffff;
}

.witness-intro {
  margin: 0.9rem 0 1.2rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

.witness-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.witness-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.witness-field__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.witness-motivo {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.witness-motivo__option {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  color: var(--on-surface-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease, transform 0.12s ease;
}

.witness-motivo__option:active {
  transform: scale(0.94);
}

.witness-motivo__option.is-selected {
  border-color: var(--selection);
  background: color-mix(in srgb, var(--selection) 22%, var(--navy-deep));
  color: var(--on-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--selection) 35%, transparent),
    0 0 14px color-mix(in srgb, var(--selection) 45%, transparent);
}

.witness-field input,
.witness-field textarea {
  width: 100%;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  border-radius: var(--radius-control);
  padding: 0.7rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--on-surface);
  outline: none;
  resize: none;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.witness-field input::placeholder,
.witness-field textarea::placeholder {
  color: color-mix(in srgb, var(--on-surface-muted) 75%, transparent);
}

.witness-field input:focus,
.witness-field textarea:focus {
  border-color: var(--selection);
  background: color-mix(in srgb, var(--selection) 12%, var(--navy-deep));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--selection) 30%, transparent),
    0 0 16px color-mix(in srgb, var(--selection) 30%, transparent);
}

@media (hover: hover) {
  .witness-motivo__option:hover {
    border-color: color-mix(in srgb, var(--selection) 55%, transparent);
    color: var(--on-surface);
  }

  .witness-motivo__option.is-selected:hover {
    border-color: var(--selection);
  }

  .witness-field input:hover,
  .witness-field textarea:hover {
    border-color: color-mix(in srgb, var(--selection) 40%, transparent);
  }
}

/* Botón sólido en blanco (10 ago 2026, antes ámbar): el CTA con más peso
   del modal, así que en vez de un tinte transparente lleva fondo blanco
   sólido y texto navy — máximo contraste sin usar ámbar. */
.witness-submit {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 0.2rem;
  width: 100%;
  padding: 0.8rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--on-surface);
  background: var(--on-surface);
  color: var(--navy-deep);
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.witness-submit:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .witness-submit:hover {
    background: #ffffff;
  }
}

.witness-footnote {
  margin: 0.75rem 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
  text-align: center;
}

.witness-error {
  margin: -0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--selection);
  display: none;
}

.witness-error.is-visible {
  display: block;
}

/* —— Listas (categorías / preguntas) —— */
.category-list,
.question-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-card,
.question-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(232, 238, 248, 0.06);
  background: #0f1d30;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.category-card:active,
.question-card:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--gaceta-select) 18%, var(--neutral));
  border-color: var(--gaceta-select);
}

.category-card:active .category-card__mark {
  transform: scale(1.06);
}

.category-card:active .category-card__title,
.category-card:active .category-card__count {
  color: var(--on-surface);
}

/* Icono temático por categoría — misma familia que el logo de Gaceta
   (squircle 3D). A color siempre; el resplandor rosa del logo apagado
   ya no aplica. */
.category-card__mark {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0.65rem;
  transition: transform 0.15s ease;
}

.category-card__copy {
  flex: 1;
  min-width: 0;
}

.category-card__title {
  display: block;
  margin: 0 0 0.15rem;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--on-surface-muted) 78%, var(--navy) 22%);
  transition: color 0.15s ease;
}

.category-card__count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: color-mix(in srgb, var(--on-surface-muted) 60%, var(--navy) 40%);
  transition: color 0.15s ease;
}

.category-card__chevron,
.question-card__chevron {
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.question-card__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.45;
  color: var(--on-surface);
}

.empty-state {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--on-surface-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  background: #0f1d30;
  border-radius: 1rem;
  list-style: none;
}

@media (hover: hover) {
  .category-card:hover,
  .question-card:hover {
    border-color: color-mix(in srgb, var(--gaceta-select) 45%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--gaceta-select) 18%, transparent),
      0 6px 20px color-mix(in srgb, var(--gaceta-select) 14%, transparent);
    transform: translateY(-1px);
  }
  .category-card:hover .category-card__mark {
    transform: scale(1.06);
  }
  .category-card:hover .category-card__title,
  .category-card:hover .category-card__count {
    color: var(--on-surface);
  }
}

/* —— Pantalla de respuesta —— */
/* 10 ago noche (cierre): tipografía más despejada — menos peso y tamaño
   (referencia estilo UI limpia: ~14–15px / 500, cuerpo muted). Logo v2
   más sencillo, flotante a la derecha; fondo plano. */
.card-moment--respuesta {
  position: relative;
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  border-bottom-color: color-mix(in srgb, var(--on-surface) 10%, transparent);
}

/* El sello del erizo vivía aquí. Retirado el 25 ago 2026 a petición de Fidel.
   Con él se va el hueco que le reservaba la tarjeta: el `padding-right: 4.1rem`
   de arriba existía solo para no escribir por debajo del icono. */

.card-moment--respuesta .section-label {
  margin-bottom: 0.55rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--on-surface-muted);
}

.question-heading {
  margin: 0 0 0.75rem;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--on-surface) 92%, transparent);
}

.answer-card__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--on-surface-muted);
}

.evidence__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.evidence__label svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.evidence-item {
  background: #0f1d30;
  border: 1px solid rgba(232, 238, 248, 0.06);
  border-radius: 1rem;
  overflow: hidden;
}

.evidence-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.evidence-item summary::-webkit-details-marker {
  display: none;
}

.evidence-item__heading {
  min-width: 0;
}

.evidence-item__title {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}

.evidence-item__meta {
  font-size: 0.72rem;
  color: var(--on-surface-muted);
}

/* En blanco/neutro (10 ago 2026, antes ámbar): "en revisión" ya no tiene
   color propio — solo el estado --tramite (verde, aprobada sin publicar
   aún) sigue coloreado, así se mantiene la distinción entre los dos. */
.evidence-item__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-surface) 12%, transparent);
  color: var(--on-surface-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Distinta de "en revisión" (neutra) — esto es una norma aprobada
   oficialmente pero cuyo texto todavía no publica la Gaceta. */
.evidence-item__badge--tramite {
  background: color-mix(in srgb, var(--tramite) 20%, transparent);
  color: var(--tramite);
}

.evidence-item__tramite-note {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--tramite);
  background: color-mix(in srgb, var(--tramite) 10%, transparent);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-surface);
}

.evidence-item__chevron {
  width: 1rem;
  height: 1rem;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.evidence-item[open] .evidence-item__chevron {
  transform: rotate(90deg);
}

.evidence-item__body {
  padding: 0 1rem 1.1rem;
  border-top: 1px solid rgba(232, 238, 248, 0.06);
  padding-top: 0.9rem;
}

.evidence-item__practical {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--on-surface);
}

.evidence-detail {
  border-top: 1px dashed color-mix(in srgb, var(--on-surface) 12%, transparent);
  padding-top: 0.75rem;
}

.evidence-detail summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--selection);
  display: inline-flex;
}

.evidence-detail summary::-webkit-details-marker {
  display: none;
}

.evidence-detail__body {
  padding-top: 0.85rem;
}

.detail-field {
  margin-bottom: 0.75rem;
}

.detail-field:last-child {
  margin-bottom: 0;
}

.detail-field__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 0.25rem;
}

.detail-field__value {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--on-surface);
}

.articulo {
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--on-surface);
}

.articulo:last-child {
  margin-bottom: 0;
}

.articulo__num {
  font-weight: 600;
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────
   Estado de la norma — 23 ago 2026
   Tres fichas llevaban «derogado (derogada por la Resolución 104/2026…)»
   cargado y sin pintar, y cinco decían «vigente» con la ley entrando en
   vigor en noviembre. Ahora se dice, y se dice desde el resumen: quien no
   despliegue la ficha tiene que verlo igual.
   Ámbar para lo derogado o modificado — es lo que cambia la lectura.
   --info-note para lo que aún no rige: no está mal, todavía no ha llegado.
   ───────────────────────────────────────────────────────────────────────── */

.evidence-item__badge--derogada,
.evidence-item__badge--modificada {
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  color: var(--amber);
}

.evidence-item__badge--futura {
  background: color-mix(in srgb, var(--info-note) 20%, transparent);
  color: var(--info-note);
}

.evidence-item__norma-note {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--on-surface-muted);
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-surface);
}

.evidence-item__norma-note--derogada,
.evidence-item__norma-note--modificada {
  border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.evidence-item__norma-note--futura {
  border-left-color: var(--info-note);
  background: color-mix(in srgb, var(--info-note) 10%, transparent);
}

/* —— Buscador por pregunta · 25 ago 2026 ————————————————————————————
   Pedido de producto tras las pruebas con gente: «la manera de llegar a las
   leyes es con preguntas». La caja va ARRIBA, antes de las categorías, porque
   es el camino corto; las once categorías siguen debajo para quien prefiere
   mirar. Mientras hay búsqueda, las categorías se esconden: dos listas a la
   vez son dos sitios donde mirar. */
.gaceta-buscador {
  margin: 0 0 1.1rem;
}

.gaceta-buscador__campo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.gaceta-buscador__campo:focus-within {
  border-color: color-mix(in srgb, var(--celeste) 55%, transparent);
  background: color-mix(in srgb, var(--on-surface) 10%, transparent);
}

.gaceta-buscador__icono {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--on-surface-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.gaceta-buscador__campo input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--on-surface);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.gaceta-buscador__campo input::placeholder {
  color: color-mix(in srgb, var(--on-surface-muted) 85%, transparent);
}

.gaceta-buscador__campo input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* OJO con el orden: `display` gana al atributo `hidden`, así que sin esta
   regla el aspa de borrar se quedaba pintada con la caja vacía. Gaceta no
   tiene la regla global `[hidden] { display: none !important }` que sí llevan
   legal.css y embajadas.css. Visto el 25 ago 2026 en la primera pasada. */
.gaceta-ayuda[hidden],
.gaceta-buscador__x[hidden],
.gaceta-resultados[hidden],
.gaceta-sin-resultado[hidden],
.category-list[hidden],
.gaceta-preg__pensando[hidden],
.gaceta-preg__salida[hidden],
.gaceta-preg__eco[hidden],
.gaceta-vivo[hidden],
.gaceta-vivo__cuenta[hidden],
.gaceta-vivo__mas[hidden],
.gaceta-vivo__archivo[hidden] {
  display: none !important;
}

.gaceta-buscador__x {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-surface) 14%, transparent);
  cursor: pointer;
}

.gaceta-buscador__x svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: var(--on-surface);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.gaceta-buscador__cuenta {
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 300;
  color: var(--on-surface-muted);
}

.gaceta-buscador__pista {
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* —— Resultados —— */
.gaceta-resultados {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.gaceta-res {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  text-decoration: none;
  color: inherit;
}

.gaceta-resultados li:last-child .gaceta-res {
  border-bottom: 0;
}

.gaceta-res__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.gaceta-res__titulo {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-surface);
}

.gaceta-res__detalle {
  font-family: var(--font-body);
  font-size: 0.79rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.gaceta-res__meta {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-surface-muted) 88%, transparent);
}

.gaceta-res__tag {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.05rem 0.32rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--celeste) 22%, transparent);
  color: var(--on-surface);
  letter-spacing: 0.04em;
}

.gaceta-res__chev {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--on-surface-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

/* —— Cuando no tenemos la respuesta ——————————————————————————————
   No se disimula ni se ofrece un resultado «parecido»: se dice que no está.
   Y se ofrece mandarlo, porque una pregunta sin respuesta es lo que dice cuál
   hay que escribir después. */
.gaceta-sin-resultado {
  margin: 0.6rem 0 0;
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.gaceta-sin-resultado__t {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-surface);
}

.gaceta-sin-resultado__p {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.81rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.gaceta-sin-resultado__eco {
  font-style: italic;
  color: var(--on-surface);
}

.gaceta-avisar {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  cursor: pointer;
}

.gaceta-avisar:disabled {
  opacity: 0.6;
  cursor: default;
}

.gaceta-avisar-estado {
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 300;
  color: var(--on-surface-muted);
}

@media (prefers-reduced-motion: reduce) {
  .gaceta-buscador__campo {
    transition: none;
  }
}

/* —— Imprimir la respuesta · 25 ago 2026 ——————————————————————————
   «Un botón sencillo, discreto, que no desentone, casi inadvertido pero
   presente.» Así que: sin fondo, sin borde relleno, del color apagado del
   texto secundario, alineado a la derecha bajo el aviso legal. Se ve si se
   busca; no se ve si no. */
.gaceta-imprimir-fila {
  display: flex;
  justify-content: flex-end;
  margin: 0.15rem 0 0;
}

.gaceta-imprimir {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.1rem;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-surface-muted);
  opacity: 0.8;
  cursor: pointer;
}

.gaceta-imprimir:hover,
.gaceta-imprimir:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.gaceta-imprimir svg {
  width: 0.86rem;
  height: 0.86rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El pie que solo existe en el papel. En pantalla no pinta nada. */
.gaceta-print-pie {
  display: none;
}

/* —— La hoja ————————————————————————————————————————————————————
   Papel blanco y tinta negra: el módulo es oscuro y, tal cual, la impresora
   escupiría una plancha de tinta o —según el navegador— texto claro sobre
   blanco, ilegible. Se rehace la página entera para imprimir.
   Fuera todo lo que no es la respuesta: cabecera, reloj, buscador, pie del
   hub, botones. Lo que queda es lo que alguien puede llevar a una ventanilla:
   la pregunta, la respuesta, el respaldo en la Gaceta y la procedencia. */
@media print {
  @page {
    margin: 16mm 14mm;
  }

  html,
  body {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .topbar,
  .lang-switch,
  .reloj-cuba,
  .clima-cuba,
  .tool-intro,
  .module-info-overlay,
  .module-info-trigger,
  .gaceta-imprimir-fila,
  .gaceta-buscador,
  .gaceta-resultados,
  .gaceta-sin-resultado,
  .pie,
  footer,
  .witness-overlay,
  .icon-btn {
    display: none !important;
  }

  .app-shell,
  main {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  .card-moment,
  .card-moment--respuesta,
  .evidence-item,
  .evidence-list {
    background: #ffffff !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gaceta-breadcrumb,
  .gaceta-category-heading__name,
  .section-label,
  .question-heading,
  .answer-card__text,
  .evidence__label,
  .evidence-item,
  .evidence-item *,
  .disclaimer-footer {
    color: #111111 !important;
  }

  .section-label,
  .evidence__label {
    color: #555555 !important;
  }

  .question-heading {
    font-size: 15pt !important;
    margin-bottom: 6pt !important;
  }

  .answer-card__text {
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  .evidence-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .disclaimer-footer {
    font-size: 8pt !important;
    color: #555555 !important;
  }

  /* Los enlaces se imprimen con su dirección detrás: en papel, un texto
     subrayado que no dice a dónde va no sirve de nada. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555555;
  }

  .gaceta-print-pie {
    display: block !important;
    margin-top: 10pt;
    padding-top: 6pt;
    border-top: 1px solid #cccccc;
    font-family: var(--font-body);
    font-size: 8pt;
    line-height: 1.45;
    color: #555555;
  }
}

/* La caja donde se puede explicar qué falta. Opcional a propósito: se puede
   enviar solo la búsqueda. Un botón, no dos — ver el comentario del HTML. */
.gaceta-ayuda {
  margin-top: 0.75rem;
}

.gaceta-ayuda__label {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.gaceta-ayuda__campo {
  display: block;
  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 45%, transparent);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--on-surface);
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}

.gaceta-ayuda__campo:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--amber) 60%, transparent);
}

.gaceta-ayuda__campo::placeholder {
  color: color-mix(in srgb, var(--on-surface-muted) 70%, transparent);
}

/* —— Pregunta lo que necesitas · 30 sep 2026 ———————————————————————
   Medidas a 390 px, del diseño scripts/input/diseno/gaceta-pregunta-ia-2026-09-30.
   Prefijo gaceta-preg__. La IA no redacta: esta caja solo pregunta y pinta. */
.gaceta-preg {
  background: rgba(232, 238, 248, 0.06);
  border: 1.5px solid rgba(108, 194, 191, 0.55);
  border-radius: 20px;
  padding: 18px 16px 16px;
}

.gaceta-preg__titulo {
  margin: 0 0 12px;
  font-family: var(--font-headline);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--on-surface);
}

.gaceta-preg__campo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 92px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(232, 238, 248, 0.18);
  background: rgba(8, 26, 57, 0.7);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--on-surface);
  resize: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.gaceta-preg__campo::placeholder {
  color: var(--on-surface-muted);
}

.gaceta-preg__campo:focus {
  border-color: rgba(108, 194, 191, 0.55);
}

.gaceta-preg__btn {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--turquoise);
  color: #06203a;
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.gaceta-preg__btn:disabled {
  background: rgba(108, 194, 191, 0.35);
  color: rgba(6, 32, 58, 0.7);
  cursor: default;
}

.gaceta-preg__nota {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.gaceta-preg__pensando {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--on-surface-muted);
}

.gaceta-preg__punto {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--turquoise);
  box-shadow: 0 0 0 6px rgba(108, 194, 191, 0.18);
  animation: gaceta-preg-late 1.4s ease-in-out infinite;
}

@keyframes gaceta-preg-late {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gaceta-preg__punto {
    animation: none;
  }
}

.gaceta-preg__eti {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.gaceta-preg__temas .category-list {
  margin-top: 10px;
}

.gaceta-preg__temas .category-card__mark {
  width: 30px;
  height: 30px;
}

.gaceta-preg__temas + .gaceta-vivo {
  margin-top: 1.35rem;
}

.gaceta-preg__salida {
  margin-top: 16px;
}

.gaceta-preg__salida > .gaceta-preg__card:first-child {
  margin-top: 0;
}

.gaceta-preg__eco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 196, 180, 0.4);
  background: rgba(232, 238, 248, 0.06);
}

.gaceta-preg__eco-texto {
  margin: 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gaceta-preg__eco-cambiar {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  color: var(--turquoise);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.gaceta-preg__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #274271;
  background: rgba(15, 30, 55, 0.95);
  text-decoration: none;
  color: inherit;
}

.gaceta-preg__card--prim {
  border: 1.5px solid var(--tramite);
}

.gaceta-preg__logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 12px;
}

.gaceta-preg__copy {
  min-width: 0;
  flex: 1;
}

.gaceta-preg__tema {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--on-surface-muted);
}

.gaceta-preg__h {
  margin: 2px 0 0;
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-surface);
}

.gaceta-preg__porque {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.gaceta-preg__ir {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--turquoise);
}

.gaceta-preg__tambien .gaceta-preg__eti {
  margin-top: 18px;
}

.gaceta-preg__noera {
  margin: 28px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  color: var(--on-surface-muted);
}

.gaceta-preg__manda {
  -webkit-appearance: none;
  appearance: none;
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--turquoise);
  cursor: pointer;
}

.gaceta-preg__sin {
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #274271;
  background: rgba(15, 30, 55, 0.95);
}

.gaceta-preg__sin .gaceta-sin-resultado__t {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--on-surface);
}

.gaceta-preg__sin .gaceta-sin-resultado__p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #c7d2e3;
}

.gaceta-preg__sin .gaceta-ayuda {
  margin-top: 14px;
}

.gaceta-preg__sin .gaceta-ayuda__label {
  font-size: 13px;
}

.gaceta-preg__sin .gaceta-ayuda__campo {
  border: 1px solid rgba(232, 238, 248, 0.18);
  background: rgba(8, 26, 57, 0.7);
  border-radius: 14px;
  font-size: 16px;
  resize: none;
  box-sizing: border-box;
}

.gaceta-preg__sin .gaceta-ayuda__campo:focus {
  border-color: rgba(108, 194, 191, 0.55);
}

.gaceta-preg__sin .gaceta-preg__btn {
  margin-top: 12px;
}

.gaceta-preg__sin .gaceta-avisar-estado {
  margin-top: 10px;
  font-size: 14px;
}

main > .gaceta-disclaimer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
  max-width: none;
}

@media print {
  .gaceta-preg,
  .gaceta-preg__salida,
  .gaceta-preg__temas {
    display: none !important;
  }
}