/* Evita el parpadeo de elementos con x-show mientras Alpine inicializa. */
[x-cloak] {
    display: none !important;
}

/* En horizontal el notch/isla dinamica queda a un costado en vez de arriba.
   Ahora que el sidebar de escritorio no se muestra mas en ese ancho (ver
   el cambio de breakpoint md->lg en base.php), ya no hay un sidebar oscuro
   pegado al borde que genere un salto de color raro con este padding --
   se puede aplicar una sola vez a body y de ahi lo heredan tanto el topbar
   (el boton de menu) como el contenido. Se le suma un colchon fijo de
   0.5rem ademas del safe-area real: en un iPhone la esquina de la pantalla
   es redondeada, asi que el boton de menu quedaba "perdido"/cortado si se
   pegaba justo al limite exacto del area segura. */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* En modo app instalada (iPhone), la barra de estado queda transparente
   (status-bar-style=black-translucent) para poder pintarla del mismo color
   que el topbar en vez de que el contenido se mezcle con el reloj/isla
   dinamica al hacer scroll. env(safe-area-inset-*) vale 0 en una pestana
   normal del navegador, asi que no hace falta condicionar esto a
   "@media (display-mode: standalone)" -- esa media query no siempre
   coincide en Safari/iOS cuando la app se instala via los meta tags de
   Apple (a diferencia del manifest.json estandar), y por eso el padding
   no se estaba aplicando pese a estar bien escrito. */
.topbar {
    padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--bs-body-bg);
}

#global-alert-bar {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
}

.toast-container {
    margin-bottom: env(safe-area-inset-bottom);
}

/* Los modales de Bootstrap tambien son position:fixed pegados al borde
   superior del viewport, asi que sin este padding se abren justo debajo
   del reloj/isla dinamica en vez de debajo del topbar. */
.modal {
    padding-top: env(safe-area-inset-top) !important;
}

/* Bootstrap capa el ancho de cualquier modal en 500px entre 576px y 992px, y
   en 800px hasta 1200px. En un iPad en vertical (768px) eso deja la vista
   previa del dia en una columna angosta con mas margen que contenido, cuando
   es justo donde mas se la mira. Se ensancha hasta casi todo el ancho pero sin
   llegar a pantalla completa: el fondo tiene que seguir visible para que se
   entienda que se cierra tocando afuera.

   Se usa calc(100% - 3rem) y no vw porque el 100% resuelve contra .modal, que
   ya descuenta la barra de scroll que Bootstrap compensa al abrir. Arriba de
   1200px no hace falta: ahi manda el max-width de modal-xl. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .modal-dialog.modal-wide {
        max-width: calc(100% - 3rem);
    }
}

/* Los chips de la vista previa del dia son .badge, y .badge trae
   white-space:nowrap. En un celular un nombre largo ("Tecnica manual de
   aceleracion de flujo respiratorio") no entra en una linea y estira la tabla
   entera, obligando a hacer scroll horizontal para leer una actividad. Abajo
   de sm se los deja cortar en varias lineas; el line-height de .badge es 1 y
   asi apretadas no se leen. */
@media (max-width: 575.98px) {
    .distribution-chip {
        white-space: normal;
        text-align: left;
        line-height: 1.3;
    }
}

/* Las pastillas de la vista previa son links al editor del item. */
.distribution-chip {
    cursor: pointer;
    transition: box-shadow .15s;
}
.distribution-chip .distribution-chip-edit {
    opacity: .45;
}
.distribution-chip:hover,
.distribution-chip:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35);
    outline: none;
}
.distribution-chip:hover .distribution-chip-edit,
.distribution-chip:focus-visible .distribution-chip-edit {
    opacity: 1;
}

/* El menu offcanvas (mobile), pegado al borde izquierdo, gana por encima
   de la barra roja de alertas (z-index 1090) mientras esta abierto --
   contenido temporal, tiene sentido que tape todo lo demas.
   Con pocos links (Dashboard, Catalogos, Tendencias, Reportes, Horarios,
   Configuracion) un drawer de pantalla completa deja un vacio enorme y se
   ve poco prolijo: se angosta, se ajusta al alto del contenido y se centra
   verticalmente (top/bottom:0 + margin:auto es el truco clasico para
   centrar un elemento fixed de alto variable), dejando el mismo aire
   arriba y abajo en vez de quedar pegado al techo de la pantalla. Como ya
   no toca ningun borde salvo el izquierdo, las 4 esquinas quedan
   redondeadas -- se ve como un panel flotante, no como un drawer. */
#sidebarOffcanvas {
    z-index: 1095 !important;
    width: min(280px, 80vw) !important;
    top: env(safe-area-inset-top);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left) !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
    overflow-y: auto;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Perfiles de acceso rapido: feedback tactil claro al tocar en una tablet. */
.quick-tile {
    background-color: var(--bs-body-bg);
    transition: transform .1s ease, box-shadow .1s ease;
}

.quick-tile:hover,
.quick-tile:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.quick-tile:active {
    transform: scale(0.97);
}

/* Destello suave para llamar la atencion sobre lo vencido, sin ser epileptico. */
@keyframes vencido-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45); }
    50% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
}

.badge-vencido-pulse,
.card-vencido-pulse {
    animation: vencido-pulse 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .badge-vencido-pulse,
    .card-vencido-pulse {
        animation: none;
    }
}

/* Editor de horarios (partials/schedule-editor.php): los 14 dias de la
   vista previa en una grilla de 7 columnas, que entra en un telefono. */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    font-size: 0.75rem;
}

.schedule-grid-day {
    padding: 0.25rem 0.1rem;
    line-height: 1.25;
}

.schedule-grid-hora {
    font-size: 0.7rem;
}

.schedule-grid-today {
    outline: 2px solid var(--bs-primary);
    outline-offset: -1px;
}

.schedule-day {
    min-width: 2.25rem;
}

/* Override de marca de Bootstrap: indigo en vez del azul por defecto.
   Se carga DESPUES de bootstrap.min.css para que estas variables ganen. */
:root,
[data-bs-theme="light"] {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;
}

[data-bs-theme="dark"] {
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-link-color: #818cf8;
    --bs-link-color-rgb: 129, 140, 248;
    --bs-link-hover-color: #a5b4fc;
    --bs-link-hover-color-rgb: 165, 180, 252;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.text-bg-primary { background-color: var(--bs-primary) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
}

/* Sidebar */
.sidebar {
    background-color: #111827;
    color: #fff;
}

.sidebar .nav-link {
    color: #cbd5e1;
    border-radius: 8px;
}

.sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar .nav-link.active {
    color: #fff;
}

/* Sidebar colapsable: mas espacio para el contenido, se queda como rail de iconos.
   El ancho vive en su propia clase (no inline) para poder pisarlo por atributo. */
.sidebar-desktop {
    position: sticky;
    top: 0;
    width: 240px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width .15s ease;
}

html[data-sidebar="collapsed"] .sidebar-desktop {
    width: 4.5rem;
}

html[data-sidebar="collapsed"] .sidebar-desktop .sidebar-label {
    display: none;
}

html[data-sidebar="collapsed"] .sidebar-desktop .nav-link {
    justify-content: center;
}

html[data-sidebar="collapsed"] .sidebar-desktop .nav-link i {
    margin-right: 0 !important;
}

.sidebar-desktop .sidebar-brand {
    justify-content: center;
}

html[data-sidebar="collapsed"] .sidebar-desktop .sidebar-brand i {
    margin-right: 0 !important;
}

.sidebar-toggle-row {
    justify-content: flex-end;
}

html[data-sidebar="collapsed"] .sidebar-desktop .sidebar-toggle-row {
    justify-content: center;
}

/* La barra roja de alertas no debe taparle el sidebar (y su boton de Configuracion):
   arranca donde termina el sidebar, no desde el borde izquierdo de la pantalla. En mobile
   el sidebar esta oculto (se usa un offcanvas), asi que ahi si va de lado a lado. */
#global-alert-bar {
    left: 0;
}

@media (min-width: 992px) {
    #global-alert-bar {
        left: 240px;
    }

    html[data-sidebar="collapsed"] #global-alert-bar {
        left: 4.5rem;
    }
}

/* Tipografia base un poco mas compacta en modo normal (sensacion mas "pro"/densa).
   No afecta modo accesible: los selectores son mutuamente excluyentes. */
html:not([data-a11y="large"]) {
    font-size: 15px;
}

/* Modo accesible: pensado para alguien con control motor reducido (ej. ELA).
   Bootstrap 5 usa unidades rem en casi todo, asi que subir el font-size de la
   raiz escala proporcionalmente botones, campos, badges e iconos (los iconos
   de Bootstrap Icons son glifos de fuente) sin tocar cada componente. */
html[data-a11y="large"] {
    font-size: 20px;
}

html[data-a11y="large"] .btn {
    min-height: 3rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

html[data-a11y="large"] .form-control,
html[data-a11y="large"] .form-select {
    min-height: 3rem;
}

/* Mas separacion entre botones de accion: un roce de mas no debe activar
   el boton vecino por error. */
html[data-a11y="large"] .d-inline + .d-inline {
    margin-left: 0.5rem;
}

#a11y-toggle.active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

#push-toggle.active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Cards con sombra sutil en vez de solo borde: sensacion "dashboard", no "formulario" */
.card {
    border-color: rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Filas de catalogo: en vez de solo lineas divisorias, alternancia sutil de fondo
   (mas facil de seguir una fila con la vista) + sombra al pasar el mouse. */
.catalog-list > .catalog-item {
    border-radius: 0.5rem;
    font-size: 0.9rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.catalog-list > .catalog-item:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.025);
}

[data-bs-theme="dark"] .catalog-list > .catalog-item:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.035);
}

.catalog-list > .catalog-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Tabla "Programado para hoy" (hoja de ruta del turno): encabezados chicos
   en mayuscula tipo dashboard moderno, mas aire por fila (mas facil de leer
   y de tocar en mobile), y resalte sutil al pasar por una fila -- mismo
   lenguaje visual que .catalog-list de arriba, pero en tabla. */
.shift-day-plan-table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom-width: 2px;
    white-space: nowrap;
}

.shift-day-plan-table td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.shift-day-plan-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .shift-day-plan-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

.shift-day-plan-table tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

/* Pestanas internas de Configuracion (Acerca de, Logs): barra translucida con
   la activa en una pildora con degradado de marca, para que se distingan de
   las pestanas principales de arriba sin competir con ellas. */
.glass-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.4rem;
    margin: 0 0 1rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.10), rgba(168, 85, 247, 0.07)),
        rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.14);
    box-shadow: 0 8px 24px -12px rgba(var(--bs-primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}

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

.glass-tabs .nav-item { flex: 0 0 auto; }

.glass-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0.45rem 0.9rem 0.45rem 0.45rem;
    border: 0;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* El icono va en su propio cuadrito: da ritmo a la fila y se lee de un vistazo. */
.glass-tabs .nav-link > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 !important;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.10);
    transition: background-color .2s ease, color .2s ease;
}

.glass-tabs .nav-link:hover {
    color: var(--bs-emphasis-color);
    background: rgba(255, 255, 255, 0.6);
}

.glass-tabs .nav-link:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.6);
    outline-offset: 2px;
}

.glass-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #8b5cf6);
    box-shadow: 0 6px 16px -6px rgba(var(--bs-primary-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass-tabs .nav-link.active > .bi {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.glass-tabs .nav-link.active .badge.text-bg-light {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .glass-tabs {
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.16), rgba(168, 85, 247, 0.10)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .glass-tabs .nav-link > .bi {
    color: #a5b4fc;
    background: rgba(var(--bs-primary-rgb), 0.18);
}

[data-bs-theme="dark"] .glass-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

 (prefers-reduced-motion: reduce) {
    .glass-tabs .nav-link,
    .glass-tabs .nav-link > .bi { transition: none; }
}

/* Impresion: solo el contenido clinico, sin navegacion ni controles */
@media print {
    .sidebar, .topbar, .btn, form, .toast-container { display: none !important; }
    main { padding: 0 !important; }
    .card { border: 1px solid #999 !important; box-shadow: none !important; }
}

/* ==========================================================================
   Mi dia (rol paciente)
   Pensado para un equipo 16:9 manejado con la mirada (Grid Pad, ~1536x864):
   todo entra en una sola vista, sin scroll, en tres columnas. La letra escala
   con el ancho de la pantalla y el resto se mide en em. Los colores salen de
   las variables de Bootstrap, asi el tema oscuro funciona sin repetir nada.
   ========================================================================== */
.md-body {
    background: var(--bs-tertiary-bg);
}

.md-app {
    font-size: clamp(16px, 1.35vw, 26px);
    height: 100vh;
    height: 100dvh;
    /* Flex y no grid con filas fijas: la franja de vista previa solo existe
       para el admin, y sin ella las filas quedaban corridas. */
    display: flex;
    flex-direction: column;
}

.md-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1em;
    padding: calc(.5em + env(safe-area-inset-top)) 1.3em .5em;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.md-brand {
    display: flex;
    align-items: center;
    gap: .5em;
    font-weight: 700;
    font-size: 1.15em;
}

.md-brand .bi {
    color: var(--bs-danger);
}

.md-env {
    font-size: .55em;
}

.md-reloj {
    text-align: center;
    line-height: 1.1;
}

.md-reloj b {
    display: block;
    font-size: 1.8em;
    font-variant-numeric: tabular-nums;
}

.md-reloj span {
    color: var(--bs-secondary-color);
    font-size: .85em;
}

.md-acciones {
    display: flex;
    justify-content: flex-end;
}

/* Unico control de la pantalla: grande, para elegirlo con la mirada. */
.md-boton-tema {
    width: 3.4em;
    height: 3.4em;
    border-radius: .8em;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 1em;
    display: grid;
    place-items: center;
}

.md-boton-tema .bi {
    font-size: 1.5em;
}

.md-boton-tema:focus-visible,
.md-salir:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.md-vista-previa {
    padding: .4em 1.3em;
    font-size: .8em;
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.md-main {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1em 1.3em .4em;
    display: grid;
    gap: 1em;
    grid-template-columns: .85fr 1.75fr .85fr;
}

.md-col {
    display: grid;
    gap: 1em;
    align-content: start;
    min-height: 0;
}

.md-col-dia {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
}

.md-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1em;
    padding: .9em 1.1em;
    min-height: 0;
}

.md-card-vacia {
    grid-column: 1 / -1;
    font-size: 1.3em;
}

.md-eyebrow {
    margin: 0 0 .55em;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.md-sin-dato {
    color: var(--bs-secondary-color);
}

.md-ahora {
    background: var(--bs-primary-bg-subtle);
    border-color: transparent;
}

.md-nombre {
    margin: 0;
    font-size: 2.1em;
    font-weight: 800;
    line-height: 1.05;
    text-wrap: balance;
}

.md-nombre.md-sin-dato {
    font-size: 1.5em;
}

.md-turno {
    margin: .35em 0 0;
    color: var(--bs-secondary-color);
}

.md-despues {
    margin: .8em 0 0;
    padding-top: .7em;
    border-top: 1px solid var(--bs-primary-border-subtle);
}

.md-proximas {
    display: grid;
    gap: .8em;
}

.md-proxima {
    display: grid;
    grid-template-columns: 4.6em 1fr;
    gap: .7em;
    align-items: start;
}

.md-proxima-hora {
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bs-primary-text-emphasis);
    font-variant-numeric: tabular-nums;
}

.md-proxima-items {
    list-style: none;
    margin: 0;
    padding: .15em 0 0;
    display: grid;
    gap: .2em;
    font-weight: 600;
    line-height: 1.2;
}

.md-proxima-items .bi,
.md-dia-item .bi {
    color: var(--bs-secondary-color);
    margin-right: .3em;
}

.md-proxima-items small {
    color: var(--bs-secondary-color);
    font-weight: 400;
    font-size: .8em;
    margin-left: .3em;
}

.md-card-dia {
    display: flex;
    flex-direction: column;
}

/* Si un dia trae mas tomas de las que entran, la lista se desplaza sola
   dentro de su tarjeta en vez de empujar la pantalla entera. */
.md-dia {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
}

.md-dia {
    /* Espacio fijo para la barra: sin esto quedaba pegada a los estados. */
    scrollbar-gutter: stable;
    padding-right: .6em;
    scrollbar-width: auto;
    scrollbar-color: var(--bs-secondary-color) transparent;
}

.md-dia::-webkit-scrollbar {
    width: .75em;
}

.md-dia::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-color);
    border-radius: 1em;
}

/* Flechas de la lista: anchas y con la altura justa para posar la mirada
   sin robarle espacio a las tomas. */
.md-flecha {
    flex: none;
    width: 100%;
    height: 2.3em;
    margin: .25em 0;
    border: 0;
    border-radius: .7em;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 1em;
    display: grid;
    place-items: center;
}

.md-flecha .bi {
    font-size: 1.5em;
}

.md-flecha:hover:not(:disabled),
.md-flecha.md-desplazando {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.md-flecha:disabled {
    opacity: .3;
}

.md-flecha:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.md-dia-fila {
    display: grid;
    grid-template-columns: 3em 1fr auto;
    gap: .7em;
    align-items: center;
    padding: .4em 0;
    border-top: 1px solid var(--bs-border-color);
}

.md-dia-fila:first-child {
    border-top: 0;
}

.md-dia-hora {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.md-dia-items {
    display: flex;
    flex-wrap: wrap;
    gap: .1em .9em;
    font-size: .9em;
    line-height: 1.25;
}

.md-hecho .md-dia-items {
    color: var(--bs-secondary-color);
}

.md-estado {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25em .7em;
    border-radius: 999px;
    font-size: .8em;
    font-weight: 700;
    white-space: nowrap;
}

.md-estado-hecho {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.md-estado-falta {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.md-estado-ahora {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.md-estado-despues {
    border: 1.5px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.md-vitales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9em .8em;
}

.md-vital-valor {
    font-size: 1.7em;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.md-vital-valor span {
    font-size: .45em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-left: .15em;
}

.md-vital-nombre,
.md-nota {
    font-size: .78em;
    color: var(--bs-secondary-color);
}

.md-vital-nombre {
    margin-top: .25em;
}

.md-nota {
    margin: .8em 0 0;
}

.md-semana-fila {
    display: grid;
    grid-template-columns: 3.6em repeat(var(--md-turnos, 2), 1fr);
    gap: .5em;
    padding: .4em 0;
    border-top: 1px solid var(--bs-border-color);
    font-size: .85em;
    line-height: 1.2;
}

.md-semana-fila:first-child {
    border-top: 0;
}

.md-semana-dia {
    font-weight: 700;
}

.md-hoy {
    color: var(--bs-primary-text-emphasis);
}

.md-semana-turno small {
    display: block;
    font-size: .78em;
    color: var(--bs-secondary-color);
}

.md-pie {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6em;
    padding: .2em 1.3em calc(.6em + env(safe-area-inset-bottom));
}

.md-panel {
    text-decoration: none;
}

.md-salir {
    border: 1px dashed var(--bs-border-color);
    border-radius: .5em;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .7em;
    padding: .2em .8em;
}

/* Pantallas mas chicas que el Grid Pad (una ventana angosta, un celular): la
   pagina pasa a desplazarse normal en vez de forzar todo en una vista. */
@media (max-width: 1099.98px) {
    .md-app {
        height: auto;
        min-height: 100vh;
        font-size: 17px;
    }

    .md-main {
        grid-template-columns: 1fr 1fr;
    }

    .md-dia {
        overflow: visible;
    }
}

@media (max-width: 699.98px) {
    .md-main {
        grid-template-columns: 1fr;
    }

    .md-top {
        grid-template-columns: 1fr auto;
    }

    .md-reloj {
        display: none;
    }
}

/* Teclado de PIN del paciente: teclas grandes y separadas para elegirlas con la mirada. */
.pin-grande {
    max-width: 560px !important;
}

.pin-grande .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.pin-grande [data-key],
.pin-grande button[type="submit"] {
    min-height: 5.5rem;
    font-size: 2rem !important;
}

/* Acceso rapido agrupado por rol. Cada grupo tiene su color de avatar, pero
   siempre acompanado del titulo del grupo y del rol escrito. */
.quick-group-title {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .6rem;
}

.quick-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 600;
    flex: none;
}

.quick-avatar-enfermeria {
    /* Azul y no el primario de la app (indigo): junto al violeta del paciente se confundian. */
    background-color: #0d6efd;
}

.quick-avatar-coordinacion {
    background-color: #4b5563;
}

.quick-avatar-paciente {
    background-color: #7c3aed;
}

.quick-tile-paciente {
    justify-content: center;
    background-color: rgba(124, 58, 237, .1);
    border: 2px solid #7c3aed;
}

.quick-role-paciente {
    color: #6d28d9;
    font-weight: 600;
}

[data-bs-theme="dark"] .quick-role-paciente {
    color: #c4b5fd;
}

/* ==========================================================================
   Tendencias
   Colores de las graficas como variables: trends.js y mi-dia-tendencias.js
   los leen al dibujar, y el tema oscuro los redefine en un solo lugar.
   ========================================================================== */
:root {
    --tr-ok: #198754;
    --tr-warn: #e0a100;
    --tr-bad: #dc3545;
    --tr-auto: #9aa3b2;
    --tr-primary: #4f46e5;
    --tr-teal: #0ea5a4;
    --tr-violet: #8b5cf6;
}

[data-bs-theme="dark"] {
    --tr-ok: #4ade80;
    --tr-warn: #fbbf24;
    --tr-bad: #f87171;
    --tr-auto: #6b7280;
    --tr-primary: #818cf8;
    --tr-teal: #2dd4bf;
    --tr-violet: #a78bfa;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --tr-ok: #4ade80;
        --tr-warn: #fbbf24;
        --tr-bad: #f87171;
        --tr-auto: #6b7280;
        --tr-primary: #818cf8;
        --tr-teal: #2dd4bf;
        --tr-violet: #a78bfa;
    }
}

.tr-chart {
    position: relative;
    height: 240px;
}

.tr-chart-alto {
    height: 290px;
}

@media (max-width: 575.98px) {
    .tr-chart {
        height: 210px;
    }

    .tr-chart-alto {
        height: 240px;
    }
}

.tr-kpi-titulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.tr-kpi-valor {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tr-kpi-valor small {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.tr-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.tr-muestra {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: .2rem;
    margin-right: .35rem;
    vertical-align: -.05rem;
}

.tr-rayado {
    background: repeating-linear-gradient(45deg, var(--tr-auto) 0 2px, transparent 2px 5px);
    border: 1px solid var(--tr-auto);
}

.tr-saltadas {
    display: grid;
    gap: .75rem;
}

.tr-saltadas li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    font-size: .9rem;
}

.tr-barrita {
    grid-column: 1 / -1;
    height: .35rem;
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.tr-barrita span {
    display: block;
    height: 100%;
    border-radius: 1rem;
    background: var(--tr-bad);
}

.tr-incidencias {
    display: grid;
    gap: .75rem;
}

.tr-incidencias li {
    border-left: 3px solid var(--tr-bad);
    padding-left: .65rem;
    font-size: .9rem;
}

.tr-grilla {
    border-collapse: separate;
    border-spacing: 3px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.tr-grilla th {
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-align: center;
    white-space: nowrap;
    padding: 0 .2rem;
}

/* El nombre queda fijo al desplazar la grilla de lado en pantallas chicas. */
.tr-grilla .tr-grilla-nombre {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    padding-right: .6rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-grilla td {
    min-width: 2.6rem;
    text-align: center;
    border-radius: .35rem;
    padding: .3rem .2rem;
    font-weight: 600;
}

.tr-celda-ok {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.tr-celda-warn {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.tr-celda-bad {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.tr-celda-estimada {
    opacity: .55;
}

.tr-fecha {
    width: auto;
}

/* Mis tendencias (paciente) y el boton que lleva y trae desde Mi dia. */
.md-acciones {
    gap: .6em;
    align-items: center;
}

.md-boton-vista {
    height: 3.4em;
    padding: 0 1.1em;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    border-radius: .8em;
    border: 2px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.md-boton-vista .bi {
    font-size: 1.25em;
}

.md-boton-vista:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.md-tend {
    flex: 1 1 auto;
    min-height: 0;
    padding: .9em 1.3em .4em;
    display: flex;
    flex-direction: column;
    gap: .8em;
}

.md-tend-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6em 1em;
}

.md-rangos {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
}

/* Botones de periodo: grandes y separados, para elegirlos con la mirada. */
.md-rango {
    min-height: 2.9em;
    padding: 0 1.3em;
    display: inline-flex;
    align-items: center;
    border-radius: .8em;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 700;
    text-decoration: none;
}

.md-rango-activo {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.md-rango:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.md-tend-periodo {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: .9em;
}

.md-tend-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
}

.md-tend-card {
    display: flex;
    flex-direction: column;
}

.md-tend-grandes {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 1.2em;
    margin-bottom: .3em;
}

.md-tend-grandes b {
    display: block;
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.md-tend-grandes small {
    color: var(--bs-secondary-color);
    font-size: .75em;
}

.md-tend-chart {
    position: relative;
    flex: 1 1 auto;
    min-height: 8em;
}

.md-tend-muestra {
    display: inline-block;
    width: .8em;
    height: .8em;
    border-radius: .2em;
    margin: 0 .3em 0 .2em;
    vertical-align: -.05em;
}

.md-tend-muestra-ali {
    background: var(--tr-teal);
}

.md-tend-muestra-ter {
    background: var(--tr-primary);
    margin-left: .8em;
}

@media (max-width: 1099.98px) {
    .md-tend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md-tend-chart {
        flex: none;
        height: 240px;
    }
}

@media (max-width: 699.98px) {
    .md-tend-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .md-boton-vista {
        padding: 0 .8em;
    }
}

/* Semaforo del desempeno por enfermero: color, icono y valor juntos. */
.tr-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 1rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tr-pill-ok {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.tr-pill-aviso {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.tr-pill-mal {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.tr-pill-neutro {
    color: var(--bs-secondary-color);
}

.tr-equipo th[scope="col"] {
    font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.tr-kpi-ok {
    border-left: 4px solid var(--tr-ok);
}

.tr-kpi-aviso {
    border-left: 4px solid var(--tr-warn);
}

.tr-kpi-mal {
    border-left: 4px solid var(--tr-bad);
}

/* Selector de paciente en la barra superior. Es un <details>: abre y cierra
   sin JavaScript; app.js solo lo cierra al tocar afuera o con Escape. */
.patient-switch {
    position: relative;
}
.patient-switch > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .625rem .25rem .3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    line-height: 1.15;
    max-width: min(18rem, calc(100vw - 9.5rem));
    transition: border-color .15s, box-shadow .15s;
}
.patient-switch > summary::-webkit-details-marker { display: none; }
.patient-switch > summary:hover,
.patient-switch[open] > summary {
    border-color: rgba(var(--bs-primary-rgb), .5);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}
.patient-switch > summary:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.patient-switch-avatar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #7c3aed; /* el violeta del paciente en el acceso rapido */
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}
.patient-switch-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.patient-switch-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
}
.patient-switch-name {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.patient-switch-chevron {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    transition: transform .15s;
}
.patient-switch[open] .patient-switch-chevron { transform: rotate(180deg); }

.patient-switch-menu {
    position: absolute;
    top: calc(100% + .375rem);
    left: 0;
    z-index: 1030;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    padding: .375rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
}
.patient-switch-title {
    padding: .375rem .625rem .5rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
}
.patient-switch-menu form { margin: 0; }
.patient-switch-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}
.patient-switch-item:hover,
.patient-switch-item:focus-visible {
    background: var(--bs-tertiary-bg);
    outline: none;
}
.patient-switch-item.active {
    background: rgba(var(--bs-primary-rgb), .1);
}
.patient-switch-item .patient-switch-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .85rem;
}
.patient-switch-item-text {
    min-width: 0;
    flex: 1 1 auto;
}
.patient-switch-item-name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.25;
    /* El nombre completo, aunque ocupe dos lineas: es lo que se elige. */
    overflow-wrap: anywhere;
}
.patient-switch-item-sub {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.patient-switch-item .bi-check-lg {
    flex: 0 0 auto;
    color: var(--bs-primary);
}