/* Error inline para el modal de notificaciones obligatorias (#modal-mandatory-notice)
 *
 * Por qué existe este archivo:
 *   El toast global (.toast / #toast-container) tenía z-index 300, mientras
 *   que #modal-mandatory-notice tiene z-index: 500 (inline). El toast con el
 *   error de "Firmar y entrar" quedaba tapado por el overlay del modal.
 *   Hemos subido el z-index del toast a 10001, pero en móvil el modal ocupa
 *   casi toda la pantalla y el toast en la esquina inferior derecha sigue
 *   siendo fácil de perder. Este bloque muestra el error INLINE, justo
 *   encima del botón "Firmar y entrar", donde el conductor mira.
 *
 * Trazabilidad: PROJECT_JOURNAL 2026-04-23 (fix notificaciones conductores).
 */

/* El banner vive dentro de .modal-footer.mandatory-notice-footer, que es un
 * flexbox con justify-content: flex-end (ver style.css). Sin flex-basis:100%
 * el banner se coloca a la izquierda del botón en lugar de ocupar la fila
 * entera encima — exactamente el bug visto en el screenshot del 2026-04-23.
 * order:-1 asegura que salga encima del botón aunque esté después en el DOM.
 * Forzamos que el propio footer permita wrap desde este selector. */
.mandatory-notice-footer {
  flex-wrap: wrap;
}

.notice-inline-error {
  flex: 0 0 100%;
  order: -1;
  margin: 0 0 12px 0;
  padding: 12px 16px;
  border-radius: var(--radius-md, 10px);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
}

.notice-inline-error::before {
  content: "⚠️";
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.notice-inline-error[hidden] {
  display: none;
}