/* Avisos al equipo (staff-alerts-view.js): fila de estado, avisos por grupo con píldoras ✓ por número, mensajes y números. Solo tokens del canon. */
.staff-alerts, .staff-alerts > * { min-width: 0; }

/* Fila de estado: interruptor general y cápsula, sin tarjeta. */
.sa-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sa-aviso-nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sa-aviso-nota > p { margin: 0; }

/* Resultado de lo que se hace (guardado, error): queda a la vista aunque la sección sea larga. */
.sa-notas { position: sticky; top: var(--sp-2); z-index: 5; display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); }
.sa-notas > * { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.sa-notas .ui-icon { width: var(--icon-md); height: var(--icon-md); color: var(--brand); flex: none; }

/* Nota de advertencia suave (ámbar), sin gritar. */
.sa-warn { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning-ink); font-size: var(--fs-body); }

.sa-alerta .ui-cluster { justify-content: flex-end; }

/* Contenido de cada sección del acordeón. */
.sa-seccion { display: grid; gap: var(--sp-4); min-width: 0; }
.sa-seccion > .ui-form-group:first-child { border-top: 0; padding-top: 0; }
.sa-seccion .ui-form-row { align-items: start; }

/* Lista de números: dos columnas cuando hay ancho. */
.sa-numeros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 1100px) { .sa-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-numeros > .ui-row { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: var(--sp-2); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); padding: var(--sp-3); }
.sa-numeros .ui-row-line { flex-wrap: wrap; }
.sa-numeros .ui-row-actions { flex-wrap: wrap; justify-content: flex-start; }

/* Un aviso: título con ⓘ e interruptor en la misma línea; debajo, quién lo recibe, su valor y sus ajustes. */
.sa-grupo { gap: 0; }
.sa-aviso { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: var(--border-w) solid var(--border-default); min-width: 0; }
.sa-grupo > legend + .sa-aviso { border-top: 0; }
.sa-aviso-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); min-width: 0; }
.sa-aviso-head .ui-q-row { flex: 1 1 16rem; }
.sa-aviso-body { display: grid; gap: var(--sp-2); min-width: 0; }
.sa-aviso-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.sa-aviso-line .ui-q-row { width: auto; flex: none; }
.sa-aviso-line .ui-q-label { color: var(--text-muted); }
.sa-valor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sa-aviso-more { display: flex; }
.sa-ajustes { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-2); }
.sa-ajustes[hidden] { display: none; }

/* Mensajes. */
.sa-mensaje { display: grid; gap: var(--sp-2); padding-top: var(--sp-4); border-top: var(--border-w) solid var(--border-default); min-width: 0; }
.sa-mensaje:first-child { border-top: 0; padding-top: 0; }
.sa-mensaje-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sa-mensaje textarea.ui-input { height: auto; min-height: 5.5rem; resize: vertical; }

/* Historial: el aviso con el mismo texto que recibe el equipo (motivo, 👤 📞 📝 💬 y la línea final). */
.sa-hist-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.sa-hist-lineas > li { margin: 0; overflow-wrap: anywhere; }
.sa-hist-nota { font-style: italic; }
/* Tabla de «avisos antes de la cita que no salieron»: en el teléfono cada paciente es una tarjeta con su etiqueta. */
.sa-hist { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.sa-hist > .sa-pacientes { grid-column: 1 / -1; }
.sa-pacientes { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); min-width: 0; }
.sa-pacientes > p { margin: 0; }
.sa-pacientes .data-table td, .sa-pacientes .data-table th { vertical-align: top; }
.sa-pacientes .sa-nowrap { white-space: nowrap; }
.sa-pacientes-accion { text-align: right; white-space: nowrap; }
.sa-pacientes-vacio { margin: var(--sp-2) 0 0; }