/* Aviso a visitantes desde México (ver partials/aviso_mx.php).
 *
 * Fichero aparte y nunca en app.css: esa hoja la edita Felipe en paralelo.
 * Solo se pide en las dos páginas que llevan el aviso, así que no viaja en las
 * ~162.000 fichas de apellido.
 *
 * LA VISIBILIDAD VA POR CLASE, NO POR `[hidden]`. El atributo `hidden` está en
 * el HTML —para quien llegue sin CSS o sin JS—, pero aquí no se confía en él:
 * en cuanto una regla con `display` alcanza al elemento, `[hidden]` deja de
 * ocultarlo, y en este proyecto ya ha pasado (los selectores del tema pisan a
 * cualquier clase suelta). Por eso el estado oculto es una regla explícita y el
 * JS enseña la banda añadiendo `.esta-visible`.
 *
 * SELECTORES CALIFICADOS CON SU ETIQUETA (div.aviso-mx, .aviso-mx p…) por lo
 * mismo: `.pagina ul`, `main.contenido > .contenedor` y compañía ganan por
 * especificidad a una clase a secas.
 */

/* Estado por defecto: oculto para TODO EL MUNDO, incluido el visitante mexicano.
   Lo enseña el navegador después de preguntar a /geo/pais. */
.aviso-mx { display: none; }
.aviso-mx.esta-visible { display: block; }

/* La banda va en el flujo, justo bajo la cabecera, y empuja el contenido
   (posición decidida por Felipe el 2026-08-07). La cabecera es `sticky`, así
   que esto se va con el desplazamiento y no le roba sitio permanente a nada. */
/* Crema y NO burdeos, aunque el burdeos fuese lo primero que se probó: la barra
   de navegación ya es burdeos, y una banda del mismo color justo debajo se lee
   como una fila más del menú en vez de como un aviso (comprobado en captura).
   El crema la separa de la cabecera y del contenido sin gritar, que es lo que
   toca para una oferta lateral. */
div.aviso-mx {
  background: var(--paper-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: .95rem;
}

.aviso-mx .aviso-mx__caja {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.aviso-mx p.aviso-mx__texto {
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.45;
}

.aviso-mx p.aviso-mx__texto strong {
  font-weight: 700;
  color: var(--burgundy);
}

/* El oro del tema (--gold) no llega al contraste que pide un texto de este
   tamaño sobre crema; el burdeos sí, y además es el color de enlace del sitio. */
.aviso-mx a.aviso-mx__enlace {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.aviso-mx a.aviso-mx__enlace:hover,
.aviso-mx a.aviso-mx__enlace:focus { color: var(--burgundy-d); }

.aviso-mx button.aviso-mx__cerrar {
  flex: 0 0 auto;
  background: none;
  border: 0;
  margin: 0;
  padding: 6px 8px;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}
.aviso-mx button.aviso-mx__cerrar:hover,
.aviso-mx button.aviso-mx__cerrar:focus { color: var(--ink); }
.aviso-mx button.aviso-mx__cerrar:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 1px;
}

/* En móvil el dominio ya no cabe en la misma línea que el texto: se le permite
   partir por donde pueda antes que desbordar la banda a lo ancho. */
@media (max-width: 560px) {
  div.aviso-mx { font-size: .9rem; }
  .aviso-mx .aviso-mx__caja { gap: 8px; align-items: flex-start; }
  .aviso-mx a.aviso-mx__enlace { white-space: normal; }

  /* La zona que se puede tocar, a 44×44 como mínimo. Medido: la ✕ quedaba en
     30×29 px, por debajo de lo que pide Apple (44) y Android (48), y encima
     arriba del todo a la derecha, que es donde peor se acierta con el pulgar.
     Crece el ÁREA, no el aspecto: el símbolo se sigue viendo igual, centrado.
     Solo en móvil — con ratón no hace falta, y en escritorio la banda mide 50 px
     de alto y un botón de 44 la engordaría. */
  .aviso-mx button.aviso-mx__cerrar {
    min-width: 44px;
    min-height: 44px;
    margin: -7px -8px -7px 0;   /* absorbe el tamaño extra: la banda no crece */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}