/* =============================================================================
AlbaMed Audit — UI kit (mismo kit que clinical y billing; color de acción ROJO)
Un solo color de acción (rojo), un solo radio, cuatro tipos de botón. Las pantallas
usan estos componentes (resources/views/components/ui/*) en vez de estilos propios.
Todo color sale de las variables de :root; ninguna pantalla escribe colores a mano.
Solo modo claro.
============================================================================= */
:root {
/* Acción: rojo con letra blanca (ale, 2026-10-21). #c5221f da 5.6:1 con blanco (AA). */
--ui-ac: #c5221f;
--ui-ac-hover: #a50e0e;
--ui-ac-soft: #fce8e6;
--ui-ac-text: #b3261e; /* links, botones de texto, foco: 6.4:1 sobre blanco */
--ui-on-ac: #ffffff;
/* Superficies y texto */
--ui-bg: #f8f9fa;
--ui-surface: #ffffff;
--ui-line: #dadce0;
--ui-line-soft: #eceef0;
--ui-text: #202124;
--ui-text-2: #5f6368;
--ui-hover: #f1f3f4;
/* Estados: fondo suave + texto oscuro. Siempre con punto y palabra, nunca solo color. */
--ui-ok-bg: #e6f4ea; --ui-ok: #137333;
--ui-warn-bg: #fef7e0; --ui-warn: #8a5300;
--ui-err-bg: #fce8e6; --ui-err: #c5221f; --ui-on-err: #ffffff;
--ui-info-bg: #e8f0fe; --ui-info: #174ea6;
--ui-mute-bg: #f1f3f4; --ui-mute: #5f6368;
--ui-snack-bg: #303134;
--ui-snack-fg: #f1f3f4;
/* Forma y densidad (compacta) */
--ui-radius: 6px;
--ui-radius-card: 8px;
--ui-ctl: 32px; /* alto de botones */
--ui-field: 36px; /* alto de campos */
--ui-row: 40px; /* alto de fila de tabla */
--ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Sin @layer a propósito: Tailwind purga de @layer las clases que todavía no aparecen en
las vistas, y SweetAlert recibe las suyas desde JavaScript. Va antes de @tailwind, así
que una utilidad de Tailwind puesta en el mismo elemento sigue ganando. */
/* ── Botones ─────────────────────────────────────────────────────────── */
.ui-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: var(--ui-ctl); padding: 0 16px;
border: 1px solid transparent; border-radius: var(--ui-radius);
font-family: var(--ui-font); font-size: 14px; font-weight: 500; line-height: 1;
white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background-color .12s, border-color .12s, filter .12s;
}
.ui-btn:focus-visible { outline: 2px solid var(--ui-ac-text); outline-offset: 2px; }
.ui-btn svg, .ui-btn i { width: 18px; height: 18px; flex: none; }
.ui-btn--has-icon { padding-left: 12px; }
.ui-btn--primary { background: var(--ui-ac); color: var(--ui-on-ac); }
.ui-btn--primary:hover { background: var(--ui-ac-hover); }
.ui-btn--secondary { background: transparent; border-color: var(--ui-line); color: var(--ui-ac-text); }
.ui-btn--secondary:hover { background: var(--ui-ac-soft); }
.ui-btn--text { background: transparent; color: var(--ui-ac-text); padding: 0 12px; }
.ui-btn--text:hover { background: var(--ui-ac-soft); }
.ui-btn--danger { background: var(--ui-err); color: var(--ui-on-err); }
.ui-btn--danger:hover { filter: brightness(.9); }
.ui-btn--sm { height: 28px; padding: 0 12px; font-size: 13px; }
.ui-btn--sm svg, .ui-btn--sm i { width: 16px; height: 16px; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .38; cursor: default; pointer-events: none; }
/* Botón solo con ícono (redondo). Siempre con aria-label. */
.ui-icon-btn {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 36px; height: 36px; border: 0; border-radius: 50%;
background: transparent; color: var(--ui-text-2); cursor: pointer;
transition: background-color .12s;
}
.ui-icon-btn:hover { background: var(--ui-hover); }
.ui-icon-btn:focus-visible { outline: 2px solid var(--ui-ac-text); outline-offset: 2px; }
.ui-icon-btn:disabled { opacity: .38; cursor: default; background: transparent; }
.ui-icon-btn svg, .ui-icon-btn i { width: 20px; height: 20px; }
.ui-icon-btn--sm { width: 32px; height: 32px; }
.ui-icon-btn--sm svg, .ui-icon-btn--sm i { width: 18px; height: 18px; }
/* ── Tarjetas ────────────────────────────────────────────────────────── */
.ui-card {
background: var(--ui-surface); border: 1px solid var(--ui-line);
border-radius: var(--ui-radius-card); color: var(--ui-text);
}
.ui-card__header {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 24px; border-bottom: 1px solid var(--ui-line-soft);
}
.ui-card__title { margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ui-text); }
.ui-card__desc { margin: 2px 0 0; font-size: 13px; color: var(--ui-text-2); }
.ui-card__body { padding: 20px 24px 24px; }
.ui-card__body--flush { padding: 0; }
.ui-card__footer {
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
padding: 12px 24px; border-top: 1px solid var(--ui-line-soft);
}
/* ── Encabezado de página ────────────────────────────────────────────── */
.ui-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ui-page-header__title { margin: 0; font-size: 22px; font-weight: 500; line-height: 28px; color: var(--ui-text); }
.ui-page-header__desc { margin: 4px 0 0; font-size: 14px; color: var(--ui-text-2); }
.ui-page-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--ui-text-2); }
.ui-breadcrumb a { color: var(--ui-ac-text); font-weight: 500; text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.ui-breadcrumb a:hover { background: var(--ui-ac-soft); }
.ui-breadcrumb svg, .ui-breadcrumb i { width: 16px; height: 16px; }
/* ── Campos ──────────────────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-label { font-size: 13px; font-weight: 500; color: var(--ui-text); }
.ui-label__req { color: var(--ui-text-2); }
.ui-input {
width: 100%; height: var(--ui-field); box-sizing: border-box; padding: 0 12px;
border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
background: var(--ui-surface); color: var(--ui-text);
font-family: var(--ui-font); font-size: 14px;
}
textarea.ui-input { height: auto; min-height: 88px; padding: 8px 12px; line-height: 1.5; }
select.ui-input { padding-right: 32px; }
.ui-input::placeholder { color: var(--ui-text-2); }
.ui-input:focus { outline: none; border-color: var(--ui-ac-text); box-shadow: 0 0 0 1px var(--ui-ac-text); }
.ui-input:disabled, .ui-input[readonly] { background: var(--ui-hover); border-color: var(--ui-line-soft); color: var(--ui-text-2); }
.ui-input--error { border-color: var(--ui-err); }
.ui-input--error:focus { border-color: var(--ui-err); box-shadow: 0 0 0 1px var(--ui-err); }
.ui-help { font-size: 12px; color: var(--ui-text-2); }
.ui-error { font-size: 12px; color: var(--ui-err); }
.ui-check { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-ac-text); }
.ui-check-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ui-text); }
.ui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 24px; }
.ui-form-grid > .ui-field--full { grid-column: 1 / -1; }
/* Selector de opciones (segmented) */
.ui-segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; }
.ui-segmented__btn {
height: var(--ui-ctl); padding: 0 16px; border: 0; border-left: 1px solid var(--ui-line);
background: transparent; color: var(--ui-text); font: 500 13px var(--ui-font); cursor: pointer;
}
.ui-segmented__btn:first-child { border-left: 0; }
.ui-segmented__btn:hover { background: var(--ui-hover); }
.ui-segmented__btn--active, .ui-segmented__btn--active:hover { background: var(--ui-ac-soft); color: var(--ui-ac-text); }
/* ── Estados, etiquetas y filtros ────────────────────────────────────── */
.ui-badge {
display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap;
background: var(--ui-mute-bg); color: var(--ui-mute);
}
.ui-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ui-badge--success { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-badge--warning { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-badge--danger { background: var(--ui-err-bg); color: var(--ui-err); }
.ui-badge--info { background: var(--ui-info-bg); color: var(--ui-info); }
.ui-badge--neutral { background: var(--ui-mute-bg); color: var(--ui-mute); }
.ui-tag {
display: inline-block; padding: 1px 6px; border: 1px solid var(--ui-line); border-radius: 4px;
font-size: 12px; line-height: 18px; color: var(--ui-text); white-space: nowrap;
}
.ui-chip {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; box-sizing: border-box;
border: 1px solid var(--ui-line); border-radius: 16px; background: transparent;
color: var(--ui-text); font: 500 13px var(--ui-font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ui-chip:hover { background: var(--ui-hover); }
.ui-chip:focus-visible { outline: 2px solid var(--ui-ac-text); outline-offset: 2px; }
.ui-chip--active, .ui-chip--active:hover { border-color: transparent; background: var(--ui-ac-soft); color: var(--ui-ac-text); }
.ui-chip__count { color: var(--ui-text-2); font-weight: 400; font-variant-numeric: tabular-nums; }
/* ── Avisos en página ────────────────────────────────────────────────── */
.ui-alert {
display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
border-radius: var(--ui-radius-card); background: var(--ui-info-bg); color: var(--ui-text); font-size: 14px;
}
.ui-alert__icon { display: flex; flex: none; padding-top: 1px; color: var(--ui-info); }
.ui-alert__icon svg, .ui-alert__icon i { width: 20px; height: 20px; }
.ui-alert__body { flex: 1; min-width: 0; line-height: 20px; }
.ui-alert__title { font-weight: 600; }
.ui-alert__actions { display: flex; align-items: center; gap: 4px; margin: -6px -8px -6px 0; }
.ui-alert--success { background: var(--ui-ok-bg); } .ui-alert--success .ui-alert__icon { color: var(--ui-ok); }
.ui-alert--warning { background: var(--ui-warn-bg); } .ui-alert--warning .ui-alert__icon { color: var(--ui-warn); }
.ui-alert--danger { background: var(--ui-err-bg); } .ui-alert--danger .ui-alert__icon { color: var(--ui-err); }
/* ── Tablas ──────────────────────────────────────────────────────────── */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ui-text); }
.ui-table th {
height: 40px; padding: 0 16px; text-align: left; white-space: nowrap;
font-size: 12px; font-weight: 500; color: var(--ui-text-2); border-bottom: 1px solid var(--ui-line);
}
.ui-table td { height: var(--ui-row); padding: 4px 16px; border-bottom: 1px solid var(--ui-line-soft); vertical-align: middle; }
.ui-table tbody tr:hover { background: var(--ui-hover); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table__muted { color: var(--ui-text-2); }
/* Scroll lateral visible: resources/js/table-scroll.js marca el contenedor que scrollea
(.ui-scroll-x) y el lado que todavía tiene contenido; el borde se desvanece para avisar
que hay más columnas. Solo una máscara: no cambia colores ni agrega sombras. */
.ui-scroll-x--right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, .12)); mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, .12)); }
.ui-scroll-x--left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), rgba(0, 0, 0, .12)); mask-image: linear-gradient(to left, #000 calc(100% - 48px), rgba(0, 0, 0, .12)); }
.ui-scroll-x--left.ui-scroll-x--right {
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .12), #000 48px, #000 calc(100% - 48px), rgba(0, 0, 0, .12));
mask-image: linear-gradient(to right, rgba(0, 0, 0, .12), #000 48px, #000 calc(100% - 48px), rgba(0, 0, 0, .12));
}
/* Columnas por prioridad en pantallas angostas. En th Y td de la misma columna:
.ui-col-hide-md → se oculta por debajo de 1024 px (tablet y teléfono)
.ui-col-hide-sm → se oculta por debajo de 768 px (teléfono)
.ui-only-md → aparece solo por debajo de 1024 px (p. ej. la hora bajo la fecha)
.ui-table--fit → la tabla suelta su min-width por debajo de 1024 px y se ajusta al ancho.
.ui-col-actions → los íconos de acción pueden pasar a dos líneas por debajo de 1024 px. */
.ui-only-md { display: none; }
@media (max-width: 1023.98px) {
.ui-only-md { display: block; }
.ui-table.ui-table--fit { min-width: 0 !important; }
.ui-table .ui-col-hide-md { display: none; }
.ui-table--fit .ui-col-actions { white-space: normal !important; width: 72px; } /* two 32px icons per line (min-width is ignored on cells) */
}
@media (max-width: 767.98px) {
.ui-table .ui-col-hide-sm { display: none; }
.ui-table--fit th, .ui-table--fit td { padding-left: 8px; padding-right: 8px; }
}
/* Barra sobre una lista: filtros a la izquierda, búsqueda/acciones a la derecha */
.ui-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 12px 16px; border-bottom: 1px solid var(--ui-line-soft);
}
.ui-toolbar__spacer { flex: 1 1 0; }
/* ── Pantalla vacía ──────────────────────────────────────────────────── */
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; }
.ui-empty__icon {
display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
border-radius: 50%; background: var(--ui-ac-soft); color: var(--ui-ac-text); margin-bottom: 4px;
}
.ui-empty__icon svg, .ui-empty__icon i { width: 26px; height: 26px; }
.ui-empty__title { margin: 0; font-size: 16px; font-weight: 500; color: var(--ui-text); }
.ui-empty__desc { margin: 0; max-width: 420px; font-size: 14px; color: var(--ui-text-2); }
.ui-empty__actions { display: flex; gap: 8px; margin-top: 8px; }
/* ── SweetAlert2 (se reestiliza, no se reemplaza) ───────────────────────
partials/dialogs aplica buttonsStyling:false + estas clases a todo Swal.fire. */
.swal2-popup.ui-swal {
border-radius: 12px; padding: 24px; font-family: var(--ui-font); color: var(--ui-text);
box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.swal2-popup.ui-swal .swal2-title { padding: 0; font-size: 18px; font-weight: 500; line-height: 26px; color: var(--ui-text); text-align: left; }
.swal2-popup.ui-swal .swal2-html-container { margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ui-text-2); text-align: left; }
.swal2-popup.ui-swal .swal2-actions { justify-content: flex-end; gap: 8px; margin: 20px 0 0; padding: 0; width: 100%; }
.swal2-popup.ui-swal .swal2-actions .ui-btn { margin: 0; }
.swal2-popup.ui-swal .swal2-input, .swal2-popup.ui-swal .swal2-textarea, .swal2-popup.ui-swal .swal2-select {
margin: 16px 0 0; width: 100%; box-sizing: border-box; border: 1px solid var(--ui-line);
border-radius: var(--ui-radius); box-shadow: none; font-family: var(--ui-font); font-size: 14px; color: var(--ui-text);
}
.swal2-popup.ui-swal .swal2-input:focus, .swal2-popup.ui-swal .swal2-textarea:focus {
border-color: var(--ui-ac-text); box-shadow: 0 0 0 1px var(--ui-ac-text);
}
.swal2-popup.ui-swal .swal2-validation-message { margin: 12px 0 0; background: var(--ui-err-bg); color: var(--ui-err); font-size: 13px; }
.swal2-popup.ui-swal .swal2-icon { margin: 0 0 16px; transform: scale(.8); transform-origin: left center; }
.swal2-popup.ui-swal .swal2-icon.swal2-success { border-color: var(--ui-ok); color: var(--ui-ok); }
.swal2-popup.ui-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ui-ok); }
.swal2-popup.ui-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(19, 115, 51, .3); }
.swal2-popup.ui-swal .swal2-icon.swal2-error { border-color: var(--ui-err); color: var(--ui-err); }
.swal2-popup.ui-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--ui-err); }
.swal2-popup.ui-swal .swal2-icon.swal2-warning { border-color: #f9ab00; color: #b06000; }
.swal2-popup.ui-swal .swal2-icon.swal2-info, .swal2-popup.ui-swal .swal2-icon.swal2-question { border-color: var(--ui-info); color: var(--ui-info); }
.swal2-popup.ui-swal .swal2-close { color: var(--ui-text-2); }
.swal2-popup.ui-swal .swal2-close:focus { box-shadow: none; outline: 2px solid var(--ui-ac-text); }
.swal2-popup.ui-swal .swal2-timer-progress-bar { background: var(--ui-ac); }
.swal2-popup.ui-swal.swal2-toast { padding: 12px 16px; border-radius: var(--ui-radius-card); }
.swal2-popup.ui-swal.swal2-toast .swal2-title { font-size: 14px; margin: 0 8px; }
.swal2-popup.ui-swal.swal2-toast .swal2-icon { margin: 0; transform: none; }
/* ── Aviso flotante (snackbar) — mensajes de session('status' | 'swal_error' | 'swal_warning')
que muestra el layout tras guardar. Barra oscura abajo a la izquierda, como la consola. */
.swal2-popup.ui-snackbar {
width: auto !important; max-width: min(480px, calc(100vw - 32px)); padding: 0 !important;
background: var(--ui-snack-bg) !important; color: var(--ui-snack-fg);
border-radius: var(--ui-radius-card); box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}
.swal2-popup.ui-snackbar .swal2-html-container { margin: 0; padding: 0; overflow: visible; }
.ui-snackbar__row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; text-align: left; font: 14px/20px var(--ui-font); color: var(--ui-snack-fg); }
.ui-snackbar__icon { display: flex; flex: none; width: 20px; height: 20px; }
.ui-snackbar__icon svg { width: 20px; height: 20px; }
.ui-snackbar__icon--ok { color: #81c995; }
.ui-snackbar__icon--err { color: #f28b82; }
.ui-snackbar__icon--warn { color: #fdd663; }
.ui-snackbar__body { flex: 1; min-width: 0; word-break: break-word; }
.ui-snackbar__title { display: block; font-weight: 600; }
.ui-snackbar__action { display: inline-block; margin-top: 6px; color: #81c995; font-weight: 600; text-decoration: none; }
.ui-snackbar__action:hover { text-decoration: underline; }
.swal2-popup.ui-snackbar .swal2-close { color: #bdc1c6; margin: 6px 6px 0 0; }
.swal2-popup.ui-snackbar .swal2-close:hover { color: #fff; }
.swal2-popup.ui-snackbar .swal2-timer-progress-bar { background: rgba(255, 255, 255, .35); }
/* Alpine: lo marcado con x-cloak no se ve hasta que Alpine arranca (menús, desplegables). */
[x-cloak] { display: none !important; }
/* Relleno estándar del contenido de una pantalla (más angosto en el teléfono). */
.ui-page { padding: 24px 32px 64px; }
@media (max-width: 640px) { .ui-page { padding: 16px 16px 48px; } }
/* Avatar de persona: foto o inicial. */
.ui-avatar {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
background: var(--ui-ac-soft); color: var(--ui-ac-text); font: 600 13px var(--ui-font);
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Celda de persona en una tabla: avatar + nombre + dato secundario. */
.ui-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-person__name { font-weight: 500; color: var(--ui-text); }
.ui-person__meta { font-size: 12px; color: var(--ui-text-2); }
/* Paginación de Laravel dentro de una tarjeta. */
.ui-card__pager { padding: 8px 16px; border-top: 1px solid var(--ui-line-soft); }
/* Opción seleccionable con borde (casilla o radio dentro): sedes, planes, etc. */
.ui-option {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box;
border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface);
cursor: pointer; user-select: none; transition: background-color .12s, border-color .12s;
}
.ui-option:hover { background: var(--ui-hover); }
.ui-option:has(input:checked) { border-color: var(--ui-ac-text); background: var(--ui-ac-soft); }
.ui-option--static { cursor: default; }
.ui-option--static:hover { background: var(--ui-surface); }
.ui-option__text { flex: 1; min-width: 0; }
.ui-option__title { display: block; font-size: 14px; color: var(--ui-text); }
.ui-option__meta { display: block; font-size: 12px; color: var(--ui-text-2); }
.ui-option-list { display: flex; flex-direction: column; gap: 8px; }
/* Destello breve cuando un campo se completa solo (p. ej. al elegir un perfil). */
.ui-input--flash { background: var(--ui-ac-soft) !important; border-color: var(--ui-ac-text) !important; transition: background-color .6s; }
/* Pasos numerados ("Cómo funciona"). */
.ui-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: ui-step; }
.ui-steps li { position: relative; padding-left: 36px; font-size: 13px; line-height: 19px; color: var(--ui-text-2); counter-increment: ui-step; }
.ui-steps li::before {
content: counter(ui-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--ui-ac-soft); color: var(--ui-ac-text); font: 600 12px var(--ui-font);
}
.ui-steps strong { display: block; color: var(--ui-text); font-weight: 500; }
/* Dos columnas: contenido principal + panel lateral (se apilan en pantallas angostas). */
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .ui-split { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.ui-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Resumen de números arriba de una lista (fila de cifras). */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ui-stat { padding: 16px 24px; border-left: 1px solid var(--ui-line-soft); }
.ui-stat:first-child { border-left: 0; }
.ui-stat__value { font-size: 24px; font-weight: 500; line-height: 32px; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ui-stat__label { font-size: 13px; color: var(--ui-text-2); }
.ui-stat--danger .ui-stat__value { color: var(--ui-err); }
@media (max-width: 640px) { .ui-stat { border-left: 0; border-top: 1px solid var(--ui-line-soft); } .ui-stat:first-child { border-top: 0; } }
/* Barra de uso (cupo de pacientes, unidades). */
.ui-meter { height: 4px; border-radius: 2px; background: var(--ui-line-soft); overflow: hidden; }
.ui-meter__fill { height: 100%; border-radius: 2px; background: var(--ui-ac-text); }
.ui-meter--warning .ui-meter__fill { background: #f9ab00; }
.ui-meter--danger .ui-meter__fill { background: var(--ui-err); }
/* Búsqueda dentro de una barra de filtros. */
.ui-search { position: relative; flex: 0 1 280px; min-width: 200px; }
.ui-search .ui-input { padding-left: 38px; height: 32px; }
.ui-search > svg, .ui-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ui-text-2); pointer-events: none; }
/* Interruptor (activar / desactivar). */
.ui-switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex: none; cursor: pointer; }
.ui-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ui-switch span { position: absolute; inset: 0; border-radius: 10px; background: var(--ui-line); transition: background-color .15s; pointer-events: none; }
.ui-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.ui-switch input:checked + span { background: var(--ui-ac-text); }
.ui-switch input:checked + span::after { transform: translateX(16px); }
.ui-switch input:focus-visible + span { outline: 2px solid var(--ui-ac-text); outline-offset: 2px; }
/* Panel de diálogo nativo (