/* =============================================================================
   Modulo SALUD (clinicas y consultorios) — prefijo .sal-
   Un CSS por modulo (estrategia de 2026-05-26): ampliar este archivo, no crear
   uno nuevo por pagina. Colores por variable corporativa, nunca hexcodes sueltos.
   ============================================================================= */

.sal-page {
    --sal-azul: var(--primario, #1e3a5f);
    --sal-azul-medio: #2c5282;
    --sal-azul-claro: #1976d2;
    --sal-dorado: #d4af37;
    --sal-fondo: #f5f7fb;
    --sal-linea: #e0e4ec;
    --sal-ok: #2e7d32;
    --sal-warn: #c77700;
    --sal-critico: #c62828;
    padding: 0 4px 24px;
}

/* ── Cabecera de pagina ───────────────────────────────────────────────────── */
.sal-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--sal-azul) 0%, var(--sal-azul-medio) 100%);
    border-bottom: 3px solid var(--sal-dorado);
    border-radius: 8px 8px 0 0;
    padding: 18px 22px;
    color: #fff;
}

.sal-head__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.sal-head__sub {
    margin: 4px 0 0;
    font-size: .85rem;
    opacity: .85;
    max-width: 720px;
}

.sal-head__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Tarjetas y paneles ───────────────────────────────────────────────────── */
.sal-card {
    background: #fff;
    border: 1px solid var(--sal-linea);
    border-radius: 8px;
    padding: 16px 18px;
    margin-top: 14px;
}

.sal-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sal-azul);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sal-card__title i { color: var(--sal-azul-claro); }

.sal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* ── KPIs ─────────────────────────────────────────────────────────────────── */
.sal-kpi {
    background: #fff;
    border: 1px solid var(--sal-linea);
    border-left: 4px solid var(--sal-azul-claro);
    border-radius: 6px;
    padding: 12px 14px;
}

.sal-kpi__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.sal-kpi__value { font-size: 1.5rem; font-weight: 700; color: var(--sal-azul); line-height: 1.2; }
.sal-kpi--warn { border-left-color: var(--sal-warn); }
.sal-kpi--critico { border-left-color: var(--sal-critico); }
.sal-kpi--ok { border-left-color: var(--sal-ok); }

/* ── Tabla ────────────────────────────────────────────────────────────────── */
.sal-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sal-tabla thead th {
    background: var(--sal-azul);
    color: #fff;
    text-align: left;
    padding: 9px 10px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}
.sal-tabla tbody td { padding: 8px 10px; border-bottom: 1px solid var(--sal-linea); }
.sal-tabla tbody tr:nth-child(even) { background: #fafbfd; }
.sal-tabla tbody tr:hover { background: #eef4fb; }
.sal-tabla__vacia { text-align: center; color: #6b7280; padding: 28px 10px; }

/* Contenedor con scroll propio: la pagina nunca debe desplazarse en horizontal. */
.sal-scroll-x { overflow-x: auto; }

/* ── Alertas clinicas ─────────────────────────────────────────────────────── */
/* La alergia grave es lo primero que un profesional debe ver: color critico y peso. */
.sal-alerta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.sal-alerta--critica { background: #fdecec; color: var(--sal-critico); border: 1px solid #f5c6c6; }
.sal-alerta--alta { background: #fff4e5; color: var(--sal-warn); border: 1px solid #ffd9a8; }
.sal-alerta--info { background: #e8f1fb; color: var(--sal-azul-medio); border: 1px solid #c5dcf5; }
.sal-alerta--ok { background: #e9f5ea; color: var(--sal-ok); border: 1px solid #c3e3c6; }

/* ── Chips de estado ──────────────────────────────────────────────────────── */
.sal-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #eef1f6;
    color: #47536b;
}
.sal-chip--activo { background: #e9f5ea; color: var(--sal-ok); }
.sal-chip--inactivo { background: #f0f1f3; color: #6b7280; }

/* ── Ficha del paciente ───────────────────────────────────────────────────── */
.sal-paciente-head {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--sal-linea);
    border-left: 4px solid var(--sal-azul-claro);
    border-radius: 8px;
    padding: 12px 16px;
}
.sal-paciente-head__nombre { font-size: 1.05rem; font-weight: 700; color: var(--sal-azul); }
.sal-paciente-head__meta { font-size: .8rem; color: #6b7280; display: flex; gap: 12px; flex-wrap: wrap; }
.sal-paciente-head__hc {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #eef4fb;
    color: var(--sal-azul-medio);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .8rem;
}

/* ── Pestañas ─────────────────────────────────────────────────────────────── */
.sal-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--sal-linea); margin-top: 14px; }
.sal-tab {
    border: none;
    background: transparent;
    padding: 9px 14px;
    font-size: .85rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.sal-tab:hover { color: var(--sal-azul-medio); }
.sal-tab--activa { color: var(--sal-azul); border-bottom-color: var(--sal-dorado); }
.sal-tab__badge {
    display: inline-block;
    margin-left: 6px;
    background: #eef1f6;
    color: #47536b;
    border-radius: 999px;
    padding: 0 6px;
    font-size: .7rem;
}

/* ── Formularios ──────────────────────────────────────────────────────────── */
.sal-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sal-form-group { display: flex; flex-direction: column; gap: 4px; }
.sal-form-group > label { font-size: .75rem; font-weight: 600; color: #47536b; }
.sal-form-group > label .sal-req { color: var(--sal-critico); }

/* ── Aviso ────────────────────────────────────────────────────────────────── */
.sal-aviso {
    border-left: 4px solid var(--sal-azul-claro);
    background: #eef4fb;
    color: #2b3a4d;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .82rem;
    margin-top: 12px;
}
.sal-aviso--warn { border-left-color: var(--sal-warn); background: #fff8ee; }

@media (max-width: 768px) {
    .sal-head { flex-direction: column; }
    .sal-head__actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Asistente de IA de la consulta (F5)

   Se distingue del resto con un borde punteado y un fondo levemente
   distinto: quien mira la pantalla tiene que ver de un vistazo que eso
   es una propuesta, no la historia clinica.
   ═══════════════════════════════════════════════════════════════════ */

.sal-ia {
    border: 1px dashed #b9c6dc;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fd 100%);
    margin-bottom: 14px;
    overflow: hidden;
}

.sal-ia__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}

.sal-ia__head:hover { background: #eef3fb; }

.sal-ia__icono {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--sal-primario, #1e3a5f);
    color: #d4af37;
    font-size: .78rem;
}

.sal-ia__titulo { font-weight: 600; color: var(--sal-primario, #1e3a5f); font-size: .9rem; }
.sal-ia__sub    { flex: 1; color: #6b7a90; font-size: .78rem; }

.sal-ia__body { padding: 0 14px 14px; }

.sal-ia__aviso {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; margin-bottom: 10px;
    border-radius: 6px;
    background: #eef6ff; color: #1e3a5f;
    font-size: .8rem;
}
.sal-ia__aviso--error { background: #fdecec; color: #c62828; }

.sal-ia__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sal-ia__cargando { color: #2c5282; font-size: .8rem; align-self: center; }

.sal-ia__campo label { font-size: .78rem; font-weight: 600; color: #45536b; }
.sal-ia__campo small { color: #8894a8; font-size: .72rem; }

.sal-ia__bloque {
    margin-top: 12px; padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--sal-linea, #e0e4ec);
    border-left: 3px solid #d4af37;
    border-radius: 6px;
}

.sal-ia__bloque-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
    font-size: .82rem; font-weight: 600; color: var(--sal-primario, #1e3a5f);
}

.sal-ia__texto { font-size: .84rem; line-height: 1.5; margin: 0; white-space: pre-wrap; }

.sal-ia__soap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sal-ia__soap > div { background: #fafbfd; border-radius: 5px; padding: 8px 10px; }
.sal-ia__soap b { color: #2c5282; font-size: .78rem; }
.sal-ia__soap p { margin: 4px 0 0; font-size: .82rem; line-height: 1.45; white-space: pre-wrap; }

.sal-ia__campos { margin-top: 10px; font-size: .8rem; }
.sal-ia__campos > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dotted #e6eaf2; }
.sal-ia__campos > div span:first-child { color: #6b7a90; }

.sal-ia__nota { display: block; margin-top: 8px; color: #8894a8; font-size: .74rem; }
.sal-ia__nota--fuerte { color: #c77700; font-weight: 500; }

.sal-ia__tabla { width: 100%; font-size: .82rem; }
.sal-ia__tabla td { padding: 6px 4px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.sal-ia__fila--invalida { opacity: .65; }
.sal-ia__invalido { color: #c62828; font-size: .74rem; margin-top: 3px; }
.sal-ia__motivo   { color: #8894a8; font-size: .74rem; margin-top: 3px; }

@media (max-width: 768px) {
    .sal-ia__soap { grid-template-columns: 1fr; }
    .sal-ia__sub  { display: none; }
}

/* Panel de impacto de la IA, en Configuracion */
.sal-iaimp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sal-iaimp__kpi {
    background: #fff; border: 1px solid var(--sal-linea, #e0e4ec);
    border-radius: 8px; padding: 10px 12px;
}
.sal-iaimp__kpi span { display: block; color: #6b7a90; font-size: .74rem; }
.sal-iaimp__kpi b { font-size: 1.25rem; color: var(--sal-primario, #1e3a5f); }
.sal-iaimp__kpi--alerta b { color: #c62828; }

/* ═══════════════════════════════════════════════════════════════════
   Hospitalización (F6)

   El mapa de camas se lee de un vistazo por COLOR: es lo que mira
   enfermería al recorrer el piso, no una tabla que se estudia.
   ═══════════════════════════════════════════════════════════════════ */

.sal-camas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.sal-cama {
    border: 1px solid var(--sal-linea, #e0e4ec);
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    cursor: default;
    min-height: 78px;
}

.sal-cama--e1 { border-left-color: #2e7d32; }               /* libre */
.sal-cama--e2 { border-left-color: #1976d2; cursor: pointer; } /* ocupada */
.sal-cama--e3 { border-left-color: #c77700; }               /* reservada */
.sal-cama--e4 { border-left-color: #94a3b8; background: #f8fafc; } /* limpieza */
.sal-cama--e5 { border-left-color: #64748b; background: #f1f5f9; } /* mantenimiento */

.sal-cama--e2:hover { background: #f7fbff; }

.sal-cama__cod      { font-size: .74rem; color: #6b7a90; letter-spacing: .3px; }
.sal-cama__paciente { font-weight: 600; font-size: .88rem; color: #1e3a5f; margin-top: 3px; }
.sal-cama__linea    { font-size: .76rem; color: #6b7a90; margin-top: 2px; }
.sal-cama__estado   { font-size: .84rem; color: #6b7a90; margin-top: 6px; }
.sal-cama__alerta   { font-size: .76rem; color: #c62828; font-weight: 600; margin-top: 4px; }
.sal-cama__aviso    { font-size: .72rem; color: #c77700; margin-top: 4px; }

/* Alergias sobre el kárdex: quien va a administrar tiene que verlas sin buscarlas. */
.sal-alergias {
    background: #fdecec;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: .84rem;
    color: #c62828;
}
.sal-chip-alergia {
    display: inline-block;
    background: #fff; border: 1px solid #f3c2c2;
    border-radius: 10px; padding: 2px 9px; margin: 2px 4px 0 0;
    font-size: .8rem;
}

.sal-ind__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sal-ind__pauta { color: #6b7a90; font-size: .84rem; margin-left: 8px; }
.sal-ind__motivo { font-size: .8rem; color: #c77700; margin-top: 6px; }
.sal-ind__confirmar { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.sal-ind--suspendida { opacity: .7; }

.sal-tomas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.sal-toma {
    border: 1px solid var(--sal-linea, #e0e4ec);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: .8rem;
    min-width: 148px;
    background: #fff;
}
.sal-toma--e2 { background: #f1f8f2; border-color: #cfe6d2; }   /* administrada */
.sal-toma--e3 { background: #f8f9fb; color: #6b7a90; }          /* omitida */
.sal-toma--e4 { background: #fff8ee; }                          /* rechazada */
.sal-toma--vencida { border-color: #c62828; background: #fdf3f3; }

.sal-toma__hora   { font-weight: 600; color: #1e3a5f; }
.sal-toma__estado { color: #6b7a90; font-size: .74rem; }
.sal-toma__motivo { font-size: .72rem; color: #8894a8; margin-top: 3px; }
.sal-toma__acciones { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.sal-toma__confirmar { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; align-items: center; }

@media (max-width: 640px) {
    .sal-camas { grid-template-columns: 1fr 1fr; }
}

/* Buscadores con sugerencias (ingreso de hospitalización) */
.sal-card--foco { border-left: 4px solid var(--sal-claro, #1976d2); }

.sal-sugerencias {
    border: 1px solid var(--sal-linea, #e0e4ec);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
}
.sal-sugerencia {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f1f4f9;
    font-size: .86rem;
}
.sal-sugerencia:hover { background: #f2f7fd; }
.sal-sugerencia b { display: block; color: #1e3a5f; }
.sal-sugerencia span { color: #6b7a90; font-size: .78rem; }

.sal-elegido {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #f2f7fd; border: 1px solid #d6e4f5; border-radius: 6px;
    padding: 8px 10px; font-size: .88rem;
}

.sal-nota-campo { display: block; color: #c77700; font-size: .74rem; margin-top: 4px; }
.sal-acciones-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Chips de selección de reporte */
.sal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sal-chip {
    border: 1px solid var(--sal-linea, #e0e4ec);
    background: #fff; color: #45536b;
    border-radius: 20px; padding: 7px 14px;
    font-size: .84rem; cursor: pointer;
}
.sal-chip:hover { background: #f2f7fd; }
.sal-chip--activo {
    background: var(--sal-primario, #1e3a5f);
    border-color: var(--sal-primario, #1e3a5f);
    color: #fff;
}
.sal-chip i { margin-right: 5px; }

.sal-celda--alerta { color: #c62828; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   Odontograma FDI

   Cada pieza son 5 superficies en cruz: vestibular arriba, lingual
   abajo, mesial y distal a los lados, oclusal al centro. Es el dibujo
   que el odontólogo ya conoce; inventar otro obligaría a aprenderlo.
   ═══════════════════════════════════════════════════════════════════ */

.sal-odo { padding: 4px 0; }

.sal-odo__cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.sal-odo__sub { color: #6b7a90; font-size: .8rem; margin-left: 8px; }
.sal-odo__modo label { display: flex; align-items: center; gap: 6px; font-size: .84rem; cursor: pointer; }

.sal-odo__arcada {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 3px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 0;
}

/* Separador de la línea media: marca dónde termina un cuadrante. */
.sal-odo__linea { width: 2px; align-self: stretch; background: #cbd5e1; margin: 0 6px; }

/* Eje entre arcadas: superior arriba, inferior abajo. */
.sal-odo__eje { height: 2px; background: #e0e4ec; margin: 10px 0; }

.sal-odo__pieza { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sal-odo__nro { font-size: .66rem; color: #6b7a90; font-variant-numeric: tabular-nums; }

.sal-odo__caras {
    position: relative;
    width: 34px; height: 34px;
    display: grid;
    grid-template-columns: 8px 1fr 8px;
    grid-template-rows: 8px 1fr 8px;
    border: 1px solid #94a3b8;
    border-radius: 3px;
    overflow: hidden;
}

.sal-odo__cara { cursor: pointer; border: .5px solid #cbd5e1; transition: filter .1s; }
.sal-odo__cara:hover { filter: brightness(.85); }

.sal-odo__cara--v { grid-column: 1 / 4; grid-row: 1; }
.sal-odo__cara--m { grid-column: 1; grid-row: 2; }
.sal-odo__cara--o { grid-column: 2; grid-row: 2; }
.sal-odo__cara--d { grid-column: 3; grid-row: 2; }
.sal-odo__cara--l { grid-column: 1 / 4; grid-row: 3; }

.sal-odo__leyenda {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid var(--sal-linea, #e0e4ec);
    font-size: .78rem; color: #45536b;
}
.sal-odo__leyenda-item { display: inline-flex; align-items: center; gap: 5px; }
.sal-odo__muestra {
    width: 13px; height: 13px; border-radius: 3px;
    border: 1px solid #94a3b8; display: inline-block;
}

@media (max-width: 900px) {
    .sal-odo__caras { width: 28px; height: 28px; }
    .sal-odo__nro { font-size: .6rem; }
}

/* ── Sub-tarjeta de edición dentro de una tarjeta (editor inline) ─────────── */
.sal-subcard {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--linea-suave, #e0e4ec);
    border-left: 3px solid var(--secundario, #fe7800);
    border-radius: 6px;
    background: #fbfcfe;
}

/* ── Lista de chips con checkbox (especialidades de un profesional) ───────── */
.sal-chip-check-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sal-chip-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--linea-suave, #e0e4ec);
    border-radius: 999px;
    background: #fff;
    font-size: .8rem;
    line-height: 1;
}

.sal-chip-check:hover {
    border-color: var(--primario, #284A70);
}

.sal-mini-btn {
    border: none;
    background: transparent;
    color: var(--secundario, #fe7800);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 2px;
    white-space: nowrap;
}

.sal-mini-btn:hover {
    text-decoration: underline;
}

/* ── Resumen de la semana de un profesional (pestaña Horarios) ────────────── */
.sal-semana {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.sal-semana__dia {
    border: 1px solid var(--linea-suave, #e0e4ec);
    border-radius: 6px;
    background: #fff;
    padding: 8px;
    min-height: 84px;
}

.sal-semana__dia--vacio {
    background: #f7f8fa;
    border-style: dashed;
}

.sal-semana__nombre {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primario, #284A70);
    margin-bottom: 6px;
}

.sal-semana__sin {
    font-size: .72rem;
    color: #9aa3af;
    font-style: italic;
}

.sal-semana__franja {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px;
    margin-bottom: 4px;
    border-left: 3px solid var(--secundario, #fe7800);
    background: #fbfcfe;
    border-radius: 3px;
    font-size: .72rem;
    line-height: 1.25;
}

.sal-semana__franja span {
    color: #6b7280;
}

@media (max-width: 900px) {
    .sal-semana {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Clases de la pantalla de Hospitalización.
   Se escribió con nombres propios (sal-page__*, sal-kpis, sal-vacio...) que
   nunca existieron en este archivo, así que la pantalla salía sin estilo: los
   KPIs apilados a todo el ancho y la cabecera como texto suelto. Se definen
   acá para no renombrar 40 usos en el .razor.
   ═══════════════════════════════════════════════════════════════════════════ */

.sal-page__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sal-page__titulo {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primario, #284A70);
}

.sal-page__sub {
    margin: 2px 0 0;
    font-size: .82rem;
    color: #6b7280;
}

.sal-page__acciones {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Los KPIs van en rejilla: es lo que hacía falta para que no se apilen */
.sal-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.sal-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef4fb;
    color: var(--primario, #284A70);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Estado vacío de una sección entera (no de una tabla) */
.sal-vacio {
    padding: 26px 16px;
    text-align: center;
    color: #9aa3af;
    font-size: .85rem;
    border: 1px dashed var(--linea-suave, #e0e4ec);
    border-radius: 6px;
    background: #fbfcfe;
}

/* Alias del estado vacío de tabla: el resto del módulo usa __vacia */
.sal-tabla__vacio {
    padding: 22px 10px;
    text-align: center;
    color: #9aa3af;
    font-size: .85rem;
}

.sal-tabla__acciones {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .sal-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}