/* =====================================================================
   notice.css — Docokids · aviso sobre fondo blanco (.ds-aviso).

   QUÉ ES. Un solo bloque para tres usos de Mi Docokids:
     · el estado del plan (sin plan, pago en confirmación, plan vencido),
     · el trabajo principal de la familia ("¿Algo te preocupa de Sofía?"),
     · el aviso corto (.ds-aviso--breve, una sola frase, sin título).
   Cada página decide cuál muestra.

   QUÉ NO ES.
   · No es un panel: los paneles grises son solo para listas y estados vacíos.
     El aviso va sobre blanco, con UNA línea fina arriba y aire hasta el texto.
   · No lleva botón adentro: la acción del plan vive en la barra fija o en el
     encabezado. Los enlaces van en .ds-acciones (panel.css).
   · No es una región viva (role="status"): el contenido llega del servidor y
     no cambia en la página. El aviso de solo lectura del staff, que sí lleva
     role="status", es otra pieza.

   Necesita panel.css cargado en la misma página: los enlaces de un aviso usan
   .ds-acciones y .ds-enlace-boton, que viven allá. Esta hoja no lee nada de
   panel.css ni choca con sus reglas, así que el orden entre las dos no
   importa; por convención va icons.css → panel.css → notice.css →
   dialog.css. La página incluye el sprite una vez:
   {% include "ds/_icons.html" %}.

   MARCADO ESPERADO

     <section class="ds-aviso" aria-label="Tu plan">
       <p class="ds-aviso__titulo">No tienes un plan activo.</p>
       <p class="ds-aviso__texto">Con un plan le escribes a una pediatra por WhatsApp, a cualquier hora.</p>
       <div class="ds-acciones"><a href="…" class="btn-link">…</a></div>
     </section>

     <div class="ds-aviso ds-aviso--breve">
       <p class="ds-aviso__texto">Necesitas un plan activo para registrar números.</p>
     </div>

   El color y el peso del texto son variables CSS (custom properties: valores
   con nombre que empiezan con --, como --ds-aviso-texto-color, y se leen con
   var()): --breve solo las cambia. Así cada regla tiene la especificidad de
   una sola clase (la especificidad es el peso de un selector, el que decide
   qué regla gana cuando dos chocan), como en README-form.md.

   CONSTANTES PERMITIDAS: son todos los números sueltos del archivo; todo lo
   demás sale de var(--token).
   · 0      márgenes y rellenos en cero.
   · 1px    la línea fina de arriba.
   · 1.35   altura de línea del título.
   · 400, 500, 600  pesos de letra (el DS no tiene tokens de peso).
   ===================================================================== */

.ds-aviso {
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--hairline);
}
.ds-aviso__titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gris-oscuro);
}
.ds-aviso__texto {
  margin: 0;
  font-weight: var(--ds-aviso-texto-peso, 400);
  color: var(--ds-aviso-texto-color, var(--gris-secundario));
}
/* Aviso corto: una frase en tinta y peso 500, sin título. */
.ds-aviso--breve {
  --ds-aviso-texto-color: var(--gris-oscuro);
  --ds-aviso-texto-peso: 500;
}