/* El área de mensajes — js/ui-notice.js.

   Archivo propio y no una sección de css/slide-editor.css, por lo mismo que
   css/fmt-colors.css y css/ajustes.css: estas reglas describen el INTERIOR del
   bloque que el módulo dibuja y viajan con él el día que se monte en otra
   pantalla.

   DEPENDE DE css/main.css, dicho en voz alta: de ahí salen los tokens y —lo
   que de verdad importa— la regla `[hidden] { display: none !important; }`.
   Sin ella, el `display: flex` de abajo le gana al atributo `hidden` y el
   aviso se ve SIEMPRE, vacío. Por eso toda página que linkee ésta linkea
   main.css antes.

   Lo carga toda página que monte la lista de slides, la mida o no: index.html
   —por #setup— y tests/{slide-editor,ui-setup,desktop,i18n,identity,roundtrip,
   pwa-install}.test.html. Las seis últimas no miran el aviso; la hoja va igual,
   porque montar el módulo sin ella es la «coincidencia de carga» que cuenta
   css/fmt-colors.css. */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  /* El mismo --color-slide-over que marca las filas que no entran en la lista:
     el aviso y las slides que lo causan hablan del mismo problema y se leen del
     mismo color. */
  border: 1px solid var(--color-slide-over);
  border-radius: var(--radius-card);
  /* Teñido y no relleno: un fondo saturado compite con el texto de las slides,
     que es lo que se está mirando. Y sale del MISMO token que el borde, con
     color-mix, en vez de un rgba() con el hex copiado a mano: una copia del
     valor no se entera de que la otra cambió. Por no poder hacer esto es que el
     riel de charlas (`.talks--rail .talk-card__delete:hover`, en
     css/screens.css) tiene su fondo en el overlay blanco de siempre y no en un
     rojo translúcido: ahí se renunció al color porque rgba() no sabe leer un
     token hex, y color-mix sí sabe. No había ningún color-mix
     en el repo hasta esta hoja; donde no se entienda, la declaración se
     descarta y el aviso queda sin fondo, con su borde y su texto. */
  background: color-mix(in srgb, var(--color-slide-over) 10%, transparent);
  color: var(--color-text);
  font-size: var(--fs-meta);
  line-height: 1.4;
}

.notice__text {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* El blanco tocable de Apple, 2.75rem de lado como el resto de los botones de
   la app, y con márgenes negativos para que ese blanco se coma el padding de la
   caja en vez de estirarla: 46px de aviso contra 62 sin ellos, medido a ancho
   de teléfono con el mensaje de una slide de más.

   Lo que NO hacen es devolverle el alto al texto, y conviene no leerlo así: con
   márgenes y todo el que manda sigue siendo el botón —su caja de margen mide
   28px contra los 17,5 del texto, y un aviso sin botón daría 35,5—. Lo que
   ahorran son los 16px de padding vertical que el botón contaba dos veces. */
.notice__close {
  flex: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) calc(var(--space-2) * -1) 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1;
}