/* ===================================================
   Hospital San Juan – Capa de diseño "Precisión clínica"
   Se carga al final en todos los módulos.
   Paleta verde institucional + Montserrat.
   Firma visual: barras diagonales paralelas del logo.
   =================================================== */

:root {
    /* Superficies */
    --ui-fondo:        #f4f7f5;
    --ui-superficie:   #ffffff;
    --ui-borde:        rgba(1, 51, 32, .08);
    --ui-borde-fuerte: rgba(1, 51, 32, .14);
    --ui-texto:        #10201a;
    --ui-texto-2:      #4a5a53;
    --ui-texto-3:      #8a9892;

    /* Elevación en capas (suave, tono verde) */
    --ui-e1: 0 1px 2px rgba(1, 51, 32, .05), 0 1px 1px rgba(1, 51, 32, .03);
    --ui-e2: 0 1px 2px rgba(1, 51, 32, .05), 0 6px 18px -6px rgba(1, 51, 32, .12);
    --ui-e3: 0 2px 4px rgba(1, 51, 32, .06), 0 18px 40px -12px rgba(1, 51, 32, .22);
    --ui-anillo: 0 0 0 3px rgba(5, 184, 134, .22);

    --ui-r-sm: 8px;
    --ui-r:    12px;
    --ui-r-lg: 16px;
    --ui-r-xl: 22px;
    --ui-ease: cubic-bezier(.2, .7, .2, 1);

    /* Firma: tres barras diagonales (como el logo) */
    --ui-barras: linear-gradient(90deg,
        currentColor 0 3px, transparent 3px 6px,
        currentColor 6px 9px, transparent 9px 12px,
        currentColor 12px 15px);
    /* Textura de rayas diagonales para fondos de marca */
    --ui-rayas: repeating-linear-gradient(-60deg,
        rgba(255, 255, 255, .045) 0 2px, transparent 2px 22px);

    /* Mapeo a variables existentes */
    --color-fondo: var(--ui-fondo);
    --color-borde: var(--ui-borde-fuerte);
    --radio:    var(--ui-r-sm);
    --radio-lg: var(--ui-r-lg);
    --radio-xl: var(--ui-r-xl);
    --sombra-sm: var(--ui-e1);
    --sombra-md: var(--ui-e2);
    --sombra-lg: var(--ui-e3);
    --transicion: .2s var(--ui-ease);
}

/* ── Base tipográfica ────────────────────────────── */
body {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(77, 212, 168, .08), transparent 60%),
        var(--ui-fondo);
    background-attachment: fixed;
    color: var(--ui-texto);
    font-weight: 400;
    font-feature-settings: "tnum" 0;
    text-rendering: optimizeLegibility;
}
p, li, td, label, span { font-weight: inherit; }
h1, h2, h3, h4 { letter-spacing: -.02em; color: var(--ui-texto); }
input, select, textarea, button { font-family: 'Montserrat', system-ui, sans-serif; }
::selection { background: var(--verde-200); color: var(--verde-900); }
:focus-visible { outline: none; box-shadow: var(--ui-anillo); }

/* Números siempre tabulares (no "bailan" al actualizar) */
.numero, .stat-info .numero, .esp-stat-num, .cola-turno-actual,
.numero-turno-esp, .ticket-print-numero, .at-cola-num, .hsj-time {
    font-variant-numeric: tabular-nums;
}

/* Scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: rgba(1, 51, 32, .2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(1, 51, 32, .18); border-radius: 10px;
    border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(1, 51, 32, .32); }

/* Utilidad: marca de barras (firma) */
.ui-barras::before {
    content: '';
    display: inline-block;
    width: 15px; height: 14px;
    background: var(--ui-barras);
    transform: skewX(-24deg);
    color: var(--verde-400);
    margin-right: .55rem;
    vertical-align: -1px;
}

/* ── Botones ─────────────────────────────────────── */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .62rem 1.15rem;
    transition: background .2s var(--ui-ease), box-shadow .2s var(--ui-ease),
                transform .12s var(--ui-ease), border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-principal, .btn-exito {
    background: linear-gradient(180deg, var(--verde-500), var(--verde-600));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(1, 51, 32, .2),
                0 6px 14px -6px rgba(2, 117, 85, .55);
}
.btn-principal:hover, .btn-exito:hover {
    background: linear-gradient(180deg, var(--verde-600), var(--verde-700));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(1, 51, 32, .2),
                0 10px 22px -8px rgba(2, 117, 85, .6);
}
.btn-info, .btn-secundario {
    background: var(--verde-50); color: var(--verde-700);
    box-shadow: inset 0 0 0 1px var(--verde-200);
}
.btn-info:hover, .btn-secundario:hover {
    background: var(--verde-100); color: var(--verde-800);
    box-shadow: inset 0 0 0 1px var(--verde-300);
}
.btn-peligro {
    background: var(--verde-900); color: #fff;
    box-shadow: 0 6px 14px -8px rgba(1, 51, 32, .7);
}
.btn-peligro:hover { background: #011f14; }
.btn-ghost {
    background: var(--ui-superficie); color: var(--ui-texto-2);
    border: 1px solid var(--ui-borde-fuerte);
    box-shadow: var(--ui-e1);
}
.btn-ghost:hover { background: #fff; color: var(--verde-700); border-color: var(--verde-300); }
.btn-outline { border-width: 1px; background: #fff; }
.btn-sm { padding: .42rem .8rem; border-radius: 8px; }

/* ── Tarjetas ────────────────────────────────────── */
.card {
    background: var(--ui-superficie);
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-e2);
    padding: 1.5rem;
}
.card-header {
    border-bottom: 1px solid var(--ui-borde);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.card-header h2, .card-header h3 {
    font-size: .98rem; font-weight: 700;
    display: flex; align-items: center; gap: .55rem;
}
.card-header h2 svg, .card-header h3 svg { color: var(--verde-500); }

/* ── Formularios ─────────────────────────────────── */
.form-group label {
    font-size: .7rem; font-weight: 700; letter-spacing: .07em;
    color: var(--ui-texto-2);
}
.form-control, .rec-datos-group input {
    border: 1px solid var(--ui-borde-fuerte);
    border-radius: 10px;
    background: #fbfcfb;
    padding: .7rem .9rem;
    font-weight: 500;
    box-shadow: inset 0 1px 1px rgba(1, 51, 32, .03);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control:hover { border-color: rgba(1, 51, 32, .24); }
.form-control:focus, .rec-datos-group input:focus {
    background: #fff;
    border-color: var(--verde-400);
    box-shadow: var(--ui-anillo);
}
.form-control::placeholder { color: var(--ui-texto-3); font-weight: 400; }
select.form-control {
    appearance: none; -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23027555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
}
input[type=checkbox], input[type=radio] { accent-color: var(--verde-600); }

/* ── Tablas ──────────────────────────────────────── */
.table-wrapper {
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-r);
    overflow: auto;
}
.tabla { font-size: .845rem; }
.tabla thead tr { background: #f7faf8; border-bottom: 1px solid var(--ui-borde-fuerte); }
.tabla th {
    color: var(--ui-texto-3); font-size: .66rem; letter-spacing: .09em;
    padding: .8rem 1rem;
}
.tabla td { border-bottom: 1px solid var(--ui-borde); color: var(--ui-texto-2); padding: .8rem 1rem; }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover td { background: #f6fbf9; }

/* ── Badges (estilo píldora con punto) ───────────── */
.badge {
    gap: .38rem; padding: .26rem .62rem .26rem .52rem;
    font-size: .66rem; letter-spacing: .05em;
    border-radius: 999px;
}
.badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .85;
}
.badge-espera   { background: #fff8e6; color: #8a5a00; border-color: #f6dfa4; }
.badge-llamado  { background: var(--verde-100); color: var(--verde-700); border-color: var(--verde-300); }
.badge-atendido { background: var(--verde-50); color: var(--verde-600); border-color: var(--verde-200); }
.badge-ausente  { background: #fdf0ee; color: #a23b2c; border-color: #f3c9c2; }
.badge-cancelado, .badge-inactivo { background: #f2f4f3; color: var(--ui-texto-3); border-color: #e2e7e4; }

/* ── Modales ─────────────────────────────────────── */
.modal-overlay { background: rgba(1, 26, 17, .5); backdrop-filter: blur(6px) saturate(120%); }
.modal {
    border-radius: var(--ui-r-xl);
    border: 1px solid var(--ui-borde);
    box-shadow: 0 30px 80px -20px rgba(1, 33, 20, .45);
    padding: 1.75rem 1.9rem;
}
.modal-header { border-bottom: 1px solid var(--ui-borde); }
.modal-header h3 { display: flex; align-items: center; font-size: 1.05rem; }
.modal-header h3::before {
    content: ''; width: 15px; height: 14px; margin-right: .6rem;
    background: var(--ui-barras); color: var(--verde-400);
    transform: skewX(-24deg); flex-shrink: 0;
}
.modal-footer { border-top: 1px solid var(--ui-borde); }
.modal-cerrar { border-radius: 10px; }
.modal-confirm-icon {
    width: 60px; height: 60px; border-radius: 18px;
    background: linear-gradient(135deg, var(--verde-50), var(--verde-100));
    box-shadow: inset 0 0 0 1px var(--verde-200);
}

/* ── Toasts ──────────────────────────────────────── */
.toast {
    border-radius: 12px;
    border: 1px solid var(--ui-borde);
    border-left: 4px solid var(--verde-500);
    box-shadow: var(--ui-e3);
    font-weight: 600; color: var(--ui-texto);
    padding: .9rem 1.15rem;
}
.toast.error { border-left-color: #c0392b; }

/* =================================================
   PANEL ADMIN
   ================================================= */
.sidebar {
    background:
        var(--ui-rayas),
        radial-gradient(420px 260px at 0% 100%, rgba(5, 184, 134, .16), transparent 70%),
        linear-gradient(180deg, #013a25 0%, var(--verde-900) 55%, #012217 100%);
    border-right: none;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 8px 0 30px -12px rgba(1, 26, 17, .5);
}
.sidebar-logo { padding: 1.4rem 1.35rem 1.1rem; border-bottom: none; }
.sidebar-logo-sub {
    display: inline-flex; align-items: center;
    color: var(--verde-300); opacity: .75; font-size: .62rem; letter-spacing: .16em;
}
.sidebar-logo-sub::before {
    content: ''; width: 13px; height: 10px; margin-right: .5rem;
    background: var(--ui-barras); color: var(--verde-400); transform: skewX(-24deg);
}
.sidebar-usuario {
    margin: 0 .9rem .4rem;
    padding: .7rem .75rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}
.sidebar-usuario .avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--verde-400), var(--verde-600));
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(5, 184, 134, .6);
}
.sidebar-usuario .info .rol { color: var(--verde-300); opacity: .7; font-size: .62rem; letter-spacing: .1em; }
.sidebar-nav { padding: .4rem .7rem; }
.sidebar-nav .seccion-titulo {
    padding: 1rem .65rem .35rem;
    color: rgba(255, 255, 255, .32);
    font-size: .6rem; letter-spacing: .16em;
}
.sidebar-nav a {
    border-left: none;
    border-radius: 10px;
    padding: .62rem .75rem;
    margin: 1px 0;
    color: rgba(255, 255, 255, .66);
    font-weight: 500;
}
.sidebar-nav a .nav-icon { opacity: .85; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-nav a.activo {
    background: linear-gradient(90deg, rgba(77, 212, 168, .2), rgba(77, 212, 168, .06));
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(77, 212, 168, .2);
}
/* Indicador activo: barras diagonales del logo */
.sidebar-nav a.activo::after {
    content: '';
    position: absolute; right: .8rem; top: 50%;
    width: 15px; height: 12px; margin-top: -6px;
    background: var(--ui-barras); color: var(--verde-300);
    transform: skewX(-24deg);
}
.sidebar-nav a.activo .nav-icon { color: var(--verde-300); opacity: 1; }
.badge-nav {
    background: var(--verde-300); color: var(--verde-900);
    font-weight: 800; border-radius: 999px; padding: .12rem .5rem;
}
.sidebar-nav a.activo .badge-nav { margin-right: 1.4rem; }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .06); padding: .9rem 1.35rem; }
.sidebar-footer a { color: rgba(255, 255, 255, .5); font-weight: 500; }

/* La marca de agua flotante tapaba contenido: se retira */
.watermark-logo { display: none !important; }

.topbar {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--ui-borde);
    box-shadow: none;
    padding: 1rem 2rem;
}
.topbar-titulo h1 {
    display: flex; align-items: center;
    font-size: 1.22rem; font-weight: 800; letter-spacing: -.025em;
}
.topbar-titulo h1::before {
    content: ''; width: 17px; height: 16px; margin-right: .65rem;
    background: var(--ui-barras); color: var(--verde-500);
    transform: skewX(-24deg); flex-shrink: 0;
}
.topbar-titulo .breadcrumb {
    font-size: .68rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ui-texto-3);
    margin-top: .2rem; padding-left: calc(17px + .65rem);
}
.page-body { padding: 2rem; max-width: 1480px; width: 100%; }

.admin-footer {
    background: transparent; border-top: 1px solid var(--ui-borde);
    color: var(--ui-texto-3); font-weight: 500;
}

/* Stats */
.stats-grid { gap: 1.1rem; }
.stat-card {
    border-radius: var(--ui-r-lg);
    border: 1px solid var(--ui-borde);
    box-shadow: var(--ui-e2);
    padding: 1.3rem 1.4rem 1.25rem;
    gap: 1rem;
    background:
        linear-gradient(180deg, rgba(var(--sc-rgb), .045), transparent 55%),
        var(--ui-superficie);
}
.stat-card:hover { box-shadow: var(--ui-e3); transform: translateY(-3px); }
/* Firma: barras diagonales en la esquina (reemplaza el círculo) */
.stat-card::after {
    top: 1.35rem; right: 1.35rem;
    width: 22px; height: 18px;
    border-radius: 0;
    background: var(--ui-barras);
    color: rgba(var(--sc-rgb), .3);
    transform: skewX(-24deg);
}
.stat-card::before { height: 3px; background: linear-gradient(90deg, var(--sc-color), rgba(var(--sc-rgb), 0) 70%); border-radius: 0; }
.stat-icono {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--sc-rgb), .12), rgba(var(--sc-rgb), .05));
    box-shadow: inset 0 0 0 1px rgba(var(--sc-rgb), .14);
}
.stat-info .etiqueta { color: var(--ui-texto-3); font-size: .64rem; letter-spacing: .12em; }
.stat-info .numero { font-size: 2.35rem; font-weight: 800; letter-spacing: -.035em; color: var(--ui-texto); }

/* Colas del dashboard */
.colas-grid { gap: 1.1rem; }
.cola-card {
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-e1);
    transition: box-shadow .25s var(--ui-ease), transform .25s var(--ui-ease);
}
.cola-card:hover { box-shadow: var(--ui-e3); transform: translateY(-3px); }
.cola-card-header {
    position: relative; overflow: hidden;
    padding: .8rem 1rem;
    border-radius: 0;
}
.cola-card-header::after {
    content: ''; position: absolute; inset: 0;
    background: var(--ui-rayas);
    pointer-events: none;
}
.cola-card-header .nombre { font-size: .8rem; font-weight: 700; position: relative; z-index: 1; }
.cola-card-header .codigo {
    position: relative; z-index: 1;
    background: rgba(255, 255, 255, .95); color: var(--verde-800);
    border-radius: 6px;
}
.cola-turno-actual { font-size: 2.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--verde-700); }
.cola-turno-actual.vacio { color: #c9d3ce; font-weight: 600; }
.cola-stats { border-top: 1px dashed var(--ui-borde-fuerte); color: var(--ui-texto-3); }

/* Pestañas de Gestión: control segmentado */
.tabs-bar {
    display: inline-flex; gap: .25rem;
    padding: .3rem;
    background: #e9efec;
    border: 1px solid var(--ui-borde);
    border-bottom: 1px solid var(--ui-borde);
    border-radius: 14px;
    margin-bottom: 1.6rem;
}
.tab-btn {
    border: none; margin: 0;
    border-radius: 10px;
    padding: .55rem 1.1rem;
    color: var(--ui-texto-2); font-weight: 600;
}
.tab-btn:hover { background: rgba(255, 255, 255, .6); color: var(--verde-700); }
.tab-btn.activo {
    background: #fff; color: var(--verde-700);
    box-shadow: var(--ui-e2);
}

/* Botones de acción en tablas */
.btn-accion { border-radius: 9px; width: 34px; height: 34px; }
.btn-accion-editar, .btn-accion-key { background: var(--verde-50); box-shadow: inset 0 0 0 1px var(--verde-200); }
.btn-accion-desactivar { background: #f2f4f3; box-shadow: inset 0 0 0 1px #e2e7e4; }
.btn-accion-eliminar { background: #fdf0ee; color: #a23b2c; box-shadow: inset 0 0 0 1px #f3c9c2; }
.btn-accion-eliminar:hover { background: #a23b2c; color: #fff; }
.color-badge { border-radius: 7px; padding: .26rem .6rem; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); text-shadow: none; }

/* Filtros */
.filtros-bar { border: 1px solid var(--ui-borde); box-shadow: var(--ui-e2); border-radius: var(--ui-r-lg); padding: 1.3rem 1.4rem; }

/* Asignar turno: tarjetas de especialidad */
.at-esp-card, .at-esp2-card {
    border: 1px solid var(--ui-borde-fuerte);
    border-radius: 14px;
    box-shadow: var(--ui-e1);
    transition: border-color .2s, box-shadow .25s var(--ui-ease), transform .25s var(--ui-ease), background .2s;
}
.at-esp-card:hover, .at-esp2-card:hover { box-shadow: var(--ui-e2); border-color: var(--verde-300); }
.at-esp-card.seleccionada, .at-esp2-card.seleccionada {
    border-color: var(--verde-500);
    background: linear-gradient(180deg, var(--verde-50), #fff);
    box-shadow: var(--ui-anillo), var(--ui-e2);
}
.turno-resultado {
    background: var(--ui-rayas), linear-gradient(135deg, var(--verde-600), var(--verde-800));
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-e3);
}

/* Gestión de videos */
.vid-item { border-radius: 12px; border-bottom: 1px solid var(--ui-borde); }
.vid-item.activo { background: var(--verde-50); box-shadow: inset 3px 0 0 var(--verde-500); }
.vid-thumb { border-radius: 10px; box-shadow: var(--ui-e1); }
.hsj-player { border-radius: var(--ui-r-lg); box-shadow: var(--ui-e3); }

/* =================================================
   LOGIN
   ================================================= */
body.ui-login {
    background:
        repeating-linear-gradient(-60deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 28px),
        radial-gradient(900px 600px at 15% 20%, rgba(5, 184, 134, .25), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, rgba(77, 212, 168, .12), transparent 60%),
        linear-gradient(160deg, #013a25, #011a10);
    padding: 1.25rem;
}
.ui-login .login-wrap {
    max-width: 980px; min-height: 560px;
    border-radius: 26px;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
}
.ui-login .login-brand {
    background:
        var(--ui-rayas),
        radial-gradient(500px 380px at 20% 15%, rgba(77, 212, 168, .3), transparent 65%),
        linear-gradient(150deg, var(--verde-600), var(--verde-800));
    align-items: flex-start; justify-content: space-between;
    padding: 2.75rem;
}
.ui-login .login-brand::before { display: none; }
.ui-login .login-brand-logo { width: 220px; max-width: 70%; }
.ui-login .login-brand p {
    text-align: left; color: rgba(255, 255, 255, .85);
    font-size: 1.55rem; font-weight: 300; line-height: 1.3; letter-spacing: -.02em;
    max-width: 330px;
}
.ui-login .login-brand p::before {
    content: ''; display: block;
    width: 34px; height: 28px; margin-bottom: 1.1rem;
    background: linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px,
        currentColor 12px 18px, transparent 18px 24px, currentColor 24px 30px);
    color: var(--verde-300);
    transform: skewX(-24deg);
}
.ui-login .login-brand .decoration-dots { display: none; }
.ui-login .login-form-panel { width: 420px; padding: 3rem 2.75rem; }
.ui-login .login-form-panel h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.ui-login .login-sub { color: var(--ui-texto-3); }
.ui-login .input-icon-wrap .icono-campo { color: var(--verde-500); opacity: .7; }
.ui-login .input-icon-wrap .form-control { padding-top: .8rem; padding-bottom: .8rem; }
.ui-login .btn-login {
    padding: .95rem; border-radius: 12px; font-weight: 700;
    background: linear-gradient(180deg, var(--verde-500), var(--verde-600));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -10px rgba(2, 117, 85, .7);
    transition: transform .15s var(--ui-ease), box-shadow .2s;
}
.ui-login .btn-login:hover {
    background: linear-gradient(180deg, var(--verde-600), var(--verde-700));
    transform: translateY(-1px);
}
.ui-login .pantalla-link {
    opacity: 1; padding: .7rem; border-radius: 12px;
    border: 1px solid var(--ui-borde-fuerte); color: var(--verde-700);
    transition: background .2s, border-color .2s;
}
.ui-login .pantalla-link:hover { background: var(--verde-50); border-color: var(--verde-300); }
@media (max-width: 700px) {
    .ui-login .login-brand { padding: 1.75rem; min-height: 0; gap: 1.5rem; }
    .ui-login .login-brand p { font-size: 1.1rem; }
    .ui-login .login-form-panel { width: 100%; padding: 2rem 1.5rem; }
}

/* =================================================
   ESPECIALISTA
   ================================================= */
.esp-topbar {
    background:
        var(--ui-rayas),
        linear-gradient(100deg, #013a25, var(--verde-800) 60%, var(--verde-700));
    box-shadow: 0 10px 30px -14px rgba(1, 26, 17, .6);
}
.btn-logout-esp, .btn-salir {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .08) !important;
}
.btn-logout-esp:hover, .btn-salir:hover { background: rgba(255, 255, 255, .16) !important; }
.esp-stat-card {
    border: 1px solid var(--ui-borde) !important;
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-e2) !important;
    position: relative; overflow: hidden;
}
.esp-stat-card::after {
    content: ''; position: absolute; top: 1rem; right: 1rem;
    width: 18px; height: 14px;
    background: var(--ui-barras); color: rgba(2, 117, 85, .18);
    transform: skewX(-24deg);
}
.esp-stat-num { font-weight: 800 !important; letter-spacing: -.03em; }
.esp-stat-icono { border-radius: 12px !important; }
.turno-panel, .cola-espera {
    border: 1px solid var(--ui-borde) !important;
    border-radius: var(--ui-r-xl) !important;
    box-shadow: var(--ui-e2) !important;
    overflow: hidden;
}
.turno-panel-header {
    position: relative;
    background: var(--ui-rayas), linear-gradient(100deg, var(--verde-700), var(--verde-500)) !important;
}
.turno-panel-header h2 { display: flex; align-items: center; color: #fff; }
.turno-panel-header h2::before {
    content: ''; width: 15px; height: 13px; margin-right: .6rem;
    background: var(--ui-barras); color: var(--verde-200); transform: skewX(-24deg);
}
.numero-turno-esp {
    font-weight: 900 !important; letter-spacing: -.03em !important;
    background: linear-gradient(180deg, var(--verde-600), var(--verde-800));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.numero-turno-esp.sin-turno { -webkit-text-fill-color: #c9d3ce; background: none; }
.btn-atender, .btn-llamar {
    border-radius: 12px !important;
    background: linear-gradient(180deg, var(--verde-500), var(--verde-600)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -10px rgba(2, 117, 85, .7) !important;
}
.btn-atender:hover, .btn-llamar:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--verde-600), var(--verde-700)) !important;
    transform: translateY(-1px);
}
.btn-ausente { border-radius: 12px !important; }
.btn-rellamar { border-radius: 10px !important; }
.cola-item { transition: background .15s; }
.cola-item:hover { background: #f6fbf9 !important; }

/* =================================================
   RECEPCIÓN
   ================================================= */
.rec-topbar {
    background:
        var(--ui-rayas),
        linear-gradient(100deg, #013a25, var(--verde-800) 60%, var(--verde-700)) !important;
    box-shadow: 0 10px 30px -14px rgba(1, 26, 17, .6) !important;
}
.rec-datos, .rec-resumen {
    border: 1px solid var(--ui-borde) !important;
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-e2) !important;
}
.rec-section-title { display: flex; align-items: center; color: var(--ui-texto-2) !important; letter-spacing: .1em !important; }
.rec-section-title::before {
    content: ''; width: 15px; height: 12px; margin-right: .6rem;
    background: var(--ui-barras); color: var(--verde-400); transform: skewX(-24deg);
}
.rec-esp-btn {
    border: 1px solid var(--ui-borde) !important;
    border-radius: 18px !important;
    box-shadow: var(--ui-e2) !important;
    transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s !important;
}
.rec-esp-btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ui-e3) !important;
    border-color: var(--verde-300) !important;
}
.rec-esp-btn:active { transform: translateY(-1px) scale(.98) !important; }
.rec-esp-dot {
    border-radius: 14px !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 8px 18px -8px rgba(1, 51, 32, .55) !important;
    letter-spacing: -.02em;
}
.rec-toggle-pref { border-radius: 10px !important; }
.ticket-modal { border-radius: var(--ui-r-xl) !important; box-shadow: 0 30px 80px -20px rgba(1, 33, 20, .45) !important; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (max-width: 900px) {
    .topbar { padding: .85rem 1rem; }
    .page-body { padding: 1.1rem; }
    .tabs-bar { display: flex; overflow-x: auto; max-width: 100%; }
    .tab-btn { white-space: nowrap; }
}

/* ── Ajustes finos ───────────────────────────────── */
/* Barras de las estadísticas: abajo a la derecha (no pisan la etiqueta) */
.stat-card::after { top: auto; bottom: 1.45rem; }
/* El punto solo en badges de estado, no en contadores */
.badge::before { display: none; }
.badge-espera::before, .badge-llamado::before, .badge-atendido::before, .badge-ausente::before,
.badge-cancelado::before, .badge-activo::before, .badge-inactivo::before { display: block; }

/* Asignar turno: opciones de prioridad como tarjetas seleccionables */
.priority-options .priority-option {
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: .55rem .6rem;
    padding: .9rem 1rem;
    border: 1px solid var(--ui-borde-fuerte);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--ui-e1);
}
.priority-options .priority-option:hover { border-color: var(--verde-300); box-shadow: var(--ui-e2); }
.priority-options .priority-option:has(input:checked) {
    border-color: var(--verde-500);
    background: linear-gradient(180deg, var(--verde-50), #fff);
    box-shadow: var(--ui-anillo), var(--ui-e2);
}
.priority-options .priority-badge { justify-self: start; border-radius: 999px; letter-spacing: .05em; }
.priority-desc { grid-column: 1 / -1; font-size: .78rem; color: var(--ui-texto-3); line-height: 1.45; }

@media (max-width: 900px) {
    .sidebar { box-shadow: none; }
    .sidebar.abierto { box-shadow: 18px 0 50px -10px rgba(1, 26, 17, .6); }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .stat-card { padding: 1rem; gap: .7rem; }
    .stat-card-top { flex-direction: column; align-items: flex-start; gap: .55rem; }
    .stat-info .numero { font-size: 1.9rem; }
    .stat-card::after { bottom: 1.1rem; right: 1rem; }
    .topbar-titulo h1 { font-size: 1.05rem; }
}

/* =================================================
   ADMIN SIN SCROLL – "app shell"
   La página ocupa exactamente la ventana; solo las listas
   que pueden crecer se desplazan dentro de su tarjeta.
   ================================================= */
.ui-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ui-toolbar .tabs-bar { margin-bottom: 0; }
.ui-toolbar-acciones { display: flex; gap: .6rem; align-items: center; }
.topbar-acciones .btn { padding: .6rem 1.1rem; }

/* Indicadores compactos en la barra superior (Asignar turno) */
.ui-kpis { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ui-kpi-fecha {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: var(--ui-texto-2);
    margin-right: .35rem;
}
.ui-kpi {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .38rem .75rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--ui-borde-fuerte);
    font-size: .74rem; font-weight: 600; color: var(--ui-texto-3);
}
.ui-kpi strong { font-size: .95rem; font-weight: 800; color: var(--ui-texto); font-variant-numeric: tabular-nums; }
.ui-kpi.espera strong { color: #b7791f; }
.ui-kpi.ok strong { color: var(--verde-600); }

/* Indicadores: misma tarjeta horizontal en todas las pantallas */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 0; }
.stat-card {
    flex-direction: row; align-items: center; gap: .9rem;
    padding: .95rem 1.1rem; min-height: 0;
}
.stat-card::after { bottom: auto; top: 50%; margin-top: -9px; right: 1.1rem; }
.stat-card .stat-info { display: flex; flex-direction: column-reverse; gap: .2rem; }
.stat-info .numero { font-size: 1.75rem; }
.stat-info .etiqueta { font-size: .62rem; }
.stat-card.gris { --sc-color: var(--gris-400); --sc-rgb: 107,117,107; --sc-icon-color: var(--gris-500); }

/* Filtros en línea dentro de la tarjeta (Historial) */
.ui-filtros {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: .9rem; align-items: end;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--ui-borde);
}
.ui-filtros .form-group { margin: 0; }
.ui-filtros .form-control { padding-top: .55rem; padding-bottom: .55rem; }

/* Usuarios: especialistas y recepcionistas lado a lado */
.ui-grid-usuarios { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.25rem; }
.vid-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }

/* Tablas con encabezado fijo al desplazarse */
.tabla thead th { position: sticky; top: 0; z-index: 1; background: #f7faf8; box-shadow: inset 0 -1px 0 var(--ui-borde-fuerte); }

@media (min-width: 901px) and (min-height: 560px) {
    body { overflow: hidden; }
    .admin-layout { height: 100vh; }
    .main-content { height: 100vh; min-height: 0; overflow: hidden; }
    .topbar { flex-shrink: 0; padding: .8rem 1.75rem; }
    .page-body {
        flex: 1 1 auto; min-height: 0;
        display: flex; flex-direction: column; gap: 1.1rem;
        padding: 1.25rem 1.75rem;
        overflow: hidden;
    }
    .page-body > * { flex-shrink: 0; margin-bottom: 0 !important; }
    .admin-footer { flex-shrink: 0; padding: .45rem 1.75rem; font-size: .68rem; }

    /* Bloque que ocupa el resto de la altura */
    .ui-crece { flex: 1 1 auto !important; min-height: 0 !important; }
    .card.ui-crece { display: flex; flex-direction: column; padding: 1.15rem 1.35rem; }
    .card.ui-crece > .card-header { flex-shrink: 0; margin-bottom: .9rem; padding-bottom: .8rem; }
    .card.ui-crece > .table-wrapper,
    .card.ui-crece > .ui-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
    .ui-grid-usuarios, .vid-grid { grid-template-rows: minmax(0, 1fr); }
    .ui-grid-usuarios > .card, .vid-grid > .card { min-height: 0; }
    .vid-grid > .card:last-child { overflow: auto; }

    /* Dashboard: colas en cuadrícula simétrica que llena la tarjeta */
    .pg-dashboard .colas-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: minmax(118px, 1fr);
        align-content: stretch;
        padding: 2px;
    }
    .pg-dashboard .cola-card { display: flex; flex-direction: column; }
    .pg-dashboard .cola-card-header { padding: .6rem .9rem; }
    .pg-dashboard .cola-card-body { flex: 1; justify-content: center; padding: .55rem .9rem .65rem; gap: .35rem; }
    .pg-dashboard .cola-turno-actual { font-size: clamp(1.4rem, 2.6vh, 2.2rem); padding: .2rem 0; }
    .pg-dashboard .cola-turno-actual.vacio { font-size: 1rem; padding: .2rem 0; }
    .pg-dashboard .cola-stats { padding-top: .4rem; font-size: .72rem; }

    /* Asignar turno: formulario e información a la altura de la ventana */
    .page-body .main-layout {
        display: grid; grid-template-columns: minmax(0, 1fr) 320px;
        gap: 1.1rem; align-items: stretch; max-height: none;
    }
    .page-body .main-layout .form-column,
    .page-body .main-layout .info-column { max-height: none; min-height: 0; position: static; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; }
    .page-body .form-column > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 1.1rem 1.35rem 0; margin: 0; }
    .page-body .form-column > .card > .card-header { flex-shrink: 0; margin-bottom: .8rem; padding-bottom: .7rem; }
    .page-body .form-column .card-body { flex: 1; min-height: 0; overflow: auto; padding: 0 .15rem; }
    .page-body .form-column .form-actions {
        position: sticky; bottom: 0; z-index: 2;
        background: linear-gradient(180deg, rgba(255,255,255,.85), #fff 35%);
        margin: .5rem -.15rem 0; padding: .85rem .15rem 1rem;
        border-top: 1px solid var(--ui-borde);
    }
    .page-body .info-column .info-card {
        margin: 0; padding: 1rem 1.1rem;
        border: 1px solid var(--ui-borde); border-radius: var(--ui-r-lg); box-shadow: var(--ui-e2);
    }
    .page-body .info-column .info-card:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .page-body .info-column .info-card:last-child .compact-specialties { flex: 1; min-height: 0; overflow: auto; padding-right: .2rem; }
}

@media (max-width: 1100px) {
    .ui-grid-usuarios, .vid-grid { grid-template-columns: minmax(0, 1fr); }
    .ui-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1250px) {
    .pg-dashboard .colas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
    .ui-toolbar-acciones { width: 100%; }
    .ui-toolbar-acciones .btn { flex: 1; justify-content: center; }
    .ui-kpis .ui-kpi-fecha { display: none; }
    .ui-filtros { grid-template-columns: 1fr; }
}

/* ── Ajustes del shell: simetría y nada oculto ── */
/* Nombres de cola en una sola línea: todas las tarjetas iguales */
.pg-dashboard .cola-card-header .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: .5rem; }

/* Usuarios: apilados (tablas completas, con acciones visibles);
   lado a lado solo en pantallas anchas */
.ui-grid-usuarios { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) and (min-height: 560px) {
    .ui-grid-usuarios { grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); }
}
@media (min-width: 1600px) {
    .ui-grid-usuarios { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) !important; }
}

/* Asignar turno: formulario compacto que entra completo */
.pg-asignar_turno .form-column > .card > .card-header { display: none; }
.pg-asignar_turno .patient-info-card { padding: .75rem .9rem .55rem; margin-bottom: .7rem; border-width: 1px; }
.pg-asignar_turno .patient-info-card h3 { margin-bottom: .45rem; }
.pg-asignar_turno .patient-info-card .form-group { margin-bottom: .2rem; }
.pg-asignar_turno .form-input-large {
    padding: .62rem .85rem; border: 1px solid var(--ui-borde-fuerte); border-radius: 10px;
    background: #fbfcfb; font-weight: 500;
}
.pg-asignar_turno .form-input-large:focus { border-color: var(--verde-400); box-shadow: var(--ui-anillo); background: #fff; }
.pg-asignar_turno .form-switch-container { margin-bottom: .7rem; padding: .45rem .75rem; border-radius: 10px; }
.pg-asignar_turno .priority-section { margin-bottom: .7rem; }
.pg-asignar_turno .priority-options .priority-option { padding: .6rem .8rem; gap: .35rem .55rem; }
.pg-asignar_turno .priority-desc { font-size: .72rem; line-height: 1.35; }

.pg-asignar_turno .cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin-top: .35rem; }
.pg-asignar_turno .selection-card,
.pg-asignar_turno .specialist-card {
    flex-direction: row; align-items: center; text-align: left; gap: .6rem;
    min-height: 0; padding: .55rem .65rem;
    border: 1px solid var(--ui-borde-fuerte); border-radius: 12px;
    box-shadow: var(--ui-e1);
}
.pg-asignar_turno .selection-card:hover { border-color: var(--verde-300); box-shadow: var(--ui-e2); }
.pg-asignar_turno .selection-card.selected { border-color: var(--verde-500); background: linear-gradient(180deg, var(--verde-50), #fff); box-shadow: var(--ui-anillo), var(--ui-e2); }
.pg-asignar_turno .selection-card .card-icon,
.pg-asignar_turno .specialist-card .card-icon { width: 34px; height: 34px; margin: 0; flex-shrink: 0; border-radius: 10px; }
.pg-asignar_turno .selection-card .card-content { min-width: 0; }
.pg-asignar_turno .selection-card .card-content h4 { font-size: .76rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-asignar_turno .selection-card .card-content small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 1250px) { .pg-asignar_turno .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .pg-asignar_turno .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Filas de tabla más compactas (más datos visibles sin desplazar) */
@media (min-width: 901px) and (min-height: 560px) {
    .tabla td { padding: .5rem 1rem; }
    .tabla th { padding: .65rem 1rem; }
    .tabla td .text-muted.text-small { line-height: 1.3; }
}

/* Asignar turno: estado por especialidad en filas de una línea */
.pg-asignar_turno .compact-specialties { gap: .3rem; }
.pg-asignar_turno .specialty-row {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .42rem .6rem; border-radius: 9px; background: #f6f9f7;
}
.pg-asignar_turno .specialty-info { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; }
.pg-asignar_turno .specialty-info > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; min-width: 0; flex: 1; }
.pg-asignar_turno .specialty-info strong { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-asignar_turno .specialty-info small { font-size: .66rem; color: var(--ui-texto-3); white-space: nowrap; flex-shrink: 0; }
.pg-asignar_turno .specialty-color { width: 4px !important; height: 18px !important; border-radius: 2px !important; flex-shrink: 0; }
.pg-asignar_turno .specialty-row .badge { min-width: 26px; justify-content: center; padding: .15rem .45rem; }
.pg-asignar_turno .info-card h3 { font-size: .85rem; margin-bottom: .55rem; display: flex; align-items: center; gap: .45rem; }
.pg-asignar_turno .compact-colors { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .6rem; font-size: .74rem; }
.ui-celda-texto { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Acciones de tabla siempre en una fila */
.acciones-celda { flex-wrap: nowrap !important; }
.tabla td:last-child { white-space: nowrap; }
.pg-asignar_turno .specialty-color { flex: 0 0 4px !important; }
.pg-asignar_turno .compact-colors { grid-template-columns: 1fr; gap: .25rem; }
/* Nombres de especialidad en hasta 2 líneas (sin cortes) */
.pg-asignar_turno .selection-card .card-content h4 {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Tablas de gestión: densidad compacta, todo visible a 1366×768 */
@media (min-width: 901px) and (min-height: 560px) {
    .pg-gestion .tabla td { padding: .32rem .7rem; }
    .pg-gestion .tabla th { padding: .6rem .7rem; }
    .pg-gestion .btn-accion { width: 28px; height: 28px; border-radius: 8px; }
    .pg-gestion .btn-accion svg { width: 14px; height: 14px; }
    .pg-gestion .acciones-celda { gap: .3rem; }
    .pg-gestion .color-badge { padding: .18rem .5rem; font-size: .66rem; min-width: 40px; }
    .pg-gestion .tabla .badge { padding-top: .18rem; padding-bottom: .18rem; }
    .pg-gestion .ui-celda-texto { max-width: 240px; }
}

/* ── Sin franjas laterales de color en ningún lugar ── */
.toast, .toast.error, .toast.exito, .toast.info { border-left: 1px solid var(--ui-borde) !important; }
.vid-item.activo { box-shadow: inset 0 0 0 1px var(--verde-300); }
.esp-stat-card, .esp-stat-card.gris, .esp-stat-card.rojo, .esp-stat-card.azul { border-left: 1px solid var(--ui-borde) !important; }
.pg-asignar_turno .specialty-color {
    flex: 0 0 9px !important; width: 9px !important; height: 9px !important; border-radius: 50% !important;
}