/* Avisos de error y de éxito (meteorología no disponible, formulario enviado…). */

@layer componentes {
  .aviso {
    margin-bottom: var(--espacio-6);
    padding: var(--espacio-5);
    background: var(--estado-error);
    color: var(--color-texto-invertido);
    text-align: center;
  }

  .aviso p {
    margin: 0;
    font-size: var(--paso-1);
  }

  .aviso--exito {
    background: var(--estado-exito);
  }

  /* Faltan solo algunos datos: una nota discreta sobre la tabla, sin alarmar, porque lo demás sí vale */
  .aviso--nota {
    margin-bottom: var(--espacio-3);
    padding: 0;
    background: none;
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
    text-align: left;
  }
}

/* Aviso de que las puntuaciones de los deportes son orientativas: texto discreto, sin recuadro. */
@layer componentes {
  .aviso-orientativo {
    max-width: 70ch;
    margin: var(--espacio-6) 0 0;
    color: var(--color-texto-suave);
    font-size: 0.9rem;
  }
}