/* =========================================================================
   HOJA DE ESTILOS DEL SISTEMA SAN LUCAS CLÍNICA & CENTRO MÉDICO
   -------------------------------------------------------------------------
   Orden del archivo:
     1. Variables (colores, radios, sombras) y base tipográfica
     2. Controles de Bootstrap con el estilo de la marca (botones, campos,
        tablas)
     3. Armazón: menú lateral en computadora; barra superior, menú
        deslizable y pestañas inferiores en teléfono (ver MainLayout.razor)
     4. Piezas propias (.sl-*): encabezados, tarjetas, indicadores,
        etiquetas, avisos, portada de inicio de sesión
     5. Piezas heredadas que no conviene tocar: marca de agua, combos,
        casillas del rol de turnos, tablas con encabezado fijo
     6. Teléfono y pantallas angostas (todas las @media screen juntas)
     6b. Pantallas de trabajo en teléfono: tablas que se vuelven tarjetas,
        pestañas, total pegado abajo, rol de turnos por día
     7. Impresión
   Al cambiar algo aquí hay que subir el ?v= de app.css en App.razor, o el
   navegador sigue usando la copia vieja.
   ========================================================================= */

/* ---------- 1. Variables y base ---------- */

/* Los colores salen del logo: los dos azules de "SAN LUCAS", el morado del
   mapa y el amarillo de la cruz. Las variantes "suave" son fondos claros del
   mismo color, para iconos y etiquetas. */
:root {
    --sl-azul-oscuro: #004AAD;
    --sl-azul-hover: #003C8F;
    --sl-azul-claro: #38B6FF;
    --sl-azul-suave: #E8F1FF;
    --sl-morado: #3E008F;
    --sl-morado-hover: #2E006B;
    --sl-morado-suave: #EFE8FA;
    --sl-dorado: #FFDD55;
    --sl-dorado-suave: #FFF7D6;
    --sl-dorado-texto: #7A5C00;
    --sl-exito: #1E9E5A;
    --sl-exito-suave: #E3F7EC;
    --sl-peligro: #D63B3B;
    --sl-fondo: #F3F6FB;
    --sl-superficie: #FFFFFF;
    --sl-texto: #15202B;
    --sl-texto-suave: #5B6B7F;
    --sl-borde: #E1E8F0;
    --sl-radio: 12px;
    --sl-radio-chico: 8px;
    --sl-sombra: 0 1px 2px rgba(21, 32, 43, 0.04), 0 4px 16px rgba(0, 74, 173, 0.06);
    --sl-lateral-ancho: 260px;
    --sl-barra-alto: 56px;
}

/* La letra del sistema operativo (Segoe UI en Windows, San Francisco en
   iPhone, Roboto en Android): se ve nativa en cada aparato y no hay que
   bajar ninguna fuente, que en la clínica podría no haber internet. */
html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--sl-fondo);
    color: var(--sl-texto);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sl-texto);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--sl-azul-oscuro);
}

/* Marcas de validación de los formularios de Blazor */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.85rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ---------- 2. Controles de Bootstrap con el estilo de la marca ---------- */

.btn {
    border-radius: var(--sl-radio-chico);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--sl-azul-oscuro);
    border-color: var(--sl-azul-oscuro);
    color: #FFFFFF;
}

    /* Antes el hover era celeste con letra blanca: casi no se leía. */
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--sl-azul-hover) !important;
        border-color: var(--sl-azul-hover) !important;
        color: #FFFFFF;
    }

.btn-secondary {
    background-color: var(--sl-morado);
    border-color: var(--sl-morado);
    color: #FFFFFF;
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
        background-color: var(--sl-morado-hover) !important;
        border-color: var(--sl-morado-hover) !important;
        color: #FFFFFF;
    }

.btn-outline-primary {
    color: var(--sl-azul-oscuro);
    border-color: var(--sl-azul-oscuro);
}

    .btn-outline-primary:hover {
        background-color: var(--sl-azul-oscuro);
        border-color: var(--sl-azul-oscuro);
        color: #FFFFFF;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(56, 182, 255, 0.35);
}

.form-control, .form-select {
    border-radius: var(--sl-radio-chico);
    border-color: var(--sl-borde);
    color: var(--sl-texto);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--sl-azul-claro);
    }

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sl-texto-suave);
    margin-bottom: 0.3rem;
}

.form-text {
    color: var(--sl-texto-suave);
}

.form-check-input:checked {
    background-color: var(--sl-azul-oscuro);
    border-color: var(--sl-azul-oscuro);
}

.table {
    --bs-table-bg: transparent;
    color: var(--sl-texto);
}

    .table thead th {
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sl-texto-suave);
        background: #F8FAFD;
        border-bottom: 2px solid var(--sl-borde);
    }

    .table td {
        vertical-align: middle;
    }

.alert {
    border-radius: var(--sl-radio-chico);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35em 0.7em;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ocurrió un error."
    }
/* ---------- 3. Armazón ---------- */

/* Iconos SVG del sistema (Components/Shared/Icono.razor). Toman el tamaño
   de la letra y el color del texto que los rodea. */
.sl-icono {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.3em;
}

/* La casilla oculta que abre y cierra el menú en teléfono. Tiene que seguir
   existiendo (no display:none) para que las etiquetas <label for="sl-menu">
   la puedan marcar. */
.sl-menu-interruptor {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.sl-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Menú lateral de computadora: pegado a la izquierda, siempre a la vista. */
.sl-lateral {
    width: var(--sl-lateral-ancho);
    flex: 0 0 var(--sl-lateral-ancho);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--sl-azul-oscuro);
    color: #FFFFFF;
    z-index: 1100;
}

.sl-principal {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sl-contenido {
    width: 100%;
    max-width: 1400px;
    padding: 24px 28px 48px;
}

/* Piezas de teléfono: en computadora no existen. */
.sl-barra-movil, .sl-barra-inferior, .sl-telon, .sl-nav-cerrar {
    display: none;
}

/* ----- El menú en sí (NavMenu.razor) ----- */

.sl-sidebar {
    background-color: var(--sl-azul-oscuro);
    color: #FFFFFF;
}

    .sl-sidebar a {
        color: #E3F2FF;
        text-decoration: none;
    }

.sl-nav {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sl-marca {
    position: relative;
    padding: 20px 18px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.sl-marca-logo {
    max-width: 150px;
    width: 100%;
    filter: brightness(0) invert(1);
}

.sl-marca-texto {
    margin-top: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #BFDCFF;
}

.sl-nav-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    margin: 0;
}

.sl-nav-lista {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 2px;
    padding: 10px 10px 16px;
}

.sl-nav-grupo {
    padding: 14px 10px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9FC7EE;
}

.sl-nav-enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--sl-radio-chico);
    border-left: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 0.15s ease;
}

    .sl-nav-enlace .sl-icono {
        width: 22px;
        height: 22px;
        opacity: 0.9;
    }

    .sl-nav-enlace:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
    }

    .sl-nav-enlace.active {
        background-color: rgba(255, 255, 255, 0.16);
        border-left-color: var(--sl-dorado);
        color: #FFFFFF;
        font-weight: 600;
    }

/* Pie del menú: quién está conectado y el botón de salir. */
.sl-nav-pie {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.12);
}

.sl-nav-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border-radius: var(--sl-radio-chico);
}

    .sl-nav-usuario:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
    }

.sl-nav-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sl-azul-claro);
    color: #FFFFFF;
}

.sl-nav-usuario-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sl-nav-nombre {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-nav-rol {
    font-size: 0.72rem;
    color: #BFDCFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-nav-salir {
    margin: 0;
}

.sl-boton-salir {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #E3F2FF;
}

    .sl-boton-salir:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #FFFFFF;
    }

/* ---------- 4. Piezas propias ---------- */

/* Barra superior con el logo (se conserva por si alguna pantalla la usa) */
.sl-topbar {
    background-color: #FFFFFF;
    border-bottom: 3px solid var(--sl-azul-oscuro);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .sl-topbar img {
        height: 42px;
    }

/* Encabezado de pantalla: título a la izquierda, botón principal a la derecha */
.sl-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

    .sl-encabezado h1, .sl-encabezado h3 {
        margin: 0;
        color: var(--sl-azul-oscuro);
    }

    .sl-encabezado p {
        margin: 2px 0 0;
        color: var(--sl-texto-suave);
    }

/* Tarjetas / paneles de formularios */
.sl-card {
    background: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio);
    padding: 20px;
    box-shadow: var(--sl-sombra);
}

    .sl-card h3 {
        color: var(--sl-azul-oscuro);
        font-size: 1.05rem;
        border-bottom: 2px solid var(--sl-azul-suave);
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

/* Indicadores de la pantalla de inicio */
.sl-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sl-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px 18px;
    background: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio);
    box-shadow: var(--sl-sombra);
}

.sl-kpi-icono {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--sl-azul-suave);
    color: var(--sl-azul-oscuro);
}

    .sl-kpi-icono .sl-icono {
        width: 24px;
        height: 24px;
    }

.sl-kpi-morado .sl-kpi-icono { background: var(--sl-morado-suave); color: var(--sl-morado); }
.sl-kpi-dorado .sl-kpi-icono { background: var(--sl-dorado-suave); color: var(--sl-dorado-texto); }
.sl-kpi-verde .sl-kpi-icono { background: var(--sl-exito-suave); color: var(--sl-exito); }

.sl-kpi-texto {
    min-width: 0;
}

.sl-kpi-etiqueta {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sl-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-kpi-valor {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sl-texto);
    white-space: nowrap;
}

.sl-kpi-dorado .sl-kpi-valor { color: var(--sl-dorado-texto); }

/* Etiquetas de estado de pago (Modulo de Pagos a Personal) */
.badge-pendiente {
    background-color: var(--sl-dorado);
    color: #4A3B00;
}

.badge-pagado {
    background-color: #2ECC71;
    color: #FFFFFF;
}

.badge-depositado {
    background-color: var(--sl-azul-claro);
    color: #FFFFFF;
}

.badge-seguros {
    background-color: var(--sl-morado);
    color: #FFFFFF;
}

/* Totales destacados (ej. Total general de la cirugia) */
.sl-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sl-morado);
}

.sl-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--sl-azul-suave);
    color: var(--sl-azul-oscuro);
}

/* Fila "no hay nada" de una tabla */
.sl-vacio {
    text-align: center;
    color: var(--sl-texto-suave);
    padding: 18px 8px !important;
}

/* Avisos de pantalla completa: error, acceso denegado, cuenta bloqueada */
.sl-aviso {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

    .sl-contenido .sl-aviso {
        margin-top: 40px;
    }

    .sl-aviso h1 {
        font-size: 1.3rem;
        color: var(--sl-azul-oscuro);
    }

    .sl-aviso p {
        color: var(--sl-texto-suave);
    }

.sl-aviso-icono {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sl-dorado-suave);
    color: var(--sl-dorado-texto);
}

    .sl-aviso-icono .sl-icono {
        width: 32px;
        height: 32px;
    }

.sl-aviso-detalle {
    font-size: 0.8rem;
}

/* Menú de "Mi cuenta" */
.sl-cuenta-menu {
    padding: 10px;
}

    .sl-cuenta-menu .nav-link {
        color: var(--sl-texto);
        border-radius: var(--sl-radio-chico);
        font-size: 0.92rem;
    }

    .sl-cuenta-menu .nav-link.active {
        background-color: var(--sl-azul-oscuro);
        color: #FFFFFF;
    }

/* Formularios cortos (crear usuario) */
.sl-formulario-angosto {
    max-width: 640px;
}

/* ----- Portada: inicio de sesión y pantallas sin sesión ----- */
.sl-portada {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, #003C8F 0%, var(--sl-azul-oscuro) 45%, var(--sl-morado) 100%);
    color: #FFFFFF;
}

.sl-portada-cuerpo {
    width: 100%;
    max-width: 440px;
}

    .sl-portada-cuerpo h1, .sl-portada-cuerpo h2 {
        color: #FFFFFF;
    }

    .sl-portada-cuerpo a {
        color: #FFFFFF;
    }

.sl-portada-tarjeta {
    background: var(--sl-superficie);
    color: var(--sl-texto);
    border-radius: 18px;
    padding: 28px 26px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

    .sl-portada-tarjeta h1, .sl-portada-tarjeta h2, .sl-portada-tarjeta h3 {
        color: var(--sl-azul-oscuro);
    }

    .sl-portada-tarjeta a {
        color: var(--sl-azul-oscuro);
        text-decoration: none;
    }

        .sl-portada-tarjeta a:hover {
            text-decoration: underline;
        }

.sl-portada-marca {
    text-align: center;
    margin-bottom: 20px;
}

    .sl-portada-marca img {
        max-width: 210px;
        width: 100%;
        height: auto;
    }

    .sl-portada-marca div {
        margin-top: 6px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--sl-morado);
    }

.sl-portada-nota {
    text-align: center;
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ---------- 5. Piezas heredadas ----------
   Marca de agua, combos escribibles, casillas del rol de turnos y tablas
   con encabezado fijo. Vienen tal cual de la versión anterior: cada regla
   tiene su comentario con el porqué, y varias (los z-index) se ganaron a
   golpes. */

/* ============ MARCA DE AGUA DEL LOGO EN CADA MODULO ============ */
.content {
    position: relative;
    z-index: 0;
}

    .content::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('images/san_lucas_logo.png');
        background-repeat: no-repeat;
        background-position: center 55%;
        background-size: 480px;
        opacity: 0.05;
        z-index: -1;
        pointer-events: none;
    }
/* Las tarjetas quedan solidas encima de la marca de agua, que solo se
   asoma en los espacios entre tarjetas y en el fondo general.

   OJO: aqui NO va "z-index". Con un z-index numerico cada tarjeta se
   convierte en un contexto de apilamiento propio, y entonces el z-index de
   lo que lleva adentro (la lista desplegable de un combobox) solo compite
   dentro de esa tarjeta: por alto que sea, las tarjetas que vienen despues
   se le montaban encima y la lista salia por detras. Con "position:
   relative" sola la tarjeta sigue tapando la marca de agua (que va en
   z-index negativo) sin encerrar a sus hijos. */
.sl-card {
    position: relative;
}

/* ============ COMBOBOX ESCRIBIBLES ============
   Los campos de lista del sistema (personal, procedimientos, insumos...)
   dejan escribir para filtrar. La lista se despliega flotando encima del
   resto, por eso el z-index alto: tiene que ganarle a los encabezados
   fijos de las tablas, que llegan a z-index 5. */
.sl-combo {
    position: relative;
}

/* Mientras el combo esta abierto, la caja entera sube de nivel. Con el
   z-index solo en la lista, bastaba con que un contenedor de mas arriba
   abriera su propio contexto de apilamiento para que las tarjetas que
   vienen despues en la pagina se le montaran encima. Subiendo el
   contenedor, la lista gana en cualquier contexto donde le toque competir. */
.sl-combo:focus-within {
    z-index: 1060;
}

.sl-combo-lista {
    position: absolute;
    z-index: 1060;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

    .sl-combo-lista .list-group-item.active {
        background-color: var(--sl-morado);
        border-color: var(--sl-morado);
        color: #FFFFFF;
    }

/* ============ CASILLAS DEL ROL DE TURNOS ============
   Cada dia del rol es un <select>. Bootstrap le dibuja el triangulito
   del desplegable a 0.75rem del borde derecho y NO le reserva ese
   espacio salvo con su relleno de origen, que aqui habria hecho las
   columnas tan anchas que no cabria ni media quincena. Al apretarlas,
   el triangulito quedaba encima del texto y el valor mas importante
   —"A/B/C", el turno de 24 horas— se leia tachado.

   La solucion es correr el triangulito contra el borde, achicarlo, y
   reservarle el hueco justo con el relleno derecho. Se conserva a
   proposito: es lo unico que hace ver que la casilla vacia se puede
   llenar. */
.sl-celda-turno {
    padding: 2px 15px 2px 3px !important;
    background-position: right 3px center !important;
    background-size: 9px 7px !important;
    text-align: center;
    /* Chrome centra el texto del select con text-align; Firefox solo
       hace caso a text-align-last. */
    text-align-last: center;
}

/* ============ TABLAS LARGAS CON ENCABEZADO FIJO ============
   En el rol de turnos y en la planilla hay mas de 20 filas de personal.
   Al bajar hasta las enfermeras, la fila de fechas (o de columnas) se
   perdia de vista y ya no se sabia en que dia se estaba escribiendo.

   La solucion es que la tabla tenga su propio scroll con una altura
   maxima, y que el encabezado quede pegado arriba de ESE scroll.
   (Si el que se desplaza fuera la pagina entera, "position: sticky" no
   funcionaria aqui, porque el contenedor ya scrollea en horizontal.) */
/* El layout de Blazor pone el contenido en un flex. Un elemento flex no se
   encoge por debajo de su contenido a menos que se le diga (min-width:auto
   es el valor por defecto), asi que sin esto una tabla ancha estiraba la
   pagina entera en vez de dejar que la tabla scrollee por dentro. */
main, article.content {
    min-width: 0;
}

.sl-tabla-fija {
    overflow: auto;
    max-height: 68vh;
    /* Sin relleno arriba: el encabezado se pega al borde mismo de la
       tarjeta. Si quedara relleno, por esa franja se verian pasar las
       filas por detras del encabezado al desplazarse. */
    padding-top: 0;
}

    .sl-tabla-fija table {
        margin-bottom: 0;
    }

    .sl-tabla-fija thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #FFFFFF;
        /* El borde normal se va con el scroll, asi que se dibuja con
           box-shadow, que si acompana a la celda pegada. */
        box-shadow: inset 0 -2px 0 var(--sl-azul-claro);
    }

/* Ademas, en el rol de turnos la primera columna (nombre del personal) se
   queda a la vista al desplazarse en horizontal, para no perder de vista
   de quien es la fila que se esta llenando. */
.sl-col-fija tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #FFFFFF;
}

/* La celda de la esquina se queda pegada arriba Y a la izquierda, por eso
   necesita el z-index mas alto de la tabla. */
.sl-col-fija.sl-tabla-fija thead th:first-child {
    left: 0;
    z-index: 5;
}
/* Estos elementos solo existen para el papel; en pantalla nunca se ven */
.solo-impresion {
    display: none;
}

img.sl-print-watermark {
    width: 260px;
    max-width: 260px;
    height: auto;
}


/* ---------- 6. Teléfono y pantallas angostas ----------
   Todas con "screen": en papel la hoja mide menos de 800 px y sin eso estas
   reglas se colaban en la impresión. */

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

@media screen and (max-width: 900px) {
    body {
        overflow-x: hidden;
    }

    .sl-app {
        display: block;
    }

    /* Barra de arriba: botón de menú, logo y nombre. */
    .sl-barra-movil {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 1000;
        height: calc(var(--sl-barra-alto) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 10px 0;
        background: var(--sl-azul-oscuro);
        color: #FFFFFF;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .sl-boton-menu {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #FFFFFF;
        cursor: pointer;
        margin: 0;
    }

        .sl-boton-menu .sl-icono {
            width: 26px;
            height: 26px;
        }

    .sl-barra-logo {
        height: 30px;
        width: auto;
        filter: brightness(0) invert(1);
    }

    .sl-barra-titulo {
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.02em;
    }

    /* El menú lateral se esconde a la izquierda y se desliza al marcar la
       casilla #sl-menu (los botones de menú son etiquetas de esa casilla). */
    .sl-lateral {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(300px, 86vw);
        height: auto;
        transform: translateX(-102%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
        z-index: 1100;
    }

    /* Fondo oscuro detrás del menú abierto; tocarlo lo cierra. */
    .sl-telon {
        display: block;
        position: fixed;
        inset: 0;
        margin: 0;
        background: rgba(21, 32, 43, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1090;
    }

    .sl-menu-interruptor:checked ~ .sl-lateral {
        transform: none;
    }

    .sl-menu-interruptor:checked ~ .sl-telon {
        opacity: 1;
        pointer-events: auto;
    }

    .sl-nav-cerrar {
        display: flex;
    }

    .sl-contenido {
        padding: 16px 16px calc(var(--sl-barra-alto) + 24px + env(safe-area-inset-bottom));
    }

    /* Pestañas de abajo con los accesos más usados. */
    .sl-barra-inferior {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: var(--sl-superficie);
        border-top: 1px solid var(--sl-borde);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 10px rgba(21, 32, 43, 0.06);
    }

    .sl-pestana {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: var(--sl-barra-alto);
        margin: 0;
        font-size: 0.66rem;
        font-weight: 600;
        color: var(--sl-texto-suave);
        text-decoration: none;
        cursor: pointer;
    }

        .sl-pestana .sl-icono {
            width: 24px;
            height: 24px;
        }

        .sl-pestana.active, .sl-pestana:hover {
            color: var(--sl-azul-oscuro);
        }

    /* La marca de agua no cabe en un teléfono, y el contexto de apilamiento
       que necesita (.content con z-index:0, ver sección 5) encerraría las
       listas desplegables de los combos debajo de la barra de pestañas. */
    .content::before {
        display: none;
    }

    article.content {
        z-index: auto;
    }

    /* Campos a 16px: con menos, iPhone hace zoom solo al tocar un campo.
       Y 44px de alto es el mínimo cómodo para el dedo. */
    .form-control, .form-select, .sl-combo input {
        font-size: 16px;
        min-height: 44px;
    }

    .form-control-sm, .form-select-sm {
        min-height: 38px;
    }

    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    .sl-card {
        padding: 16px;
    }

    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }
}

@media screen and (max-width: 768px) {
    /* Las tablas anchas se desplazan de lado dentro de su tarjeta en vez de
       estirar la pantalla entera. Las de encabezado fijo ya tienen su propio
       contenedor con scroll y se dejan como están. */
    .sl-card table.table:not(.sl-tabla-apilable):not(.sl-tabla-formulario):not(.sl-tabla-ficha):not(.sl-recibo) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sl-card .sl-tabla-fija table.table {
        display: table;
        overflow: visible;
    }

    /* Tablas apilables: cada fila se vuelve una tarjetita con
       "etiqueta: valor" por celda. La etiqueta sale del atributo
       data-etiqueta de cada <td> (ver Home.razor). Solo para tablas cortas
       de pocas columnas; las anchas de trabajo se desplazan de lado. */
    .sl-tabla-apilable thead {
        display: none;
    }

    .sl-tabla-apilable, .sl-tabla-apilable tbody, .sl-tabla-apilable tr {
        display: block;
        width: 100%;
    }

    .sl-tabla-apilable tr {
        border: 1px solid var(--sl-borde);
        border-radius: var(--sl-radio-chico);
        padding: 8px 12px;
        margin-bottom: 8px;
        background: var(--sl-superficie);
    }

    .sl-tabla-apilable td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 3px 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right;
    }

        .sl-tabla-apilable td::before {
            content: attr(data-etiqueta);
            flex: none;
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--sl-texto-suave);
            text-align: left;
        }

        .sl-tabla-apilable td[colspan] {
            display: block;
            text-align: center;
        }

            .sl-tabla-apilable td[colspan]::before {
                content: none;
            }
}

@media screen and (max-width: 480px) {
    .sl-kpis {
        gap: 10px;
        grid-auto-flow: dense;
    }

    /* Las cifras en lempiras no caben en media pantalla: van a todo lo ancho */
    .sl-kpi-dinero {
        grid-column: 1 / -1;
    }
    .sl-kpi-etiqueta {
        white-space: normal;
    }

    .sl-kpi-valor {
        font-size: 1.25rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sl-kpi {
        padding: 12px 12px;
        gap: 10px;
    }

    .sl-kpi-icono {
        width: 38px;
        height: 38px;
    }

    .sl-kpi-valor {
        font-size: 1.15rem;
        white-space: normal;
        word-break: break-word;
    }

    .sl-portada {
        align-items: flex-start;
        padding: 40px 12px 24px;
    }

    .sl-portada-tarjeta {
        padding: 22px 18px 20px;
    }
}

/* ---------- 6b. Pantallas de trabajo en teléfono ----------
   Las pantallas de captura y de consulta (Registrar caso, Turnos, Pagos,
   Cobros, Reportes, Catálogos) se arman con tablas. En un teléfono una tabla
   de nueve columnas no sirve, así que abajo de 768 px cada fila se vuelve
   una tarjeta. Qué clase lleva cada tabla y cada celda (ver también
   "Diseño de teléfono" en LEEME.md):

   .sl-tabla-apilable    tabla de consulta: cada fila es una tarjeta con
                         "etiqueta: valor" por celda (data-etiqueta del <td>).
       td.sl-celda-titulo    la celda principal (paciente, persona): arriba,
                             en grande y sin etiqueta.
       td.sl-celda-campo     celda con un control (estado, fecha de pago):
                             etiqueta arriba y el control a todo lo ancho.
       td.sl-celda-ancha     texto largo (observaciones, recordatorio).
       td.sl-celda-acciones  botones de la fila, repartidos a lo ancho.
       tr.sl-fila-grupo      fila que encabeza un grupo (un día, un cargo).
       tr.sl-fila-detalle    fila desplegable pegada a la anterior (abonos,
                             cobros extra).
   .sl-tabla-formulario  tabla de captura (una fila = varios campos): cada
                         fila es una tarjeta con los campos apilados.
       td.sl-mitad / td.sl-tercio  campo a media / a un tercio del ancho.
       td.sl-valor           dato calculado (el total de la fila).
       td.sl-casilla         casilla "Activo" con su etiqueta al lado.
       td.sl-texto           texto fijo, sin etiqueta.
       td.sl-accion          el botón de quitar, a la derecha.
   .sl-tabla-ficha       tabla de dos columnas "dato / valor" (resúmenes):
                         el dato queda arriba del valor, en letra pequeña.
   .sl-recibo            las tablas del recibo del paciente (Reportes).
   .sl-barra-total       tarjeta del total general: en teléfono se queda
                         pegada abajo mientras se llena el formulario.
   .sl-indicador         tarjeta chica de cifra (total pendiente, etc.).
   .sl-solo-telefono / .sl-solo-computadora
                         piezas que existen solo en uno de los dos tamaños
                         (la vista por día del rol de turnos, por ejemplo).
   En computadora todo esto se ve como siempre: las clases no cambian nada
   arriba de 768 px, salvo las pestañas y las tarjetas de cifra, que ahora
   tienen el mismo estilo en los dos tamaños. */

/* Pestañas de las pantallas (Reportes, Pagos, Turnos, Catálogos) */
.nav-tabs {
    border-bottom: 2px solid var(--sl-borde);
    gap: 4px;
}

    .nav-tabs .nav-link {
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        margin-bottom: -2px;
        padding: 10px 14px;
        font-weight: 600;
        color: var(--sl-texto-suave);
        white-space: nowrap;
    }

        .nav-tabs .nav-link:hover {
            color: var(--sl-azul-oscuro);
            border-bottom-color: var(--sl-azul-suave);
        }

        .nav-tabs .nav-link.active {
            color: var(--sl-azul-oscuro);
            border-bottom-color: var(--sl-azul-oscuro);
            background: transparent;
        }

/* Tarjetas de cifra (total pendiente, total pagado, casos del mes...) */
.sl-indicador {
    padding: 14px 12px;
}

    .sl-indicador > div:first-child {
        font-size: 0.74rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--sl-texto-suave);
        margin-bottom: 4px;
    }

    .sl-indicador .sl-total {
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

@media screen and (min-width: 769px) {
    .sl-solo-telefono {
        display: none !important;
    }
}

/* ----- Rol de turnos en teléfono: por día o por persona -----
   (RolTurnos.razor solo dibuja estas piezas en pantallas angostas) */

/* Selector de vista: botones pegados, como los de un teléfono */
.sl-segmentos {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 12px;
    background: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: 999px;
}

    .sl-segmentos button {
        flex: 1 1 0;
        min-height: 38px;
        padding: 8px 6px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--sl-texto-suave);
    }

        .sl-segmentos button.activo {
            background: var(--sl-azul-oscuro);
            color: #FFFFFF;
        }

/* Día que se está viendo, con flechas para ir al anterior y al siguiente */
.sl-dia-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

    .sl-dia-nav .btn {
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sl-dia-nav strong {
        flex: 1 1 auto;
        text-align: center;
        font-size: 1.05rem;
        color: var(--sl-azul-oscuro);
    }

/* Tira de días del período, se desliza de lado */
.sl-dias-tira {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    margin: 0 -4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .sl-dias-tira::-webkit-scrollbar {
        display: none;
    }

.sl-dia-chip {
    flex: none;
    width: 46px;
    padding: 6px 0;
    border: 1px solid var(--sl-borde);
    border-radius: 10px;
    background: var(--sl-superficie);
    text-align: center;
    line-height: 1.15;
    cursor: pointer;
}

    .sl-dia-chip small {
        display: block;
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--sl-texto-suave);
    }

    .sl-dia-chip span {
        display: block;
        font-size: 1rem;
        font-weight: 700;
    }

    .sl-dia-chip.hoy {
        border-color: var(--sl-azul-claro);
        box-shadow: inset 0 0 0 1px var(--sl-azul-claro);
    }

    .sl-dia-chip.activo {
        background: var(--sl-azul-oscuro);
        border-color: var(--sl-azul-oscuro);
        color: #FFFFFF;
    }

        .sl-dia-chip.activo small {
            color: #BFDCFF;
        }

    /* Puntito verde: ese día ya tiene turnos anotados */
    .sl-dia-chip.lleno::after {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        margin: 3px auto 0;
        border-radius: 50%;
        background: var(--sl-exito);
    }

    .sl-dia-chip.activo.lleno::after {
        background: var(--sl-dorado);
    }

/* Lista de personas (vista por día) o de días (vista por persona) */
.sl-lista-grupo {
    padding: 12px 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-azul-oscuro);
}

.sl-lista-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sl-borde);
}

    .sl-lista-fila:last-child {
        border-bottom: 0;
    }

.sl-lista-texto {
    flex: 1 1 auto;
    min-width: 0;
}

    .sl-lista-texto strong {
        display: block;
        font-size: 0.95rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sl-lista-texto small {
        display: block;
        font-size: 0.76rem;
        color: var(--sl-texto-suave);
    }

.sl-lista-fila .form-select {
    flex: none;
    width: 108px;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
}

/* Cuánta gente hay en cada turno ese día */
.sl-cobertura {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

    .sl-cobertura span {
        padding: 4px 10px;
        border-radius: 999px;
        background: var(--sl-azul-suave);
        color: var(--sl-azul-oscuro);
        font-size: 0.8rem;
        font-weight: 600;
    }

        .sl-cobertura span.sin-gente {
            background: #FDE8E8;
            color: var(--sl-peligro);
        }

@media screen and (max-width: 768px) {
    .sl-solo-computadora {
        display: none !important;
    }

    /* Pestañas: una sola línea que se desliza de lado, de borde a borde */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px 14px;
        padding: 0 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-link {
            padding: 12px 12px;
            font-size: 0.9rem;
        }

    /* Encabezado de pantalla: el botón principal a todo lo ancho */
    .sl-encabezado > .btn, .sl-encabezado > a.btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Avisos con botón (editando, borrador recuperado): el botón baja solo */
    .alert.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

        .alert.d-flex > .btn {
            flex: 1 1 100%;
        }

    /* Grupos de botones: se reparten el ancho */
    .sl-acciones {
        flex-wrap: wrap;
    }

        .sl-acciones > .btn {
            flex: 1 1 auto;
        }

    /* Menú de "Mi cuenta": píldoras en una fila que se desliza */
    .sl-cuenta-menu {
        padding: 6px;
    }

        .sl-cuenta-menu .nav {
            flex-direction: row !important;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 6px;
            scrollbar-width: none;
        }

            .sl-cuenta-menu .nav::-webkit-scrollbar {
                display: none;
            }

        .sl-cuenta-menu .nav-link {
            white-space: nowrap;
            border: 1px solid var(--sl-borde);
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 0.85rem;
        }

    /* Tarjeta del total general: pegada abajo mientras se llena el
       formulario, justo encima de la barra de pestañas */
    .sl-barra-total {
        position: sticky;
        bottom: calc(var(--sl-barra-alto) + env(safe-area-inset-bottom) + 8px);
        z-index: 40;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
        border-color: var(--sl-azul-claro);
        box-shadow: 0 -6px 24px rgba(21, 32, 43, 0.14);
    }

        .sl-barra-total .sl-total {
            font-size: 1.25rem !important;
            text-align: center;
        }

        .sl-barra-total .btn {
            width: 100%;
        }

    /* Las tablas con encabezado fijo pasan a tarjetas: ya no necesitan su
       propio scroll (la cuadrícula del rol sí lo conserva) */
    .sl-tabla-fija:not(.sl-rol-turnos) {
        max-height: none;
        overflow: visible;
        padding-top: 16px;
    }

    /* --- Tabla apilada: celdas especiales --- */
    .sl-tabla-apilable tr {
        padding: 10px 14px;
        margin-bottom: 10px;
        box-shadow: var(--sl-sombra);
    }

    .sl-tabla-apilable td {
        padding: 4px 0 !important;
    }

        .sl-tabla-apilable td:empty {
            display: none;
        }

        .sl-tabla-apilable td.sl-celda-titulo {
            display: block;
            text-align: left;
            font-size: 1rem;
            font-weight: 700;
            color: var(--sl-azul-oscuro);
            padding: 0 0 6px !important;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--sl-borde) !important;
        }

            .sl-tabla-apilable td.sl-celda-titulo::before {
                content: none;
            }

        .sl-tabla-apilable td.sl-celda-campo, .sl-tabla-apilable td.sl-celda-ancha {
            flex-direction: column;
            align-items: stretch;
            text-align: left;
            gap: 3px;
        }

        .sl-tabla-apilable td.sl-celda-campo {
            padding-top: 8px !important;
        }

        .sl-tabla-apilable td.sl-celda-ancha {
            font-size: 0.9rem;
            max-width: none !important;
        }

        .sl-tabla-apilable td.sl-celda-acciones {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding-top: 10px !important;
        }

            .sl-tabla-apilable td.sl-celda-acciones::before {
                content: none;
            }

            .sl-tabla-apilable td.sl-celda-acciones .btn {
                flex: 1 1 auto;
                margin: 0 !important;
            }

    /* Fila que encabeza un grupo (un día de la planilla) */
    .sl-tabla-apilable tr.sl-fila-grupo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        margin: 16px 0 8px;
        background: var(--sl-azul-suave) !important;
        border-color: transparent;
        box-shadow: none;
        font-weight: 700;
        color: var(--sl-azul-oscuro);
    }

        .sl-tabla-apilable tr.sl-fila-grupo td, .sl-tabla-apilable tr.sl-fila-grupo td[colspan] {
            display: block;
            padding: 0 !important;
            text-align: left;
            font-weight: 700;
            color: inherit;
        }

            .sl-tabla-apilable tr.sl-fila-grupo td::before {
                content: none;
            }

            .sl-tabla-apilable tr.sl-fila-grupo td:last-child {
                text-align: right;
            }

    /* Fila desplegable pegada a la de arriba (abonos, cobros extra) */
    .sl-tabla-apilable tr.sl-fila-detalle {
        margin-top: -10px;
        border-top: 0;
        border-radius: 0 0 var(--sl-radio-chico) var(--sl-radio-chico);
        background: var(--sl-fondo);
    }

        .sl-tabla-apilable tr.sl-fila-detalle td, .sl-tabla-apilable tr.sl-fila-detalle td[colspan] {
            display: block;
            text-align: left;
            background: transparent !important;
        }

            .sl-tabla-apilable tr.sl-fila-detalle td::before {
                content: none;
            }

    /* Pie de tabla: "TOTAL: valor" en una franja azul */
    .sl-tabla-apilable tfoot {
        display: block;
    }

        .sl-tabla-apilable tfoot tr {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: baseline;
            gap: 4px 12px;
            background: var(--sl-azul-suave) !important;
            border-color: transparent;
            box-shadow: none;
            font-weight: 700;
        }

        .sl-tabla-apilable tfoot td, .sl-tabla-apilable tfoot td[colspan] {
            display: block;
            width: auto;
            padding: 0 !important;
            text-align: left;
        }

            .sl-tabla-apilable tfoot td::before {
                content: none;
            }

            .sl-tabla-apilable tfoot td[data-etiqueta] {
                flex: 1 1 100%;
                display: flex;
                justify-content: space-between;
            }

                .sl-tabla-apilable tfoot td[data-etiqueta]::before {
                    content: attr(data-etiqueta);
                }

    /* --- Tabla de captura: cada fila es una tarjeta de campos --- */
    .sl-tabla-formulario thead {
        display: none;
    }

    .sl-tabla-formulario, .sl-tabla-formulario tbody {
        display: block;
        width: 100%;
    }

    .sl-tabla-formulario tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--sl-borde);
        border-radius: var(--sl-radio-chico);
        background: var(--sl-superficie);
        box-shadow: var(--sl-sombra);
    }

    .sl-tabla-formulario td {
        display: block;
        flex: 1 1 100%;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

        .sl-tabla-formulario td[data-etiqueta]::before {
            content: attr(data-etiqueta);
            display: block;
            margin-bottom: 4px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--sl-texto-suave);
        }

        .sl-tabla-formulario td.sl-mitad {
            flex: 1 1 calc(50% - 5px);
        }

        .sl-tabla-formulario td.sl-tercio {
            flex: 1 1 calc(33.33% - 7px);
        }

        .sl-tabla-formulario td.sl-valor {
            flex: 1 1 auto;
            padding-bottom: 8px !important;
            font-size: 1rem;
            font-weight: 700;
            color: var(--sl-morado);
        }

        .sl-tabla-formulario td.sl-texto {
            flex: 1 1 auto;
            align-self: center;
            font-weight: 600;
        }

        .sl-tabla-formulario td.sl-casilla {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 8px !important;
        }

            .sl-tabla-formulario td.sl-casilla::before {
                display: inline;
                margin: 0;
                order: 2;
            }

            .sl-tabla-formulario td.sl-casilla .form-check-input {
                margin: 0;
                width: 22px;
                height: 22px;
            }

        .sl-tabla-formulario td.sl-accion {
            flex: 0 0 auto;
            margin-left: auto;
        }

            .sl-tabla-formulario td.sl-accion .btn {
                min-height: 44px;
            }

    .sl-tabla-formulario .form-control-sm, .sl-tabla-formulario .form-select-sm {
        min-height: 44px;
        font-size: 16px;
    }

    /* --- Ficha "dato / valor" (resumen del caso, datos de la cotización) --- */
    .sl-tabla-ficha, .sl-tabla-ficha tbody {
        display: block;
        width: 100%;
    }

    .sl-tabla-ficha tr {
        display: block;
        padding: 7px 0;
        border-bottom: 1px solid var(--sl-borde);
    }

        .sl-tabla-ficha tr:last-child {
            border-bottom: 0;
        }

    .sl-tabla-ficha td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

        .sl-tabla-ficha td:first-child {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--sl-texto-suave) !important;
        }

    /* La fila del total (lleva font-weight:700 en línea) */
    .sl-tabla-ficha tr[style*="font-weight"] td:last-child {
        font-size: 1.15rem;
        color: var(--sl-morado);
    }

    /* --- Recibo del paciente (Reportes → Por paciente) --- */
    .sl-recibo, .sl-recibo tbody {
        display: block;
        width: 100%;
    }

    .sl-recibo tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        padding: 6px 0;
        border-bottom: 1px solid var(--sl-borde);
    }

    .sl-recibo td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

        .sl-recibo td:nth-child(2) {
            text-align: right;
            white-space: nowrap;
        }

        .sl-recibo td:nth-child(3) {
            grid-column: 1 / -1;
            font-size: 0.82rem;
            color: var(--sl-texto-suave);
        }

        .sl-recibo td:empty {
            display: none;
        }

        .sl-recibo td[colspan] {
            grid-column: 1 / -1;
        }

    /* --- Cuadrícula del rol de turnos, si alguien la pide en el teléfono:
       columna de nombres angosta y letra chica; se desplaza de lado --- */
    .sl-cuadricula-rol:not(.sl-forzada) {
        display: none;
    }

    .sl-rol-turnos table {
        font-size: 0.74rem !important;
    }

    .sl-rol-turnos th:first-child, .sl-rol-turnos td:first-child {
        min-width: 0 !important;
        max-width: 120px;
        white-space: normal !important;
    }

    /* El combo para saltar de caso (Reportes) ocupa todo el ancho */
    .sl-salto-caso {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media screen and (max-width: 480px) {
    .sl-indicador .sl-total {
        font-size: 1.1rem;
    }

    .sl-indicador > div:first-child {
        font-size: 0.68rem;
    }

    .sl-barra-total .sl-total {
        font-size: 1.15rem !important;
    }
}

/* ============================================================================
   7. VISTA DE IMPRESION / PDF
   ============================================================================
   Todos los formatos salen en VERTICAL (portrait) y compactos: la letra es
   mas pequena que en pantalla y los margenes y rellenos van reducidos, para
   que quepa mas informacion por hoja y se gaste menos papel.
   ========================================================================= */
@media print {
    @page {
        size: A4 portrait;
        margin: 0.8cm;
    }

    /* Base tipografica de la hoja: todo lo de abajo se mide contra esto. */
    html, body {
        font-size: 9pt !important;
        line-height: 1.25 !important;
    }

    /* Aseguramos que colores y fondos SI se impriman (los navegadores los
       quitan por defecto para ahorrar tinta, a menos que se los pidamos) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ocultamos todo lo que es "navegacion", no contenido del reporte.
       OJO: hay que ocultar TANTO .sidebar (el contenedor externo que
       genera Blazor, con height:100vh) COMO .sl-sidebar (el interno
       con nuestros colores) -- si solo se oculta el interno, el externo
       se queda reservando una pantalla completa en blanco. */
    .sidebar, .sl-sidebar, .sl-lateral, .sl-barra-movil, .sl-barra-inferior, .sl-telon, .top-row, nav, .no-imprimir, #blazor-error-ui {
        display: none !important;
    }

    /* El layout normal reserva espacio para el menu lateral aunque este
       oculto (grid o flex con ancho fijo) -- lo forzamos a una sola
       columna que ocupe TODO el ancho de la hoja. */
    .page {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
    }

    .page, .sl-app, .sl-principal, main, .content, article.content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    /* Cualquier contenedor del layout que tenga "altura de toda la
       pantalla" (comun para que el fondo del menu llegue hasta abajo)
       se resetea aqui, porque en papel eso deja una hoja en blanco. */
    html, body, .page, .sl-app, .sl-principal, main, .content, article.content, #app {
        height: auto !important;
        min-height: 0 !important;
    }

        .content::before {
            display: none; /* la marca de agua normal se reemplaza por la de impresion */
        }

    /* ---------- Encabezado del documento ---------- */
    .sl-print-stripe {
        height: 5px;
        background: linear-gradient(90deg, var(--sl-azul-oscuro) 0%, var(--sl-azul-claro) 50%, var(--sl-morado) 100%);
        margin-bottom: 8px;
        border-radius: 2px;
    }

    .sl-print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--sl-azul-oscuro);
        padding-bottom: 5px;
        margin-bottom: 8px;
    }

        .sl-print-header img {
            height: 32px;
        }

        .sl-print-header .sl-print-titulo {
            text-align: right;
        }

            .sl-print-header .sl-print-titulo h2 {
                color: var(--sl-azul-oscuro);
                margin: 0;
                font-size: 12pt;
            }

            .sl-print-header .sl-print-titulo small {
                color: #666;
                font-size: 7.5pt;
            }

    .sl-print-footer {
        margin-top: 8px;
        text-align: center;
        font-size: 6.5pt;
        color: #999;
        border-top: 1px solid #ddd;
        padding-top: 3px;
    }

    .sl-print-watermark {
        position: absolute;
        top: 38%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        opacity: 0.05;
        z-index: -1;
    }

    /* ---------- Tarjetas y titulos ---------- */
    .sl-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        padding: 7px 9px !important;
        border-radius: 4px !important;
        margin-bottom: 7px !important;
    }

        .sl-card h3 {
            font-size: 10pt !important;
            padding-bottom: 3px !important;
            margin-bottom: 6px !important;
            border-bottom-width: 1px !important;
        }

    h1, h2 { font-size: 12pt !important; margin-bottom: 6px !important; }
    h3, h4 { font-size: 10pt !important; margin-bottom: 5px !important; }

    .sl-total {
        font-size: 10pt !important;
    }

    /* Las 3 tarjetas de resumen: compactas y siempre en una sola fila */
    .sl-print-resumen {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        margin-bottom: 7px !important;
    }

        .sl-print-resumen > div {
            flex: 1 1 0 !important;
            max-width: none !important;
            padding: 0 !important;
        }

        .sl-print-resumen .sl-card {
            padding: 4px 6px !important;
            margin-bottom: 0 !important;
        }

        .sl-print-resumen .sl-total {
            font-size: 9pt !important;
        }

    /* ---------- Tablas: lo mas compactas posible sin perder legibilidad ---------- */
    table {
        font-size: 7.5pt !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

        table th, table td {
            padding: 1.5px 3px !important;
            line-height: 1.2 !important;
            vertical-align: middle !important;
        }

        /* Las tablas no se deben partir a la mitad de una fila */
        table tr {
            page-break-inside: avoid;
        }

        /* El encabezado se repite en cada hoja cuando la tabla es larga */
        table thead {
            display: table-header-group;
        }

    /* Los cuadros de texto y desplegables se imprimen como texto plano:
       sin bordes de formulario, que en papel solo estorban. */
    input, select, textarea {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        font-size: 7.5pt !important;
        height: auto !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* ---------- Cuadricula del rol de turnos ----------
       Es la tabla mas ancha del sistema (una columna por dia). En vertical
       hay que apretarla todavia mas y quitarle las columnas "pegajosas",
       que en papel no sirven y descuadran el ancho. */
    .sl-rol-turnos table {
        font-size: 6.5pt !important;
        table-layout: fixed !important;
        white-space: normal !important;
    }

    .sl-rol-turnos th,
    .sl-rol-turnos td {
        padding: 1px !important;
        position: static !important; /* las columnas "pegajosas" no aplican en papel */
        min-width: 0 !important;
        text-align: center;
        white-space: normal !important;
        word-break: break-word;
    }

        /* La primera columna lleva el nombre y el cargo: necesita ancho fijo
           y poder partirse en dos lineas, o los nombres salen cortados. */
        .sl-rol-turnos th:first-child,
        .sl-rol-turnos td:first-child {
            width: 21% !important;
            text-align: left;
            padding-right: 3px !important;
        }

    /* En papel no hay scroll: la tabla se imprime completa y el encabezado
       fijo se desactiva (la regla de arriba ya lo repite en cada hoja). */
    .sl-rol-turnos,
    .sl-tabla-fija {
        overflow: visible !important;
        max-height: none !important;
    }

        .sl-tabla-fija thead th,
        .sl-tabla-fija tbody td:first-child {
            position: static !important;
            box-shadow: none !important;
        }

    /* Mostramos los elementos exclusivos de impresion (va al final para que
       gane sobre cualquier regla de arriba que los oculte). */
    .solo-impresion {
        display: block !important;
    }
}

/* El armazón nuevo también se aplana en papel (el resto de reglas de arriba
   ya resetea .sl-app y .sl-principal junto con .page y main). */
@media print {
    .sl-app {
        display: block !important;
    }

    .sl-kpis, .sl-encabezado .btn {
        display: none !important;
    }
}