/* ============================================================
   LABIX — Auth pages (login, cambiar-password) + Dashboard shell
   Depende de styles.css para tokens (colors, gradient, blobs, btn).
   Mobile-first.
   ============================================================ */

/* -------- Layout base -------- */
.auth-body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    position: relative;
    z-index: 2;
}

/* -------- Card (glassmorphism sobre el bg de marca) -------- */
.auth-card {
    width: 100%;
    max-width: 440px;
    background: rgba(30, 0, 56, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 32px 24px 28px;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.auth-brand {
    text-align: center;
    margin-bottom: 20px;
}
.auth-logo {
    width: min(70%, 240px);
    height: auto;
    display: inline-block;
}

.auth-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 6px;
}
.auth-subtitle {
    font-size: 13.5px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 22px;
    line-height: 1.5;
}
.auth-subtitle strong { color: var(--text-primary); font-weight: 500; }

/* -------- Form -------- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* El atributo [hidden] del browser es `display:none` pero reglas como
   `.auth-field { display:flex }` lo pisan. Forzamos universalmente. */
[hidden] { display: none !important; }

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.auth-field input,
.auth-field textarea {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 13px 14px;          /* ~47px alto → buen target táctil */
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    min-width: 0;                /* evita que el input force al grid a expandirse en layouts 2-3col */
    box-sizing: border-box;
}
.auth-field .admin-select { min-width: 0; }

.auth-field textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;   /* algunos browsers usan monospace por default en textarea */
}

/* `<input type="color">` necesita reset del padding por defecto (que rompe
   el render del swatch) y de los pseudo-elementos del browser para que el
   cuadradito interior se vea limpio. Aplica a TODOS los color pickers que
   vivan dentro de un .auth-field, sin importar la clase específica. */
.auth-field input[type="color"] {
    height: 47px;
    padding: 5px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.auth-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.auth-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.auth-field input[type="color"]::-moz-color-swatch    { border: none; border-radius: 6px; }

/* Wrap insertado por JS alrededor de inputs type=password, contiene el
   botón de toggle mostrar/ocultar posicionado absoluto dentro del input. */
.input-wrap {
    position: relative;
    width: 100%;
}
.input-wrap input { padding-right: 46px; }   /* espacio para el ojito */

.pass-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
    padding: 0;
}
.pass-toggle:hover,
.pass-toggle:focus-visible {
    opacity: 1;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
.pass-toggle:focus-visible {
    outline: 2px solid rgba(166, 77, 255, 0.6);
    outline-offset: 2px;
}
.pass-toggle svg {
    width: 18px;
    height: 18px;
    pointer-events: none;    /* clicks en el SVG son del button, no del path */
    display: block;
}
.pass-toggle .icon-hidden  { display: none; }
.pass-toggle.is-showing .icon-visible { display: none; }
.pass-toggle.is-showing .icon-hidden  { display: block; }
.auth-field input:focus-visible,
.auth-field textarea:focus-visible {
    border-color: rgba(166, 77, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(166, 77, 255, 0.18);
}
.auth-field input::placeholder,
.auth-field textarea::placeholder {
    color: rgba(207, 207, 234, 0.35);
}

/* Icono calendario en inputs de fecha. labix-datepicker.js le pone la clase
   .labix-date-alt al altInput de flatpickr (input visible tipo text) — asi
   no dependemos de las clases internas de la libreria. */
.auth-field input.labix-date-alt {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFCFEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 36px !important;
}

.auth-hint {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    opacity: 0.75;
}

/* -------- Submit button con spinner -------- */
.auth-submit {
    margin-top: 6px;
    padding: 14px 20px;            /* target táctil 44+ */
    font-size: 14.5px;
    position: relative;
}
.auth-submit .btn-label { display: inline-block; }
.auth-submit .btn-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 10px;
    vertical-align: -3px;
}
.auth-submit[data-loading="true"] .btn-spinner { display: inline-block; }
.auth-submit[data-loading="true"] { opacity: 0.85; cursor: wait; }

@keyframes spin { to { transform: rotate(360deg); } }

/* -------- Error / alert messages -------- */
.auth-error {
    min-height: 0;
    font-size: 13px;
    color: #FFB1B1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: padding 0.2s ease, min-height 0.2s ease, margin 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    scroll-margin-top: 80px;   /* al hacer scrollIntoView, evita quedar pegado al header */
}
.auth-error[data-visible="true"] {
    padding: 12px 14px;
    margin: 14px 0;
    min-height: auto;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}
/* Dentro de un drawer el cartel de error es un hijo de una columna flex: sin
   esto lo achica el reparto de espacio (el texto queda cortado) y encima suma
   su propio margen al `gap` del contenedor, así que quedaba flotando lejos del
   formulario. */
.admin-drawer-body > .auth-error {
    flex: 0 0 auto;
    margin: 0;
}
.admin-drawer-body > .auth-error[data-visible="true"] {
    margin: 0 0 4px;
}

.auth-error[data-visible="true"]:focus {
    outline: 2px solid rgba(239, 68, 68, 0.45);
    outline-offset: 2px;
}

.auth-alt {
    margin-top: 18px;
    text-align: center;
}
.auth-alt-muted {
    font-size: 11.5px;
    color: var(--text-secondary);
    opacity: 0.55;
    letter-spacing: 0.3px;
}

/* -------- Switcher de 3 métodos de acceso (estilo underline, basado en Kuentas) --------
   Tab bar con border-bottom sutil y un indicador de 2px gradient bajo el activo. */
.auth-switcher {
    display: flex;
    margin: 0 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;               /* Firefox: sin scrollbar visible */
}
.auth-switcher::-webkit-scrollbar { display: none; }  /* WebKit */

.auth-switch-btn {
    flex: 1;
    position: relative;
    padding: 12px 14px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    letter-spacing: 0.3px;
    white-space: nowrap;
    min-height: 44px;                    /* target táctil */
    transition: color 0.2s ease;
}

/* Indicador de 2px debajo del tab activo, pintado con el gradiente de marca.
   Usa pseudo-element porque border-bottom con border-image en 2px no se ve bien. */
.auth-switch-btn::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -1px;                        /* superpone el borde inferior del contenedor */
    height: 2px;
    background: var(--gradient-brand);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-switch-btn:hover:not(.is-active) {
    color: var(--text-primary);
}

.auth-switch-btn.is-active {
    color: var(--text-primary);
}
.auth-switch-btn.is-active::after {
    transform: scaleX(1);
}

.auth-switch-btn:focus-visible {
    outline: 2px solid rgba(166, 77, 255, 0.6);
    outline-offset: -2px;
    border-radius: 4px;
}

/* -------- Checkbox "Mantener sesión iniciada" (global al login) -------- */
.auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary, #CFCFEA);
    font-size: 13px;
    user-select: none;
    transition: background 0.15s ease;
}
.auth-remember:hover {
    background: rgba(255, 255, 255, 0.04);
}
.auth-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.auth-remember-box {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.auth-remember-box::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, #FF7A18, #FF3D77, #A64DFF, #4DA6FF);
    transform: scale(0);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-remember input:checked + .auth-remember-box {
    border-color: rgba(166, 77, 255, 0.6);
    background: rgba(166, 77, 255, 0.08);
}
.auth-remember input:checked + .auth-remember-box::after {
    transform: scale(1);
}
.auth-remember input:focus-visible + .auth-remember-box {
    outline: 2px solid rgba(166, 77, 255, 0.5);
    outline-offset: 2px;
}
.auth-remember-label {
    line-height: 1.4;
}

/* -------- OTP input: dígitos centrados, tracking amplio -------- */
.otp-input {
    text-align: center;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 26px !important;
    font-weight: 500;
    letter-spacing: 10px;
    padding-left: 24px !important;    /* compensa el letter-spacing visual */
    padding-right: 14px !important;
}
.otp-input::placeholder {
    letter-spacing: 10px;
    font-size: 22px;
    font-weight: 400;
}

/* -------- Estado "enlace enviado" (check icon + mensaje) -------- */
.auth-sent {
    text-align: center;
    padding: 10px 0 4px;
}
.auth-sent-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.40);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 16px;
    font-weight: 600;
}

/* -------- Enlace de acción pequeño debajo de un form (reenviar, volver) -------- */
.auth-action-link {
    display: block;
    margin: 12px auto 0;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}
.auth-action-link:hover,
.auth-action-link:focus-visible {
    color: var(--text-primary);
}
.auth-action-link:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Variante: link secundario anclado a un campo (ej.: "¿Olvidaste tu
   contraseña?" debajo del input de password), alineado a la derecha. */
.auth-action-link--right {
    margin: 2px 0 0;
    padding: 4px 2px;
    text-align: right;
}

/* -------- Footer pequeño en páginas auth -------- */
.auth-footer {
    position: relative;
    z-index: 2;
    padding: 18px 16px 24px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-secondary);
    letter-spacing: 0.6px;
    opacity: 0.7;
}

/* ============================================================
   Dashboard shell
   ============================================================ */
.dash-body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    /* El header es position: fixed (más robusto que sticky con flex column),
       así que reservamos los primeros 60px para que el contenido no quede
       tapado al scrollear hasta arriba. La variable --header-h se define
       en admin-sidebar.css cuando aplica. */
    padding-top: var(--header-h, 60px);
}

/* Blobs más sutiles en dashboard (no quitan foco al contenido). */
.bg-blobs--dashboard .blob { opacity: 0.25 !important; filter: blur(120px); }

.dash-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(30, 0, 56, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dash-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
    text-decoration: none;
    /* Pegado a la izquierda, justo después de la hamburguesa.
       Empuja al .dash-user hacia el extremo derecho. */
    margin-right: auto;
}
.dash-brand img {
    height: 28px;
    width: auto;
    display: block;
}
.dash-brand-version {
    font-size: 10.5px;
    color: #A0A0B8;
    letter-spacing: 0.3px;
    font-weight: 400;
    opacity: 0.75;
}

.dash-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dash-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.1;
    min-width: 0;
}
.dash-user-name {
    font-size: 13.5px;
    color: #F4F4F8;
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-user-role {
    font-size: 10.5px;
    color: #A0A0B8;
    letter-spacing: 0.2px;
    text-transform: capitalize;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botón Salir — en desktop muestra texto ("Salir"); en mobile se vuelve
   circular como los botones 🔍 y 🔔 para no romper la simetría del header. */
.dash-logout-btn .dash-logout-icon { display: none; }
.dash-logout-btn .dash-logout-label { display: inline; }

@media (max-width: 520px) {
    .dash-brand-version { display: none; }
    .dash-user-role { display: none; }
    .dash-user-name { max-width: 110px; font-size: 12.5px; }
    .dash-user { gap: 8px; }

    /* En mobile no entra todo: el avatar y el nombre/rol del usuario los
       sacamos del header y dejamos solo los botones de acción
       (🔍 buscar, 🔔 notifs, → salir). El usuario igual ve su perfil
       desde el sidebar / Mi cuenta. */
    .dash-user-avatar,
    .dash-user-info { display: none; }

    /* Salir → icono circular, mismo formato que .labix-search-btn / .labix-notif-btn */
    .dash-logout-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #CFCFEA;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.14s ease, color 0.14s ease;
    }
    .dash-logout-btn:hover {
        background: rgba(166, 77, 255, 0.15);
        color: #FFFFFF;
    }
    .dash-logout-btn .dash-logout-icon  { display: inline-block; }
    .dash-logout-btn .dash-logout-label { display: none; }
}

.dash-main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 60px;
    position: relative;
    z-index: 2;
}

/* Mantener la clase vieja por si la usan otras páginas */
.dash-welcome { margin-bottom: 28px; }
.dash-welcome h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 5vw, 36px);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}
.dash-subtitle {
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------
   Hero del dashboard (dashboard.php) — logo del lab + saludo + acción
   ------------------------------------------------------------------ */
.dash-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
    padding: 24px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(30, 0, 56, 0.72), rgba(17, 0, 34, 0.72));
    border: 1px solid rgba(166, 77, 255, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    isolation: isolate;
}
.dash-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 0% 0%, rgba(166, 77, 255, 0.25), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(255, 61, 119, 0.18), transparent 55%);
    opacity: 0.9;
}
.dash-hero-logo {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 18px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(166, 77, 255, 0.3);
}
.dash-hero-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 6px;
}
.dash-hero-logo-initials {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #A64DFF, #FF3D77);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.dash-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-hero-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(24px, 4.2vw, 32px);
    font-weight: 500;
    letter-spacing: -0.3px;
    color: #F4F4F8;
    line-height: 1.2;
}
.dash-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: #CFCFEA;
    font-size: 13.5px;
}
.dash-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dash-hero-meta-item svg { color: #A64DFF; opacity: 0.9; }
.dash-hero-meta-item--lab { font-weight: 500; color: #F4F4F8; }
.dash-hero-role {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(166, 77, 255, 0.15);
    border: 1px solid rgba(166, 77, 255, 0.35);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: capitalize;
    color: #E8D6FF;
}
.dash-hero-actions {
    flex-shrink: 0;
}
.dash-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 720px) {
    .dash-hero {
        flex-wrap: wrap;
        padding: 20px;
        gap: 16px;
    }
    .dash-hero-logo { width: 64px; height: 64px; border-radius: 14px; }
    .dash-hero-logo-initials { font-size: 22px; }
    .dash-hero-actions {
        width: 100%;
    }
    .dash-hero-cta { width: 100%; justify-content: center; }
}

/* Footer de una dash-list con link "Ver las X restantes" */
.dash-list-footer {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Card "PIN de acceso al portal" en la ficha del paciente */
.portal-pin-box {
    margin: 14px 0 16px;
    padding: 18px 20px;
    background: rgba(166, 77, 255, 0.08);
    border: 1px dashed rgba(166, 77, 255, 0.45);
    border-radius: 12px;
    text-align: center;
}
.portal-pin-code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 32px;
    letter-spacing: 6px;
    font-weight: 500;
    color: #FFFFFF;
    padding: 14px 10px;
    margin: 10px auto;
    background: rgba(30, 0, 56, 0.6);
    border: 1px solid rgba(166, 77, 255, 0.4);
    border-radius: 10px;
    display: inline-block;
    min-width: 220px;
}
.portal-pin-muted {
    color: #CFCFEA;
    font-size: 13px;
    margin: 0;
}
.portal-pin-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.dash-panel {
    margin-top: 28px;
    background: rgba(30, 0, 56, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dash-panel h2 {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.dash-panel--muted { background: rgba(30, 0, 56, 0.35); }

.dash-kv {
    display: grid;
    grid-template-columns: minmax(160px, max-content) 1fr;
    gap: 10px 18px;
    font-size: 14px;
}
.dash-kv dt {
    color: var(--text-secondary);
    opacity: 0.75;
    font-weight: 400;
}
.dash-kv dd { color: var(--text-primary); word-break: break-word; }
/* Uniformar tamaño de fuente dentro del dash-kv: clases utilitarias como
   .admin-td-mono (que por default es 12px) o .dash-muted heredan el 14px. */
.dash-kv .admin-td-mono,
.dash-kv .dash-muted { font-size: inherit; }

.dash-muted { color: var(--text-secondary); opacity: 0.65; font-weight: 400; }

.dash-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(166, 77, 255, 0.18);
    border: 1px solid rgba(166, 77, 255, 0.35);
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    margin-right: 6px;
    margin-bottom: 4px;
}

.dash-permisos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dash-permiso {
    display: inline-block;
    padding: 4px 10px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

/* ============================================================
   Admin — breadcrumb, page header, panel, table, form, badges
   ============================================================ */
.admin-breadcrumb {
    font-size: 13px;
    margin-bottom: 16px;
}
.admin-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.admin-breadcrumb a:hover { color: var(--text-primary); }

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.admin-page-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.admin-panel {
    padding: 0;                    /* panel sin padding porque la tabla ya tiene el suyo */
    overflow: hidden;
}
/* ==========================================================
   Tabs reusables — usadas para alternar paneles dentro de una
   misma pantalla (ej: ver.php tiene "General" + "Hemograma" + ...).
   Cada panel se muestra/oculta segun la tab activa. Lo conmuta el
   JS de assets/js/labix-tabs.js (listener global por click).
   ========================================================== */
.admin-tabs { margin-top: 28px; }

/* ──────────────────────────────────────────────────────────────
   Tabs con pill sólida que se DESLIZA entre opciones.
   La pill (.admin-tabs-pill) es un span absoluto inyectado por JS
   (labix-tabs.js) que se posiciona/anima con transform+width sobre
   la tab activa. El gradient brand le da el color sólido.
   El layout permite scroll horizontal si los tabs desbordan.
   ────────────────────────────────────────────────────────────── */
.admin-tabs-nav {
    position: relative;
    display: flex;
    gap: 2px;
    padding: 5px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    flex-wrap: nowrap;
    /* Sin overflow horizontal: las inactivas comprimen su ancho mostrando
       solo el icono (con texto truncado si entra) y la activa toma su
       ancho natural. Las dimensiones reales son las que el JS lee para
       posicionar la pill, así que el morph sigue funcionando. */
    overflow: hidden;
}

/* La pill que se desliza con efecto "liquid morph": JS la anima con la
   Web Animations API estirándola hasta tocar el destino y contraerla
   después (3 keyframes: from → stretched → to). El CSS define solo el
   look base — colors sólidos, sin gradient. */
.admin-tabs-pill {
    position: absolute;
    top: 5px;
    left: 0;
    height: calc(100% - 10px);
    width: 0;
    border-radius: 9px;
    background: var(--admin-tabs-pill-color, #A64DFF);
    box-shadow: 0 6px 22px rgba(166, 77, 255, 0.48), 0 2px 8px rgba(166, 77, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.22);
    transform: translateX(0);
    transition: opacity 0.18s ease;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
.admin-tabs-pill.is-ready { opacity: 1; }

/* Tabs INACTIVAS: comprimen su ancho cuando hay muchas. El ícono es
   flex-shrink: 0 (siempre visible) y el texto se trunca con ellipsis.
   En hover se expanden temporalmente a su ancho natural para preview. */
.admin-tabs-tab {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    min-width: 36px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #a4a3b0);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.6;
    transform: scale(0.96);
    transform-origin: center;
    transition: opacity 0.22s ease, transform 0.22s ease, color 0.22s ease,
                max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-tabs-tab:hover {
    opacity: 0.85;
    transform: scale(1);
}
.admin-tabs-tab-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    transition: transform 0.22s ease;
}
/* Span del label de la tab — se trunca con ellipsis cuando la tab está
   comprimida, y se oculta del todo si no entra (queda solo el ícono). */
.admin-tabs-tab > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Tab ACTIVA: NO se comprime (flex: 0 0 auto) y muestra texto completo.
   Más grande, opaca al 100%, ícono blanco, font weight bold. */
.admin-tabs-tab.is-active {
    flex: 0 0 auto;
    max-width: none;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    opacity: 1;
    transform: scale(1);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Tabs INMEDIATAMENTE ADYACENTES a la activa (la anterior y la siguiente):
   muestran el texto completo, sin ellipsis. Las que están más lejos sí se
   comprimen como antes. */
.admin-tabs-tab.is-active + .admin-tabs-tab,
.admin-tabs-tab:has(+ .admin-tabs-tab.is-active) {
    flex: 0 0 auto;
    max-width: none;
}
.admin-tabs-tab.is-active + .admin-tabs-tab > span,
.admin-tabs-tab:has(+ .admin-tabs-tab.is-active) > span {
    overflow: visible;
    text-overflow: clip;
}
.admin-tabs-tab.is-active .admin-tabs-tab-icon {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
}
.admin-tabs-tab:hover {
    color: var(--text-primary, #ffffff);
}
/* Tab activa: texto blanco potente sobre la pill gradient. */
.admin-tabs-tab.is-active {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.admin-tabs-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.admin-tabs-panel { display: none; }
.admin-tabs-panel.is-active { display: block; animation: tabFadeIn 0.22s ease; }
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Neutraliza el margin-top de TODOS los .dash-panel dentro de un panel
   de tab. Los partials usan wrappers en grid (.hemograma-grid, .orina-
   completa-grid, etc.) con gap propio para el spacing interno; el margin-
   top default arruina el alineado entre las 2 columnas (la segunda queda
   más abajo). El spacing del primer panel respecto a la nav lo maneja
   el .admin-tabs > .admin-tabs-nav { margin-bottom }. */
.admin-tabs-panel .dash-panel { margin-top: 0; }
/* Si la card que esta primera en el panel ya tiene margin-top de 28,
   neutralizamos para que el spacing lo maneje el .admin-tabs. */
.admin-tabs-panel > .dash-panel:first-child { margin-top: 0; }

/* Wrapper para mostrar 2 .dash-panel/.admin-form-panel lado a lado en
   desktop. Colapsa a 1 columna en tablet/mobile (≤860px). El margin-top
   default de .dash-panel se neutraliza para que el grid maneje el gap. */
.admin-panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}
.admin-panel-row > .dash-panel {
    margin-top: 0;
    min-width: 0;
}
@media (max-width: 860px) {
    .admin-panel-row { grid-template-columns: 1fr; gap: 16px; }
}
.admin-form-panel { padding: 24px; }
/* Card que contiene solo los botones de acción: menos padding vertical
   y sin margin-top en el .admin-form-actions (que el padding del panel sea simétrico). */
.admin-form-panel:has(> .admin-form-actions) { padding: 14px 24px; }
.admin-form-panel > .admin-form-actions { margin-top: 0; }
/* Cards anidadas dentro de otra card: menor separación y sin margen superior en la primera. */
.dash-panel .dash-panel { margin-top: 12px; }
.dash-panel .dash-panel:first-child { margin-top: 0; }

.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Sin esto, una tabla con muchas columnas/contenido empuja el ancho del
       container y aparece scroll horizontal a nivel de la PÁGINA en vez de
       dentro del wrap. min-width:0 permite que el wrap shrinkee. */
    max-width: 100%;
    min-width: 0;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
}
/* El bg del encabezado va en cada <th> en lugar del <tr> para poder
   redondear los extremos izq/der con border-radius (los <tr> no soportan
   border-radius en la mayoría de los browsers). */
.admin-table thead tr {
    background: transparent;
}
.admin-table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 500;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.22);
}
.admin-table thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.admin-table thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.admin-table td {
    padding: 14px 20px;
    color: var(--text-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
/* Sin separador en la primera fila — el header de la tabla ya hace de divisoria. */
.admin-table tbody tr:first-child td {
    border-top: 0;
}
.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}
.admin-td-email {
    color: var(--text-secondary);
    font-size: 13px;
}
/* Variantes de ancho usadas en admin/usuarios/: estado angosto, email amplio. */
.admin-th-estado,
.admin-td-estado {
    width: 1%;
    white-space: nowrap;
}
.admin-th-email,
.admin-td-email--wide {
    min-width: 240px;
    width: 32%;
}
.admin-th-avatar,
.admin-td-avatar {
    width: 64px;
    padding-left: 14px !important;
    padding-right: 0 !important;
}
.admin-td-avatar { line-height: 0; overflow: visible !important; }

/* Logo del laboratorio en celda de listado: misma identidad visual que
   .dash-hero-logo (cuadrado redondeado blanco, contain), versión mini. */
.emp-logo-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 1.5px rgba(166, 77, 255, 0.3);
    flex-shrink: 0;
}
.emp-logo-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 3px;
}
.emp-logo-cell-initials {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #A64DFF;
}
/* Placeholder = sin logo cargado: fondo gradient + inicial blanca,
   mismo patrón visual que turnos/ (.lab-card-logo-placeholder). */
.emp-logo-cell.emp-logo-cell--placeholder {
    background: linear-gradient(135deg, #A64DFF, #FF3D77);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.emp-logo-cell--placeholder .emp-logo-cell-initials {
    color: #FFFFFF;
}

/* Mismo principio para el hero grande de admin/empresas/ver.php cuando
   la empresa todavía no tiene logo cargado: fondo gradient con la inicial
   en blanco (consistente con .lab-card-logo-placeholder de turnos/). */
.dash-hero-logo.dash-hero-logo--placeholder {
    background: linear-gradient(135deg, #A64DFF, #FF3D77);
}
.dash-hero-logo--placeholder .dash-hero-logo-initials {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #FFFFFF;
}
.admin-td-mono {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

/* -----------------------------------------------------------------------
   Dashboard · tabla "Órdenes abiertas" compacta.
   Filas más bajas (menos padding vertical, paciente en una sola línea) con
   el foco puesto en FECHA y NOMBRE del paciente. Se quitaron localidad y
   médico para que la lista respire y entren más órdenes sin scrollear.
   ----------------------------------------------------------------------- */
.admin-table--dash-ordenes th,
.admin-table--dash-ordenes td {
    padding-top: 3px;
    padding-bottom: 3px;
}
/* Chips de Prácticas (col 5) y Estado (col 6) más chicos para que la fila no
   quede tan alta. El .admin-pill es global (12px): lo achicamos scoped acá. */
.admin-table--dash-ordenes td:nth-child(6) .admin-badge {
    font-size: 10px;
    padding: 2px 8px;
}
.admin-table--dash-ordenes td:nth-child(5) .admin-pill {
    font-size: 10px;
    padding: 2px 8px;
}
/* Fecha protagonista: peso + tamaño y números tabulares para que alineen. */
.dash-orden-fecha {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Anchos por columna con table-layout:fixed → reparto determinístico, sin
   sorpresas de overflow. Los porcentajes suman 100 y Paciente se lleva la
   tajada grande. (El truco width:1% en auto-layout escondía columnas cuando
   un nombre largo empujaba la tabla más ancha que la card.) */
.admin-table--dash-ordenes {
    table-layout: fixed;
}
.admin-table--dash-ordenes th:nth-child(1),
.admin-table--dash-ordenes td:nth-child(1) { width: 11%; }   /* Nº */
.admin-table--dash-ordenes th:nth-child(2),
.admin-table--dash-ordenes td:nth-child(2) { width: 13%; }   /* Fecha */
.admin-table--dash-ordenes th:nth-child(3),
.admin-table--dash-ordenes td:nth-child(3) { width: 41%; }   /* Paciente */
.admin-table--dash-ordenes th:nth-child(4),
.admin-table--dash-ordenes td:nth-child(4) { width: 13%; }   /* OOSS */
.admin-table--dash-ordenes th:nth-child(5),
.admin-table--dash-ordenes td:nth-child(5) { width: 12%; white-space: nowrap; }   /* Prácticas */
.admin-table--dash-ordenes th:nth-child(6),
.admin-table--dash-ordenes td:nth-child(6) { width: 10%; }   /* Estado */

/* Los resultados del buscador del dashboard entran con un fade, para que se
   note que la lista cambió (el listado de órdenes logra lo mismo redibujando
   las filas después de consultar al server). */
.admin-table--dash-ordenes tbody.is-refrescada {
    animation: dashOrdenesRefresh 0.26s ease;
}
/* Solo opacidad: `transform` sobre un tbody (display: table-row-group) no
   se aplica de forma confiable en todos los browsers. */
@keyframes dashOrdenesRefresh {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-table--dash-ordenes tbody.is-refrescada { animation: none; }
}
/* Nombre del paciente grande y bold; el DNI queda inline y discreto en la
   misma línea (antes iba debajo y estiraba la fila al doble de alto). El
   row-gap chico evita interlineado de más cuando el DNI baja de línea. */
.dash-orden-paciente {
    display: flex;
    align-items: baseline;
    gap: 2px 8px;
    flex-wrap: wrap;
    line-height: 1.3;
}
/* El domicilio arranca RENGLÓN NUEVO. La celda es flex con wrap, así que sin
   esto quedaba a continuación del documento, en la misma línea. */
.dash-orden-paciente .admin-row-sub--dom,
.admin-col-paciente .admin-row-sub--dom {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 1px;
}
.dash-orden-paciente .admin-row-strong {
    font-size: 14px;
    font-weight: 600;
}
.dash-orden-paciente .admin-row-sub {
    display: inline;
    margin-top: 0;
    font-size: 11.5px;
}
.admin-table-footer {
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 12px;
    opacity: 0.7;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Variante "barra": cuenta a la izquierda + paginación a la derecha. */
.admin-table-footer--bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    opacity: 1;
}
.admin-table-footer--bar > span#ordenes-footer {
    color: var(--text-secondary);
    font-size: 12px;
    opacity: 0.7;
}

/* Popup custom para input[list]/<datalist> (labix-datalist.js).
   Reemplaza la UX nativa pobre por un dropdown que se abre al click/focus
   y filtra al tipear. */
.labix-dl-popup {
    position: absolute;
    z-index: 9999;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(30, 0, 56, 0.96);
    border: 1px solid rgba(166, 77, 255, 0.40);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--text-primary);
    /* Reset text-align — algunos inputs tienen text-align: right (los del
       cargador de Cierres) y el popup heredaba la alineación errónea. */
    text-align: left;
    direction: ltr;
}
.labix-dl-item {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.labix-dl-item.is-active,
.labix-dl-item:hover {
    background: rgba(166, 77, 255, 0.18);
}
.labix-dl-empty {
    /* Cuando no hay coincidencias no mostramos el mensaje. */
    display: none !important;
}
/* Y si el popup quedó solo con el .labix-dl-empty (sin items reales),
   lo ocultamos entero — sino se ve la "caja vacía" abajo del input. */
.labix-dl-popup:not(:has(.labix-dl-item)) { display: none !important; }

/* Cabecera ordenable: cursor pointer, hover sutil y flechita ▲/▼.
   La columna activa tiene la flecha en color de marca (lila). */
.admin-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.admin-table th.sortable:hover {
    color: var(--text-primary);
    background: rgba(166, 77, 255, 0.06);
}
.admin-table th.sortable .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.30;
    color: var(--text-secondary);
    transition: opacity 0.15s ease, color 0.15s ease;
}
.admin-table th.sortable.is-active {
    color: var(--text-primary);
}
.admin-table th.sortable.is-active .sort-arrow {
    opacity: 1;
    color: #e0c2ff;
}
/* Variante "th con <a>": cuando el sort se hace por URL (page reload),
   el <a> dentro del <th> cubre toda la celda y hereda color del <th>. */
.admin-table th.sortable .admin-th-link {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: -14px -20px;
    padding: 14px 20px;
}

/* Paginación clásica (Anterior · Página X de Y · Siguiente) */
.admin-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-pager-info {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.85;
    padding: 0 6px;
    min-width: 110px;
    text-align: center;
}
.admin-tag-self {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--grad-4);
    background: rgba(77, 166, 255, 0.12);
    border: 1px solid rgba(77, 166, 255, 0.30);
    border-radius: 4px;
}

/* Filter chips genéricos para listados admin (estado, categoría, etc.).
   Patrón canónico: una fila de pills, una marcada como is-active, count
   opcional adentro. Click switchea sin recargar — la JS del módulo se
   encarga de refetch. */
.admin-filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 14px 0 22px;
}
.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: var(--text-secondary, #CFCFEA);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
}
.admin-chip.is-active {
    background: rgba(166, 77, 255, 0.14);
    border-color: rgba(166, 77, 255, 0.55);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(166, 77, 255, 0.25) inset;
}
.admin-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-secondary);
}
.admin-chip.is-active .admin-chip-count {
    background: rgba(166, 77, 255, 0.30);
    color: var(--text-primary);
}

/* Fórmula de un renglón calculado: los nombres con los que se llama a cada
   renglón dentro de la cuenta. Se tocan y se insertan en la fórmula. */
.formula-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.formula-var {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 5px 10px;
    background: rgba(166, 77, 255, 0.10);
    border: 1px solid rgba(166, 77, 255, 0.30);
    border-radius: 8px;
    color: var(--text-secondary, #CFCFEA);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.formula-var:hover {
    background: rgba(166, 77, 255, 0.18);
    border-color: rgba(166, 77, 255, 0.55);
    color: var(--text-primary);
}

/* Badges de estado — colorcoded por semántica */
.admin-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-activo     { background: rgba(34, 197, 94, 0.15);  color: var(--success); border-color: rgba(34, 197, 94, 0.35); }
.badge-pendiente  { background: rgba(245, 158, 11, 0.15); color: var(--warning); border-color: rgba(245, 158, 11, 0.40); }
.badge-bloqueado  { background: rgba(239, 68, 68, 0.15);  color: var(--error);   border-color: rgba(239, 68, 68, 0.40); }
.badge-suspendido { background: rgba(245, 158, 11, 0.10); color: var(--warning); border-color: rgba(245, 158, 11, 0.25); }
.badge-inactivo   { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); border-color: rgba(255, 255, 255, 0.08); }

/* Badge "Sin DNI" — para pacientes migrados del lab viejo sin DNI real */
.badge-doc-incompleto {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
}

/* Alert visible en ficha del paciente cuando el documento es incompleto */
.alert-doc-incompleto {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 22px 0 0;
    padding: 16px 18px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 12px;
    color: #fbbf24;
}
.alert-doc-incompleto svg { flex-shrink: 0; margin-top: 2px; }
.alert-doc-incompleto strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #fde68a; }
.alert-doc-incompleto p { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(253, 230, 138, 0.85); }
.alert-doc-incompleto p strong { display: inline; font-size: inherit; color: #fbbf24; font-weight: 600; }

/* Formulario admin: layout de 2 columnas para nombre+apellido en desktop.
   El gap es mayor que el .auth-form base (18 vs 16px) para dar más respiro
   entre filas de campos en pantallas de gestión (más densas en información). */
.admin-form { max-width: 640px; gap: 18px; }
.admin-form--wide { max-width: none; }
/* Form de ancho contenido — para altas/ediciones donde no queremos que las
   cards se estiren al 100% de la pantalla en monitores anchos. */
.admin-form--medium {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
/* Container generico para abarcar hero + form (u otros bloques) y darles a
   todos el mismo ancho contenido. Cuando se usa, NO hace falta poner
   .admin-form--medium en el form de adentro: el ancho lo manda el container. */
.admin-container--medium {
    /* Subido de 880px a 1080px (2026-05-11): aprovecha mejor monitores grandes
       sin estirar forms simples hasta verse vacíos. `--wide` (1400px) sigue
       reservado a listados/editores de mucho contenido (órdenes, plantillas,
       microbiología). */
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    /* Permitir que children con contenido ancho (tablas, inputs largos) se
       shrinkeen al viewport en vez de empujar el scroll de la página. */
    min-width: 0;
}
/* Variante "wide": para pantallas con mucho contenido (editor de plantillas,
   listado/ver/nueva/editar de órdenes). Mantiene la lógica de min-width:0. */
.admin-container--wide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    min-width: 0;
}
/* Densidad media para forms: inputs/selects mas compactos (alto ~41px),
   menos aire vertical entre rows y dentro de cada card. Pensado para
   altas/ediciones donde queremos mas info visible sin scroll. No toca
   font-size ni el card-heading (siguen igual). */
.admin-form--dense .auth-field { gap: 4px; }
.admin-form--dense .auth-field input,
.admin-form--dense .auth-field textarea,
.admin-form--dense .auth-field .admin-select {
    padding: 10px 12px;
}
.admin-form--dense .auth-field input[type="color"] { height: 41px; }
.admin-form--dense .auth-field textarea { min-height: 64px; }
.admin-form--dense.admin-form { gap: 14px; }
.admin-form--dense .admin-form-panel { padding: 18px 24px; }
.admin-form--dense .admin-form-panel:has(> .admin-form-actions) { padding: 12px 24px; }
.admin-form--dense .admin-form-panel > .admin-form-row + .admin-form-row,
.admin-form--dense .admin-form-subsection > .admin-form-row + .admin-form-row {
    margin-top: 12px;
}
/* Card-heading compacto: mismo look (gradients, badge, icono) pero todo
   proporcional ~25-35% mas chico. */
.admin-form--dense .card-heading {
    gap: 12px;
    padding: 2px 24px 12px;
    margin: 0 -24px 14px;
}
.admin-form--dense .card-heading-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}
.admin-form--dense .card-heading-icon svg { width: 18px; height: 18px; }
.admin-form--dense .card-heading-title { font-size: 17px; letter-spacing: 0.2px; }
.admin-form--dense .card-heading-sub { font-size: 12px; }
.admin-form--dense .card-heading-step {
    font-size: 28px;
    letter-spacing: -1px;
    padding-left: 6px;
}
/* Tablas dentro de un wrapper denso: filas mas bajas (padding 14 -> 9). */
.admin-form--dense .admin-table th,
.admin-form--dense .admin-table td {
    padding: 9px 16px;
}
/* Cuando la tabla vive en `admin-form--dense` dentro del container medium
   (max 880px), las celdas con texto largo (CUIT, nombres) pedían más ancho
   del que sobra y aparecía scroll horizontal. table-layout: fixed las
   distribuye según los anchos declarados (o equally) y el contenido se
   ajusta con word-break. */
.admin-form--dense .admin-table-wrap { width: 100%; }
.admin-form--dense .admin-table-wrap .admin-table {
    table-layout: fixed;
    width: 100%;
}
.admin-form--dense .admin-table-wrap .admin-table th,
.admin-form--dense .admin-table-wrap .admin-table td {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Escape hatch: tablas con muchas columnas (≥7) no toleran table-layout:fixed
   en un container angosto — todo queda con anchos iguales y se ve apretado.
   Marcalas con .admin-table--auto y se vuelve a layout natural + scroll-x. */
.admin-form--dense .admin-table-wrap .admin-table.admin-table--auto {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}
.admin-form--dense .admin-table-wrap .admin-table.admin-table--auto th,
.admin-form--dense .admin-table-wrap .admin-table.admin-table--auto td {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
/* Spacing vertical entre rows consecutivos. Cubrimos los dos casos de DOM:
     1) rows directos dentro del .admin-form-panel
     2) rows dentro de un .admin-form-subsection (fieldset)
   Sin esto, el segundo row queda pegado al input anterior porque el child
   selector `>` no atraviesa wrappers. */
.admin-form-panel > .admin-form-row + .admin-form-row,
.admin-form-subsection > .admin-form-row + .admin-form-row {
    margin-top: 18px;
}
.admin-form-row--3col { grid-template-columns: 1fr 1fr 1fr; }
/* Row asimetrico para combinaciones tipo "select corto + input largo"
   (ej: Tipo de documento + Numero). */
.admin-form-row--35-65 { grid-template-columns: 35fr 65fr; }
@media (max-width: 960px) {
    .admin-form-row--3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .admin-form-row,
    .admin-form-row--3col,
    .admin-form-row--35-65 { grid-template-columns: 1fr; }
}

.admin-select {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 13px 14px;
    width: 100%;
    outline: none;
    appearance: none;
    /* Flecha SVG embebida */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CFCFEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 40px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-select:focus-visible {
    border-color: rgba(166, 77, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(166, 77, 255, 0.18);
}
.admin-select option {
    background: var(--bg-deep);
    color: var(--text-primary);
}

.admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
/* Variante: alinear botones a la izquierda en lugar de la derecha
   (no usar para CTAs de submit, donde la convención es a la derecha). */
.admin-form-actions--start { justify-content: flex-start; }
.admin-form-actions .btn { min-height: 44px; }
/* Variantes "toolbar" (barra de acciones rápidas tipo card de quick-links):
   los botones son btn-sm, hay que sacarles el min-height de 44px que
   está pensado para el CTA submit principal. */
.admin-form-actions--start .btn,
.admin-form-actions--toolbar .btn { min-height: 0; }

/* Los span.btn-spinner vacíos dentro de un .btn (sin .auth-submit) deben estar
   ocultos por default; antes solo se ocultaban bajo .auth-submit y quedaban
   como span inline vacío afectando el centrado del texto. */
.btn .btn-spinner { display: none; }
/* Estado loading aplicable a cualquier .btn (no solo .auth-submit). Muestra el
   spinner al lado del texto, reduce opacity y bloquea clicks para evitar dobles
   submits mientras la request está en vuelo. */
.btn[data-loading="true"] .btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 8px;
    vertical-align: -2px;
}
.btn[data-loading="true"] {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}
/* Dentro de .admin-form-actions, el .auth-submit pierde sus overrides de tamaño
   para quedar alineado con los otros .btn (mismo padding/font-size/altura). */
.admin-form-actions .auth-submit {
    margin-top: 0;
    padding: 10px 20px;
    font-size: 13px;
}

/* Banner de feedback en páginas admin (éxito/warning/error tras acción). */
.admin-banner {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.admin-banner.banner-success  { background: rgba(34, 197, 94, 0.12);  color: #BEEFC8;  border-color: rgba(34, 197, 94, 0.35); }
.admin-banner.banner-warning  { background: rgba(245, 158, 11, 0.12); color: #FCD8A7;  border-color: rgba(245, 158, 11, 0.40); }
.admin-banner.banner-error    { background: rgba(239, 68, 68, 0.12);  color: #FFB1B1;  border-color: rgba(239, 68, 68, 0.35); }

/* Fila clickeable en tabla: el nombre funciona como link al detalle. */
.admin-row-link {
    color: var(--text-primary);
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease;
}
.admin-row-link:hover { color: var(--grad-3); }

/* Filas de tabla clickeables: cualquier <tr data-href="..."> navega al href al click. */
.admin-table tbody tr[data-href] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
/* Bg en cada <td> (no en el <tr>) para poder redondear los extremos —
   mismo truco que .admin-table thead th:first/last-child. Los <tr> no
   soportan border-radius en la mayoria de browsers. */
.admin-table tbody tr[data-href]:hover { background: transparent; }
.admin-table tbody tr[data-href]:hover td {
    background: rgba(166, 77, 255, 0.06);
}
.admin-table tbody tr[data-href]:hover td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.admin-table tbody tr[data-href]:hover td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.admin-table tbody tr[data-href]:hover .admin-row-strong {
    color: #e0c2ff;
}
.admin-row-strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* Stack vertical en una celda — para casos como número de orden + badge
   "Urgente" debajo (en vez de inline pegoteado). Se aplica a celdas con
   2 elementos donde el segundo es info contextual del primero. */
.admin-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
/* Utilitarias para alinear el contenido de una columna entera (th + td).
   Aplicar en ambos elementos de la misma columna para alineación consistente. */
.admin-table th.admin-col-center,
.admin-table td.admin-col-center { text-align: center; }
.admin-table th.admin-col-right,
.admin-table td.admin-col-right  { text-align: right; }
/* Si un .admin-cell-stack vive dentro de una columna centrada, sus hijos
   también se centran (sino quedarian flex-start = izquierda). */
.admin-table td.admin-col-center .admin-cell-stack { align-items: center; }

/* Columna de acción al final de la fila (ej.: el mini PDF en el listado de
   órdenes). Ancho fijo y chico para no robarle espacio a los datos.
   OJO: no usar `width: 1%` acá. Dentro de .admin-form--dense la tabla corre con
   `table-layout: fixed` + `overflow: hidden` en las celdas, y ahí el 1% se toma
   literal: la columna queda de ~8px y recorta el botón. */
.admin-table th.admin-col-action,
.admin-table td.admin-col-action {
    width: 100px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.admin-table th.admin-col-action {
    font-size: 11.5px;
    letter-spacing: 0.4px;
}
/* Columna del paciente: se lleva la parte grande del ancho para que el nombre
   entre en una línea. Con table-layout:fixed (patrón compacto) el resto de las
   columnas se reparte lo que sobra. */
.admin-table th.admin-col-paciente,
.admin-table td.admin-col-paciente {
    width: 30%;
}

/* Columna del tilde de selección múltiple (primera de la fila). Mismo criterio
   de ancho que .admin-col-action: fijo, no 1%. */
.admin-table th.admin-col-check,
.admin-table td.admin-col-check {
    width: 42px;
    text-align: center;
    overflow: visible;
    padding-left: 12px;
    padding-right: 4px;
}
.admin-table .admin-col-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #A64DFF;
    cursor: pointer;
    vertical-align: middle;
}

/* Barra de acciones sobre la selección. Aparece recién cuando hay algo
   tildado (el JS le saca el atributo hidden). */
.admin-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(166, 77, 255, 0.10);
    border: 1px solid rgba(166, 77, 255, 0.30);
}
/* Gana sobre el display:flex de arriba (por eso va después). */
.admin-bulkbar[hidden] { display: none; }
.admin-bulkbar-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-right: auto;
    min-width: 0;
}
.admin-bulkbar-info strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-bulkbar-info .dash-muted { font-size: 12.5px; }
.admin-bulkbar-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.admin-bulkbar-opt[hidden] { display: none; }

.admin-bulkbar-opt input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #A64DFF;
    cursor: pointer;
}

/* Estado "consultando al server" del listado. Con tablas de cientos de miles
   de filas la respuesta tarda y sin esto parece que el filtro no hizo nada. */
.admin-table-wrap { position: relative; }
.admin-table-wrap[data-loading="true"] tbody {
    opacity: 0.35;
    pointer-events: none;
}
.admin-table-wrap[data-loading="true"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, rgba(166, 77, 255, 0), #A64DFF, rgba(166, 77, 255, 0));
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: labix-loading-bar 1.1s ease-in-out infinite;
}
@keyframes labix-loading-bar {
    0%   { background-position: -45% 0; }
    100% { background-position: 145% 0; }
}

/* Botón de solo ícono dentro de una tabla: mismo look que un .btn-sm ghost
   pero cuadrado y sin el padding pensado para texto. */
.admin-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    line-height: 0;
}
.admin-btn-icon svg { display: block; }
/* En impresión del listado la columna de acción no aporta nada. */
@media print {
    .admin-table th.admin-col-action,
    .admin-table td.admin-col-action { display: none; }
}

/* Fieldset con checkboxes custom para la selección de roles */
.admin-fieldset {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 18px 18px 14px;
    margin-top: 4px;
}
.admin-fieldset legend {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 0 8px;
}
.admin-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.admin-check:hover {
    background: rgba(255, 255, 255, 0.03);
}
.admin-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.admin-check-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin-top: 1px;
}
.admin-check-box::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--gradient-brand);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.admin-check input:checked ~ .admin-check-box {
    border-color: rgba(166, 77, 255, 0.6);
    background: rgba(166, 77, 255, 0.08);
}
.admin-check input:checked ~ .admin-check-box::after {
    opacity: 1;
    transform: scale(1);
}
.admin-check input:focus-visible ~ .admin-check-box {
    outline: 2px solid rgba(166, 77, 255, 0.6);
    outline-offset: 2px;
}
.admin-check-label {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
}
.admin-check-label strong { display: block; font-weight: 500; }
.admin-check-label .dash-muted { font-size: 12px; }

/* Stack vertical de varios `.admin-check` (ej: bloque de "Opciones" en
   editar/nuevo de prácticas). Reemplaza el patrón viejo de inline
   margin-top entre cada label. */
.admin-check-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ------------------------------------------------------------
   Subtítulo dentro de una card (cuando hay sub-secciones).
   Lleva stripe lila a la izquierda + texto en mayúsculas; el
   margin-top generoso da aire al cambiar de bloque dentro del
   mismo .dash-panel para que no quede pegado al campo anterior.
   Uso:
     <h4 class="admin-form-subheading">Recordatorio 48 horas</h4>
   o si necesitás semántica de fieldset:
     <fieldset class="admin-form-subsection">
       <legend class="admin-form-subheading">...</legend>
       ...
     </fieldset>
   ------------------------------------------------------------ */
.admin-form-subsection {
    border: none;
    padding: 0;
    margin: 0 0 28px;
}
.admin-form-subsection:last-child { margin-bottom: 0; }

.admin-form-subheading {
    display: block;
    margin: 28px 0 20px;
    padding: 6px 12px;
    color: #E0C2FF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: linear-gradient(90deg, rgba(166, 77, 255, 0.10), transparent 55%);
    border-left: 3px solid rgba(166, 77, 255, 0.55);
    border-radius: 0 6px 6px 0;
    width: auto;
}
/* Si es el primer hijo del card (debajo del card-heading), no necesita
   margin-top extra — el card-heading ya tiene su padding inferior. */
.card-heading + .admin-form-subheading,
.admin-form-panel > .admin-form-subheading:first-of-type {
    margin-top: 12px;
}
/* Mismo trato dentro de drawers (form-stack al tope del body). */
.admin-drawer-body .admin-form-subheading:first-of-type,
.admin-drawer-body > form > .admin-form-subheading:first-of-type {
    margin-top: 6px;
}
/* Modal "Editar datos de la orden": ritmo vertical más compacto entre
   subtítulos y campos para que el drawer no quede tan largo. */
#editar-datos-drawer .admin-form-subheading {
    margin: 6px 0 5px;
}
/* Ritmo compacto, pero con aire suficiente entre filas: dentro del drawer NO
   corre la regla `.admin-form-panel > .admin-form-row + .admin-form-row`, así
   que sin esto las filas quedan pegadas y la etiqueta de una toca el campo de
   la anterior. */
#editar-datos-drawer .field-hint { margin-top: 3px; line-height: 1.35; }
/* 12px: lo mínimo que deja la etiqueta de una fila despegada del campo de la
   anterior. Menos que esto ya se ve apretado. */
#editar-datos-drawer .admin-form-row { margin-bottom: 12px; }
/* El formulario entra en pantalla sin scrollear: sin este recorte, el bloque
   de botones empuja "Guardar cambios" abajo del pliegue. */
#editar-datos-drawer .admin-form-actions { margin-top: 4px; }
#editar-datos-drawer .admin-form-actions .btn { min-height: 40px; }
#editar-datos-drawer .admin-form-row:last-child { margin-bottom: 0; }
/* Si la fila queda con un solo campo —el lab oculta "entrega estimada", o el
   usuario no puede editar la obra social— ese campo toma el ancho completo en
   vez de quedar flotando a media fila. */
#editar-datos-drawer .admin-form-row > .auth-field:only-child { grid-column: 1 / -1; }
#editar-datos-drawer form > .admin-form-subheading:first-of-type {
    margin-top: 2px;
}

/* Panel con la temp password generada tras un reset */
.admin-temp-panel {
    border-color: rgba(245, 158, 11, 0.30);
    background: rgba(245, 158, 11, 0.08);
}
.admin-temp-code {
    display: inline-block;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 3px;
    padding: 14px 18px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary);
    user-select: all;     /* selección con un click para copy */
}

.admin-success {
    text-align: center;
    padding: 30px 20px 24px;
}
.admin-success h2 {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.admin-success p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}
.admin-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================================
   Admin catálogos (obras sociales, médicos, etc.)
   - Barra de búsqueda en vivo
   - Secciones de formulario
   - Drawer lateral para sub-ABMs
   - Lista de planes con acciones inline
   ============================================================ */

.admin-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 0 4px;
}
.admin-search-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    color: var(--text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    font-family: 'Inter', sans-serif;
}
.admin-search-input::placeholder { color: rgba(207, 207, 234, 0.4); }
.admin-search-input:focus {
    outline: none;
    border-color: rgba(166, 77, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}
.admin-search-count {
    flex-shrink: 0;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-row-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 2px;
    letter-spacing: 0.1px;
}

/* Barra de filtros debajo del search (ABM con filtros múltiples) */
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 4px 18px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
/* Variante: filtros en UNA SOLA LINEA, agrupados a la izquierda.
   Cada filtro tiene ancho propio y se separan por un gap fijo — repartirlos en
   columnas iguales a lo ancho de la card deja huecos enormes entre uno y otro
   y se lee como tres cosas sueltas en vez de una barra de filtros. */
.admin-filter-bar--row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}
/* El ancho va en el LABEL, no en el control: labix-datepicker.js le pone
   `width:100%` inline al input de fecha, y un estilo inline le gana a
   cualquier regla de la hoja (salvo !important). Dimensionando el contenedor,
   el control queda del tamaño correcto sin pelear specificity. */
.admin-filter-bar--row .admin-filter {
    flex: 0 0 auto;
    min-width: 0;
    width: 250px;
}
/* Las fechas muestran 10 caracteres: no necesitan el ancho de un select. */
.admin-filter-bar--row .admin-filter--fecha { width: 195px; }
/* "Limpiar filtros": al final de la barra y alineado con los controles. Los
   .admin-filter llevan su etiqueta arriba, así que con el align-items:center
   de la barra el botón quedaba flotando a media altura. */
.admin-filter-bar--row .admin-filter-clear {
    margin-left: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 720px) {
    .admin-filter-bar--row .admin-filter-clear {
        margin-left: 0;
        align-self: stretch;
        justify-content: center;
    }
}
.admin-filter-bar--row .admin-filter select,
.admin-filter-bar--row .admin-filter input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
}
/* En mobile cada filtro usa el ancho completo, uno debajo del otro. */
@media (max-width: 720px) {
    .admin-filter-bar--row .admin-filter,
    .admin-filter-bar--row .admin-filter--fecha { width: 100%; }
}
.admin-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.admin-filter span { font-weight: 500; }
.admin-filter select {
    padding: 7px 12px;
    padding-right: 36px;
    font-size: 13px;
    min-width: 160px;
    /* IMPORTANTE: usar background-color separado en vez de `background:` shorthand,
       sino se resetea el background-image del .admin-select (chevron) y el
       browser muestra el select sin chevron + UI nativa rara (Win/Edge). */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
}

/* Chip de área bioquímica con color propio (seteado inline con style=) */
.admin-area-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Renglones + rangos de referencia (admin/practicas/ver.php)
   Tarjeta de renglón con sus rangos anidados.
   ------------------------------------------------------------ */
.admin-renglones-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.admin-renglon-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                transform 0.22s ease, box-shadow 0.22s ease;
}
.admin-renglon-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(166, 77, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.admin-renglon-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(to right, rgba(166, 77, 255, 0.07), rgba(166, 77, 255, 0.02) 55%, transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-renglon-main { flex: 1; min-width: 0; }
.admin-renglon-main .admin-plan-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Numerito de orden con color sólido — destaca como índice. */
.admin-renglon-orden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 6px;
    background: #A64DFF;
    color: #ffffff;
}

.admin-renglon-body {
    padding: 14px 18px 16px;
    background: rgba(0, 0, 0, 0.10);
}
.admin-rangos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.admin-rangos-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-rangos-title::before {
    content: '';
    width: 14px;
    height: 2px;
    background: var(--gradient-brand);
    border-radius: 2px;
    opacity: 0.7;
}
.admin-rangos-empty {
    font-size: 12.5px;
    padding: 8px 4px;
    font-style: italic;
    opacity: 0.7;
}
.admin-rangos-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-rango-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    font-size: 13px;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.admin-rango-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(166, 77, 255, 0.30);
}
/* Nota al pie del rango — full-width abajo, separada del valor por línea
   sutil para que se vea como pie de pgina del rango. */
.admin-rango-nota {
    flex-basis: 100%;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
}
.admin-rango-main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: baseline;
}
.admin-rango-seg {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}
/* Marca en la lista de rangos cuando el aviso de "valor imposible" del
   cargador no está en automático: umbral cargado a mano, o apagado. */
.admin-rango-crit {
    font-size: 11px;
    letter-spacing: 0.2px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #FECACA;
    white-space: nowrap;
}
.admin-rango-crit--off {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-secondary);
}
.admin-rango-valor {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--text-primary);
    font-weight: 500;
    /* Preserva saltos de línea y tabs cargados en "Texto libre" para
       que el rango se muestre tal como lo tipeó el bioquímico. */
    white-space: pre-wrap;
    tab-size: 4;
    -moz-tab-size: 4;
}

/* Opciones (frases dropdown) dentro de renglones tipo 'opcion' */
.admin-opciones-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.admin-opciones-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.admin-opcion-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    background: rgba(77, 166, 255, 0.04);
    border: 1px solid rgba(77, 166, 255, 0.12);
    border-radius: 10px;
    font-size: 13px;
}
.admin-opcion-main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-opcion-texto {
    color: var(--text-primary);
    font-weight: 500;
}

/* Importador NBU — stats visuales */
.admin-import-preview {
    margin-top: 10px;
}
.admin-import-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.admin-import-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-align: center;
    position: relative;
}
.admin-import-stat--clickable {
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.admin-import-stat--clickable:hover {
    border-color: rgba(178, 132, 232, 0.45);
    background: rgba(178, 132, 232, 0.07);
    transform: translateY(-1px);
}
.admin-import-stat--clickable:focus-visible {
    outline: 2px solid var(--accent-2, #b284e8);
    outline-offset: 2px;
}
.admin-import-stat-hint {
    font-size: 10.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.55;
    margin-top: 8px;
}
.admin-import-stat--clickable:hover .admin-import-stat-hint { opacity: 1; }
.admin-import-detalle-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-import-detalle-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 13px;
}
.admin-import-detalle-list li .codigo {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 56px;
    font-variant-numeric: tabular-nums;
}
.admin-import-detalle-list li .nombre {
    color: var(--text-secondary);
    flex: 1;
}
.admin-import-detalle-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.admin-import-stat-value {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}
.admin-import-stat-value--muted   { color: var(--text-secondary); }
.admin-import-stat-value--success { color: var(--success); }
.admin-import-stat-label {
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 4px;
}
.admin-import-errores {
    padding-left: 20px;
    margin-top: 6px;
    font-size: 13px;
}
.admin-import-errores li { margin-bottom: 4px; }

/* ------------------------------------------------------------
   Picker: tarjeta de selección con botón "Elegir..." + resultados
   Usado en ordenes/nueva para paciente y en ver para prácticas.
   ------------------------------------------------------------ */
.admin-picker {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border-radius: 12px;
    flex-wrap: wrap;
}
.admin-picker-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(166, 77, 255, 0.10);
    color: rgba(207, 207, 234, 0.65);
    transition: color 0.2s ease, background-color 0.2s ease;
}
.admin-picker-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-picker-empty {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-picker-hint {
    font-size: 12px;
    color: rgba(207, 207, 234, 0.45);
}
.admin-picker-selected {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-picker-selected strong {
    color: var(--text-primary);
    font-size: 15px;
}
.admin-picker--filled,
.admin-picker:has(.admin-picker-selected:not([hidden])) {
    border-color: rgba(166, 77, 255, 0.35);
    background: rgba(166, 77, 255, 0.06);
}
.admin-picker--filled .admin-picker-icon,
.admin-picker:has(.admin-picker-selected:not([hidden])) .admin-picker-icon {
    color: #c49aff;
    background: rgba(166, 77, 255, 0.18);
}

.admin-picker-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.admin-picker-item {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.admin-picker-item:hover:not(:disabled),
.admin-picker-item:focus-visible:not(:disabled) {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.30);
    outline: none;
}
.admin-picker-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Estado "agregando…" — spinner sutil en el ítem mientras llega la confirmación
   del POST. Da feedback inmediato sin bloquear el resto del listado. */
.admin-picker-item.is-loading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}
.admin-picker-item.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; right: 14px;
    width: 14px; height: 14px;
    margin-top: -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: admin-picker-spin 0.7s linear infinite;
    opacity: 0.7;
}
@keyframes admin-picker-spin {
    to { transform: rotate(360deg); }
}

/* CTA "Agregar paciente nuevo" al final de los resultados del picker.
   Aplica indistintamente a <a> (versión link a otra pestaña) o <button>
   (versión que activa el tab "Cargar nuevo" del drawer). */
.admin-picker-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.10), rgba(166, 77, 255, 0.14));
    border: 1px dashed rgba(166, 77, 255, 0.40);
    border-radius: 10px;
    text-decoration: none;
    text-align: left;
    color: var(--text-primary);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.admin-picker-cta:hover,
.admin-picker-cta:focus-visible {
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.16), rgba(166, 77, 255, 0.22));
    border-color: rgba(166, 77, 255, 0.70);
    border-style: solid;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}
.admin-picker-cta-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF7A18, #A64DFF);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(166, 77, 255, 0.35);
}
.admin-picker-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-picker-cta-text strong {
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
}
.admin-picker-cta-text .admin-row-sub {
    font-size: 11.5px;
    opacity: 0.7;
}

/* Modifier `--alt`: misma estructura visual que el CTA principal pero con
   gradient celeste→violeta en lugar de naranja→violeta. Sirve para
   diferenciar el "atajo" (Cargar nuevo en este drawer, naranja) del
   "form completo en otra pestaña" (alternativa, celeste). */
.admin-picker-cta--alt {
    background: linear-gradient(135deg, rgba(77, 166, 255, 0.10), rgba(166, 77, 255, 0.14));
    border-color: rgba(77, 166, 255, 0.40);
    margin-bottom: 14px;
}
.admin-picker-cta--alt:hover,
.admin-picker-cta--alt:focus-visible {
    background: linear-gradient(135deg, rgba(77, 166, 255, 0.16), rgba(166, 77, 255, 0.22));
    border-color: rgba(77, 166, 255, 0.70);
}
.admin-picker-cta--alt .admin-picker-cta-icon {
    background: linear-gradient(135deg, #4DA6FF, #A64DFF);
    box-shadow: 0 4px 12px rgba(77, 166, 255, 0.35);
}
.admin-picker-cta--alt .admin-picker-cta-icon svg {
    width: 16px;
    height: 16px;
}

/* Tabs del drawer "Elegir paciente" — full-width (cada tab toma 50%) y
   sin margen superior excesivo. Override SOLO de este #paciente-tabs
   para no afectar las tabs canónicas de ver.php (que usan ancho variable
   por cantidad de templates). */
#paciente-drawer .admin-drawer-body {
    padding-top: 14px;        /* default 20px → menos aire arriba */
}
#paciente-tabs {
    margin-top: 0;
}
#paciente-tabs > .admin-tabs-nav {
    margin-top: 0;
    margin-bottom: 14px;
}
#paciente-tabs > .admin-tabs-nav {
    /* flex-shrink:0 — clave: cuando el listado adentro del panel llena
       el resto del alto disponible, sin esto el nav cede su alto al
       hijo flex:1 y termina comprimiéndose visualmente. */
    flex: 0 0 auto;
    min-height: 44px;
}
#paciente-tabs > .admin-tabs-nav > .admin-tabs-tab {
    flex: 1 1 0;
    max-width: none;
    min-height: 34px;
    padding: 9px 12px;       /* default 7px → un toque más alto */
    justify-content: center;
    align-items: center;
}
/* El input search dentro del pane "Buscar" usa flex:1 por default — pero
   el panel padre no es flex, así que en este contexto necesitamos ancho
   explícito al 100%. */
#paciente-pane-buscar > .admin-search-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* Layout vertical full-height del drawer paciente: las tabs + panel
   activo + listado de pacientes deben ocupar TODO el alto disponible
   del drawer-body, y el scroll vertical debe estar adentro de la lista
   (no del drawer-body entero). Sin esto el listado se corta a media
   altura y aparece una barra de scroll en el drawer. */
#paciente-drawer .admin-drawer-body {
    overflow: hidden;        /* el scroll va al .admin-picker-results */
}
#paciente-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#paciente-tabs > .admin-tabs-panel.is-active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#paciente-pane-buscar > .admin-picker-results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;        /* override del 60vh default que recorta a media altura */
    margin-top: 0;
    overflow-y: auto;
}
/* Tilde "Incluir pacientes inactivos" bajo el buscador. */
#paciente-drawer .paciente-incluir-inactivos {
    align-items: center;
    align-self: flex-end;
    width: fit-content;
    gap: 6px;
    margin: 4px 0 6px auto;
    padding: 4px 6px;
}
#paciente-drawer .paciente-incluir-inactivos .admin-check-box {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-top: 0;
}
#paciente-drawer .paciente-incluir-inactivos .admin-check-box::after {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}
#paciente-drawer .paciente-incluir-inactivos .admin-check-label {
    font-size: 12px;
    color: var(--text-secondary, inherit);
}
#paciente-drawer .admin-picker-item .badge-inactivo {
    margin-left: 6px;
    vertical-align: middle;
}
/* Tilde chico para ir al lado de botones .btn-sm (ej. "Elegir carpeta al
   descargar" en la barra de la orden). */
.admin-check.admin-check--sm {
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
}
.admin-check--sm .admin-check-box {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-top: 0;
}
.admin-check--sm .admin-check-box::after {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}
.admin-check--sm .admin-check-label {
    font-size: 12px;
    color: var(--text-secondary, inherit);
    white-space: nowrap;
}
/* En el hero de la orden, alineado con el texto de arriba (fecha · paciente). */
.admin-hero-text .pdf-elegir-carpeta {
    width: fit-content;
    margin-top: 6px;
    padding-left: 0;
}
.paciente-sin-activos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 4px 14px;
    text-align: center;
}
.paciente-sin-activos p {
    margin: 0;
    font-size: 13px;
}
/* El pane "nuevo" (form) sí permite scroll si fuera necesario. */
#paciente-pane-nuevo {
    overflow-y: auto;
}

/* Hint link al final de los resultados del picker de paciente cuando
   el user busca y nada matchea — manda al tab "Cargar nuevo". */
.admin-picker-hint-link {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    text-align: center;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-picker-hint-link:hover {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.40);
    color: var(--text-primary);
}

/* ============================================================
   Alta rápida inline en el picker de paciente — collapsible <details>
   con un mini-form de campos mínimos. Se ubica DESPUÉS del
   .admin-picker-cta y permite crear un paciente sin salir del drawer.
   (Legacy — se mantiene por si algún otro lugar lo usa; el flujo nuevo
   usa tabs Buscar/Cargar nuevo dentro del drawer.)
   ============================================================ */
.admin-picker-quick {
    margin-top: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.admin-picker-quick[open] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(166, 77, 255, 0.30);
}
.admin-picker-quick-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;        /* sacamos el triángulo nativo */
    user-select: none;
}
.admin-picker-quick-summary::-webkit-details-marker { display: none; }
.admin-picker-quick-summary::marker { content: ''; }
.admin-picker-quick-summary:hover {
    background: rgba(255, 255, 255, 0.03);
}
.admin-picker-quick-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #4DA6FF, #A64DFF);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.2s ease;
}
.admin-picker-quick[open] .admin-picker-quick-icon {
    transform: rotate(45deg);   /* + → x al abrir */
}
.admin-picker-quick-summary > span:not(.admin-picker-quick-icon) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-picker-quick-summary strong {
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
}
.admin-picker-quick-summary .admin-row-sub {
    font-size: 11.5px;
    opacity: 0.7;
    color: var(--text-secondary);
}
.admin-picker-quick-form {
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-picker-quick-form .admin-form-row + .admin-form-row { margin-top: 0; }
.admin-picker-quick-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Input de fecha en admin-filter-bar — selector amplio porque flatpickr
   convierte el input type=date a alt-input type=text (mismo trick que en
   .turnos-fechabar). Agregamos ícono calendar + width fijo para que no
   se infle al 100% (labix-datepicker.js fuerza width:100% inline). */
.admin-filter-date,
.admin-filter input {
    padding: 7px 36px 7px 12px;
    font-size: 13px;
    background-color: rgba(255, 255, 255, 0.05);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFCFEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
    color-scheme: dark;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    width: 140px !important;
    max-width: 140px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

/* Badges adicionales para estados de órdenes */
.admin-badge.badge-proceso  { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); color: #FDBA74; }
.admin-badge.badge-info     { background: rgba(77, 166, 255, 0.14); border-color: rgba(77, 166, 255, 0.35); color: #93C5FD; }
.admin-badge.badge-success  { background: rgba(34, 197, 94, 0.14);  border-color: rgba(34, 197, 94, 0.35);  color: #86EFAC; }
.admin-badge.badge-warning  { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.45); color: #FCD34D; }

/* Totales de orden al pie de la lista de prácticas */
.admin-orden-totales {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(166, 77, 255, 0.06);
    border: 1px solid rgba(166, 77, 255, 0.20);
    border-radius: 12px;
    text-align: right;
    font-size: 14px;
    color: var(--text-primary);
}

/* ------------------------------------------------------------
   Carga de resultados (admin/ordenes/cargar-resultados.php)
   ------------------------------------------------------------ */

.cr-practica {
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}
.cr-practica-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    background: rgba(166, 77, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
    flex-wrap: wrap;
}
.cr-practica-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.cr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cr-table th {
    padding: 6px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.cr-table td {
    padding: 3px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.cr-table tr:last-child td { border-bottom: none; }

.cr-etiqueta {
    width: 22%;
    min-width: 140px;
    max-width: 220px;
}
.cr-valor {
    width: 14%;
    min-width: 95px;
    max-width: 130px;
    position: relative;
}
/* Campos de texto largo (textarea): el max-width de arriba está pensado para
   valores numéricos cortos y dejaba el textarea angosto e ilegible. Cuando la
   celda "Valor" contiene un textarea la liberamos y la dejamos ocupar todo lo
   que le den las columnas que abarca (los cargadores de texto largo usan
   colspan). Independiente del cargador (sirve para cualquier .cr-table). */
.cr-table .cr-valor:has(textarea) {
    max-width: none;
    width: auto;
}
.cr-table td.cr-valor textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 62px;
}

/* ---- Filas "anchas" del cargador genérico ------------------------------
   Un renglón de texto largo SIN unidad y SIN referencia dejaba tres columnas
   vacías ("—") y el textarea metido en una celda de 130px: ilegible, con
   media pantalla desperdiciada al costado. Ahora la celda del valor absorbe
   esas columnas (colspan) y el texto se lee a lo ancho.
   ------------------------------------------------------------------------ */
.cr-renglon--ancha .cr-etiqueta {
    vertical-align: top;
    padding-top: 10px;
}
.cr-renglon--ancha .cr-valor {
    width: auto;
    max-width: none;
}
/* Práctica 100% descriptiva (todos los renglones anchos — típico de
   microbiología): la tabla se dibuja directamente con 2 columnas, sin los
   encabezados Unidad / Referencia / Resultado que nadie usaría. */
.cr-table--ancha .cr-etiqueta {
    width: 24%;
    max-width: 260px;
}
.cr-table--ancha .cr-valor {
    width: auto;
    max-width: none;
}
.cr-unidad {
    width: 12%;
    min-width: 60px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.cr-ref {
    width: 38%;
    min-width: 180px;
}
.cr-ref-value {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--text-primary);
    font-size: 10px;
    line-height: 1.35;
    /* Preservar saltos de línea y tabs cargados en "Texto libre" del rango. */
    white-space: pre-wrap;
    tab-size: 4;
    -moz-tab-size: 4;
    display: block;
}
.cr-ref-seg   { font-size: 9px; color: var(--text-secondary); margin-top: 2px; }
.cr-ref-nota  { font-size: 9px; color: var(--text-secondary); margin-top: 2px; font-style: italic; white-space: pre-wrap; }

/* El VALOR es lo que el bioquímico está tipeando y lo que después va al
   informe: tiene que leerse de un vistazo, más que la etiqueta o la unidad.
   Por eso va más grande, en seminegrita y sobre un fondo más marcado que el
   resto de la fila. */
.cr-value-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
/* El campo en el que estás parado, inconfundible: en una tabla de 20 renglones
   perder de vista dónde estás es perder el hilo de la carga. Cambia el borde Y
   el color del texto mientras está enfocado; al salir vuelve todo a lo de
   antes, así el valor guardado se lee siempre igual. */
.cr-value-input:focus {
    /* CELESTE y no violeta: el fondo del admin ya es violeta (#2B004F), así que
       un foco violeta se funde con la pantalla. El celeste de la paleta
       (--grad-4) es el que contrasta de verdad, y no se confunde con un error
       (rojo) ni con una advertencia (ámbar).
       Sin halo: alcanza con el borde, el fondo teñido y el color de la letra. */
    border-color: var(--grad-4);
    /* La línea del foco va con `outline` y offset NEGATIVO: se dibuja ADENTRO
       del campo, sobre el borde. Así se ve de 2px —un borde de 1px cambiando
       de color no se distingue— sin mover el layout ni sobresalir como el halo
       que había antes. */
    outline: 2px solid var(--grad-4);
    outline-offset: -2px;
    background: rgba(77, 166, 255, 0.20);
    color: #FFFFFF;
    box-shadow: none;
}
.cr-value-input[readonly] {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    cursor: default;
}
.cr-value-input--calc {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--text-primary) !important;
    background: rgba(166, 77, 255, 0.08) !important;
    border-color: rgba(166, 77, 255, 0.25) !important;
}

/* Badge de fuera-de-rango al costado del input */
.cr-estado {
    width: 130px;
    text-align: center;
}
.cr-estado-th { text-align: center; }
.cr-fuera-badge {
    display: inline-block;
    margin-top: 4px;
    min-height: 18px;
}
.cr-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cr-badge--bajo    { background: rgba(77, 166, 255, 0.15);  border: 1px solid rgba(77, 166, 255, 0.40);  color: #93C5FD; }
.cr-badge--alto    { background: rgba(239, 68, 68, 0.15);   border: 1px solid rgba(239, 68, 68, 0.40);   color: #FCA5A5; }
.cr-badge--critico { background: rgba(239, 68, 68, 0.25);   border: 1px solid rgba(239, 68, 68, 0.60);   color: #FECACA; }
.cr-badge--normal  { background: rgba(34, 197, 94, 0.15);   border: 1px solid rgba(34, 197, 94, 0.40);   color: #86EFAC; }

/* ── Gráfico de evolución en el cargador genérico ─────────────────────
   Grupo derecho del header de práctica: tilde "Incluir evolución en el
   informe" + badge de estado. */
.cr-practica-header-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Tilde "Incluir evolución en el informe": usa el patrón canónico .admin-check
   (mismo diseño que los tildes de admin/practicas/editar.php). Solo lo
   compactamos un toque para que entre en el header de la card. */
.cr-imprime-grafico {
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
}
.cr-imprime-grafico .admin-check-label {
    font-size: 12.5px;
    color: var(--text-secondary);
}
.cr-imprime-grafico:hover .admin-check-label { color: var(--text-primary); }
.cr-imprime-grafico[data-disabled="1"] { opacity: 0.55; cursor: not-allowed; }
.cr-imprime-grafico[data-disabled="1"] input { cursor: not-allowed; }

/* El botón "ver evolución" (📊) del cargador genérico reusa .cg-chart-btn +
   .cg-input-group (cargar-generico.css) — mismo look que el hemograma. */

/* Row highlight según fuera de rango */
.cr-out-bajo    { background: rgba(77, 166, 255, 0.04); }
.cr-out-alto    { background: rgba(239, 68, 68, 0.06); }
.cr-out-critico { background: rgba(239, 68, 68, 0.10); }

/* Bloque de especiales al pie — usa estilo de card consistente con el sistema:
   header con ícono + título gradient, padding generoso, lista con aire entre items. */
.cr-especiales-block {
    margin-top: 28px;
    background: rgba(30, 0, 56, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 24px;
}
.cr-especiales-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}
.cr-especial-card {
    background: rgba(166, 77, 255, 0.04);
    border: 1px solid rgba(166, 77, 255, 0.18);
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cr-especial-card:hover {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.32);
}
.cr-especial-card .admin-plan-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.cr-especial-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cr-especial-meta .admin-badge {
    font-size: 11px;
    padding: 2px 9px;
    text-transform: capitalize;
}

/* Indicador de guardado al lado del botón "Volver" */
.cr-save-indicator {
    /* Pill flotante en la esquina inferior derecha de la pantalla. Como
       solo un partial está activo a la vez (tabs en ver.php), solo un pill
       queda visible — los demás están :empty (display:none). */
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--text-secondary);
    box-sizing: border-box;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.cr-save-indicator:empty { display: none; }

/* Punto / ícono a la izquierda que cambia por estado. */
.cr-save-indicator::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}

/* "Cambios sin guardar..." — punto ámbar pulsando */
.cr-save-indicator--dirty {
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.18);
}
.cr-save-indicator--dirty::before {
    animation: cr-pulse 1.4s ease-in-out infinite;
}
@keyframes cr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.55); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(252, 211, 77, 0); transform: scale(1.08); }
}

/* "Guardando..." — spinner anillo girando */
.cr-save-indicator--saving {
    color: #93C5FD;
    background: rgba(77, 166, 255, 0.12);
    border-color: rgba(77, 166, 255, 0.30);
}
.cr-save-indicator--saving::before {
    background: transparent;
    border: 2px solid rgba(147, 197, 253, 0.30);
    border-top-color: #93C5FD;
    animation: cr-spin 0.7s linear infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* "Guardado ✓" — punto verde con glow + el ✓ ya viene del texto */
.cr-save-indicator--saved {
    color: #86EFAC;
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.40);
    box-shadow: 0 2px 14px rgba(34, 197, 94, 0.22);
    animation: cr-saved-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.cr-save-indicator--saved::before {
    background: linear-gradient(135deg, #34D399, #16A34A);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
@keyframes cr-saved-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------
   Carga de Hemograma — layout 2 columnas con filas label + input
   ------------------------------------------------------------ */
.hemograma-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 8px;
}
@media (max-width: 900px) {
    .hemograma-grid { grid-template-columns: 1fr; }
}
.hg-section-title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.hg-subsection {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #e0c2ff;
    margin: 22px 0 10px;
    padding: 6px 12px 6px 12px;
    border-left: 3px solid rgba(166, 77, 255, 0.55);
    background: linear-gradient(90deg, rgba(166, 77, 255, 0.10), transparent 55%);
    border-radius: 0 6px 6px 0;
}
/* El primer subtítulo dentro de una sección no necesita tanto aire arriba. */
.hg-section-title + .hg-subsection { margin-top: 4px; }
.hg-field-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 6px 10px;
    align-items: center;
    padding: 4px 0;
}
.hg-field-row label {
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: 0.1px;
}
/* Inputs de valores en "Cierres" (Proteínas totales, Relación A/G, etc.):
   alineados a la derecha con fuente mono — para que se lean como números. */
.hg-field-row .hg-input {
    text-align: right;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
/* Hint (referencia) debajo del input, alineado a la columna del input. */
.hg-field-row .field-hint {
    grid-column: 2;
    margin-top: -2px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(207, 207, 234, 0.55);
}
/* Mismo criterio que .cr-value-input: el valor cargado se tiene que leer de un
   vistazo, y el campo en el que estás parado no se puede perder de vista. */
.hg-input {
    padding: 7px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.hg-input:focus {
    border-color: var(--grad-4);
    /* La línea del foco va con `outline` y offset NEGATIVO: se dibuja ADENTRO
       del campo, sobre el borde. Así se ve de 2px —un borde de 1px cambiando
       de color no se distingue— sin mover el layout ni sobresalir como el halo
       que había antes. */
    outline: 2px solid var(--grad-4);
    outline-offset: -2px;
    background: rgba(77, 166, 255, 0.20);
    color: #FFFFFF;
    box-shadow: none;
}
.hg-input--pct { text-align: right; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; }
.hg-input--wide {
    grid-column: 2 / -1;
    width: 100%;
    padding: 8px 10px;
}
/* UN solo chevron en inputs/selects enganchados al popup custom de datalist
   o que usen .hg-input (caso de los <select> en partials de templates).
   Usa `background:` shorthand explícito para garantizar no-repeat / size /
   position correctos (el `.hg-input` base usa shorthand y reseteaba los
   sub-properties si los definía aparte). */
.hg-input[data-labix-list],
select.hg-input {
    background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CFCFEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 14px;
    padding-right: 30px;
}
.hg-input[data-labix-list]:focus,
select.hg-input:focus {
    background: rgba(255, 255, 255, 0.07) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CFCFEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 14px;
}
select.hg-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.hg-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.hg-total-row strong {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 15px;
    color: var(--text-primary);
}
.hg-total-row--ok   { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.35); }
.hg-total-row--ok strong   { color: #86EFAC; }
.hg-total-row--warn { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.40); }
.hg-total-row--warn strong { color: #FCA5A5; }

/* Botón que todavía no tiene con qué trabajar (la hoja de electroforesis
   mientras faltan fracciones por cargar). No se esconde a propósito: que se
   vea que existe, y al tocarlo avisa qué falta. */
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================
   Carga de Proteinograma — fila de 3 columnas (label / % / g/dL)
   ========================================================== */
.prot-row {
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    gap: 6px 10px;
    align-items: center;
    padding: 4px 0;
}
.prot-row-label {
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: 0.1px;
}
.prot-row-input { display: flex; flex-direction: column; gap: 4px; }
.prot-row-input label {
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.6px;
    text-align: center;
}
.prot-row--head .prot-row-input label {
    margin-bottom: 0;
    font-weight: 500;
    color: rgba(207, 207, 234, 0.7);
    /* Sin mayusculas: son unidades, no rotulos. "g/dL" se escribe asi y
       nada mas -- en mayusculas ("G/DL") deja de ser la unidad correcta. */
    text-transform: none;
    letter-spacing: 0.3px;
}
.prot-row--head { padding-bottom: 0; }
.prot-row-input input.hg-input {
    text-align: right;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
.prot-suma-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.prot-suma-label { letter-spacing: 0.5px; }
.prot-suma-value {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 500;
}
.prot-suma-hint { font-size: 11.5px; color: rgba(207, 207, 234, 0.55); }
.prot-suma-hint--ok   { color: #86EFAC; }
.prot-suma-hint--warn { color: #FCD34D; }
.prot-suma-hint--err  { color: #FCA5A5; }

/* Preview de imagen de firma/sello en mi-cuenta/firma.php */
.cr-firma-preview { margin-top: 8px; }
.cr-firma-preview img {
    max-width: 220px;
    max-height: 110px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: block;
}

/* kbd visual */
kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.admin-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(77, 166, 255, 0.12);
    border: 1px solid rgba(77, 166, 255, 0.25);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Quick-fill pills: chips chiquitos que precargan texto en un input asociado.
   Patrón canónico: VAN DEBAJO del input como "sugerencias rápidas", no arriba.
   Reutilizable: el contenedor lleva data-target="#input-id" y cada chip data-fill="texto". */
.quick-fill-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin: 6px 0 0;
}
.quick-fill-label {
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-right: 4px;
    font-weight: 500;
}
.quick-fill-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(166, 77, 255, 0.06);
    border: 1px solid rgba(166, 77, 255, 0.20);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    line-height: 1.4;
    font-family: inherit;
}
.quick-fill-pill:hover {
    background: rgba(166, 77, 255, 0.16);
    border-color: rgba(166, 77, 255, 0.4);
    color: var(--text-primary);
}
.quick-fill-pill:active { transform: scale(0.97); }
.quick-fill-pill.is-applied {
    background: rgba(166, 77, 255, 0.28);
    border-color: rgba(166, 77, 255, 0.6);
    color: #fff;
}
.admin-pill-muted {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}
.admin-badge--neutral {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    text-transform: lowercase;
    letter-spacing: 0.3px;
}
/* Variante "accent" para destacar info principal de la card (ej:
   parentesco en cards de familiares). Lila tinted, distinto del gris
   del --neutral. */
.admin-badge--accent {
    background: rgba(166, 77, 255, 0.16);
    border-color: rgba(166, 77, 255, 0.40);
    color: #d4adff;
    text-transform: capitalize;
    letter-spacing: 0.2px;
    font-weight: 500;
}

.admin-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.admin-empty p { font-size: 15px; }
/* Segunda línea de un estado vacío: es el "y ahora qué hago". Va más chica
   que la primera para que se lea antes el qué pasa y después el qué hacer. */
.admin-empty p + p { font-size: 13.5px; }

.admin-page-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.admin-form-section {
    padding: 18px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Card heading vistoso (ícono + título con gradient + subtítulo + paso grande) */
.card-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 24px 18px;
    margin: 0 -24px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}
/* Badge de estado que va en el hero-actions después de los botones (mismo
   tamaño que los .btn-sm de Editar / Anular). */
.hero-status {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.hero-status .admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    min-height: 34px;
    box-sizing: border-box;
    line-height: 1;
}
/* Botones del hero-actions: matchean el alto del badge de estado (.hero-status)
   para que todos los chips de la fila se vean centrados verticalmente iguales. */
.admin-hero-actions .btn-sm {
    min-height: 34px;
    line-height: 1;
    box-sizing: border-box;
    align-items: center;
}
/* Botones de solo ícono en la barra de acciones (Compartir con paciente /
   con médico): cuadrados y del mismo alto que los que llevan texto, para que
   la fila no quede despareja. El texto vive en el tooltip. */
.admin-hero-actions .btn-sm.admin-btn-icon {
    padding: 0 10px;
    width: 38px;
    justify-content: center;
}
/* El help-btn (?) tiene su propio width/height fijo (30px global). En el hero,
   los btn-sm están forzados a 34px → si dejamos 30 el ? queda más chico que el
   "Volver" / acción al lado. Acá lo igualamos solo para este contexto. */
.admin-hero-actions .help-btn {
    width: 34px;
    height: 34px;
}
.card-heading-status .admin-badge {
    padding: 7px 14px;
    font-size: 12.5px;
    line-height: 1;
    letter-spacing: 0.4px;
}
.card-heading-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.16), rgba(166, 77, 255, 0.20));
    border: 1px solid rgba(166, 77, 255, 0.26);
    border-radius: 12px;
    color: #e0c2ff;
    box-shadow: 0 6px 18px rgba(166, 77, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.card-heading-text {
    flex: 1;
    min-width: 0;
}
.card-heading-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px 0;
    letter-spacing: 0.3px;
    background: linear-gradient(100deg, #ffffff 0%, #e0c2ff 55%, #ffb3cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.2;
}
.card-heading-sub {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.70;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.1px;
}
.card-heading-step {
    flex-shrink: 0;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #FF7A18 0%, #FF3D77 50%, #A64DFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.55;
    padding-left: 10px;
    user-select: none;
}
.card-heading + .admin-form-section {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}

/* Botón circular "?" de ayuda contextual. Abre drawer lateral con contenido. */
.help-btn {
    /* 30×30 = misma altura que un .btn.btn-sm, así no quedan desalineados
       cuando ambos viven en .admin-hero-actions o card-heading. */
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(166, 77, 255, 0.10);
    border: 1px solid rgba(166, 77, 255, 0.28);
    color: #c49aff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    user-select: none;
}
.help-btn:hover,
.help-btn:focus-visible {
    background: rgba(166, 77, 255, 0.22);
    border-color: rgba(166, 77, 255, 0.55);
    color: #e9cfff;
    transform: scale(1.08);
    outline: none;
}
.help-btn:active { transform: scale(0.96); }
/* Variante chica: el "?" que va DENTRO de una fila (una opción de un radio
   group, p.ej.), donde un botón de 30px rompe el alto de la fila. */
.help-btn--xs {
    width: 20px;
    height: 20px;
    font-size: 11px;
    align-self: center;
    margin-left: auto;
    cursor: help;
}

/* Drawer de ayuda — contenido con jerarquía cómoda para leer. */
.admin-help-drawer .admin-drawer-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    gap: 0;
}
.admin-help-drawer .admin-drawer-body > * { margin: 0 0 14px; }
.admin-help-drawer .admin-drawer-body > *:last-child { margin-bottom: 0; }
.admin-help-drawer .admin-drawer-body h5 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #e0c2ff;
    margin-top: 18px;
    margin-bottom: 8px;
}
.admin-help-drawer .admin-drawer-body p {
    color: rgba(227, 227, 247, 0.85);
}
.admin-help-drawer .admin-drawer-body strong {
    color: var(--text-primary);
    font-weight: 600;
}
.admin-help-drawer .admin-drawer-body ul,
.admin-help-drawer .admin-drawer-body ol {
    padding-left: 20px;
    color: rgba(227, 227, 247, 0.85);
}
.admin-help-drawer .admin-drawer-body li { margin-bottom: 6px; }
.admin-help-drawer .admin-drawer-body kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    color: #e0c2ff;
}
.admin-help-drawer .admin-drawer-body .help-tip {
    padding: 12px 14px;
    background: rgba(166, 77, 255, 0.08);
    border: 1px solid rgba(166, 77, 255, 0.20);
    border-left: 3px solid rgba(166, 77, 255, 0.55);
    border-radius: 8px;
    font-size: 13px;
}

/* ==========================================================
   Tooltip global — bubble pequeño con sombra, mismo look que el
   .labix-sidebar-tooltip pero usable en cualquier pantalla. Lo
   pinta labix-tooltip.js sobre cualquier [data-tooltip="..."].
   ========================================================== */
.labix-tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(20, 0, 40, 0.95);
    color: #F4F4F8;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    max-width: 320px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.labix-tooltip.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================
   Modal de confirmación profesional (reemplazo de window.confirm)
   ========================================================== */
.labix-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.labix-modal[hidden] { display: none; }
.labix-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 0, 24, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: labix-modal-fade-in 0.2s ease-out;
}
.labix-modal-dialog {
    position: relative;
    max-width: 440px;
    width: 100%;
    background: rgba(30, 0, 56, 0.97);
    border: 1px solid rgba(166, 77, 255, 0.30);
    border-radius: 18px;
    padding: 30px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: center;
    animation: labix-modal-slide-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes labix-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes labix-modal-slide-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.labix-modal-icon {
    margin: 0 auto 18px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(166, 77, 255, 0.22), rgba(77, 166, 255, 0.22));
    color: #c49aff;
    border: 1px solid rgba(166, 77, 255, 0.38);
    box-shadow: 0 6px 20px rgba(166, 77, 255, 0.22);
}
.labix-modal-icon--danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(255, 61, 119, 0.22));
    color: #ffb0b0;
    border-color: rgba(239, 68, 68, 0.42);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.22);
}
.labix-modal-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}
.labix-modal-message {
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(227, 227, 247, 0.82);
}

/* --- Contenido del modal "Valor fuera de lo esperable" (cargador de
       resultados). Va dentro de .labix-modal-message, que es un <p>: por eso
       son <span> puestos en display:block. --- */
.cr-critico-practica,
.cr-critico-renglon,
.cr-critico-cifras,
.cr-critico-motivo { display: block; }
.cr-critico-practica {
    font-size: 11.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(227, 227, 247, 0.55);
}
.cr-critico-renglon {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #F4F4F8);
}
.cr-critico-cifras {
    margin: 12px 0 10px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    font-size: 14px;
    color: #FECACA;
    font-variant-numeric: tabular-nums;
}
.cr-critico-cifras strong { color: #FFF; font-weight: 600; }
.cr-critico-motivo {
    font-size: 12.5px;
    color: rgba(227, 227, 247, 0.70);
}

/* Modal "wide" — usado en el simulador de prácticas. Más ancho, padding
   reducido, contenido alineado a la izquierda (no centro como el confirm). */
.labix-modal-dialog--wide {
    max-width: 1000px;
    width: 96vw;
    padding: 0;
    text-align: left;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.simul-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}
.simul-header-text { min-width: 0; }
.simul-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}
.simul-meta {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.simul-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.simul-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.simul-tabs {
    margin: 14px 22px 0;
    overflow-y: auto;
    flex: 1 1 auto;
    padding-bottom: 16px;
}

/* Footer del modal con el botón Cerrar — visible en ambas tabs. */
.simul-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.12);
}
.simul-empty {
    padding: 18px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}
.simul-hint { font-size: 11.5px; margin: 10px 4px 0; }

/* Tabla de Carga — heredo .cr-table de auth.css. */
.simul-carga-wrap .cr-table { margin-top: 4px; }
/* Referencia más compacta dentro del simulador (no afecta el cargador real). */
.simul-carga-wrap .cr-ref-value {
    font-size: 11px;
    line-height: 1.4;
}
.simul-carga-wrap .cr-ref-seg,
.simul-carga-wrap .cr-ref-nota { font-size: 10px; }
/* Columna "Valor" del simulador con ancho acotado (la del cargador real
   queda como estaba en su default 28%). */
.simul-carga-wrap .cr-valor {
    width: 140px;
    min-width: 120px;
    max-width: 160px;
}
/* Nota al pie del rango — mostrada en italic muted abajo del texto de Referencia. */
.simul-ref-nota {
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.35;
    white-space: pre-wrap;
}
.simul-informe-nota {
    margin-top: 3px;
    font-size: 10px;
    color: #1A3445;
    font-style: italic;
    line-height: 1.35;
    white-space: pre-wrap;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    opacity: 0.85;
}

/* Render del Informe (mockup A4 dentro del modal). */
.simul-informe {
    background: #ffffff;
    color: #061826;
    border-radius: 10px;
    padding: 22px 24px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.simul-informe-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #061826;
    border-bottom: 2px solid #103E5C;
    padding-bottom: 6px;
}
.simul-informe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.simul-informe-table th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(6, 24, 38, 0.18);
    color: #1A3445;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.simul-informe-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(6, 24, 38, 0.08);
    color: #061826;
    vertical-align: top;
}
.simul-informe-table tr:last-child td { border-bottom: none; }
.simul-informe-etiqueta { font-weight: 500; }
.simul-informe-valor {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600;
}
.simul-informe-valor--alto    { color: #b91c1c; }
.simul-informe-valor--bajo    { color: #1d4ed8; }
.simul-informe-valor--critico { color: #991b1b; }
.simul-informe-ref {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    color: #1A3445;
    font-size: 10.5px;
    white-space: pre-wrap;
    tab-size: 4;
    -moz-tab-size: 4;
    display: inline-block;
}
.simul-informe-flag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 3px;
}
.simul-informe-flag--alto    { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.simul-informe-flag--bajo    { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.simul-informe-flag--critico { background: rgba(220, 38, 38, 0.22); color: #991b1b; }
.simul-informe-empty {
    padding: 24px 12px;
    text-align: center;
    color: #1A3445;
    font-size: 13px;
}
.labix-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.labix-modal-actions .btn { min-width: 120px; }
/* Variante destructiva: cuando .btn-danger acompaña a .btn-primary, el botón tiene
   fondo rojo sólido con texto blanco. Aplica en modales, drawers y páginas. */
.btn-primary.btn-danger {
    background: linear-gradient(135deg, #F87171 0%, #DC2626 100%);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}
.btn-primary.btn-danger:hover {
    background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.50);
}

/* Modal de preview para adjuntos (imagen / PDF). */
.labix-preview { padding: 28px; }
.labix-preview-dialog {
    position: relative;
    width: min(1100px, 100%);
    max-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    background: rgba(30, 0, 56, 0.97);
    border: 1px solid rgba(166, 77, 255, 0.28);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: labix-modal-slide-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.labix-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.labix-preview-title {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.labix-preview-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    align-items: center;
}
.labix-preview-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.labix-preview-body img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
}
.labix-preview-body iframe {
    width: 100%;
    height: 80vh;
    border: 0;
    background: #fff;
}

/* Preview de firma / sello (mi cuenta) — reutiliza el look de adj-item de ver.php */
.firma-preview { margin-top: 10px; }
.firma-preview:empty { display: none; }
.firma-preview-loading {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.7;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.10);
}
/* Thumbnail de imagen en adj-item con fondo claro (las firmas suelen tener trazos negros sobre transparente, no se ven sobre fondo violeta oscuro). */
.firma-preview .adj-item-thumb {
    background: rgba(255, 255, 255, 0.94);
}
.firma-preview .adj-item-thumb img {
    padding: 3px;
    background: #ffffff;
}
/* Dropzone más compacto para firma/sello */
.firma-dropzone { padding: 14px 16px; }
.firma-dropzone .adj-dropzone-text strong { font-size: 13.5px; }
.firma-dropzone .adj-dropzone-text span { font-size: 11.5px; }

/* ==========================================================
   Radio group custom (drawer de validar, etc.)
   ========================================================== */
.admin-radio-group {
    border: 0;
    padding: 0;
    /* Sin margin-bottom: el ritmo vertical lo maneja el gap del
       .admin-drawer-body. Con los dos se duplicaba el aire. */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-radio-group legend {
    padding: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    /* Token + opacity en vez de hex fijo (mismo patrón que .dash-muted):
       da el mismo gris que antes en LABIX y el tema MAR lo toma solo. */
    color: var(--text-secondary);
    opacity: 0.7;
}
.admin-radio-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.14s ease, border-color 0.14s ease;
}
/* Barra de acento a la izquierda — mismo violeta sólido que el stripe de
   .admin-form-subheading (NO var(--gradient-brand): en 3px de ancho un
   gradient 90deg se ve del color inicial, que acá es el naranja).
   Solo se enciende en la opción elegida. */
.admin-radio-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(166, 77, 255, 0.75);
    opacity: 0;
    transition: opacity 0.14s ease;
}
.admin-radio-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}
.admin-radio-item:has(input:checked) {
    background: rgba(166, 77, 255, 0.1);
    border-color: rgba(166, 77, 255, 0.35);
}
.admin-radio-item:has(input:checked)::before { opacity: 1; }
/* Foco por teclado visible en toda la tarjeta, no solo en el radio nativo. */
.admin-radio-item:focus-within { border-color: rgba(166, 77, 255, 0.55); }
.admin-radio-item > input[type="radio"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #A64DFF;
    cursor: pointer;
    flex-shrink: 0;
}
.admin-radio-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.admin-radio-body strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}
.admin-radio-body small {
    color: var(--text-secondary);
    opacity: 0.7;
    font-size: 12px;
    line-height: 1.55;
}

/* ==========================================================
   Drawer "Validar y firmar" (admin/ordenes/ver.php)
   ========================================================== */
/* Nota de contexto arriba de todo: cajita discreta con ícono en vez de un
   párrafo suelto, para que no compita con la pregunta del radio group. */
.validar-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
}
.validar-nota svg {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.75;
}

/* ── Revisión previa a la firma (drawer Validar) ──────────────────────
   Lista lo que conviene mirar antes de firmar: valores que parecen un
   error de tipeo y datos obligatorios sin cargar. Mientras haya algo
   pendiente, el botón "Validar y firmar" queda deshabilitado.
   El borde ámbar es el mismo idioma que el modal de valor imposible del
   cargador: naranja = mirá esto, rojo = no se puede seguir.           */
.rev-box {
    /* `.admin-drawer-body` es flex en columna: sin esto el flex le come alto a
       la caja y, como recorta para redondear las esquinas, el aviso quedaba
       chiquito y con el texto tapado adentro. El que scrollea es el drawer. */
    flex: 0 0 auto;
    margin: 0 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.07);
    overflow: hidden;
}
.rev-box[data-estado="ok"] {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.07);
}
.rev-box[data-estado="cargando"] {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
}
.rev-box-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
}
.rev-box-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev-box-head strong { font-size: 13.5px; color: var(--text-primary); }
.rev-box-icon { display: flex; color: #F59E0B; flex-shrink: 0; margin-top: 1px; }
.rev-box[data-estado="ok"] .rev-box-icon      { color: #22C55E; }
.rev-box[data-estado="cargando"] .rev-box-icon { color: var(--text-secondary); opacity: 0.6; }
.rev-box-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.rev-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    max-height: 320px;
    overflow-y: auto;
}
.rev-list:not(:empty) { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.rev-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.rev-item:last-child { border-bottom: 0; }
/* Confirmado: sigue a la vista (el bioquímico decidió, no desaparece sin
   dejar rastro) pero se apaga para que el ojo vaya a lo que falta. */
.rev-item.is-ok { opacity: 0.5; }

.rev-item-flag {
    flex-shrink: 0;
    margin-top: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.rev-item-flag--imp   { background: rgba(239, 68, 68, 0.20);  color: #FCA5A5; }
.rev-item-flag--falta { background: rgba(245, 158, 11, 0.20); color: #FCD34D; }

.rev-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rev-item-body > strong { font-size: 13px; color: var(--text-primary); }
.rev-item-practica { font-size: 11.5px; color: var(--text-secondary); opacity: 0.85; }
.rev-item-motivo { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.rev-item-motivo strong { color: var(--text-primary); font-weight: 600; }

.rev-item-acciones { display: flex; gap: 4px; flex-shrink: 0; }
.rev-item-acciones .btn { padding: 4px 10px; font-size: 11.5px; }

@media (max-width: 560px) {
    .rev-item { flex-wrap: wrap; }
    .rev-item-acciones { width: 100%; justify-content: flex-end; }
}

/* Los botones leen como pie del drawer, separados del formulario. */
#validar-drawer .admin-form-actions {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* Compacto a propósito: en una notebook el drawer llegaba abajo de todo y
   había que scrollear para ver "Validar y firmar". Las explicaciones de cada
   modo se mudaron al "?" y acá se ajusta el ritmo vertical. */
#validar-drawer .validar-nota {
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.45;
}
/* Mismo motivo que en .rev-box: en este drawer nada se achica por flex. El
   que scrollea es el body, no cada bloque por su cuenta. */
#validar-drawer .admin-drawer-body > * { flex: 0 0 auto; }
#validar-drawer .admin-radio-group { gap: 8px; }
#validar-drawer .admin-radio-group legend { padding-bottom: 6px; }
#validar-drawer .admin-radio-item {
    align-items: center;
    padding: 10px 14px;
}
#validar-drawer .admin-radio-item > input[type="radio"] { margin-top: 0; }
#validar-drawer .field-hint { margin-top: 3px; line-height: 1.35; }
#validar-drawer textarea { min-height: 0; }
#validar-drawer .admin-form-actions {
    margin-top: 4px;
    padding-top: 12px;
}

/* ==========================================================
   Grilla "Áreas que firmo" (admin/mi-cuenta/firma.php)
   ========================================================== */
.areas-firma-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
/* .area-firma-item es una variante visual de .admin-check con borde de
   tarjeta y highlight cuando está marcada. El checkbox nativo lo oculta
   .admin-check input; la cajita custom y el label heredan del patrón canónico. */
.area-firma-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.area-firma-item:has(input:checked) {
    background: rgba(166, 77, 255, 0.10);
    border-color: rgba(166, 77, 255, 0.35);
}
.area-firma-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.area-firma-item .admin-check-label strong {
    color: #E8E8F4;
    font-weight: 500;
    font-size: 13.5px;
}
.area-firma-item .admin-check-label .dash-muted {
    color: #A0A0B8;
    font-size: 12px;
    line-height: 1.45;
}

/* ==========================================================
   Adjuntos de orden (dropzone + lista de archivos)
   ========================================================== */
.adj-dropzone {
    display: block;
    padding: 22px 24px;
    border: 2px dashed rgba(166, 77, 255, 0.35);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.05), rgba(166, 77, 255, 0.08));
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    text-align: center;
}
.adj-dropzone:hover,
.adj-dropzone:focus-visible {
    border-color: rgba(166, 77, 255, 0.65);
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.10), rgba(166, 77, 255, 0.15));
    outline: none;
}
.adj-dropzone[data-dragover="true"] {
    border-color: #A64DFF;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.14), rgba(166, 77, 255, 0.22));
    transform: scale(1.01);
}
.adj-dropzone-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.adj-dropzone-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.25), rgba(166, 77, 255, 0.32));
    color: #e0c2ff;
    border: 1px solid rgba(166, 77, 255, 0.35);
}
.adj-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.adj-dropzone-text strong {
    color: var(--text-primary);
    font-size: 14.5px;
    font-weight: 600;
}
.adj-dropzone-text span {
    color: var(--text-secondary);
    font-size: 12.5px;
    opacity: 0.8;
}

.adj-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.adj-loading { padding: 10px 4px; }

.adj-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.adj-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(166, 77, 255, 0.20);
}
.adj-item-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(166, 77, 255, 0.10);
    color: #c49aff;
    overflow: hidden;
    border: 1px solid rgba(166, 77, 255, 0.20);
}
.adj-item-thumb.is-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.adj-item-thumb.is-clickable:hover {
    transform: scale(1.04);
    border-color: rgba(166, 77, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(166, 77, 255, 0.15);
}
.adj-item-thumb.is-clickable:focus-visible {
    outline: 2px solid rgba(166, 77, 255, 0.6);
    outline-offset: 2px;
}
.adj-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adj-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.adj-item-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adj-item-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    opacity: 0.7;
}
.adj-item-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}
.adj-item[data-uploading="true"] {
    opacity: 0.8;
    pointer-events: none;
}
.adj-item-progress {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-top: 6px;
}
.adj-item-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #FF7A18, #A64DFF);
    width: 0%;
    transition: width 0.2s ease;
}
.adj-empty {
    padding: 14px 4px;
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.7;
    font-size: 13px;
}

/* ==========================================================
   Admin Hero header — encabezado de página prominente
   (breadcrumb + ícono + título gradient + subtítulo + acciones)
   ========================================================== */
.admin-hero {
    position: relative;
    margin-bottom: 0;
    padding: 28px 32px;
    border-radius: 20px;
    background: rgba(30, 0, 56, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Línea de color LABIX en el borde inferior del hero (gradient accent). */
.admin-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF7A18 0%, #FF3D77 33%, #A64DFF 66%, #4DA6FF 100%);
    pointer-events: none;
    z-index: 2;
}
.admin-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 122, 24, 0.14), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(166, 77, 255, 0.18), transparent 48%),
        linear-gradient(135deg, rgba(255, 61, 119, 0.05), transparent 60%);
    pointer-events: none;
}
.admin-hero > * { position: relative; z-index: 1; }

.admin-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    color: rgba(207, 207, 234, 0.55);
    flex-wrap: wrap;
}
.admin-hero-breadcrumb a {
    color: rgba(207, 207, 234, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}
.admin-hero-breadcrumb a:hover { color: #ffffff; }
.admin-hero-crumb-sep { opacity: 0.4; }
.admin-hero-crumb-current {
    color: #e0c2ff;
    font-weight: 500;
}

.admin-hero-body {
    display: flex;
    align-items: center;
    gap: 20px;
}
.admin-hero-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.22), rgba(166, 77, 255, 0.30));
    border: 1px solid rgba(166, 77, 255, 0.32);
    color: #e0c2ff;
    box-shadow:
        0 10px 28px rgba(166, 77, 255, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.admin-hero-text { flex: 1; min-width: 0; }
.admin-hero-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
    background: linear-gradient(100deg, #ffffff 0%, #e0c2ff 55%, #ffb3cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.admin-hero-sub {
    font-size: 14px;
    color: rgba(207, 207, 234, 0.72);
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}
.admin-hero-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-end;
}
/* Hero compacto: mismo look (gradients, breadcrumb, icon-box) pero todo
   proporcional ~20-25% mas chico. Para combinar con .admin-form--dense en
   pantallas de alta/edicion. */
.admin-hero--compact { padding: 20px 24px; border-radius: 16px; }
.admin-hero--compact .admin-hero-breadcrumb { margin-bottom: 12px; }
.admin-hero--compact .admin-hero-body { gap: 14px; }
.admin-hero--compact .admin-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    align-self: flex-start;
}
.admin-hero--compact .admin-hero-icon svg { width: 24px; height: 24px; }
.admin-hero--compact .admin-hero-title { font-size: 24px; margin-bottom: 3px; }
.admin-hero--compact .admin-hero-sub { font-size: 12px; }
@media (max-width: 700px) {
    .admin-hero { padding: 22px 20px; border-radius: 16px; }
    .admin-hero-title { font-size: 24px; }
    .admin-hero-icon { width: 52px; height: 52px; }
    .admin-hero-body { flex-wrap: wrap; }
    .admin-hero-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
    .card-heading-step { font-size: 32px; }
    .card-heading-title { font-size: 18px; }
    .card-heading-icon { width: 40px; height: 40px; }
}
.admin-form-section:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.admin-form-section-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.admin-form-section--quickset {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 18px;
}

.field-req {
    color: var(--grad-2);
    font-weight: 500;
    font-size: 12px;
    margin-left: 2px;
}
.field-opt {
    color: rgba(207, 207, 234, 0.5);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
    text-transform: lowercase;
    letter-spacing: 0.3px;
}
/* Help text debajo del input (texto explicativo largo). Los badges cortos
   tipo "opcional" siguen yendo al lado del label con .field-opt. */
.field-hint {
    display: block;
    font-size: 12px;
    color: rgba(207, 207, 234, 0.55);
    margin-top: -2px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.1px;
}
/* Link discreto debajo de un select para abrir la gestión del recurso en otra pestaña. */
.field-link-manage {
    display: inline-block;
    margin-top: -2px;
    font-size: 12px;
    color: rgba(207, 207, 234, 0.65);
    text-decoration: none;
    letter-spacing: 0.1px;
    transition: color 0.2s ease;
    width: fit-content;
}
.field-link-manage strong {
    color: #c49aff;
    font-weight: 500;
    transition: color 0.2s ease;
}
.field-link-manage:hover,
.field-link-manage:focus-visible {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    outline: none;
}
.field-link-manage:hover strong,
.field-link-manage:focus-visible strong {
    color: #e0c2ff;
    text-decoration: underline;
}

.admin-subfield {
    margin-top: 10px;
    padding-left: 32px;
    max-width: 320px;
}
.auth-field--full {
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
}
.auth-field--tight label { font-size: 13px; }

/* Checkbox inline limpio (sin caja custom, para usos secundarios).
   Usa accent-color nativo del browser — el tilde queda centrado
   correctamente cross-browser sin pseudo-elementos frágiles. */
.admin-form-section--quickset .admin-check input[type="checkbox"],
.admin-drawer-panel .admin-check input[type="checkbox"],
.admin-planes-list .admin-check input[type="checkbox"] {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #A64DFF; /* var(--grad-3), violeta de marca LABIX */
}
.admin-form-section--quickset .admin-check,
.admin-drawer-panel .admin-check,
.admin-planes-list .admin-check {
    padding: 0;
    background: none !important;
    position: static;
    gap: 10px;
}
.admin-form-section--quickset .admin-check:hover,
.admin-drawer-panel .admin-check:hover,
.admin-planes-list .admin-check:hover {
    background: none !important;
}

/* Modifier `.admin-check--login` — escapa el override de drawer/quickset/planes
   y vuelve al diseño canónico del login (input oculto + caja gradient interna).
   Útil cuando un drawer quiere consistencia visual con los checkboxes del login. */
.admin-drawer-panel .admin-check.admin-check--login input[type="checkbox"],
.admin-form-section--quickset .admin-check.admin-check--login input[type="checkbox"],
.admin-planes-list .admin-check.admin-check--login input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.admin-drawer-panel .admin-check.admin-check--login,
.admin-form-section--quickset .admin-check.admin-check--login,
.admin-planes-list .admin-check.admin-check--login {
    padding: 10px 12px;
    background: none !important;
}
.admin-drawer-panel .admin-check.admin-check--login:hover,
.admin-form-section--quickset .admin-check.admin-check--login:hover,
.admin-planes-list .admin-check.admin-check--login:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.btn-sm {
    font-size: 12px;
    padding: 7px 14px;
}
.btn-danger {
    color: var(--error);
    border-color: rgba(239, 68, 68, 0.28);
}
.btn-danger:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Lista de planes (ver.php) */
.admin-planes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.admin-planes-loading {
    text-align: center;
    padding: 24px 0;
}
.admin-plan-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.admin-plan-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.admin-plan-card--default {
    border-color: rgba(166, 77, 255, 0.65);
    background: rgba(166, 77, 255, 0.07);
    box-shadow: 0 0 0 1px rgba(166, 77, 255, 0.18);
}
/* Listas de microbiología (drogas / germenes): el div no usa .admin-planes-list,
   así que le damos el gap entre cards y bajamos el alto de cada una. */
#drogas-list,
#germenes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#drogas-list .admin-plan-card,
#germenes-list .admin-plan-card {
    padding: 9px 14px;
}
/* Lista compacta de prácticas en el resumen de la orden (ver.php).
   Filas tight (≈26px) sin background ni separador, las acciones viven
   en el drawer "Gestionar". El card que las contiene reduce padding y
   esconde el subtítulo para no colgar altura innecesaria. */
/* Card "Prácticas" del resumen — body denso. El header se mantiene
   con el mismo look que el de "Datos generales" (icono / fuente / sub
   debajo del título); la compactación va solo en la lista y totales. */
/* Barra de totales rediseñada: UnB chico a la izquierda + Total grande a la
   derecha con el gradient brand. Hereda los overrides MAR vía variables. */
#practicas-section .admin-orden-totales {
    margin-top: 14px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--grad-3) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--grad-3) 22%, transparent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: initial;
    font-size: inherit;
}
.orden-totales-block {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}
.orden-totales-monto { align-items: flex-end; }
.orden-totales-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    color: var(--text-secondary);
}
.orden-totales-ub strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.orden-totales-monto strong {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.2px;
}

.orden-practicas-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    line-height: 1.15;
    transition: background-color .12s ease;
}
/* Card Prácticas en flex-column para anclar la barra de "unidades y total"
   al pie: la lista crece (flex:1) y absorbe el espacio libre cuando la card
   se estira por la card de al lado, empujando los totales abajo de todo. */
#practicas-section {
    display: flex;
    flex-direction: column;
}
/* El contenedor del resumen separa las filas con gap 10px; como ahora cada
   fila tiene padding vertical propio (para que el hover respire), achicamos
   el gap para mantener la densidad de la lista. */
#practicas-list-resumen.admin-planes-list {
    gap: 2px;
    /* Crece para empujar los totales al pie de la card. */
    flex: 1 1 auto;
}
/* El alto reservado vale SOLO mientras el JS trae los datos (evita el salto
   de layout al cargar). Una vez cargada, la card mide exactamente lo que
   ocupa su contenido y el grid de .admin-panel-row la iguala con la de al
   lado — las dos crecen juntas a medida que se llenan. */
#practicas-list-resumen:has(> .admin-planes-loading) { min-height: 120px; }
.orden-practicas-row:hover {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
/* Fila del resumen + su X para quitar la práctica. Van como hermanos dentro
   de este contenedor porque la fila ya es un <button> (acceso directo al
   cargador) y no se puede anidar otro adentro. El margen negativo que traía
   la fila se mueve acá para que la lista siga alineada con la card. */
.orden-practicas-item {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 -8px;
}
.orden-practicas-item > .orden-practicas-row {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
/* Discreta en reposo: es una acción destructiva y no tiene que competir con
   el nombre de la práctica. Se afirma al pasar por la fila. */
.orden-practicas-quitar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary, #6B7280);
    opacity: .4;
    cursor: pointer;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.orden-practicas-item:hover .orden-practicas-quitar { opacity: 1; }
.orden-practicas-quitar:hover,
.orden-practicas-quitar:focus-visible {
    opacity: 1;
    color: #DC2626;
    background: color-mix(in srgb, #DC2626 12%, transparent);
}
.orden-practicas-quitar:focus-visible {
    outline: 2px solid color-mix(in srgb, #DC2626 55%, transparent);
    outline-offset: 1px;
}
/* En touch no hay hover: la X se ve siempre. */
@media (hover: none) {
    .orden-practicas-quitar { opacity: .75; }
}
/* Variante clickeable: la fila es un acceso directo al cargador de abajo.
   Es un <button>, así que hay que neutralizar los estilos que trae el
   browser para que se vea igual que la fila de solo lectura. */
.orden-practicas-row--link {
    /* Sin width: la clase base ya es display:flex (caja de nivel bloque, llena
       el ancho sola). Con width:100% se sumaba al margin -8px de la base y la
       fila quedaba corrida. */
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.orden-practicas-row--link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--grad-3) 70%, transparent);
    outline-offset: 1px;
}

/* Destello del bloque al que se saltó desde la card de Prácticas: en la tab
   General puede haber muchas prácticas juntas y hace falta señalar cuál. */
.cr-practica--flash {
    animation: crPracticaFlash 1.6s ease-out;
    border-radius: 10px;
}
@keyframes crPracticaFlash {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--grad-3) 45%, transparent); }
    35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--grad-3) 16%, transparent); }
    100% { box-shadow: 0 0 0 0   transparent; }
}
/* "Escribí acá": el campo al que te manda la card de Prácticas late unos
   segundos. Va en celeste (--grad-4), el mismo color del foco, para que se lea
   como una sola señal: el campo enfocado, latiendo. Una animación le gana a
   cualquier `box-shadow` normal, así que no pelea con el :focus del campo. */
.cr-campo--llamada {
    animation: crCampoLlamada 0.85s ease-out 3;
}
@keyframes crCampoLlamada {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--grad-4) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--grad-4)  0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--grad-4)  0%, transparent); }
}
/* Respeta a quien pidió menos movimiento en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
    .cr-campo--llamada { animation: none; }
}

.orden-practicas-name {
    font-size: 11.5px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orden-practicas-row .admin-badge {
    font-size: 8.5px;
    padding: 0 5px;
    flex-shrink: 0;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

/* Datos generales — el panel se vuelve flex column para que el footer
   "Recibido por" se ancle al borde inferior derecho de la card aún si
   queda espacio libre (por ej. cuando la card Prácticas es más alta). */
.dash-panel:has(> #orden-resumen) {
    display: flex;
    flex-direction: column;
}
#orden-resumen {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Ídem Prácticas: el alto reservado es solo para el estado "Cargando datos…",
   así la página no "sube y baja" mientras ordenes.js inyecta el resumen.
   Después manda el contenido. */
#orden-resumen:has(> .admin-planes-loading) { min-height: 340px; }

/* Datos generales — bloque hero con nombre del paciente + lista vertical
   debajo + footer con "Recibido por". */
.orden-resumen-paciente {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.orden-resumen-paciente-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
    background: var(--gradient-brand);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.orden-resumen-paciente-doc {
    font-size: 13px;
    color: var(--muted, #a4a3b0);
}

/* Dos columnas: con una sola, la card quedaba casi el doble de alta que la de
   Prácticas, y como comparten fila el grid estiraba a las dos. `align-items:
   start` hace que una celda alta empuje solo a su fila, no a toda la lista. */
.orden-resumen-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    align-items: start;
    margin: 0;
}
/* Texto libre (indicaciones, observaciones, motivo de anulación): multilínea
   y de largo impredecible, va a lo ancho. */
.orden-resumen-item--full { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .orden-resumen-list { grid-template-columns: 1fr; }
}
.orden-resumen-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.orden-resumen-item dt {
    font-size: 10.5px;
    color: var(--muted, #a4a3b0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin: 0;
}
.orden-resumen-item dd {
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    word-break: break-word;
}
.orden-resumen-sub {
    display: block;
    font-size: 11px;
    color: var(--muted, #a4a3b0);
    margin-top: 1px;
}
/* Teléfono fijo: mismo formato que el de WhatsApp pero en gris — es un link
   para llamar, no un chat. */
.orden-tel-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
}
.orden-tel-link:hover { color: var(--text-primary); }
.orden-tel-link .tel-icon { flex: none; }
.orden-tel-link .orden-wa-num { line-height: 1.2; }

/* Contacto con WhatsApp: logo verde + número clicable que abre wa.me. */
.orden-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.orden-wa-link .wa-icon {
    color: #25D366;
    flex: none;
}
.orden-wa-link .orden-wa-num { line-height: 1.2; }
a.orden-wa-link:hover .orden-wa-num {
    color: #25D366;
}
.orden-wa-link--plain { cursor: default; }

/* Link de rescate cuando el protocolo whatsapp:// no abre nada. */
.compartir-wa-fallback {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.compartir-wa-fallback a {
    color: var(--grad-4);
    text-decoration: underline;
}

/* Aviso de que el informe todavía no está firmado, arriba del formulario de
   compartir. Ámbar: no impide nada, avisa qué va a recibir el destinatario. */
.compartir-aviso-borrador {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.10);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.45;
}

/* Drawer "Editar datos de la orden" — header con título + meta de la orden,
   warning-box ámbar para transiciones riesgosas. */
.editar-datos-titlestack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.editar-datos-titlestack h3 { margin: 0; }
.editar-datos-meta {
    margin: 0;
    font-size: 12px;
    color: var(--muted, #a4a3b0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-warning-box {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(255, 182, 82, 0.08);
    border: 1px solid rgba(255, 182, 82, 0.25);
    border-radius: 8px;
    font-size: 12px;
    color: #ffd28a;
    line-height: 1.5;
}
/* Variante compacta, SOLO para el aviso de "la orden está firmada".
   Ese aviso comenta lo que acabás de elegir en Estado, así que tiene que
   leerse pegado al campo: el .auth-form ya separa 16px con su `gap` y el
   margin-top propio de la caja los duplicaba. El resto de los avisos del
   drawer (validada sin firma, desentregar, desanular) quedan como estaban. */
.ed-warning-box.ed-warning-box--firma {
    margin-top: -6px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.45;
}
.ed-warning-box::before {
    content: "⚠ ";
    margin-right: 4px;
}
.ed-warning-box[hidden] { display: none; }

.orden-resumen-footer {
    margin-top: auto;          /* empuja al borde inferior aunque haya espacio libre */
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: var(--muted, #a4a3b0);
    text-align: right;
}
.admin-plan-card--inactive { opacity: 0.85; }
.admin-plan-main { flex: 1; min-width: 0; }
.admin-plan-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
/* Header de la card de familiares: layout flex con gap entre nombre +
   badges (parentesco, "Accede al portal"), igual que .admin-plan-name. */
.admin-plan-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.admin-plan-code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}
/* Variante destacada del .admin-plan-code — misma forma y tamaño,
   pero con highlight de color para indicar "principal" o similar.
   En default es lila; en MAR (override) pasa a navy. */
.admin-plan-code--accent {
    background: rgba(166, 77, 255, 0.18);
    color: #d4adff;
    border: 1px solid rgba(166, 77, 255, 0.40);
    font-weight: 600;
}
.admin-plan-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-plan-ub {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--text-primary);
}
.admin-plan-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Drawer lateral (alta/edición inline de planes) */
.admin-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.admin-drawer[hidden] { display: none; }

/* Drawers secundarios (que se abren ENCIMA de otro drawer ya abierto):
   z-index +10 para que el backdrop y panel queden por arriba. Aplicar con
   class `admin-drawer--top` en el aside. */
.admin-drawer--top { z-index: 210; }

.admin-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 0, 30, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: drawerFadeIn 0.25s ease both;
}
@keyframes drawerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.admin-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100%);
    background: var(--bg-deep);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -30px 0 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    animation: drawerSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
}
.admin-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-drawer-header h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}
.admin-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.admin-drawer-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
.admin-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-drawer-body .admin-search-input { flex: 0 0 auto; }
/* `max-height: 60vh` sirve cuando el picker vive en una página; dentro de un
   drawer sobra y estorba: cortaba la lista al 60% de la pantalla, le ponía
   scroll propio y dejaba el resto del drawer vacío. Acá manda el flex. */
.admin-drawer-body .admin-picker-results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
.admin-drawer-section {
    padding-top: 20px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-drawer-section h4 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.admin-drawer-subtitle {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 22px 0 10px;
}

.admin-ub-form {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-top: 10px;
}

.admin-ub-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-ub-entry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    align-items: baseline;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 13px;
}
.admin-ub-entry--current {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.05);
}
.admin-ub-entry-valor {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}
.admin-ub-entry-fechas {
    color: var(--text-secondary);
    font-size: 12px;
}
.admin-ub-entry-meta {
    color: var(--text-secondary);
    font-size: 12px;
    grid-column: 1 / -1;
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    margin-top: 2px;
}

/* Alerts inline (warnings en pantallas de detalle) */
.admin-alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.admin-alert strong { color: var(--text-primary); font-weight: 500; }
.admin-alert a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
}
.admin-alert a:hover { text-decoration-color: var(--grad-3); }
.admin-alert--warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.30);
    color: var(--text-secondary);
}
.admin-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.30);
    color: var(--text-secondary);
}
.admin-alert--info {
    background: rgba(77, 166, 255, 0.08);
    border-color: rgba(77, 166, 255, 0.30);
    color: var(--text-secondary);
}

/* ============================================================
   Toast — notificación profesional (glass + icon + progress bar)
   Compatibilidad: mismo DOM que antes, `<div class="labix-toast
   labix-toast--{success|error|info|warning}">msg</div>`.
   El ícono y la barra de progreso son pseudoelementos → no requiere
   cambios en el JS existente.
   ============================================================ */

.labix-toast-stack {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    max-width: calc(100% - 48px);
}

.labix-toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    min-width: 320px;
    max-width: 440px;
    padding: 16px 22px 18px 64px;    /* left = 64px para el ícono */
    border-radius: 16px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1px;
    background:
        linear-gradient(135deg, rgba(58, 0, 102, 0.72) 0%, rgba(30, 0, 56, 0.88) 100%),
        rgba(30, 0, 56, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    animation: toastIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: bottom center;
}

/* Ícono circular a la izquierda (pseudoelemento — no requiere cambio de DOM).
   El glyph se inyecta con `content:` en cada variante. */
.labix-toast::before {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Barra de progreso al pie — se consume en 1.8s (match con setTimeout del JS).
   Se pausa al pasar el mouse por encima. */
.labix-toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform-origin: left;
    animation: toastProgress 1800ms linear forwards;
    opacity: 0.75;
}
.labix-toast:hover::after { animation-play-state: paused; }

/* -------- Variantes por tipo -------- */

.labix-toast--success::before {
    content: '✓';
    background: linear-gradient(135deg, #34D399, #16A34A);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.labix-toast--success::after { background: linear-gradient(90deg, #34D399, #16A34A); }
.labix-toast--success {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(34, 197, 94, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.labix-toast--error::before {
    content: '✕';
    background: linear-gradient(135deg, #F87171, #DC2626);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.labix-toast--error::after { background: linear-gradient(90deg, #F87171, #DC2626); }
.labix-toast--error {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(239, 68, 68, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.labix-toast--info::before {
    content: 'i';
    font-style: normal;
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
    box-shadow: 0 4px 14px rgba(77, 166, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.labix-toast--info::after { background: linear-gradient(90deg, #60A5FA, #3B82F6); }
.labix-toast--info {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(77, 166, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.labix-toast--warning::before {
    content: '!';
    background: linear-gradient(135deg, #FBBF24, #D97706);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.labix-toast--warning::after { background: linear-gradient(90deg, #FBBF24, #D97706); }
.labix-toast--warning {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(245, 158, 11, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.labix-toast.leaving {
    animation: toastOut 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(16px) scale(0.98); }
}
@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 520px) {
    .labix-toast-stack {
        bottom: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        align-items: stretch;
        max-width: none;
    }
    .labix-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

/* ============================================================
   Responsive (mobile-first; tweaks para celulares chicos)
   ============================================================ */
@media (max-width: 420px) {
    .auth-main      { padding: 16px 12px; }
    .auth-card      { padding: 24px 18px 22px; border-radius: 16px; }
    .auth-title     { font-size: 20px; }
    .auth-subtitle  { font-size: 13px; margin-bottom: 18px; }
    .dash-header-inner { padding: 12px 14px; }
    .dash-main      { padding: 20px 14px 40px; }
    .dash-panel     { padding: 18px; border-radius: 14px; }
    .dash-kv        { grid-template-columns: 1fr; gap: 2px 0; }
    .dash-kv dt     { margin-top: 10px; }
    .dash-user-name { display: none; } /* en muy chico ocultamos el nombre, queda solo el botón */
}

/* ============================================================
   Modal genérico (.modal-backdrop + .modal-card)
   ------------------------------------------------------------
   Compartido por sedes/horarios (Guardar como plantilla),
   turnos/ver (Reagendar) y cualquier futura pantalla del admin.
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 0, 22, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* Reafirmar el atributo hidden del HTML porque .modal-backdrop con
   display:flex le gana al user-agent stylesheet. */
.modal-backdrop[hidden] {
    display: none;
}

.modal-card {
    background: rgba(30, 0, 56, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    width: min(520px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }

.modal-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Flatpickr · theme LABIX (dark + acento violeta + gradiente)
   ============================================================ */
.flatpickr-calendar {
    background: rgba(30, 0, 56, 0.96);
    border: 1px solid rgba(166, 77, 255, 0.22);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 4px;
}
.flatpickr-calendar.arrowTop::before { border-bottom-color: rgba(166, 77, 255, 0.22); }
.flatpickr-calendar.arrowTop::after  { border-bottom-color: rgba(30, 0, 56, 0.96); }
.flatpickr-calendar.arrowBottom::before { border-top-color: rgba(166, 77, 255, 0.22); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: rgba(30, 0, 56, 0.96); }

.flatpickr-months {
    border-radius: 12px 12px 0 0;
    padding: 8px 4px 10px;
}
.flatpickr-month {
    color: var(--text-primary);
    fill: var(--text-primary);
    height: 34px;
}
.flatpickr-current-month {
    font-weight: 600;
    font-size: 15px;
    padding-top: 4px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--text-primary);
    background: transparent;
    font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(166, 77, 255, 0.12);
    border-radius: 6px;
}
/* Options del <select> nativo de meses: el browser usa UI del SO para el dropdown,
   solo respeta background-color / color sólidos (sin alpha). Fuerzo con !important
   porque algunos browsers aplican estilos user-agent con alta prioridad. */
.flatpickr-monthDropdown-months option,
.flatpickr-monthDropdown-month {
    background-color: #1E0038 !important;
    color: #ffffff !important;
}
.numInputWrapper span.arrowUp::after   { border-bottom-color: var(--text-secondary); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-secondary); }
.numInputWrapper:hover { background: rgba(166, 77, 255, 0.08); }

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 8px;
    top: 6px !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
    background: rgba(166, 77, 255, 0.12);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: currentColor; }

.flatpickr-weekdays { background: transparent; }
.flatpickr-weekdaycontainer { padding: 4px 0; }
span.flatpickr-weekday {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: transparent;
}

.flatpickr-days { padding: 2px 0 6px; }
.dayContainer { padding: 0 4px; }

.flatpickr-day {
    color: var(--text-primary);
    border-radius: 8px;
    border: 1px solid transparent;
    max-width: 40px;
    height: 36px;
    line-height: 34px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(166, 77, 255, 0.14);
    border-color: rgba(166, 77, 255, 0.30);
    color: var(--text-primary);
}
.flatpickr-day.today {
    border-color: rgba(166, 77, 255, 0.55);
    color: #c49aff;
    font-weight: 600;
}
.flatpickr-day.today:hover {
    background: rgba(166, 77, 255, 0.20);
    color: #e0c2ff;
    border-color: rgba(166, 77, 255, 0.55);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
    background: linear-gradient(135deg, #A64DFF 0%, #FF3D77 100%);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(166, 77, 255, 0.40);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
    color: rgba(207, 207, 234, 0.22);
}
.flatpickr-day.flatpickr-disabled:hover {
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
    color: rgba(207, 207, 234, 0.22);
}

/* input original de flatpickr queda como hidden shadow; el altInput es el visible.
   Forzamos width:100% con !important porque flatpickr puede poner un size/width
   que no ocupa todo su contenedor (especialmente cuando el input está vacío). */
.flatpickr-input,
.flatpickr-alt-input,
input.flatpickr-input[readonly],
input.flatpickr-input.form-control {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ======================================================================
   Reportes (admin/reportes/*)
   ====================================================================== */
.mi-cuenta-card--soon {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.mi-cuenta-card--soon .mi-cuenta-icon {
    filter: grayscale(0.4);
}

#evol-chart-wrap {
    position: relative;
    min-height: 340px;
    padding-top: 10px;
}
.evol-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 14px 4px 4px;
    font-size: 12.5px;
    color: var(--text-secondary, #CFCFEA);
}
.evol-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.evol-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ======================================================================
   Comentarios internos por orden (admin/ordenes/ver.php)
   ====================================================================== */
.comentarios-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.comentario-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
.comentario-item--mio {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.25);
}
.comentario-avatar {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FF7A18, #FF3D77, #A64DFF, #4DA6FF);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.comentario-body {
    flex: 1;
    min-width: 0;
}
.comentario-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.comentario-head strong {
    font-size: 13.5px;
    color: #F4F4F8;
    font-weight: 500;
}
.comentario-head time {
    font-size: 11.5px;
    color: var(--text-secondary, #A0A0B8);
}
.comentario-del {
    margin-left: auto;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary, #A0A0B8);
    font-size: 16px;
    line-height: 1;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.comentario-item:hover .comentario-del { opacity: 0.7; }
.comentario-del:hover {
    opacity: 1 !important;
    background: rgba(220, 38, 38, 0.18);
    color: #FCA5A5;
}
.comentario-texto {
    margin: 0;
    /* Tipografía chica a propósito: el hilo de una orden junta muchos
       comentarios de sistema y la card no puede comerse la pantalla. */
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-primary, #F4F4F8);
    word-break: break-word;
}

.comentario-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
.comentario-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-primary, #F4F4F8);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    resize: vertical;
    min-height: 56px;
}
.comentario-form textarea:focus {
    outline: none;
    border-color: rgba(166, 77, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}
.comentario-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}
@media (max-width: 520px) {
    .comentario-form-actions { flex-wrap: wrap; }
}

/* --- Tabs de tipo (nota/alerta/pregunta) --- */
.comentario-tipo-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.comentario-tipo-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #CFCFEA;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.comentario-tipo-tab:hover { background: rgba(255, 255, 255, 0.06); }
.comentario-tipo-tab.is-active {
    background: rgba(166, 77, 255, 0.15);
    border-color: rgba(166, 77, 255, 0.45);
    color: #FFFFFF;
}
.comentario-tipo-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.comentario-tipo-dot[data-color="nota"]     { background: #A64DFF; }
.comentario-tipo-dot[data-color="alerta"]   { background: #EF4444; }
.comentario-tipo-dot[data-color="pregunta"] { background: #F59E0B; }

/* --- Editor (wrap con dropdown de menciones) --- */
.comentario-editor {
    position: relative;
}
.comentario-mencion-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    max-height: 280px;
    overflow-y: auto;
    background: #1E0038;
    border: 1px solid rgba(166, 77, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 20;
    padding: 4px;
}
.comentario-mencion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #F4F4F8;
    cursor: pointer;
    font-family: inherit;
}
.comentario-mencion-item:hover,
.comentario-mencion-item.is-highlighted {
    background: rgba(166, 77, 255, 0.18);
}
.comentario-mencion-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(166, 77, 255, 0.25);
    color: #F4F4F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
.comentario-mencion-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.comentario-mencion-text strong {
    font-size: 13px;
    font-weight: 500;
    color: #F4F4F8;
}
.comentario-mencion-text small {
    font-size: 11px;
    color: #A0A0B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comentario-mencion-empty {
    padding: 10px 12px;
    color: #A0A0B8;
    font-size: 12.5px;
}
.comentario-mention {
    color: #A64DFF;
    font-weight: 500;
    background: rgba(166, 77, 255, 0.08);
    padding: 1px 4px;
    border-radius: 4px;
}

/* --- Badges y variantes por tipo en las entradas --- */
.comentario-tipo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: 6px;
}
.comentario-tipo-badge--alerta   { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; border: 1px solid rgba(239, 68, 68, 0.35); }
.comentario-tipo-badge--pregunta { background: rgba(245, 158, 11, 0.18); color: #FCD34D; border: 1px solid rgba(245, 158, 11, 0.35); }
.comentario-item--alerta {
    background: rgba(239, 68, 68, 0.06);
    border-left: 3px solid rgba(239, 68, 68, 0.6);
    padding-left: 10px;
}
.comentario-item--pregunta {
    background: rgba(245, 158, 11, 0.05);
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    padding-left: 10px;
}
.comentario-item--sistema {
    background: rgba(77, 166, 255, 0.06);
    border-left: 3px solid rgba(77, 166, 255, 0.4);
    padding-left: 10px;
}
.comentario-item--sistema .comentario-avatar {
    background: rgba(77, 166, 255, 0.25);
    color: #4DA6FF;
}
.comentario-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.comentario-resolver {
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86EFAC;
    border-radius: 999px;
    font-size: 11.5px;
    cursor: pointer;
    transition: background 0.14s ease;
}
.comentario-resolver:hover { background: rgba(34, 197, 94, 0.25); }
.comentario-resuelto {
    font-size: 11.5px;
    color: #86EFAC;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.comentario-resuelto::before {
    content: '✓';
    font-weight: 700;
}

/* --- Indicadores de comentarios en la lista de órdenes --- */
.orden-indic {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}
.orden-indic--alerta {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.orden-indic--pregunta {
    background: rgba(245, 158, 11, 0.18);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.orden-indic--coment {
    background: rgba(166, 77, 255, 0.15);
    color: #D3B8FF;
    border: 1px solid rgba(166, 77, 255, 0.35);
}

/* ======================================================================
   Campanita global de notificaciones — labix-notifs.js
   ====================================================================== */
.labix-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #CFCFEA;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.labix-notif-btn:hover {
    background: rgba(166, 77, 255, 0.15);
    color: #FFFFFF;
}
.labix-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #2B004F;
}
.labix-notif-drawer .admin-drawer-panel {
    max-width: 420px;
}
.labix-notif-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.labix-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-decoration: none;
    color: #CFCFEA;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.labix-notif-item:hover {
    background: rgba(166, 77, 255, 0.1);
    border-color: rgba(166, 77, 255, 0.35);
}
.labix-notif-item--unread {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.25);
}
.labix-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
}
.labix-notif-item--unread .labix-notif-dot {
    background: #A64DFF;
    box-shadow: 0 0 6px rgba(166, 77, 255, 0.6);
}
.labix-notif-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.labix-notif-titulo {
    color: #F4F4F8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.labix-notif-mensaje {
    color: #CFCFEA;
    font-size: 12px;
    line-height: 1.4;
    font-style: italic;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.labix-notif-time {
    color: #A0A0B8;
    font-size: 11px;
}
@media (max-width: 520px) {
    .labix-notif-btn { width: 32px; height: 32px; }
}

/* ======================================================================
   Búsqueda global (⌘K) — assets/js/labix-search.js
   ====================================================================== */

/* Trigger icono (coherente con campanita de notifs) */
.labix-search-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #CFCFEA;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.labix-search-btn:hover {
    background: rgba(166, 77, 255, 0.15);
    border-color: rgba(166, 77, 255, 0.35);
    color: #FFFFFF;
}
@media (max-width: 520px) {
    .labix-search-btn { width: 32px; height: 32px; }
}

/* Drawer lateral (reutiliza .admin-drawer base) */
body.labix-search-open { overflow: hidden; }

.labix-search-drawer .admin-drawer-panel {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.labix-search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(166, 77, 255, 0.06), transparent);
}
.labix-search-icon { color: #e0c2ff; flex-shrink: 0; }
.labix-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #F4F4F8);
    font-size: 16px;
    font-family: inherit;
    padding: 4px 0;
}
.labix-search-input::placeholder {
    color: var(--text-secondary, #A0A0B8);
}
.labix-search-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #CFCFEA);
    font-size: 11px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.labix-search-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #F4F4F8;
}

.labix-search-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 16px;
}

.labix-search-hint-wrap {
    padding: 32px 20px;
    text-align: center;
}
.labix-search-hint {
    padding: 12px 0;
    color: var(--text-secondary, #A0A0B8);
    font-size: 13.5px;
    margin: 0;
}
.labix-search-tips {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #A0A0B8;
    font-size: 12.5px;
}
.labix-search-tips li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.labix-search-tips kbd {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    color: #CFCFEA;
}
.labix-search-empty { color: #FCD34D; }

.labix-search-group + .labix-search-group {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.labix-search-grouptitle {
    margin: 6px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #e0c2ff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.labix-search-grouptitle svg { color: #e0c2ff; }

.labix-search-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.labix-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary, #F4F4F8);
    transition: background 0.12s ease;
}
.labix-search-item.is-selected,
.labix-search-item:hover {
    background: rgba(166, 77, 255, 0.14);
}
.labix-search-item.is-selected {
    outline: 1px solid rgba(166, 77, 255, 0.4);
}
.labix-search-title {
    font-size: 14px;
    font-weight: 500;
    color: #F4F4F8;
}
.labix-search-meta {
    font-size: 12px;
    color: var(--text-secondary, #A0A0B8);
}

@media (max-width: 520px) {
    .labix-search-drawer .admin-drawer-panel {
        max-width: 100%;
    }
    .labix-search-input { font-size: 15px; }
}

/* ======================================================================
   Dashboard con KPIs (dashboard.php)
   ====================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 22px;
    margin-bottom: 18px;
}
@media (max-width: 960px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
/* Dentro de container--medium (cap ~880px) 4 cards en fila quedan apretadas.
   Forzar 2x2 — el viewport puede ser ancho pero el container manda. */
.admin-container--medium .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
}

.kpi-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 18px 16px;
    background: rgba(30, 0, 56, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary, #F4F4F8);
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at top left, rgba(255, 122, 24, 0.06), transparent 60%),
                radial-gradient(ellipse 80% 60% at bottom right, rgba(166, 77, 255, 0.08), transparent 55%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 77, 255, 0.3);
    background: rgba(30, 0, 56, 0.65);
}
.kpi-card:hover::before { opacity: 1; }
.kpi-card--primary {
    border-color: rgba(166, 77, 255, 0.25);
}
.kpi-card--attention {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.04);
}

.kpi-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.14), rgba(166, 77, 255, 0.18));
    border: 1px solid rgba(166, 77, 255, 0.22);
    color: #e0c2ff;
    position: relative;
    z-index: 1;
}
.kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}
.kpi-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary, #A0A0B8);
    font-weight: 500;
}
.kpi-value {
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.1;
    margin-top: 2px;
    background: linear-gradient(135deg, #FFFFFF 20%, #D9B3FF 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kpi-value--money { font-size: 22px; }
.kpi-sub {
    font-size: 12px;
    color: var(--text-secondary, #A0A0B8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.kpi-sub--warning { color: #FCD34D; font-weight: 500; }
.kpi-trend {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
}
.kpi-trend--up   { background: rgba(34, 197, 94, 0.15);  color: #86EFAC; }
.kpi-trend--down { background: rgba(220, 38, 38, 0.15);  color: #FCA5A5; }

/* Grid de 2 cols para secciones tipo "próximas entregas" + "urgentes" */
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 36px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .dash-grid-2 { grid-template-columns: 1fr; } }
.dash-grid-2 > .dash-panel { margin: 0; }

/* Lista simple tipo "inbox" */
.dash-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.dash-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dash-list-item:last-child { border-bottom: none; }
.dash-list-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    text-decoration: none;
    color: var(--text-primary, #F4F4F8);
    transition: background 0.15s ease;
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 12px;
    padding-right: 12px;
}
.dash-list-link:hover { background: rgba(255, 255, 255, 0.04); }
.dash-list-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.dash-list-main strong {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 14px;
    color: #e0c2ff;
}
.dash-list-sub {
    font-size: 13px;
    color: var(--text-secondary, #CFCFEA);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-list-aside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dash-list-date {
    font-size: 12px;
    color: var(--text-secondary, #A0A0B8);
    font-weight: 500;
}
@media (max-width: 520px) {
    .dash-list-aside { gap: 6px; }
    .dash-list-date  { font-size: 11px; }
}

/* Variante "rich" del ítem: 3 líneas (cabecera con #nº y estado, paciente
   destacado, meta con médico/prácticas) + columna lateral con ETA pill.
   Usada en "Próximas entregas" y "Órdenes urgentes" del dashboard. */
.dash-list-link--rich {
    align-items: flex-start;
    padding: 14px 8px;
    gap: 14px;
}
.dash-list-link--rich .dash-list-main {
    gap: 6px;
    overflow: hidden;
}
.dash-list-link--rich .dash-list-aside {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
}
.dash-list-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-list-row1 strong {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 13px;
    color: #e0c2ff;
}
.dash-list-row2 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-list-row2 .admin-row-strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.dash-list-row3 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.3;
}
.dash-list-meta-dim {
    color: var(--text-secondary);
    opacity: 0.72;
}
.dash-list-meta-sep {
    color: var(--text-secondary);
    opacity: 0.4;
}

/* Pill de tiempo (ETA / antigüedad). Color según urgencia. */
.dash-eta-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}
.dash-eta-pill--hoy {
    background: rgba(255, 122, 24, 0.18);
    color: #ffd1a8;
    border-color: rgba(255, 122, 24, 0.38);
}
.dash-eta-pill--manana {
    background: rgba(166, 77, 255, 0.16);
    color: #e0c2ff;
    border-color: rgba(166, 77, 255, 0.34);
}
.dash-eta-pill--lejos {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.14);
}
.dash-eta-pill--vencido {
    background: rgba(255, 61, 119, 0.18);
    color: #ff9ab8;
    border-color: rgba(255, 61, 119, 0.40);
}

/* Latido del icono de la card (ej.: "Órdenes urgentes" cuando hay activas). */
.card-heading-icon--pulse {
    animation: card-icon-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 6px 18px rgba(255, 61, 119, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 61, 119, 0.42);
    color: #ffb3cf;
}
@keyframes card-icon-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 18px rgba(255, 61, 119, 0.28),
                    0 0 0 0 rgba(255, 61, 119, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 6px 18px rgba(255, 61, 119, 0.28),
                    0 0 0 8px rgba(255, 61, 119, 0),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    .card-heading-icon--pulse { animation: none; }
}

/* ======================================================================
   Superadmin · Empresas (CRUD de laboratorios de la plataforma)
   ====================================================================== */

/* KPI con valor más chico (para fechas y similares que no caben en 28px) */
.kpi-value--small {
    font-size: 16px !important;
    font-weight: 500 !important;
    background: none !important;
    -webkit-text-fill-color: #F4F4F8 !important;
    color: #F4F4F8 !important;
}

/* Caja informativa dentro del form de alta */
.admin-help-box {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(166, 77, 255, 0.08);
    border: 1px solid rgba(166, 77, 255, 0.22);
    border-radius: 10px;
    color: var(--text-secondary, #CFCFEA);
    font-size: 13px;
    line-height: 1.5;
}
.admin-help-box p { margin: 0; }
.admin-help-box strong { color: var(--text-primary, #F4F4F8); }

/* Modal de éxito tras crear empresa (con password temporal) */
.emp-success-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.emp-success-modal[hidden] { display: none; }
.emp-success-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 0, 22, 0.70);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: drawerFadeIn 0.25s ease both;
}
.emp-success-panel {
    position: relative;
    width: min(540px, 100%);
    background: linear-gradient(180deg, rgba(40, 0, 70, 0.95), rgba(20, 0, 40, 0.95));
    border: 1px solid rgba(166, 77, 255, 0.30);
    border-radius: 18px;
    padding: 32px 28px 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    animation: drawerFadeIn 0.3s ease both;
}
.emp-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(38, 218, 144, 0.20), rgba(38, 218, 144, 0.06));
    border: 1px solid rgba(38, 218, 144, 0.40);
    color: #6FE8B0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.emp-success-panel h2 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 6px;
    color: var(--text-primary, #F4F4F8);
}
.emp-success-sub {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #CFCFEA);
    margin: 0 0 20px;
    line-height: 1.5;
}
.emp-success-kv { margin-bottom: 18px; }
.emp-success-pass {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(166, 77, 255, 0.30);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    color: #E0C2FF;
    letter-spacing: 1.5px;
    margin-right: 8px;
    user-select: all;
}
.emp-success-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Punto de color del tipo de turno (preview del dashboard) */
.dash-tipo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.dash-muted-inline {
    color: var(--text-muted, #8A8AA8);
    font-weight: 400;
}
.dash-link-inline {
    color: var(--brand-violet-light, #C49AFF);
    text-decoration: underline;
    text-decoration-color: rgba(196, 154, 255, 0.4);
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.dash-link-inline:hover { color: #E4CFFF; }

/* Accesos rápidos (grid de tiles con ícono) */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    /* Alto FIJO para todas las filas — así TODAS las cards tienen idéntico alto
       sin importar si el label entra en 1 o 2 líneas. Es el único selector
       que garantiza consistencia visual cross-row en CSS Grid. */
    grid-auto-rows: 72px;
    gap: 10px;
}
.dash-quick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    height: 100%;            /* ocupa toda la celda del grid (72px) */
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary, #F4F4F8);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.dash-quick:hover {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.3);
    transform: translateY(-1px);
}
.dash-quick svg {
    color: #e0c2ff;
    flex-shrink: 0;
}
.dash-quick > span {
    min-width: 0;
}

/* ======================================================================
   Auditoría (admin/auditoria/index.php)
   ====================================================================== */
.aud-table {
    font-size: 12.5px;
}
.aud-table th,
.aud-table td {
    padding: 10px 10px;
    vertical-align: top;
}
.aud-table code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 11.5px;
    color: #e0c2ff;
}
.aud-detalle {
    max-width: 280px;
    font-size: 12px;
    color: var(--text-secondary, #CFCFEA);
    word-break: break-word;
}
/* Filas clickeables (abren drawer con detalle) */
.aud-table tr.aud-row {
    cursor: pointer;
    transition: background 0.12s ease;
}
.aud-table tr.aud-row:hover {
    background: rgba(166, 77, 255, 0.06);
}
/* Detalle del evento dentro del drawer */
.aud-kv {
    margin-bottom: 18px;
}
.aud-detalle-h {
    margin: 18px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #A0A0B8);
    font-weight: 600;
}
.aud-detalle-pre {
    margin: 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: #e0c2ff;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 380px;
    overflow-y: auto;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 520px) {
    .admin-pagination { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ======================================================================
   Mi cuenta — hub (admin/mi-cuenta/index.php)
   ====================================================================== */

.mi-cuenta-grid {
    display: grid;
    /* 2 columnas fijas → con 4 cards quedan en 2x2. En mobile colapsa a 1. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    margin-bottom: 24px;
}
@media (max-width: 760px) {
    .mi-cuenta-grid { grid-template-columns: 1fr; }
}
.mi-cuenta-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(30, 0, 56, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary, #F4F4F8);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mi-cuenta-card:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 77, 255, 0.35);
    background: rgba(30, 0, 56, 0.65);
}
.mi-cuenta-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.16), rgba(166, 77, 255, 0.22));
    border: 1px solid rgba(166, 77, 255, 0.28);
    color: #e0c2ff;
}
.mi-cuenta-body {
    flex: 1;
    min-width: 0;
}
.mi-cuenta-body h3 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 4px;
    color: #F4F4F8;
    letter-spacing: -0.1px;
}
.mi-cuenta-body p {
    font-size: 13px;
    color: var(--text-secondary, #A0A0B8);
    line-height: 1.5;
    margin: 0;
}
.mi-cuenta-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    background: rgba(166, 77, 255, 0.18);
    color: #e0c2ff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.mi-cuenta-chevron {
    color: var(--text-secondary, #A0A0B8);
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.15s ease, color 0.15s ease;
}
.mi-cuenta-card:hover .mi-cuenta-chevron {
    color: #e0c2ff;
    transform: translateX(3px);
}

/* ======================================================================
   Sesiones activas (admin/mi-cuenta/sesiones.php)
   ====================================================================== */

.ses-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 10px;
}
.ses-item:last-child { margin-bottom: 0; }
.ses-item.is-current {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.04);
}
.ses-item-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(166, 77, 255, 0.12);
    border: 1px solid rgba(166, 77, 255, 0.22);
    color: #e0c2ff;
}
.ses-item.is-current .ses-item-icon {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86EFAC;
}
.ses-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ses-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #F4F4F8;
}
.ses-item-title strong { font-weight: 500; }
/* "Esta sesión" como indicador final del item (mismo slot que el botón
   Cerrar — son mutuamente excluyentes: la sesión actual no se cierra a
   sí misma). Padding más generoso que un badge inline normal para que
   alinee visualmente con btn-sm de las otras filas. */
.ses-item-current-pill {
    padding: 6px 12px;
    font-size: 12px;
    flex-shrink: 0;
    align-self: center;
}
.ses-item-meta {
    font-size: 12px;
    color: var(--text-secondary, #A0A0B8);
    line-height: 1.5;
    word-break: break-word;
}

@media (max-width: 520px) {
    .ses-item { flex-wrap: wrap; }
    .ses-item [data-cerrar] { width: 100%; margin-top: 6px; }
}

/* ======================================================================
   Categorías de prácticas (admin/practicas-categorias/index.php)
   ====================================================================== */

.cat-group {
    margin-bottom: 18px;
}
.cat-group:last-child { margin-bottom: 0; }

.cat-group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #E8E8F4;
    border: 1px solid rgba(166, 77, 255, 0.35);
    background: rgba(166, 77, 255, 0.12);
    margin-bottom: 10px;
}
.cat-group-count {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: #E8E8F4;
}

.cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.cat-item:hover {
    background: rgba(166, 77, 255, 0.08);
    border-color: rgba(166, 77, 255, 0.3);
    transform: translateX(2px);
}
.cat-item.is-inactive {
    opacity: 0.55;
}
.cat-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.cat-item-main strong {
    font-weight: 500;
    color: #F4F4F8;
    font-size: 14.5px;
}
.cat-item-meta {
    font-size: 12px;
    color: var(--text-secondary, #A0A0B8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-item-chevron {
    color: var(--text-secondary, #A0A0B8);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}
.cat-item:hover .cat-item-chevron {
    color: #e0c2ff;
    transform: translateX(2px);
}

/* ======================================================================
   Preview del logo del laboratorio (admin/laboratorio/index.php)
   ====================================================================== */
/* El logo actual y la zona para subir uno nuevo van lado a lado; en pantallas
   angostas (o cuando falta uno de los dos) cada bloque toma el ancho completo. */
.lab-logo-grid {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
}
.lab-logo-grid > .lab-logo-preview {
    flex: 1 1 300px;
    margin-top: 0;
}
.lab-logo-grid > .adj-dropzone {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.lab-logo-preview {
    margin-top: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.lab-logo-preview img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 6px;
    flex-shrink: 0;
}
.lab-logo-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.lab-logo-info strong {
    /* var (y no un hex fijo) para que el texto siga siendo legible en los
       themes claros — con #E8E8F4 quedaba blanco sobre fondo blanco. */
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}
.lab-logo-info .dash-muted {
    font-size: 12.5px;
    line-height: 1.45;
}
/* Feedback mientras el archivo se está subiendo (lo activa laboratorio.js). */
.adj-dropzone.is-uploading {
    opacity: 0.55;
    pointer-events: none;
    cursor: progress;
}
@media (max-width: 480px) {
    .lab-logo-preview { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ======================================================================
   Plantilla de email custom (admin/laboratorio/index.php)
   ====================================================================== */
.mail-vars-box {
    margin-top: 6px;
    padding: 12px 14px;
    background: rgba(166, 77, 255, 0.08);
    border: 1px dashed rgba(166, 77, 255, 0.3);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #CFCFEA;
}
.mail-vars-box strong {
    color: #E8E8F4;
    font-weight: 500;
    margin-right: 4px;
}
.mail-var {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #A64DFF;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    user-select: all;
}
.mail-var:hover {
    background: rgba(166, 77, 255, 0.15);
    border-color: rgba(166, 77, 255, 0.4);
}

.mail-preview-wrap {
    margin-top: 16px;
}
.mail-preview-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #A0A0B8;
}
.mail-preview {
    background: #1E0038;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.mail-preview-subject {
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13.5px;
    font-weight: 500;
    color: #E8E8F4;
}
.mail-preview-body {
    padding: 22px 22px 20px;
}
.mail-preview-saludo {
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 12px;
}
.mail-preview-cuerpo {
    font-size: 14px;
    line-height: 1.6;
    color: #CFCFEA;
    margin-bottom: 20px;
}
.mail-preview-btn {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(90deg,#FF7A18 0%,#FF3D77 35%,#A64DFF 70%,#4DA6FF 100%);
    color: #fff;
    border-radius: 999px;
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0.3px;
}
#e-mail-cuerpo {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* ======================================================================
   Drawer "Compartir con paciente" (admin/ordenes/ver.php)
   ====================================================================== */

.admin-drawer-panel--wide {
    width: min(680px, 100%);
}

/* Ritmo del drawer de compartir. Entra todo de una: el enlace, los envíos y
   la lista de lo ya generado — si hay que scrollear para ver los botones de
   enviar, el flujo se corta a la mitad. */
.compartir-intro {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
#compartir-drawer .admin-form-subheading { margin: 4px 0 10px; }
/* Las ayudas son <p>: sin esto arrastran el margen inferior del browser
   (~12px) y se suman al gap del formulario. */
#compartir-drawer .field-hint { margin-top: 3px; margin-bottom: 0; }
#compartir-drawer .quick-fill-pills { margin-top: 4px; }

/* El aire de este drawer sale de CUATRO lugares que se suman: el gap del
   .admin-drawer-body (flex column), el margen de cada bloque, el margen de
   la sección y el margen que el browser le pone a cada <p>. Ajustar uno solo
   no se nota — por eso van todos juntos. */
#compartir-drawer .admin-drawer-body {
    gap: 6px;
    padding: 16px 24px 24px;
}
#compartir-drawer .compartir-section { margin-top: 6px; }
#compartir-drawer .compartir-section + .compartir-section {
    margin-top: 10px;
    padding-top: 10px;
}
#compartir-drawer .compartir-intro { margin-bottom: 6px; }
#compartir-drawer .compartir-aviso-borrador { margin-bottom: 8px; }
/* Las pills entraban en dos renglones y estiraban la columna derecha, que es
   la que le marca el alto a toda la fila. En uno solo, el formulario entero
   sube. */
#compartir-drawer .quick-fill-pill { padding: 2px 7px; font-size: 10.5px; }
#compartir-drawer .quick-fill-pills { gap: 4px; }
#compartir-drawer .admin-form-actions .btn { min-height: 38px; }
/* .auth-form separa sus hijos 16px y encima .admin-form-actions suma otros 8:
   entre el formulario y los botones quedaban 24px de nada. */
#compartir-drawer .auth-form { gap: 10px; }
#compartir-drawer .admin-form-actions { margin-top: 0; }
/* Los <p> de "cargando" / "no hay enlaces" traen el margen del browser. */
#compartir-drawer .compartir-lista > p { margin: 0; }

.compartir-section {
    margin-top: 14px;
}
.compartir-section + .compartir-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.compartir-section-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent-2, #FF3D77);
}

.compartir-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 12px;
    align-items: start;
}
@media (max-width: 640px) {
    .compartir-form-grid { grid-template-columns: 1fr; }
}

.compartir-resultado {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(166, 77, 255, 0.3);
    background: rgba(166, 77, 255, 0.06);
    border-radius: 12px;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.compartir-resultado-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: center;
}
@media (max-width: 480px) {
    .compartir-resultado-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

.compartir-qr {
    width: 140px;
    height: 140px;
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compartir-qr svg { width: 100%; height: 100%; display: block; }

.compartir-url-block { min-width: 0; }
.compartir-url-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted, #A0A0B8);
    margin-bottom: 6px;
}
.compartir-url-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #E8E8F4;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
    box-sizing: border-box;
}
.compartir-url-input:focus {
    outline: none;
    border-color: var(--accent-3, #A64DFF);
    box-shadow: 0 0 0 3px rgba(166, 77, 255, 0.15);
}
.compartir-url-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.compartir-url-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted, #A0A0B8);
}

/* Fila de envío al paciente */
.compartir-envio-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(166, 77, 255, 0.18);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.compartir-envio-label {
    font-size: 11.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted, #A0A0B8);
    font-weight: 500;
}
.compartir-envio-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.compartir-envio-hint {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--muted, #A0A0B8);
    font-style: italic;
    line-height: 1.5;
}

/* Botón de canal (email/whatsapp/push) */
.btn-envio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #E8E8F4;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn-envio:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.btn-envio svg { flex-shrink: 0; }
.btn-envio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-envio[data-loading="true"] {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}
.btn-envio[data-loading="true"] .btn-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 4px;
}

.btn-envio-email {
    border-color: rgba(77, 166, 255, 0.5);
    background: rgba(77, 166, 255, 0.1);
}
.btn-envio-email:hover:not(:disabled) {
    background: rgba(77, 166, 255, 0.18);
    border-color: rgba(77, 166, 255, 0.7);
}

.btn-envio-whatsapp {
    border-color: rgba(37, 211, 102, 0.55);
    background: rgba(37, 211, 102, 0.12);
    color: #D1FAE5;
}
.btn-envio-whatsapp:hover:not(:disabled) {
    background: rgba(37, 211, 102, 0.22);
    border-color: rgba(37, 211, 102, 0.75);
}
.btn-envio-whatsapp svg { color: #25D366; }

.btn-envio-push {
    position: relative;
}
.btn-envio-tag {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted, #A0A0B8);
    margin-left: 2px;
}

/* Historial de envíos dentro de cada card de link */
.compartir-envios-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.compartir-envios-list li {
    font-size: 12.5px;
    line-height: 1.5;
    color: #C7C7D4;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(166, 77, 255, 0.4);
    border-radius: 4px;
}
.compartir-envios-list li strong { color: #E8E8F4; font-weight: 500; }
.compartir-envios-list li.compartir-envio-fallo {
    border-left-color: rgba(220, 38, 38, 0.6);
    background: rgba(220, 38, 38, 0.06);
}
.compartir-envios-list li.compartir-envio-fallo em {
    color: #FCA5A5;
    font-style: normal;
    font-weight: 500;
}
.compartir-envio-icon {
    display: inline-block;
    margin-right: 2px;
    filter: grayscale(0.2);
}

/* Lista de enlaces */
.compartir-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compartir-item {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.compartir-item--activo   { border-color: rgba(34, 197, 94, 0.25); }
.compartir-item--vencido  { opacity: 0.75; }
.compartir-item--revocado { opacity: 0.75; }

/* Header: chip de estado + fecha de creación */
.compartir-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compartir-item-creado {
    font-size: 12.5px;
    color: var(--muted, #A0A0B8);
    line-height: 1.4;
}
.compartir-item-creado strong { color: #E8E8F4; font-weight: 500; }

/* Grid de metadata: dt label uppercase, dd valor */
.compartir-item-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px 16px;
    margin: 0;
    align-items: baseline;
}
.compartir-item-grid dt {
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted, #A0A0B8);
    font-weight: 500;
    padding-top: 2px;
}
.compartir-item-grid dd {
    margin: 0;
    font-size: 13px;
    color: #E8E8F4;
    line-height: 1.5;
    word-break: break-word;
}
.compartir-item-grid dd strong { font-weight: 600; color: #fff; }

.compartir-meta-muted { color: var(--muted, #A0A0B8); font-style: italic; }

/* Chip de estado */
.compartir-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.compartir-chip.chip-ok     { background: rgba(34, 197, 94, 0.18);  color: #86EFAC; border: 1px solid rgba(34, 197, 94, 0.35); }
.compartir-chip.chip-warn   { background: rgba(245, 158, 11, 0.18); color: #FCD34D; border: 1px solid rgba(245, 158, 11, 0.35); }
.compartir-chip.chip-danger { background: rgba(220, 38, 38, 0.18);  color: #FCA5A5; border: 1px solid rgba(220, 38, 38, 0.35); }
.compartir-chip.chip-muted  { background: rgba(255, 255, 255, 0.06); color: #A0A0B8; border: 1px solid rgba(255, 255, 255, 0.1); }

/* Bloque de revocación */
.compartir-revoc-info {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(220, 38, 38, 0.09);
    border-left: 3px solid rgba(220, 38, 38, 0.55);
    border-radius: 6px;
    font-size: 12.5px;
    color: #FCA5A5;
    line-height: 1.5;
}
.compartir-revoc-info strong { color: #FECACA; }
.compartir-revoc-info em { font-style: normal; color: #FCA5A5; opacity: 0.85; }

/* Footer: prefix + botón Revocar */
/* Header de "Enlaces generados": el título y, si hay basura, el botón para
   limpiarla. El subheading trae su propio margen, así que acá se anula para
   que no descuelgue el botón. */
.compartir-lista-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.compartir-lista-head .admin-form-subheading { margin-bottom: 0; }

/* La × que saca el enlace de la lista. Mismo lenguaje que la × de las
   prácticas: apagada hasta que pasás por la tarjeta. */
.compartir-borrar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-secondary, #6B7280);
    opacity: .45;
    cursor: pointer;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.compartir-item:hover .compartir-borrar { opacity: 1; }
.compartir-borrar:hover,
.compartir-borrar:focus-visible {
    opacity: 1;
    color: #DC2626;
    background: color-mix(in srgb, #DC2626 12%, transparent);
}
.compartir-borrar:focus-visible {
    outline: 2px solid color-mix(in srgb, #DC2626 55%, transparent);
    outline-offset: 1px;
}
/* En touch no hay hover: la × se ve siempre. */
@media (hover: none) {
    .compartir-borrar { opacity: .8; }
}

/* El prefix se queda con el espacio libre para que Revocar y la × queden
   juntos a la derecha, en vez de repartidos por el space-between. */
.compartir-item-footer .compartir-prefix { margin-right: auto; }

.compartir-item-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.compartir-prefix {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: #9898B0;
    letter-spacing: 0.3px;
}

@media (max-width: 520px) {
    .compartir-item-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .compartir-item-grid dt { padding-top: 6px; }
    .compartir-item-grid dd { padding-left: 0; }
}

/* =======================================================================
 * REPORTES — Dashboard ejecutivo + detalle
 * ======================================================================= */

/* ----- Barra de filtro de período (pills + custom range) -------------- */
.admin-periodo-bar {
    margin: 22px 0 28px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(155, 92, 246, 0.08), rgba(249, 115, 22, 0.05));
    border: 1px solid rgba(155, 92, 246, 0.18);
    box-shadow: 0 2px 20px rgba(43, 0, 79, 0.12);
}
.admin-periodo-bar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.admin-periodo-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.admin-periodo-label svg { color: #9B5CF6; }
.admin-periodo-pills {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.admin-periodo-pill {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}
.admin-periodo-pill:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.05);
}
.admin-periodo-pill.is-active {
    background: linear-gradient(135deg, #9B5CF6, #F97316);
    color: #FFF;
    box-shadow: 0 4px 14px rgba(155, 92, 246, 0.35);
}
.admin-periodo-custom {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
/* Cuando "Personalizado" está activo, el bloque custom toma una fila propia
   debajo (sino se aplasta todo en la misma línea con pills + summary). */
.admin-periodo-custom:not([hidden]) {
    display: flex;
    flex-basis: 100%;
    width: 100%;
    order: 10;          /* va al final del flex; los demás (label/pills/summary/actions) quedan default 0 */
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px dashed rgba(155, 92, 246, 0.20);
}
.admin-periodo-custom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-periodo-custom-field > span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}
.admin-periodo-custom-field .admin-input {
    width: 150px;
    padding: 8px 12px;
    font-size: 13px;
}
.admin-periodo-summary {
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.admin-periodo-summary-label {
    font-size: 13.5px;
    color: #FFF;
    font-weight: 500;
}
.admin-periodo-summary-dur {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
}
@media (max-width: 760px) {
    .admin-periodo-bar-inner { gap: 12px; }
    .admin-periodo-summary { margin-left: 0; width: 100%; align-items: flex-start; }
    .admin-periodo-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .admin-periodo-pill { white-space: nowrap; }
}

/* ----- Grid de KPIs top ---------------------------------------------- */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}
.admin-kpi-card {
    position: relative;
    overflow: hidden;
    padding: 20px 22px 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    min-height: 160px;
}
.admin-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(155, 92, 246, 0.35);
    box-shadow: 0 10px 30px rgba(43, 0, 79, 0.25);
}
.admin-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9B5CF6, #F97316);
    opacity: 0.6;
}
.admin-kpi-card[data-kpi-tone="orange"]::before { background: linear-gradient(90deg, #F97316, #EC4899); }
.admin-kpi-card[data-kpi-tone="pink"]::before   { background: linear-gradient(90deg, #EC4899, #9B5CF6); }
.admin-kpi-card[data-kpi-tone="cyan"]::before   { background: linear-gradient(90deg, #22D3EE, #9B5CF6); }
.admin-kpi-card[data-kpi-tone="green"]::before  { background: linear-gradient(90deg, #22C55E, #22D3EE); }

.admin-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.admin-kpi-title {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin: 0;
}
.admin-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(155, 92, 246, 0.15);
    color: #9B5CF6;
}
.admin-kpi-icon[data-tone="orange"] { background: rgba(249, 115, 22, 0.15); color: #F97316; }
.admin-kpi-icon[data-tone="pink"]   { background: rgba(236, 72, 153, 0.15); color: #EC4899; }
.admin-kpi-icon[data-tone="cyan"]   { background: rgba(34, 211, 238, 0.15); color: #22D3EE; }
.admin-kpi-icon[data-tone="green"]  { background: rgba(34, 197, 94, 0.15); color: #22C55E; }

.admin-kpi-value {
    font-size: 34px;
    font-weight: 300;
    letter-spacing: -0.5px;
    color: #FFF;
    line-height: 1.1;
    margin: 0 0 6px;
    font-family: 'Montserrat', 'Inter', sans-serif;
}
.admin-kpi-value .admin-kpi-unit {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
    font-weight: 300;
}

.admin-kpi-tend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
}
.admin-kpi-tend[data-tend="up"]   { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
.admin-kpi-tend[data-tend="down"] { background: rgba(239, 68, 68, 0.15); color: #F87171; }
.admin-kpi-tend svg { width: 12px; height: 12px; }

.admin-kpi-footer {
    position: absolute;
    bottom: 14px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.admin-kpi-sparkline {
    height: 36px;
    flex: 1;
    position: relative;
    min-width: 0;
}
.admin-kpi-prev {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* ----- Gráfico hero (serie temporal grande) -------------------------- */
.admin-chart-hero {
    position: relative;
    padding: 22px 24px 10px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(155, 92, 246, 0.04), rgba(0, 0, 0, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0 0 28px;
}
.admin-chart-hero-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.admin-chart-hero-titles h3 {
    margin: 0 0 4px;
    font-size: 16.5px;
    font-weight: 500;
    color: #FFF;
}
.admin-chart-hero-titles p {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}
.admin-chart-hero-toggle {
    display: inline-flex;
    padding: 3px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.admin-chart-hero-toggle button {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-chart-hero-toggle button.is-active {
    background: linear-gradient(135deg, #9B5CF6, #F97316);
    color: #FFF;
}
.admin-chart-hero-canvas-wrap {
    position: relative;
    height: 320px;
}
.admin-chart-hero-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

/* ----- Mini-rankings ------------------------------------------------- */
.admin-rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}
.admin-rank-card {
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-rank-card h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-rank-card h4 a {
    font-size: 11.5px;
    color: #9B5CF6;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    text-decoration: none;
}
.admin-rank-card h4 a:hover { color: #B985F7; text-decoration: underline; }
.admin-rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-rank-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.admin-rank-item:last-child { border-bottom: 0; }
.admin-rank-pos {
    font-size: 17px;
    font-weight: 300;
    color: #9B5CF6;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.admin-rank-item:nth-child(1) .admin-rank-pos { color: #F97316; font-weight: 500; }
.admin-rank-item:nth-child(2) .admin-rank-pos { color: #EC4899; }
.admin-rank-item:nth-child(3) .admin-rank-pos { color: #22D3EE; }
.admin-rank-name {
    font-size: 13.5px;
    color: #FFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-rank-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.admin-rank-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.5px;
    padding: 12px 0;
    text-align: center;
}

/* ----- Heatmap semanal horas pico ------------------------------------ */
.admin-heatmap {
    padding: 20px 22px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0 0 28px;
}
.admin-heatmap h3 {
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.admin-heatmap-grid {
    display: grid;
    grid-template-columns: 50px repeat(24, 1fr);
    gap: 3px;
}
.admin-heatmap-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 0;
    text-align: right;
    padding-right: 8px;
}
.admin-heatmap-hour {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}
.admin-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(155, 92, 246, 0.05);
    transition: transform 0.15s ease;
    cursor: default;
}
.admin-heatmap-cell:hover { transform: scale(1.35); z-index: 2; position: relative; }
.admin-heatmap-cell[data-intensity="0"] { background: rgba(255, 255, 255, 0.02); }
.admin-heatmap-cell[data-intensity="1"] { background: rgba(155, 92, 246, 0.15); }
.admin-heatmap-cell[data-intensity="2"] { background: rgba(155, 92, 246, 0.35); }
.admin-heatmap-cell[data-intensity="3"] { background: rgba(155, 92, 246, 0.6); }
.admin-heatmap-cell[data-intensity="4"] { background: linear-gradient(135deg, #9B5CF6, #F97316); }

@media (max-width: 640px) {
    .admin-heatmap-grid { grid-template-columns: 40px repeat(24, 1fr); gap: 2px; }
    .admin-heatmap-hour { display: none; }
}

/* ----- Panel de alertas --------------------------------------------- */
.admin-alerta-panel {
    padding: 18px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(239, 68, 68, 0.18);
    margin: 0 0 28px;
}
.admin-alerta-panel h3 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #FCA5A5;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.admin-alerta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
}
.admin-alerta-row:last-child { border-bottom: 0; }
.admin-alerta-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
}
.admin-alerta-icon[data-tone="warn"] { background: rgba(245, 158, 11, 0.15); color: #FCD34D; }
.admin-alerta-row a {
    margin-left: auto;
    font-size: 12.5px;
    color: #9B5CF6;
    text-decoration: none;
    white-space: nowrap;
}
.admin-alerta-row a:hover { color: #B985F7; text-decoration: underline; }
.admin-alerta-empty {
    padding: 14px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

/* ----- Export toolbar ------------------------------------------------ */
.admin-export-bar {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.admin-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
    text-decoration: none;
}
.admin-export-btn:hover {
    background: rgba(155, 92, 246, 0.12);
    border-color: rgba(155, 92, 246, 0.4);
    color: #FFF;
}
.admin-export-btn svg { width: 14px; height: 14px; }
.admin-chart-hero-canvas-wrap canvas { cursor: pointer; }

/* ----- Acciones (compartir / imprimir) en la barra de período ------- */
.admin-periodo-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.admin-periodo-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(155, 92, 246, 0.3);
    background: rgba(155, 92, 246, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.admin-periodo-action:hover {
    background: rgba(155, 92, 246, 0.18);
    border-color: rgba(155, 92, 246, 0.55);
    color: #FFF;
}
.admin-periodo-action:active { transform: scale(0.96); }
.admin-periodo-action svg { color: #9B5CF6; }

/* ----- Toast (feedback compartir enlace) ---------------------------- */
.labix-reportes-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 20px);
    opacity: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #2B004F, #3D0D66);
    color: #FFF;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(155, 92, 246, 0.45);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(155, 92, 246, 0.15);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    pointer-events: none;
}
.labix-reportes-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.labix-reportes-toast.is-error {
    background: linear-gradient(135deg, #991B1B, #B91C1C);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ============================================================
 * PRINT STYLESHEET — reportes imprimibles limpios
 * ============================================================ */
@media print {
    /* Ocultar todo lo que no sea contenido del reporte */
    .dash-header,
    .bg-blobs,
    .admin-drawer,
    .admin-drawer-backdrop,
    .admin-hero-actions,
    .admin-periodo-actions,
    .admin-export-bar,
    .help-btn,
    .admin-hero-breadcrumb a,
    .admin-chart-hero-toggle,
    .admin-alerta-panel a {
        display: none !important;
    }

    /* Fondo blanco, texto oscuro — contraste para papel */
    html, body, .dash-body, .dash-main {
        background: #FFF !important;
        color: #222 !important;
    }
    .dash-main { padding: 0 !important; }

    /* Hero sin gradiente, solo título */
    .admin-hero {
        background: transparent !important;
        border: 0 !important;
        padding: 12px 0 16px !important;
        box-shadow: none !important;
    }
    .admin-hero-bg { display: none !important; }
    .admin-hero-title { color: #111 !important; font-size: 22px !important; }
    .admin-hero-sub { color: #555 !important; font-size: 12px !important; }
    .admin-hero-icon { background: #EEE !important; color: #333 !important; }
    .admin-hero-breadcrumb { color: #666 !important; font-size: 11px !important; }
    .admin-hero-crumb-current { color: #111 !important; }

    /* Barra de período → mostrar el label pero sin pills */
    .admin-periodo-bar {
        background: #F6F4FB !important;
        border: 1px solid #DCD0E5 !important;
        box-shadow: none !important;
        margin-bottom: 16px !important;
        padding: 10px 14px !important;
    }
    .admin-periodo-pills,
    .admin-periodo-custom { display: none !important; }
    .admin-periodo-label,
    .admin-periodo-summary-label,
    .admin-periodo-summary-dur { color: #333 !important; }

    /* KPIs sin shadows, con borders */
    .admin-kpi-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
    .admin-kpi-card {
        background: #FFF !important;
        border: 1px solid #DDD !important;
        box-shadow: none !important;
        padding: 14px 16px 40px !important;
        min-height: 120px !important;
        page-break-inside: avoid;
    }
    .admin-kpi-card::before { opacity: 1 !important; }
    .admin-kpi-title { color: #555 !important; }
    .admin-kpi-value { color: #111 !important; font-size: 24px !important; }
    .admin-kpi-value .admin-kpi-unit { color: #777 !important; font-size: 13px !important; }
    .admin-kpi-prev { color: #666 !important; }
    .admin-kpi-tend {
        background: #F0F0F0 !important;
        color: #222 !important;
    }
    .admin-kpi-tend[data-tend="up"]   { background: #DCFCE7 !important; color: #166534 !important; }
    .admin-kpi-tend[data-tend="down"] { background: #FEE2E2 !important; color: #991B1B !important; }

    /* Cards / paneles */
    .dash-panel,
    .admin-panel,
    .admin-form-panel,
    .admin-chart-hero,
    .admin-rank-card,
    .admin-heatmap {
        background: #FFF !important;
        border: 1px solid #E0E0E0 !important;
        box-shadow: none !important;
        color: #222 !important;
        page-break-inside: avoid;
        margin-bottom: 14px !important;
    }
    .card-heading-title,
    .admin-chart-hero-titles h3,
    .admin-rank-card h4 { color: #111 !important; }
    .card-heading-sub,
    .admin-chart-hero-titles p { color: #666 !important; }
    .card-heading-icon { background: #EEE !important; color: #444 !important; }

    /* Tablas */
    .admin-table {
        background: #FFF !important;
        color: #222 !important;
        border-collapse: collapse !important;
    }
    .admin-table th,
    .admin-table td {
        border: 1px solid #E0E0E0 !important;
        color: #222 !important;
    }
    .admin-table th {
        background: #F5F5F5 !important;
        color: #333 !important;
    }
    .admin-table a { color: #2B004F !important; text-decoration: none !important; }

    /* Rankings */
    .admin-rank-item { border-bottom: 1px solid #EEE !important; }
    .admin-rank-name { color: #111 !important; }
    .admin-rank-value { color: #444 !important; }

    /* Heatmap — mantener los colores de intensidad */
    .admin-heatmap-label,
    .admin-heatmap-hour { color: #555 !important; }

    /* Charts — permitir que se impriman */
    canvas { page-break-inside: avoid; }

    /* Toast no debe aparecer al imprimir */
    .labix-reportes-toast { display: none !important; }

    /* Eliminar cursor:pointer */
    .admin-chart-hero-canvas-wrap canvas { cursor: default !important; }

    /* Saltos de página entre grandes bloques */
    .admin-chart-hero,
    .admin-heatmap { page-break-after: auto; }
}

/* =======================================================================
 * IA — Escanear PDF de laboratorio externo (drawer en admin/ordenes/ver.php)
 * ======================================================================= */

/* ----- .admin-input como clase global (faltaba en el sistema) --------- */
.admin-input {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text-primary, #FFFFFF);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 13px 14px;
    width: 100%;
    outline: none;
    color-scheme: dark;   /* fuerza widgets nativos (date picker, autofill, etc.) en dark */
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.admin-input:focus,
.admin-input:focus-visible {
    border-color: rgba(166, 77, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(166, 77, 255, 0.18);
}
.admin-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Autofill del browser (override del amarillo) */
.admin-input:-webkit-autofill {
    -webkit-text-fill-color: #FFF;
    -webkit-box-shadow: 0 0 0 1000px rgba(43, 0, 79, 0.85) inset;
    caret-color: #FFF;
}

/* ----- Fix: options de <select> en Windows usan tema del SO por default.
 *        color-scheme: dark fuerza al browser a usar su renderer dark.        */
.admin-select,
.admin-input {
    color-scheme: dark;
}
.admin-select option,
.admin-select optgroup {
    background-color: #1E0038;
    color: #FFFFFF;
}
.admin-select optgroup {
    font-weight: 600;
    color: #B985F7;
    font-style: normal;
}

.admin-drawer-panel-wide { width: min(760px, 96vw) !important; }

.admin-spinner {
    width: 42px; height: 42px;
    border: 3px solid rgba(155, 92, 246, 0.2);
    border-top-color: #9B5CF6;
    border-radius: 50%;
    animation: labix-spin 0.8s linear infinite;
}
@keyframes labix-spin { to { transform: rotate(360deg); } }

.adj-dropzone.is-dragover {
    border-color: #9B5CF6 !important;
    background: rgba(155, 92, 246, 0.08) !important;
}

.admin-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---------- Header de resultado: meta grid ---------- */
.scan-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 16px;
    padding: 14px 16px;
    background: rgba(155, 92, 246, 0.06);
    border: 1px solid rgba(155, 92, 246, 0.15);
    border-radius: 12px;
    margin-bottom: 6px;
}
.scan-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.scan-meta-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}
.scan-meta-value {
    font-size: 13px;
    color: #FFF;
    font-weight: 500;
    word-break: break-word;
}
.scan-cache-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    padding: 2px 7px;
    background: rgba(34, 211, 238, 0.2);
    color: #22D3EE;
    border-radius: 999px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 500;
}

/* ---------- Lista de items extraídos ---------- */
.scan-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}
.scan-item {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.15s ease;
}
.scan-item:focus-within {
    border-color: rgba(155, 92, 246, 0.5);
}

.scan-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.scan-item-title {
    margin: 0 0 3px;
    font-size: 14.5px;
    font-weight: 500;
    color: #FFF;
    line-height: 1.3;
}
.scan-item-method {
    margin: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.scan-tipo-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.scan-tipo-badge.is-exacta { background: rgba(34, 197, 94, 0.18); color: #4ADE80; }
.scan-tipo-badge.is-fuzzy  { background: rgba(245, 158, 11, 0.18); color: #FBBF24; }
.scan-tipo-badge.is-none   { background: rgba(239, 68, 68, 0.18); color: #F87171; }

.scan-fr-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    font-size: 10px;
    padding: 2px 7px;
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}

.scan-item-body { font-size: 13px; color: rgba(255, 255, 255, 0.85); }

.scan-item-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 10px;
}
.scan-item-row:last-child { margin-bottom: 0; }

.scan-item-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}
.scan-item-field > span {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}
.scan-item-field .admin-input,
.scan-item-field .admin-select {
    padding: 7px 10px;
    font-size: 13px;
}

.scan-item-rango {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}
.scan-item-rango strong { color: rgba(255, 255, 255, 0.85); }

.scan-item-notas {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.scan-item-accion {
    display: flex;
    gap: 14px;
    padding-bottom: 6px;
}
.scan-item-accion label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}
.scan-item-accion input[type="radio"] {
    accent-color: #9B5CF6;
}

@media (max-width: 520px) {
    .scan-item-row { flex-direction: column; align-items: stretch; }
    .scan-item-field { min-width: 0; }
    .scan-item-header { flex-direction: column; }
}

/* ---------- Warning: paciente del PDF distinto al de la orden ---------- */
.scan-warning-paciente {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.10));
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: rgba(255, 255, 255, 0.95);
    font-size: 13.5px;
    line-height: 1.4;
}
.scan-warning-paciente svg {
    color: #FCA5A5;
    flex-shrink: 0;
    margin-top: 1px;
}
.scan-warning-paciente strong { color: #FCA5A5; font-weight: 500; }
.scan-warning-paciente b { font-weight: 600; color: #FFF; }
.scan-warning-pac-txt {
    display: inline-block;
    margin-top: 5px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
}
.scan-warning-pac-hint {
    display: inline-block;
    margin-top: 4px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

/* Resumen de matches automáticos arriba de la lista */
.scan-resumen-matches {
    padding: 10px 14px;
    margin: 0 0 14px;
    background: rgba(166, 77, 255, 0.08);
    border: 1px solid rgba(166, 77, 255, 0.20);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary, #CFCFEA);
    line-height: 1.7;
}
.scan-resumen-matches strong { color: var(--text-primary, #FFF); font-weight: 500; }
.scan-mtag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    margin-right: 4px;
}
.scan-mtag--exacta { background: rgba(34, 197, 94, 0.18);  color: #4ADE80; }
.scan-mtag--fuzzy  { background: rgba(245, 158, 11, 0.18); color: #FBBF24; }
.scan-mtag--none   { background: rgba(239, 68, 68, 0.18);  color: #F87171; }

/* Tarjeta de "+ Agregar a la orden y cargar" cuando la práctica está
   en el catálogo pero todavía no en la orden actual */
.scan-cat-suggest {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 10px 0 8px;
    background: rgba(166, 77, 255, 0.10);
    border: 1px dashed rgba(166, 77, 255, 0.45);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary, #CFCFEA);
}
.scan-cat-suggest svg {
    flex-shrink: 0;
    color: rgba(196, 154, 255, 0.95);
}
.scan-cat-suggest-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.scan-cat-suggest-text strong {
    color: var(--text-primary, #FFF);
    font-weight: 500;
    font-size: 13px;
}
.scan-cat-suggest-text strong em {
    color: #c49aff;
    font-style: normal;
    font-weight: 600;
}
.scan-cat-suggest-text span {
    font-size: 11.5px;
    /* Token + opacity en vez de blanco fijo: sobre el fondo claro del tema
       MAR un rgba(255,255,255,.55) queda casi invisible. */
    color: var(--text-secondary);
    opacity: 0.7;
}
.scan-cat-suggest .btn { flex-shrink: 0; }

/* Highlight breve cuando un item recién se agregó con éxito */
.scan-item--just-added {
    animation: scanItemFlash 1.4s ease-out;
}
@keyframes scanItemFlash {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    40%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------- Barra de hint + botón "Ver PDF" ---------- */
.scan-hint-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 18px;
}
.scan-ver-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(155, 92, 246, 0.12);
    border: 1px solid rgba(155, 92, 246, 0.35);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.scan-ver-pdf-btn:hover {
    background: rgba(155, 92, 246, 0.22);
    border-color: rgba(155, 92, 246, 0.6);
    color: #FFF;
}
.scan-ver-pdf-btn svg { color: #B985F7; }

/* ============================================================
   Admin · Toolbar de acciones (debajo del hero)
   ------------------------------------------------------------
   Patrón reusable cuando una pantalla tiene 3+ botones que
   sobrecargan el header. Se usa con dos grupos:
     .admin-toolbar-primary   → izq · acciones que cambian el estado
     .admin-toolbar-secondary → der · utilitarios y peligrosos
   ============================================================ */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    margin: 22px 0 18px;
    background: rgba(30, 0, 56, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.admin-toolbar-primary,
.admin-toolbar-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.admin-toolbar-secondary {
    margin-left: auto;
}
.admin-toolbar .btn {
    white-space: nowrap;
}
.admin-toolbar .btn svg {
    color: var(--text-secondary);
}
.admin-toolbar .btn:hover svg {
    color: var(--text-primary);
}
.admin-toolbar .btn.btn-primary svg {
    color: #fff;
}
.admin-toolbar .btn.btn-danger {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.40);
}
.admin-toolbar .btn.btn-danger:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
}
@media (max-width: 760px) {
    .admin-toolbar { padding: 12px 14px; }
    .admin-toolbar-secondary { margin-left: 0; }
}

/* ============================================================
   Banner "Modo lectura" para cargar-resultados.php cuando la orden
   está validada/entregada/anulada. Estilo profesional con ícono + título
   con gradient + descripción. Aire desde el hero (margin-top 28).
   ============================================================ */
.cr-readonly-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(166, 77, 255, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.32);
    /* Aire abajo: el banner encabeza el cargador y sin margin-bottom quedaba
       pegado a la primera card de resultados. Solo tenia margin-top porque la
       clase estaba definida pero sin usar. */
    margin: 4px 0 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.cr-readonly-banner-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.cr-readonly-banner-text { min-width: 0; }
.cr-readonly-banner-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.cr-readonly-banner-desc {
    margin: 0;
    color: #cfcfe8;
    font-size: 13px;
    line-height: 1.55;
}
.cr-readonly-banner-desc strong {
    color: #fff;
    font-weight: 600;
    text-transform: lowercase;
}

/* Variante "Área firmada": mismo banner, otro motivo. El ámbar avisa "esta
   orden está cerrada"; el azul avisa "este resultado ya lleva firma". Son dos
   bloqueos distintos y el operador tiene que poder distinguirlos de un vistazo
   (una orden en "cargada" puede tener un área firmada y otra no). */
.cr-readonly-banner--firmada {
    background: linear-gradient(135deg, rgba(77, 166, 255, 0.12) 0%, rgba(166, 77, 255, 0.08) 100%);
    border-color: rgba(77, 166, 255, 0.35);
}
.cr-readonly-banner--firmada .cr-readonly-banner-icon {
    background: rgba(77, 166, 255, 0.18);
    border-color: rgba(77, 166, 255, 0.35);
    color: #93C5FD;
}
.cr-readonly-banner--firmada .cr-readonly-banner-title {
    background: linear-gradient(135deg, #4DA6FF 0%, #A64DFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Código de la práctica en el cargador de resultados (tab General). Mismo chip
   que la card resumen, un toque más grande porque el título también lo es. */
.cr-practica-cod {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* ---------- Historial de órdenes (admin/pacientes/ver.php) ---------- */
/* Buscador por Nº de orden. Repite el layout de .admin-filter (etiqueta y
   campo en la misma línea) pero SIN esa clase: `.admin-filter input` está
   pensada para fechas y le estampa un ícono de calendario a cualquier input
   que caiga adentro, con `!important` en el tema MAR. */
.hist-filtro-nro {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 260px;
    font-size: 13px;
    color: var(--text-secondary);
}
/* Ancho suficiente para que "Nº de orden" no se parta en dos renglones. */
.hist-filtro-nro > span {
    font-weight: 500;
    white-space: nowrap;
}
/* Mismo alto y tipografía que los selects de al lado. */
.hist-filtro-nro .admin-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 8px;
}
@media (max-width: 720px) {
    .hist-filtro-nro { width: 100%; }
}

/* Pie de la tabla: el contador a la izquierda, "Ver más" centrado abajo si
   entra en una sola línea, y separado de la tabla para que no quede pegado. */
.hist-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.hist-info { font-size: 12px; }

/* Los dos botones de la fila, juntos. Van en un <span> y no en el <td>: un
   display:flex sobre la celda le rompe la alineacion vertical a la fila. */
.hist-acciones {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
/* La regla general de .admin-col-action está pensada para UN botón: reserva
   100px y se come 40px en padding, así que dos íconos no entran y el segundo
   se sale de la tabla. Acá la columna es más ancha y con menos aire lateral. */
.hist-table th.admin-col-action,
.hist-table td.admin-col-action {
    width: 118px;
    padding-left: 8px;
    padding-right: 12px;
}

/* Nombre y documento en la MISMA línea (listado de órdenes). El documento va
   gris y chico: acompaña al nombre, no compite. */
.admin-row-nombre-doc {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-row-doc {
    font-size: 11.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Botón "Descargar PDF" mientras el servidor arma el archivo. */
.btn.is-generando {
    pointer-events: none;
    opacity: .75;
}
.btn-generando-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: btnGenerandoSpin .7s linear infinite;
}
@keyframes btnGenerandoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn-generando-dot { animation-duration: 2.4s; }
}

/* Tarjetas compactas en el drawer "Prácticas de la orden": una orden real
   tiene 14 prácticas y con el alto de antes había que scrollear todo el tiempo.
   Va scopeado: la misma clase la usan otros listados donde el aire está bien. */
#practicas-list.admin-planes-list { gap: 6px; }
#practicas-list .admin-plan-card {
    padding: 8px 12px;
    gap: 10px;
    border-radius: 10px;
}
#practicas-list .admin-plan-name {
    font-size: 13px;
    line-height: 1.3;
}
#practicas-list .admin-plan-meta {
    font-size: 11.5px;
    gap: 10px;
    margin-top: 1px;
    line-height: 1.3;
}
#practicas-list .admin-plan-actions .btn { padding: 4px 10px; font-size: 11.5px; }

/* Flechas para reordenar prácticas dentro del drawer "Prácticas de la orden".
   Columna angosta a la izquierda de cada tarjeta: el orden es lo que decide
   cómo salen impresas en el informe. */
.op-mover {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.op-mover-btn {
    width: 24px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.op-mover-btn:hover:not(:disabled) {
    background: rgba(166, 77, 255, 0.16);
    border-color: rgba(166, 77, 255, 0.35);
    color: var(--text-primary);
}
.op-mover-btn:disabled { opacity: .3; cursor: default; }

/* Alta inline de obra social dentro del drawer "Editar datos de la orden":
   agregar una OOSS al paciente sin salir de la orden. */
.ed-oos-nueva,
.ed-alta-inline {
    margin-top: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
}
/* El alta inline es un formulario adentro de otro: necesita su propio aire
   entre filas, si no las etiquetas se pegan al campo de arriba. */
.ed-oos-nueva .admin-form-row,
.ed-alta-inline .admin-form-row { margin-bottom: 14px; }
.ed-oos-nueva .admin-form-row:last-of-type,
.ed-alta-inline .admin-form-row:last-of-type { margin-bottom: 0; }
.ed-oos-nueva-actions,
.ed-alta-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
/* Los dos "+ Agregar..." se reparten el ancho del drawer, mitad y mitad.
   `grid-auto-flow: column` + `grid-auto-columns: 1fr` reparte según cuántos
   haya: si un permiso deja uno solo, ese ocupa todo el ancho sin reglas extra. */
.ed-inline-toggles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}
.ed-inline-toggles > .btn {
    width: 100%;
    justify-content: center;
    gap: 7px;
}
/* Los botones son la continuación del desplegable de arriba, no un bloque
   aparte: pegados se lee que abren algo de ese mismo formulario. */
#editar-datos-drawer .ed-row-medico { margin-bottom: 8px; }

/* Estado ABIERTO: el botón queda marcado mientras su bloque está a la vista.
   Mismo violeta que las chips activas del admin. */
.ed-toggle.is-open {
    background: rgba(166, 77, 255, 0.14);
    border-color: rgba(166, 77, 255, 0.55);
    color: var(--text-primary);
}
.ed-toggle.is-open:hover {
    background: rgba(166, 77, 255, 0.20);
}
/* El "+" pasa a ser un chevron de cerrar: el ícono dice qué va a pasar si lo
   apretás, no qué hizo. */
.ed-toggle .ed-toggle-ico--chevron { display: none; }
.ed-toggle.is-open .ed-toggle-ico--mas { display: none; }
.ed-toggle.is-open .ed-toggle-ico--chevron { display: block; }
/* En pantalla angosta van uno abajo del otro, cada uno a todo el ancho. */
@media (max-width: 620px) {
    .ed-inline-toggles { grid-auto-flow: row; }
}

/* ============================================================
   INSIGNIA DEL ENCABEZADO — galería en Mi laboratorio
   El lab sube varias imágenes, quedan guardadas y elige cuál se imprime.
   ============================================================ */
.insignia-switch { margin-bottom: 14px; }

.insignia-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Los mensajes de estado (vacío, cargando, error) son hijos del GRID: sin
   esto quedan encajonados en una columna de 148px y el texto sale comprimido
   en cinco renglones. */
.insignia-vacio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 4px;
    font-size: 13px;
}

.insignia-item {
    position: relative;
    margin: 0;
    padding: 12px 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.insignia-item:hover { border-color: rgba(255, 255, 255, 0.20); }
/* La que se está imprimiendo: se tiene que ver de un vistazo cuál es. */
.insignia-item.is-elegida {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.07);
}

/* Fondo blanco en la miniatura: casi todas las insignias son PNG con
   transparencia y sobre el panel oscuro no se ven. */
.insignia-thumb {
    width: 100%;
    height: 92px;
    /* Flex y no grid: sobre un item de GRID el `max-height: 100%` de la imagen
       no siempre resuelve contra el alto de la caja, la fila crece con la
       imagen y —como grid no recorta— la miniatura se desbordaba encima del
       nombre. En flex el alto de referencia es el de la caja, que es fijo.
       El overflow es el cinturón. */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9px;
    background: #fff;
    padding: 6px;
}
.insignia-thumb img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.insignia-item figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}
.insignia-item figcaption strong {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insignia-item figcaption .dash-muted { font-size: 11px; }

/* "Usar esta" (botón) y "En uso" (badge) ocupan el mismo lugar de la tarjeta,
   uno u otro según el estado. Si tienen tamaños distintos, la fila de abajo
   baila entre tarjetas. Acá se igualan la geometría de los dos; el color lo
   sigue poniendo cada uno. La especificidad tiene que ganarle a `.btn.btn-sm`,
   por eso van anidados en .insignia-item. */
.insignia-item .insignia-usar,
.insignia-item .insignia-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
}

.insignia-badge {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86EFAC;
}

/* La ✕ aparece al pasar por la tarjeta, igual que en prácticas y enlaces. */
.insignia-borrar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-secondary, #6B7280);
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.insignia-item:hover .insignia-borrar,
.insignia-borrar:focus-visible { opacity: 1; }
.insignia-borrar:hover,
.insignia-borrar:focus-visible {
    color: #DC2626;
    background: color-mix(in srgb, #DC2626 12%, transparent);
}
@media (hover: none) {
    .insignia-borrar { opacity: .8; }
}

/* Código de la práctica en la card resumen. Mismo chip que usa el preview de
   la carga rápida: es el mismo dato y conviene que se lea igual en los dos
   lados. Ancho mínimo para que los nombres arranquen alineados. */
.orden-practicas-cod {
    flex-shrink: 0;
    min-width: 42px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    text-align: center;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    /* Un punto abajo del nombre (11.5px): acompana, no compite. */
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
@media (max-width: 560px) {
    /* En celular el ancho fijo le come lugar al nombre. */
    .orden-practicas-cod { min-width: 0; }
}

/* ============================================================
   CARGA RÁPIDA POR CÓDIGOS (card Prácticas de admin/ordenes/ver.php)
   El bioquímico escribe los códigos del pedido, uno por línea, y a la
   derecha va viendo qué práctica reconoció cada uno.
   ============================================================ */
.op-rapida-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    line-height: 1;
}
.op-rapida-toggle svg { display: block; }
/* El rayo ya viene con su degradé amarillo→naranja adentro del SVG; el filtro
   le da el brillito al abrir el panel. */
.op-rapida-toggle .op-rapida-rayo { transition: filter 0.15s ease, transform 0.15s ease; }
.op-rapida-toggle:hover .op-rapida-rayo { transform: scale(1.08); }
.op-rapida-toggle.is-on .op-rapida-rayo { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55)); }
/* Abierto: el botón queda "prendido" para que se vea de dónde salió el panel. */
.op-rapida-toggle.is-on {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.42);
    color: #FBBF24;
}

.op-rapida {
    margin: 4px 0 18px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
}
.op-rapida-ayuda { margin: 0 0 12px; }

.op-rapida-grid {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 760px) {
    .op-rapida-grid { grid-template-columns: 1fr; }
}

.op-rapida-textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 14px;
    /* Aire entre líneas: se lee como una lista de códigos, no como un párrafo. */
    line-height: 1.9;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.op-rapida-textarea:focus {
    border-color: rgba(166, 77, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(166, 77, 255, 0.15);
}

.op-rapida-preview {
    min-height: 150px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.op-rapida-vacio { font-size: 12.5px; margin: 0; padding: 6px 2px; }

.op-rapida-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
}

/* El código va como chip monoespaciado: es lo que el bioquímico está
   comparando contra el papel, así que tiene que engancharse la vista ahí.
   Ancho mínimo fijo para que la columna de nombres arranque siempre igual
   aunque los códigos tengan 3 o 4 dígitos. */
.op-rapida-cod {
    flex-shrink: 0;
    min-width: 54px;
    padding: 3px 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    text-align: center;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
/* El nombre NO se recorta: el bioquimico esta confirmando que el codigo que
   escribio es la practica que queria, y "Gamma Glutamil Transpepti..." no le
   sirve para eso. Si no entra, la fila crece. */
.op-rapida-nom {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Marca de estado a la derecha: tilde, cruz o etiqueta corta. */
.op-rapida-ico {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.op-rapida-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

/* --- Va a entrar --- */
.op-rapida-item--ok               { background: rgba(34, 197, 94, 0.09); }
.op-rapida-item--ok .op-rapida-cod {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.34);
    color: #86EFAC;
}
.op-rapida-item--ok .op-rapida-nom { color: var(--text-primary); }
.op-rapida-item--ok .op-rapida-ico { background: rgba(34, 197, 94, 0.18); color: #4ADE80; }
.op-rapida-tag--nbu {
    background: rgba(77, 166, 255, 0.16);
    color: #93C5FD;
}

/* --- No se puede cargar --- */
.op-rapida-item--error               { background: rgba(239, 68, 68, 0.08); }
.op-rapida-item--error .op-rapida-cod {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.34);
    color: #FCA5A5;
}
.op-rapida-item--error .op-rapida-nom { color: #FCA5A5; }
.op-rapida-item--error .op-rapida-ico { background: rgba(239, 68, 68, 0.16); color: #F87171; }
.op-rapida-item--error .op-rapida-tag {
    background: rgba(239, 68, 68, 0.14);
    color: #FCA5A5;
}

/* --- Ya estaba en la orden: se ve, pero apagada --- */
.op-rapida-item--ya                { background: rgba(255, 255, 255, 0.03); }
.op-rapida-item--ya .op-rapida-cod {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-secondary);
}
.op-rapida-item--ya .op-rapida-nom { opacity: 0.75; }

.op-rapida-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
/* El atajo empuja los botones a la derecha y queda como pista al costado. */
.op-rapida-atajo { margin-right: auto; font-size: 12px; }
.op-rapida-atajo kbd {
    padding: 1px 5px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
}

/* ============================================================
   Avatar de usuario — usable en ver.php, mi-cuenta, dash-header,
   listados, comentarios, etc. Tamaño se controla por inline style
   (width/height/font-size) desde labix_avatar_html().
   ============================================================ */
.labix-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2B004F 0%, #4A0E80 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    user-select: none;
    line-height: 1;
    border: 1px solid rgba(166, 77, 255, 0.25);
}
.labix-avatar-text {
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.labix-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;       /* arriba de las iniciales */
    background: inherit;  /* tapa el gradient mientras carga */
}
.labix-avatar--initials {
    background: linear-gradient(135deg, #6B7CFF 0%, #A64DFF 100%);
}

/* Tamaños predefinidos opcionales (si no querés inline style). */
.labix-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.labix-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.labix-avatar--md { width: 48px; height: 48px; font-size: 16px; }
.labix-avatar--lg { width: 96px; height: 96px; font-size: 32px; }
.labix-avatar--xl { width: 128px; height: 128px; font-size: 44px; }

/* Wrap con botón de "cambiar foto" superpuesto en la esquina inferior derecha.
   Usado en admin/usuarios/ver.php y admin/mi-cuenta/. */
.usuario-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    margin-right: 16px;
}
.usuario-avatar-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    z-index: 10;        /* siempre por encima del avatar (que tiene img z:2) */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A64DFF 0%, #6B7CFF 100%);
    border: 2px solid #2B004F;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
}
.usuario-avatar-edit:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(166, 77, 255, 0.5);
}
.usuario-avatar-edit:active { transform: scale(0.95); }
.usuario-avatar-wrap.is-uploading .labix-avatar { opacity: 0.5; }
.usuario-avatar-wrap.is-uploading .usuario-avatar-edit,
.usuario-avatar-wrap.is-uploading .usuario-avatar-delete { pointer-events: none; opacity: 0.6; }

.usuario-avatar-delete {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 10;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.95);
    border: 2px solid #2B004F;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
}
.usuario-avatar-delete:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.5);
}
.usuario-avatar-delete:active { transform: scale(0.95); }
.usuario-avatar-delete[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────────────
   Grilla de avatares preset (9 iconos temáticos del lab + iniciales).
   Cada chip = avatar arriba + label abajo. Active state = ring violeta.
   ────────────────────────────────────────────────────────────────────── */
.avatar-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    padding: 8px 4px 4px;
}
.avatar-preset-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    text-align: center;
}
.avatar-preset-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
}
.avatar-preset-chip:active { transform: scale(0.97); }
.avatar-preset-chip.is-active {
    background: rgba(166, 77, 255, 0.12);
    border-color: rgba(166, 77, 255, 0.55);
    color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(166, 77, 255, 0.25) inset;
}
.avatar-preset-chip .labix-avatar { flex-shrink: 0; }
.avatar-preset-label {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.avatar-presets-hint {
    margin: 14px 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.8;
}
.avatar-presets-hint .link-inline {
    background: none;
    border: 0;
    color: #B889FF;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.avatar-presets-hint .link-inline:hover { color: #D7B4FF; }

/* ============================================================
   Botones S/I/R (antibiograma — usado en cargador de coprocultivo
   y antibiograma). Color sólido cuando seleccionado, coincidente con
   el render del informe (verde S, ámbar I, rojo R).
   El JS aplica `btn-ghost` cuando NO está seleccionado y lo quita
   cuando lo activa (el tema MAR tiene background:transparent !important
   en .btn-ghost y pisaría el color de relleno).
   ============================================================ */
.lbx-sens-btn {
    min-width: 36px;
    padding: 6px 8px;
    font-weight: 600;
}
.lbx-sens-btn--s.is-on {
    background: #16A34A;
    color: #ffffff;
    border-color: #16A34A;
}
.lbx-sens-btn--i.is-on {
    background: #D97706;
    color: #ffffff;
    border-color: #D97706;
}
.lbx-sens-btn--r.is-on {
    background: #DC2626;
    color: #ffffff;
    border-color: #DC2626;
}

/* Antibiótico escrito a mano que no matchea el catálogo del lab. No se
   bloquea (se puede informar una droga que todavía no está cargada), pero
   se marca en ámbar para que un tipeo accidental no pase inadvertido hasta
   el informe. El tema MAR fuerza border-color con !important sobre
   .hg-input, así que acá también va !important + la variante scopeada. */
.hg-input.lbx-droga-fuera-catalogo,
body[data-theme="mar"] .hg-input.lbx-droga-fuera-catalogo {
    border-color: #D97706 !important;
    background: rgba(217, 119, 6, 0.12) !important;
}

/* Antibiótico ya elegido del catálogo: el campo queda bloqueado para que no
   se le escriba encima. Un clic lo libera y reabre el listado, así que tiene
   que verse clickeable y NO apagado como un readonly común. */
.hg-input.lbx-droga-elegida,
body[data-theme="mar"] .hg-input.lbx-droga-elegida {
    cursor: pointer;
    opacity: 1 !important;
}

/* Botón "Recargar la orden": mientras navega, el ícono gira para que se note
   que hizo algo (la recarga puede tardar un instante). Reusa el @keyframes
   spin que ya está definido en styles.css. */
.admin-btn-icon.is-cargando svg {
    animation: spin 0.7s linear infinite;
}

/* ------------------------------------------------------------
   Renglón de la grilla del antibiograma:
   [↑ ↓] [nombre] [S I R] [×]
   Las flechas cambian el orden en que salen impresos en el informe.
   ------------------------------------------------------------ */
.lbx-atb-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
}
.lbx-atb-sens,
.lbx-atb-orden {
    display: flex;
    gap: 4px;
}
.lbx-atb-quitar {
    min-width: 32px;
    padding: 6px 8px;
}
/* Las flechas van más chicas que el resto: son un ajuste fino del orden,
   no una acción principal del renglón. */
.lbx-atb-mover {
    min-width: 22px;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1;
}
.lbx-atb-mover:disabled {
    opacity: 0.3;
    cursor: default;
}

/* En pantallas chicas quedan las flechas y el nombre en la primera línea,
   y el S/I/R con la × bajan a la segunda: si no, el campo del antibiótico
   queda reducido a nada. */
@media (max-width: 700px) {
    .lbx-atb-row {
        grid-template-columns: auto 1fr;
        row-gap: 6px;
    }
    .lbx-atb-sens   { justify-self: start; }
    .lbx-atb-quitar { justify-self: end; }
}

/* Aviso al pie de la grilla: antibióticos cargados a los que les falta el
   S/I/R. No salen impresos, así que el bioquímico tiene que verlo acá. */
.lbx-atb-incompletos {
    margin: 10px 2px 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #D97706;
    /* Alineado a la derecha: queda debajo de la columna de S/I/R, que es
       justo lo que falta completar. */
    text-align: right;
}
.lbx-atb-incompletos::before {
    content: '\26A0 ';
    margin-right: 6px;
}
body[data-theme="mar"] .lbx-atb-incompletos { color: #B45309; }

/* ============================================================
   Card "Tu link de turnos" (admin/laboratorio) — link público
   compartible + botones copiar / WhatsApp / abrir.
   ============================================================ */
.turnos-link-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}
/* Columna que contiene el campo + los botones de abajo. Los botones se alinean
   al borde derecho de ESTA columna (= borde derecho del campo), no de toda la
   fila (que incluye el botón Copiar al costado). */
.turnos-link-main {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.turnos-link-field {
    margin-bottom: 0 !important;
}
.turnos-link-field input {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', ui-monospace, 'SFMono-Regular', monospace;
}
.turnos-link-row > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.turnos-link-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.turnos-link-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    text-align: center;
}
.turnos-qr-box {
    flex: 0 0 auto;
    width: 168px;
    height: 168px;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.turnos-qr-box canvas,
.turnos-qr-box svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Variante suave del aviso de paciente: el nombre no es idéntico pero se
   parece (típico error de lectura del PDF, o un segundo nombre que la ficha
   tiene y el PDF no). Informa sin gritar — la alerta roja se reserva para
   cuando es realmente otro paciente. */
.scan-warning-paciente--leve {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(166, 77, 255, 0.06));
    border-color: rgba(245, 158, 11, 0.30);
}
.scan-warning-paciente--leve svg { color: #FCD34D; }
.scan-warning-paciente--leve strong { color: #FCD34D; }

/* ==========================================================
   Frases usadas — autocompletar renglones de texto largo
   (cargador genérico, admin/ordenes/ver.php)

   El historial de lo ya cargado en ese mismo renglón. <datalist> no funciona
   en <textarea>, así que el desplegable es propio.
   ========================================================== */
.cr-textarea-wrap {
    position: relative;
    width: 100%;
}
.cr-frases-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.cr-textarea-wrap:hover .cr-frases-btn,
.cr-frases-btn:focus-visible,
.cr-frases-btn[aria-expanded="true"] {
    opacity: 1;
    color: var(--grad-3);
    border-color: color-mix(in srgb, var(--grad-3) 45%, transparent);
}
/* Que el texto no se meta abajo del botón. */
.cr-textarea-wrap textarea { padding-right: 34px !important; }

.cr-frases-pop {
    /* Fijo y colgado del <body>: .cr-practica tiene overflow:hidden y
       recortaría el desplegable. Las coordenadas las calcula reposFrases()
       en cargar-resultados.js. */
    position: fixed;
    z-index: 9998;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 10px;
    background: var(--bg-deep);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40);
}
.cr-frases-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.cr-frases-item:hover,
.cr-frases-item:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--grad-3) 14%, transparent);
}
.cr-frases-txt {
    flex: 1;
    min-width: 0;
    /* Máximo 3 líneas por frase: el desplegable no es para leer el texto
       entero, es para elegir. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cr-frases-usos {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    color: var(--text-secondary);
}
.cr-frases-cargando,
.cr-frases-vacio {
    margin: 0;
    padding: 10px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0.75;
}

/* ============================================================
   DIAGNÓSTICO · Revisar una orden (admin/diagnostico/orden-firma.php)
   ------------------------------------------------------------
   Pantalla de consulta: una tira de datos de la orden, el veredicto con la
   misma caja que la revisión previa a la firma (.rev-box) y los volcados
   plegables. Solo lo que no existía ya en el sistema.
   ============================================================ */

/* Buscador: etiqueta arriba, el campo con sus botones al lado y la ayuda
   abajo. El input mide lo que mide un número de orden —seis dígitos—: uno a
   media pantalla miente sobre lo que hay que escribir. */
.diag-buscar .auth-field { margin: 0; }
.diag-buscar-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
/* El input mide lo que mide un número de orden: seis dígitos. */
.diag-buscar-inline input {
    width: 170px;
    flex: 0 0 auto;
    text-align: center;
    letter-spacing: 0.04em;
}
.diag-buscar-inline .btn { flex: 0 0 auto; }
.diag-buscar-inline .field-hint {
    margin: 0;
    text-align: left;
}

/* Tira de datos de la orden: estado guardado, el que le corresponde y los dos
   números con los que se la puede buscar. Se reacomoda sola en mobile. */
.diag-estados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 18px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}
.diag-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.diag-estado-label {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.8;
}
.diag-estado strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}
.diag-estado-link {
    font-size: 11.5px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.diag-estado-link:hover { color: var(--text-primary); }

/* Volcado de una pantalla propia. Arranca abierto (lo plegado no se copia). */
.diag-volcado {
    margin: 0 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
}
.diag-volcado:last-child { margin-bottom: 0; }
.diag-volcado > summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 13.5px;
    color: var(--text-primary);
    list-style: none;
}
.diag-volcado > summary::-webkit-details-marker { display: none; }
.diag-volcado > summary::before {
    content: '▸';
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}
.diag-volcado[open] > summary::before { content: '▾'; }
.diag-volcado > summary:hover { color: var(--text-primary); }
.diag-volcado-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    opacity: 0.85;
}
.diag-volcado .admin-table-wrap { margin-top: 10px; }

/* Celdas de texto largo dentro de una .admin-table--auto, que por defecto va
   en `nowrap`. El detalle de la auditoria puede traer 500 caracteres —la carga
   rapida lista las 15 practicas de la orden— y en una sola linea empuja la
   tabla a un scroll horizontal eterno. */
.admin-form--dense .admin-table-wrap .admin-table.admin-table--auto td.diag-detalle {
    white-space: normal;
    min-width: 260px;
    max-width: 560px;
    line-height: 1.45;
}

/* Nombre interno de la columna, debajo de la etiqueta del campo. */
.diag-col {
    display: block;
    font-size: 10.5px;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .diag-estados { padding: 12px; gap: 10px; }
    /* En mobile el campo toma el ancho, los botones se reparten la fila de
       abajo y la ayuda vuelve al pie, alineada a la izquierda. */
    .diag-buscar-inline input { width: 100%; }
    .diag-buscar-inline .btn { flex: 1 1 0; }
    .diag-buscar-inline .field-hint { width: 100%; }
}