/*
 * ═══════════════════════════════════════════════════════════════
 *  SISTEMA CLÍNICO — Design System CSS
 *  Vanilla CSS | Inter Font | Premium Dark-Themed
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── CSS Variables / Design Tokens ─────────────────────────── */
:root {
    /* Primary — Teal clinico (identidad del sistema) */
    --primary: #199c82;
    /* Triplete RGB del primary para tintas con alpha: rgba(var(--primary-rgb), .X).
       El branding per-doctora lo sobreescribe en layouts/app.blade.php a partir
       del hex elegido, igual que --primary, para que las tintas sigan la marca. */
    --primary-rgb: 25, 156, 130;
    --primary-light: #e6f7f3;
    --primary-dark: #116d5b;
    --primary-bg: rgba(25, 156, 130, 0.06);
    /* Acento de primer plano del sidebar OSCURO (texto/iconos de items activos,
       marca, badges). Default = mint teal-300, elegido por su legibilidad sobre
       el navy. El branding per-doctora lo sobreescribe en layouts/app.blade.php
       con una TINTA CLARA derivada de su --primary (para conservar contraste sin
       regresar a las doctoras con teal por defecto). */
    --sidebar-accent: #5eead4;

    /* Semantic states */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.08);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.08);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.08);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.08);

    /* Backgrounds */
    --bg-body: #f8fafc;
    --bg-sidebar: #072b24;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-input: #ffffff;
    --bg-topbar: rgba(255, 255, 255, 0.97);

    /* Text — Slate scale */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* Sidebar — dark teal family */
    --sidebar-text: #d1fae5;
    --sidebar-text-muted: #6ee7b7;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-border: rgba(255, 255, 255, 0.08);

    /* Borders */
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --border-focus: var(--primary);

    /* Typography — Inter only */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;

    /* Shadows — optimized for white backgrounds */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(25, 156, 130, 0.12);

    /* Transitions */
    --transition: 200ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 350ms cubic-bezier(.4, 0, .2, 1);

    --teal-900: #0a2e28;
    --teal-800: #0d4239;
    --teal-700: #116d5b;
    --teal-600: #168a73;
    --teal-500: #199c82;
    --input-bg-light: #f3f6ff;

    /* ─── Responsive Foundation (Fase 1) ─────────────────────────
       Breakpoints oficiales del sistema (mobile-first).
       Usar SIEMPRE estos 4 valores en nuevas media queries:
         sm  →  480px   (móvil grande)
         md  →  768px   (tablet portrait / móvil landscape)
         lg  →  1024px  (tablet landscape / laptop pequeña)
         xl  →  1280px  (desktop)
       Nota: las variables CSS no son válidas dentro de @media,
       se declaran aquí como referencia documental. Las @media
       deben usar el valor literal correspondiente.
    */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Escala tipográfica fluida — clamp(min, preferido, max) */
    --fs-xs:   clamp(0.72rem, 0.68rem + 0.18vw, 0.80rem);
    --fs-sm:   clamp(0.82rem, 0.78rem + 0.20vw, 0.92rem);
    --fs-md:   clamp(0.92rem, 0.88rem + 0.22vw, 1.02rem);
    --fs-lg:   clamp(1.05rem, 1.00rem + 0.30vw, 1.20rem);
    --fs-xl:   clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
    --fs-2xl:  clamp(1.50rem, 1.30rem + 0.80vw, 1.90rem);
    --fs-3xl:  clamp(1.85rem, 1.50rem + 1.40vw, 2.50rem);

    /* Touch target mínimo (WCAG 2.5.5 AAA) */
    --touch-min: 44px;

    /* Spacing fluido para contenedores principales */
    --pad-content: clamp(12px, 3vw, 24px);
    --pad-card:    clamp(14px, 2.5vw, 22px);

    /* Altura topbar fluida (para landscape móvil) */
    --topbar-height-fluid: clamp(52px, 7vh, 64px);

    /* ─── Escala z-index documentada (Fase 8) ────────────────────
       Prevención de bugs de stacking. Usar SIEMPRE estos tokens en
       nuevos componentes flotantes/elevados:
         10   →  elementos in-flow elevados (pills, badges)
         50   →  topbar / sticky headers
         100  →  sidebar / drawer
         200  →  sidebar overlay
         300  →  dropdown / autocomplete / tooltip
         900  →  modal backdrop
         1000 →  modal content
         1100 →  toast / notification
         9999 →  reservado (legacy; evitar usar)
    */
    --z-raised:    10;
    --z-topbar:    50;
    --z-sidebar:   100;
    --z-overlay:   200;
    --z-dropdown:  300;
    --z-modal-bg:  900;
    --z-modal:     1000;
    --z-toast:     1100;
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary);
}

img {
    max-width: 100%;
    display: block;
}

/* Force prevent body horizontal scroll */
html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    max-width: 100vw;
}

/* ─── Layout ────────────────────────────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    max-width: 100vw;
    /* Respaldo a prueba del glitch de iOS Safari: el sidebar es
       `position: fixed; height: 100dvh` y en iPad (scroll por momentum en
       landscape) puede "despegarse" durante el scroll dejando ver el fondo
       blanco del `body`. `.app-layout` esta EN FLUJO NORMAL y crece con el
       contenido, asi que su fondo (color del sidebar) cubre toda la altura del
       documento detras de la franja del sidebar. Si el fixed falla, detras hay
       color de sidebar — nunca blanco. La franja de contenido la tapa
       `.main-wrapper` con su propio fondo claro (abajo). */
    background: var(--bg-sidebar);
}

.main-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left .38s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-x: hidden;
    /* Fondo claro opaco sobre el respaldo oscuro de `.app-layout`: cubre toda
       el area de contenido (a la derecha de la franja del sidebar). En
       movil/tablet (margin-left 0) cubre el ancho completo, ocultando el
       respaldo cuando el sidebar esta off-canvas. */
    background: var(--bg-body);
}

.content {
    flex: 1;
    min-width: 0;
    padding: var(--pad-content);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
.content--flush {
    padding: 0;
    max-width: none;
}

/* app.blade.php — Sidebar shell */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    transition: transform .38s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .38s ease;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.06);
}
/* Sidebar shadow visible when expanded */
.app-layout:not(.sidebar-collapsed) .sidebar {
    box-shadow: 4px 0 28px rgba(0, 0, 0, .18);
}

/* ── Brand header ─────────────────────────────────────────────── */
/* ── Sidebar Header (layouts/app.blade.php) ──────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    height: 66px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}
.sidebar-brand:hover { opacity: .9; }

/* Icon box — dark rounded square with heartbeat or logo */
.sidebar-brand__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb),.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sidebar-accent);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb),.2);
    overflow: hidden;
}
.sidebar-brand__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-brand__icon svg {
    width: 18px;
    height: 18px;
}

/* Text: "Sistema" + "Clinico" stacked */
.sidebar-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.sidebar-brand__title {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
}
.sidebar-brand__sub {
    color: rgba(var(--primary-rgb),.5);
    font-size: 11px;
    font-weight: 500;
}

/* ── Close button (mobile only) ───────────────────────────────── */
.sidebar-close {
    display: none;
    position: absolute;
    top: .85rem;
    right: .75rem;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: none;
    border: none;
    color: rgba(255,255,255,.3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    padding: 0;
    z-index: 2;
}
.sidebar-close:hover {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
}

/* ── Footer ───────────────────────────────────────────────────── */
/* ── Professional Profile Card (layouts/app.blade.php sidebar) ── */
.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 12px 14px 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    flex-shrink: 0;
}
.sidebar-profile__avatar {
    position: relative;
    flex-shrink: 0;
}
.sidebar-profile__avatar img,
.sidebar-profile__initials {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-profile__avatar img {
    border: 2px solid rgba(var(--primary-rgb),.4);
}
.sidebar-profile__initials {
    background: rgba(var(--primary-rgb),.15);
    color: var(--sidebar-accent);
    font-weight: 700;
    font-size: 16px;
    border: 2px solid rgba(var(--primary-rgb),.3);
}
.sidebar-profile__status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    background: #10b981;
    border: 2px solid var(--bg-sidebar);
    border-radius: 50%;
}
.sidebar-profile__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-profile__name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.sidebar-profile__role {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(var(--primary-rgb),.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-profile__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

/* ── Quick Stats (layouts/app.blade.php sidebar) ───────────── */
.sidebar-stats {
    display: flex;
    gap: 8px;
    padding: 0 14px 10px;
    flex-shrink: 0;
}
.sidebar-stats__card {
    flex: 1;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-stats__card--accent {
    background: rgba(var(--primary-rgb),.1);
    border-color: rgba(var(--primary-rgb),.2);
}
.sidebar-stats__num {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}
.sidebar-stats__card--accent .sidebar-stats__num {
    color: var(--primary);
}
.sidebar-stats__lbl {
    color: rgba(var(--primary-rgb),.45);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Footer (layouts/app.blade.php sidebar) ────────────────── */
.sidebar-footer {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    margin-top: auto;
}
.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.15);
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
}
.sidebar-logout:hover {
    background: rgba(239,68,68,.18);
    color: #fff;
    border-color: rgba(239,68,68,.4);
}

/* ─── Topbar ────────────────────────────────────────────────── */

.topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: var(--bg-topbar);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 14px;
}

.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: 10px;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
    position: relative;  /* ancla para el hit-area ::before (BUG 3) */
}

/* BUG 3: area tactil >=44x44px en la hamburguesa (40px) y la X de cerrar
   (26px) SIN agrandar el icono. Pseudo-elemento transparente centrado que
   solo extiende el hit-target; el SVG y el box visible quedan intactos. */
.hamburger::before,
.sidebar-close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.hamburger:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
}

/* Desktop sidebar collapse toggle */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}
.sidebar-collapse-btn:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
}

/* Collapsed state: sidebar slides out, main fills */
.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}
.sidebar-collapsed .main-wrapper {
    margin-left: 0;
}

/* Collapse button icon — animates both flip and rotation */
.sidebar-collapse-btn svg {
    transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: scaleX(-1);
}

/* Sidebar nav content: fades out fast on collapse, fades in with delay on expand */
.sidebar nav,
.sidebar .sidebar-footer {
    transition: opacity .2s ease .22s;  /* delay on expand = wait for sidebar to open first */
}
.sidebar-collapsed .sidebar nav,
.sidebar-collapsed .sidebar .sidebar-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease 0s;  /* no delay on collapse */
}

/* Hide collapse button cuando el sidebar pasa a offcanvas — el hamburger
   asume el rol de mostrar/ocultar el sidebar en ese rango. */
@media (max-width: 1024px) {
    .sidebar-collapse-btn { display: none; }
}

.topbar-breadcrumb {
    flex: 1;
    min-width: 0;
}

.topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Campana de recordatorios (topbar) ──────────────── */
.topbar-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.topbar-bell:hover {
    background: var(--bg-card-hover);
    color: var(--primary);
}
.topbar-bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
    border: 1.5px solid var(--bg-body, #f8fafc);
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid var(--border);
    transition: border-color var(--transition);
    flex-shrink: 0;
}

.topbar-avatar:hover {
    border-color: var(--primary);
}

.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Sidebar Overlay (Mobile) ──────────────────────────────── */

/* Sin backdrop-filter: el overlay solo aparece en tablet/movil
   (drawer mode <=1024px), justo donde mas falla la composicion GPU
   en dispositivos de gama media-baja (bandas horizontales tipo tearing
   en Mali/Adreno debiles). Un velo solido se ve igual de profesional. */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.sidebar-overlay.visible {
    display: block;
    opacity: 1;
}

/* BUG 2: bloquear el scroll del fondo mientras el drawer esta abierto.
   La clase la aplica/quita el JS de control (layouts/app.blade.php).
   overflow:hidden (no position:fixed) → no se pierde la posicion de scroll,
   se restaura exacta al cerrar. El nav interno del sidebar (position:fixed,
   .snav2 con su propio overflow) sigue scrolleando normal. */
body.sidebar-locked {
    overflow: hidden;
}

/* ─── Responsive Sidebar ────────────────────────────────────── */

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-close {
        display: flex;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .hamburger {
        display: flex;
    }
}

/* ─── Topbar ────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: var(--bg-topbar);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 16px;
}

/* ── Optimización móvil: blur GPU-pesado se reduce/elimina ── */
@media (max-width: 768px) {
    .topbar {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}
@media (max-width: 480px) {
    .topbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
 * TOPBAR — Rediseño responsive (Sprint UI / iPad 11" fix)
 *
 * 3 zonas (lead | center | trail) con TRES breakpoints discretos:
 *
 *   ≥ 1280px  Desktop/laptop ancho:
 *             - sidebar-collapse + back + breadcrumb visible
 *             - search inline (cap 520)
 *             - bell + acciones inline (icon-only)
 *             - kebab oculto
 *
 *   1024-1279 iPad landscape + laptops compactos:
 *             - sidebar-collapse + back + breadcrumb visible
 *             - search inline (cap 420)
 *             - bell + kebab con acciones colapsadas
 *
 *   < 1024px  Tablet portrait + móviles:
 *             - hamburger + back
 *             - search colapsada en boton-icono → overlay sobre topbar
 *             - bell + kebab
 *
 * Reglas no negociables:
 *   - min-width: 0 en todos los flex children (permite shrink real)
 *   - touch targets ≥ 40×40 a cualquier breakpoint
 *   - .topbar.is-search-open: lead+trail se ocultan, search ocupa todo
 *
 * Slots:
 *   - @yield('topbar-back')    → carril izquierdo (siempre visible)
 *   - @yield('topbar-actions') → carril derecho (kebab < 1280px)
 * ═══════════════════════════════════════════════════════════════════ */
.topbar {
    position: sticky;
    top: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border);
    z-index: 50;
}
@media (min-width: 1024px) {
    .topbar { padding: 0 20px; gap: 14px; }
}
@media (min-width: 1280px) {
    .topbar { padding: 0 24px; gap: 16px; }
}
@media (max-width: 480px) {
    .topbar { padding: 0 10px; gap: 8px; }
}
@media (max-width: 360px) {
    .topbar { padding: 0 8px; gap: 6px; }
}

/* ─── Carriles ───────────────────────────────────────────── */
/*
 * Lead: width = content. Puede shrink (breadcrumb trunca con ellipsis).
 * Trail: width = content. Nunca shrink (botones touch siempre legibles).
 * Center: absorbe TODO el espacio restante (flex: 1 1 auto).
 * Esto evita la disputa de espacios que en la versión anterior
 * comprimía la búsqueda en iPad 11".
 */
.topbar__lead,
.topbar__trail {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
@media (min-width: 1024px) {
    .topbar__lead,
    .topbar__trail { gap: 8px; }
}

.topbar__lead {
    flex: 0 1 auto;
    justify-content: flex-start;
}
.topbar__trail {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Zona central: absorbe el espacio restante; geometricamente centrada
   gracias al wrap interior con max-width + margin auto via justify-center. */
.topbar__center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.topbar__center .gsearch-wrap {
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    margin: 0;
}
@media (max-width: 1279px) {
    .topbar__center .gsearch-wrap { max-width: 420px; }
}

/* < 1024px: la búsqueda inline desaparece (la activa el botón-icono).
   Sin el centro absorbiendo espacio, el trail necesita margin-left:auto
   para anclarse al borde derecho del topbar. */
@media (max-width: 1023px) {
    .topbar__center { display: none; }
    .topbar__trail  { margin-left: auto; }
}

/* Estado expandido (overlay): lead+trail ocultos, búsqueda full-width */
.topbar.is-search-open .topbar__lead,
.topbar.is-search-open .topbar__trail {
    display: none;
}
.topbar.is-search-open .topbar__center {
    display: flex;
    flex: 1 1 100%;
}
.topbar.is-search-open .topbar__center .gsearch-wrap {
    max-width: none;
}

/* ─── Topbar breadcrumb (page title) ───────────────────────────── */
.topbar-breadcrumb {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.topbar-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1023px) {
    .topbar-breadcrumb { display: none; }
}

/* ─── Back button (slot dedicado, siempre visible, icon-only) ─── */
.topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.topbar-back:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
}
.topbar-back svg { width: 18px; height: 18px; flex-shrink: 0; }
.topbar-back__label {
    /* sr-only — accesible para lectores de pantalla */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
a.topbar-back, a.topbar-back:link, a.topbar-back:visited { color: var(--text-secondary, #475569); }
a.topbar-back:hover { color: var(--primary, #199c82); }

/* ─── Lista de acciones contextuales (carril derecho) ─── */
.topbar-actions__list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.topbar-actions__list:empty { display: none; }

/* Botón genérico icon-only (kebab trigger, search icon button) */
.topbar-icon-btn {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #475569);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.topbar-icon-btn:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
    transform: translateY(-1px);
}
.topbar-icon-btn:active { transform: translateY(0); }

/* Acciones inline (≥ 1280px): icon-only 40×40, sin texto descriptivo */
.topbar-actions__list .btn,
.topbar-actions__list .btn-topbar {
    padding: 0 !important;
    min-width: 40px;
    width: 40px;
    height: 40px;
    gap: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topbar-actions__list .desktop-text { display: none !important; }

/* En < 1280px las acciones inline se ocultan y todo migra al kebab */
@media (max-width: 1279px) {
    .topbar-actions__list { display: none; }
}

/* Bell con tratamiento de icon-button (siempre visible) */
.topbar-bell {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.topbar-bell:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
}

/* ─── Search icon button (visible solo cuando el centro colapsa) ─── */
.topbar-search-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.topbar-search-icon:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
}
.topbar-search-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 1023px) {
    .topbar-search-icon { display: inline-flex; }
}

/* ─── Search close button (visible solo en overlay state) ─── */
.topbar-search-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.topbar-search-close:hover {
    background: var(--primary-bg, rgba(25,156,130,.08));
    border-color: rgba(25,156,130,.35);
    color: var(--primary, #199c82);
}
.topbar-search-close svg { width: 18px; height: 18px; flex-shrink: 0; }

.topbar.is-search-open .topbar-search-close { display: inline-flex; }

/* ─── Overflow menu (kebab) ─── */
.topbar-more { position: relative; flex-shrink: 0; }
@media (max-width: 1279px) {
    .topbar-more__trigger { display: inline-flex; }
}

.topbar-more__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
    padding: 6px;
    display: none;
    z-index: 60;
    animation: tbMoreIn .18s cubic-bezier(0.16,1,0.3,1);
}
.topbar-more.is-open .topbar-more__menu { display: block; }
@keyframes tbMoreIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Estilos de los items clonados dentro del overflow menu (filas de menú) */
.topbar-more__menu > a,
.topbar-more__menu > button,
.topbar-more__menu > .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    gap: 12px;
    padding: 10px 12px !important;
    height: auto !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary, #0f172a) !important;
    font-size: .87rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    text-align: left;
    box-shadow: none !important;
    transform: none !important;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.topbar-more__menu > a:hover,
.topbar-more__menu > button:hover,
.topbar-more__menu > .btn:hover {
    background: var(--primary-bg, rgba(25,156,130,.08)) !important;
    color: var(--primary-dark, #116d5b) !important;
    transform: none !important;
}
.topbar-more__menu > .btn-primary {
    background: var(--primary, #199c82) !important;
    color: #fff !important;
    margin-top: 4px;
}
.topbar-more__menu > .btn-primary:hover {
    background: var(--primary-dark, #116d5b) !important;
    color: #fff !important;
}
.topbar-more__menu .desktop-text { display: inline !important; }
.topbar-more__menu svg { flex-shrink: 0; width: 16px; height: 16px; }

.page-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ─── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.card-body {
    padding: 24px;
}

/* ─── Stats ─────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.stat-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--stat-color, var(--primary)) 10%, transparent);
    color: var(--stat-color, var(--primary));
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ─── Dashboard ─────────────────────────────────────────────── */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.welcome-banner {
    background: radial-gradient(circle at top right, var(--teal-800), var(--teal-900));
    padding: 32px 40px;
    border-radius: var(--radius-lg);
    color: white;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 300px;
    height: 300px;
    background: var(--teal-500);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.welcome-text {
    position: relative;
    z-index: 2;
}

.welcome-text h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.welcome-text p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-top: 0;
}

/* ─── Tables ────────────────────────────────────────────────── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background var(--transition);
}

.data-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.patient-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.patient-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.text-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* ─── Badges ────────────────────────────────────────────────── */
.badge, .ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success, .ep-badge--active {
    background: var(--success-bg);
    color: var(--success);
}

.ep-badge--inactive {
    background: var(--border-light);
    color: var(--text-muted);
}

.ep-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ─── Alerts ────────────────────────────────────────────────── */
.ep-alert {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: slideInDown 0.3s ease-out;
}

.ep-alert svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ep-alert--success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.ep-alert--error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.ep-alert__list {
    margin: 8px 0 0;
    padding-left: 18px;
}

@keyframes slideInDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info);
}

.badge-neutral {
    background: rgba(156, 163, 175, 0.1);
    color: var(--text-secondary);
}

/* ─── Alerts ────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 0.875rem;
    transition: all 300ms ease;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ─── Empty State ───────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
    text-align: center;
}

.empty-state svg {
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state p {
    font-size: 0.9rem;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-family);
    line-height: 1.4;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(25, 156, 130, 0.28);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--primary-dark);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(25, 156, 130, 0.38);
    transform: translateY(-1px);
}

/* Fix: prevent global a{color:var(--primary-light)} from bleeding into buttons */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited { color: #ffffff; }
a.btn-primary:hover   { color: #ffffff; }

.btn-block {
    width: 100%;
}

.btn-secondary {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border-light);
    transform: translateY(-1px);
}

a.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited { color: var(--text-primary); }

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-outline:hover {
    background: var(--primary-bg);
    border-color: rgba(25, 156, 130, 0.35);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

a.btn-outline, a.btn-outline:link, a.btn-outline:visited { color: var(--text-secondary); }
a.btn-outline:hover { color: var(--primary-dark); }

.btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

a.btn-ghost, a.btn-ghost:link, a.btn-ghost:visited { color: var(--text-muted); }
a.btn-ghost:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
 *  LOGIN PAGE
 * ═══════════════════════════════════════════════════════════════ */
html:has(body.login-page),
html:has(body.login-page) body.login-page {
    /* iOS Safari: previene overscroll bounce que revela fondo blanco */
    overscroll-behavior: none;
    overflow: hidden;
}

.login-page {
    position: fixed;
    inset: 0;
    height: 100dvh;
    display: flex;
    background: #fff;
    font-family: var(--font-family);
    overflow: hidden;
    margin: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}

.login-container {
    display: flex;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

.login-hero {
    flex: 1.2;
    background: radial-gradient(circle at 70% 30%, var(--teal-800) 0%, var(--teal-900) 100%);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: white;
}

.login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.6;
}

.hero-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-brand {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.hero-footer {
    position: relative;
    z-index: 2;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.login-form-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fff;
}

.login-form-container {
    width: 100%;
    max-width: 380px;
}

.form-header {
    margin-bottom: 32px;
}

.form-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.form-header p {
    color: #6b7280;
    font-size: 0.875rem;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.input-container input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: var(--input-bg-light);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #374151;
    transition: all 0.2s;
}

.input-container input::placeholder {
    color: #9ca3af;
}

.input-container input:focus {
    outline: none;
    background: #fff;
    border-color: var(--teal-600);
    box-shadow: 0 0 0 4px rgba(22, 138, 115, 0.1);
}

.input-icon {
    position: absolute;
    left: 16px;
    color: #9ca3af;
    display: flex;
}

.toggle-password {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    padding: 4px;
}

.toggle-password:hover {
    color: var(--teal-700);
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
}

.checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: var(--teal-700);
}

.btn-login {
    width: 100%;
    background: var(--teal-700);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-login:hover {
    background: var(--teal-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 109, 91, 0.25);
}

.has-error input {
    background: #fef2f2;
    border-color: #fecaca;
}

.error-text {
    font-size: 0.8rem;
    color: #ef4444;
    margin-top: 5px;
    display: block;
}

.form-mobile-logo {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    color: var(--teal-700);
}

.form-mobile-logo span {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
 * LOGIN — paleta exacta del sistema legacy (Docs/index.php)
 * Scope: .login-page (solo aplica a la vista de autenticación)
 * ═══════════════════════════════════════════════════════════════ */
.login-page {
    --lg-primary:        #0F766E;
    --lg-primary-hover:  #115E59;
    --lg-primary-dark:   #042F2E;
    --lg-accent-300:     #5EEAD4;
    --lg-accent-200:     #A7F3D0;
    --lg-accent-400:     #6EE7B7;
    --lg-text-main:      #111827;
    --lg-text-muted:     #6B7280;
    --lg-input-bg:       #F9FAFB;
    --lg-input-icon:     #9CA3AF;
    --lg-danger:         #DC2626;
    --lg-danger-bg:      #FEF2F2;
    --lg-danger-border:  #FCA5A5;
    background: #FFFFFF;
}

/* Hero: gradiente lineal exacto del legacy */
.login-page .login-hero {
    background: linear-gradient(135deg, var(--lg-primary) 0%, var(--lg-primary-dark) 100%);
}

/* Patrón decorativo del legacy — radiales translúcidos animados */
.login-page .login-hero::before {
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 1) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 1) 0%, transparent 50%);
    background-size: auto;
    opacity: 0.15;
    animation: lgPulseBg 15s infinite alternate ease-in-out;
}
@keyframes lgPulseBg {
    0%   { transform: scale(1);   opacity: 0.10; }
    100% { transform: scale(1.1); opacity: 0.20; }
}

/* Acentos de texto del panel izquierdo */
.login-page .hero-header .hero-logo,
.login-page .hero-header svg { color: var(--lg-accent-300); }
.login-page .hero-subtitle   { color: var(--lg-accent-200); }
.login-page .hero-footer     { color: var(--lg-accent-400); }

/* Encabezado del formulario */
.login-page .form-header h2 { color: var(--lg-text-main); }
.login-page .form-header p  { color: var(--lg-text-muted); }

/* Inputs */
.login-page .input-container input {
    background: var(--lg-input-bg);
    color: var(--lg-text-main);
    border: 2px solid transparent;
}
.login-page .input-container input::placeholder { color: var(--lg-input-icon); }
.login-page .input-container input:focus {
    background: #FFFFFF;
    border-color: var(--lg-primary);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.10);
}
.login-page .input-icon,
.login-page .toggle-password { color: var(--lg-input-icon); }
.login-page .input-container input:focus ~ .input-icon { color: var(--lg-primary); }
.login-page .toggle-password:hover { color: var(--lg-text-main); }

/* Errores */
.login-page .has-error input {
    background: var(--lg-danger-bg);
    border-color: var(--lg-danger-border);
}
.login-page .error-text { color: var(--lg-danger); }

.login-page .alert-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--lg-danger-bg);
    color: var(--lg-danger);
    border: 1px solid var(--lg-danger-border);
}
.login-page .alert-error svg { flex-shrink: 0; }

/* Checkbox */
.login-page .checkbox-label       { color: var(--lg-text-muted); }
.login-page .checkbox-label input { accent-color: var(--lg-primary); }

/* Botón submit */
.login-page .btn-login {
    background: var(--lg-primary);
    color: #FFFFFF;
}
.login-page .btn-login:hover {
    background: var(--lg-primary-hover);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

/* Logo móvil */
.login-page .form-mobile-logo { color: var(--lg-primary); }

/* ─── Flash de estado / éxito ─────────────────────────────────── */
.login-page .alert-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}
.login-page .alert-success svg { flex-shrink: 0; color: #059669; margin-top: 1px; }

/* ─── Link "¿Olvidaste tu contraseña?" en el login ───────────── */
.login-page .forgot-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lg-primary);
    text-decoration: none;
    transition: color .18s ease;
}
.login-page .forgot-link:hover {
    color: var(--lg-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Enlace auxiliar "Volver al login" ──────────────────────── */
.login-page .form-aux {
    margin-top: 22px;
    text-align: center;
}
.login-page .form-aux-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lg-text-muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all .18s ease;
}
.login-page .form-aux-link:hover {
    color: var(--lg-primary);
    background: #F3F4F6;
}
.login-page .form-aux-link svg { flex-shrink: 0; }

/* ─── Reglas de contraseña (reset-password) ──────────────────── */
.login-page .pw-rules {
    margin: 4px 0 20px;
    padding: 12px 14px;
    background: var(--lg-input-bg);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}
.login-page .pw-rules-title {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.login-page .pw-rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 14px;
}
.login-page .pw-rules-list li {
    position: relative;
    padding-left: 20px;
    font-size: 0.8rem;
    color: var(--lg-text-muted);
    line-height: 1.4;
    transition: color .18s ease;
}
.login-page .pw-rules-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #CBD5E1;
    background: transparent;
    transition: all .18s ease;
}
.login-page .pw-rules-list li.pw-rule-ok {
    color: #065F46;
    font-weight: 500;
}
.login-page .pw-rules-list li.pw-rule-ok::before {
    background: var(--lg-primary);
    border-color: var(--lg-primary);
}
.login-page .pw-rules-list li.pw-rule-ok::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 6.5px;
    width: 4px;
    height: 7px;
    border: solid #FFFFFF;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* ─── Responsive del login — altura bloqueada al viewport ─────── */
@media (max-width: 992px) {
    /* Oculta el hero y deja solo el formulario en tablet/móvil */
    .login-page .login-hero { display: none; }

    .login-page .login-form-wrapper {
        flex: 1;
        width: 100%;
        height: 100dvh;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F9FAFB;
        overflow: hidden;
    }

    .login-page .login-form-container {
        width: 100%;
        max-width: 420px;
        max-height: calc(100dvh - 2rem);
        padding: 2.25rem 1.75rem;
        background: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        overflow-y: auto;
        /* iOS Safari: previene overscroll bounce que revela fondo blanco */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .login-page .form-mobile-logo { display: flex; }
}

@media (max-width: 480px) {
    .login-page .login-form-wrapper { padding: 1rem; }

    .login-page .login-form-container {
        max-height: calc(100dvh - 1.5rem);
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }

    .login-page .form-header { margin-bottom: 1.5rem; }
    .login-page .form-header h2 { font-size: 1.5rem; }
    .login-page .form-header p  { font-size: 0.85rem; }

    .login-page .form-mobile-logo { margin-bottom: 1.25rem; }
    .login-page .form-mobile-logo span { font-size: 1.25rem; }

    .login-page .login-form .form-group { margin-bottom: 14px; }
    .login-page .input-container input { padding: 12px 14px 12px 42px; font-size: 0.9rem; }
    .login-page .form-options { margin-bottom: 18px; }
    .login-page .btn-login { padding: 12px; }
}

/* Viewports muy bajos (landscape móvil) — compacta más */
@media (max-height: 600px) and (max-width: 992px) {
    .login-page .form-header        { margin-bottom: 1rem; }
    .login-page .form-header h2     { font-size: 1.35rem; }
    .login-page .form-mobile-logo   { margin-bottom: 0.85rem; }
    .login-page .login-form .form-group { margin-bottom: 12px; }
    .login-page .form-options       { margin-bottom: 14px; }
    .login-page .login-form-container { padding: 1.25rem 1.25rem; }
}

/* Stack reglas de contraseña en una columna en móvil */
@media (max-width: 480px) {
    .login-page .pw-rules-list { grid-template-columns: 1fr; }
}

.input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    transition: all var(--transition);
}

.input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.15);
}

.input-wrapper svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.input-wrapper input {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: var(--font-family);
}

.input-wrapper input::placeholder {
    color: var(--text-muted);
}

.has-error .input-wrapper {
    border-color: var(--error);
}

.error-message {
    display: block;
    font-size: 0.78rem;
    color: var(--error);
    margin-top: 6px;
    padding-left: 2px;
}

.checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.form-footer {
    margin-top: 32px;
    text-align: center;
}

.form-footer p {
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* Estilos de pacientes eliminados (están duplicados y perfeccionados más abajo) */

.pat-empty__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
}

.pat-empty__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.pat-empty__desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 20px;
    max-width: 300px;
}

.pat-pagination {
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
}

.pat-pagination svg {
    width: 20px;
    height: 20px;
}

/* ═══════════════════════════════════════════════════════════════
 *  PÁGINA DE FORMULARIOS (patient-form, form-card, etc.)
 * ═══════════════════════════════════════════════════════════════ */
.page-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.btn-back:hover {
    color: var(--text-primary);
}

.btn-back svg {
    width: 14px;
    height: 14px;
}

.page-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.patient-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.form-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.form-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.form-label--required::after {
    content: ' *';
    color: var(--error);
}

/* Marcador de "campo requerido" reutilizable para sistemas de label que NO
   usan .form-label--required (p. ej. .plt2-label). Centraliza el asterisco con
   el token de paleta en vez de un `style="color:#ef4444"` inline por vista. */
.form-req { color: var(--error); }

.form-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-family);
    transition: all var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.12);
}

.form-select-wrapper {
    position: relative;
}

.form-select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-family);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all var(--transition);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.12);
}

.select-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 0.25rem;
    padding-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
 *  FORM SYSTEM v2 — ENHANCEMENTS (Patients create/edit + futuros)
 *  • Touch targets accesibles (44-48px)
 *  • iOS auto-zoom prevention
 *  • Focus-visible para teclado
 *  • Lookup banner (Hacienda)
 *  • Sticky action bar movil + safe-area iPhone
 *  • Sistema responsive 4 breakpoints (1024 / 820 / 640 / 380)
 *
 *  Esta seccion EXTIENDE la seccion "PAGINA DE FORMULARIOS" anterior
 *  (no la reemplaza). Las reglas aqui sobrescriben por orden de
 *  cascada con misma especificidad. Se beneficia automaticamente
 *  cualquier vista que use .form-card / .form-input / .form-select.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Page container con safe-area iPhone (notch) ── */
.page-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px max(24px, env(safe-area-inset-left)) 32px max(24px, env(safe-area-inset-right));
    gap: 24px;
}

/* ── Page header — alineacion vertical y soporte tactil ── */
.page-header {
    align-items: flex-start;
}

.page-header-left {
    gap: 12px;
}

.page-title {
    font-size: clamp(1.375rem, 3.5vw, 1.75rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.page-subtitle {
    font-size: clamp(0.825rem, 2vw, 0.9rem);
    line-height: 1.45;
}

/* ── Back link — boton tactil real con feedback ── */
.btn-back {
    gap: 8px;
    padding: 8px 12px;
    margin-left: -12px;
    min-height: 40px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
    width: fit-content;
}

.btn-back:hover {
    color: var(--primary);
    background: var(--bg-card-hover);
}

.btn-back:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-back:active {
    transform: scale(0.97);
}

/* ── Alert / errores de validacion ── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.alert-error {
    background: var(--error-bg);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--error);
}

.alert-list {
    margin: 6px 0 0 16px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ── Form card v2 — header con iconos y subtitulo ── */
.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
}

.form-card-header {
    gap: 14px;
    padding: 20px 24px;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card-hover);
}

.form-card-icon {
    width: 38px;
    height: 38px;
    background: var(--primary-bg);
    color: var(--primary);
}

.form-card-icon--ident {
    background: rgba(99, 102, 241, 0.10);
    color: #6366f1;
}

.form-card-icon--estado {
    background: #f0fdf4;
    color: #16a34a;
}

.form-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.form-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Grid de campos ── */
.form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    padding: 24px;
}

.form-grid--single {
    grid-template-columns: 1fr;
}

.form-group {
    gap: 6px;
}

/* ── Labels ── */
.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

.form-label--required::after {
    content: '*';
    color: var(--error);
    margin-left: 4px;
}

.form-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: -2px;
}

/* ── Inputs v2 — touch-friendly, sin altura fija ── */
.form-input {
    height: auto;
    min-height: 44px;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    font-size: 0.9375rem;
}

.form-input:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.form-input.is-error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-bg);
}

.form-input.is-verified {
    border-color: var(--success);
    background: var(--success-bg);
}

.form-input::placeholder {
    color: var(--text-muted);
}

/* Date input — uniformizar altura cross-browser (iOS Safari) */
.form-input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    background-clip: padding-box;
    line-height: 1.2;
}

.form-input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-height: 1.2em;
    line-height: 1.2;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    padding: 4px;
    transition: opacity var(--transition);
}

.form-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ── Select v2 — sin altura fija, ellipsis, chevron alineado ── */
.form-select {
    height: auto;
    min-height: 44px;
    padding: 11px 40px 11px 14px;
    border: 1.5px solid var(--border);
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.form-select.is-error {
    border-color: var(--error);
}

.select-chevron {
    right: 14px;
}

/* ── Input con icono prefijo ── */
.form-input-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix-icon {
    position: absolute;
    left: 12px;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    pointer-events: none;
}

.form-input.with-prefix {
    padding-left: 36px;
}

/* ── Input con accion (lookup spinner / refresh) ── */
.form-input-action {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-action .form-input {
    padding-right: 48px;
}

.lookup-spinner {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    display: none;
    pointer-events: none;
}

.lookup-spinner.is-active {
    display: flex;
    animation: spin 1s linear infinite;
}

.lookup-refresh {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition), transform 0.15s ease;
}

.lookup-refresh:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-bg);
}

.lookup-refresh:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.lookup-refresh:active {
    transform: translateY(-50%) scale(0.94);
}

.lookup-spinner.is-active ~ .lookup-refresh,
.lookup-refresh.is-hidden {
    display: none;
}

/* ── Skeleton shimmer (lookup en curso) ── */
.form-input-skeleton-wrapper {
    position: relative;
}

.form-input-skeleton {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.03) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.03) 100%
    );
    background-size: 200% 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* will-change y animacion solo durante carga real → libera GPU al terminar */
.form-input-skeleton-wrapper.is-loading .form-input-skeleton {
    opacity: 1;
    will-change: background-position;
    animation: shimmer 1.4s linear infinite;
}

.lookup-spinner.is-active {
    will-change: transform;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

/* ── Lookup banner — feedback de Hacienda ── */
.lookup-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.45;
    margin-top: 6px;
    border: 1px solid transparent;
}

.lookup-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.lookup-banner__title {
    font-weight: 600;
    margin: 0 0 3px;
    line-height: 1.35;
}

.lookup-banner__body {
    margin: 0;
    color: var(--text-secondary);
    word-break: break-word;
}

.lookup-banner a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 4px;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    transition: background var(--transition);
}

.lookup-banner a:hover,
.lookup-banner a:focus-visible {
    background: rgba(0, 0, 0, 0.10);
    text-decoration: underline;
}

.lookup-banner a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.lookup-banner--success { background: var(--success-bg); color: var(--success); border-color: rgba(34, 197, 94, 0.25); }
.lookup-banner--warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(245, 158, 11, 0.25); }
.lookup-banner--error   { background: var(--error-bg);   color: var(--error);   border-color: rgba(239, 68, 68, 0.25); }
.lookup-banner--info    { background: var(--primary-bg); color: var(--primary); border-color: rgba(25, 156, 130, 0.25); }
.lookup-banner--neutral { background: var(--bg-card-hover); color: var(--text-secondary); border-color: var(--border); }

/* Banner: contenedor de contenido — permite que el texto fluya correctamente
   junto al icono cuando el banner crece en alto (titulo + body + acciones). */
.lookup-banner__content {
    flex: 1;
    min-width: 0;
}

.lookup-banner__actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Errores inline ── */
.form-error {
    font-size: 0.78rem;
    color: var(--error);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Estado segmented control (edit paciente) ── */
.estado-segmented {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.estado-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    min-height: 44px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

.estado-option input[type="radio"] {
    display: none;
}

.estado-option:hover {
    border-color: var(--text-muted);
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.estado-option:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.estado-option.is-active.estado-activo   { border-color: #16a34a; background: #f0fdf4; color: #16a34a; font-weight: 600; }
.estado-option.is-active.estado-alta     { border-color: #2563eb; background: #eff6ff; color: #2563eb; font-weight: 600; }
.estado-option.is-active.estado-abandono { border-color: #ea580c; background: #fff7ed; color: #ea580c; font-weight: 600; }

/* ── Footer actions v2 — touch targets robustos ── */
.form-actions {
    gap: 12px;
    padding: 4px 0 16px;
}

.form-actions .btn,
.form-actions .btn-ghost {
    min-height: 44px;
    padding: 11px 22px;
    font-size: 0.9375rem;
}

.form-actions .btn:active,
.form-actions .btn-ghost:active {
    transform: scale(0.98);
}

/* ── Ghost button v2 ── */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-ghost:active {
    transform: scale(0.98);
}

/* ─────────────────────────────────────────────────────────
   Responsive — sistema de breakpoints completo
   • Tablet L (≤1024px): iPad landscape, laptop pequena
   • Tablet P (≤820px):  iPad portrait, tablets Android
   • Mobile L (≤640px):  iPhone Pro Max, Galaxy
   • Mobile  (≤380px):   iPhone SE
───────────────────────────────────────────────────────── */

/* Tablet landscape + laptop pequena */
@media (max-width: 1024px) {
    .page-container {
        padding-top: 24px;
        padding-bottom: 24px;
        max-width: 760px;
    }

    .form-card-header {
        padding: 18px 20px;
    }

    .form-grid {
        padding: 20px;
        gap: 18px 20px;
    }
}

/* Tablet portrait — colapsa a 1 columna para evitar campos apretados */
@media (max-width: 820px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .form-group--full {
        grid-column: 1;
    }
}

/* Anti auto-zoom en TODO dispositivo tactil (movil Y tablet) ───────────
   iOS/Chrome hacen auto-zoom al enfocar un campo con font-size < 16px.
   La regla `max-width: 640px` de abajo solo cubria moviles, por lo que
   tablets (iPad 11" 834/1194, Android 11" 800/1280) y el movil en
   horizontal seguian con zoom. `pointer: coarse` cubre cualquier pantalla
   tactil sin importar el ancho ni la orientacion, y NO afecta el diseno de
   escritorio (puntero fino / mouse). Solo se fuerza el font-size minimo;
   alturas/paddings quedan intactos. Se usa `!important` a proposito: es una
   regla transversal de accesibilidad que debe ganar sobre cualquier base
   (algunas clases como `.filter-input` fijan el tamano con `!important`). */
@media (pointer: coarse) {
    .form-input,
    .form-select,
    .pat-search-input,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="url"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Mobile L — iOS auto-zoom prevention y touch targets robustos */
@media (max-width: 640px) {
    .page-container {
        padding-top: 18px;
        padding-bottom: 24px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        gap: 18px;
    }

    .page-header {
        gap: 12px;
    }

    .form-card-header {
        padding: 16px;
        gap: 12px;
    }

    .form-card-icon {
        width: 34px;
        height: 34px;
    }

    .form-grid {
        padding: 16px;
        gap: 16px;
    }

    /* Inputs y selects: 16px previene zoom de iOS Safari */
    .form-input,
    .form-select {
        font-size: 16px;
        min-height: 48px;
        padding: 13px 14px;
    }

    .form-select {
        padding-right: 44px;
    }

    /* En movil el refresh sale del input → devolver padding-right normal */
    .form-input-action .form-input {
        padding-right: 14px;
    }

    .form-input.with-prefix {
        padding-left: 40px;
    }

    .input-prefix-icon {
        left: 14px;
    }

    /* Sacar el boton de refresh fuera del input — toque limpio */
    .form-input-action {
        flex-wrap: wrap;
    }

    .lookup-refresh {
        position: static;
        order: 3;
        width: auto;
        min-height: 44px;
        height: auto;
        padding: 8px 16px;
        margin-top: 10px;
        font-size: 0.8125rem;
        font-weight: 500;
        gap: 8px;
        background: var(--bg-card-hover);
        border-color: var(--border);
        color: var(--text-secondary);
        transform: none;
    }

    .lookup-refresh:active {
        transform: scale(0.97);
    }

    .lookup-refresh::after {
        content: 'Refrescar consulta';
    }

    .lookup-spinner {
        right: 16px;
    }

    .lookup-banner {
        padding: 12px 14px;
        font-size: 0.875rem;
    }

    .lookup-banner a {
        min-height: 36px;
        padding: 6px 10px;
        font-weight: 600;
    }

    /* Estado segmented — full width vertical en movil */
    .estado-segmented {
        flex-direction: column;
    }

    .estado-option {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Actions: sticky footer + touch alto + safe-area */
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 0 -16px -24px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        background: var(--bg-card);
        border-top: 1px solid var(--border-light);
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.05);
    }

    .form-actions .btn,
    .form-actions .btn-ghost {
        width: 100%;
        min-height: 50px;
        font-size: 0.9375rem;
    }
}

/* Mobile — iPhone SE y pantallas muy estrechas */
@media (max-width: 380px) {
    .form-card-header .form-card-subtitle {
        display: none;
    }

    .form-card-icon {
        width: 32px;
        height: 32px;
    }
}

/* Reduced motion — respeta preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    .form-input-skeleton,
    .lookup-spinner.is-active svg,
    #submitBtn svg {
        animation: none !important;
    }

    .btn-back,
    .btn-ghost,
    .form-actions .btn,
    .lookup-refresh,
    .form-input,
    .form-select {
        transition: none !important;
    }

    .btn-back:active,
    .btn-ghost:active,
    .form-actions .btn:active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  MODULE: EP — EDIT PROFESIONAL
 *  Prefijo: .ep-
 * ═══════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   Back link
   ------------------------------------------------------------ */
.ep-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.ep-back:hover {
    color: var(--text-primary);
}

.ep-back svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.ep-header {
    margin-bottom: 1.5rem;
}

.ep-header__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

.ep-header__sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

/* ------------------------------------------------------------
   Avatar preview row
   ------------------------------------------------------------ */
.ep-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.ep-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.ep-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ep-avatar-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.ep-avatar-role {
    font-size: 12px;
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   Badge de estado
   ------------------------------------------------------------ */
.ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
    transition: background 0.25s, color 0.25s;
}

.ep-badge--active {
    background: var(--success-bg);
    color: var(--success);
}

.ep-badge--inactive {
    background: var(--error-bg);
    color: var(--error);
}

.ep-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* ------------------------------------------------------------
   Alertas del módulo
   ------------------------------------------------------------ */
.ep-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: 13px;
}

.ep-alert--error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.ep-alert svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ep-alert__list {
    margin: 4px 0 0;
    padding-left: 16px;
}

.ep-alert__list li {
    margin-bottom: 2px;
}

/* ------------------------------------------------------------
   Cards del módulo
   ------------------------------------------------------------ */
.ep-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.ep-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.ep-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ep-card__icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

.ep-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ep-card__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* ------------------------------------------------------------
   Grid y grupos de formulario
   ------------------------------------------------------------ */
.ep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.ep-form-group--full {
    grid-column: 1 / -1;
}

.ep-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.ep-label--required::after {
    content: " *";
    color: var(--error);
}

.ep-input {
    width: 100%;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    padding: 0 12px;
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.ep-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.12);
}

.ep-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
}

/* ------------------------------------------------------------
   Password con toggle
   ------------------------------------------------------------ */
.ep-pw-wrap {
    position: relative;
}

.ep-pw-wrap .ep-input {
    padding-right: 38px;
}

.ep-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.ep-pw-toggle:hover {
    color: var(--text-primary);
}

.ep-pw-toggle svg {
    width: 15px;
    height: 15px;
}

/* ------------------------------------------------------------
   Indicador de fortaleza de contraseña
   ------------------------------------------------------------ */
.ep-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.ep-strength__bar {
    flex: 1;
    height: 3px;
    border-radius: 99px;
    background: var(--border-light);
    transition: background 0.3s;
}

.ep-strength__bar--weak {
    background: var(--error);
}

.ep-strength__bar--medium {
    background: var(--warning);
}

.ep-strength__bar--strong {
    background: var(--success);
}

/* ------------------------------------------------------------
   Role cards
   ------------------------------------------------------------ */
.ep-role-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ep-role-card {
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.ep-role-card:hover {
    background: var(--bg-card-hover);
}

.ep-role-card--selected {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.ep-role-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.ep-role-card--selected .ep-role-card__icon {
    background: rgba(25, 156, 130, 0.15);
}

.ep-role-card__icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

.ep-role-card--selected .ep-role-card__icon svg {
    stroke: var(--primary);
}

.ep-role-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.ep-role-card__desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.ep-role-card__check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    display: none;
    align-items: center;
    justify-content: center;
}

.ep-role-card--selected .ep-role-card__check {
    display: flex;
}

.ep-role-card__check svg {
    width: 9px;
    height: 9px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
}

/* ------------------------------------------------------------
   Toggle row — estado activo/inactivo
   ------------------------------------------------------------ */
.ep-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ep-toggle-info__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 3px;
}

.ep-toggle-info__desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ------------------------------------------------------------
   Toggle switch (iOS style)
   ------------------------------------------------------------ */
.ep-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ep-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ep-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--border);
    border-radius: 34px;
    transition: background 0.25s;
}

.ep-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s;
}

.ep-switch input:checked+.ep-slider {
    background: var(--primary);
}

.ep-switch input:checked+.ep-slider::before {
    transform: translateX(20px);
}

.ep-switch input:focus-visible+.ep-slider {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Acciones del formulario
   ------------------------------------------------------------ */
.ep-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 0.25rem;
    padding-bottom: 2rem;
}

.ep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-decoration: none;
    border: none;
}

.ep-btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 500;
}

.ep-btn--ghost:hover {
    background: var(--primary-bg);
    border-color: rgba(25, 156, 130, 0.3);
    color: var(--primary-dark);
}

a.ep-btn--ghost, a.ep-btn--ghost:link, a.ep-btn--ghost:visited { color: var(--text-muted); }
a.ep-btn--ghost:hover { color: var(--primary-dark); }

.ep-btn--primary {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(25, 156, 130, 0.28);
}

.ep-btn--primary:hover {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgba(25, 156, 130, 0.35);
    transform: translateY(-1px);
}

.ep-btn--primary:active {
    transform: scale(0.98);
}

a.ep-btn--primary, a.ep-btn--primary:link, a.ep-btn--primary:visited { color: #fff; }
a.ep-btn--primary:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════════
 *  MODULE: PATIENTS (pat-)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────── */
.pat-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Hero bar ────────────────────────────────────────────────── */
.pat-hero {
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.pat-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.pat-hero::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 100px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.pat-hero-text {
    position: relative;
    z-index: 1;
}

.pat-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    line-height: 1.2;
}

.pat-hero-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.pat-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.pat-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 40px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.pat-hero-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pat-hero-btn--primary {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
}

.pat-hero-btn--primary:hover {
    background: rgba(255,255,255,0.28);
    color: #ffffff;
    border-color: rgba(255,255,255,0.45);
}

a.pat-hero-btn--primary,
a.pat-hero-btn--primary:link,
a.pat-hero-btn--primary:visited,
a.pat-hero-btn--primary:hover { color: #ffffff; }

/* ── Stats bar ───────────────────────────────────────────────── */
.pat-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pat-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    cursor: default;
}

.pat-stat:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.pat-stat--active { border-left: 3px solid #10b981; }
.pat-stat--alta   { border-left: 3px solid #3b82f6; }
.pat-stat--abandono { border-left: 3px solid #f59e0b; }
.pat-stat--total  { border-left: 3px solid var(--primary); }

.pat-stat__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pat-stat__icon svg {
    width: 20px;
    height: 20px;
}

.pat-stat--total .pat-stat__icon  { background: rgba(13,148,136,0.1); color: var(--primary); }
.pat-stat--active .pat-stat__icon { background: rgba(16,185,129,0.1); color: #10b981; }
.pat-stat--alta .pat-stat__icon   { background: rgba(59,130,246,0.1); color: #3b82f6; }
.pat-stat--abandono .pat-stat__icon { background: rgba(245,158,11,0.1); color: #f59e0b; }

.pat-stat__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pat-stat__num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.pat-stat__label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Filter + Search toolbar ─────────────────────────────────── */
.pat-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pat-filter-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 5px;
    flex-wrap: wrap;
}

.pat-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pat-filter-tab:hover {
    background: var(--bg-body);
    color: var(--text-primary);
}

.pat-filter-tab.is-active {
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    border-color: var(--primary-dark);
    box-shadow: 0 1px 4px rgba(13,148,136,0.25);
}

.pat-filter-tab.is-active--green  { background: #10b981; border-color: #059669; }
.pat-filter-tab.is-active--blue   { background: #3b82f6; border-color: #2563eb; }
.pat-filter-tab.is-active--amber  { background: #f59e0b; border-color: #d97706; }

.pat-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(0,0,0,0.08);
    color: inherit;
    line-height: 1;
}

.pat-filter-tab.is-active .pat-tab-count,
.pat-filter-tab.is-active--green .pat-tab-count,
.pat-filter-tab.is-active--blue .pat-tab-count,
.pat-filter-tab.is-active--amber .pat-tab-count {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}

.pat-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pat-search-box {
    position: relative;
    flex: 1;
    min-width: 0;
}

.pat-search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--text-muted);
    pointer-events: none;
}

.pat-search-input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
    box-sizing: border-box;
}

.pat-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.pat-search-input::placeholder {
    color: var(--text-muted);
}

.pat-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "Limpiar filtros": ghost btn con icono — gap interno entre svg y texto */
.pat-toolbar-actions .ep-btn {
    gap: 6px;
}

.pat-toolbar-actions .ep-btn svg {
    flex-shrink: 0;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.pat-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.pat-alert svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.pat-alert--success {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    color: #065f46;
}

.pat-alert--error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    color: #991b1b;
}

/* ── Table card ──────────────────────────────────────────────── */
.pat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: clip; /* clips border-radius but doesn't block child scroll containers */
    box-shadow: var(--shadow-sm);
}

.pat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.pat-card-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.pat-card-info strong {
    color: var(--text-primary);
    font-weight: 600;
}

.pat-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.pat-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.pat-table th {
    text-align: left;
    padding: 13px 20px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    background: var(--bg-body);
    white-space: nowrap;
}

.pat-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.pat-table tbody tr {
    transition: background 0.15s ease;
}

.pat-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.pat-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Cell: User ──────────────────────────────────────────────── */
.pat-cell-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.pat-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pat-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.pat-user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pat-type-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.pat-type-tag.clinic {
    background: rgba(59,130,246,0.08);
    color: #3b82f6;
    border-color: rgba(59,130,246,0.2);
}

/* ── Cell: Contact ───────────────────────────────────────────── */
.pat-cell-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pat-contact-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pat-contact-item svg {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Cell: Status badge ──────────────────────────────────────── */
.pat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pat-badge--active  { background: rgba(16,185,129,0.1); color: #059669; }
.pat-badge--info    { background: rgba(59,130,246,0.1); color: #2563eb; }
.pat-badge--warning { background: rgba(245,158,11,0.1); color: #d97706; }
.pat-badge--neutral { background: var(--border-light); color: var(--text-muted); }

.pat-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Cell: Visit dates ───────────────────────────────────────── */
.pat-cell-visit {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pat-visit-date {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
}

.pat-visit-next {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pat-visit-none {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.pat-badge--new-entry {
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 0.74rem;
}

/* ── Cell: Actions ───────────────────────────────────────────── */
.pat-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.pat-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid rgba(25, 156, 130, 0.22);
    transition: all 0.18s ease;
    text-decoration: none;
    background: var(--primary-bg);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

a.pat-btn-action, a.pat-btn-action:link, a.pat-btn-action:visited { color: var(--primary); }
a.pat-btn-action:hover { color: var(--primary-dark); }

.pat-btn-action svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pat-btn-action:hover {
    background: rgba(25, 156, 130, 0.12);
    border-color: rgba(25, 156, 130, 0.5);
    color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(25, 156, 130, 0.18);
}

/* ── Empty state ─────────────────────────────────────────────── */
.pat-empty {
    text-align: center;
    padding: 64px 20px;
}

.pat-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-body);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pat-empty__icon svg {
    width: 34px;
    height: 34px;
}

.pat-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.pat-empty__desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 380px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* ── Pagination wrapper ──────────────────────────────────────── */
.pat-pagination {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pat-pagination-info {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.pat-pagination-info strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* ── Paginator custom (Fase 3) ───────────────────────────────── */
.pat-pag {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-left: auto;
}

.pat-pag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.pat-pag-btn:hover {
    background: var(--primary-bg);
    border-color: rgba(25, 156, 130, 0.4);
    color: var(--primary-dark);
}

.pat-pag-btn:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.pat-pag-btn.is-disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.pat-pag-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pat-pag-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pat-pag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

a.pat-pag-num,
a.pat-pag-num:link,
a.pat-pag-num:visited { color: var(--text-secondary); }

.pat-pag-num:hover {
    background: var(--primary-bg);
    color: var(--primary-dark);
}

a.pat-pag-num:hover { color: var(--primary-dark); }

.pat-pag-num.is-current {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary-dark);
    box-shadow: 0 1px 4px rgba(13,148,136,0.25);
    cursor: default;
}

.pat-pag-num:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.pat-pag-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    user-select: none;
}

.pat-pag-summary {
    display: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex: 1;
    text-align: center;
    min-width: 0;
}

.pat-pag-summary strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Touch: ≥ 44px en dispositivos coarse */
@media (pointer: coarse) {
    .pat-pag-btn,
    .pat-pag-num {
        min-height: 44px;
        min-width: 44px;
    }
}

/* iPad portrait + tablets (641-1023.98): solo iconos en prev/next, números visibles */
@media (min-width: 641px) and (max-width: 1023.98px) {
    .pat-pag-btn__lbl { display: none; }
    .pat-pag-btn {
        padding: 0;
        min-width: 44px;
        justify-content: center;
    }
}

/* Mobile (≤640): solo prev / summary / next */
@media (max-width: 640px) {
    .pat-pagination-info { display: none; }

    .pat-pag {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        gap: 10px;
    }

    .pat-pag-list { display: none; }
    .pat-pag-summary { display: block; }
    .pat-pag-btn__lbl { display: none; }
    .pat-pag-btn {
        padding: 0;
        min-width: 44px;
        justify-content: center;
    }
}

/* Hover-sticky fix: cancela hover en touch */
@media (hover: none) {
    .pat-pag-btn:hover {
        background: var(--bg-card);
        border-color: var(--border);
        color: var(--text-primary);
    }
    .pat-pag-num:hover {
        background: transparent;
        color: var(--text-secondary);
    }
    .pat-pag-num.is-current:hover {
        background: var(--primary);
        color: #ffffff;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pat-pag-btn,
    .pat-pag-num { transition: none !important; }
}

/* ── Animación de entrada del módulo ─────────────────────────── */
@keyframes pat-slide-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pat-container > * {
    animation: pat-slide-in 0.38s ease both;
}

.pat-container > *:nth-child(1) { animation-delay: 0ms; }
.pat-container > *:nth-child(2) { animation-delay: 65ms; }
.pat-container > *:nth-child(3) { animation-delay: 130ms; }
.pat-container > *:nth-child(4) { animation-delay: 195ms; }
.pat-container > *:nth-child(5) { animation-delay: 260ms; }
.pat-container > *:nth-child(6) { animation-delay: 325ms; }

/* ── Skeleton loader (GPU-accelerated shimmer) ───────────────── */
@keyframes pat-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.pat-skeleton-row td {
    padding: 18px 20px;
}

.pat-skeleton-row:hover {
    background: transparent !important;
}

.pat-skel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #e8ecef;
    display: block;
}

.pat-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0,
        rgba(255,255,255,0.55) 50%,
        transparent 100%);
    animation: pat-shimmer 1.4s infinite linear;
    will-change: transform;
}

.pat-skel--user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pat-skel--circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pat-skel--text-sm { height: 12px; width: 120px; }
.pat-skel--text-xs { height: 10px; width: 80px; margin-top: 6px; }
.pat-skel--text-md { height: 12px; width: 100px; }
.pat-skel--text-md-2 { height: 10px; width: 70px; margin-top: 6px; }
.pat-skel--badge { height: 22px; width: 64px; border-radius: var(--radius-lg); }
.pat-skel--btn { height: 34px; width: 88px; border-radius: 7px; margin-left: auto; }

/* ── Responsive: ≤1200px (laptop estrecho) ───────────────────── */
@media (max-width: 1200px) {
    .pat-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Responsive: ≤960px (tablet horizontal / laptop pequeño) ─── */
@media (max-width: 960px) {
    .pat-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Filtros: scroll horizontal con fade-edge + snap (indica overflow) */
    .pat-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 8px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
    }
    .pat-filter-tabs::-webkit-scrollbar { display: none; }
    .pat-filter-tab { scroll-snap-align: start; }
}

/* ── Responsive: tabla compacta ≤1280px con sidebar visible ─────
 *  Cubre iPad 11" landscape (1194px) y laptops hasta 1280px donde
 *  el área útil de contenido puede ser < 880px con el sidebar abierto.
 * ─────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1280px) {

    .pat-table th {
        padding: 10px 13px;
        font-size: 0.69rem;
    }

    .pat-table td {
        padding: 11px 13px;
    }

    .pat-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .pat-cell-user {
        gap: 10px;
    }

    .pat-user-name {
        max-width: 150px;
        font-size: 0.86rem;
    }

    /* Ocultar iconos SVG de contacto para ahorrar ancho */
    .pat-contact-item svg {
        display: none;
    }

    .pat-contact-item {
        font-size: 0.8rem;
    }

    /* Botón acción: solo icono + tooltip accesible */
    .pat-btn-action {
        padding: 7px 10px;
    }

    .pat-btn-label {
        display: none;
    }

    .pat-btn-action svg {
        width: 15px;
        height: 15px;
    }

    .pat-table {
        min-width: 0;
    }
}

/* ── Responsive: ≤768px (tablet portrait / móvil grande) ─────── */
@media (max-width: 768px) {
    .pat-hero {
        padding: 20px 20px;
        gap: 16px;
    }

    .pat-hero-title {
        font-size: 1.2rem;
    }

    .pat-hero-sub {
        font-size: 0.875rem;
    }

    .pat-hero-actions {
        width: 100%;
    }

    .pat-hero-btn {
        flex: 1;
        justify-content: center;
    }

    .pat-stat__num {
        font-size: 1.3rem;
    }

    .pat-stat__label {
        font-size: 0.75rem;
    }

    /* Toolbar: apilar verticalmente */
    .pat-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pat-toolbar-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .pat-toolbar-actions .ep-btn {
        flex: 1;
        justify-content: center;
    }

    /* Card-stack: tabla se convierte en tarjetas apiladas */
    .pat-card {
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .pat-card-header {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 8px;
        box-shadow: var(--shadow-sm);
    }

    .pat-pagination {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-top: 4px;
        box-shadow: var(--shadow-sm);
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .pat-table-wrapper {
        overflow-x: visible;
        width: 100%;
    }

    .pat-table { min-width: 0; }

    .pat-table thead { display: none; }

    .pat-table,
    .pat-table tbody { display: block; width: 100%; }

    .pat-table tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .pat-table tr:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .pat-table tr:last-child {
        margin-bottom: 0;
    }

    .pat-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid var(--border-light);
        padding: 12px 16px;
        overflow-wrap: break-word;
        word-break: break-word;
        vertical-align: top;
    }

    .pat-table td:last-child {
        border-bottom: none;
    }

    .pat-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 0.62rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 5px;
    }

    .pat-cell-actions {
        text-align: left;
        white-space: normal;
    }

    .pat-btn-action {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .pat-user-name { max-width: none; }
}

/* ── iPad portrait + tablets verticales: tabla → grid 2 col (641-1023.98px) ──
 *  En 641-768px las reglas de este bloque SOBRESCRIBEN al card-stack lineal
 *  del bloque ≤768 (cascade order). Hero/stats/toolbar siguen compactos
 *  porque esas reglas viven en el bloque ≤768 y no se duplican aquí.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1023.98px) {
    .pat-card {
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .pat-card-header {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 8px;
        box-shadow: var(--shadow-sm);
    }

    .pat-pagination {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-top: 4px;
        box-shadow: var(--shadow-sm);
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .pat-table-wrapper {
        overflow-x: visible;
        width: 100%;
    }

    .pat-table { min-width: 0; }
    .pat-table thead { display: none; }

    .pat-table,
    .pat-table tbody { display: block; width: 100%; }

    /* Cards en grid 2 columnas — aprovecha el ancho del iPad */
    .pat-table tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .pat-table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    /* empty-state ocupa las 2 columnas */
    .pat-table tr:has(td[colspan]) {
        grid-column: 1 / -1;
    }

    .pat-table tr:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .pat-table tr:last-child { margin-bottom: 0; }

    .pat-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid var(--border-light);
        padding: 12px 16px;
        overflow-wrap: break-word;
        word-break: break-word;
        vertical-align: top;
    }

    .pat-table td:last-child { border-bottom: none; }

    .pat-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 0.62rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 5px;
    }

    /* primera celda (Paciente) no necesita label — el avatar+nombre lo dice todo */
    .pat-table td:first-child::before { display: none; }

    /* acciones: full-width centrado */
    .pat-cell-actions { text-align: left; white-space: normal; }

    .pat-btn-action {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .pat-user-name { max-width: none; }

    /* skeleton rows también en grid */
    .pat-skeleton-row { grid-column: 1 / -1; }
}

/* ── Responsive: ≤480px (móvil pequeño) ─────────────────────── */
@media (max-width: 480px) {
    .pat-container {
        gap: 16px;
    }

    .pat-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .pat-stat {
        padding: 12px 12px;
        gap: 10px;
    }

    .pat-stat__icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .pat-stat__icon svg {
        width: 16px;
        height: 16px;
    }

    .pat-stat__num { font-size: 1.15rem; }
    .pat-stat__label { font-size: 0.72rem; }

    .pat-hero { padding: 18px 16px; }
    .pat-hero::before, .pat-hero::after { display: none; }
    .pat-hero-title { font-size: 1.1rem; }

    .pat-filter-tabs {
        padding: 4px;
    }

    .pat-filter-tab {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  PATIENTS — Card-stack mobile denso con CSS Grid (Fase 4)
 * ─────────────────────────────────────────────────────────────────
 *  En ≤640 sobrescribe el card-stack lineal de ≤768 con grid-areas.
 *  Layout:
 *      [avatar + nombre]                      [badge estado]
 *      [contacto cnic · phone (inline)                     ]
 *      [fecha · sig (inline)                               ]
 *      ─────────────────────────────────────────────────────
 *      [        botón Ver Expediente (full-width)          ]
 *
 *  Ahorro ~30-40% altura por card vs lineal con data-labels.
 *  Empty-state y skeleton-row vuelven a layout block.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .pat-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "user    status"
            "contact contact"
            "visit   visit"
            "action  action";
        row-gap: 8px;
        column-gap: 12px;
        padding: 14px;
        align-items: start;
    }

    /* Pseudo-labels innecesarios: las áreas son auto-explicativas */
    .pat-table td::before { display: none; }

    /* Reset celdas: el grid del <tr> maneja todo el layout */
    .pat-table td {
        border-bottom: none;
        padding: 0;
    }

    /* Asignación de áreas */
    .pat-table td[data-label="Paciente"] {
        grid-area: user;
        min-width: 0;
    }

    .pat-table td[data-label="Estado"] {
        grid-area: status;
        align-self: start;
        justify-self: end;
    }

    .pat-table td[data-label="Documento / Contacto"] { grid-area: contact; }
    .pat-table td[data-label="Citas"]                { grid-area: visit; }

    .pat-table td.pat-cell-actions {
        grid-area: action;
        padding-top: 10px;
        margin-top: 2px;
        border-top: 1px solid var(--border-light);
    }

    /* Compactar avatar y nombre */
    .pat-cell-user { gap: 10px; }
    .pat-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.78rem;
    }
    .pat-user-name { font-size: 0.92rem; }

    /* Contacto: items inline en una sola línea, wrap si no caben */
    .pat-cell-contact {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 14px;
    }
    .pat-contact-item { font-size: 0.82rem; }

    /* Visita: fecha + sig en una línea separadas por · */
    .pat-cell-visit {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 0;
        align-items: baseline;
    }
    .pat-visit-date,
    .pat-visit-next,
    .pat-visit-none { display: inline; }

    .pat-visit-next {
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.82rem;
    }
    .pat-visit-next::before,
    .pat-visit-none::before {
        content: "·";
        margin: 0 6px;
        color: var(--text-muted);
        font-weight: 700;
    }
    .pat-visit-date { font-size: 0.85rem; }

    /* Empty state: vuelve a layout block (sin grid) */
    .pat-table tr:has(td[colspan]) {
        display: block;
        padding: 0;
    }
    .pat-table tr:has(td[colspan]) td { padding: 24px; }

    /* Skeleton-row: mantener layout simple block (no grid) */
    .pat-table tr.pat-skeleton-row {
        display: block;
        padding: 0;
    }
    .pat-table tr.pat-skeleton-row td {
        padding: 14px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  PATIENTS — Touch / Accessibility refinements (Fase 1)
 * ─────────────────────────────────────────────────────────────────
 *  Quick-wins responsive sin cambios funcionales:
 *   · Touch targets ≥ 44px en dispositivos sin puntero fino
 *   · Cancela hover-sticky (transforms) cuando no hay hover real
 *   · Respeta prefers-reduced-motion del usuario
 * ═══════════════════════════════════════════════════════════════ */

/* ── Touch targets: pointer coarse (móvil / tablet) ─────────────── */
@media (pointer: coarse) {
    .pat-btn-action,
    .pat-hero-btn,
    .pat-filter-tab,
    .pat-controls .ep-btn {
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Icono ligeramente mayor para legibilidad táctil */
    .pat-btn-action svg { width: 16px; height: 16px; }

    /* Search: ya está en 42px, sólo asegurar 44 estable */
    .pat-search-input { height: 44px; }
}

/* ── Hover-sticky fix: cancela transforms en touch ──────────────── */
@media (hover: none) {
    .pat-stat:hover,
    .pat-btn-action:hover,
    .pat-table tbody tr:hover {
        transform: none;
    }

    .pat-stat:hover { box-shadow: var(--shadow-sm); }
    .pat-btn-action:hover { box-shadow: none; }
}

/* ── Reduced motion: respeta preferencia del sistema ───────────── */
@media (prefers-reduced-motion: reduce) {
    .pat-container > *,
    .pat-skel,
    .pat-skel::after {
        animation: none !important;
    }

    .pat-stat,
    .pat-btn-action,
    .pat-table tbody tr,
    .pat-hero-btn,
    .pat-filter-tab,
    .pat-search-input {
        transition: none !important;
    }

    .pat-stat:hover,
    .pat-btn-action:hover,
    .pat-table tbody tr:hover {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  PATIENTS — Refinamientos accesibilidad y mobile (Fase auditoria)
 * ─────────────────────────────────────────────────────────────────
 *  Tres fixes acotados al modulo de directorio:
 *   1. iOS auto-zoom prevention en search input (font 16px)
 *   2. Focus-visible accesible para navegacion por teclado
 *   3. Badge tab-count alineado verticalmente con el texto del tab
 * ═══════════════════════════════════════════════════════════════ */

/* iOS auto-zoom prevention en search input */
@media (max-width: 640px) {
    .pat-search-input {
        font-size: 16px;
    }
}

/* Focus-visible accesible — outline solo cuando navegan con teclado */
.pat-search-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pat-filter-tab:focus-visible,
.pat-hero-btn:focus-visible,
.pat-btn-action:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* En tabs activos el outline primary se confunde con el bg → usar dark */
.pat-filter-tab.is-active:focus-visible,
.pat-filter-tab.is-active--green:focus-visible,
.pat-filter-tab.is-active--blue:focus-visible,
.pat-filter-tab.is-active--amber:focus-visible {
    outline-color: rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
}

/* En hero (fondo primary) el outline primary se confunde → usar blanco */
.pat-hero-btn:focus-visible {
    outline-color: rgba(255, 255, 255, 0.7);
}

/* Badge tab-count: alineacion vertical mas precisa con el texto del tab */
.pat-tab-count {
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
 *  MODULE: USERS (usr-)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Animación de entrada ────────────────────────────────────── */
@keyframes usr-slide-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.usr-container > *,
.usr-page > * {
    animation: usr-slide-in 0.38s ease both;
}
.usr-container > *:nth-child(1), .usr-page > *:nth-child(1) { animation-delay: 0ms; }
.usr-container > *:nth-child(2), .usr-page > *:nth-child(2) { animation-delay: 65ms; }
.usr-container > *:nth-child(3), .usr-page > *:nth-child(3) { animation-delay: 130ms; }
.usr-container > *:nth-child(4), .usr-page > *:nth-child(4) { animation-delay: 195ms; }
.usr-container > *:nth-child(5), .usr-page > *:nth-child(5) { animation-delay: 260ms; }
.usr-container > *:nth-child(6), .usr-page > *:nth-child(6) { animation-delay: 325ms; }

/* Cascada acortada en móvil/tablet — evita esperas largas */
@media (max-width: 900px) {
    .usr-container > *, .usr-page > * { animation-duration: 0.28s; }
    .usr-container > *:nth-child(n+4), .usr-page > *:nth-child(n+4) { animation-delay: 195ms; }
}

/* Respetar preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .usr-container > *, .usr-page > * { animation: none !important; }
    .usr-role-card, .usr-input, .usr-select, .usr-pw-toggle,
    .ep-btn, .usr-back svg, .usr-strength__bar, .usr-slider,
    .usr-slider::before, .usr-preview-avatar { transition: none !important; }
}

/* ── Contenedores ────────────────────────────────────────────── */
.usr-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.usr-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* El <form> dentro de .usr-page hereda el mismo flujo y gap */
.usr-page > form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Hero (index) ────────────────────────────────────────────── */
.usr-hero {
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.usr-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.usr-hero-text { position: relative; z-index: 1; }

.usr-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 5px;
    line-height: 1.2;
}

.usr-hero-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.usr-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.usr-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 40px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.3);
}

.usr-hero-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.usr-hero-btn--primary {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}

.usr-hero-btn--primary:hover {
    background: rgba(255,255,255,0.28);
    color: #ffffff;
}

/* ── Stats bar ───────────────────────────────────────────────── */
.usr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.usr-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.usr-stat:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.usr-stat--total    { border-left: 3px solid var(--primary); }
.usr-stat--active   { border-left: 3px solid #10b981; }
.usr-stat--admin    { border-left: 3px solid #8b5cf6; }
/* BUG-OP-02 (Fase 5): rol operador — color amber/orange para distinguir
   visualmente de admin (violeta) y doctora (azul). El amber comunica
   "rol operativo / acceso parcial" sin sugerir privilegios totales. */
.usr-stat--operador { border-left: 3px solid #f59e0b; }
.usr-stat--doctor   { border-left: 3px solid #3b82f6; }

.usr-stat__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.usr-stat__icon svg { width: 20px; height: 20px; }

.usr-stat--total    .usr-stat__icon { background: rgba(13,148,136,0.1);  color: var(--primary); }
.usr-stat--active   .usr-stat__icon { background: rgba(16,185,129,0.1);  color: #10b981; }
.usr-stat--admin    .usr-stat__icon { background: rgba(139,92,246,0.1);  color: #8b5cf6; }
.usr-stat--operador .usr-stat__icon { background: rgba(245,158,11,0.12);  color: #d97706; }
.usr-stat--doctor   .usr-stat__icon { background: rgba(59,130,246,0.1);  color: #3b82f6; }

.usr-stat__body { display: flex; flex-direction: column; gap: 2px; }

.usr-stat__num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.usr-stat__label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Tabla card (index) ──────────────────────────────────────── */
.usr-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: clip;
    box-shadow: var(--shadow-sm);
}

.usr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.usr-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.usr-card-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 3px 0 0;
}

.usr-card-header .ep-btn svg {
    width: 15px; height: 15px; flex-shrink: 0; margin-right: 6px;
}

.usr-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.usr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 540px;
}

.usr-table th {
    text-align: left;
    padding: 13px 20px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    background: var(--bg-body);
    white-space: nowrap;
}

.usr-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.usr-table tbody tr { transition: background 0.15s ease; }
.usr-table tbody tr:hover { background: var(--bg-card-hover); }
.usr-table tbody tr:last-child td { border-bottom: none; }

/* ── Celda usuario ───────────────────────────────────────────── */
.usr-cell-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usr-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.usr-avatar--admin {
    background: #7c3aed;
}

/* BUG-OP-01 (Fase 5): avatar para rol operador (amber). */
.usr-avatar--operador {
    background: #d97706;
}

.usr-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.usr-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usr-user-handle { font-size: 0.78rem; color: var(--text-muted); }

/* ── Role badge ──────────────────────────────────────────────── */
.usr-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.usr-role-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

.usr-role-badge--admin    { background: rgba(139,92,246,0.1); color: #7c3aed; }
.usr-role-badge--operador { background: rgba(245,158,11,0.12); color: #b45309; }
.usr-role-badge--doctor   { background: rgba(59,130,246,0.1);  color: #2563eb; }

/* ── Status cell ─────────────────────────────────────────────── */
.usr-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
}

.usr-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.usr-status--active  { color: #059669; font-weight: 500; }
.usr-status--active  .usr-status__dot { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.usr-status--inactive { color: var(--text-muted); }
.usr-status--inactive .usr-status__dot { background: var(--border); }

/* ── Patients cell ───────────────────────────────────────────── */
.usr-patients-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.usr-patients-cell svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.usr-patients-cell strong { color: var(--text-primary); }

/* ── Action button ───────────────────────────────────────────── */
.usr-cell-actions { text-align: right; white-space: nowrap; }

.usr-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
    transition: all 0.15s ease;
    text-decoration: none;
    background: var(--bg-card);
    white-space: nowrap;
}

.usr-btn-edit svg { width: 13px; height: 13px; flex-shrink: 0; }

.usr-btn-edit:hover {
    background: var(--primary-bg);
    border-color: rgba(13,148,136,0.4);
    color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13,148,136,0.15);
}

/* ── Empty state ─────────────────────────────────────────────── */
.usr-empty {
    text-align: center;
    padding: 60px 20px;
}

.usr-empty__icon {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--bg-body);
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}

.usr-empty__icon svg { width: 32px; height: 32px; }

.usr-empty__title {
    font-size: 1rem; font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.usr-empty__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    max-width: 340px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

/* ── Cabecera de página (create/edit) ────────────────────────── */
.usr-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
    align-self: flex-start;
}

.usr-back svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.usr-back:hover { color: var(--primary); }
.usr-back:hover svg { transform: translateX(-3px); }

.usr-page-header {
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
}

.usr-page-header::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.usr-page-header-inner {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.usr-page-header__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.usr-page-header__icon svg { width: 22px; height: 22px; }

.usr-page-header__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.usr-page-header__sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* ── Alert (create/edit) ─────────────────────────────────────── */
.usr-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
}

.usr-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.usr-alert--error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    color: #991b1b;
}

.usr-alert__list { margin: 4px 0 0 16px; padding: 0; }
.usr-alert__list li { margin-bottom: 2px; }

/* ── Form card ───────────────────────────────────────────────── */
.usr-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.usr-form-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-body);
}

.usr-form-card__icon {
    width: 38px; height: 38px;
    border-radius: 9px;
    background: var(--primary-bg);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.usr-form-card__icon svg { width: 18px; height: 18px; }

.usr-form-card__title {
    font-size: 0.95rem; font-weight: 700;
    color: var(--text-primary); margin: 0;
}

.usr-form-card__sub {
    font-size: 0.8rem;
    color: var(--text-secondary); margin: 2px 0 0;
}

.usr-form-body { padding: 24px; }

/* ── Form grid ───────────────────────────────────────────────── */
.usr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.usr-form-group { display: flex; flex-direction: column; gap: 6px; }
.usr-form-group--full { grid-column: 1 / -1; }

.usr-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.usr-label--required::after { content: ' *'; color: var(--error); }

.usr-input,
.usr-select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-input);
    transition: var(--transition);
    box-sizing: border-box;
}

.usr-input:focus,
.usr-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.usr-input::placeholder { color: var(--text-muted); }

.usr-select-wrap { position: relative; }
.usr-select { appearance: none; padding-right: 36px; cursor: pointer; }
.usr-select-wrap svg {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    width: 15px; height: 15px;
}

.usr-hint { font-size: 0.78rem; color: var(--text-muted); }

/* ── Password field ──────────────────────────────────────────── */
.usr-pw-wrap { position: relative; }

.usr-pw-wrap .usr-input { padding-right: 46px; }

.usr-pw-toggle {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex; align-items: center;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.usr-pw-toggle:hover { color: var(--primary); }
.usr-pw-toggle svg { width: 16px; height: 16px; }

/* ── Strength bars ───────────────────────────────────────────── */
.usr-strength { display: flex; gap: 5px; margin-top: 6px; }

.usr-strength__bar {
    flex: 1; height: 5px;
    border-radius: 3px;
    background: var(--border);
    transition: background 0.2s ease;
}

.usr-strength__bar--weak   { background: #ef4444; }
.usr-strength__bar--medium { background: #f59e0b; }
.usr-strength__bar--strong { background: #10b981; }

/* ── Avatar preview (edit) ───────────────────────────────────── */
.usr-avatar-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px 18px;
    background: var(--bg-body);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.usr-avatar-preview__tag {
    position: absolute;
    top: -9px; left: 18px;
    padding: 2px 9px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.usr-preview-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-weight: 700; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    transition: background 0.25s ease;
}

.usr-preview-avatar--admin    { background: #7c3aed; }
/* BUG-OP-05 (Fase 5): variante para rol operador. */
.usr-preview-avatar--operador { background: #d97706; }

.usr-preview-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.usr-preview-name {
    font-size: 1rem; font-weight: 700;
    color: var(--text-primary);
}

.usr-preview-role { font-size: 0.82rem; color: var(--text-secondary); }

.usr-preview-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-lg);
    font-size: 0.72rem; font-weight: 600;
    width: fit-content;
}

.usr-preview-badge--active   { background: rgba(16,185,129,0.1);  color: #059669; }
.usr-preview-badge--inactive { background: var(--border-light);   color: var(--text-muted); }

.usr-preview-badge__dot {
    width: 6px; height: 6px;
    border-radius: 50%; background: currentColor;
}

/* ── Role cards ──────────────────────────────────────────────── */
.usr-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 24px;
}

.usr-role-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.18s ease;
    background: var(--bg-card);
    user-select: none;
}

.usr-role-card:hover { border-color: var(--primary-light); background: var(--bg-body); }

.usr-role-card--selected {
    border-color: var(--primary) !important;
    background: rgba(13,148,136,0.04) !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.usr-role-card--selected-admin {
    border-color: #7c3aed !important;
    background: rgba(139,92,246,0.04) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

/* BUG-OP-03 (Fase 5): variante visual para rol operador. Coherente con
   el resto de placas que usan amber para este rol. */
.usr-role-card--selected-operador {
    border-color: #d97706 !important;
    background: rgba(245,158,11,0.06) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

.usr-role-card__icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}

.usr-role-card__icon svg { width: 22px; height: 22px; }
.usr-role-card[data-role="usuario"]  .usr-role-card__icon { background: rgba(59,130,246,0.1);  color: #3b82f6; }
.usr-role-card[data-role="admin"]    .usr-role-card__icon { background: rgba(139,92,246,0.1); color: #7c3aed; }
.usr-role-card[data-role="operador"] .usr-role-card__icon { background: rgba(245,158,11,0.12); color: #d97706; }

.usr-role-card__name {
    font-size: 0.95rem; font-weight: 700;
    color: var(--text-primary); margin-bottom: 4px;
}

.usr-role-card__desc {
    font-size: 0.82rem;
    color: var(--text-secondary); line-height: 1.4;
}

.usr-role-card__check {
    position: absolute;
    top: 12px; right: 12px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: none;
    align-items: center; justify-content: center;
}

.usr-role-card__check svg { width: 11px; height: 11px; }
.usr-role-card--selected .usr-role-card__check { display: flex; }
.usr-role-card--selected-admin    .usr-role-card__check { display: flex; background: #7c3aed; }
.usr-role-card--selected-operador .usr-role-card__check { display: flex; background: #d97706; }

/* ── Toggle row ──────────────────────────────────────────────── */
.usr-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

.usr-toggle-info { flex: 1; min-width: 0; }
.usr-toggle-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.usr-toggle-desc  { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Toggle switch ───────────────────────────────────────────── */
.usr-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.usr-switch input { opacity: 0; width: 0; height: 0; }

.usr-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border);
    border-radius: 26px;
    transition: background 0.22s ease;
}

.usr-slider::before {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.22s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.usr-switch input:checked + .usr-slider { background: #10b981; }
.usr-switch input:checked + .usr-slider::before { transform: translateX(22px); }
.usr-switch input:focus-visible + .usr-slider { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Form actions ────────────────────────────────────────────── */
.usr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* V4: SVG dentro de los botones del CTA (sin inline style en Blade). */
.usr-actions .ep-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ── Focus-visible coherente (a11y) ──────────────────────────── */
.usr-page .ep-btn--primary:focus-visible {
    outline: 3px solid rgba(13, 148, 136, 0.35);
    outline-offset: 2px;
}
.usr-page .ep-btn--ghost:focus-visible {
    outline: 3px solid var(--border);
    outline-offset: 2px;
}
.usr-pw-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}
.usr-back:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}
.usr-role-card:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}
.usr-role-card[data-role="admin"]:focus-visible {
    outline-color: #7c3aed;
}

/* ── Responsive: ≤1100px ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .usr-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── Responsive: ≤1024px (touch targets táctiles iPad/tablet) ── */
@media (max-width: 1024px) {
    .usr-page .ep-btn,
    .usr-actions .ep-btn { height: 44px; padding: 0 22px; border-radius: 10px; font-size: 0.92rem; }
    .usr-pw-toggle { width: 40px; height: 40px; padding: 0; right: 4px; justify-content: center; }
    .usr-pw-wrap .usr-input { padding-right: 50px; }
    .usr-back { padding: 8px 4px; min-height: 40px; }
    .usr-input { height: 44px; }
}

/* ── Responsive form: ≤900px (iPad portrait + tablet) ────────── */
@media (max-width: 900px) {
    .usr-page { max-width: 100%; }
    .usr-form-grid { grid-template-columns: 1fr; gap: 16px; }
    .usr-form-group--full { grid-column: 1; }
    .usr-avatar-preview { flex-direction: column; text-align: center; align-items: center; padding: 18px; }
    .usr-preview-info { align-items: center; }
}

/* ── Responsive: ≤768px (index list/table) ───────────────────── */
@media (max-width: 768px) {
    .usr-hero { padding: 20px 20px; }
    .usr-hero-title { font-size: 1.2rem; }
    .usr-hero-actions { width: 100%; }
    .usr-hero-btn { flex: 1; justify-content: center; }

    .usr-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .usr-stat__num { font-size: 1.3rem; }

    /* Tabla → card stack */
    .usr-card { overflow: visible; background: transparent; border: none; box-shadow: none; border-radius: 0; }
    .usr-card-header {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 8px;
    }
    .usr-table-wrapper { overflow-x: visible; width: 100%; }
    .usr-table { min-width: 0; }
    .usr-table thead { display: none; }
    .usr-table, .usr-table tbody { display: block; width: 100%; }
    .usr-table tr {
        display: block; width: 100%;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .usr-table tr:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .usr-table tr:last-child { margin-bottom: 0; }
    .usr-table td {
        display: block; width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid var(--border-light);
        padding: 12px 16px;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .usr-table td:last-child { border-bottom: none; }
    .usr-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700; font-size: 0.62rem;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.06em;
        margin-bottom: 5px;
    }
    .usr-cell-actions { text-align: left; white-space: normal; }
    .usr-btn-edit { width: 100%; justify-content: center; }
}

/* ── Responsive form: ≤600px (móvil) ─────────────────────────── */
@media (max-width: 600px) {
    .usr-role-grid { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
    .usr-actions { flex-direction: column-reverse; }
    .usr-actions .ep-btn { width: 100%; justify-content: center; }
}

/* ── Responsive: ≤480px ──────────────────────────────────────── */
@media (max-width: 480px) {
    .usr-container, .usr-page { gap: 16px; }
    .usr-stats { gap: 10px; }
    .usr-stat { padding: 12px 14px; gap: 10px; }
    .usr-stat__icon { width: 34px; height: 34px; border-radius: 8px; }
    .usr-stat__icon svg { width: 16px; height: 16px; }
    .usr-stat__num { font-size: 1.15rem; }
    .usr-hero { padding: 18px 16px; }
    .usr-hero::before { display: none; }
    .usr-page-header { padding: 18px 20px; }
    .usr-form-body { padding: 18px 16px; }
    .usr-form-grid { gap: 14px; }
    .usr-toggle-row { padding: 16px 20px; }
    .usr-role-grid { padding: 16px; gap: 12px; }
}

/* ── Responsive: ≤420px (móvil pequeño/iPhone SE) ───────────── */
@media (max-width: 420px) {
    .usr-form-card__head { padding: 14px 16px; gap: 10px; }
    .usr-form-card__icon { width: 34px; height: 34px; }
    .usr-form-card__icon svg { width: 16px; height: 16px; }
    .usr-form-card__title { font-size: 0.9rem; }
    .usr-form-card__sub { font-size: 0.75rem; }
    .usr-page-header__title { font-size: 1.05rem; }
    .usr-page-header__sub { font-size: 0.8rem; }
    .usr-role-card { padding: 16px; }
    .usr-avatar-preview { padding: 20px 16px 16px; }
    .usr-avatar-preview__tag { left: 12px; }
}

/* ── Sticky bottom bar (móvil ≤600px) — actions siempre visibles ── */
@media (max-width: 600px) {
    .usr-page > form > .usr-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  Layout 2 columnas (R3 + R4)
 *  En ≥1100px: form a la izquierda · preview + info-card sticky a la derecha
 *  En <1100px: flujo vertical natural (aside primero, luego form)
 * ═══════════════════════════════════════════════════════════════ */
.usr-page__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.usr-page__aside,
.usr-page__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Los hijos del nuevo layout heredan la animación de entrada en cascada. */
.usr-page__aside > *,
.usr-page__main > * {
    animation: usr-slide-in 0.38s ease both;
}
.usr-page__aside > *:nth-child(1) { animation-delay: 130ms; }
.usr-page__aside > *:nth-child(2) { animation-delay: 195ms; }
.usr-page__main  > *:nth-child(1) { animation-delay: 195ms; }
.usr-page__main  > *:nth-child(2) { animation-delay: 260ms; }
.usr-page__main  > *:nth-child(3) { animation-delay: 325ms; }
@media (prefers-reduced-motion: reduce) {
    .usr-page__aside > *, .usr-page__main > * { animation: none !important; }
}

@media (min-width: 1100px) {
    .usr-page {
        max-width: 1180px;
    }
    .usr-page__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "main aside";
        gap: 24px;
        align-items: start;
    }
    .usr-page__main  { grid-area: main; }
    .usr-page__aside {
        grid-area: aside;
        position: sticky;
        top: 16px;
        z-index: 5;
    }
    /* Sticky cobra sentido real: el aside acompaña el scroll del form. */
    .usr-page__aside .usr-avatar-preview { position: static; }
}

/* En desktop ancho extra, damos respiro al aside. */
@media (min-width: 1400px) {
    .usr-page { max-width: 1240px; }
    .usr-page__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
 *  Modal de confirmación pre-submit (UX3)
 *  Usa <dialog> HTML5 nativo (top-layer del viewport).
 * ═══════════════════════════════════════════════════════════════ */
.usr-confirm-modal {
    /* Centrado defensivo: algunos resets globales pisan el `margin: auto`
       que aplica el user-agent al <dialog>[open]. Forzamos el centrado
       con position: fixed + inset: 0 + margin: auto, técnica moderna que
       no entra en conflicto con la animación basada en transform. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100% - 32px);
    max-width: 480px;
    height: -moz-max-content;
    height: max-content;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);

    border: none;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 32px 70px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(15, 23, 42, 0.08);
    background: var(--bg-card);
    color: var(--text-primary);
    overflow: hidden;
}
.usr-confirm-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.usr-confirm-modal[open] {
    animation: usr-confirm-pop 0.22s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes usr-confirm-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .usr-confirm-modal[open] { animation: none !important; }
}

.usr-confirm-modal__form {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.usr-confirm-modal__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border-light);
}
.usr-confirm-modal__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.usr-confirm-modal__icon svg { width: 20px; height: 20px; }

.usr-confirm-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.usr-confirm-modal__sub {
    margin: 3px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.usr-confirm-modal__body {
    display: flex;
    flex-direction: column;
    padding: 16px 24px 8px;
}

.usr-confirm-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.usr-confirm-row:last-child { border-bottom: 0; }
.usr-confirm-row__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.usr-confirm-row__value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.usr-confirm-row__value--mono {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.usr-confirm-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}
.usr-confirm-role--admin {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}
/* BUG-OP-03 (Fase 5): rol operador en el modal de confirmacion. */
.usr-confirm-role--operador {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.usr-confirm-modal__note {
    margin: 0 24px 16px;
    padding: 10px 12px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    color: #115e59;
    font-size: 0.8rem;
    line-height: 1.5;
}

.usr-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-body);
    flex-wrap: wrap;
}
.usr-confirm-modal__actions .ep-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Responsive: móvil pequeño */
@media (max-width: 480px) {
    .usr-confirm-modal {
        width: calc(100% - 20px);
        border-radius: 14px;
    }
    .usr-confirm-modal__head { padding: 16px 18px 12px; gap: 12px; }
    .usr-confirm-modal__icon { width: 38px; height: 38px; }
    .usr-confirm-modal__body { padding: 12px 18px 4px; }
    .usr-confirm-modal__note { margin: 0 18px 12px; }
    .usr-confirm-modal__actions { padding: 12px 18px 14px; }
    .usr-confirm-modal__actions .ep-btn { width: 100%; justify-content: center; }
    .usr-confirm-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; }
    .usr-confirm-row__value { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
 *  NCF — Nueva Nota Clínica  ·  Clinical Workbench v2 (rediseño)
 *  resources/views/admin/clinical-notes/create.blade.php
 *  Dirección: SaaS moderno · acento de color por paso · responsive real
 *  Estructura preservada · 100% de IDs/JS/autosave/sesión intactos.
 *  Desktop-first (coherente con app.css) · max-width queries abajo.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────
 * Se definen en .ncf-app Y en los componentes que el JS monta fuera
 * de .ncf-app (el modal de plantillas es hermano de .ncf-app en el
 * markup; el datepicker y su backdrop se appendean a <body>). Si los
 * tokens vivieran solo en .ncf-app, esos elementos resolverían
 * var(--ncf-*) como indefinido y quedarían sin fondo/borde. */
.ncf-app,
.ncf-overlay,
.ncdtp-panel,
.ncdtp-backdrop {
    /* Neutros */
    --ncf-bg-1:        #f4f6fb;
    --ncf-bg-2:        #eef2f8;
    --ncf-surface:     #ffffff;
    --ncf-surface-2:   #f8fafc;
    --ncf-surface-3:   #f1f5f9;
    --ncf-ink:         #0f172a;
    --ncf-ink-2:       #1e293b;
    --ncf-mute:        #475569;
    --ncf-mute-2:      #64748b;
    --ncf-mute-3:      #94a3b8;
    --ncf-line:        #e4e9f0;
    --ncf-line-2:      #eef2f7;

    /* Acento de marca — alineado al verde-azulado del sistema (--primary,
       el mismo del sidebar). Los colores semánticos (riesgo, error, sesión,
       resaltado) NO se tocan. */
    --ncf-brand:       #199c82;   /* primary */
    --ncf-brand-ink:   #116d5b;   /* primary-dark */
    --ncf-brand-soft:  rgba(25, 156, 130, .10);
    --ncf-brand-ring:  rgba(25, 156, 130, .20);

    /* Acento por paso — alineado al primary del sistema */
    --step:            #199c82;
    --step-ink:        #116d5b;
    --step-soft:       rgba(25, 156, 130, .12);
    --step-ring:       rgba(25, 156, 130, .20);

    /* Acentos por paso → todos al primary del sistema */
    --acc-1:           #199c82;
    --acc-1-ink:       #116d5b;
    --acc-2:           #199c82;
    --acc-2-ink:       #116d5b;
    --acc-3:           #199c82;
    --acc-3-ink:       #116d5b;

    /* Estados */
    --ncf-danger:      #ef4444;
    --ncf-danger-soft: #fef2f2;
    --ncf-warn:        #f59e0b;
    --ncf-ok:          #22c55e;

    /* Sombras (suaves, modernas) */
    --ncf-sh-xs:       0 1px 2px rgba(15, 23, 42, .05);
    --ncf-sh-sm:       0 2px 6px rgba(15, 23, 42, .06);
    --ncf-sh-md:       0 8px 24px -8px rgba(15, 23, 42, .14);
    --ncf-sh-lg:       0 20px 48px -16px rgba(15, 23, 42, .22);
    --ncf-sh-pop:      0 24px 60px -12px rgba(15, 23, 42, .30);

    /* Radios */
    --ncf-r-xs:        8px;
    --ncf-r-sm:        10px;
    --ncf-r-md:        14px;
    --ncf-r-lg:        18px;
    --ncf-r-xl:        22px;

    --ncf-ease:        cubic-bezier(.22, 1, .36, 1);
    --ncf-fast:        140ms var(--ncf-ease);
    --ncf-mid:         220ms var(--ncf-ease);
}

/* Layout base — solo el contenedor principal */
.ncf-app {
    position: relative;
    min-height: 100%;
    margin: 0;
    color: var(--ncf-ink);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* El modal y el datepicker también necesitan la tipografía base */
.ncf-overlay, .ncdtp-panel { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ncf-ink); }

/* Hide elements while Alpine boots */
.ncf-app [x-cloak] { display: none !important; }
.ncf-app *, .ncf-app *::before, .ncf-app *::after { box-sizing: border-box; }

/* ── Ambient (sutil, plano, sin mesh ruidoso) ─────────────── */
.ncf-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1100px 460px at 50% -8%, rgba(79, 116, 240, .05), transparent 70%),
        linear-gradient(180deg, var(--ncf-bg-1) 0%, var(--ncf-bg-2) 100%);
}

/* ── Animaciones ──────────────────────────────────────────── */
@keyframes ncfFadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ncfFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ncfPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ncfPulseDot{ 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .35); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } }

/* ════════════════════════════════════════════════════════════
 *  COMMAND BAR
 * ════════════════════════════════════════════════════════════ */
.ncf-cmd {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 22px;
    margin: -2px 0 18px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    box-shadow: var(--ncf-sh-sm);
}
.ncf-cmd-left, .ncf-cmd-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ncf-cmd-right { flex-shrink: 0; }

.ncf-cmd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px 0 9px;
    border: 1px solid var(--ncf-line);
    border-radius: 9px;
    background: var(--ncf-surface);
    color: var(--ncf-mute);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ncf-fast);
    white-space: nowrap;
}
.ncf-cmd-back:hover { color: var(--ncf-ink); border-color: var(--ncf-mute-3); background: var(--ncf-surface-2); }
.ncf-cmd-back svg { width: 15px; height: 15px; }

.ncf-cmd-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--ncf-mute-2);
    font-weight: 500;
}
.ncf-cmd-crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncf-cmd-crumbs .sep { color: var(--ncf-mute-3); }
.ncf-cmd-crumbs .now { color: var(--ncf-ink); font-weight: 700; }

.ncf-cmd-crumbs-compact {
    display: none;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ncf-ink);
}
.ncf-cmd-crumbs-compact svg { width: 14px; height: 14px; color: var(--acc-2); flex-shrink: 0; }

/* Draft indicator */
.ncf-draft-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    background: var(--ncf-brand-soft);
    color: var(--ncf-brand-ink);
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--ncf-mid), transform var(--ncf-mid);
    pointer-events: none;
}
.ncf-draft-indicator.visible { opacity: 1; transform: translateY(0); }
.ncf-draft-indicator svg { width: 14px; height: 14px; }

/* Session pill */
.ncf-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ncf-line);
    border-radius: 9px;
    background: var(--ncf-surface);
    font-size: 12.5px;
    color: var(--ncf-mute);
    box-shadow: var(--ncf-sh-xs);
}
.ncf-session-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ncf-ok);
    flex-shrink: 0;
    animation: ncfPulseDot 2.6s var(--ncf-ease) infinite;
}
.ncf-session-dot--warn   { background: var(--ncf-warn);   animation: none; }
.ncf-session-dot--danger { background: var(--ncf-danger); animation: none; }
.ncf-session-pill-lbl { font-weight: 600; color: var(--ncf-mute-2); }
.ncf-session-pill-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ncf-ink-2); letter-spacing: .2px; }
.ncf-session-pill-rem {
    font-size: 11px;
    font-weight: 700;
    color: var(--ncf-mute-3);
    padding-left: 8px;
    border-left: 1px solid var(--ncf-line);
}
.ncf-session-pill-rem:empty { display: none; }
.ncf-session-pill-rem--warn { color: var(--ncf-warn); }

/* ════════════════════════════════════════════════════════════
 *  WORKSPACE GRID
 * ════════════════════════════════════════════════════════════ */
.ncf-workspace {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

/* ════════════════════════════════════════════════════════════
 *  RAIL (stepper vertical desktop)
 * ════════════════════════════════════════════════════════════ */
.ncf-rail {
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 16px;
    background: var(--ncf-surface);
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-lg);
    box-shadow: var(--ncf-sh-sm);
}

.ncf-rail-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 6px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ncf-line-2);
}
.ncf-rail-brand-ico {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--acc-2), var(--ncf-brand-ink));
    color: #fff;
    box-shadow: 0 4px 12px -3px var(--ncf-brand-ring);
}
.ncf-rail-brand-ico svg { width: 19px; height: 19px; }
.ncf-rail-brand-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--ncf-mute-3);
}
.ncf-rail-brand-title { font-size: 15px; font-weight: 700; color: var(--ncf-ink); line-height: 1.2; }

.ncf-rail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.ncf-rail-step {
    --s: var(--ncf-mute-3);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--ncf-fast);
    position: relative;
}
.ncf-rail-step:hover { background: var(--ncf-surface-2); }
.ncf-rail-step:focus-visible { outline: 2px solid var(--step); outline-offset: 2px; }

/* Acento por paso */
/* Stepper alineado al primary del sistema (coherente con los botones). */
#ncfInd1, #ncfInd2, #ncfInd3 { --s: #199c82; }

.ncf-rail-step-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--ncf-line);
    background: var(--ncf-surface);
    color: var(--ncf-mute-3);
    transition: var(--ncf-mid);
}
.ncf-rail-step-num  { font-size: 13px; font-weight: 700; transition: opacity var(--ncf-fast); }
.ncf-rail-step-check { position: absolute; width: 15px; height: 15px; opacity: 0; transform: scale(.6); transition: var(--ncf-fast); }

.ncf-rail-step-info { min-width: 0; }
.ncf-rail-step-title { font-size: 13.5px; font-weight: 700; color: var(--ncf-ink-2); line-height: 1.25; }
.ncf-rail-step-sub   { font-size: 11.5px; color: var(--ncf-mute-2); line-height: 1.3; margin-top: 1px; }

/* Estado activo */
.ncf-rail-step.active {
    background: color-mix(in srgb, var(--s) 9%, transparent);
}
.ncf-rail-step.active .ncf-rail-step-marker {
    border-color: var(--s);
    background: var(--s);
    color: #fff;
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--s) 45%, transparent);
}
.ncf-rail-step.active .ncf-rail-step-title { color: var(--ncf-ink); }

/* Estado completado */
.ncf-rail-step.done .ncf-rail-step-marker {
    border-color: var(--s);
    background: color-mix(in srgb, var(--s) 14%, #fff);
    color: var(--s);
}
.ncf-rail-step.done .ncf-rail-step-num   { opacity: 0; }
.ncf-rail-step.done .ncf-rail-step-check { opacity: 1; transform: scale(1); }

/* Conectores verticales */
.ncf-rail-connector {
    width: 2px;
    height: 14px;
    margin-left: 25px;
    border-radius: 2px;
    background: var(--ncf-line);
    transition: background var(--ncf-mid);
}
.ncf-rail-connector.done { background: color-mix(in srgb, #199c82 55%, var(--ncf-line)); }

.ncf-rail-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 10px;
    border-radius: 10px;
    background: var(--ncf-surface-2);
    border: 1px dashed var(--ncf-line);
    font-size: 11px;
    line-height: 1.35;
    color: var(--ncf-mute-2);
    font-weight: 500;
}
.ncf-rail-foot svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--acc-2); }

/* Barra de progreso del rail — oculta en desktop (el rail vertical ya muestra
   progreso con marcadores/conectores); se activa en el strip de ≤1024. */
.ncf-rail-progress { display: none; }

/* ════════════════════════════════════════════════════════════
 *  CONTENT + ALERTS
 * ════════════════════════════════════════════════════════════ */
.ncf-content { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.ncf-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: var(--ncf-r-md);
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid transparent;
    animation: ncfFadeUp .3s var(--ncf-ease) both;
}
.ncf-alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.ncf-alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.ncf-alert--error   { background: var(--ncf-danger-soft); border-color: #fecaca; color: #991b1b; }
.ncf-alert--error strong { display: block; margin-bottom: 4px; }
.ncf-alert--error ul { margin: 0; padding-left: 18px; }
.ncf-alert--error li { margin-bottom: 2px; }

/* ════════════════════════════════════════════════════════════
 *  FORM CARD + PANELS
 * ════════════════════════════════════════════════════════════ */
.ncf-form-card {
    background: var(--ncf-surface);
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-xl);
    box-shadow: var(--ncf-sh-md);
    overflow: hidden;
}

.ncf-panel { display: none; }
.ncf-panel.active { display: block; animation: ncfPanelIn .32s var(--ncf-ease) both; }

/* Acento de panel por paso */
/* Los 3 headers usan el primary del sistema (sin color por paso),
   coherente con los botones primarios. */
.ncfp-hd--blue, .ncfp-hd--teal, .ncfp-hd--purple,
#ncfPanel1, #ncfPanel2, #ncfPanel3 { --step: #199c82; --step-ink: #116d5b; }

/* Panel header */
.ncfp-hd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--step) 7%, #fff), var(--ncf-surface));
    border-bottom: 1px solid var(--ncf-line);
}
.ncfp-hd::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--step);
}
.ncfp-hd-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--step);
    color: #fff;
    box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--step) 55%, transparent);
}
.ncfp-hd-icon svg { width: 22px; height: 22px; }
.ncfp-hd-text { flex: 1; min-width: 0; }
.ncfp-hd-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ncf-ink); line-height: 1.2; }
.ncfp-hd-sub { margin: 3px 0 0; font-size: 13px; color: var(--ncf-mute-2); line-height: 1.4; }
.ncfp-hd-step-badge {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--ncf-surface);
    border: 1px solid color-mix(in srgb, var(--step) 30%, var(--ncf-line));
    color: var(--step-ink);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Panel body + footer */
.ncfp-bd {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ncfp-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background: var(--ncf-surface-2);
    border-top: 1px solid var(--ncf-line);
}

/* ════════════════════════════════════════════════════════════
 *  FIELDS
 * ════════════════════════════════════════════════════════════ */
.ncf-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.ncf-field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ncf-field-row { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ncf-field-row--full,
.ncf-field-row--tecnicas,
.ncf-field-row--risk { grid-column: 1 / -1; }

.ncf-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ncf-ink-2);
    letter-spacing: .1px;
}
.ncf-lbl svg { width: 15px; height: 15px; color: var(--ncf-mute-3); flex-shrink: 0; }
.ncf-req { color: var(--ncf-danger); font-weight: 800; }

/* Inputs / textareas */
.ncf-input,
.ncf-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--ncf-ink);
    background: var(--ncf-surface);
    border: 1.5px solid var(--ncf-line);
    border-radius: var(--ncf-r-sm);
    transition: border-color var(--ncf-fast), box-shadow var(--ncf-fast), background var(--ncf-fast);
    -webkit-appearance: none;
    appearance: none;
}
.ncf-input { height: 46px; padding: 0 14px; }
.ncf-textarea { padding: 12px 14px; line-height: 1.6; resize: vertical; min-height: 90px; }

/* Nota anti auto-zoom iOS/Android: la regla GLOBAL (16px en pointer: coarse)
   vive al FINAL de este archivo y cubre todos los campos enfocables de TODA la
   app, incluidos los de este módulo. Aquí solo queda el override específico de
   los search de select2 (más abajo, L~8420) porque tienen font !important con
   mayor especificidad que la regla global. */
.ncf-input::placeholder,
.ncf-textarea::placeholder { color: var(--ncf-mute-3); }

.ncf-input:hover,
.ncf-textarea:hover { border-color: var(--ncf-mute-3); }
.ncf-input:focus,
.ncf-textarea:focus {
    outline: none;
    border-color: var(--ncf-brand);
    box-shadow: 0 0 0 4px var(--ncf-brand-ring);
    background: var(--ncf-surface);
}
.ncf-input.err,
.ncf-textarea.err {
    border-color: var(--ncf-danger) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important;
}
.ncf-app select.err + .select2-container .select2-selection {
    border-color: var(--ncf-danger) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important;
}
.ncf-input:disabled,
.ncf-input.is-locked {
    background: var(--ncf-surface-3);
    color: var(--ncf-mute-3);
    cursor: not-allowed;
    border-color: var(--ncf-line);
}

.ncf-hint-err {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ncf-danger);
    margin-top: -1px;
}
.ncf-hint-err::before {
    content: '!';
    display: grid;
    place-items: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--ncf-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

/* Input wrap with suffix icon */
.ncf-input-wrap { position: relative; }
.ncf-input-wrap .ncf-input { padding-right: 42px; }
.ncf-input-suffix {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ncf-mute-3);
    pointer-events: none;
    display: flex;
}
.ncf-input-suffix svg { width: 18px; height: 18px; }
.ncdtp-trigger { cursor: pointer; }

/* Native date/time (mobile) — hidden on desktop, JS uses custom picker */
.ncf-native-dt { display: none; gap: 10px; }
.ncf-native-dt .ncf-input { padding-right: 12px; }
.ncf-native-date { flex: 1 1 58%; }
.ncf-native-time { flex: 1 1 38%; }

/* Currency input group */
.ncf-igroup {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ncf-line);
    border-radius: var(--ncf-r-sm);
    overflow: hidden;
    transition: border-color var(--ncf-fast), box-shadow var(--ncf-fast);
    background: var(--ncf-surface);
}
.ncf-igroup:focus-within { border-color: var(--ncf-brand); box-shadow: 0 0 0 4px var(--ncf-brand-ring); }
.ncf-igroup-pre {
    display: grid;
    place-items: center;
    padding: 0 14px;
    background: var(--ncf-surface-2);
    border-right: 1.5px solid var(--ncf-line);
    color: var(--ncf-mute);
    font-weight: 700;
    font-size: 15px;
}
.ncf-igroup .ncf-input { border: none; border-radius: 0; height: 44px; }
.ncf-igroup .ncf-input:focus { box-shadow: none; }

/* ════════════════════════════════════════════════════════════
 *  RISK GROUP
 * ════════════════════════════════════════════════════════════ */
.ncf-risk-group {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.ncf-risk-btn {
    --risk-color: var(--ncf-mute-2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 48px;
    border: 1.5px solid var(--ncf-line);
    border-radius: var(--ncf-r-sm);
    background: var(--ncf-surface);
    color: var(--ncf-mute);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ncf-fast);
    text-align: center;
    line-height: 1.15;
}
.ncf-risk-ico { width: 17px; height: 17px; flex-shrink: 0; color: var(--ncf-mute-3); transition: var(--ncf-fast); }
.ncf-risk-btn:hover {
    border-color: var(--risk-color);
    color: var(--risk-color);
}
.ncf-risk-btn:hover .ncf-risk-ico { color: var(--risk-color); }
.ncf-risk-btn:focus-visible { outline: 2px solid var(--risk-color); outline-offset: 2px; }
.ncf-risk-btn.active {
    border-color: var(--risk-color);
    background: color-mix(in srgb, var(--risk-color) 12%, #fff);
    color: color-mix(in srgb, var(--risk-color) 70%, #000);
    box-shadow: inset 0 0 0 1px var(--risk-color), 0 4px 12px -4px color-mix(in srgb, var(--risk-color) 45%, transparent);
}
.ncf-risk-btn.active .ncf-risk-ico { color: var(--risk-color); }

/* ════════════════════════════════════════════════════════════
 *  NOTES EDITOR (toolbar · guided sheet · plain · preview)
 * ════════════════════════════════════════════════════════════ */
.ncf-notes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Segmented control */
.ncf-notes-tabs {
    display: inline-flex;
    padding: 4px;
    gap: 3px;
    background: var(--ncf-surface-3);
    border: 1px solid var(--ncf-line);
    border-radius: 11px;
}
.ncf-notes-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ncf-mute);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ncf-fast);
    white-space: nowrap;
}
.ncf-notes-tab svg { width: 14px; height: 14px; }
.ncf-notes-tab:hover { color: var(--ncf-ink); }
.ncf-notes-tab--active {
    background: var(--ncf-surface);
    color: var(--acc-2);
    box-shadow: var(--ncf-sh-xs);
}

/* Section jump chips */
.ncf-notes-sections { display: flex; flex-wrap: wrap; gap: 6px; }
.ncf-notes-jump {
    padding: 5px 10px;
    border: 1px solid var(--ncf-line);
    border-radius: 999px;
    background: var(--ncf-surface);
    color: var(--ncf-mute);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-notes-jump:hover { border-color: var(--acc-2); color: var(--acc-2); background: var(--ncf-brand-soft); }

/* ── Guided worksheet ──────────────────────────────────────── */
.ncf-ws {
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface);
    overflow: hidden;
    box-shadow: var(--ncf-sh-xs);
}
.ncf-ws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--ncf-surface-2), var(--ncf-surface));
    border-bottom: 1px solid var(--ncf-line);
}
.ncf-ws-header-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ncf-ws-header-txt { min-width: 0; }
.ncf-ws-header-right, .ncf-ws-footer-right { flex-shrink: 0; }
.ncf-ws-badge {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--ncf-brand-soft);
    color: var(--acc-2);
}
.ncf-ws-badge svg { width: 18px; height: 18px; }
.ncf-ws-title { font-size: 14px; font-weight: 700; color: var(--ncf-ink); line-height: 1.2; }
.ncf-ws-sub { font-size: 11.5px; color: var(--ncf-mute-2); line-height: 1.35; margin-top: 1px; }

.ncf-ws-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ncf-surface-3);
    border: 1px solid var(--ncf-line);
    white-space: nowrap;
}
.ncf-ws-pill.is-ok { background: #f0fdf4; border-color: #bbf7d0; }
.ncf-ws-pill-num { font-size: 13px; font-weight: 800; color: var(--ncf-ink); font-variant-numeric: tabular-nums; }
.ncf-ws-pill.is-ok .ncf-ws-pill-num { color: #15803d; }
.ncf-ws-pill-lbl { font-size: 10.5px; font-weight: 600; color: var(--ncf-mute-2); text-transform: uppercase; letter-spacing: .4px; }

/* Progress track */
.ncf-ws-track { height: 3px; background: var(--ncf-line-2); overflow: hidden; }
.ncf-ws-track-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--acc-2), var(--ncf-brand-ink));
    border-radius: 0 3px 3px 0;
    transition: width var(--ncf-mid);
}

/* Document body */
.ncf-ws-body { display: flex; max-height: 560px; overflow-y: auto; }
.ncf-ws-gutter {
    width: 8px;
    flex-shrink: 0;
    background:
        linear-gradient(90deg, transparent, transparent 6px, var(--ncf-line-2) 6px, var(--ncf-line-2) 7px);
}
.ncf-ws-doc { flex: 1; min-width: 0; padding: 8px 18px 18px; }

/* Empty state */
.ncf-ws-empty { text-align: center; padding: 40px 20px; }
.ncf-ws-empty-ico {
    display: grid; place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--ncf-surface-3);
    color: var(--ncf-mute-3);
}
.ncf-ws-empty-ico svg { width: 30px; height: 30px; }
.ncf-ws-empty-title { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--ncf-ink-2); }
.ncf-ws-empty-desc { margin: 0 auto 16px; max-width: 320px; font-size: 13px; color: var(--ncf-mute-2); line-height: 1.5; }
.ncf-ws-empty-desc em { color: var(--ncf-ink-2); font-style: normal; font-weight: 600; }
.ncf-ws-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--acc-2);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ncf-fast);
    box-shadow: 0 6px 16px -6px var(--ncf-brand-ring);
}
.ncf-ws-empty-cta:hover { background: var(--ncf-brand-ink); transform: translateY(-1px); }

/* Rows */
.ncf-ws-row { padding: 2px 0; }
.ncf-ws-row--blank { padding: 0; }

.ncf-ws-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ncf-line);
}
.ncf-ws-row:first-child .ncf-ws-section { margin-top: 6px; }
.ncf-ws-section-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--acc-2);
    flex-shrink: 0;
}
.ncf-ws-section-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    color: var(--ncf-ink);
    letter-spacing: .2px;
    text-transform: uppercase;
    padding: 2px 0;
}
.ncf-ws-section-input:focus { outline: none; }

.ncf-ws-letter, .ncf-ws-letter-fields { display: flex; gap: 9px; padding: 3px 0 3px 8px; }
.ncf-ws-letter-tag {
    flex-shrink: 0;
    min-width: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ncf-mute);
    padding-top: 9px;
}
.ncf-ws-letter-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: none;
    border-bottom: 1.5px solid var(--ncf-line);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ncf-ink);
    padding: 0 2px;
    transition: border-color var(--ncf-fast);
}
.ncf-ws-letter-input:focus { outline: none; border-bottom-color: var(--acc-2); }

/* Field pairs (label: value) */
.ncf-ws-fields { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 5px 0; }
.ncf-ws-letter-fields .ncf-ws-fields { flex: 1; padding: 0; }
.ncf-ws-field { display: inline-flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 auto; }
.ncf-ws-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ncf-mute-2);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.ncf-ws-field-input {
    height: 34px;
    border: none;
    border-bottom: 1.5px solid var(--ncf-line);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ncf-ink);
    padding: 0 2px;
    transition: border-color var(--ncf-fast), background var(--ncf-fast);
}
.ncf-ws-field-input:focus { outline: none; border-bottom-color: var(--acc-2); }
.ncf-ws-field.is-empty .ncf-ws-field-input { border-bottom-style: dashed; }
.ncf-ws-field.is-empty .ncf-ws-field-label { color: var(--ncf-mute-3); }

/* Hint / placeholder block */
.ncf-ws-hint {
    margin: 8px 0;
    padding: 12px 14px;
    border: 1px solid var(--ncf-line);
    border-left: 3px solid var(--ncf-mute-3);
    border-radius: 0 10px 10px 0;
    background: var(--ncf-surface-2);
    transition: var(--ncf-fast);
}
.ncf-ws-hint.is-filled { border-left-color: var(--acc-2); background: var(--ncf-brand-soft); }
.ncf-ws-hint-prompt {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ncf-mute);
    margin-bottom: 7px;
}
.ncf-ws-hint-prompt svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ncf-mute-3); }
.ncf-ws-hint.is-filled .ncf-ws-hint-prompt svg { color: var(--acc-2); }
/* (Se eliminó .ncf-ws-hint-input: el campo de respuesta ahora es el
   contenteditable .ncf-ws-rich. CSS muerto retirado en QA.) */

/* Campo de respuesta WYSIWYG (contenteditable) — el formato se ve EN VIVO */
.ncf-ws-rich {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--ncf-line);
    border-radius: 8px;
    background: var(--ncf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ncf-ink);
    padding: 8px 11px;
    outline: none;
    overflow-wrap: anywhere;
    transition: border-color var(--ncf-fast), box-shadow var(--ncf-fast);
}
.ncf-ws-rich:focus { border-color: var(--acc-2); box-shadow: 0 0 0 3px var(--ncf-brand-ring); }
.ncf-ws-rich:empty::before {
    content: attr(data-ph);
    color: var(--ncf-mute-3);
    pointer-events: none;
}
.ncf-ws-rich > div { min-height: 1.25em; }
.ncf-ws-rich strong { font-weight: 700; color: var(--ncf-ink); }
.ncf-ws-rich em { font-style: italic; }
.ncf-ws-rich u { text-decoration: underline; }
.ncf-ws-rich mark { background: #fef08a; border-radius: 3px; padding: 0 2px; color: #713f12; }
.ncf-ws-rich ul { margin: 3px 0; padding-left: 20px; }
.ncf-ws-rich ol { margin: 3px 0; padding-left: 22px; }
.ncf-ws-rich li { margin-bottom: 2px; }

/* Checkbox row */
.ncf-ws-check { display: flex; align-items: center; gap: 9px; padding: 4px 0 4px 8px; cursor: pointer; }
.ncf-ws-check-native { position: absolute; opacity: 0; width: 0; height: 0; }
.ncf-ws-check-box {
    display: grid; place-items: center;
    width: 19px; height: 19px;
    flex-shrink: 0;
    border: 1.5px solid var(--ncf-mute-3);
    border-radius: 5px;
    background: var(--ncf-surface);
    color: #fff;
    transition: var(--ncf-fast);
}
.ncf-ws-check-box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: var(--ncf-fast); }
.ncf-ws-check.is-done .ncf-ws-check-box { background: var(--acc-2); border-color: var(--acc-2); }
.ncf-ws-check.is-done .ncf-ws-check-box svg { opacity: 1; transform: scale(1); }
.ncf-ws-check-native:focus-visible + .ncf-ws-check-box { outline: 2px solid var(--acc-2); outline-offset: 2px; }
.ncf-ws-check-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ncf-ink);
    padding: 0 2px;
}
.ncf-ws-check-input:focus { outline: none; }
.ncf-ws-check.is-done .ncf-ws-check-input { color: var(--ncf-mute-2); text-decoration: line-through; }

.ncf-ws-textline {
    width: 100%;
    height: 34px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ncf-ink-2);
    padding: 0 2px;
}
.ncf-ws-textline:focus { outline: none; }
.ncf-ws-blank { height: 8px; }

/* Worksheet footer */
.ncf-ws-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--ncf-surface-2);
    border-top: 1px solid var(--ncf-line);
    font-size: 11.5px;
    color: var(--ncf-mute-2);
}
.ncf-ws-footer-left { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.ncf-ws-footer-left svg { width: 14px; height: 14px; color: var(--acc-2); }
.ncf-ws-footer-count { font-weight: 700; color: var(--ncf-mute); }

/* Plain textarea */
.ncf-ws-plain-wrap { display: block; }
.ncf-notes-editor {
    min-height: 340px;
    line-height: 1.7;
    font-size: 14px;
    tab-size: 2;
}

/* Preview */
.ncf-notes-preview {
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface);
    padding: 20px 22px;
    min-height: 200px;
    box-shadow: var(--ncf-sh-xs);
}
.ncf-notes-preview__empty { font-size: 13px; color: var(--ncf-mute-2); text-align: center; padding: 30px 0; }
.ncf-notes-preview__empty em { color: var(--ncf-ink-2); font-style: normal; font-weight: 600; }
.ncf-pv-spacer { height: 10px; }
.ncf-pv-section {
    font-size: 14px; font-weight: 800; color: var(--ncf-ink);
    text-transform: uppercase; letter-spacing: .3px;
    margin: 16px 0 8px; padding-bottom: 5px;
    border-bottom: 2px solid var(--ncf-line);
}
.ncf-pv-section:first-child { margin-top: 0; }
.ncf-pv-num { color: var(--acc-2); }
.ncf-pv-field { display: flex; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.ncf-pv-label { font-weight: 700; color: var(--ncf-mute); flex-shrink: 0; }
.ncf-pv-value { color: var(--ncf-ink); }
.ncf-pv-value--empty { color: var(--ncf-mute-3); font-style: italic; }
.ncf-pv-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; color: var(--ncf-ink); }
.ncf-pv-checkbox {
    display: grid; place-items: center;
    width: 17px; height: 17px; flex-shrink: 0;
    border: 1.5px solid var(--ncf-mute-3); border-radius: 4px;
    color: var(--acc-2); font-size: 11px; font-weight: 800;
}
.ncf-pv-check--done .ncf-pv-checkbox { border-color: var(--acc-2); background: var(--ncf-brand-soft); }
.ncf-pv-placeholder { font-size: 13px; color: var(--ncf-mute-2); font-style: italic; padding: 3px 0; }
.ncf-pv-text { font-size: 13.5px; color: var(--ncf-ink-2); padding: 2px 0; line-height: 1.55; }
.ncf-pv-section--h2 { font-size: 13.5px; text-transform: none; letter-spacing: 0; border-bottom: none; color: var(--ncf-ink-2); margin: 10px 0 4px; }
.ncf-pv-ul { margin: 3px 0 6px; padding-left: 20px; }
.ncf-pv-ul li { font-size: 13.5px; color: var(--ncf-ink-2); line-height: 1.5; margin-bottom: 2px; }
.ncf-notes-preview strong { font-weight: 700; color: var(--ncf-ink); }
.ncf-notes-preview em { font-style: italic; }
.ncf-notes-preview u { text-decoration: underline; }
.ncf-notes-preview mark { background: #fef08a; border-radius: 3px; padding: 0 2px; color: #713f12; }

/* ════════════════════════════════════════════════════════════
 *  DROPZONE + FILE LIST
 * ════════════════════════════════════════════════════════════ */
.ncf-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 26px 20px;
    border: 2px dashed var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface-2);
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-dropzone:hover { border-color: var(--acc-2); background: var(--ncf-brand-soft); }
.ncf-dropzone.dragover { border-color: var(--acc-2); background: var(--ncf-brand-soft); box-shadow: 0 0 0 4px var(--ncf-brand-ring) inset; }
.ncf-dropzone input[type="file"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.ncf-dropzone-icon {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: var(--ncf-surface);
    border: 1px solid var(--ncf-line);
    color: var(--acc-2);
}
.ncf-dropzone-icon svg { width: 22px; height: 22px; }
.ncf-dropzone-label { margin: 0; font-size: 13.5px; color: var(--ncf-mute); }
.ncf-dropzone-label strong { color: var(--ncf-ink); font-weight: 700; }
.ncf-dropzone-hint { margin: 0; font-size: 11.5px; color: var(--ncf-mute-3); }

.ncf-file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ncf-file-list:empty { display: none; }
.ncf-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--ncf-brand-soft);
    border: 1px solid color-mix(in srgb, var(--acc-2) 22%, var(--ncf-line));
    color: var(--ncf-brand-ink);
    font-size: 12.5px;
    font-weight: 600;
    max-width: 100%;
}
.ncf-file-chip > svg { width: 14px; height: 14px; flex-shrink: 0; }
.ncf-file-chip-name {
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncf-file-chip-size {
    flex-shrink: 0;
    padding-left: 7px;
    border-left: 1px solid color-mix(in srgb, var(--acc-2) 22%, var(--ncf-line));
    color: var(--ncf-mute-2);
    font-weight: 600;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.ncf-file-chip-x {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-left: 1px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ncf-brand-ink);
    cursor: pointer;
    opacity: .65;
    transition: var(--ncf-fast);
}
.ncf-file-chip-x svg { width: 12px; height: 12px; }
.ncf-file-chip-x:hover { opacity: 1; background: var(--ncf-danger); color: #fff; }
.ncf-file-chip-x:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 1px; opacity: 1; }

/* ════════════════════════════════════════════════════════════
 *  SUBSECTIONS (step 3 · details/summary)
 * ════════════════════════════════════════════════════════════ */
.ncf-subsection {
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface);
    overflow: hidden;
}
.ncf-subsection + .ncf-subsection { margin-top: 0; }
.ncf-subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--ncf-ink-2);
    user-select: none;
    transition: background var(--ncf-fast);
}
.ncf-subsection-title::-webkit-details-marker { display: none; }
.ncf-subsection-title:hover { background: var(--ncf-surface-2); }
.ncf-subsection-title > svg:first-child { width: 18px; height: 18px; color: var(--acc-3); flex-shrink: 0; }
.ncf-subsection-label { flex: 1; font-size: 14px; }
.ncf-subsection-opt {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ncf-surface-3);
    color: var(--ncf-mute-2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ncf-subsection-chevron { width: 16px; height: 16px; color: var(--ncf-mute-3); transition: transform var(--ncf-mid); }
.ncf-subsection[open] .ncf-subsection-chevron { transform: rotate(180deg); }
.ncf-subsection[open] .ncf-subsection-title { border-bottom: 1px solid var(--ncf-line); }
.ncf-subsection > .ncf-field-grid { padding: 18px 16px; }

/* Pending toggle (próxima cita por definir) */
.ncf-pending-toggle {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1.5px solid var(--ncf-line);
    border-radius: var(--ncf-r-sm);
    background: var(--ncf-surface-2);
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-pending-toggle:hover { border-color: var(--acc-3); }
.ncf-pending-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ncf-pending-toggle-box {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1.5px solid var(--ncf-mute-3);
    border-radius: 6px;
    background: var(--ncf-surface);
    color: #fff;
    transition: var(--ncf-fast);
}
.ncf-pending-toggle-box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: var(--ncf-fast); }
.ncf-pending-toggle-input:checked + .ncf-pending-toggle-box { background: var(--acc-3); border-color: var(--acc-3); }
.ncf-pending-toggle-input:checked + .ncf-pending-toggle-box svg { opacity: 1; transform: scale(1); }
.ncf-pending-toggle-input:focus-visible + .ncf-pending-toggle-box { outline: 2px solid var(--acc-3); outline-offset: 2px; }
.ncf-pending-toggle-txt { display: flex; flex-direction: column; gap: 2px; }
.ncf-pending-toggle-lbl { font-size: 13.5px; font-weight: 700; color: var(--ncf-ink-2); }
.ncf-pending-toggle-hint { font-size: 12px; color: var(--ncf-mute-2); line-height: 1.45; }

.ncf-pending-badge {
    display: none;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acc-3) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--acc-3) 30%, var(--ncf-line));
    color: var(--acc-3-ink);
    font-size: 10.5px;
    font-weight: 700;
}
#ncfNextVisitGrid[data-pending="1"] .ncf-pending-badge { display: inline-block; }
#ncfNextVisitGrid[data-pending="1"] #ncfNextVisitReq { display: none; }

/* ════════════════════════════════════════════════════════════
 *  CTA BUTTONS / FOOTER
 * ════════════════════════════════════════════════════════════ */
.ncf-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1.5px solid transparent;
    border-radius: 11px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ncf-fast);
    white-space: nowrap;
}
.ncf-cta svg { width: 17px; height: 17px; }
.ncf-cta:focus-visible { outline: 2px solid #199c82; outline-offset: 2px; }

/* CTA primaria — verde-azulado del sistema (--primary), consistente en los 3
   pasos (Continuar y Guardar usan el mismo tono). */
.ncf-cta--primary {
    background: #199c82; /* fallback */
    background: linear-gradient(135deg, #1eae90, #116d5b);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(17, 109, 91, .5);
}
.ncf-cta--primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, #23bd9c, #0f5f50); box-shadow: 0 14px 30px -10px rgba(17, 109, 91, .55); }
.ncf-cta--primary:active { transform: translateY(0); }

.ncf-cta--ghost {
    background: var(--ncf-surface);
    border-color: var(--ncf-line);
    color: var(--ncf-mute);
}
.ncf-cta--ghost:hover { border-color: var(--ncf-mute-3); color: var(--ncf-ink); background: var(--ncf-surface-2); }

.ncf-cta--save {
    background: #199c82; /* fallback */
    background: linear-gradient(135deg, #1eae90, #116d5b);
    color: #fff;
    padding: 0 24px;
    box-shadow: 0 8px 22px -10px rgba(17, 109, 91, .5);
}
.ncf-cta--save:hover { transform: translateY(-1px); background: linear-gradient(135deg, #23bd9c, #0f5f50); box-shadow: 0 14px 30px -10px rgba(17, 109, 91, .55); }
.ncf-cta--save:active { transform: translateY(0); }
.ncf-cta:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

/* Estado "Guardando…" del CTA final */
.ncf-cta.is-loading { pointer-events: none; opacity: .92; }
.ncf-cta.is-loading:disabled { opacity: .92; }
.ncf-spin { width: 17px; height: 17px; transform-origin: center; animation: ncfSpin .7s linear infinite; }
@keyframes ncfSpin { to { transform: rotate(360deg); } }

/* Focus-visible uniforme para elementos interactivos (accesibilidad teclado).
   Mismo anillo teal/offset que inputs y CTAs; no afecta el hover de ratón. */
.ncf-notes-tab:focus-visible,
.ncf-notes-jump:focus-visible,
.ncf-fmt-btn:focus-visible,
.ncf-tpl-trigger:focus-visible,
.ncf-tpl-tab:focus-visible,
.ncf-sources-btn:focus-visible,
.ncf-subsection-title:focus-visible,
.ncf-modal-x:focus-visible,
.ncf-modal-save-btn:focus-visible,
.ncf-custom-item:focus-visible,
.ncf-custom-item-btn:focus-visible {
    outline: 2px solid var(--acc-2);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
 *  TEMPLATES TRIGGER + SOURCES TOGGLE
 * ════════════════════════════════════════════════════════════ */
.ncf-tpl-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid color-mix(in srgb, var(--acc-2) 28%, var(--ncf-line));
    border-radius: 10px;
    background: var(--ncf-surface);
    color: var(--ncf-brand-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ncf-fast);
    flex-shrink: 0;
}
.ncf-tpl-trigger svg { width: 16px; height: 16px; }
.ncf-tpl-trigger:hover { background: var(--ncf-brand-soft); border-color: var(--acc-2); transform: translateY(-1px); }

.ncf-sources-toggle { margin-top: 4px; }
.ncf-sources-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border: none;
    background: transparent;
    color: var(--ncf-mute-2);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--ncf-fast);
}
.ncf-sources-btn:hover { color: var(--acc-2); }
.ncf-sources-btn svg:last-child { transition: transform var(--ncf-fast); }
.ncf-sources-panel {
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface-2);
}
.ncf-sources-intro { margin: 0 0 10px; font-size: 12px; color: var(--ncf-mute); font-weight: 600; }
.ncf-sources-list { display: flex; flex-direction: column; gap: 9px; }
.ncf-source-item { display: flex; gap: 10px; }
.ncf-source-badge {
    flex-shrink: 0;
    height: fit-content;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--acc-1);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
}
.ncf-source-badge--teal  { background: var(--acc-2); }
.ncf-source-badge--amber { background: var(--ncf-warn); }
.ncf-source-item > div { display: flex; flex-direction: column; gap: 1px; }
.ncf-source-item strong { font-size: 12px; color: var(--ncf-ink-2); }
.ncf-source-item span { font-size: 11.5px; color: var(--ncf-mute-2); line-height: 1.4; }
.ncf-sources-disclaimer { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--ncf-line); font-size: 11px; color: var(--ncf-mute-3); font-style: italic; line-height: 1.4; }

/* ════════════════════════════════════════════════════════════
 *  TEMPLATES MODAL
 * ════════════════════════════════════════════════════════════ */
.ncf-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.ncf-overlay.open { display: flex; animation: ncfFadeIn .2s var(--ncf-ease) both; }
.ncf-modal {
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--ncf-surface);
    border-radius: var(--ncf-r-xl);
    box-shadow: var(--ncf-sh-pop);
    overflow: hidden;
    animation: ncfPanelIn .26s var(--ncf-ease) both;
}
.ncf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ncf-line);
}
.ncf-modal-head h2 {
    display: flex; align-items: center; gap: 9px;
    margin: 0; font-size: 16px; font-weight: 700; color: var(--ncf-ink);
}
.ncf-modal-head h2 svg { width: 19px; height: 19px; color: var(--acc-2); }
.ncf-modal-x {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: var(--ncf-surface-2);
    color: var(--ncf-mute-2);
    font-size: 22px; line-height: 1;
    cursor: pointer; transition: var(--ncf-fast);
}
.ncf-modal-x:hover { background: var(--ncf-surface-3); color: var(--ncf-ink); }

.ncf-modal-save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 22px;
    background: var(--ncf-brand-soft);
    border-bottom: 1px solid var(--ncf-line);
}
.ncf-modal-save-row-text { font-size: 12.5px; color: var(--ncf-mute); }
.ncf-modal-save-row-text strong { color: var(--ncf-brand-ink); }
.ncf-modal-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 9px;
    background: var(--acc-2);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ncf-fast);
    flex-shrink: 0;
}
.ncf-modal-save-btn svg { width: 15px; height: 15px; }
.ncf-modal-save-btn:hover { background: var(--ncf-brand-ink); }

.ncf-tpl-tabs { display: flex; gap: 4px; padding: 12px 22px 0; }
.ncf-tpl-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ncf-mute-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-tpl-tab svg { width: 15px; height: 15px; }
.ncf-tpl-tab:hover { color: var(--ncf-ink); }
.ncf-tpl-tab.active { color: var(--acc-2); border-bottom-color: var(--acc-2); }
.ncf-tpl-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ncf-surface-3);
    color: var(--ncf-mute);
    font-size: 11px;
    font-weight: 700;
}
.ncf-tpl-tab.active .ncf-tpl-tab-count { background: var(--ncf-brand-soft); color: var(--acc-2); }

.ncf-modal-body { flex: 1; overflow-y: auto; padding: 18px 22px 22px; border-top: 1px solid var(--ncf-line); margin-top: -1px; }
.ncf-tpl-panel { display: none; }
.ncf-tpl-panel.active { display: block; }

.ncf-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ncf-tpl-card {
    --tpl-color: var(--acc-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface);
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-tpl-card:hover {
    border-color: var(--tpl-color);
    transform: translateY(-2px);
    box-shadow: var(--ncf-sh-md);
}
.ncf-tpl-ico {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    color: #fff;
}
.ncf-tpl-ico svg { width: 20px; height: 20px; }
.ncf-tpl-name { font-size: 13.5px; font-weight: 700; color: var(--ncf-ink); line-height: 1.25; }
.ncf-tpl-desc { font-size: 11.5px; color: var(--ncf-mute-2); line-height: 1.4; }

.ncf-custom-list { display: flex; flex-direction: column; gap: 9px; }
.ncf-custom-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-md);
    background: var(--ncf-surface);
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-custom-item:hover { border-color: var(--acc-2); background: var(--ncf-surface-2); }
.ncf-custom-item-info { flex: 1; min-width: 0; }
.ncf-custom-item-name { font-size: 13.5px; font-weight: 700; color: var(--ncf-ink); }
.ncf-custom-item-meta { font-size: 12px; color: var(--ncf-mute-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncf-custom-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ncf-custom-item-btn {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--ncf-line);
    border-radius: 8px;
    background: var(--ncf-surface);
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-custom-item-btn svg { width: 15px; height: 15px; }
.ncf-custom-item-btn--use { color: var(--acc-2); }
.ncf-custom-item-btn--use:hover { background: var(--ncf-brand-soft); border-color: var(--acc-2); }
.ncf-custom-item-btn--del { color: var(--ncf-mute-2); }
.ncf-custom-item-btn--del:hover { background: var(--ncf-danger-soft); border-color: #fecaca; color: var(--ncf-danger); }

.ncf-custom-empty { text-align: center; padding: 40px 20px; }
.ncf-custom-empty-icon {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 15px;
    background: var(--ncf-surface-3);
    color: var(--ncf-mute-3);
}
.ncf-custom-empty-icon svg { width: 28px; height: 28px; }
.ncf-custom-empty h4 { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; color: var(--ncf-ink-2); }
.ncf-custom-empty p { margin: 0; font-size: 12.5px; color: var(--ncf-mute-2); }

/* SweetAlert above modal */
.ncf-swal-top { z-index: 1300 !important; }

/* ════════════════════════════════════════════════════════════
 *  DATETIME PICKER (custom · desktop ≥768)
 * ════════════════════════════════════════════════════════════ */
.ncdtp-backdrop {
    position: fixed; inset: 0;
    z-index: 1100;
    display: none;
    background: rgba(15, 23, 42, .28);
}
.ncdtp-backdrop.open { display: block; }
.ncdtp-panel {
    position: fixed;
    z-index: 1101;
    display: none;
    width: 510px;
    max-width: calc(100vw - 16px);
    grid-template-columns: 1fr 130px;
    background: var(--ncf-surface);
    border: 1px solid var(--ncf-line);
    border-radius: var(--ncf-r-lg);
    box-shadow: var(--ncf-sh-pop);
    overflow: hidden;
}
.ncdtp-panel.open { display: grid; animation: ncfPanelIn .2s var(--ncf-ease) both; }
.ncdtp-cal { padding: 16px; }
.ncdtp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ncdtp-nav {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--ncf-line); border-radius: 9px;
    background: var(--ncf-surface); color: var(--ncf-mute);
    cursor: pointer; transition: var(--ncf-fast);
}
.ncdtp-nav:hover { background: var(--ncf-surface-2); border-color: var(--ncf-mute-3); color: var(--ncf-ink); }
.ncdtp-month-label { font-size: 14px; font-weight: 700; color: var(--ncf-ink); }
.ncdtp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.ncdtp-weekdays span { text-align: center; font-size: 11px; font-weight: 700; color: var(--ncf-mute-3); padding: 4px 0; }
.ncdtp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ncdtp-day {
    display: grid; place-items: center;
    height: 38px;
    border: none; border-radius: 9px;
    background: transparent;
    color: var(--ncf-ink-2);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--ncf-fast);
}
.ncdtp-day:hover { background: var(--ncf-brand-soft); color: var(--acc-2); }
.ncdtp-day.other-month { color: var(--ncf-mute-3); opacity: .55; pointer-events: none; }
.ncdtp-day.today { box-shadow: inset 0 0 0 1.5px var(--ncf-mute-3); }
.ncdtp-day.selected {
    background: var(--acc-2); color: #fff;
    box-shadow: 0 4px 12px -4px var(--ncf-brand-ring);
}
.ncdtp-cal-footer { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ncf-line-2); }
.ncdtp-link-btn {
    border: none; background: transparent;
    color: var(--ncf-mute-2); font-size: 12.5px; font-weight: 700;
    cursor: pointer; padding: 4px 6px; border-radius: 7px;
    transition: var(--ncf-fast);
}
.ncdtp-link-btn:hover { background: var(--ncf-surface-2); color: var(--ncf-ink); }
.ncdtp-link-btn.primary { color: var(--acc-2); }
.ncdtp-time {
    background: var(--ncf-surface-2);
    border-left: 1px solid var(--ncf-line);
    display: flex; flex-direction: column;
}
.ncdtp-time-header { padding: 14px 0 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ncf-mute); text-transform: uppercase; letter-spacing: .4px; }
.ncdtp-time-cols { flex: 1; display: flex; align-items: stretch; justify-content: center; gap: 4px; padding: 0 8px 12px; min-height: 0; }
.ncdtp-scroll-col { width: 48px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; max-height: 300px; }
.ncdtp-scroll-col::-webkit-scrollbar { width: 4px; }
.ncdtp-scroll-col::-webkit-scrollbar-thumb { background: var(--ncf-mute-3); border-radius: 4px; }
.ncdtp-time-colon { display: flex; align-items: center; font-weight: 800; color: var(--ncf-mute-3); }
.ncdtp-item {
    text-align: center; padding: 8px 0;
    border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--ncf-ink-2);
    cursor: pointer; transition: var(--ncf-fast);
    font-variant-numeric: tabular-nums;
}
.ncdtp-item:hover { background: var(--ncf-brand-soft); color: var(--acc-2); }
.ncdtp-item.selected { background: var(--acc-2); color: #fff; }

/* ════════════════════════════════════════════════════════════
 *  SELECT2 OVERRIDES
 *  El widget (caja cerrada) se reestiliza scoped a .ncf-app con
 *  !important para ganarle a los bloques select2 globales !important
 *  que existen en otras secciones de este mismo archivo (ver línea
 *  ~20500). El dropdown (lista abierta) se renderiza en <body>,
 *  fuera de .ncf-app, así que NO puede scopearse: usa valores
 *  literales + !important (paridad con el patrón global previo) —
 *  no usa var(--ncf-*) porque fuera de .ncf-app no están definidas.
 * ════════════════════════════════════════════════════════════ */
.ncf-app .select2-container { font-family: inherit !important; width: 100% !important; }
.ncf-app .select2-container--default .select2-selection--single,
.ncf-app .select2-container--default .select2-selection--multiple {
    min-height: 46px !important;
    height: auto !important;
    border: 1.5px solid var(--ncf-line) !important;
    border-radius: var(--ncf-r-sm) !important;
    background: var(--ncf-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--ncf-fast), box-shadow var(--ncf-fast) !important;
}
.ncf-app .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; padding: 0 12px !important; }
.ncf-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    padding: 0 !important;
    color: var(--ncf-ink) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ncf-mute-3) !important; }
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important; top: 0 !important; right: 10px !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ncf-mute-2) transparent transparent !important;
}
.ncf-app .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--ncf-mute-2) !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--ncf-mute-3) !important; font-weight: 700 !important; margin-right: 6px !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--ncf-danger) !important; }

.ncf-app .select2-container--default .select2-selection--multiple { padding: 3px 8px !important; align-items: center !important; }
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 5px !important; padding: 0 !important; width: 100% !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    padding: 3px 9px 3px 24px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--ncf-brand-soft) !important;
    color: var(--ncf-brand-ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    position: relative !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute !important;
    left: 7px !important; top: 50% !important; transform: translateY(-50%) !important;
    border: none !important; background: transparent !important;
    color: var(--ncf-brand-ink) !important; opacity: .7 !important;
    padding: 0 !important; margin: 0 !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { opacity: 1 !important; color: var(--ncf-danger) !important; background: transparent !important; }
/* El campo de búsqueda inline se queda EN LA MISMA LÍNEA que los chips
   (rellena el espacio sobrante con flex:1), en vez de saltar a una 2ª línea
   y agrandar la caja. Cuando no hay chips, ocupa el ancho y muestra el
   placeholder. */
.ncf-app .select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 60px !important;
    min-width: 60px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    float: none !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--ncf-ink) !important;
}
.ncf-app .select2-container--focus .select2-selection--single,
.ncf-app .select2-container--focus .select2-selection--multiple,
.ncf-app .select2-container--default.select2-container--open .select2-selection--single,
.ncf-app .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ncf-brand) !important;
    box-shadow: 0 0 0 4px var(--ncf-brand-ring) !important;
}

/* El dropdown (lista abierta) se renderiza en <body> fuera de .ncf-app.
 * Para hacerlo COMPACTO solo en este módulo (sin tocar el select2 global de
 * otras pantallas) los inits usan dropdownCssClass:'ncf-s2'. La especificidad
 * .select2-dropdown.ncf-s2 (0,3,0) le gana a los bloques globales (0,2,0). */
.select2-dropdown.ncf-s2 {
    border: 1px solid #e4e9f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .22) !important;
    overflow: hidden !important;
}

/* ── Micro-animaciones de los dropdowns select2 (.ncf-s2) ──────────────────
   OPTIMIZADAS: solo opacity + transform (compositor/GPU). No se anima sombra,
   blur ni layout. Respeta prefers-reduced-motion. El dropdown se monta en
   <body>, por eso estas reglas no están scopeadas a .ncf-app. */
@keyframes ncfS2In   { from { opacity: 0; transform: translateY(-10px) scale(.955); } to { opacity: 1; transform: none; } }
@keyframes ncfS2InUp { from { opacity: 0; transform: translateY(10px)  scale(.955); } to { opacity: 1; transform: none; } }
@keyframes ncfS2Fade { from { opacity: 0; } to { opacity: 1; } }
.select2-dropdown.ncf-s2 {
    transform-origin: top center;
    animation: ncfS2In .19s cubic-bezier(.22, 1, .36, 1) both;
}
.select2-dropdown--above.ncf-s2 {
    transform-origin: bottom center;
    animation-name: ncfS2InUp;
}
/* Con "Reducir movimiento": sin deslizar/escalar, pero sí un fade sutil
   (el fade no es "movimiento" y es accesible → la doctora igual percibe algo). */
@media (prefers-reduced-motion: reduce) {
    .select2-dropdown.ncf-s2 { animation: ncfS2Fade .14s ease both !important; }
}

/* Entrada de los chips del multi-select (Técnicas) al elegir uno. */
@keyframes ncfS2Chip { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    animation: ncfS2Chip .15s cubic-bezier(.22, 1, .36, 1) both;
}

/* Pulso sutil del campo al elegir una opción ("al escogerlos"). Usa un
   ::after que se desvanece (no pelea con el background !important del widget). */
.ncf-app .select2-selection { position: relative; }
.ncf-app .select2-selection.ncf-s2-picked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ncf-brand-soft);
    pointer-events: none;
    animation: ncfS2Pick .4s ease both;
}
@keyframes ncfS2Pick { from { opacity: 1; } to { opacity: 0; } }
.select2-dropdown.ncf-s2 .select2-results__options { max-height: 280px !important; padding: 5px !important; }
.select2-dropdown.ncf-s2 .select2-results__option {
    padding: 8px 11px !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    display: block !important;
}
.select2-dropdown.ncf-s2 .select2-results__option--highlighted,
.select2-dropdown.ncf-s2 .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--ncf-brand-soft) !important;
    color: var(--ncf-brand-ink) !important;
    font-weight: 600 !important;
}
.select2-dropdown.ncf-s2 .select2-results__option--selected {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}
.select2-dropdown.ncf-s2 .select2-results__group {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: #94a3b8 !important;
    padding: 9px 11px 3px !important;
}
.select2-dropdown.ncf-s2 .select2-search--dropdown { padding: 8px !important; }
.select2-dropdown.ncf-s2 .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e4e9f0 !important;
    border-radius: 9px !important;
    padding: 8px 11px !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
/* Focus ring coherente con el sistema (mismo patron que `.tp-s2`): el buscador
   del dropdown carecia de estado :focus, por lo que mostraba el outline negro
   por defecto del navegador (`outline: auto`), fuera de la identidad teal. Se
   reemplaza por borde primary + halo teal, conservando la visibilidad de foco
   (accesibilidad). */
.select2-dropdown.ncf-s2 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(25, 156, 130, .14) !important;
}

/* Anti auto-zoom iOS (parte 2): estos search fields de select2 tienen arriba
   un `font-size: 14px !important` MÁS específico que la regla general anti-zoom,
   así que en táctil hay que subirlos a 16px con su misma especificidad y AQUÍ
   (después en el archivo) para ganar la cascada. Cubre Técnicas (multi inline),
   Paciente, Tipo, Modalidad y Medicamento (search del dropdown). Desktop intacto. */
@media (pointer: coarse) {
    .ncf-app .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
    .select2-dropdown.ncf-s2 .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════
 *  RESPONSIVE
 * ════════════════════════════════════════════════════════════ */

/* ── ≤1280: tighten ── */
@media (max-width: 1280px) {
    .ncf-workspace { grid-template-columns: 224px minmax(0, 1fr); gap: 18px; }
    .ncfp-bd { padding: 22px; }
}

/* ── ≤1200: rail → strip horizontal arriba, contenido full width.
   Umbral subido de 1024 a 1200 porque el sidebar de la app (~280–390px) recorta
   el ancho real del contenido: a 1079px de viewport el contenido es ~700px, y
   el rail vertical (224px) lo dejaba apretado. Con strip horizontal el contenido
   ocupa todo el ancho disponible. ── */
@media (max-width: 1200px) {
    .ncf-workspace { grid-template-columns: 1fr; gap: 14px; }

    .ncf-rail {
        position: sticky;
        top: 0;
        z-index: 20;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 12px 14px;
        border-radius: var(--ncf-r-md);
    }
    .ncf-rail-brand,
    .ncf-rail-foot { display: none; }
    .ncf-rail-steps { flex: 1; flex-direction: row; align-items: center; }
    .ncf-rail-step { flex: 0 1 auto; padding: 6px 10px; gap: 9px; border-radius: 10px; }
    .ncf-rail-step-sub { display: none; }
    .ncf-rail-step-info { min-width: 0; }
    .ncf-rail-step-title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* sólo el paso activo muestra su título en pantallas medias */
    .ncf-rail-step:not(.active) .ncf-rail-step-info { display: none; }
    .ncf-rail-connector { flex: 1; height: 2px; min-width: 12px; margin: 0 2px; }

    /* Strip horizontal: barra de progreso fina al borde inferior.
       (el .ncf-rail de este mismo bloque ya define position:sticky) */
    .ncf-rail { overflow: hidden; padding-bottom: 14px; }
    .ncf-rail-progress {
        display: block;
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: var(--ncf-line-2);
    }
    .ncf-rail-progress-fill {
        display: block;
        height: 100%;
        width: 33%;
        background: linear-gradient(90deg, var(--acc-2), var(--ncf-brand-ink));
        border-radius: 0 3px 3px 0;
        transition: width var(--ncf-mid);
    }

    /* Nivel de Riesgo (tablet/móvil): de tarjetas grandes en 5 columnas a
       "pills" compactas que fluyen en filas. Diseño distinto y más ligero. */
    .ncf-risk-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ncf-risk-btn {
        flex: 0 1 auto;
        flex-direction: row;
        justify-content: center;
        min-height: 0;
        gap: 7px;
        padding: 9px 16px;
        font-size: 13px;
        line-height: 1;
        border-radius: 999px;
        white-space: nowrap;
    }
    .ncf-risk-ico { width: 16px; height: 16px; }
}

/* ── Tablet / contenido estrecho (769–1200): footer de acciones sticky para no
   scrollear hasta el final. Sin márgenes negativos (el footer ya es ancho
   completo del card); conserva su padding cómodo. ── */
@media (min-width: 769px) and (max-width: 1200px) {
    .ncfp-ft {
        position: sticky;
        bottom: 0;
        z-index: 15;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 16px -10px rgba(15, 23, 42, .18);
    }
}

/* ── ≤768: móvil — 1 columna, datetime nativo, footer sticky ── */
@media (max-width: 768px) {
    /* Command bar: items encogibles para que el grupo derecho no
       desborde sobre el izquierdo (fix overlap "Sincronizado"/"Nueva nota"). */
    .ncf-cmd { padding: 9px 12px; gap: 8px; margin-bottom: 14px; }
    .ncf-cmd-left, .ncf-cmd-right { gap: 8px; min-width: 0; }
    .ncf-cmd-right { flex-shrink: 1; }
    .ncf-cmd-back { flex-shrink: 0; }
    .ncf-cmd-crumbs { display: none; }
    .ncf-cmd-crumbs-compact {
        display: inline-flex;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .ncf-session-pill-lbl { display: none; }
    .ncf-session-pill { flex-shrink: 0; padding: 0 10px; }
    /* Indicador de borrador → solo icono (el texto se montaba sobre el crumb) */
    .ncf-draft-indicator-lbl { display: none; }
    .ncf-draft-indicator { width: 30px; padding: 0; justify-content: center; flex-shrink: 0; }
    .ncf-cmd--scrolled .ncf-draft-indicator,
    .ncf-cmd--scrolled .ncf-session-pill-rem { display: none; }

    .ncfp-hd { padding: 16px 16px; gap: 11px; flex-wrap: wrap; }
    .ncfp-hd-icon { width: 40px; height: 40px; }
    .ncfp-hd-text { flex: 1 1 auto; min-width: 0; }
    .ncfp-hd-title { font-size: 16px; }
    .ncfp-hd-step-badge { display: none; }
    /* Plantillas: icono-only en el header para que no desborde */
    .ncfp-hd .ncf-tpl-trigger {
        flex-shrink: 0;
        width: 40px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }
    .ncfp-hd .ncf-tpl-trigger svg { width: 17px; height: 17px; }
    .ncfp-bd { padding: 18px 16px; gap: 18px; }

    .ncf-field-grid,
    .ncf-field-grid--3 { grid-template-columns: 1fr; gap: 16px; }

    /* datetime: ocultar picker custom, mostrar nativo */
    .ncf-dtp-desktop { display: none; }
    .ncf-native-dt { display: flex; }

    /* (El diseño de Nivel de Riesgo como pills se define en el bloque ≤1024) */

    .ncf-ws-body { max-height: none; }
    .ncf-ws-gutter { display: none; }
    .ncf-ws-doc { padding: 8px 14px 16px; }
    .ncf-ws-field { min-width: 100%; }
    .ncf-notes-editor { min-height: 280px; }

    /* footer de acciones sticky · respeta safe-area iOS (home indicator) */
    .ncfp-ft {
        position: sticky;
        bottom: 0;
        z-index: 15;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        margin: 0 -16px -18px;
        box-shadow: 0 -6px 16px -10px rgba(15, 23, 42, .2);
    }
    .ncf-cta { flex: 1; min-width: 0; height: 46px; padding: 0 12px; }
    .ncfp-ft .ncf-cta--primary,
    .ncfp-ft .ncf-cta--save { flex: 1.4; }

    .ncf-overlay { padding: 0; align-items: flex-end; }
    .ncf-modal { max-width: 100%; max-height: 92vh; border-radius: var(--ncf-r-xl) var(--ncf-r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ── ≤560: teléfonos — command bar mínimo ── */
@media (max-width: 560px) {
    /* El crumb "Nueva nota" es redundante con el header del panel → se oculta
       para dejar respirar a back + estado de sesión sin solaparse. */
    .ncf-cmd-crumbs-compact { display: none; }
    .ncf-session-pill-rem { display: none; }

    .ncf-notes-toolbar { flex-direction: column; align-items: stretch; }
    .ncf-notes-tabs { width: 100%; justify-content: space-between; }
    .ncf-notes-tab { flex: 1; justify-content: center; padding: 8px 6px; }
    .ncf-tpl-grid { grid-template-columns: 1fr; }
    .ncf-modal-save-row { flex-direction: column; align-items: stretch; }
    .ncf-modal-save-btn { width: 100%; justify-content: center; }
}

/* ── ≤380: extra estrecho ── */
@media (max-width: 380px) {
    .ncf-cmd-back span { display: none; }
    .ncf-cmd-back { padding: 0 9px; }
    .ncfp-bd { padding: 16px 13px; }
    /* Riesgo: las pills (bloque ≤1024) ya fluyen solas en pantallas estrechas */
    .ncf-notes-tab span,
    .ncf-notes-tab { font-size: 11.5px; }
    .ncf-cta { font-size: 12.5px; }
}

/* ── Touch: targets cómodos ── */
@media (pointer: coarse) {
    .ncf-rail-step,
    .ncf-notes-jump,
    .ncf-risk-btn { min-height: 44px; }
    .ncf-ws-field-input,
    .ncf-ws-letter-input,
    .ncf-ws-textline,
    .ncf-ws-check-input { height: 40px; }
}
@media (hover: none) {
    .ncf-cta--primary:hover,
    .ncf-cta--save:hover,
    .ncf-tpl-card:hover,
    .ncf-tpl-trigger:hover { transform: none; }
}

/* ── Tablet header collapse (481–768, JS toggle .ncf-cmd--scrolled) ── */
@media (min-width: 481px) and (max-width: 768px) {
    .ncf-cmd--scrolled { padding-top: 6px; padding-bottom: 6px; }
    .ncf-cmd--scrolled .ncf-draft-indicator { display: none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ncf-app *, .ncf-app *::before, .ncf-app *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .ncf-session-dot { animation: none; }
    /* El spinner de "Guardando…" es feedback funcional: debe seguir girando
       aunque el usuario tenga reduce-motion (si no, se ve "congelado"). */
    .ncf-app .ncf-spin {
        animation-duration: .8s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ── Print: hoja clínica limpia ── */
@media print {
    .ncf-cmd, .ncf-rail, .ncfp-ft, .ncf-ambient,
    .ncf-notes-toolbar, .ncf-fmtbar, .ncf-tpl-trigger, .ncf-sources-toggle,
    .ncf-overlay, .ncdtp-panel, .ncdtp-backdrop { display: none !important; }
    .ncf-workspace { display: block; }
    .ncf-form-card { box-shadow: none; border: none; }
    .ncf-panel { display: block !important; }
    .ncfp-hd { background: none; }
}

/* ════════════════════════════════════════════════════════════
 *  BARRA DE FORMATO (markdown ligero) · editor de Notas Clínicas
 * ════════════════════════════════════════════════════════════ */
.ncf-fmtbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 5px 6px;
    margin-top: -4px;
    border: 1px solid var(--ncf-line);
    border-radius: 10px;
    background: var(--ncf-surface-2);
}
.ncf-fmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ncf-mute);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ncf-fast);
}
.ncf-fmt-btn svg { width: 15px; height: 15px; }
.ncf-fmt-btn:hover { background: var(--ncf-surface); color: var(--ncf-ink); box-shadow: var(--ncf-sh-xs); }
.ncf-fmt-btn:active { transform: translateY(1px); }
.ncf-fmt-btn--i { font-style: italic; font-weight: 600; }
.ncf-fmt-sep { width: 1px; height: 18px; background: var(--ncf-line); margin: 0 3px; }
.ncf-fmt-hint { margin-left: auto; font-size: 11px; color: var(--ncf-mute-3); padding-right: 4px; }

/* ════════════════════════════════════════════════════════════
 *  RENDER DE MARKDOWN LIGERO (.cn-md) — preview, expediente, modales
 *  Global (los modales SweetAlert se montan en <body>, fuera de .ncf-app).
 * ════════════════════════════════════════════════════════════ */
.cn-md .cn-p { margin: 0 0 2px; }
.cn-md .cn-sp { height: 7px; }
.cn-md .cn-h {
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .2px;
    font-size: .95em;
    margin: 12px 0 5px;
    padding-bottom: 4px;
    border-bottom: 1.5px solid #e2e8f0;
}
.cn-md > .cn-h:first-child { margin-top: 0; }
.cn-md .cn-h-num { color: #0c6f5c; }
.cn-md .cn-h2 { font-weight: 700; color: #0f172a; margin: 8px 0 3px; }
.cn-md .cn-ul { margin: 2px 0 4px; padding-left: 20px; }
.cn-md .cn-ul li { margin: 0 0 2px; }
.cn-md .cn-chk { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 2px; }
.cn-md .cn-box {
    display: inline-grid;
    place-items: center;
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1.5px solid #94a3b8;
    border-radius: 4px;
    color: #0c6f5c;
    font-size: 11px;
    font-weight: 800;
}
.cn-md .cn-chk--on .cn-box { border-color: #199c82; background: rgba(25,156,130,.1); }
.cn-md strong { font-weight: 700; color: #0f172a; }
.cn-md em { font-style: italic; }
.cn-md u { text-decoration: underline; }
.cn-md mark { background: #fef08a; border-radius: 3px; padding: 0 2px; color: #713f12; }


/* ════════════════════════════════════════════════════════════
 *  CLINICAL DETAIL SHEET (.cdm) — modal "Detalle clínico" (vista)
 *  Montado en <body> vía SweetAlert (fuera de .ncf-app), por eso
 *  todo va scopeado a .cdm / .cdm-popup. NO afecta otros modales.
 * ════════════════════════════════════════════════════════════ */
.swal2-popup.cdm-popup {
    max-width: 600px !important;
    padding: 22px 22px 18px !important;
    border-radius: 16px !important;
}
.cdm {
    text-align: left;          /* corrige el centrado heredado de SweetAlert */
    color: var(--text-primary);
}
.cdm *, .cdm *::before, .cdm *::after { box-sizing: border-box; }

/* ── Header ── */
.cdm__head { margin-bottom: 16px; }
.cdm__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--primary);
}
.cdm__eyebrow svg { width: 13px; height: 13px; }
.cdm__title {
    font-size: 18px; font-weight: 700; line-height: 1.25;
    color: var(--text-primary); margin: 4px 0 0;
}
.cdm__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.cdm__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cdm__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 5px 10px; border-radius: 999px;
    background: #f1f5f9; color: #475569; border: 1px solid var(--border);
}
.cdm__badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.cdm__badge--risk-none { background: var(--primary-light); color: var(--primary-dark); border-color: rgba(25,156,130,.25); }
.cdm__badge--risk-low  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cdm__badge--risk-mid  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.cdm__badge--risk-high { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ── Segmented control (consistente con el modal de edición) ── */
.cdm__tabs {
    display: flex; gap: 4px; padding: 4px; margin: 0 0 16px;
    background: #f1f5f9; border-radius: 10px;
}
.cdm__tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 8px; border: none; background: transparent;
    border-radius: 7px; font-size: 12px; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cdm__tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.cdm__tab:hover { color: var(--text-primary); }
.cdm__tab.is-active { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.cdm__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Paneles + scroll ── */
.cdm__panel {
    display: none; max-height: 56vh;
    overflow-y: auto; overflow-x: hidden; padding-right: 4px;
    animation: cdmFade .18s ease;
}
.cdm__panel.is-active { display: block; }
.cdm__panel::-webkit-scrollbar { width: 8px; }
.cdm__panel::-webkit-scrollbar-thumb { background: #d8e0e8; border-radius: 8px; }
@keyframes cdmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Grid de datos de sesión ── */
.cdm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cdm__item {
    background: #f8fafc; border: 1px solid var(--border-light);
    border-radius: 10px; padding: 11px 13px;
}
.cdm__item--wide { grid-column: 1 / -1; }
.cdm__label {
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-muted);
}
.cdm__label svg { width: 12px; height: 12px; flex-shrink: 0; color: #cbd5e1; }
.cdm__value { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--text-primary); word-break: break-word; }
.cdm__value--empty { font-weight: 400; font-style: italic; color: #aab4c0; }

/* ── Bloques clínicos ── */
.cdm__block {
    background: #f8fafc; border: 1px solid var(--border-light);
    border-radius: 10px; padding: 12px 14px;
}
.cdm__block + .cdm__block { margin-top: 8px; }
.cdm__block--diag { background: var(--primary-bg); border-color: rgba(25,156,130,.18); }
.cdm__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cdm__chip {
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: 6px 11px; border-radius: 7px;
    color: var(--primary-dark); background: var(--primary-light);
    border: 1px solid rgba(25,156,130,.2);
}
.cdm__notes { font-size: 13.5px; line-height: 1.7; color: #334155; max-width: 64ch; }
.cdm__notes.cn-md .cn-p,
.cdm__notes.cn-md .cn-h,
.cdm__notes.cn-md .cn-h2 { text-align: left; }

/* ── Botones (footer SweetAlert) ── */
.cdm-popup .swal2-actions { margin-top: 18px; gap: 10px; }
.cdm-popup .swal2-styled.cdm-btn {
    border-radius: 9px !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    padding: 10px 22px !important; box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cdm-btn--primary { background: var(--primary) !important; color: #fff !important; }
.cdm-btn--primary:hover { background: var(--primary-dark) !important; }
.cdm-btn--ghost {
    background: #fff !important; color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}
.cdm-btn--ghost:hover { background: #f8fafc !important; }
.cdm-popup .swal2-styled.cdm-btn:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px; }

/* ── Responsive: tablet / móvil ── */
@media (max-width: 640px) {
    .swal2-popup.cdm-popup { width: 96% !important; padding: 16px 16px 14px !important; border-radius: 14px !important; }
    .cdm__grid { grid-template-columns: 1fr; }
    .cdm__panel { max-height: 62vh; }
    .cdm__title { font-size: 16px; }
    .cdm__tab span { font-size: 11.5px; }
    .cdm-popup .swal2-actions { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
    .cdm-popup .swal2-actions .swal2-styled { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cdm__panel { animation: none; }
    .cdm__tab { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
 *  BLOQUE 3 — Metas Terapéuticas, Consentimientos, Escalas
 *  Prefijos: b3- (shared), psh- (patient show tabs),
 *            cons- (consentimientos), esc- (escalas)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Variables locales del bloque ─────────────────────────────── */
:root {
    --b3-primary:   #0ea5e9;
    --b3-teal:      #10b981;
    --b3-green:     #22c55e;
    --b3-purple:    #8b5cf6;
    --b3-danger:    #ef4444;
    --b3-warning:   #f59e0b;
    --b3-border:    #e2e8f0;
    --b3-bg:        #f8fafc;
    --b3-text:      #1e293b;
    --b3-muted:     #64748b;
    --b3-card-bg:   #ffffff;
    --b3-radius:    12px;
    --b3-radius-sm: 8px;
}

/* ════════════════════════════════════════════════════════════
   COMPONENTES COMPARTIDOS — b3-*
   ════════════════════════════════════════════════════════════ */

.b3-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.b3-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--b3-muted);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.15s;
}
.b3-back svg { width: 16px; height: 16px; }
.b3-back:hover { color: var(--b3-primary); }

.b3-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.b3-page-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.b3-page-header__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(14,165,233,.1);
    color: var(--b3-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.b3-page-header__icon svg { width: 22px; height: 22px; }
.b3-page-header__icon--teal   { background: rgba(16,185,129,.1); color: var(--b3-teal); }
.b3-page-header__icon--green  { background: rgba(34,197,94,.1);  color: var(--b3-green); }
.b3-page-header__icon--purple { background: rgba(139,92,246,.1); color: var(--b3-purple); }

.b3-page-header__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--b3-text);
    line-height: 1.2;
}
.b3-page-header__sub { margin: 0; font-size: 14px; color: var(--b3-muted); }
.b3-page-header__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.b3-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--b3-radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
}
.b3-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.b3-alert--error  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.b3-alert--success{ background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.b3-alert__list   { margin: 6px 0 0; padding-left: 18px; }
.b3-alert__list li{ margin-bottom: 2px; }

.b3-card {
    background: var(--b3-card-bg);
    border: 1px solid var(--b3-border);
    border-radius: var(--b3-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
}
.b3-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--b3-border);
    background: var(--b3-bg);
}
.b3-card__icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(14,165,233,.08);
    color: var(--b3-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.b3-card__icon svg { width: 16px; height: 16px; }
.b3-card__icon--green  { background: rgba(34,197,94,.1);  color: var(--b3-green); }
.b3-card__icon--purple { background: rgba(139,92,246,.1); color: var(--b3-purple); }
.b3-card__title { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--b3-text); }
.b3-card__sub   { margin: 0; font-size: 13px; color: var(--b3-muted); }
.b3-card__body  { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.b3-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.b3-grid-2__span-full { grid-column: 1 / -1; }

.b3-form-group { display: flex; flex-direction: column; gap: 6px; }
.b3-form-group--full { grid-column: 1 / -1; }
.b3-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.b3-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b3-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.b3-label--req::after  { content: ' *'; color: #ef4444; }
.b3-label-opt { font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }

.b3-input, .b3-select, .b3-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--b3-border);
    border-radius: var(--b3-radius-sm);
    font-size: 14px;
    color: var(--b3-text);
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.b3-input:focus, .b3-select:focus, .b3-textarea:focus {
    outline: none;
    border-color: var(--b3-primary);
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.b3-textarea     { resize: vertical; line-height: 1.55; }
.b3-textarea--lg { min-height: 200px; }
.b3-hint         { font-size: 12px; color: var(--b3-muted); }
.b3-error-msg    { font-size: 13px; color: #ef4444; margin: 4px 0 0; }

.b3-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--b3-border);
    outline: none;
    cursor: pointer;
}
.b3-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--b3-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(14,165,233,.3);
    transition: transform 0.15s;
}
.b3-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.b3-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--b3-muted); margin-top: 4px; }
.b3-progreso-display { text-align: center; margin-bottom: 8px; }
.b3-progreso-val { font-size: 28px; font-weight: 700; color: var(--b3-primary); line-height: 1; }

.b3-progreso-bar-lg  { height: 10px; background: var(--b3-border); border-radius: 6px; overflow: hidden; }
.b3-progreso-fill-lg { height: 100%; border-radius: 6px; background: var(--b3-primary); transition: width 0.5s ease; }

.b3-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

.b3-field-block  { display: flex; flex-direction: column; gap: 4px; }
.b3-field-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--b3-muted); }
.b3-field-text   { font-size: 14px; color: var(--b3-text); line-height: 1.55; margin: 0; }
.b3-field-text--muted { color: var(--b3-muted); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   PATIENT SHOW TABS — psh-*
   ════════════════════════════════════════════════════════════ */

.psh-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(14,165,233,.15);
    color: #0369a1;
}

.psh-metas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.psh-meta-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid var(--b3-border);
    border-radius: var(--b3-radius);
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    cursor: pointer;
}
.psh-meta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: var(--b3-primary);
}
.psh-meta-card__head   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.psh-meta-card__title  { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--b3-text); line-height: 1.3; }
.psh-meta-card__desc   { margin: 0; font-size: 13px; color: var(--b3-muted); line-height: 1.45; }
.psh-meta-card__footer {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--b3-muted); flex-wrap: wrap;
    margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--b3-border);
}
.psh-meta-card__footer span { display: flex; align-items: center; gap: 3px; }
.psh-meta-card__seguimientos {
    margin-left: auto;
    font-size: 11.5px; font-weight: 600;
    color: var(--b3-primary);
    background: rgba(14,165,233,.08);
    padding: 2px 8px;
    border-radius: 10px;
}

.psh-area-tag {
    font-size: 11.5px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-lg);
    background: rgba(14,165,233,.1); color: #0369a1;
}

.psh-estado-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-lg);
}
.psh-estado-badge--info    { background: rgba(14,165,233,.12);  color: #0369a1; }
.psh-estado-badge--success { background: rgba(16,185,129,.12);  color: #065f46; }
.psh-estado-badge--warning { background: rgba(245,158,11,.12);  color: #92400e; }
.psh-estado-badge--danger  { background: rgba(239,68,68,.12);   color: #991b1b; }
.psh-estado-badge--lg      { font-size: 13px; padding: 5px 14px; }

.psh-progreso-wrap  { display: flex; flex-direction: column; gap: 4px; }
.psh-progreso-info  { display: flex; justify-content: space-between; font-size: 12px; color: var(--b3-muted); }
.psh-progreso-bar   { height: 6px; background: var(--b3-border); border-radius: 4px; overflow: hidden; }
.psh-progreso-fill  { height: 100%; border-radius: 4px; transition: width 0.5s; }
.psh-progreso-fill--high { background: #10b981; }
.psh-progreso-fill--mid  { background: #0ea5e9; }
.psh-progreso-fill--low  { background: #94a3b8; }

.psh-tipo-badge {
    display: inline-block;
    font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-lg);
    background: rgba(16,185,129,.1); color: #065f46;
}

.psh-nivel-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-lg); }
.psh-nivel--success { background: rgba(16,185,129,.12); color: #065f46; }
.psh-nivel--info    { background: rgba(14,165,233,.12); color: #0369a1; }
.psh-nivel--warning { background: rgba(245,158,11,.12); color: #92400e; }
.psh-nivel--danger  { background: rgba(239,68,68,.12);  color: #991b1b; }

/* ════════════════════════════════════════════════════════════
   METAS DETALLE — progreso panel, timeline, estado
   ════════════════════════════════════════════════════════════ */

.b3-progreso-panel { flex-direction: row !important; align-items: center; gap: 20px; flex-wrap: wrap; }
.b3-progreso-panel__left { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px; }
.b3-progreso-panel__pct  { font-size: 32px; font-weight: 800; color: var(--b3-primary); line-height: 1; }
.b3-progreso-panel__label{ font-size: 12px; color: var(--b3-muted); }
.b3-progreso-panel__bar-wrap { flex: 1; min-width: 200px; }
.b3-progreso-panel__dates { display: flex; gap: 16px; font-size: 13px; color: var(--b3-muted); flex-wrap: wrap; }
.b3-progreso-panel__dates strong { color: var(--b3-text); }

.b3-estado-btns { display: flex; flex-direction: column; gap: 8px; }
.b3-estado-btn {
    width: 100%; padding: 9px 12px; border-radius: var(--b3-radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1.5px solid transparent; transition: all 0.15s; text-align: left;
}
.b3-estado-btn--en-proceso  { background: rgba(14,165,233,.08); color: #0369a1; border-color: rgba(14,165,233,.25); }
.b3-estado-btn--en-proceso:hover  { background: rgba(14,165,233,.15); }
.b3-estado-btn--completada  { background: rgba(16,185,129,.08); color: #065f46; border-color: rgba(16,185,129,.25); }
.b3-estado-btn--completada:hover  { background: rgba(16,185,129,.15); }
.b3-estado-btn--pausada     { background: rgba(245,158,11,.08); color: #92400e; border-color: rgba(245,158,11,.25); }
.b3-estado-btn--pausada:hover     { background: rgba(245,158,11,.15); }
.b3-estado-btn--abandonada  { background: rgba(239,68,68,.08); color: #991b1b; border-color: rgba(239,68,68,.25); }
.b3-estado-btn--abandonada:hover  { background: rgba(239,68,68,.15); }

.b3-btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--b3-radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: transparent; border: 1.5px solid #fecaca; color: #ef4444;
    transition: all 0.15s;
}
.b3-btn-danger:hover { background: #fef2f2; }

.b3-timeline { position: relative; padding-left: 28px; }
.b3-timeline::before {
    content: ''; position: absolute; top: 12px; bottom: 12px;
    left: 7px; width: 2px; background: var(--b3-border); border-radius: 2px;
}
.b3-timeline-item { position: relative; margin-bottom: 20px; }
.b3-timeline-item:last-child { margin-bottom: 0; }
.b3-timeline-dot {
    position: absolute; left: -24px; top: 14px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--b3-primary); border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(14,165,233,.25); z-index: 1;
}
.b3-timeline-content {
    background: var(--b3-bg); border: 1px solid var(--b3-border);
    border-radius: var(--b3-radius-sm); padding: 14px 16px;
    transition: box-shadow 0.15s;
}
.b3-timeline-content:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.b3-timeline-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.b3-timeline-date   { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--b3-muted); }
.b3-timeline-pct    { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: auto; }
.b3-timeline-nota   { font-size: 14px; color: var(--b3-text); line-height: 1.55; margin: 0 0 8px; white-space: pre-wrap; }
.b3-timeline-progreso { margin-top: 4px; }

.b3-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.b3-modal__box {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: min(560px, calc(100vw - 32px)); max-height: min(90vh, 90dvh); overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: b3ModalIn 0.22s ease;
}
@keyframes b3ModalIn {
    from { transform: translateY(20px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.b3-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--b3-border);
}
.b3-modal__head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--b3-text); }
.b3-modal__close {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: var(--b3-muted); line-height: 1; padding: 4px; border-radius: 6px; transition: background 0.1s;
}
.b3-modal__close:hover { background: var(--b3-bg); }
.b3-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.b3-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 20px; border-top: 1px solid var(--b3-border);
}

/* ════════════════════════════════════════════════════════════
   CONSENTIMIENTOS v3 — cs3-*
   ════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────── */
.cs3-page { max-width: 960px; margin: 0 auto; padding: 0 0 48px; }

/* ── Back link ────────────────────────────────────────────── */
.cs3-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--b3-muted);
    text-decoration: none; margin-bottom: 20px; transition: color 0.15s;
}
.cs3-back svg { width: 16px; height: 16px; }
.cs3-back:hover { color: var(--b3-primary); }

/* ── Hero header ──────────────────────────────────────────── */
.cs3-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; border-radius: var(--b3-radius);
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #f0f9ff 100%);
    border: 1px solid rgba(16,185,129,.15);
    margin-bottom: 28px;
}
.cs3-hero__icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: #10b981;
    color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16,185,129,.25);
}
.cs3-hero__icon svg { width: 24px; height: 24px; }
.cs3-hero__text h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--b3-text); line-height: 1.2; }
.cs3-hero__text p  { margin: 0; font-size: 14px; color: var(--b3-muted); }

/* ── Step indicator ───────────────────────────────────────── */
.cs3-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 32px; padding: 0 16px;
}
.cs3-step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; z-index: 1;
}
.cs3-step__circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    background: var(--b3-bg); border: 2px solid var(--b3-border);
    color: var(--b3-muted); transition: all 0.3s;
}
.cs3-step--active .cs3-step__circle {
    background: var(--primary); border-color: var(--primary);
    color: #fff; box-shadow: 0 4px 12px rgba(25,156,130,.3);
}
.cs3-step--done .cs3-step__circle {
    background: #10b981; border-color: #10b981; color: #fff;
}
.cs3-step__label {
    font-size: 12px; font-weight: 600; color: var(--b3-muted);
    text-transform: uppercase; letter-spacing: 0.3px; transition: color 0.3s;
}
.cs3-step--active .cs3-step__label { color: var(--primary); }
.cs3-step--done .cs3-step__label { color: #10b981; }
.cs3-step__line {
    width: 80px; height: 3px; border-radius: 2px;
    background: var(--b3-border); transition: background 0.3s;
    margin: 0 12px; align-self: flex-start; margin-top: 17px;
}
.cs3-step__line--active { background: #10b981; }

/* ── Error alert ──────────────────────────────────────────── */
.cs3-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: var(--b3-radius-sm);
    margin-bottom: 20px; font-size: 14px;
}
.cs3-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.cs3-alert--error  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.cs3-alert__list   { margin: 6px 0 0; padding-left: 18px; }
.cs3-alert__list li{ margin-bottom: 2px; }

/* ── Wizard card ──────────────────────────────────────────── */
.cs3-wiz-card {
    background: var(--b3-card-bg); border: 1px solid var(--b3-border);
    border-radius: var(--b3-radius); box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden; margin-bottom: 24px;
    animation: cs3FadeUp 0.35s ease;
}
@keyframes cs3FadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs3-wiz-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--b3-border);
    background: var(--b3-bg);
}
.cs3-wiz-card__icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cs3-wiz-card__icon svg { width: 16px; height: 16px; }
.cs3-wiz-card__icon--green  { background: rgba(34,197,94,.1);  color: #22c55e; }
.cs3-wiz-card__icon--teal   { background: rgba(16,185,129,.1); color: #10b981; }
.cs3-wiz-card__icon--purple { background: rgba(139,92,246,.1); color: #8b5cf6; }
.cs3-wiz-card__icon--blue   { background: rgba(14,165,233,.08); color: var(--b3-primary); }
.cs3-wiz-card__title { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--b3-text); }
.cs3-wiz-card__sub   { margin: 0; font-size: 13px; color: var(--b3-muted); }
.cs3-wiz-card__body  { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ── Type selector grid ───────────────────────────────────── */
.cs3-type-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.cs3-type-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 12px; border-radius: var(--b3-radius-sm);
    border: 2px solid var(--b3-border); background: #fff;
    cursor: pointer; transition: all 0.2s; text-align: center;
}
.cs3-type-card:hover {
    border-color: rgba(25,156,130,.35); background: rgba(25,156,130,.03);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.cs3-type-card--selected {
    border-color: var(--primary); background: rgba(25,156,130,.06);
    box-shadow: 0 0 0 3px rgba(25,156,130,.12);
}
.cs3-type-card__icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--b3-bg); color: var(--b3-muted); transition: all 0.2s;
}
.cs3-type-card__icon svg { width: 20px; height: 20px; }
.cs3-type-card--selected .cs3-type-card__icon {
    background: rgba(25,156,130,.12); color: var(--primary);
}
.cs3-type-card__name {
    font-size: 13px; font-weight: 600; color: var(--b3-text);
    line-height: 1.3;
}

/* ── Form elements ────────────────────────────────────────── */
.cs3-form-group { display: flex; flex-direction: column; gap: 6px; }
.cs3-label {
    font-size: 12.5px; font-weight: 600; color: var(--b3-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.cs3-label--req::after { content: ' *'; color: #ef4444; }
.cs3-label-opt { font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }
.cs3-input, .cs3-textarea {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--b3-border); border-radius: var(--b3-radius-sm);
    font-size: 14px; color: var(--b3-text); font-family: inherit;
    background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.cs3-input:focus, .cs3-textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.1);
}
.cs3-textarea { resize: vertical; line-height: 1.55; }

/* Document-sized textarea: comfortable reading and editing */
.cs3-textarea--document {
    min-height: 420px;
    font-size: 14.5px;
    line-height: 1.85;
    padding: 20px 22px;
    color: #1e293b;
    background: #fefefe;
    border-radius: 8px;
    font-family: var(--font-family);
}
.cs3-textarea--document:focus {
    background: #fff;
}
.cs3-form-hint {
    font-size: 12.5px;
    color: #64748b;
    margin: 0 0 8px;
    font-family: var(--font-family);
}

.cs3-error-msg { font-size: 13px; color: #ef4444; margin: 4px 0 0; }

/* ── Sources / fundamento panel ──────────────────────────── */
.cs3-sources { margin-top: 14px; }
.cs3-sources__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-body);
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; font-family: var(--font-family);
    transition: all .15s;
}
.cs3-sources__trigger:hover {
    border-color: #199c82; color: #199c82; background: rgba(25,156,130,.04);
}
.cs3-sources__chevron {
    transition: transform .2s;
}
.cs3-sources__chevron.is-open { transform: rotate(180deg); }

.cs3-sources__panel {
    margin-top: 10px; padding: 16px 18px;
    background: #f8fafc; border: 1px solid var(--border-light);
    border-radius: 10px;
}
.cs3-sources__intro {
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
    margin: 0 0 12px; font-family: var(--font-family);
}
.cs3-sources__list {
    display: flex; flex-direction: column; gap: 10px;
}
.cs3-sources__item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; background: #fff;
    border: 1px solid var(--border-light); border-radius: 8px;
}
.cs3-sources__badge {
    flex-shrink: 0; padding: 3px 8px; border-radius: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
    background: rgba(25,156,130,.1); color: #199c82;
    font-family: var(--font-family);
}
.cs3-sources__badge--amber {
    background: rgba(245,158,11,.1); color: #b45309;
}
.cs3-sources__name {
    font-size: 12.5px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 2px; font-family: var(--font-family);
}
.cs3-sources__desc {
    font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
    margin: 0; font-family: var(--font-family);
}
.cs3-sources__disclaimer {
    font-size: 11px; color: #94a3b8; line-height: 1.5;
    margin: 12px 0 0; padding-top: 10px;
    border-top: 1px solid var(--border-light);
    font-style: italic; font-family: var(--font-family);
}

/* ── Signature panel ──────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
 *  FIRMAS DIGITALES · wizard consentimiento — paso 2 (rediseño .sig2-*)
 *  Objetivo: que sea inequívoco QUIÉN firma en CADA recuadro.
 *  Paciente = acento teal (requerida) · Profesional = acento índigo
 *  (opcional). Marca de agua del rol + guía "Firme aquí" + línea base.
 * ════════════════════════════════════════════════════════════ */
.sig2-intro {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 20px;
    background: rgba(25,156,130,.05); border: 1px solid rgba(25,156,130,.16);
    border-radius: 12px; font-size: 13px; color: var(--b3-text); line-height: 1.5;
}
.sig2-intro svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.sig2-intro strong { font-weight: 700; }

.sig2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.sig2-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--b3-border); border-top-width: 3px;
    border-radius: 16px; overflow: hidden; background: #fff;
    transition: box-shadow .2s, border-color .2s;
}
.sig2-card--patient { border-top-color: var(--primary); }
.sig2-card--pro     { border-top-color: #6366f1; }
.sig2-card--error {
    border-color: #ef4444; border-top-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.10);
}

/* ── Cabecera del recuadro ── */
.sig2-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--b3-border);
}
.sig2-head__ico {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center;
}
.sig2-head__ico svg { width: 20px; height: 20px; }
.sig2-card--patient .sig2-head__ico { background: rgba(25,156,130,.10); color: var(--primary); }
.sig2-card--pro     .sig2-head__ico { background: rgba(99,102,241,.10); color: #6366f1; }
.sig2-head__txt { flex: 1; min-width: 0; }
.sig2-head__role { display: block; font-size: 15px; font-weight: 700; color: var(--b3-text); line-height: 1.2; }
.sig2-head__who {
    display: block; font-size: 12.5px; color: var(--b3-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sig2-badge {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
}
.sig2-badge--req { background: rgba(239,68,68,.10); color: #dc2626; }
.sig2-badge--opt { background: #f1f5f9; color: #64748b; }

/* ── Superficie de firma ── */
.sig2-pad { position: relative; background: #fff; }
.sig2-canvas {
    display: block; width: 100%; position: relative; z-index: 2;
    background: transparent; cursor: crosshair; touch-action: none;
}
.sig2-pad__underlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .25s;
}
.sig2-pad.is-signed .sig2-pad__underlay { opacity: 0; }
.sig2-pad__watermark {
    font-size: 34px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(15,23,42,.05); user-select: none; line-height: 1;
}
.sig2-card--patient .sig2-pad__watermark { color: rgba(25,156,130,.10); }
.sig2-card--pro     .sig2-pad__watermark { color: rgba(99,102,241,.10); }
.sig2-pad__hint {
    display: flex; align-items: center; gap: 7px; margin-top: 8px;
    font-size: 13px; font-weight: 600; color: #cbd5e1;
}
.sig2-pad__hint svg { width: 15px; height: 15px; }
.sig2-pad__baseline {
    position: absolute; left: 24px; right: 24px; bottom: 34px; height: 0;
    border-bottom: 1.5px dashed #cbd5e1; z-index: 1; pointer-events: none;
}

/* ── Pie: nombre + estado + limpiar ── */
.sig2-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 16px; border-top: 1px solid var(--b3-border); background: var(--b3-bg);
}
.sig2-foot__name { font-size: 13px; font-weight: 600; color: var(--b3-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig2-foot__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sig2-status { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.sig2-status--empty  { background: #f1f5f9; color: #94a3b8; }
.sig2-status--signed { background: rgba(16,185,129,.12); color: #065f46; }
.sig2-status--error  { background: #fef2f2; color: #ef4444; }
.sig2-clear {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--b3-muted);
    background: #fff; border: 1px solid var(--b3-border);
    padding: 5px 11px; border-radius: 8px; cursor: pointer; transition: all .12s;
}
.sig2-clear svg { width: 13px; height: 13px; }
.sig2-clear:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ── Selector de modo (firma profesional guardada) ── */
.sig2-modes { display: flex; gap: 8px; padding: 12px 16px 0; }
.sig2-mode {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; background: #fff; border: 1.5px solid var(--b3-border);
    color: var(--b3-muted); transition: all .15s;
}
.sig2-mode svg { width: 15px; height: 15px; }
.sig2-mode:hover { border-color: rgba(99,102,241,.4); }
.sig2-mode--active { background: rgba(99,102,241,.08); border-color: #6366f1; color: #4f46e5; }

/* ── Vista de firma guardada ── */
.sig2-saved { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px; }
.sig2-saved__img { max-width: 100%; max-height: 120px; border: 1px solid var(--b3-border); border-radius: 8px; padding: 8px; background: #fff; }
.sig2-saved__cap { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #065f46; }
.sig2-saved__cap svg { width: 14px; height: 14px; }

/* ── Preview / document view ──────────────────────────────── */
/* ── Professional document view (show.blade.php) ─────────── */
.cs3-doc {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
}

/* Letterhead */
.cs3-doc__letterhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 36px 20px;
    gap: 20px;
}
.cs3-doc__letterhead-left { flex-shrink: 0; }
.cs3-doc__logo {
    max-height: 60px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}
.cs3-doc__letterhead-right { text-align: right; }
.cs3-doc__lh-clinic {
    margin: 0; font-size: 15px; font-weight: 700; color: #1e293b;
    font-family: var(--font-family);
}
.cs3-doc__lh-pro {
    margin: 3px 0 0; font-size: 13px; font-weight: 600; color: #334155;
    font-family: var(--font-family);
}
.cs3-doc__lh-detail {
    margin: 2px 0 0; font-size: 11.5px; color: #64748b;
    font-family: var(--font-family);
}

/* Separators */
.cs3-doc__separator {
    height: 2px;
    background: linear-gradient(90deg, #199c82, #199c82);
    margin: 0 36px;
}
.cs3-doc__separator--thin {
    height: 1px;
    background: #e2e8f0;
}

/* Reference bar */
.cs3-doc__ref-bar {
    display: flex;
    justify-content: space-between;
    padding: 12px 36px;
    font-size: 11px;
    color: #64748b;
    font-family: var(--font-family);
}
.cs3-doc__ref { font-weight: 600; letter-spacing: .03em; }
.cs3-doc__ref-date { font-weight: 500; }

/* Title block */
.cs3-doc__title-block {
    text-align: center;
    padding: 20px 36px 8px;
}
.cs3-doc__title {
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px;
    letter-spacing: .08em;
    font-family: var(--font-family);
}
.cs3-doc__subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
    font-family: var(--font-family);
}

/* Patient data bar */
.cs3-doc__patient-bar {
    display: flex;
    gap: 32px;
    padding: 14px 36px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.cs3-doc__patient-field { display: flex; flex-direction: column; gap: 1px; }
.cs3-doc__pf-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    font-family: var(--font-family);
}
.cs3-doc__pf-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    font-family: var(--font-family);
}

/* Body text */
.cs3-doc__body {
    padding: 28px 36px 32px;
    font-size: 14px;
    line-height: 1.85;
    color: #1e293b;
    font-family: var(--font-family);
}

/* Readable mode for preview and show — optimized for reading before signing */
.cs3-doc__body--readable {
    font-size: 15px;
    line-height: 1.9;
    color: #1e293b;
    padding: 32px 40px 36px;
}
.cs3-doc__body--readable .cs3-doc__text {
    max-width: 100%;
}

/* Signatures section */
.cs3-doc__firmas-section {
    padding: 0 36px 28px;
}
.cs3-doc__firmas-heading {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin: 0 0 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    font-family: var(--font-family);
}
.cs3-doc__firmas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.cs3-doc__firma-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.cs3-doc__firma-img-wrap {
    height: 72px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 6px;
}
.cs3-doc__firma-img {
    max-width: 220px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.cs3-doc__firma-empty {
    height: 72px;
    margin-bottom: 6px;
}
.cs3-doc__firma-line {
    width: 200px;
    height: 1px;
    background: #1e293b;
    margin-bottom: 6px;
}
.cs3-doc__firma-name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    font-family: var(--font-family);
}
.cs3-doc__firma-detail {
    margin: 1px 0 0;
    font-size: 11px;
    color: #64748b;
    font-family: var(--font-family);
}
.cs3-doc__firma-date {
    margin: 4px 0 0;
    font-size: 11px;
    color: #94a3b8;
    font-family: var(--font-family);
}

/* Document footer */
.cs3-doc__footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 36px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 10px;
    color: #94a3b8;
    font-family: var(--font-family);
    letter-spacing: .02em;
}

/* Observaciones card */
.cs3-obs-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    margin-top: 16px;
    box-shadow: var(--shadow-sm);
}
.cs3-obs-card__title {
    margin: 0 0 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
}
.cs3-obs-card__text {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    font-family: var(--font-family);
}

/* Print utilities */
.cs3-no-print {}
.cs3-print-only { display: none; }

/* ── Print styles ─────────────────────────────────────────── */
@page {
    margin: 15mm 18mm 20mm 18mm;
    @bottom-right {
        content: "Pág. " counter(page) " de " counter(pages);
        font-size: 8pt;
        font-family: sans-serif;
        color: #94a3b8;
    }
}

/* ════════════════════════════════════════════════════════════
 *  RESET GLOBAL DE IMPRESIÓN — app shell (window.print())
 *  Toda vista que use window.print() hereda el layout app.blade
 *  (sidebar, topbar, wrappers con min-height:100vh + overflow).
 *  En impresión esos wrappers dejan barras de scroll residuales,
 *  clipping y páginas fantasma en blanco. Aquí se neutraliza el
 *  shell para que solo fluya el documento. Reutilizable por
 *  cualquier módulo imprimible, no solo consentimientos.
 * ════════════════════════════════════════════════════════════ */
@media print {
    html, body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        background: #fff !important;
    }
    .app-layout,
    .main-wrapper,
    .content {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    /* Cromo de navegación y elementos flotantes fuera del documento */
    .sidebar, .topbar, .hamburger, .sidebar-overlay,
    .demo-chip, .demo-guide-btn, .demo-link-btn,
    .pfm-imp-bar, .pfm-viewas-bar { display: none !important; }
    /* Las barras demo/impersonación empujan el body con padding-top */
    body.pfm-has-imp-bar,
    body.pfm-has-viewas-bar { padding-top: 0 !important; }
}

@media print {
    .cs3-no-print { display: none !important; }
    .cs3-print-only { display: inline !important; }
    .cs3-page { padding: 0 !important; max-width: none !important; }
    .cs3-doc {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        /* Sin clipping: overflow:hidden en pantalla romperia la paginación
           multi-página (corta contenido al borde de página). */
        overflow: visible !important;
    }
    /* Force two-column grid regardless of viewport width */
    .cs3-doc__firmas-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }
    .cs3-doc__letterhead { padding: 16px 24px 12px; }
    .cs3-doc__separator { margin: 0 24px; }
    .cs3-doc__ref-bar { padding: 8px 24px; }
    .cs3-doc__title-block { padding: 12px 24px 4px; }
    .cs3-doc__patient-bar { padding: 10px 24px; }
    .cs3-doc__body { padding: 16px 24px 20px; font-size: 12px; line-height: 1.7; }
    .cs3-doc__firmas-section { padding: 0 24px 16px; }
    .cs3-doc__footer { padding: 6px 24px; }
    .cs3-doc__firma-img { max-width: 180px; max-height: 60px; }
    /* Cada firma se mantiene íntegra, pero la sección SÍ puede fluir a la
       página siguiente: marcar page-break-inside:avoid en el bloque grande
       dejaba media página en blanco cuando no cabía completo. El heading se
       mantiene pegado a las firmas con break-after:avoid. */
    .cs3-doc__firmas-heading { break-after: avoid; page-break-after: avoid; }
    .cs3-doc__firma-block { page-break-inside: avoid; break-inside: avoid; }
}

/* ── Responsive for document view ─────────────────────────── */
@media (max-width: 768px) {
    .cs3-doc__letterhead { flex-direction: column; padding: 20px 24px 16px; }
    .cs3-doc__letterhead-right { text-align: left; }
    .cs3-doc__separator { margin: 0 24px; }
    .cs3-doc__ref-bar { padding: 10px 24px; flex-direction: column; gap: 2px; }
    .cs3-doc__title-block { padding: 16px 24px 6px; }
    .cs3-doc__title { font-size: 15px; }
    .cs3-doc__patient-bar { padding: 12px 24px; flex-direction: column; gap: 8px; }
    .cs3-doc__body { padding: 20px 24px; font-size: 13px; }
    .cs3-doc__firmas-section { padding: 0 24px 20px; }
    .cs3-doc__firmas-grid { grid-template-columns: 1fr; gap: 28px; }
    .cs3-doc__footer { padding: 8px 24px; font-size: 9px; }
}
@media (max-width: 480px) {
    .cs3-doc__letterhead { padding: 16px 18px 12px; }
    .cs3-doc__logo { max-height: 44px; }
    .cs3-doc__separator { margin: 0 18px; }
    .cs3-doc__ref-bar { padding: 8px 18px; }
    .cs3-doc__title-block { padding: 12px 18px 4px; }
    .cs3-doc__title { font-size: 14px; letter-spacing: .05em; }
    .cs3-doc__patient-bar { padding: 10px 18px; }
    .cs3-doc__body { padding: 16px 18px; font-size: 12.5px; }
    .cs3-doc__firmas-section { padding: 0 18px 16px; }
    .cs3-doc__footer { padding: 6px 18px; }
}

/* ── Topbar actions for show page ─────────────────────────── */
.cs3-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.cs3-topbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs3-signed-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: #065f46;
    background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3);
    padding: 5px 14px; border-radius: var(--radius-lg);
}
.cs3-signed-badge svg { width: 14px; height: 14px; }

/* ── Wizard navigation buttons ────────────────────────────── */
.cs3-wiz-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.cs3-wiz-nav--end { justify-content: flex-end; }
.cs3-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; height: 42px; padding: 0 24px; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; font-family: inherit;
    text-decoration: none; border: none;
}
.cs3-btn svg { width: 16px; height: 16px; }
.cs3-btn--ghost {
    background: transparent; border: 1.5px solid var(--b3-border);
    color: var(--b3-muted);
}
.cs3-btn--ghost:hover { background: var(--b3-bg); color: var(--b3-text); }
.cs3-btn--primary {
    background: var(--primary); color: #fff;
    box-shadow: 0 2px 8px rgba(25,156,130,.25);
}
.cs3-btn--primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(25,156,130,.35); }
.cs3-btn--primary:active { transform: scale(0.98); }
.cs3-btn--success {
    background: #10b981; color: #fff;
    box-shadow: 0 2px 8px rgba(16,185,129,.25);
}
.cs3-btn--success:hover { background: #059669; box-shadow: 0 4px 12px rgba(16,185,129,.35); }
.cs3-btn--print {
    background: transparent; border: 1.5px solid var(--b3-border);
    color: var(--b3-muted);
}
.cs3-btn--print:hover { background: var(--b3-bg); color: var(--b3-text); }

/* ── Skeleton loading ─────────────────────────────────────── */
.cs3-skeleton {
    position: relative; overflow: hidden;
    background: #f1f5f9; border-radius: var(--b3-radius-sm);
}
.cs3-skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: cs3Shimmer 1.5s infinite;
}
@keyframes cs3Shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Validation highlight ─────────────────────────────────── */
.cs3-field--error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important; }

/* ════════════════════════════════════════════════════════════
   CONSENTIMIENTOS v3 — Responsive
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .cs3-hero { flex-direction: column; align-items: flex-start; text-align: left; padding: 16px 18px; }
    .cs3-hero__text h1 { font-size: 19px; }
    .cs3-steps { gap: 0; padding: 0 8px; }
    .cs3-step__line { width: 40px; margin: 0 6px; }
    .cs3-step__label { font-size: 11px; }
    .cs3-type-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .cs3-type-card { padding: 14px 10px; }
    .cs3-type-card__icon { width: 36px; height: 36px; }
    .cs3-type-card__icon svg { width: 16px; height: 16px; }
    .cs3-type-card__name { font-size: 12px; }
    .sig2-grid { grid-template-columns: 1fr; }
    .cs3-doc__header { flex-direction: column; align-items: flex-start; }
    .cs3-doc__clinic { text-align: left; }
    .cs3-doc__body { padding: 20px 18px; }
    .cs3-doc__firmas { grid-template-columns: 1fr; padding: 18px; }
    .cs3-doc__meta-footer { padding: 12px 18px; gap: 16px; }
    .cs3-wiz-card__body { padding: 16px; }
    .cs3-topbar { flex-direction: column; align-items: flex-start; }
    .cs3-wiz-nav { flex-direction: column; }
    .cs3-wiz-nav .cs3-btn { width: 100%; }
    .cs3-btn { height: 44px; }
}

@media (max-width: 480px) {
    .cs3-page { padding: 0 0 32px; }
    .cs3-step__line { width: 24px; margin: 0 4px; }
    .cs3-step__circle { width: 32px; height: 32px; font-size: 13px; }
    .cs3-step__label { font-size: 10px; }
    .cs3-type-grid { grid-template-columns: 1fr 1fr; }
    .sig2-modes { flex-direction: column; gap: 6px; }
    .cs3-doc__firmas { gap: 16px; padding: 14px; }
    .cs3-doc__firma-img { max-width: 200px; }
    .cs3-doc__firma-line { width: 180px; }
}

@media print {
    .cs3-back, .cs3-topbar__right, .cs3-wiz-nav, .sidebar, .topbar { display: none !important; }
    .cs3-doc { box-shadow: none; border: none; }
    .cs3-doc__body { padding: 0 16px; }
    .cs3-doc__header { border-bottom-width: 1px; }
    .cs3-obs-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    .cs3-page { max-width: 100%; padding: 0; }
}

/* ════════════════════════════════════════════════════════════
   ESCALAS — esc-*
   ════════════════════════════════════════════════════════════ */

.esc-nivel-badge {
    display: inline-block; font-size: 12.5px; font-weight: 700;
    padding: 3px 12px; border-radius: var(--radius-lg);
}
.esc-nivel-badge--success { background: rgba(16,185,129,.12); color: #065f46; }
.esc-nivel-badge--info    { background: rgba(14,165,233,.12); color: #0369a1; }
.esc-nivel-badge--warning { background: rgba(245,158,11,.12); color: #92400e; }
.esc-nivel-badge--danger  { background: rgba(239,68,68,.12);  color: #991b1b; }
.esc-nivel-badge--lg { font-size: 14px; padding: 6px 16px; }

.esc-selector { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.esc-selector__label { font-size: 13px; font-weight: 600; color: var(--b3-muted); }
.esc-selector__btns  { display: flex; gap: 6px; flex-wrap: wrap; }
.esc-selector__btn {
    padding: 6px 16px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 600;
    color: var(--b3-muted); background: var(--b3-bg); border: 1.5px solid var(--b3-border);
    text-decoration: none; transition: all 0.15s;
}
.esc-selector__btn:hover    { border-color: var(--b3-primary); color: var(--b3-primary); }
.esc-selector__btn--active  { background: var(--b3-purple); border-color: var(--b3-purple); color: #fff; }

.esc-score-live { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 8px; }
.esc-score-live__num { font-size: 36px; font-weight: 800; line-height: 1; color: #94a3b8; transition: color 0.3s; }
.esc-score-live__max { font-size: 16px; color: var(--b3-muted); margin-bottom: 4px; }
.esc-score-bar-wrap  { margin-top: 8px; }
.esc-score-bar       { height: 8px; background: var(--b3-border); border-radius: 5px; overflow: hidden; }
.esc-score-bar__fill { height: 100%; border-radius: 5px; background: #94a3b8; transition: width 0.4s, background 0.3s; }
.esc-respondidos     { font-size: 12px; color: var(--b3-muted); margin-top: 8px; font-weight: 500; }

.esc-items-header {
    display: flex; align-items: center;
    padding: 8px 0 12px; border-bottom: 2px solid var(--b3-border); margin-bottom: 0;
}
.esc-items-header__pregunta { flex: 1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--b3-muted); }
.esc-items-header__opt      { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.esc-items-header__opt-num  { font-size: 14px; font-weight: 700; color: var(--b3-text); }
.esc-items-header__opt-txt  { font-size: 10px; text-align: center; color: var(--b3-muted); line-height: 1.2; max-width: 72px; }

.esc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 4px; border-bottom: 1px solid var(--b3-border);
    transition: background 0.1s; border-radius: 6px;
}
.esc-item--odd   { background: #fafcff; }
.esc-item--done  { background: rgba(16,185,129,.03); }
.esc-item--error { background: rgba(239,68,68,.05) !important; box-shadow: inset 0 0 0 1.5px rgba(239,68,68,.3); border-radius: 8px; }
.esc-item__num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--b3-border); color: var(--b3-muted);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.esc-item__text { flex: 1; font-size: 14px; color: var(--b3-text); line-height: 1.4; }
.esc-item__opts { display: flex; gap: 4px; }

.esc-radio-label {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 80px; cursor: pointer;
    padding: 6px 4px; border-radius: 6px; transition: background 0.1s;
}
.esc-radio-label:hover { background: rgba(14,165,233,.06); }
.esc-radio { display: none; }
.esc-radio-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--b3-border); background: #fff; transition: all 0.15s; flex-shrink: 0;
}
.esc-radio:checked + .esc-radio-dot {
    border-color: var(--b3-purple); background: var(--b3-purple);
    box-shadow: 0 0 0 3px rgba(139,92,246,.2);
}
.esc-radio-val { font-size: 11px; color: var(--b3-muted); font-weight: 600; }

.esc-result-card {
    display: flex; gap: 24px; background: #fff;
    border: 1px solid var(--b3-border); border-radius: var(--b3-radius);
    padding: 24px; margin-bottom: 0;
    align-items: flex-start; flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.esc-result-card__score {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 120px; padding: 16px;
    background: var(--b3-bg); border-radius: var(--b3-radius-sm);
}
.esc-result-big-num { font-size: 52px; font-weight: 800; line-height: 1; }
.esc-result-max     { font-size: 16px; color: var(--b3-muted); }
.esc-result-nivel   { margin-top: 8px; }
.esc-result-card__meta { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.esc-result-meta-item  { display: flex; flex-direction: column; gap: 4px; }
.esc-result-meta-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--b3-muted); }
.esc-result-meta-val   { font-size: 14px; font-weight: 500; color: var(--b3-text); }

.esc-niveles-tabla { display: flex; flex-direction: column; }
.esc-niveles-row   { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--b3-border); transition: background 0.1s; }
.esc-niveles-row:last-child  { border-bottom: none; }
.esc-niveles-row--active     { background: rgba(14,165,233,.04); }
.esc-niveles-rango  { width: 80px; font-size: 13px; font-weight: 600; color: var(--b3-muted); font-family: monospace; }
.esc-niveles-nivel  { display: flex; align-items: center; gap: 10px; }
.esc-niveles-actual { font-size: 12px; color: var(--b3-primary); font-weight: 600; }

.esc-respuestas-lista { display: flex; flex-direction: column; }
.esc-resp-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--b3-border);
}
.esc-resp-row:last-child { border-bottom: none; }
.esc-resp-row--odd  { background: var(--b3-bg); }
.esc-resp-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--b3-border); color: var(--b3-muted);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.esc-resp-text   { flex: 1; font-size: 13.5px; color: var(--b3-text); line-height: 1.4; }
.esc-resp-val    { display: flex; align-items: center; gap: 8px; }
.esc-resp-score  { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.esc-resp-opcion { font-size: 12.5px; color: var(--b3-muted); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   ESCALAS v4 — esc4-* (professional centered layout)
   ════════════════════════════════════════════════════════════ */
.esc4 { max-width: 860px; margin: 0 auto; padding-bottom: 80px; }

/* Back */
.esc4-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    text-decoration: none; margin-bottom: 14px; transition: color .15s;
}
.esc4-back:hover { color: var(--primary); }
.esc4-back svg { width: 15px; height: 15px; }

/* Scale selector */
.esc4-selector {
    display: flex; gap: 5px; flex-wrap: wrap;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.esc4-selector__item {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 16px; border-radius: var(--radius-sm);
    background: var(--bg-card); border: 1.5px solid var(--border);
    text-decoration: none; transition: all .15s; gap: 1px;
}
.esc4-selector__item:hover { border-color: var(--primary); background: var(--primary-bg); }
.esc4-selector__item--active { background: var(--primary-bg); border-color: var(--primary); }
.esc4-selector__abbr { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.esc4-selector__item--active .esc4-selector__abbr { color: var(--primary); }
.esc4-selector__cat { font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.esc4-selector__item--active .esc4-selector__cat { color: var(--primary-dark); }

/* Hero */
.esc4-hero {
    margin-bottom: 20px;
}
.esc4-hero__badge {
    display: inline-block; padding: 3px 10px; border-radius: 9999px;
    background: rgba(139,92,246,.1); color: #8b5cf6;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 8px;
}
.esc4-hero__title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -.02em; }
.esc4-hero__meta { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Clinical details (collapsible) */
.esc4-details {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); margin-bottom: 20px; overflow: hidden;
}
.esc4-details__trigger {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; font-size: 13px; font-weight: 700;
    color: var(--text-primary); cursor: pointer; list-style: none;
    transition: background .15s;
}
.esc4-details__trigger:hover { background: var(--bg-card-hover); }
.esc4-details__trigger::-webkit-details-marker { display: none; }
.esc4-details__trigger svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.esc4-details__arrow { margin-left: auto; transition: transform .2s; }
.esc4-details[open] .esc4-details__arrow { transform: rotate(180deg); }
.esc4-details__body { padding: 0 18px 18px; }

.esc4-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.esc4-meta { display: flex; flex-direction: column; gap: 3px; }
.esc4-meta__label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.esc4-meta__value { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

.esc4-warn {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: #fef3c7; border: 1px solid #fde68a;
    font-size: 12px; color: #92400e; line-height: 1.5; margin-bottom: 12px;
}
.esc4-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: #d97706; }
.esc4-warn div { flex: 1; }

.esc4-ref-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: var(--radius-sm);
    background: transparent; border: 1.5px solid var(--border);
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all .15s;
}
.esc4-ref-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.esc4-ref-btn svg { width: 13px; height: 13px; }

/* Alert */
.esc4-alert {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px; border-radius: var(--radius);
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    font-size: 13px; margin-bottom: 16px;
}
.esc4-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* Instruction */
.esc4-instruction {
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: rgba(139,92,246,.05); border: 1px solid rgba(139,92,246,.12);
    font-size: 14px; font-weight: 600; color: #5b21b6; margin-bottom: 10px;
    line-height: 1.5;
}

/* Legend */
.esc4-legend {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    margin-bottom: 14px;
}
.esc4-legend__title { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.esc4-legend__chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 9999px;
    background: var(--bg-card); border: 1px solid var(--border-light);
    font-size: 11px; color: var(--text-secondary); font-weight: 500;
}
.esc4-legend__num {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--border-light); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
}

/* Questions */
.esc4-items {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px;
}
.esc4-q {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border-light);
    transition: background .15s;
}
.esc4-q:last-child { border-bottom: none; }
.esc4-q--alt { background: #fafbfd; }
.esc4-q--done { background: rgba(16,185,129,.025); }
.esc4-q--done .esc4-q__num { background: #10b981; color: #fff; }
.esc4-q--err { background: rgba(239,68,68,.04); }
.esc4-q--err .esc4-q__num { background: #ef4444; color: #fff; }

.esc4-q__left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.esc4-q__num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--border-light); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; transition: all .2s;
}
.esc4-q__text { font-size: 14px; color: var(--text-primary); line-height: 1.5; font-weight: 500; padding-top: 2px; }
.esc4-q__inv {
    display: inline-block; padding: 0 4px; border-radius: 3px;
    background: rgba(139,92,246,.1); color: #7c3aed;
    font-size: 9px; font-weight: 700; text-decoration: none;
    vertical-align: middle; margin-left: 3px;
}

/* Response options */
.esc4-q__right { display: flex; gap: 4px; flex-shrink: 0; padding-top: 1px; }
.esc4-opt { cursor: pointer; user-select: none; }
.esc4-opt__radio { display: none; }
.esc4-opt__btn {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--bg-card);
    color: var(--text-muted); font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; font-family: inherit;
}
.esc4-opt:hover .esc4-opt__btn { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.esc4-opt__radio:checked + .esc4-opt__btn {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(25,156,130,.25);
}

/* Bottom fields */
.esc4-bottom {
    display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 16px 18px;
}
.esc4-bottom__field { display: flex; flex-direction: column; gap: 5px; }
.esc4-bottom__field--grow { flex: 1; min-width: 200px; }
.esc4-bottom__label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.esc4-bottom__opt { font-weight: 400; color: var(--text-muted); font-style: italic; }
.esc4-bottom__input {
    padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; color: var(--text-primary);
    background: var(--bg-input); outline: none; transition: border-color .15s;
}
.esc4-bottom__input:focus { border-color: var(--primary); }
.esc4-bottom__textarea {
    width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--text-primary);
    background: var(--bg-input); resize: vertical; outline: none; transition: border-color .15s;
    line-height: 1.5;
}
.esc4-bottom__textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,156,130,.08); }

/* Sticky score bar */
.esc4-scorebar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
    padding: 10px 24px;
}
.esc4-scorebar__inner {
    max-width: 860px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
}
.esc4-scorebar__score { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.esc4-scorebar__num { font-size: 28px; font-weight: 800; color: #94a3b8; transition: color .3s; line-height: 1; }
.esc4-scorebar__of { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.esc4-scorebar__bar { flex: 1; height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; min-width: 80px; }
.esc4-scorebar__fill { height: 100%; width: 0%; border-radius: 4px; background: #94a3b8; transition: width .3s, background .3s; }
.esc4-scorebar__info { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.esc4-scorebar__badge {
    padding: 4px 12px; border-radius: 9999px;
    font-size: 11px; font-weight: 700; background: var(--border-light); color: var(--text-muted);
    transition: all .2s;
}
.esc4-scorebar__progress { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.esc4-scorebar__submit {
    padding: 9px 20px; border-radius: var(--radius-sm); border: none;
    background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(25,156,130,.2);
}
.esc4-scorebar__submit:hover { background: var(--primary-dark); }
.esc4-scorebar__submit svg { width: 14px; height: 14px; }

/* Nivel colors */
.esc4-nivel--success { background: rgba(16,185,129,.12); color: #065f46; }
.esc4-nivel--info    { background: rgba(14,165,233,.12); color: #0369a1; }
.esc4-nivel--warning { background: rgba(245,158,11,.12); color: #92400e; }
.esc4-nivel--danger  { background: rgba(239,68,68,.12);  color: #991b1b; }

/* Modal */
.esc4-modal {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(15,23,42,.4); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.esc4-modal--open { opacity: 1; pointer-events: auto; }
.esc4-modal__box {
    background: var(--bg-card); border-radius: var(--radius-lg);
    width: 100%; max-width: 600px; max-height: min(80vh, 80dvh);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    transform: scale(.96); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.esc4-modal--open .esc4-modal__box { transform: scale(1); }
.esc4-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
}
.esc4-modal__head h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text-primary); }
.esc4-modal__head button {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: var(--bg-card-hover); border: none; color: var(--text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.esc4-modal__head button:hover { background: #fef2f2; color: #ef4444; }
.esc4-modal__head button svg { width: 13px; height: 13px; }
.esc4-modal__content { padding: 18px 20px; overflow-y: auto; flex: 1; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.esc4-modal__content > p { margin: 0 0 14px; }
.esc4-modal__ref { padding: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 8px; }
.esc4-modal__ref strong { display: block; font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.esc4-modal__ref p { margin: 0 0 4px; font-size: 12px; }
.esc4-modal__ref small { font-size: 11px; color: var(--text-muted); }
.esc4-modal__note {
    margin-top: 14px; padding: 12px; border-radius: var(--radius-sm);
    background: #fef3c7; border: 1px solid #fde68a; font-size: 12px; color: #92400e;
}

/* Responsive */
@media (max-width: 768px) {
    .esc4 { padding-bottom: 90px; }
    .esc4-hero__title { font-size: 18px; }
    .esc4-meta-grid { grid-template-columns: 1fr; }
    .esc4-q { flex-direction: column; gap: 8px; }
    .esc4-q__right { width: 100%; justify-content: flex-start; }
    .esc4-opt__btn { width: 40px; height: 40px; }
    .esc4-selector__item { padding: 6px 10px; }
    .esc4-selector__abbr { font-size: 11px; }
    .esc4-scorebar { padding: 8px 14px; }
    .esc4-scorebar__num { font-size: 22px; }
    .esc4-scorebar__bar { min-width: 50px; }
    .esc4-bottom { flex-direction: column; }
}
@media (max-width: 480px) {
    .esc4-legend__chip { font-size: 10px; padding: 2px 6px; }
    .esc4-q { padding: 12px 14px; }
    .esc4-opt__btn { width: 36px; height: 36px; font-size: 12px; }
    .esc4-scorebar__submit span { display: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Bloque 3
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .b3-grid-2 { grid-template-columns: 1fr; }
    .b3-form-row { grid-template-columns: 1fr; }
    .b3-page-header { flex-direction: column; align-items: flex-start; }
    .b3-page-header__actions { width: 100%; }
    .b3-actions { justify-content: stretch; }
    .b3-actions .ep-btn { flex: 1; justify-content: center; }
    .psh-metas-grid { grid-template-columns: 1fr; }
    .b3-progreso-panel { flex-direction: column !important; align-items: flex-start; }
    .b3-progreso-panel__bar-wrap { width: 100%; }
    .cons-doc__meta { grid-template-columns: 1fr 1fr; }
    .cons-doc__text { padding: 20px 16px; }
    .cons-doc__firma-section { padding: 16px; }
    .esc-result-card { flex-direction: column; }
    .esc-result-card__meta { grid-template-columns: 1fr; }
    .esc-items-header { display: none; }
    .esc-item { flex-direction: column; align-items: flex-start; }
    .esc-item__opts { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; gap: 0; }
    .esc-radio-label { width: 100%; }
    .esc-selector { gap: 8px; }
    .esc-selector__btn { padding: 5px 12px; font-size: 12px; }
}

@media (max-width: 480px) {
    .b3-page-header__title { font-size: 18px; }
    .b3-modal__box { border-radius: 16px 16px 0 0; }
    .b3-modal { align-items: flex-end; padding: 0; }
    .cons-doc__meta { grid-template-columns: 1fr; }
    .cons-doc__meta-item { border-right: none; border-bottom: 1px solid var(--b3-border); }
    .esc-item__opts { grid-template-columns: repeat(2, 1fr); }
}


/* =================================================================
   BLOQUE 4 -- Calendario, Recordatorios, Medicamentos, Changelog
   Prefijos: b4- | cal- | rem- | med- | chl-
================================================================= */

/* Shared B4 */
.b4-page{max-width:1400px;margin:0 auto;padding:28px 24px;display:flex;flex-direction:column;gap:24px}
.b4-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.b4-header-left{display:flex;flex-direction:column;gap:4px}
.b4-title{font-size:1.6rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em;margin:0}
.b4-subtitle{font-size:.875rem;color:var(--text-muted);margin:0}
.b4-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.b4-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.b4-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;display:flex;align-items:center;gap:14px}
.b4-stat__icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.b4-stat__icon--primary{background:var(--primary-bg);color:var(--primary)}
.b4-stat__icon--success{background:#f0fdf4;color:#16a34a}
.b4-stat__icon--warning{background:#fefce8;color:#ca8a04}
.b4-stat__icon--danger{background:#fef2f2;color:#dc2626}
.b4-stat__icon--info{background:#eff6ff;color:#2563eb}
.b4-stat__value{font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1}
.b4-stat__label{font-size:.78rem;color:var(--text-muted);font-weight:500;margin-top:2px}
.b4-skeleton{background:linear-gradient(90deg,#f0f4f8 25%,#e2e8f0 50%,#f0f4f8 75%);background-size:200% 100%;animation:b4-shimmer 1.4s infinite;border-radius:var(--radius)}
@keyframes b4-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* CALENDARIO (cal-) */
.cal-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.cal-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
.cal-legend{padding:20px}
.cal-legend__title{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.cal-legend__item{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.82rem;color:var(--text-secondary)}
.cal-legend__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cal-main{padding:20px}
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.cal-view-btns{display:flex;gap:4px}
.cal-view-btn{padding:7px 14px;border-radius:var(--radius);font-size:.8rem;font-weight:500;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);transition:all .15s;font-family:inherit}
.cal-view-btn.active,.cal-view-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);border:1.5px solid var(--border);background:transparent;cursor:pointer;color:var(--text-secondary);transition:all .15s}
.cal-nav-btn:hover{border-color:var(--primary);color:var(--primary)}
.cal-period{font-size:1rem;font-weight:600;color:var(--text-primary);min-width:180px;text-align:center}
.cal-today-btn{padding:7px 14px;border-radius:var(--radius);font-size:.8rem;font-weight:500;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);transition:all .15s;font-family:inherit}
.cal-today-btn:hover{border-color:var(--primary);color:var(--primary)}
/* Old cal- FC overrides — kept minimal, scoped to #cal2-fc in cal2 block */
.fc .fc-toolbar{display:none !important}
.cal-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:800;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.cal-modal-overlay.open{opacity:1;pointer-events:all}
.cal-modal{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:440px;overflow:hidden;transform:scale(.95);transition:transform .2s}
.cal-modal-overlay.open .cal-modal{transform:scale(1)}
.cal-modal-header{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.cal-modal-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}
.cal-modal-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);border:none;background:transparent;cursor:pointer;color:var(--text-muted);transition:all .15s}
.cal-modal-close:hover{background:var(--border);color:var(--text-primary)}
.cal-modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.cal-modal-type{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600}
.cal-modal-type--sesion{background:#f0fdfa;color:#199c82}
.cal-modal-type--cita{background:#eff6ff;color:#2563eb}
.cal-modal-row{display:flex;flex-direction:column;gap:2px}
.cal-modal-label{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.cal-modal-value{font-size:.875rem;color:var(--text-primary)}
.cal-modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* ══════════════════════════════════════════════════════════════════
   RECORDATORIOS — Flat redesign v3 (Linear / Stripe inspired)
   Prefijo: rem-
   Filosofia: neutral, plano, tipografia tight, color solo como
   indicador puntual. Sin gradientes oscuros, sin sombras dramaticas,
   sin animaciones decorativas, sin pulsos.
   ══════════════════════════════════════════════════════════════════ */

:root{
    --rem-border:#e7e9ee;
    --rem-border-strong:#d0d5dd;
    --rem-bg:#fff;
    --rem-bg-soft:#f6f7f9;
    --rem-bg-sunken:#f1f3f6;
    --rem-text:#101828;
    --rem-text-2:#475467;
    --rem-text-3:#667085;
    --rem-text-4:#98a2b3;
    --rem-accent:#0f5132;
    --rem-accent-soft:#ecfdf5;
    --rem-focus:rgba(15,81,50,.12);
}

/* ── Layout ──────────────────────────────────────────────────────── */
.rem-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.rem-list-col{display:flex;flex-direction:column;min-width:0}

/* ── Header ──────────────────────────────────────────────────────── */
.rem-hero{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    margin-bottom:28px;padding:0 0 22px;border-bottom:1px solid var(--rem-border);flex-wrap:wrap;
    position:relative;
}
.rem-hero::after{
    content:"";position:absolute;left:0;bottom:-1px;width:48px;height:2px;
    background:var(--rem-accent);border-radius:2px;
}
.rem-hero__main{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.rem-hero__avatar{
    width:44px;height:44px;border-radius:10px;flex-shrink:0;position:relative;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#ecfdf5 0%,#d1fae5 100%);
    color:var(--rem-accent);border:1px solid #a7f3d0;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(15,81,50,.06);
}
.rem-hero__avatar svg{width:20px;height:20px;stroke-width:2}
.rem-hero__avatar::after{
    content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
    background:#10b981;border:2px solid #fff;
}
.rem-hero__text{min-width:0;display:flex;flex-direction:column;gap:3px}
.rem-hero__eyebrow{
    font-size:.7rem;letter-spacing:.06em;font-weight:600;color:var(--rem-text-3);margin:0;
    text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;line-height:1;
}
.rem-hero__eyebrow::before{
    content:"";width:5px;height:5px;border-radius:50%;background:var(--rem-accent);display:inline-block;
}
.rem-hero__title{
    font-size:1.75rem;font-weight:700;color:var(--rem-text);margin:0;
    letter-spacing:-.035em;line-height:1.1;display:flex;align-items:baseline;gap:10px;
}
.rem-hero__subtitle{
    font-size:.84rem;color:var(--rem-text-3);margin:1px 0 0;font-weight:400;line-height:1.45;
}
.rem-hero__action{
    display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:8px;
    font-size:.815rem;font-weight:500;letter-spacing:0;
    background:var(--rem-bg);color:var(--rem-text);border:1px solid var(--rem-border);
    cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s;
    text-decoration:none;white-space:nowrap;font-family:inherit;height:38px;box-sizing:border-box;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.rem-hero__action:hover{background:var(--rem-bg-soft);border-color:var(--rem-border-strong);box-shadow:0 1px 3px rgba(16,24,40,.08)}
.rem-hero__action svg{opacity:.55;width:14px;height:14px}
.rem-stat__icon-wrap svg{width:15px;height:15px}

/* ── KPIs ────────────────────────────────────────────────────────── */
.rem-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.rem-stat{
    background:var(--rem-bg);border:1px solid var(--rem-border);border-radius:10px;
    padding:14px 16px;position:relative;
    display:flex;align-items:center;gap:12px;cursor:default;
    transition:border-color .15s;
}
.rem-stat:hover{border-color:var(--rem-border-strong)}
.rem-stat::before,.rem-stat::after{content:none}
.rem-stat__icon-wrap{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--rem-bg-soft);color:var(--rem-text-3);
}
.rem-stat--total .rem-stat__icon-wrap{color:var(--rem-text-2)}
.rem-stat--pendiente .rem-stat__icon-wrap{color:#b45309;background:#fffaeb}
.rem-stat--completado .rem-stat__icon-wrap{color:#067647;background:#ecfdf3}
.rem-stat--vencido .rem-stat__icon-wrap{color:#b42318;background:#fef3f2}
.rem-stat__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rem-stat__label{font-size:.7rem;font-weight:500;letter-spacing:0;color:var(--rem-text-3);text-transform:none;margin:0}
.rem-stat__value{font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--rem-text)}

/* ── Controls (search + segments + chips) ────────────────────────── */
.rem-controls{
    background:var(--rem-bg);border:1px solid var(--rem-border);border-radius:10px;
    padding:10px 12px;margin-bottom:14px;
}
.rem-controls__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rem-controls__row + .rem-controls__row{margin-top:10px;padding-top:10px;border-top:1px solid var(--rem-border)}
.rem-controls__hint{font-size:.7rem;color:var(--rem-text-3);font-weight:500;text-transform:none;letter-spacing:0;margin-right:2px;flex-shrink:0}
.rem-controls__results{margin-left:auto;font-size:.75rem;color:var(--rem-text-3);font-weight:500;flex-shrink:0;white-space:nowrap}

/* Search */
.rem-search-wrap{position:relative;flex:1;min-width:220px}
.rem-search-input{
    width:100%;height:34px;padding:0 30px 0 32px;border:1px solid var(--rem-border);
    border-radius:8px;font-size:.825rem;color:var(--rem-text);background:var(--rem-bg);
    outline:none;transition:border-color .12s,box-shadow .12s;box-sizing:border-box;font-family:inherit;
}
.rem-search-input::placeholder{color:var(--rem-text-4)}
.rem-search-input:focus{border-color:var(--rem-accent);box-shadow:0 0 0 3px var(--rem-focus)}
.rem-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--rem-text-4);display:flex;pointer-events:none;transition:color .12s;z-index:1}
.rem-search-wrap:focus-within .rem-search-icon{color:var(--rem-text-2)}
.rem-search-clear{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;
    background:transparent;border:none;color:var(--rem-text-4);cursor:pointer;padding:0;
    display:none;align-items:center;justify-content:center;border-radius:4px;transition:color .12s,background .12s;
}
.rem-search-clear:hover{background:var(--rem-bg-soft);color:var(--rem-text-2)}
.rem-search-clear.visible{display:flex}

/* Segmented filter tabs */
.rem-filter-row{
    display:inline-flex;gap:0;background:var(--rem-bg-sunken);border:1px solid var(--rem-border);
    border-radius:8px;padding:2px;overflow-x:auto;scrollbar-width:none;height:34px;align-items:center;box-sizing:border-box;
}
.rem-filter-row::-webkit-scrollbar{display:none}
.rem-filter-tab{
    padding:0 12px;border-radius:6px;font-size:.78rem;font-weight:500;cursor:pointer;
    border:none;background:transparent;color:var(--rem-text-2);transition:background .12s,color .12s;
    font-family:inherit;white-space:nowrap;letter-spacing:0;flex-shrink:0;height:28px;display:inline-flex;align-items:center;
}
.rem-filter-tab:hover:not(.active){color:var(--rem-text)}
.rem-filter-tab.active{background:var(--rem-bg);color:var(--rem-text);box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.04)}

/* Priority chips */
.rem-prio-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.rem-prio-chip{
    padding:0 10px;border-radius:6px;font-size:.76rem;font-weight:500;border:1px solid var(--rem-border);
    cursor:pointer;transition:background .12s,border-color .12s,color .12s;background:var(--rem-bg);color:var(--rem-text-2);
    font-family:inherit;letter-spacing:0;display:inline-flex;align-items:center;gap:6px;height:28px;
}
.rem-prio-chip:hover{border-color:var(--rem-border-strong);color:var(--rem-text)}
.rem-prio-chip.active{background:var(--rem-bg-sunken);border-color:var(--rem-border-strong);color:var(--rem-text);box-shadow:none;transform:none}
.rem-prio-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;background:var(--rem-text-3)}

/* Hide legacy results row */
.rem-results-row{display:none}

/* ── Card list ───────────────────────────────────────────────────── */
.rem-list{display:flex;flex-direction:column;gap:6px}

.rem-card{
    background:var(--rem-bg);border:1px solid var(--rem-border);border-radius:10px;
    padding:12px 14px 12px 14px;display:flex;gap:12px;align-items:flex-start;
    transition:border-color .12s,background .12s;
    position:relative;
}
.rem-card:hover{border-color:var(--rem-border-strong);background:#fcfcfd;box-shadow:none;transform:none}
.rem-card::before{content:none}
.rem-card.estado-completado{background:var(--rem-bg-soft)}
.rem-card.estado-completado .rem-card__title{text-decoration:line-through;color:var(--rem-text-3)}
.rem-card.estado-cancelado{opacity:.6}

.rem-card__check{flex-shrink:0;margin-top:1px}
.rem-check-btn{
    width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rem-border-strong);background:transparent;
    cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent;
    transition:border-color .12s,background .12s,color .12s;padding:0;
}
.rem-check-btn:hover:not(.done){border-color:#067647;background:transparent;color:#067647;transform:none}
.rem-check-btn.done{background:#067647;border-color:#067647;color:#fff;box-shadow:none}
.rem-check-btn svg{width:11px;height:11px}

.rem-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rem-card__title{font-size:.875rem;font-weight:500;color:var(--rem-text);margin:0;line-height:1.45;letter-spacing:-.005em}
.rem-card__desc{font-size:.8rem;color:var(--rem-text-3);margin:0;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.rem-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:2px}

.rem-card__actions{flex-shrink:0;display:flex;gap:4px;align-items:flex-start;opacity:0;transition:opacity .12s}
.rem-card:hover .rem-card__actions,
.rem-card:focus-within .rem-card__actions{opacity:1}

.rem-action-btn{
    width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:transparent;
    cursor:pointer;color:var(--rem-text-3);display:flex;align-items:center;justify-content:center;
    transition:background .12s,color .12s,border-color .12s;
}
.rem-action-btn:hover{border-color:var(--rem-border);color:var(--rem-text);background:var(--rem-bg-soft);transform:none}
.rem-action-btn--danger:hover{border-color:#fecdca;color:#b42318;background:#fef3f2}
.rem-action-btn svg{width:12px;height:12px}

/* Badges — minimal, single-color tags */
.rem-badge{
    display:inline-flex;align-items:center;gap:4px;padding:0 6px;border-radius:4px;
    font-size:.7rem;font-weight:500;letter-spacing:0;height:18px;border:none;
    background:var(--rem-bg-soft);color:var(--rem-text-2);
}
.rem-badge svg{width:9px;height:9px;opacity:.7}
.rem-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.85}
.rem-badge--baja{background:#ecfdf3;color:#067647}
.rem-badge--media{background:#fffaeb;color:#b45309}
.rem-badge--alta{background:#fef3f2;color:#b42318}
.rem-badge--urgente{background:#f4ebff;color:#6927da}
.rem-badge--fecha{background:var(--rem-bg-soft);color:var(--rem-text-2)}
.rem-badge--fecha::before{content:none}
.rem-badge--rep{background:#eff8ff;color:#175cd3}
.rem-badge--rep::before{content:none}
.rem-badge--vencido{background:#fef3f2;color:#b42318;font-weight:600;animation:none}
.rem-badge--email{background:var(--rem-bg-soft);color:var(--rem-text-2)}
.rem-badge--email::before{content:none}

/* Postpone dropdown */
.rem-postpone{position:relative}
.rem-postpone-btn{padding:0 6px;width:auto;gap:1px}
.rem-postpone-menu{
    display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--rem-bg);
    border:1px solid var(--rem-border);border-radius:8px;
    box-shadow:0 8px 20px -8px rgba(16,24,40,.16),0 4px 8px -4px rgba(16,24,40,.06);
    z-index:60;min-width:150px;padding:4px;
}
.rem-postpone.is-open .rem-postpone-menu{display:block;animation:rem-fade-in .12s ease}
@keyframes rem-fade-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.rem-postpone-item{
    display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;text-align:left;
    font-size:.78rem;font-weight:500;color:var(--rem-text-2);border:none;background:none;
    cursor:pointer;font-family:inherit;border-radius:5px;transition:background .12s,color .12s;
}
.rem-postpone-item:hover{background:var(--rem-bg-soft);color:var(--rem-text)}
.rem-postpone-item svg{flex-shrink:0;opacity:.55;width:12px;height:12px}

/* ── Form panel ─────────────────────────────────────────────────── */
.rem-form-panel{
    background:var(--rem-bg);border:1px solid var(--rem-border);border-radius:12px;
    overflow:hidden;position:sticky;top:24px;
    box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -16px rgba(16,24,40,.12);
}
.rem-form-hero{
    position:relative;padding:16px 18px;color:var(--rem-text);display:flex;align-items:center;gap:12px;
    background:linear-gradient(180deg,#fafbfc 0%,var(--rem-bg) 100%);
    border-bottom:1px solid var(--rem-border);overflow:visible;
}
.rem-form-hero::after{content:none}
.rem-form-hero__icon{
    width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#ecfdf5,#d1fae5);color:var(--rem-accent);
    border:1px solid #a7f3d0;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(15,81,50,.06);
}
.rem-form-hero__icon svg{width:16px;height:16px;stroke-width:2.2}
.rem-form-hero__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rem-form-title{
    font-size:.95rem;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;
    color:var(--rem-text);letter-spacing:-.015em;line-height:1.2;
}
.rem-form-title-dot{
    width:8px;height:8px;border-radius:50%;background:var(--rem-accent);
    box-shadow:0 0 0 3px rgba(15,81,50,.12);flex-shrink:0;transition:background .12s,box-shadow .12s;
}
.rem-form-title-dot[data-prio="baja"]{box-shadow:0 0 0 3px rgba(6,118,71,.15)}
.rem-form-title-dot[data-prio="media"]{box-shadow:0 0 0 3px rgba(180,83,9,.15)}
.rem-form-title-dot[data-prio="alta"]{box-shadow:0 0 0 3px rgba(180,35,24,.15)}
.rem-form-title-dot[data-prio="urgente"]{box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.rem-form-subtitle{font-size:.76rem;color:var(--rem-text-3);margin:0;font-weight:400;letter-spacing:0;line-height:1.35}
.rem-form-close-btn{display:none}
.rem-form-body{padding:18px 18px 18px}

/* Field architecture */
.rem-field{margin-bottom:14px;display:flex;flex-direction:column;gap:7px}
.rem-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.rem-field-row .rem-field{margin-bottom:0}

.rem-field__label{
    font-size:.76rem;font-weight:600;color:var(--rem-text);text-transform:none;letter-spacing:-.005em;
    display:flex;align-items:center;gap:6px;line-height:1.2;
}
.rem-field__label-icon{display:none}
.rem-field__req{
    margin-left:auto;font-size:.7rem;font-weight:500;letter-spacing:0;text-transform:none;
    color:var(--rem-text-4);background:transparent;padding:0;border-radius:0;
    display:inline-flex;align-items:center;gap:4px;
}
.rem-field__req::before{
    content:"";width:3px;height:3px;border-radius:50%;background:var(--rem-text-4);
    animation:none;margin-right:0;
}

.rem-field__control{position:relative;display:flex;align-items:stretch}

/* Standard text input — fuller height, refined border */
.rem-field__input,.rem-field__textarea{
    width:100%;height:40px;padding:0 13px;border:1px solid var(--rem-border-strong);border-radius:8px;
    font-family:inherit;font-size:.875rem;color:var(--rem-text);background:var(--rem-bg);outline:none;
    transition:border-color .12s,box-shadow .12s,background .12s;box-sizing:border-box;font-weight:500;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.rem-field__input::placeholder,.rem-field__textarea::placeholder{color:var(--rem-text-4);font-weight:400}
.rem-field__input:hover,.rem-field__textarea:hover{border-color:#98a2b3}
.rem-field__input:focus,.rem-field__textarea:focus{
    border-color:var(--rem-accent);box-shadow:0 0 0 4px var(--rem-focus),0 1px 2px rgba(16,24,40,.04);
    background:var(--rem-bg);
}

.rem-field__textarea{height:auto;min-height:78px;padding:10px 13px;line-height:1.5;resize:vertical}

/* Regla 8 (CLAUDE.md) — anti auto-zoom iOS: en dispositivos tactiles
   (movil/tablet) los campos editables deben tener font-size >=16px para que
   Safari no haga zoom al enfocarlos. `pointer: coarse` cubre iOS real en
   cualquier orientacion (incluido iPad landscape); el OR por ancho <=900px
   cubre movil/tablet-vertical y ademas hace el fix validable con resize en
   Chromium. En desktop/laptop (pointer fino y ancho >900) se conserva el
   tamano compacto original. Los .rem-hidden-select estan clip-ocultos y no
   son enfocables, por eso no necesitan la regla. */
@media (pointer: coarse), (max-width: 900px){
    .rem-search-input,
    .rem-field__input,
    .rem-field__textarea{ font-size:16px; }
}
.rem-field__counter{
    position:absolute;right:10px;bottom:8px;font-size:.7rem;font-weight:500;color:var(--rem-text-4);
    background:var(--rem-bg);padding:1px 6px;border-radius:4px;pointer-events:none;
    border:1px solid var(--rem-border);
}

/* Leading icon — divided integrated style for date/time */
.rem-field__leading{
    position:absolute;left:0;top:0;bottom:0;width:38px;
    display:flex;align-items:center;justify-content:center;
    color:var(--rem-text-3);pointer-events:none;transition:color .12s,background .12s,border-color .12s;
    border-right:1px solid var(--rem-border-strong);background:var(--rem-bg-soft);
    border-radius:7px 0 0 7px;z-index:2;
}
.rem-field__leading svg{width:14px;height:14px;stroke-width:2}
.rem-field__input--icon{padding-left:50px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.rem-field__control:focus-within .rem-field__leading{
    color:var(--rem-accent);background:#f0fdf4;border-right-color:#a7f3d0;
}

input.rem-field__input[type="date"],
input.rem-field__input[type="time"]{font-family:inherit;color-scheme:light;font-variant-numeric:tabular-nums}
input.rem-field__input[type="date"]::-webkit-calendar-picker-indicator,
input.rem-field__input[type="time"]::-webkit-calendar-picker-indicator{
    cursor:pointer;opacity:.45;transition:opacity .12s;filter:saturate(0);
}
input.rem-field__input[type="date"]:hover::-webkit-calendar-picker-indicator,
input.rem-field__input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:.85}

/* Picker estandar (.fpick) en escritorio: el trigger propio ya trae su icono
   y borde, asi que se oculta el icono lateral redundante del control y se deja
   que el wrapper ocupe todo el ancho del control flex. En tactil (sin .fpick)
   el input nativo con su icono lateral se conserva intacto. */
.rem-field__control:has(.fpick) .rem-field__leading{display:none}
.rem-field__control > .fpick{flex:1 1 auto;min-width:0}

/* Hidden selects (synced via JS) */
.rem-hidden-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Priority picker — segmented pill with colored active state */
.rem-prio-picker{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;
    background:var(--rem-bg-sunken);border:1px solid var(--rem-border);border-radius:9px;
}
.rem-prio-pick{
    padding:0;height:34px;border:1px solid transparent;background:transparent;border-radius:6px;
    font-family:inherit;font-size:.78rem;font-weight:500;color:var(--rem-text-2);cursor:pointer;
    transition:background .12s,color .12s,border-color .12s,box-shadow .12s;
    display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;
    text-transform:capitalize;line-height:1;
}
.rem-prio-pick:hover:not(.active){color:var(--rem-text);transform:none}
.rem-prio-pick__dot{width:8px;height:8px;border-radius:50%;display:block;box-shadow:none;flex-shrink:0}
.rem-prio-pick.active{
    background:var(--rem-bg);color:var(--rem-text);font-weight:600;
    border-color:var(--rem-border);
    box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
    transform:none;
}
.rem-prio-pick.active .rem-prio-pick__dot{box-shadow:0 0 0 3px rgba(16,24,40,.04) !important}

/* Repetition picker — refined cards */
.rem-rep-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rem-rep-pick{
    padding:10px 12px;border:1px solid var(--rem-border-strong);background:var(--rem-bg);border-radius:8px;
    font-family:inherit;font-size:.8rem;font-weight:500;color:var(--rem-text-2);cursor:pointer;
    transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
    display:flex;align-items:center;gap:9px;text-align:left;
    box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.rem-rep-pick:hover{border-color:#98a2b3;background:var(--rem-bg);color:var(--rem-text)}
.rem-rep-pick__icon{
    width:24px;height:24px;border-radius:6px;background:var(--rem-bg-soft);color:var(--rem-text-3);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:background .12s,color .12s;border:1px solid var(--rem-border);
}
.rem-rep-pick__icon svg{width:12px;height:12px;stroke-width:2}
.rem-rep-pick.active{
    border-color:var(--rem-accent);background:#f0fdf4;color:var(--rem-text);font-weight:600;
    box-shadow:0 0 0 3px var(--rem-focus),0 1px 2px rgba(16,24,40,.04);
}
.rem-rep-pick.active .rem-rep-pick__icon{
    background:var(--rem-accent);color:#fff;border-color:var(--rem-accent);box-shadow:none;
}

/* State picker (edit mode) */
.rem-state-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rem-state-pick{
    padding:0;height:34px;border:1px solid var(--rem-border-strong);background:var(--rem-bg);border-radius:8px;
    font-family:inherit;font-size:.78rem;font-weight:500;color:var(--rem-text-2);cursor:pointer;
    transition:border-color .12s,background .12s,color .12s;text-transform:capitalize;
    box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.rem-state-pick:hover{border-color:#98a2b3;color:var(--rem-text)}
.rem-state-pick.active[data-val="pendiente"]{border-color:#fec84b;background:#fffaeb;color:#b45309;font-weight:600}
.rem-state-pick.active[data-val="completado"]{border-color:#abefc6;background:#ecfdf3;color:#067647;font-weight:600}
.rem-state-pick.active[data-val="cancelado"]{border-color:var(--rem-border-strong);background:var(--rem-bg-sunken);color:var(--rem-text-2);font-weight:600}

/* Form actions */
.rem-form-actions{display:flex;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rem-border)}
.rem-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:40px;padding:0 16px;border-radius:8px;font-family:inherit;font-size:.85rem;font-weight:600;
    cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s;
    border:1px solid transparent;letter-spacing:-.005em;position:relative;overflow:hidden;
}
.rem-btn--primary{
    background:linear-gradient(180deg,#1d2939 0%,#0f1827 100%);color:#fff;border-color:#0f1827;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 2px rgba(16,24,40,.18);
}
.rem-btn--primary::after{content:none}
.rem-btn--primary:hover{background:linear-gradient(180deg,#101828 0%,#000 100%);transform:none}
.rem-btn--primary:active{transform:translateY(.5px)}
.rem-btn--primary:disabled{opacity:.55;cursor:not-allowed}
.rem-btn--ghost{background:var(--rem-bg);color:var(--rem-text-2);border-color:var(--rem-border-strong);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.rem-btn--ghost:hover{background:var(--rem-bg-soft);color:var(--rem-text);border-color:#98a2b3}
.rem-btn__icon{display:inline-flex;align-items:center;transition:transform .15s}
.rem-btn--primary:hover .rem-btn__icon{transform:translateX(2px)}
.rem-btn__icon svg{width:14px;height:14px}

/* ── Empty state ─────────────────────────────────────────────────── */
.rem-empty{
    text-align:center;padding:48px 24px;color:var(--rem-text-3);
    background:var(--rem-bg);border:1px dashed var(--rem-border);border-radius:10px;
}
.rem-empty__icon{margin:0 auto 10px;opacity:.4;display:block;width:36px;height:36px}
.rem-empty__title{font-size:.9rem;font-weight:500;color:var(--rem-text);margin:0 0 4px}
.rem-empty__sub{font-size:.8rem;margin:0;color:var(--rem-text-3)}

/* ── Skeleton loader ─────────────────────────────────────────────── */
.rem-skel{background:linear-gradient(90deg,var(--rem-bg-sunken) 25%,#e7e9ee 50%,var(--rem-bg-sunken) 75%);background-size:400% 100%;animation:b4-shimmer 1.5s infinite linear;border-radius:6px}
.rem-skel-overlay{position:absolute;inset:0;z-index:20;background:var(--rem-bg);display:flex;flex-direction:column;gap:20px;padding:0;transition:opacity .25s ease}
.rem-skel-page-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--rem-border)}
.rem-skel-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rem-skel-layout{display:grid;grid-template-columns:1fr 380px;gap:24px}
.rem-skel-list-col{display:flex;flex-direction:column;gap:6px}
@media(max-width:1024px){.rem-skel-layout{grid-template-columns:1fr}.rem-skel-form-col{display:none}}
@media(max-width:768px){.rem-skel-stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Load more ───────────────────────────────────────────────────── */
.rem-load-more-wrap{padding:14px 0 4px;text-align:center;display:none}
.rem-load-more-info{font-size:.74rem;color:var(--rem-text-3);margin-bottom:7px;font-weight:500}
.rem-load-more-btn{
    display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:7px;height:32px;
    border:1px solid var(--rem-border);background:var(--rem-bg);color:var(--rem-text-2);
    font-size:.78rem;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s;font-family:inherit;
}
.rem-load-more-btn:hover{border-color:var(--rem-border-strong);color:var(--rem-text);background:var(--rem-bg-soft);transform:none}

/* ── FAB — mobile only ───────────────────────────────────────────── */
.rem-fab{
    position:fixed;bottom:20px;right:16px;z-index:300;display:none;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;
    background:var(--rem-text);color:#fff;border:none;cursor:pointer;
    box-shadow:0 6px 16px -4px rgba(16,24,40,.3);
    transition:background .12s;
}
.rem-fab:hover{background:#1d2939;transform:none;box-shadow:0 8px 20px -4px rgba(16,24,40,.4)}
.rem-fab:active{transform:scale(.96)}

/* ══════════════════════════════════════════════════════════════════
   RECORDATORIOS — Utility classes (replaces all inline styles)
   Flat redesign — colors as small accents only.
   ══════════════════════════════════════════════════════════════════ */

/* Page positioning wrapper */
.rem-page{position:relative}

/* Visibility helpers */
.rem-is-hidden{display:none!important}
.rem-card.rem-is-hidden{display:none}

/* Skeleton placeholders — neutral, no decoration */
.rem-skel-page-hdr__text{display:flex;flex-direction:column;gap:7px}
.rem-skel--title{height:18px;width:160px;border-radius:5px}
.rem-skel--subtitle{height:11px;width:240px;border-radius:4px;opacity:.7}
.rem-skel--action{height:36px;width:120px;border-radius:8px}
.rem-skel--stat{height:62px;border-radius:10px}
.rem-skel--controls{height:96px;border-radius:10px}
.rem-skel--card{height:58px;border-radius:10px}
.rem-skel-form-col{height:480px;border-radius:10px}
.rem-skel-overlay.rem-skel-overlay--fading{opacity:0;pointer-events:none}

/* Priority dot color variants — subtle, matched to flat palette */
.rem-prio-dot--urgente{background:#7c3aed}
.rem-prio-dot--alta{background:#b42318}
.rem-prio-dot--media{background:#b45309}
.rem-prio-dot--baja{background:#067647}
.rem-prio-pick__dot--baja{background:#067647}
.rem-prio-pick__dot--media{background:#b45309}
.rem-prio-pick__dot--alta{background:#b42318}
.rem-prio-pick__dot--urgente{background:#7c3aed}

/* Form title dot — flat colored pip (no halo) */
.rem-form-title-dot{background:var(--rem-text-3)}
.rem-form-title-dot[data-prio="baja"]{background:#067647}
.rem-form-title-dot[data-prio="media"]{background:#b45309}
.rem-form-title-dot[data-prio="alta"]{background:#b42318}
.rem-form-title-dot[data-prio="urgente"]{background:#7c3aed}

/* Card animation states (replace inline opacity/transform) */
/* Perf Fase 2: will-change SOLO en los estados que realmente animan (~0.25s),
   no permanente en la clase base. Antes cada .rem-card de la lista promovia
   una capa GPU en reposo (anti-patron will-change) — costoso en gama baja
   con listas largas. Sin cambio visual: la animacion conserva el hint. */
.rem-card.is-entering,
.rem-card.is-revealed,
.rem-card.is-leaving{will-change:opacity,transform}
@keyframes rem-card-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes rem-card-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes rem-card-leave{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(10px)}}
.rem-card.is-entering{animation:rem-card-enter .22s ease both}
.rem-card.is-preload{opacity:0;transform:translateY(4px)}
.rem-card.is-revealed{animation:rem-card-reveal .26s ease both}
.rem-card.is-leaving{animation:rem-card-leave .22s ease forwards;pointer-events:none}

/* Load more visibility */
.rem-load-more-wrap.is-visible{display:block}

/* MEDICAMENTOS (med-) */
.med-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.med-search{position:relative;flex:1;min-width:220px}
.med-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.med-search-input{width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:.875rem;color:var(--text-primary);background:var(--bg-input);outline:none;transition:border-color .15s}
.med-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.med-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.med-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .15s}
.med-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.med-card__head{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-light)}
.med-card__icon{width:36px;height:36px;border-radius:var(--radius);background:var(--primary-bg);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.med-card__name{font-size:.9rem;font-weight:600;color:var(--text-primary);flex:1;min-width:0;word-break:break-word}
.med-card__actions{display:flex;gap:4px;flex-shrink:0}
.med-icon-btn{width:28px;height:28px;border-radius:var(--radius);border:1.5px solid var(--border);background:transparent;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all .15s}
.med-icon-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.med-icon-btn--danger:hover{border-color:var(--error);color:var(--error);background:var(--error-bg)}
.med-card__body{padding:14px 16px}
.med-detail-list{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:4px}
.med-detail-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border-radius:var(--radius);background:var(--bg-card-hover);font-size:.82rem;color:var(--text-secondary)}
.med-detail-remove{width:20px;height:20px;border-radius:4px;border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.med-detail-remove:hover{background:var(--error-bg);color:var(--error)}
.med-add-detail{display:flex;gap:6px}
.med-add-detail-input{flex:1;padding:7px 10px;border:1.5px dashed var(--border);border-radius:var(--radius);font-family:inherit;font-size:.8rem;background:transparent;color:var(--text-primary);outline:none;transition:border-color .15s}
.med-add-detail-input:focus{border-color:var(--primary);border-style:solid;box-shadow:0 0 0 3px var(--primary-bg)}
.med-add-detail-btn{padding:7px 12px;border-radius:var(--radius);border:none;background:var(--primary);color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit}
.med-add-detail-btn:hover{background:var(--primary-dark)}
.med-add-form{background:var(--bg-card);border:2px dashed var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;gap:10px;align-items:flex-end}
.med-add-form-group{flex:1;display:flex;flex-direction:column;gap:5px}
.med-add-label{font-size:.75rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.med-add-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:.875rem;color:var(--text-primary);background:var(--bg-input);outline:none;transition:border-color .15s}
.med-add-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.med-empty{grid-column:1/-1;text-align:center;padding:60px 24px;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}
.med-edit-input{width:100%;padding:6px 10px;border:1.5px solid var(--primary);border-radius:var(--radius);font-family:inherit;font-size:.875rem;color:var(--text-primary);background:var(--bg-input);outline:none}

/* ═══════════════════════════════════════════════════════════════════════
   med2 — Catálogo de Medicamentos v2
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wrap ──────────────────────────────────────────────────────────── */
.med2-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    animation: med2FadeIn .35s ease both;
}
.med2-wrap > * { min-width: 0; }

@keyframes med2FadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.med2-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.med2-hero__left {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.med2-hero__ico {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-lg);
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16,185,129,.3);
}
.med2-hero__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .12rem;
    letter-spacing: -.02em;
    font-family: var(--font-family);
}
.med2-hero__sub {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family);
}
.med2-hero__badge {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}
.med2-hero__badge-num {
    font-size: 1.05rem;
    font-weight: 800;
    color: #199c82;
    font-family: var(--font-family);
}
.med2-hero__badge-label {
    font-size: .73rem;
    color: #199c82;
    font-weight: 500;
    font-family: var(--font-family);
}

/* ── Add form ──────────────────────────────────────────────────────── */
.med2-add-card {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    padding: 1rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}
.med2-add-card:focus-within {
    border-color: rgba(16,185,129,.4);
    box-shadow: 0 0 0 3px rgba(16,185,129,.08);
}
.med2-add-card__ico {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: rgba(16,185,129,.08);
    color: #199c82;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.med2-add-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}
.med2-add-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-family);
}
.med2-add-input {
    width: 100%;
    height: 38px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
    font-family: var(--font-family);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.med2-add-input:focus {
    border-color: #10b981;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.med2-add-input::placeholder { color: var(--text-muted); font-size: .82rem; }

.med2-add-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    background: #10b981;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    font-family: var(--font-family);
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.med2-add-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,185,129,.35); }
.med2-add-btn:active { transform: translateY(0); box-shadow: none; }
.med2-add-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Search toolbar ────────────────────────────────────────────────── */
.med2-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.med2-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.med2-search-ico {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.med2-search-input {
    width: 100%;
    height: 38px;
    padding: 0 .85rem 0 2.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .84rem;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    font-family: var(--font-family);
    transition: border-color .15s, box-shadow .15s;
}
.med2-search-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.med2-search-input::placeholder { color: var(--text-muted); }

.med2-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 34px;
    padding: 0 .75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: var(--font-family);
    white-space: nowrap;
}
.med2-clear-btn:hover { border-color: #ef4444; color: #ef4444; }

.med2-toolbar-count {
    font-size: .75rem;
    color: var(--text-muted);
    font-family: var(--font-family);
    white-space: nowrap;
    margin-left: auto;
}

/* ── Grid ──────────────────────────────────────────────────────────── */
.med2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* ── Card ──────────────────────────────────────────────────────────── */
.med2-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s;
    animation: med2FadeIn .35s ease both;
}
.med2-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(16,185,129,.25);
    transform: translateY(-2px);
}

.med2-card__head {
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-bottom: 1px solid var(--border-light);
}
.med2-card__ico {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(13,148,136,.08));
    color: #199c82;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.med2-card__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
    font-family: var(--font-family);
    letter-spacing: -.01em;
}
.med2-card__acts {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Action buttons */
.med2-act-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.med2-act-btn:hover { border-color: #199c82; color: #199c82; background: rgba(25,156,130,.06); }
.med2-act-btn--danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

/* ── Card body / details ───────────────────────────────────────────── */
.med2-card__body {
    padding: .85rem 1rem;
}
.med2-det-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin: 0 0 .55rem;
    font-family: var(--font-family);
}
.med2-det-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bg-body);
    font-size: .65rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-left: .2rem;
}

/* Detail chips */
.med2-det-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .65rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.med2-det-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem .3rem .7rem;
    border-radius: var(--radius-lg);
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    font-size: .78rem;
    color: var(--text-secondary);
    font-family: var(--font-family);
    transition: border-color .15s, background .15s;
    animation: med2FadeIn .25s ease both;
}
.med2-det-chip:hover {
    border-color: var(--border);
    background: var(--bg-card-hover);
}
.med2-chip-x {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.med2-chip-x:hover {
    background: rgba(239,68,68,.1);
    color: #ef4444;
}

.med2-det-empty {
    font-size: .77rem;
    color: var(--text-muted);
    padding: .15rem 0;
    font-style: italic;
    font-family: var(--font-family);
}

/* Add detail row */
.med2-add-det-row {
    display: flex;
    gap: .4rem;
}
.med2-add-det-input {
    flex: 1;
    height: 32px;
    padding: 0 .7rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: .78rem;
    color: var(--text-primary);
    background: transparent;
    outline: none;
    font-family: var(--font-family);
    transition: border-color .15s, border-style .15s, box-shadow .15s;
}
.med2-add-det-input:focus {
    border-color: #10b981;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(16,185,129,.08);
}
.med2-add-det-input::placeholder { color: var(--text-muted); font-size: .76rem; }

.med2-add-det-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: rgba(16,185,129,.08);
    color: #199c82;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.med2-add-det-btn:hover {
    background: #10b981;
    color: #fff;
}

/* Edit input (inline) */
.med2-edit-input {
    width: 100%;
    height: 30px;
    padding: 0 .6rem;
    border: 1.5px solid #10b981;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    font-family: var(--font-family);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

/* ── Empty state ───────────────────────────────────────────────────── */
.med2-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.med2-empty__ico {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-body);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .85rem;
    opacity: .5;
}
.med2-empty__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 .3rem;
    font-family: var(--font-family);
}
.med2-empty__sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .med2-hero { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .med2-add-card { flex-direction: column; align-items: stretch; }
    .med2-add-card__ico { display: none; }
    .med2-add-btn { width: 100%; justify-content: center; height: 42px; }
}

@media (max-width: 640px) {
    .med2-wrap { padding: .85rem .75rem; gap: 1rem; }
    .med2-hero__ico { width: 38px; height: 38px; }
    .med2-hero__title { font-size: 1.05rem; }
    .med2-grid { grid-template-columns: 1fr; }
    .med2-toolbar { gap: .5rem; }
    .med2-search-wrap { min-width: 0; }
    .med2-toolbar-count { display: none; }
}

@media (max-width: 420px) {
    .med2-wrap { padding: .65rem .55rem; }
    .med2-card__head { padding: .75rem .85rem; }
    .med2-card__body { padding: .75rem .85rem; }
    .med2-add-card { padding: .85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   plt2 — Plantillas (Tareas + Notas Clinicas)
   ═══════════════════════════════════════════════════════════════════════ */

.plt2-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    animation: plt2FadeIn .35s ease both;
}
.plt2-wrap > * { min-width: 0; }
@keyframes plt2FadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.plt2-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.plt2-hero__left {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.plt2-hero__ico {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-lg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.plt2-hero__ico--tarea {
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(25,156,130,.3);
}
.plt2-hero__ico--nota {
    background: #f59e0b;
    box-shadow: 0 4px 12px rgba(245,158,11,.3);
}
.plt2-hero__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .12rem;
    letter-spacing: -.02em;
    font-family: var(--font-family);
}
.plt2-hero__sub {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family);
}

.plt2-btn-new {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 1.15rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-size: .83rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(25,156,130,.35);
    transition: opacity .15s, transform .15s, box-shadow .15s;
    font-family: var(--font-family);
}
.plt2-btn-new:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(25,156,130,.4); }
.plt2-btn-new:active { transform: translateY(0); box-shadow: none; }

/* ── Form card ─────────────────────────────────────────────────────── */
.plt2-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: plt2FadeIn .25s ease both;
}
.plt2-form-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--border-light);
}
.plt2-form-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-family);
}
.plt2-form-close {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.plt2-form-close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.plt2-form-body {
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.plt2-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.plt2-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.plt2-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-family);
}
.plt2-input {
    height: 38px;
    padding: 0 .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
    font-family: var(--font-family);
    transition: border-color .15s, box-shadow .15s, background .15s;
    width: 100%;
}
.plt2-input:focus {
    border-color: #199c82;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(25,156,130,.1);
}
.plt2-textarea {
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
    font-family: var(--font-family);
    transition: border-color .15s, box-shadow .15s;
    resize: vertical;
    width: 100%;
    min-height: 56px;
}
.plt2-textarea:focus {
    border-color: #199c82;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(25,156,130,.1);
}
.plt2-input::placeholder,
.plt2-textarea::placeholder { color: var(--text-muted); font-size: .82rem; }

.plt2-form-error {
    font-size: .78rem;
    color: #ef4444;
    font-weight: 500;
    padding: .35rem .6rem;
    background: rgba(239,68,68,.06);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239,68,68,.15);
    margin: 0;
    font-family: var(--font-family);
}
.plt2-form-footer {
    padding: .75rem 1.15rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.plt2-btn-ghost {
    height: 36px;
    padding: 0 .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-family);
    transition: border-color .15s, color .15s;
}
.plt2-btn-ghost:hover { border-color: var(--text-muted); color: var(--text-primary); }

.plt2-btn-save {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 36px;
    padding: 0 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(25,156,130,.3);
    transition: opacity .15s, transform .15s;
    font-family: var(--font-family);
}
.plt2-btn-save:hover { opacity: .9; transform: translateY(-1px); }
.plt2-btn-save:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── List ──────────────────────────────────────────────────────────── */
.plt2-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.plt2-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow .2s, border-color .2s;
    animation: plt2FadeIn .35s ease both;
}
.plt2-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: rgba(25,156,130,.2);
}

.plt2-item__left {
    display: flex;
    gap: .75rem;
    flex: 1;
    min-width: 0;
}
.plt2-item__ico {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.plt2-item__ico--tarea {
    background: rgba(25,156,130,.08);
    color: #199c82;
}
.plt2-item__ico--nota {
    background: rgba(245,158,11,.08);
    color: #f59e0b;
}

.plt2-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.plt2-item__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-family);
    letter-spacing: -.01em;
}
.plt2-item__tag {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 12px;
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--font-family);
    width: fit-content;
    background: rgba(25,156,130,.08);
    color: #199c82;
}
/* Risk colors for nota tags */
.plt2-risk--sin-riesgo { background: rgba(13,148,136,.08); color: #199c82; }
.plt2-risk--leve       { background: rgba(245,158,11,.08); color: #b45309; }
.plt2-risk--moderado   { background: rgba(249,115,22,.08); color: #c2410c; }
.plt2-risk--alto       { background: rgba(239,68,68,.08);  color: #dc2626; }
.plt2-risk--urgente    { background: rgba(124,58,237,.08); color: #7c3aed; }

.plt2-item__preview {
    font-size: .8rem;
    color: var(--text-secondary);
    margin: 0;
    font-family: var(--font-family);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plt2-item__desc {
    font-size: .76rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family);
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plt2-item__acts {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.plt2-act-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.plt2-act-btn:hover { border-color: #199c82; color: #199c82; background: rgba(25,156,130,.06); }
.plt2-act-btn--danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

/* ── Section separator ─────────────────────────────────────────────── */
.plt2-section-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
}
.plt2-section-sep::before,
.plt2-section-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.plt2-section-sep__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── System badge ──────────────────────────────────────────────────── */
.plt2-badge-sistema {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #199c82;
    background: rgba(25,156,130,.1);
    border: 1px solid rgba(25,156,130,.2);
    padding: 1px 7px;
    border-radius: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Item name row (title + badge inline) ──────────────────────────── */
.plt2-item__name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.plt2-item__name-row .plt2-item__name {
    margin: 0;
}

/* ── System item subtle distinction ───────────────────────────────── */
.plt2-item--sistema {
    background: #fafbff;
    border-color: #e0e4f5;
}
.plt2-item--sistema:hover {
    border-color: #c7d0f0;
    background: #f5f7ff;
}

/* ── Read-only hint ────────────────────────────────────────────────── */
.plt2-item__readonly-hint {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #cbd5e1;
    white-space: nowrap;
    padding: 4px 8px;
}

/* ── Empty state ───────────────────────────────────────────────────── */
.plt2-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.plt2-empty__ico {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-body);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .85rem;
    opacity: .5;
}
.plt2-empty__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 .3rem;
    font-family: var(--font-family);
}
.plt2-empty__sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .plt2-hero { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .plt2-btn-new { width: 100%; justify-content: center; }
    .plt2-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .plt2-wrap { padding: .85rem .75rem; gap: 1rem; }
    .plt2-hero__ico { width: 38px; height: 38px; }
    .plt2-hero__title { font-size: 1.05rem; }
    .plt2-item { flex-direction: column; gap: .6rem; }
    .plt2-item__acts { align-self: flex-end; }
    .plt2-form-footer { flex-direction: column-reverse; align-items: stretch; }
    .plt2-btn-save { justify-content: center; width: 100%; }
    .plt2-btn-ghost { text-align: center; }
}

@media (max-width: 420px) {
    .plt2-wrap { padding: .65rem .55rem; }
    .plt2-item { padding: .8rem .85rem; }
    .plt2-form-body { padding: .85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   mt3 — Metas Terapeuticas v3 (create + show)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────── */
.mt3-page {
    display: flex; flex-direction: column; gap: 1.15rem;
    padding: 1.5rem; max-width: 900px; margin: 0 auto; width: 100%;
    animation: mt3FadeIn .35s ease both;
}
.mt3-page > * { min-width: 0; }
@keyframes mt3FadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Back link ─────────────────────────────────────────────────────── */
.mt3-back {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 500; color: var(--text-muted);
    text-decoration: none; font-family: var(--font-family);
    transition: color .15s;
}
.mt3-back:hover { color: var(--text-primary); }

/* ── Hero header ───────────────────────────────────────────────────── */
.mt3-hero {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.mt3-hero__top { display: flex; align-items: center; gap: .85rem; flex: 1; min-width: 0; }
.mt3-hero__icon {
    width: 46px; height: 46px; border-radius: var(--radius-lg);
    background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(13,148,136,.3);
}
.mt3-hero__text { flex: 1; min-width: 0; }
.mt3-hero__title {
    font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
    margin: 0 0 .15rem; letter-spacing: -.02em; font-family: var(--font-family);
    line-height: 1.25;
}
.mt3-hero__info {
    font-size: .78rem; color: var(--text-muted); margin: 0; font-family: var(--font-family);
}
.mt3-hero__tags { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.mt3-hero__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; }

/* ── Tags & badges ─────────────────────────────────────────────────── */
.mt3-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .18rem .55rem; border-radius: var(--radius-lg);
    font-size: .67rem; font-weight: 700; font-family: var(--font-family);
}
.mt3-tag--area { background: rgba(25,156,130,.08); color: #199c82; }
.mt3-badge {
    display: inline-flex; align-items: center; padding: .2rem .6rem;
    border-radius: var(--radius-lg); font-size: .7rem; font-weight: 700; font-family: var(--font-family);
}
.mt3-badge--blue  { background: rgba(59,130,246,.1); color: #2563eb; }
.mt3-badge--green { background: rgba(16,185,129,.1); color: #059669; }
.mt3-badge--gray  { background: rgba(100,116,139,.1); color: #64748b; }
.mt3-badge--red   { background: rgba(239,68,68,.1); color: #dc2626; }
.mt3-badge--overdue {
    background: rgba(239,68,68,.08); color: #dc2626;
    border: 1px solid rgba(239,68,68,.2);
    animation: mt3Pulse 2s ease infinite;
}
@keyframes mt3Pulse {
    0%,100% { opacity: 1; } 50% { opacity: .7; }
}

/* ── Flash ──────────────────────────────────────────────────────────── */
.mt3-flash {
    padding: .7rem 1rem; border-radius: var(--radius);
    font-size: .82rem; font-family: var(--font-family);
    display: flex; align-items: center; gap: .5rem;
}
.mt3-flash--success { background: rgba(16,185,129,.08); color: #059669; border: 1px solid rgba(16,185,129,.18); }

/* ── KPIs strip ────────────────────────────────────────────────────── */
.mt3-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: .75rem;
}
.mt3-kpi {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .85rem 1rem;
    text-align: center;
}
.mt3-kpi__value {
    font-size: 1.3rem; font-weight: 800; margin: 0;
    font-family: var(--font-family); letter-spacing: -.02em;
}
.mt3-kpi__value--blue  { color: #2563eb; }
.mt3-kpi__value--green { color: #059669; }
.mt3-kpi__value--gray  { color: #64748b; }
.mt3-kpi__value--red   { color: #dc2626; }
.mt3-kpi__label {
    font-size: .66rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em; margin: .2rem 0 0;
    font-family: var(--font-family);
}

/* ── Progress section ──────────────────────────────────────────────── */
.mt3-progress-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1rem 1.2rem;
}
.mt3-progress-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .6rem;
}
.mt3-progress-value {
    font-size: 1.5rem; font-weight: 800; font-family: var(--font-family);
    letter-spacing: -.02em;
}
.mt3-progress-dates {
    display: flex; gap: 1rem; font-size: .73rem; color: var(--text-muted);
    font-family: var(--font-family);
}
.mt3-progress-bar {
    width: 100%; height: 8px; border-radius: 4px;
    background: var(--bg-body); overflow: hidden;
}
.mt3-progress-bar__fill {
    height: 100%; border-radius: 4px; transition: width .6s ease, background .3s;
}

/* ── Section cards ─────────────────────────────────────────────────── */
.mt3-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.mt3-section__header {
    display: flex; align-items: center; gap: .65rem;
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--border-light);
}
.mt3-section__icon {
    width: 32px; height: 32px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mt3-section__icon--teal   { background: rgba(13,148,136,.08); color: #199c82; }
.mt3-section__icon--blue   { background: rgba(59,130,246,.08); color: #3b82f6; }
.mt3-section__icon--amber  { background: rgba(245,158,11,.08); color: #f59e0b; }
.mt3-section__icon--indigo { background: rgba(25,156,130,.08); color: #199c82; }
.mt3-section__icon--slate  { background: rgba(100,116,139,.08); color: #64748b; }
.mt3-section__title {
    font-size: .85rem; font-weight: 700; color: var(--text-primary);
    margin: 0; font-family: var(--font-family);
}
.mt3-section__body { padding: 1rem 1.1rem; }

/* ── Form elements ─────────────────────────────────────────────────── */
.mt3-fg { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.mt3-label {
    font-size: .68rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-family);
}
.mt3-input, .mt3-select {
    height: 40px; padding: 0 .85rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .84rem; color: var(--text-primary);
    background: var(--bg-body); outline: none; font-family: var(--font-family);
    width: 100%; transition: border-color .15s, box-shadow .15s;
}
.mt3-input:focus, .mt3-select:focus, .mt3-textarea:focus {
    border-color: #199c82; box-shadow: 0 0 0 3px rgba(13,148,136,.1);
    background: var(--bg-card);
}
.mt3-input::placeholder { color: var(--text-muted); font-size: .82rem; }

/* ── Combo (searchable dropdown) ───────────────────────────────────── */
.mt3-combo { position: relative; }
.mt3-combo__input {
    height: 40px; padding: 0 2.2rem 0 .85rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .84rem; color: var(--text-primary);
    background: var(--bg-body); outline: none; font-family: var(--font-family);
    width: 100%; transition: border-color .15s, box-shadow .15s;
}
.mt3-combo__input:focus {
    border-color: #199c82; box-shadow: 0 0 0 3px rgba(13,148,136,.1);
    background: var(--bg-card);
}
.mt3-combo__input::placeholder { color: var(--text-muted); font-size: .82rem; }
.mt3-combo__toggle {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 2px; display: flex; align-items: center; justify-content: center;
    transition: color .15s;
}
.mt3-combo__toggle:hover { color: var(--text-secondary); }
.mt3-combo__dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 220px; overflow-y: auto; padding: .3rem;
    scrollbar-width: thin;
}
.mt3-combo__option {
    display: block; width: 100%; text-align: left; padding: .5rem .7rem;
    border: none; background: none; font-size: .82rem; color: var(--text-primary);
    font-family: var(--font-family); cursor: pointer; border-radius: var(--radius-sm);
    transition: background .1s;
}
.mt3-combo__option:hover { background: var(--bg-body); }
.mt3-combo__empty {
    padding: .5rem .7rem; font-size: .8rem; color: var(--text-muted);
    font-family: var(--font-family);
}
.mt3-combo__custom {
    color: #199c82; font-weight: 600;
}
.mt3-textarea {
    padding: .55rem .85rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .84rem; color: var(--text-primary);
    background: var(--bg-body); outline: none; font-family: var(--font-family);
    resize: vertical; width: 100%; min-height: 60px;
    transition: border-color .15s, box-shadow .15s;
}
.mt3-textarea::placeholder { color: var(--text-muted); font-size: .82rem; }
.mt3-hint {
    font-size: .7rem; color: var(--text-muted); margin-top: .15rem;
    font-family: var(--font-family);
}
.mt3-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mt3-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* ── Estado pills ──────────────────────────────────────────────────── */
.mt3-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.mt3-pill-radio { display: none; }
.mt3-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem .75rem; border-radius: var(--radius-lg);
    border: 1.5px solid var(--border); background: transparent;
    font-size: .76rem; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; transition: all .15s; font-family: var(--font-family);
    user-select: none;
}
.mt3-pill:hover { border-color: var(--text-muted); }
.mt3-pill-radio:checked + .mt3-pill--pendiente      { background: rgba(100,116,139,.1); border-color: #64748b; color: #475569; }
.mt3-pill-radio:checked + .mt3-pill--en_progreso     { background: rgba(59,130,246,.1); border-color: #3b82f6; color: #2563eb; }
.mt3-pill-radio:checked + .mt3-pill--alcanzada       { background: rgba(16,185,129,.1); border-color: #10b981; color: #059669; }
.mt3-pill-radio:checked + .mt3-pill--descontinuada   { background: rgba(239,68,68,.1); border-color: #ef4444; color: #dc2626; }

/* ── Range slider ──────────────────────────────────────────────────── */
.mt3-progress-wrap { display: flex; flex-direction: column; gap: .5rem; }
.mt3-range-track { position: relative; }
.mt3-range {
    width: 100%; height: 8px; -webkit-appearance: none; appearance: none;
    background: transparent; cursor: pointer; margin: 0;
}
.mt3-range::-webkit-slider-runnable-track {
    height: 8px; border-radius: 4px; background: var(--bg-body);
}
.mt3-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: #199c82; border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15); margin-top: -7px;
    transition: transform .15s;
}
.mt3-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.mt3-range::-moz-range-track {
    height: 8px; border-radius: 4px; background: var(--bg-body); border: none;
}
.mt3-range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: #199c82; border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.mt3-range-fill {
    position: absolute; top: 0; left: 0; height: 8px;
    border-radius: 4px; pointer-events: none;
    transition: width .1s, background .3s;
}
.mt3-range-val {
    font-size: 1.6rem; font-weight: 800; font-family: var(--font-family);
    text-align: center; letter-spacing: -.02em; transition: color .3s;
}
.mt3-range-labels {
    display: flex; justify-content: space-between;
    font-size: .62rem; color: var(--text-muted); font-family: var(--font-family);
}

/* ── Chart ──────────────────────────────────────────────────────────── */
.mt3-chart-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.mt3-chart-section__header {
    display: flex; align-items: center; gap: .55rem;
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--border-light);
}
.mt3-chart-section__icon {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: rgba(25,156,130,.08); color: #199c82;
    display: flex; align-items: center; justify-content: center;
}
.mt3-chart-section__title {
    font-size: .82rem; font-weight: 700; color: var(--text-primary);
    font-family: var(--font-family); margin: 0;
}
.mt3-chart-canvas { padding: .75rem 1rem 1rem; }
.mt3-chart-canvas canvas { max-height: 220px; width: 100% !important; }
.mt3-empty-chart {
    padding: 2rem 1rem; text-align: center;
    color: var(--text-muted); font-size: .82rem; font-family: var(--font-family);
}

/* ── Grid layout ───────────────────────────────────────────────────── */
.mt3-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Card (general) ────────────────────────────────────────────────── */
.mt3-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.mt3-card__head {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border-light);
}
.mt3-card__icon {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mt3-card__icon--indigo { background: rgba(25,156,130,.08); color: #199c82; }
.mt3-card__icon--amber  { background: rgba(245,158,11,.08); color: #f59e0b; }
.mt3-card__icon--teal   { background: rgba(13,148,136,.08); color: #199c82; }
.mt3-card__title {
    font-size: .82rem; font-weight: 700; color: var(--text-primary);
    font-family: var(--font-family); margin: 0;
}
.mt3-card__body { padding: .85rem 1rem; }

/* ── Field display ─────────────────────────────────────────────────── */
.mt3-field { margin-bottom: .7rem; }
.mt3-field__label {
    font-size: .65rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem;
    font-family: var(--font-family);
}
.mt3-field__text {
    font-size: .84rem; color: var(--text-primary); line-height: 1.5;
    font-family: var(--font-family);
}
.mt3-field__text--muted { color: var(--text-muted); font-style: italic; }

/* ── Estado change buttons ─────────────────────────────────────────── */
.mt3-estado-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.mt3-estado-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem .7rem; border-radius: 8px;
    font-size: .76rem; font-weight: 600; border: 1.5px solid;
    cursor: pointer; font-family: var(--font-family);
    transition: all .15s; background: transparent;
}
.mt3-estado-btn--blue  { border-color: rgba(59,130,246,.3); color: #2563eb; }
.mt3-estado-btn--blue:hover  { background: rgba(59,130,246,.08); }
.mt3-estado-btn--green { border-color: rgba(16,185,129,.3); color: #059669; }
.mt3-estado-btn--green:hover { background: rgba(16,185,129,.08); }
.mt3-estado-btn--gray  { border-color: rgba(100,116,139,.3); color: #64748b; }
.mt3-estado-btn--gray:hover  { background: rgba(100,116,139,.08); }
.mt3-estado-btn--red   { border-color: rgba(239,68,68,.3); color: #dc2626; }
.mt3-estado-btn--red:hover   { background: rgba(239,68,68,.08); }

.mt3-delete-zone {
    margin-top: 1rem; padding-top: .85rem;
    border-top: 1px solid var(--border-light);
}

/* ── Timeline / Seguimiento cards ──────────────────────────────────── */
.mt3-timeline-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.mt3-timeline-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}
.mt3-timeline-head__left { display: flex; align-items: center; gap: .55rem; }
.mt3-timeline-head__icon {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: rgba(13,148,136,.08); color: #199c82;
    display: flex; align-items: center; justify-content: center;
}
.mt3-timeline-head__title {
    font-size: .82rem; font-weight: 700; color: var(--text-primary);
    font-family: var(--font-family); margin: 0;
}
.mt3-timeline-head__count {
    font-size: .72rem; color: var(--text-muted); font-weight: 400;
}
.mt3-timeline-body { padding: .75rem 1rem; display: flex; flex-direction: column; gap: .6rem; }

.mt3-seg-card {
    padding: .75rem .85rem; border: 1px solid var(--border-light);
    border-radius: var(--radius); background: var(--bg-body);
    transition: border-color .15s;
}
.mt3-seg-card:hover { border-color: var(--border); }
.mt3-seg-card__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .4rem;
}
.mt3-seg-card__date {
    font-size: .74rem; font-weight: 600; color: var(--text-secondary);
    font-family: var(--font-family); display: flex; align-items: center; gap: .3rem;
}
.mt3-seg-card__pct {
    display: inline-flex; padding: .15rem .45rem; border-radius: 12px;
    font-size: .67rem; font-weight: 700; font-family: var(--font-family);
}
.mt3-seg-card__nota {
    font-size: .8rem; color: var(--text-secondary); line-height: 1.5;
    font-family: var(--font-family); margin-bottom: .4rem;
}
.mt3-seg-card__bar {
    height: 4px; border-radius: 2px; background: var(--bg-card);
    overflow: hidden;
}
.mt3-seg-card__bar-fill {
    height: 100%; border-radius: 2px; transition: width .5s ease;
}

/* ── Empty state ───────────────────────────────────────────────────── */
.mt3-empty {
    text-align: center; padding: 2.5rem 1rem; color: var(--text-muted);
    font-size: .82rem; font-family: var(--font-family);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.mt3-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 600; border: none;
    cursor: pointer; font-family: var(--font-family);
    transition: all .15s; text-decoration: none;
}
.mt3-btn--primary {
    background: var(--primary);
    color: #fff; box-shadow: 0 2px 8px rgba(13,148,136,.3);
}
.mt3-btn--primary:hover { opacity: .9; transform: translateY(-1px); }
.mt3-btn--ghost {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary);
}
.mt3-btn--ghost:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mt3-btn--danger {
    background: transparent; border: 1px solid rgba(239,68,68,.3);
    color: #dc2626;
}
.mt3-btn--danger:hover { background: rgba(239,68,68,.06); }

/* ── Actions row ───────────────────────────────────────────────────── */
.mt3-actions {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding-top: .5rem;
}

/* ── Dropdown menu ─────────────────────────────────────────────────── */
.mt3-dropdown { position: relative; }
.mt3-dropdown__trigger {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.mt3-dropdown__trigger:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mt3-dropdown__menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    min-width: 160px; padding: .3rem; z-index: 20;
}
.mt3-dropdown__item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .7rem; border-radius: var(--radius-sm);
    font-size: .8rem; color: var(--text-secondary);
    cursor: pointer; border: none; background: none; width: 100%;
    font-family: var(--font-family); transition: background .1s;
    text-decoration: none;
}
.mt3-dropdown__item:hover { background: var(--bg-body); }
.mt3-dropdown__item--danger { color: #dc2626; }
.mt3-dropdown__item--danger:hover { background: rgba(239,68,68,.06); }

/* ── Errors ─────────────────────────────────────────────────────────── */
.mt3-errors {
    padding: .75rem 1rem; border-radius: var(--radius);
    background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.18);
    color: #dc2626; font-size: .8rem; font-family: var(--font-family);
}
.mt3-errors ul { margin: .3rem 0 0 1rem; padding: 0; }
.mt3-errors li { margin-bottom: .15rem; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.mt3-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(15,23,42,.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.mt3-modal {
    background: var(--bg-card); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.2);
    width: 100%; max-width: 520px; max-height: min(90vh, 90dvh);
    overflow-y: auto; border: 1px solid var(--border-light);
}
.mt3-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem; border-bottom: 1px solid var(--border-light);
}
.mt3-modal__head h3 {
    font-size: .92rem; font-weight: 700; color: var(--text-primary);
    margin: 0; font-family: var(--font-family);
}
.mt3-modal__close {
    width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.mt3-modal__close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.mt3-modal__body { padding: 1rem 1.2rem; }
.mt3-modal__foot {
    padding: .8rem 1.2rem; border-top: 1px solid var(--border-light);
    display: flex; justify-content: flex-end; gap: .5rem;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mt3-hero { flex-direction: column; align-items: flex-start; }
    .mt3-hero__actions { width: 100%; }
    .mt3-kpis { grid-template-columns: repeat(2, 1fr); }
    .mt3-grid2 { grid-template-columns: 1fr; }
    .mt3-form-row, .mt3-date-row { grid-template-columns: 1fr; }
    .mt3-modal { max-width: 100%; border-radius: 16px 16px 0 0; max-height: min(92vh, 92dvh); }
    .mt3-overlay { align-items: flex-end; padding: 0; }
}
@media (max-width: 480px) {
    .mt3-page { padding: .85rem .75rem; gap: 1rem; }
    .mt3-hero__icon { width: 38px; height: 38px; }
    .mt3-hero__title { font-size: 1rem; }
    .mt3-kpis { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .mt3-kpi { padding: .65rem .75rem; }
    .mt3-kpi__value { font-size: 1.1rem; }
    .mt3-actions { flex-direction: column-reverse; }
    .mt3-btn { width: 100%; justify-content: center; }
    .mt3-pills { gap: .3rem; }
    .mt3-pill { padding: .35rem .6rem; font-size: .72rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MI CONSULTORIO v3 — Premium Settings Panel (mc3-)
   ═══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.mc3-page { display: flex; flex-direction: column; gap: 1.1rem; padding: 0; max-width: 880px; margin: 0 auto; }

/* ── Banner ──────────────────────────────────────────────────── */
.mc3-banner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid #199c82;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.mc3-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(25,156,130,.05) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.mc3-banner__inner { position: relative; z-index: 1; }
.mc3-banner__inner {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
}
/* Logo showcase: prominent, adapts to horizontal/vertical/symbol logos */
.mc3-banner__logo-showcase {
    flex-shrink: 0;
    width: 100px; min-height: 64px; max-height: 100px;
    padding: .5rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border-light);
    background: var(--bg-body);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.mc3-banner__logo-img {
    max-width: 100%; max-height: 88px;
    object-fit: contain;
    display: block;
}
.mc3-banner__logo-empty {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    color: var(--text-muted); opacity: .3;
}
.mc3-banner__logo-empty span {
    font-size: .62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; font-family: var(--font-family);
}
.mc3-banner__info { flex: 1; min-width: 0; }
.mc3-banner__name {
    font-size: 1.1rem; font-weight: 700; color: var(--text-primary);
    margin: 0 0 .15rem; font-family: var(--font-family);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.02em;
}
.mc3-banner__title { font-size: .8rem; color: var(--text-secondary); margin: 0 0 .35rem; font-family: var(--font-family); }
.mc3-banner__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mc3-banner__tag {
    display: inline-block; padding: .14rem .55rem; border-radius: 12px;
    font-size: .67rem; font-weight: 700;
    background: rgba(25,156,130,.08); color: #199c82; font-family: var(--font-family);
}
.mc3-banner__license {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; color: var(--text-muted); font-family: var(--font-family);
}
.mc3-banner__right { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.mc3-banner__colors { display: flex; gap: .3rem; }
.mc3-banner__dot {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border);
    transition: background .25s ease;
}
.mc3-banner__sig { width: 60px; height: 30px; overflow: hidden; opacity: .7; }
.mc3-banner__sig img { width: 100%; height: 100%; object-fit: contain; }

/* ── Tab Navigation ──────────────────────────────────────────── */
.mc3-tabs {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .35rem;
    box-shadow: var(--shadow-sm);
}
.mc3-tabs__scroll {
    display: flex; gap: .25rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mc3-tabs__scroll::-webkit-scrollbar { display: none; }
.mc3-tabs__pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .85rem;
    border: none; background: transparent;
    border-radius: var(--radius); cursor: pointer;
    font-family: var(--font-family); font-size: .78rem; font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all .2s ease;
}
.mc3-tabs__pill:hover { color: var(--text-secondary); background: var(--bg-card-hover); }
.mc3-tabs__pill--active {
    background: #199c82; color: #fff;
    box-shadow: 0 2px 8px rgba(25,156,130,.3);
}
.mc3-tabs__pill--active:hover { background: #178a72; color: #fff; }

/* ── Section Card ────────────────────────────────────────────── */
.mc3-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow-sm);
}
.mc3-section__header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
.mc3-section__icon {
    width: 38px; height: 38px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mc3-section__icon--indigo { background: rgba(25,156,130,.08); color: #199c82; }
.mc3-section__icon--teal   { background: rgba(13,148,136,.08); color: #199c82; }
.mc3-section__icon--amber  { background: rgba(245,158,11,.08); color: #f59e0b; }
.mc3-section__icon--rose   { background: rgba(244,63,94,.08); color: #f43f5e; }
.mc3-section__icon--violet { background: rgba(139,92,246,.08); color: #8b5cf6; }
.mc3-section__title {
    font-size: .95rem; font-weight: 700; color: var(--text-primary);
    margin: 0 0 .15rem; font-family: var(--font-family); letter-spacing: -.01em;
}
.mc3-section__desc {
    font-size: .78rem; color: var(--text-muted); margin: 0; font-family: var(--font-family);
}

/* ── Form Grid ───────────────────────────────────────────────── */
.mc3-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.mc3-field { display: flex; flex-direction: column; gap: .3rem; position: relative; }
.mc3-field--full { grid-column: 1 / -1; }
.mc3-label-row { display: flex; align-items: center; gap: .35rem; }
.mc3-label {
    font-size: .68rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    font-family: var(--font-family); margin: 0;
}
/* BUG-BR-16 (Fase 5): hint inline debajo del label de cada asset card en
   Mi Consultorio. Explica donde se usa el logo/firma sin que la doctora
   tenga que abrir el popover (tip icon). */
.mc3-label__hint {
    font-size: .75rem;
    line-height: 1.45;
    color: var(--text-secondary, #64748b);
    margin: .15rem 0 .65rem;
    font-family: var(--font-family);
}
.mc3-input {
    width: 100%; padding: .6rem .8rem;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-family); font-size: .85rem;
    color: var(--text-primary); background: var(--input-bg-light);
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.mc3-input:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1); }
.mc3-input::placeholder { color: var(--text-muted); font-size: .82rem; }
.mc3-textarea {
    width: 100%; padding: .6rem .8rem;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-family); font-size: .85rem;
    color: var(--text-primary); background: var(--input-bg-light);
    outline: none; resize: vertical;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.mc3-textarea:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1); }
.mc3-textarea::placeholder { color: var(--text-muted); font-size: .82rem; }

/* ── Tip Trigger ─────────────────────────────────────────────── */
.mc3-tip-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); padding: 0;
    transition: color .15s, background .15s;
}
.mc3-tip-trigger:hover { color: var(--primary); background: rgba(var(--primary-rgb),.08); }
.mc3-tip-trigger:focus { outline: none; color: var(--primary); }

/* ── Popover ─────────────────────────────────────────────────── */
.mc3-popover {
    position: relative;
    margin-top: .45rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem .9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    z-index: 20;
}
.mc3-popover__arrow {
    position: absolute; top: -5px; left: 20px;
    width: 10px; height: 10px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}
.mc3-popover__text { font-size: .78rem; color: var(--text-secondary); margin: 0 0 .5rem; font-family: var(--font-family); line-height: 1.5; }
.mc3-popover__text:last-child { margin-bottom: 0; }
.mc3-popover__demo { margin-top: .5rem; }

/* ── Demo: Sidebar Mockup ────────────────────────────────────── */
.mc3-demo-sidebar {
    display: flex; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border); height: 120px;
}
.mc3-demo-sidebar__bar {
    width: 100px; background: var(--bg-sidebar);
    padding: .5rem; display: flex; flex-direction: column; gap: .4rem;
    flex-shrink: 0;
}
.mc3-demo-sidebar__logo-area {
    display: flex; align-items: center; gap: .35rem;
    padding-bottom: .35rem; border-bottom: 1px solid var(--sidebar-border);
}
.mc3-demo-sidebar__logo-img { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; }
.mc3-demo-sidebar__logo-icon {
    width: 16px; height: 16px; border-radius: 3px;
    background: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff;
}
.mc3-demo-sidebar__name {
    font-size: .55rem; font-weight: 600; color: #e2e8f0;
    font-family: var(--font-family); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 65px;
}
.mc3-demo-sidebar__nav { display: flex; flex-direction: column; gap: .2rem; padding-top: .15rem; }
.mc3-demo-sidebar__item { height: 7px; border-radius: 3px; background: var(--sidebar-hover); }
.mc3-demo-sidebar__item--active { background: rgba(var(--primary-rgb),.25); }
.mc3-demo-sidebar__content { flex: 1; background: var(--bg-body); padding: .5rem; }
.mc3-demo-sidebar__topbar { height: 12px; background: var(--bg-card); border-radius: 3px; margin-bottom: .4rem; border: 1px solid var(--border-light); }
.mc3-demo-sidebar__body { display: flex; flex-direction: column; gap: .3rem; }
.mc3-demo-sidebar__card { height: 22px; background: var(--bg-card); border-radius: 4px; border: 1px solid var(--border-light); }
.mc3-demo-sidebar__card--sm { width: 70%; height: 16px; }

/* ── Demo: Places (logo locations) ───────────────────────────── */
.mc3-demo-places { display: flex; gap: .45rem; flex-wrap: wrap; }
.mc3-demo-places__item {
    display: flex; align-items: center; gap: .3rem;
    padding: .3rem .55rem; border-radius: 6px;
    background: var(--bg-body); border: 1px solid var(--border-light);
    font-size: .68rem; font-weight: 600; color: var(--text-secondary);
    font-family: var(--font-family);
    opacity: 0; animation: mc3FadeInPlace .3s ease forwards;
}
.mc3-demo-places__item--delay1 { animation-delay: .05s; }
.mc3-demo-places__item--delay2 { animation-delay: .15s; }
.mc3-demo-places__item--delay3 { animation-delay: .25s; }
.mc3-demo-places__item--delay4 { animation-delay: .35s; }
.mc3-demo-places__icon {
    width: 22px; height: 22px; border-radius: 5px;
    background: rgba(var(--primary-rgb),.08); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
@keyframes mc3FadeInPlace {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Demo: PDF Mockup ────────────────────────────────────────── */
.mc3-demo-pdf {
    background: #fff; border: 1px solid var(--border);
    border-radius: 5px; padding: .65rem; max-height: 150px;
}
.mc3-demo-pdf--page { position: relative; }
.mc3-demo-pdf__header-row {
    display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem;
}
.mc3-demo-pdf__header-logo { width: 18px; height: 18px; flex-shrink: 0; }
.mc3-demo-pdf__header-logo img { width: 100%; height: 100%; object-fit: contain; }
.mc3-demo-pdf__header-box { width: 18px; height: 18px; background: var(--bg-body); border-radius: 3px; }
.mc3-demo-pdf__header-text { font-size: .65rem; font-weight: 700; color: var(--text-primary); font-family: var(--font-family); }
.mc3-demo-pdf__sep { height: 1px; background: var(--border); margin: .3rem 0 .45rem; }
.mc3-demo-pdf__line { height: 5px; border-radius: 3px; background: var(--bg-body); margin-bottom: .25rem; width: 100%; }
.mc3-demo-pdf__line--w85 { width: 85%; }
.mc3-demo-pdf__line--w70 { width: 70%; }
.mc3-demo-pdf__line--w60 { width: 60%; }
.mc3-demo-pdf__line--w50 { width: 50%; }
.mc3-demo-pdf__line--shimmer {
    background: linear-gradient(90deg, var(--bg-body) 25%, var(--border-light) 50%, var(--bg-body) 75%);
    background-size: 200% 100%;
    animation: mc3Shimmer 1.8s ease-in-out infinite;
}
@keyframes mc3Shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Signature area */
.mc3-demo-pdf__sig-area {
    margin-top: .5rem; padding-top: .4rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
}
.mc3-demo-pdf__sig-img { height: 22px; object-fit: contain; }
.mc3-demo-pdf__sig-pen {
    color: var(--text-muted); opacity: .5;
    animation: mc3PenWrite 2s ease-in-out infinite;
}
@keyframes mc3PenWrite {
    0%, 100% { transform: translateX(0); opacity: .4; }
    50%      { transform: translateX(10px); opacity: .8; }
}
.mc3-demo-pdf__sig-line { width: 80px; height: 1px; background: var(--text-muted); opacity: .3; }
.mc3-demo-pdf__sig-label { font-size: .6rem; color: var(--text-muted); font-family: var(--font-family); margin-top: .15rem; }

/* ── Demo: Portal Mockup ─────────────────────────────────────── */
.mc3-demo-portal {
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border); background: #fff;
}
.mc3-demo-portal--colors { max-height: 140px; }
.mc3-demo-portal--large { max-height: 200px; }
.mc3-demo-portal__topbar {
    display: flex; align-items: center; gap: .4rem;
    padding: .4rem .6rem; background: #3b82f6;
    transition: background .3s ease;
}
.mc3-demo-portal__topbar-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); flex-shrink: 0;
    transition: background .3s ease;
}
.mc3-demo-portal__topbar-text { font-size: .6rem; font-weight: 600; color: #fff; font-family: var(--font-family); }
.mc3-demo-portal__body { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .35rem; }
.mc3-demo-portal__row { display: flex; align-items: center; justify-content: space-between; }
.mc3-demo-portal__link {
    font-size: .65rem; font-weight: 600; color: #3b82f6;
    font-family: var(--font-family); transition: color .3s ease;
}
.mc3-demo-portal__badge {
    display: inline-block; padding: .08rem .35rem; border-radius: 8px;
    font-size: .55rem; font-weight: 700; color: #fff;
    background: #3b82f6; transition: background .3s ease;
}
.mc3-demo-portal__btn {
    display: block; width: 100%; padding: .3rem;
    border: none; border-radius: 5px;
    font-size: .6rem; font-weight: 600; color: #fff;
    background: #3b82f6; cursor: default;
    margin-top: .15rem; font-family: var(--font-family);
    transition: background .3s ease;
}
.mc3-demo-portal__greeting {
    display: flex; align-items: flex-start; gap: .4rem;
    padding: .45rem; border-radius: 5px;
    background: rgba(var(--primary-rgb),.06); border: 1px solid rgba(var(--primary-rgb),.1);
}
.mc3-demo-portal__greeting-icon { color: var(--primary); flex-shrink: 0; margin-top: .05rem; }
.mc3-demo-portal__greeting-text {
    font-size: .65rem; color: var(--text-secondary); font-family: var(--font-family);
    line-height: 1.4; margin: 0;
}

/* ── Assets Grid ─────────────────────────────────────────────── */
.mc3-assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.mc3-asset-card { display: flex; flex-direction: column; gap: .5rem; position: relative; }

/* Asset showcase: larger, better adapted to all logo formats */
.mc3-asset-showcase {
    width: 100%; min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg); background: var(--bg-body);
    position: relative; overflow: hidden;
    transition: border-color .25s, background .25s;
}
.mc3-asset-showcase:hover { border-color: rgba(var(--primary-rgb),.3); }
.mc3-asset-showcase--has { border-style: solid; border-color: var(--border-light); }
.mc3-asset-showcase--sig { background: #fff; }

/* Current image */
.mc3-asset-showcase__current {
    width: 100%; height: 100%; min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.mc3-asset-showcase__current img {
    max-width: 100%; max-height: 140px;
    object-fit: contain; display: block;
}

/* New image preview */
.mc3-asset-showcase__new {
    width: 100%; min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(var(--primary-rgb),.03);
    animation: mc3PreviewPulse 1.5s ease infinite;
}
@keyframes mc3PreviewPulse {
    0%, 100% { background: rgba(var(--primary-rgb),.03); }
    50% { background: rgba(var(--primary-rgb),.07); }
}
.mc3-asset-showcase__new img {
    max-width: 100%; max-height: 140px;
    object-fit: contain; display: block;
    border-radius: var(--radius-sm);
}
.mc3-asset-showcase__badge {
    position: absolute; top: .5rem; right: .5rem;
    padding: .2rem .55rem; border-radius: var(--radius-lg);
    background: var(--primary); color: #fff;
    font-size: .65rem; font-weight: 700;
    font-family: var(--font-family); letter-spacing: .03em;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.4);
    animation: mc3BadgeIn .3s ease both;
}
@keyframes mc3BadgeIn {
    from { opacity: 0; transform: scale(.8) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Empty state */
.mc3-asset-empty {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    color: var(--text-muted); opacity: .3;
}
.mc3-asset-empty span { font-size: .72rem; font-family: var(--font-family); }

/* Actions row */
.mc3-asset-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Confirm/Cancel buttons for new selection */
.mc3-asset-confirm {
    display: flex; align-items: center; gap: .4rem;
    animation: mc3ConfirmIn .25s ease both;
}
@keyframes mc3ConfirmIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.mc3-btn-confirm {
    display: inline-flex; align-items: center; gap: .3rem;
    height: 32px; padding: 0 .85rem;
    border-radius: var(--radius-sm); border: none;
    background: #10b981;
    color: #fff; font-size: .78rem; font-weight: 700;
    cursor: pointer; font-family: var(--font-family);
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
    transition: opacity .15s, transform .15s;
}
.mc3-btn-confirm:hover { opacity: .9; transform: translateY(-1px); }
.mc3-btn-cancel {
    display: inline-flex; align-items: center; gap: .3rem;
    height: 32px; padding: 0 .75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: transparent;
    color: var(--text-secondary); font-size: .78rem; font-weight: 500;
    cursor: pointer; font-family: var(--font-family);
    transition: border-color .15s, color .15s;
}
.mc3-btn-cancel:hover { border-color: #ef4444; color: #ef4444; }
.mc3-file-input { display: none; }
.mc3-btn-upload {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .7rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: transparent;
    font-family: var(--font-family); font-size: .75rem; font-weight: 600;
    color: var(--text-secondary); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.mc3-btn-upload:hover { border-color: var(--primary); color: var(--primary); }
.mc3-btn-remove {
    padding: .4rem .6rem; border: none; background: transparent;
    font-family: var(--font-family); font-size: .72rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    transition: color .15s;
}
.mc3-btn-remove:hover { color: #ef4444; }
.mc3-hint {
    font-size: .73rem; color: var(--text-muted);
    margin: .75rem 0 0; font-family: var(--font-family);
}

/* ── Colors Section ──────────────────────────────────────────── */
.mc3-colors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.mc3-color-card { display: flex; flex-direction: column; gap: .4rem; position: relative; }
.mc3-color-picker {
    display: flex; align-items: center; gap: .55rem;
    padding: .4rem .6rem;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    background: var(--input-bg-light);
    transition: border-color .15s, box-shadow .15s;
}
.mc3-color-picker:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.08); }
.mc3-color-swatch {
    width: 28px; height: 28px; border: none; padding: 0;
    border-radius: 6px; cursor: pointer; flex-shrink: 0;
}
.mc3-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.mc3-color-swatch::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.1); border-radius: 6px; }
.mc3-color-hex {
    font-size: .8rem; font-weight: 600; font-family: 'Courier New', monospace;
    color: var(--text-secondary); text-transform: uppercase;
}
.mc3-colors-preview { margin-top: 1rem; }
.mc3-colors-preview__label {
    font-size: .68rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 .5rem; font-family: var(--font-family);
}

/* ── Clinical config items ────────────────────────────────────── */
.mc3-clinical-hint {
    font-size: .78rem; color: var(--text-muted); line-height: 1.5;
    margin: 0 0 .85rem; font-family: var(--font-family);
}
.mc3-items-list {
    display: flex; flex-direction: column; gap: .4rem; margin-bottom: .85rem;
}
.mc3-item-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .55rem .75rem;
    background: var(--bg-body); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); transition: border-color .15s, opacity .2s;
}
.mc3-item-row:hover { border-color: var(--border); }
.mc3-item-row__info { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
.mc3-item-row__dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.mc3-item-row__name {
    font-size: .82rem; color: var(--text-primary); font-weight: 500;
    font-family: var(--font-family); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.mc3-item-row__cat {
    font-size: .65rem; color: var(--text-muted); font-weight: 500;
    padding: .1rem .45rem; border-radius: 4px;
    background: rgba(var(--primary-rgb),.06); flex-shrink: 0;
    font-family: var(--font-family);
}
.mc3-item-row__del {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent;
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.mc3-item-row__del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.05); }
.mc3-items-empty {
    font-size: .78rem; color: var(--text-muted); font-style: italic;
    padding: .75rem 0; font-family: var(--font-family);
}
.mc3-add-row {
    display: flex; gap: .5rem; align-items: center;
}
.mc3-add-row__input { flex: 1; min-width: 0; }
.mc3-add-row__btn { flex-shrink: 0; white-space: nowrap; height: 38px; }

/* ── Clinical: Predefined Type Groups ───────────────────────── */
.mc3-type-groups { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.35rem; }
.mc3-type-group__header {
    display: flex; align-items: center; gap: .5rem;
    font-size: .67rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .07em;
    font-family: var(--font-family); margin-bottom: .4rem;
    padding-bottom: .35rem; border-bottom: 1px solid var(--border-light);
}
.mc3-type-group__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mc3-type-group__count {
    margin-left: auto;
    font-size: .65rem; padding: .1rem .45rem;
    background: rgba(var(--primary-rgb),.07); color: var(--text-muted);
    border-radius: 10px; font-family: var(--font-family);
}
.mc3-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.mc3-type-card {
    display: flex; align-items: center; gap: .4rem;
    padding: .45rem .65rem;
    background: var(--bg-body); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: .79rem; font-weight: 500; color: var(--text-secondary);
    font-family: var(--font-family); line-height: 1.3;
    cursor: default;
}
.mc3-type-card__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mc3-type-card__name { flex: 1; min-width: 0; }
.mc3-type-card__lock {
    margin-left: auto; flex-shrink: 0;
    color: var(--text-muted); opacity: .35;
    display: flex; align-items: center;
}

/* ── Inline Edit — Item Rows ────────────────────────────────── */
.mc3-item-row__actions { display: flex; align-items: center; gap: .15rem; }
.mc3-item-row__edit-wrap { display: flex; flex: 1; gap: .4rem; align-items: center; }
.mc3-item-row__save-actions { display: flex; gap: .25rem; align-items: center; }
.mc3-item-row__edit-btn {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent;
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.mc3-item-row__edit-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb),.05); }
.mc3-input--inline {
    flex: 1; height: 32px; padding: 0 .65rem;
    border: 1.5px solid var(--primary); border-radius: var(--radius-sm);
    font-family: var(--font-family); font-size: .82rem;
    color: var(--text-primary); background: var(--bg-card);
    outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1);
}
.mc3-btn-inline-save, .mc3-btn-inline-cancel {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.mc3-btn-inline-save { color: #10b981; }
.mc3-btn-inline-save:hover { border-color: #10b981; background: rgba(16,185,129,.08); }
.mc3-btn-inline-cancel { color: var(--text-muted); }
.mc3-btn-inline-cancel:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.05); }

/* ── Inline Edit — Chips ─────────────────────────────────────── */
.mc3-chip__btns { display: flex; align-items: center; gap: .1rem; }
.mc3-chip__edit-btn {
    width: 14px; height: 14px; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); padding: 0;
    transition: color .15s; flex-shrink: 0; opacity: 0;
}
.mc3-chip:hover .mc3-chip__edit-btn { opacity: 1; }
.mc3-chip__edit-btn:hover { color: var(--primary); }
.mc3-chip__input {
    border: none; border-bottom: 1.5px solid var(--primary);
    outline: none; font-size: .78rem; font-family: var(--font-family);
    color: var(--text-primary); background: transparent;
    min-width: 80px; max-width: 200px;
}
.mc3-chip__save-btns { display: flex; align-items: center; gap: .1rem; }
.mc3-chip__save-btn, .mc3-chip__cancel-btn {
    width: 15px; height: 15px; border: none; background: transparent;
    cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
    transition: color .15s; flex-shrink: 0;
}
.mc3-chip__save-btn { color: #10b981; }
.mc3-chip__save-btn:hover { color: #059669; }
.mc3-chip__cancel-btn { color: var(--text-muted); }
.mc3-chip__cancel-btn:hover { color: #ef4444; }

/* ── Clinical: Technique Chips ──────────────────────────────── */
.mc3-chips-wrap {
    display: flex; flex-wrap: wrap; gap: .45rem;
    min-height: 56px; padding: .65rem .6rem;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-body);
    margin-bottom: .85rem;
    transition: border-color .15s, background .15s;
    align-content: flex-start;
}
.mc3-chips-wrap--has { border-style: solid; border-color: var(--border-light); background: var(--bg-card); }
.mc3-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .32rem .45rem .32rem .65rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 20px;
    font-size: .78rem; font-weight: 500; color: var(--text-primary);
    font-family: var(--font-family);
    transition: border-color .15s, box-shadow .15s, opacity .2s, transform .2s;
    animation: mc3ChipIn .2s ease both;
}
.mc3-chip:hover { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.08); }
.mc3-chip__del {
    width: 17px; height: 17px; border-radius: 50%;
    border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); padding: 0;
    transition: all .15s; flex-shrink: 0;
}
.mc3-chip__del:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.mc3-chips-empty {
    font-size: .78rem; color: var(--text-muted); font-style: italic;
    padding: .2rem 0; font-family: var(--font-family); width: 100%;
}
@keyframes mc3ChipIn {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
    .mc3-add-row { flex-direction: column; }
    .mc3-add-row__input { width: 100%; }
    .mc3-add-row__btn { width: 100%; justify-content: center; }
}

/* ── Form Actions ────────────────────────────────────────────── */
.mc3-form-actions { margin-top: 1rem; display: flex; justify-content: flex-end; }
.mc3-btn-save {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.2rem;
    border: none; border-radius: var(--radius);
    background: var(--primary); color: #fff;
    font-family: var(--font-family); font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: opacity .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.25);
}
.mc3-btn-save:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(var(--primary-rgb),.35); }
.mc3-btn-save:active { transform: translateY(0); box-shadow: none; }

/* ── Tab Transitions ─────────────────────────────────────────── */
.mc3-fade-enter { transition: opacity .2s ease, transform .2s ease; }
.mc3-fade-enter-start { opacity: 0; transform: translateY(6px); }
.mc3-fade-enter-end { opacity: 1; transform: translateY(0); }

/* ── Responsive: Tablet ──────────────────────────────────────── */
@media (max-width: 768px) {
    .mc3-form-grid { grid-template-columns: 1fr; }
    .mc3-assets-grid { grid-template-columns: 1fr; }
    .mc3-colors-grid { grid-template-columns: 1fr; }
    .mc3-type-grid { grid-template-columns: 1fr; }
    .mc3-banner__inner { flex-direction: column; align-items: flex-start; }
    .mc3-banner__logo-showcase { width: 80px; min-height: 52px; max-height: 80px; }
    .mc3-banner__sig { display: none; }
    .mc3-section { padding: 1.1rem 1rem; }
    .mc3-popover { margin-top: .35rem; }
    .mc3-form-actions { justify-content: stretch; }
    .mc3-btn-save { width: 100%; justify-content: center; height: 44px; }
}

/* ── Responsive: Mobile ──────────────────────────────────────── */
@media (max-width: 480px) {
    .mc3-page { gap: .85rem; }
    .mc3-banner__inner { padding: .85rem 1rem; }
    .mc3-banner__logo-showcase { width: 64px; min-height: 44px; max-height: 64px; padding: .35rem; }
    .mc3-banner__logo-img { max-height: 56px; }
    .mc3-banner__name { font-size: .95rem; }
    .mc3-section { padding: .9rem .8rem; }
    .mc3-tabs { padding: .25rem; }
    .mc3-tabs__pill { padding: .45rem .6rem; font-size: .72rem; }
    .mc3-demo-sidebar { height: 100px; }
    .mc3-demo-sidebar__bar { width: 80px; padding: .35rem; }
    .mc3-asset-showcase { min-height: 130px; }
    .mc3-asset-showcase__current { min-height: 130px; }
    .mc3-asset-showcase__new { min-height: 130px; }
    .mc3-asset-showcase__current img { max-height: 110px; }
    .mc3-asset-confirm { width: 100%; }
    .mc3-btn-confirm, .mc3-btn-cancel { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MI CONSULTORIO · Fase 4 — Previsualizacion de PDFs (.mc-pp-*)
   Section guarded en el blade por Route::has('previews.carta'),
   por lo que estas clases solo aparecen cuando el feature esta
   activo. CSS centralizado segun CLAUDE.md (no inline).
   ═══════════════════════════════════════════════════════════════ */
.mc-pp-section { margin-top: 28px; }

/* Controls (selector tamaño papel) */
.mc-pp-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin: 12px 0 20px 0;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.mc-pp-controls__group { display: flex; align-items: center; gap: 12px; }
.mc-pp-label { margin: 0 8px 0 0; font-weight: 600; font-size: 13px; color: #1e293b; }
.mc-pp-toggle {
    display: inline-flex; background: #ffffff; border: 1px solid #cbd5e1;
    border-radius: 999px; padding: 3px; gap: 2px;
}
.mc-pp-toggle__btn {
    border: 0; background: transparent; padding: 6px 14px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: #475569; cursor: pointer; transition: all .15s ease;
}
.mc-pp-toggle__btn:hover { color: #0f172a; }
.mc-pp-toggle__btn--active {
    background: #0f172a; color: #ffffff;
}
.mc-pp-controls__hint {
    flex-basis: 100%; margin: 0; font-size: 12px; color: #64748b;
}

/* Grid de cards */
.mc-pp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.mc-pp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 16px 14px 16px;
    display: flex; flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mc-pp-card:hover { border-color: #94a3b8; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); }
.mc-pp-card--missing { border-left: 3px solid #fb923c; }
.mc-pp-card--partial { border-left: 3px solid #fbbf24; }
.mc-pp-card--ready   { border-left: 3px solid #10b981; }
.mc-pp-card--deferred { border-left: 3px solid #cbd5e1; background: #fafbfc; }

.mc-pp-card__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
.mc-pp-card__title { margin: 0; font-size: 14.5px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.mc-pp-card__desc  { margin: 4px 0 10px 0; font-size: 12.5px; color: #475569; line-height: 1.55; }
.mc-pp-card__note  { margin: 0 0 12px 0; font-size: 11.5px; color: #64748b; font-style: italic; }
.mc-pp-card__actions {
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: 8px;
}

/* Status badges */
.mc-pp-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    white-space: nowrap; flex-shrink: 0;
}
.mc-pp-status__icon { font-size: 12px; line-height: 1; }
.mc-pp-status--ready    { background: #d1fae5; color: #047857; }
.mc-pp-status--partial  { background: #fef3c7; color: #92400e; }
.mc-pp-status--missing  { background: #fed7aa; color: #9a3412; }
.mc-pp-status--deferred { background: #f1f5f9; color: #475569; }

/* Botones */
.mc-pp-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 7px;
    font-size: 12.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: all .15s ease;
    border: 1px solid transparent;
}
.mc-pp-btn--primary { background: #0f172a; color: #ffffff; }
.mc-pp-btn--primary:hover { background: #1e293b; color: #ffffff; }
.mc-pp-btn--ghost   { background: #ffffff; color: #334155; border-color: #cbd5e1; }
.mc-pp-btn--ghost:hover { border-color: #94a3b8; color: #0f172a; }
.mc-pp-btn--disabled {
    background: #f1f5f9; color: #94a3b8; cursor: not-allowed;
    border: 1px solid #e2e8f0;
}

/* Quality / readiness list */
.mc-pp-quality {
    margin-top: 22px;
    padding: 14px 18px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
}
.mc-pp-quality__title { margin: 0 0 8px 0; font-size: 13px; font-weight: 700; color: #065f46; }
.mc-pp-quality__list  { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 14px; }
.mc-pp-quality__list li { font-size: 12.5px; color: #065f46; line-height: 1.7; display: flex; align-items: center; gap: 8px; }
.mc-pp-quality__dot {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.mc-pp-quality__dot--on { background: #16a34a; }

/* Checklist QA visual */
.mc-pp-checklist {
    margin-top: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
}
.mc-pp-checklist__summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; font-size: 13px; font-weight: 700; color: #1e293b;
    list-style: none;
}
.mc-pp-checklist__summary::-webkit-details-marker { display: none; }
.mc-pp-checklist__caret { color: #64748b; transition: transform .15s ease; }
details[open] .mc-pp-checklist__caret { transform: rotate(180deg); }
.mc-pp-checklist__body { padding: 4px 18px 16px 18px; border-top: 1px solid #f1f5f9; }
.mc-pp-checklist__intro { margin: 10px 0 6px 0; font-size: 12.5px; color: #334155; }
.mc-pp-checklist__items { list-style: none; padding: 0; margin: 0; }
.mc-pp-checklist__items li { padding: 4px 0; font-size: 12.5px; color: #334155; line-height: 1.55; }
.mc-pp-checklist__items label { display: flex; align-items: flex-start; gap: 8px; cursor: default; }
.mc-pp-checklist__items input[type="checkbox"] { margin-top: 3px; accent-color: #0f172a; }
.mc-pp-checklist__items code { font-size: 11px; padding: 1px 4px; background: #f1f5f9; border-radius: 3px; color: #1e293b; }

/* Datos de muestra: aviso seguridad */
.mc-pp-safety {
    margin-top: 18px;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    color: #1e3a8a; font-size: 12.5px; line-height: 1.55;
}
.mc-pp-safety svg { flex-shrink: 0; margin-top: 2px; color: #1d4ed8; }
.mc-pp-safety code { font-size: 11.5px; padding: 1px 4px; background: #dbeafe; border-radius: 3px; color: #1e3a8a; }
.mc-pp-safety strong { font-weight: 700; }

@media (max-width: 640px) {
    .mc-pp-grid { grid-template-columns: 1fr; }
    .mc-pp-controls { flex-direction: column; align-items: stretch; }
    .mc-pp-controls__group { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   MI CONSULTORIO — Workspace overlay (mc-)
   Card-based settings selector (distinct from patient expediente).
   ═══════════════════════════════════════════════════════════════ */

/* Override page width when in workspace mode */
.mc-workspace { max-width: 1100px; }

/* Utility spacing — replaces residual inline margin styles inside Mi Consultorio */
.mc-mt-sm { margin-top: .5rem; }
.mc-mt-md { margin-top: 1rem; }
.mc-mb-sm { margin-bottom: .6rem; }
.mc-mb-md { margin-bottom: .75rem; }

/* ── Helpers ─────────────────────────────────────────────────── */
.mc-progress-fill-0   { width: 0%; }
.mc-progress-fill-14  { width: 14%; }
.mc-progress-fill-29  { width: 29%; }
.mc-progress-fill-43  { width: 43%; }
.mc-progress-fill-57  { width: 57%; }
.mc-progress-fill-71  { width: 71%; }
.mc-progress-fill-86  { width: 86%; }
.mc-progress-fill-100 { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────── */
.mc-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 1.6rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(25,156,130,.10), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(59,130,246,.06), transparent 55%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.mc-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #199c82, #3b82f6 50%, #8b5cf6);
}
.mc-hero__avatar {
    width: 78px; height: 78px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15,23,42,.05);
    color: var(--primary);
    flex-shrink: 0;
}
.mc-hero__avatar img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mc-hero__avatar svg { width: 30px; height: 30px; opacity: .7; }
.mc-hero__main { min-width: 0; }
.mc-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    font-family: var(--font-family);
}
.mc-hero__eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.18);
}
.mc-hero__title {
    margin: .55rem 0 .35rem;
    font-size: 1.45rem; font-weight: 700;
    color: var(--text-primary); letter-spacing: -.02em;
    font-family: var(--font-family);
    line-height: 1.25;
}
.mc-hero__title span { color: var(--primary); }
.mc-hero__subtitle {
    margin: 0 0 .7rem;
    font-size: .82rem; color: var(--text-secondary);
    line-height: 1.5; max-width: 620px;
    font-family: var(--font-family);
}
.mc-hero__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.mc-hero__chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-light);
    font-size: .72rem; font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-family);
}
.mc-hero__chip--accent {
    background: var(--primary-bg);
    border-color: rgba(25,156,130,.18);
    color: var(--primary-dark);
}
.mc-hero__progress {
    flex-shrink: 0;
    min-width: 180px;
    padding: .85rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.mc-hero__progress-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: .5rem;
}
.mc-hero__progress-label {
    font-size: .7rem; font-weight: 700;
    color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase;
    font-family: var(--font-family);
}
.mc-hero__progress-value {
    font-size: 1.05rem; font-weight: 700;
    color: var(--primary);
    font-family: var(--font-family);
}
.mc-hero__progress-bar {
    height: 6px; border-radius: 999px;
    background: var(--border-light);
    overflow: hidden;
}
.mc-hero__progress-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, #199c82, #3b82f6);
    border-radius: inherit;
    transition: width 400ms cubic-bezier(.4,0,.2,1);
}
.mc-hero__progress-note {
    margin: .5rem 0 0;
    font-size: .7rem; color: var(--text-muted);
    font-family: var(--font-family);
}

/* ── Selector head ───────────────────────────────────────────── */
.mc-selector { display: flex; flex-direction: column; gap: .85rem; }
.mc-selector__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mc-selector__title {
    margin: 0 0 .15rem;
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-primary); letter-spacing: -.01em;
    font-family: var(--font-family);
}
.mc-selector__desc {
    margin: 0;
    font-size: .8rem; color: var(--text-secondary);
    font-family: var(--font-family);
}

/* ── Settings cards grid — minimalista premium ────────────────
   Inspirado en panels de configuración tipo Linear / Stripe:
   cards limpias, sin saturación cromática, jerarquía por tipografía
   y micro-acento de color en el dot del icono.
*/
.mc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.mc-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "icon  title"
        "icon  desc"
        "sum   sum"
        "foot  foot";
    column-gap: .85rem;
    row-gap: .15rem;
    padding: 1.05rem 1.15rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    font-family: var(--font-family);
    color: var(--text-primary);
    min-height: 148px;
}
.mc-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.03);
    transform: translateY(-1px);
}
.mc-card:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.14);
}

/* Tone variations — sólo definen el acento del dot del icono y del status ok */
.mc-card--teal   { --card-accent: #199c82; }
.mc-card--indigo { --card-accent: #6366f1; }
.mc-card--amber  { --card-accent: #f59e0b; }
.mc-card--rose   { --card-accent: #f43f5e; }
.mc-card--violet { --card-accent: #8b5cf6; }
.mc-card--sky    { --card-accent: #0ea5e9; }
.mc-card--mint   { --card-accent: #14b8a6; }

/* Icono — fondo neutro, con un mini-dot de acento (no cuadro coloreado) */
.mc-card__icon {
    position: relative;
    grid-area: icon;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    align-self: start;
    justify-self: start;
    margin-top: 1px;
    transition: color var(--transition), background var(--transition);
}
.mc-card__icon svg { width: 17px; height: 17px; }
.mc-card__icon::after {
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--card-accent, var(--primary));
    border: 1.5px solid var(--bg-card);
    opacity: .85;
}
.mc-card:hover .mc-card__icon { color: var(--text-primary); background: #f1f5f9; }

/* Las clases tonales del icono ya no aplican fondo coloreado — quedan neutras.
   Se mantienen como hooks por compatibilidad con el markup existente. */
.mc-card__icon--teal,
.mc-card__icon--indigo,
.mc-card__icon--amber,
.mc-card__icon--rose,
.mc-card__icon--violet,
.mc-card__icon--sky,
.mc-card__icon--mint { background: var(--bg-card-hover); color: var(--text-secondary); }

/* Layout interno mediante grid-areas — sin div main extra */
.mc-card__main { display: contents; }
.mc-card__title {
    grid-area: title;
    font-size: .9rem; font-weight: 650;
    color: var(--text-primary); letter-spacing: -.01em;
    line-height: 1.3;
}
.mc-card__desc {
    grid-area: desc;
    margin-top: .2rem;
    font-size: .76rem; color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Resumen — texto simple sin caja, separado por una línea sutil */
.mc-card__summary {
    grid-area: sum;
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border-light);
    font-size: .73rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Footer — status a la izquierda, chevron a la derecha */
.mc-card__footer {
    grid-area: foot;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: .65rem;
    padding-top: 0;
    border-top: none;
}

/* Status — pill ultra sutil: solo dot + texto, sin background fuerte */
.mc-card__status {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0;
    font-size: .7rem; font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--text-secondary);
}
.mc-card__status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.mc-card__status svg { display: none; } /* iconitos del status — el dot ya comunica */
.mc-card__status--ok      { color: #16a34a; }
.mc-card__status--warning { color: #c2410c; }
.mc-card__status--info    { color: #2563eb; }
.mc-card__status--muted   { color: var(--text-muted); }

/* Chevron — sólo el glifo, sin cápsula. Vive dentro del footer. */
.mc-card__chev {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: transform var(--transition), color var(--transition);
    flex-shrink: 0;
}
.mc-card__chev svg { width: 15px; height: 15px; }
.mc-card:hover .mc-card__chev {
    color: var(--text-primary);
    transform: translateX(2px);
}

/* ── Detail view: back bar / breadcrumb ──────────────────────── */
.mc-detail { display: flex; flex-direction: column; gap: 1rem; }
.mc-detail__bar {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding: .55rem .75rem .55rem .55rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.03);
    font-family: var(--font-family);
}
.mc-detail__back {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .75rem;
    border-radius: 9px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.mc-detail__back:hover {
    background: var(--primary-bg);
    border-color: rgba(25,156,130,.25);
    color: var(--primary-dark);
}
.mc-detail__back:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25,156,130,.18);
}
.mc-detail__crumb {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; color: var(--text-muted);
    min-width: 0; flex: 1;
}
.mc-detail__crumb-root { color: var(--text-muted); }
.mc-detail__crumb-sep  { color: var(--text-muted); opacity: .6; }
.mc-detail__crumb strong {
    color: var(--text-primary);
    font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-card,
    .mc-card__chev,
    .mc-card::before,
    .mc-detail__back,
    .mc-hero__progress-fill {
        transition: none !important;
    }
    .mc-card:hover { transform: none; }
    .mc-card:hover .mc-card__chev { transform: none; }
}

/* ── Responsive: tablet landscape & laptop ───────────────────── */
@media (max-width: 1024px) {
    .mc-workspace { max-width: 100%; }
    .mc-hero { grid-template-columns: auto 1fr; }
    .mc-hero__progress { grid-column: 1 / -1; }
    .mc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Responsive: tablet portrait & móvil grande ──────────────── */
@media (max-width: 768px) {
    .mc-hero {
        grid-template-columns: 1fr;
        padding: 1.1rem 1.1rem;
        text-align: left;
    }
    .mc-hero__avatar { width: 60px; height: 60px; border-radius: 14px; }
    .mc-hero__avatar svg { width: 24px; height: 24px; }
    .mc-hero__title { font-size: 1.2rem; }
    .mc-hero__subtitle { font-size: .78rem; }
    .mc-hero__progress { min-width: 0; padding: .7rem .8rem; }
    .mc-selector__head { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .mc-cards { gap: .7rem; }
    .mc-detail__bar { padding: .5rem; gap: .55rem; }
    .mc-detail__crumb { font-size: .74rem; flex-basis: 100%; }
}

/* ── Responsive: móvil ───────────────────────────────────────── */
@media (max-width: 560px) {
    .mc-cards { grid-template-columns: 1fr; }
    .mc-card {
        padding: .95rem 1rem .85rem;
        min-height: 0;
    }
    .mc-card__icon { width: 34px; height: 34px; border-radius: 9px; }
    .mc-card__icon svg { width: 16px; height: 16px; }
    .mc-card__summary { font-size: .7rem; }
    .mc-hero { padding: 1rem; gap: 1rem; }
    .mc-hero__title { font-size: 1.1rem; }
    .mc-hero__title span { display: block; }
    .mc-detail__back { width: 100%; justify-content: center; }
    .mc-detail__crumb { justify-content: center; text-align: center; }
}


/* CHANGELOG / AUDITORIA (chl-) */
.chl-filters{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px}
.chl-filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.chl-filter-group{display:flex;flex-direction:column;gap:5px}
.chl-filter-label{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.chl-filter-input,.chl-filter-select{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:.82rem;color:var(--text-primary);background:var(--bg-input);outline:none;transition:border-color .15s;appearance:none;-webkit-appearance:none}
.chl-filter-input:focus,.chl-filter-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.chl-filter-actions{display:flex;gap:8px;align-items:flex-end}
.chl-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-card)}
.chl-table{width:100%;border-collapse:collapse;font-size:.82rem}
.chl-table th{padding:11px 14px;font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;text-align:left;background:var(--bg-card-hover);border-bottom:1px solid var(--border);white-space:nowrap}
.chl-table td{padding:12px 14px;border-bottom:1px solid var(--border-light);vertical-align:top;color:var(--text-secondary)}
.chl-table tr:last-child td{border-bottom:none}
.chl-table tr:hover td{background:var(--bg-card-hover)}
.chl-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.chl-badge--create{background:#f0fdf4;color:#16a34a}
.chl-badge--update{background:#fefce8;color:#854d0e}
.chl-badge--delete{background:#fef2f2;color:#991b1b}
.chl-badge--other{background:#f1f5f9;color:#475569}
.chl-diff-btn{padding:4px 10px;border-radius:var(--radius);border:1.5px solid var(--border);background:transparent;font-size:.75rem;cursor:pointer;color:var(--text-secondary);transition:all .15s;font-family:inherit}
.chl-diff-btn:hover{border-color:var(--primary);color:var(--primary)}
.chl-diff-row td{padding:0}
.chl-diff-inner{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#f8fafc}
.chl-diff-col__label{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin:0 0 6px}
.chl-diff-pre{font-size:.78rem;font-family:monospace;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--text-secondary);max-height:200px;overflow-y:auto}
.chl-empty{text-align:center;padding:60px 24px;color:var(--text-muted)}

/* B4 Responsive */
@media(max-width:1024px){
    .cal-layout{grid-template-columns:1fr}
    .cal-sidebar{position:static}
    .rem-layout{grid-template-columns:1fr}
    .rem-form-panel{position:static}
    .b4-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .b4-page{padding:16px;gap:16px}
    .b4-stats{grid-template-columns:repeat(2,1fr);gap:10px}
    .b4-stat{padding:14px 16px}
    .b4-stat__value{font-size:1.4rem}
    .b4-title{font-size:1.3rem}
    .cal-toolbar{flex-direction:column;align-items:flex-start}
    .med-grid{grid-template-columns:1fr}
    .med-add-form{flex-direction:column}
    .chl-filter-grid{grid-template-columns:1fr 1fr}
    .chl-diff-inner{grid-template-columns:1fr}
    /* rem — tablet/mobile layout */
    .rem-layout{grid-template-columns:1fr;gap:0}
    .rem-hero{padding:0 0 14px;margin-bottom:18px;gap:12px}
    .rem-hero__avatar{width:32px;height:32px;border-radius:7px}
    .rem-hero__title{font-size:1.2rem}
    .rem-hero__action{align-self:stretch;justify-content:center}
    .rem-stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
    .rem-stat{padding:12px}
    .rem-stat__icon-wrap{width:30px;height:30px;border-radius:7px}
    .rem-stat__value{font-size:1.35rem}
    .rem-controls{padding:10px;border-radius:10px}
    .rem-controls__row{gap:8px}
    .rem-search-wrap{min-width:unset;flex:1 1 100%}
    .rem-filter-row{display:flex;width:100%}
    /* Affordance de scroll horizontal: degrada el borde derecho cuando los tabs
       desbordan y aun no se llego al final. JS (initFilterFade) togglea las clases.
       Mask en vez de background-attachment (este ultimo no funciona en iOS). */
    .rem-filter-row--fade:not(.is-end){
        -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
                mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
    }
    .rem-filter-tab{padding:0 10px;font-size:.74rem;flex:1;text-align:center;justify-content:center}
    .rem-prio-chips{gap:5px;width:100%}
    .rem-prio-chip{font-size:.74rem}
    .rem-controls__results{margin-left:0;width:100%;text-align:left;padding-top:4px}
    .rem-controls__hint{display:none}
    .rem-card{padding:12px}
    .rem-card__actions{opacity:1}
    .rem-postpone-menu{right:auto;left:0}
    .rem-field-row{grid-template-columns:1fr;gap:12px}
    .rem-prio-picker{grid-template-columns:repeat(2,1fr)}
    /* form panel — hidden by default on mobile, revealed by FAB */
    .rem-form-panel{display:none;position:static;margin-top:18px;border-radius:10px}
    .rem-form-panel.rem-form-open{display:block;animation:rem-fade-in .2s ease}
    .rem-form-close-btn{
        display:flex;align-items:center;justify-content:center;width:28px;height:28px;
        border-radius:6px;border:1px solid var(--rem-border);background:var(--rem-bg);
        cursor:pointer;color:var(--rem-text-3);transition:background .12s,color .12s;flex-shrink:0;margin-left:auto;
    }
    .rem-form-close-btn:hover{background:var(--rem-bg-soft);color:var(--rem-text)}
    /* FAB visible on mobile */
    .rem-fab{display:flex}
}
@media(max-width:480px){
    .b4-header{flex-direction:column;align-items:flex-start}
    .chl-filter-grid{grid-template-columns:1fr}
    .cal-view-btns{flex-wrap:wrap}
    .b4-stats{grid-template-columns:1fr 1fr}
    .rem-hero{flex-direction:column;align-items:stretch;gap:12px}
    .rem-hero__main{flex-direction:row;align-items:flex-start}
    .rem-stats-grid{grid-template-columns:1fr 1fr;gap:8px}
    .rem-stat{padding:10px 12px;gap:10px}
    .rem-stat__value{font-size:1.25rem}
    .rem-card{padding:10px 12px}
    .rem-card__title{font-size:.85rem}
    .rem-badge{font-size:.68rem;height:17px}
    .rem-form-body{padding:12px 14px 14px}
    .rem-form-hero{padding:12px 14px}
    .rem-prio-picker{grid-template-columns:repeat(4,1fr)}
    .rem-rep-picker{grid-template-columns:1fr 1fr}
    .rem-state-picker{grid-template-columns:1fr 1fr 1fr}
}


/* ==========================================================================
   BLOQUE 5 — Reportes, Exportaciones, Búsqueda Global, Configuración
   Prefix: rpt- (reports), gsearch- (global search), cfg- (config/settings)
   ========================================================================== */

/* ─── Reports ─────────────────────────────────────────────────────────────── */

.rpt-date-filter {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.rpt-date-group { display: flex; flex-direction: column; gap: 4px; }
.rpt-date-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.rpt-date-input { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sidebar); color: var(--text-primary); font-size: .85rem; outline: none; transition: border-color .2s; }
.rpt-date-input:focus { border-color: var(--accent); }

/* KPI row */
.rpt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

.rpt-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.rpt-kpi:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.06); }

.rpt-kpi__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rpt-kpi__icon--blue   { background: rgba(59,130,246,.12); color: #3b82f6; }
.rpt-kpi__icon--green  { background: rgba(16,185,129,.12); color: #10b981; }
.rpt-kpi__icon--purple { background: rgba(139,92,246,.12); color: #8b5cf6; }
.rpt-kpi__icon--amber  { background: rgba(245,158,11,.12); color: #f59e0b; }

.rpt-kpi__body { min-width: 0; }
.rpt-kpi__label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.rpt-kpi__value { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Charts */
.rpt-charts { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-bottom: 16px; }

.rpt-chart-card { padding: 18px 20px; }
.rpt-chart-card--small { }

.rpt-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.rpt-chart-title { font-size: .88rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.rpt-chart-legend { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--text-muted); }
.rpt-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Two-column */
.rpt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.rpt-table-card { padding: 18px 20px; }

/* Top patients */
.rpt-top-list { display: flex; flex-direction: column; gap: 8px; }
.rpt-top-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-sidebar); transition: background .15s; }
.rpt-top-item:hover { background: var(--bg-card-hover); }
.rpt-top-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rpt-top-info { flex: 1; min-width: 0; }
.rpt-top-name { font-size: .82rem; font-weight: 500; color: var(--text-primary); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-top-name:hover { color: var(--accent); }
.rpt-top-sub { font-size: .72rem; color: var(--text-muted); }
.rpt-top-amount { font-size: .78rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }

/* Tipo sesión bars */
.rpt-tipo-list { display: flex; flex-direction: column; gap: 12px; }
.rpt-tipo-item { }
.rpt-tipo-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.rpt-tipo-name { font-size: .82rem; color: var(--text-primary); }
.rpt-tipo-count { font-size: .75rem; color: var(--text-muted); }
.rpt-tipo-bar { height: 6px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.rpt-tipo-fill { height: 100%; background: var(--accent); border-radius: 9999px; transition: width .6s cubic-bezier(.4,0,.2,1); }

/* Visits table */
.rpt-visits-wrap { overflow-x: auto; }
.rpt-visits-table { width: 100%; border-collapse: collapse; }
.rpt-visits-table thead th { padding: 10px 14px; text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--bg-sidebar); white-space: nowrap; }
.rpt-visits-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rpt-visits-table tbody tr:hover td { background: var(--bg-card-hover); }
.rpt-visits-table tbody tr:last-child td { border-bottom: none; }

.rpt-empty { font-size: .82rem; color: var(--text-muted); }

/* Export topbar actions */
.rpt-export-actions { display: flex; align-items: center; gap: 6px; }

/* ─── Global Search ───────────────────────────────────────────────────────── */

/* ── Global Search ─────────────────────────────────────────────────── */
.gsearch-wrap {
    position: relative;
    flex: 1;
    max-width: 400px;
    margin: 0 1rem;
}

.gsearch-input-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0 .75rem;
    height: 38px;
    transition: border-color .18s, box-shadow .18s;
    cursor: text;
}
.gsearch-input-row:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    background: #fff;
}

.gsearch-icon {
    color: var(--text-muted, #9ca3af);
    flex-shrink: 0;
    transition: color .15s;
}
.gsearch-input-row:focus-within .gsearch-icon { color: #3b82f6; }

.gsearch-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: .83rem;
    color: var(--text-primary, #111827);
    min-width: 0;
    font-family: inherit;
}
.gsearch-input::placeholder { color: var(--text-muted, #9ca3af); }

/* Keyboard hint badges */
.gsearch-hints {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}
.gsearch-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 600;
    background: var(--bg, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    color: var(--text-muted, #9ca3af);
    padding: 2px 5px;
    border-radius: 5px;
    font-family: inherit;
    line-height: 1;
    letter-spacing: .02em;
}
.gsearch-input-row:focus-within .gsearch-hints { display: none; }

/* Clear button */
.gsearch-clear {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--border, #e5e7eb);
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    font-size: .7rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s;
    padding: 0;
    line-height: 1;
}
.gsearch-clear:hover { background: #fca5a5; color: #dc2626; }
.gsearch-wrap.has-value .gsearch-clear { display: flex; }
.gsearch-wrap.has-value .gsearch-hints { display: none; }

/* ── Dropdown ──────────────────────────────────────────────────────── */
.gsearch-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
    z-index: var(--z-dropdown, 300);
    overflow: hidden;
    max-height: 440px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.1) transparent;
}
.gsearch-dropdown::-webkit-scrollbar { width: 4px; }
.gsearch-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }

/* Category groups */
.gsearch-group { padding: .35rem 0; }
.gsearch-group + .gsearch-group {
    border-top: 1px solid var(--border, #f3f4f6);
    margin-top: .1rem;
    padding-top: .45rem;
}

.gsearch-group-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem .25rem;
}

.gsearch-group-ico {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gsearch-group-ico--user    { background: rgba(25,156,130,.12); color: #199c82; }
.gsearch-group-ico--clip    { background: rgba(13,148,136,.12); color: #199c82; }
.gsearch-group-ico--pill    { background: rgba(245,158,11,.12); color: #f59e0b; }

.gsearch-group-label {
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted, #9ca3af);
    flex: 1;
}

.gsearch-group-count {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
    background: var(--bg, #f3f4f6);
    border-radius: var(--radius-lg);
    padding: 1px 6px;
}

/* Result items */
.gsearch-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .1s;
    border-radius: 0;
    outline: none;
}
.gsearch-item:hover,
.gsearch-item.is-focused { background: rgba(59,130,246,.05); }

.gsearch-item__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gsearch-item__icon--user { background: rgba(25,156,130,.08); color: #199c82; }
.gsearch-item__icon--clip { background: rgba(13,148,136,.08); color: #199c82; }
.gsearch-item__icon--pill { background: rgba(245,158,11,.08); color: #f59e0b; }

.gsearch-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.gsearch-item__name {
    font-size: .83rem;
    color: var(--text-primary, #111827);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch-item__sub {
    font-size: .74rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badge on items */
.gsearch-badge {
    font-size: .67rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    white-space: nowrap;
}
.gsearch-badge--active   { background: rgba(16,185,129,.12); color: #059669; }
.gsearch-badge--inactive { background: rgba(107,114,128,.1); color: #6b7280; }
.gsearch-badge--default  { background: var(--bg, #f3f4f6); color: var(--text-muted, #6b7280); }

/* Arrow indicator on hover */
.gsearch-item__arrow {
    opacity: 0;
    color: var(--text-muted, #d1d5db);
    flex-shrink: 0;
    transition: opacity .1s, transform .1s;
}
.gsearch-item:hover .gsearch-item__arrow,
.gsearch-item.is-focused .gsearch-item__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Empty / loading / error states */
.gsearch-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    font-size: .82rem;
    color: var(--text-muted, #9ca3af);
    text-align: center;
}
.gsearch-no-results strong { color: var(--text-primary, #374151); }

.gsearch-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 1.25rem;
}
.gsearch-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    opacity: .25;
    animation: gsearchDot .75s ease-in-out infinite;
}
.gsearch-loading span:nth-child(2) { animation-delay: .15s; }
.gsearch-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes gsearchDot { 0%,80%,100%{ opacity:.25; transform:scale(.75); } 40%{ opacity:1; transform:scale(1); } }

/* Hint bar (shown when focused + empty) */
.gsearch-hint-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    font-size: .75rem;
    color: var(--text-muted, #9ca3af);
    border-top: 1px solid var(--border, #f3f4f6);
    background: var(--bg, #f9fafb);
}
.gsearch-hint-bar svg { flex-shrink: 0; }

/* ── Responsive search ─────────────────────────────────────────────
 * Bajo 1024px el wrap solo aparece en overlay (.topbar.is-search-open),
 * libre de cap de ancho. Los hints (Ctrl/K) se ocultan: irrelevantes en
 * touch. El input crece a 40px para asegurar comodidad táctil.
 */
@media (max-width: 1023px) {
    .gsearch-wrap        { max-width: none; flex: 1 1 auto; min-width: 0; margin: 0; }
    .gsearch-hints       { display: none !important; }
    .gsearch-input       { font-size: .9rem; }
    .gsearch-input::placeholder { font-size: .85rem; }
    .gsearch-input-row   { height: 40px; padding: 0 .7rem; }
}
@media (max-width: 480px) {
    .gsearch-input-row   { padding: 0 .6rem; }
    /* Dropdown seguro en móvil: ancho propio sin desbordar el viewport. */
    .gsearch-dropdown {
        left: 0;
        right: 0;
        width: auto;
        max-width: calc(100vw - 20px);
        min-width: 0;
    }
}

/* ─── Settings / Configuración ────────────────────────────────────────────── */

.cfg-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 20px;
  font-size: .85rem; font-weight: 500;
}
.cfg-alert--success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #059669; }

.cfg-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }

/* Sidebar nav */
.cfg-nav {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  position: sticky;
  top: 24px;
}

.cfg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.cfg-nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.cfg-nav-item.active { background: var(--accent); color: #fff; }
.cfg-nav-item svg { flex-shrink: 0; }

/* Panel */
.cfg-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 400px;
  overflow: hidden;
}

.cfg-section { padding: 24px; }

.cfg-section-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cfg-section-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.cfg-section-sub { font-size: .82rem; color: var(--text-muted); margin: 0; }

/* Form */
.cfg-form { }
.cfg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 20px; }
.cfg-field { display: flex; flex-direction: column; gap: 6px; }
.cfg-field--full { grid-column: 1 / -1; }
.cfg-label { font-size: .76rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }

.cfg-input, .cfg-select, .cfg-textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-sidebar);
  color: var(--text-primary);
  font-size: .85rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.cfg-input:focus, .cfg-select:focus, .cfg-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.cfg-textarea { resize: vertical; }
.cfg-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.cfg-form-actions { display: flex; gap: 10px; padding-top: 4px; }

/* Color field */
.cfg-field--color { }
.cfg-color-wrap { display: flex; align-items: center; gap: 8px; }
.cfg-color-input { width: 40px; height: 38px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--bg-sidebar); flex-shrink: 0; }
.cfg-color-text { flex: 1; }

/* Logo upload */
.cfg-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cfg-logo-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cfg-logo-label { font-size: .76rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px 0; }
.cfg-logo-preview { display: block; width: 100%; height: 80px; object-fit: contain; padding: 10px 14px; }
.cfg-logo-placeholder { display: flex; align-items: center; justify-content: center; height: 80px; background: var(--bg-sidebar); }
.cfg-logo-form { padding: 8px 14px 12px; }
.cfg-logo-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: .78rem; color: var(--text-secondary); cursor: pointer; transition: background .15s; }
.cfg-logo-upload-btn:hover { background: var(--bg-card-hover); }

/* Divider */
.cfg-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* Info banner */
.cfg-info-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.2);
  font-size: .82rem; color: var(--text-secondary); margin-bottom: 20px;
}
.cfg-info-banner svg { flex-shrink: 0; margin-top: 1px; color: #3b82f6; }
.cfg-info-banner code { background: var(--border); padding: 1px 5px; border-radius: 4px; font-size: .78rem; }

/* Maintenance action cards */
.cfg-action-grid { display: flex; flex-direction: column; gap: 10px; }
.cfg-action-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-sidebar); transition: border-color .15s;
}
.cfg-action-card:hover { border-color: var(--accent); }
.cfg-action-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cfg-action-icon--blue   { background: rgba(59,130,246,.12); color: #3b82f6; }
.cfg-action-icon--purple { background: rgba(139,92,246,.12); color: #8b5cf6; }
.cfg-action-icon--teal   { background: rgba(20,184,166,.12); color: #199c82; }
.cfg-action-icon--amber  { background: rgba(245,158,11,.12); color: #f59e0b; }
.cfg-action-title { font-size: .85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cfg-action-sub { font-size: .77rem; color: var(--text-muted); }

/* Logs */
.cfg-logs-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cfg-logs-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-height: 540px; overflow-y: auto; }
.cfg-log-item {
  display: grid;
  grid-template-columns: 70px 80px 120px 1fr 100px;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-size: .77rem;
  transition: background .1s;
}
.cfg-log-item:last-child { border-bottom: none; }
.cfg-log-item:hover { background: var(--bg-card-hover); }
.cfg-log-level { font-weight: 700; font-size: .68rem; padding: 2px 6px; border-radius: 9999px; text-align: center; }
.cfg-log--debug    .cfg-log-level { background: var(--border); color: var(--text-muted); }
.cfg-log--info     .cfg-log-level { background: rgba(59,130,246,.12); color: #2563eb; }
.cfg-log--warning  .cfg-log-level { background: rgba(245,158,11,.12); color: #b45309; }
.cfg-log--error    .cfg-log-level { background: rgba(239,68,68,.12); color: #dc2626; }
.cfg-log--critical .cfg-log-level { background: rgba(139,92,246,.12); color: #7c3aed; }
.cfg-log-time   { color: var(--text-muted); white-space: nowrap; }
.cfg-log-module { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-log-msg    { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-log-user   { color: var(--text-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Exports grid */
.cfg-export-grid { display: flex; flex-direction: column; gap: 10px; }
.cfg-export-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-sidebar); transition: border-color .15s;
}
.cfg-export-card:hover { border-color: var(--accent); }
.cfg-export-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cfg-export-title { font-size: .85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cfg-export-sub { font-size: .77rem; color: var(--text-muted); }
.cfg-export-btn { margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* About */
.cfg-about-grid { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cfg-about-row { display: flex; gap: 20px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cfg-about-row:last-child { border-bottom: none; }
.cfg-about-row:nth-child(even) { background: var(--bg-sidebar); }
.cfg-about-key { font-size: .78rem; font-weight: 600; color: var(--text-muted); width: 160px; flex-shrink: 0; }
.cfg-about-val { font-size: .82rem; color: var(--text-primary); }

.cfg-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: .85rem; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .rpt-kpis { grid-template-columns: repeat(2, 1fr); }
  .rpt-charts { grid-template-columns: 1fr; }
  .rpt-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .cfg-layout { grid-template-columns: 1fr; }
  .cfg-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .cfg-nav-item { padding: 7px 10px; font-size: .78rem; }
}

@media (max-width: 768px) {
  .rpt-kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rpt-date-filter { padding: 12px 14px; }
  .cfg-form-grid { grid-template-columns: 1fr; }
  .cfg-action-card { flex-wrap: wrap; }
  .cfg-export-card { flex-wrap: wrap; }
  .cfg-log-item { grid-template-columns: 60px 1fr; }
  .cfg-log-module, .cfg-log-time, .cfg-log-user { display: none; }
  .rpt-export-actions { gap: 4px; }
  .rpt-export-actions .desktop-text { display: none; }
}

@media (max-width: 480px) {
  .rpt-kpis { grid-template-columns: 1fr; }
  .rpt-kpi__value { font-size: 1.1rem; }
}


/* ==========================================================================
   NAV GROUPS — Sidebar colapsable por módulo
   ========================================================================== */

.nav-item--standalone {
  margin: 2px 8px 4px;
  border-radius: 8px;
}

/* Grupo contenedor */
.nav-group {
  margin-bottom: 2px;
}

/* Cabecera del grupo (botón toggle) */
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px 9px 14px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  margin: 1px 6px;
  width: calc(100% - 12px);
  color: var(--text-muted);
  transition: background .15s, color .15s;
  user-select: none;
}

.nav-group-header:hover {
  background: rgba(255,255,255,.05);
  color: var(--text-secondary);
}

.nav-group-header.open {
  color: var(--text-primary);
}

.nav-group-header__left {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nav-group-chevron {
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  opacity: .5;
}

.nav-group-header.open .nav-group-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Items dentro del grupo */
.nav-group-items {
  padding: 2px 6px 4px 6px;
  overflow: hidden;
}

/* Subitems con sangría leve */
.nav-item--sub {
  padding: 8px 12px 8px 14px;
  border-radius: 8px;
  font-size: .82rem;
}

.nav-item--sub .nav-item__icon svg {
  width: 14px;
  height: 14px;
}

/* Transición slide Alpine.js */
.nav-slide-enter { transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.nav-slide-enter-start { max-height: 0; opacity: 0; }
.nav-slide-enter-end { max-height: 400px; opacity: 1; }
.nav-slide-leave { transition: max-height .18s cubic-bezier(.4,0,.2,1), opacity .15s ease; }
.nav-slide-leave-start { max-height: 400px; opacity: 1; }
.nav-slide-leave-end { max-height: 0; opacity: 0; }


/* ==========================================================================
   SNAV — Sidebar navigation (legacy style)
   Prefix: snav-
   ========================================================================== */

/* ─── Standalone item (Dashboard) ──────────────────────────────────────── */

.snav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin: 2px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--sidebar-text, rgba(255,255,255,.65));
  font-size: .855rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.snav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.snav-item.active { background: rgba(255,255,255,.12); color: #fff; }

.snav-item__ico {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.snav-item:hover .snav-item__ico,
.snav-item.active .snav-item__ico { background: rgba(255,255,255,.16); }

.snav-item__label { flex: 1; }

/* ─── Module (collapsible group) ────────────────────────────────────────── */

.snav-module { margin: 2px 0; }

.snav-module__hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sidebar-text, rgba(255,255,255,.65));
  font-size: .855rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  text-align: left;
}
.snav-module__hdr:hover { background: rgba(255,255,255,.07); color: #fff; }
.snav-module__hdr.open { background: rgba(255,255,255,.1); color: #fff; }

.snav-module__ico {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.snav-module__hdr:hover .snav-module__ico,
.snav-module__hdr.open  .snav-module__ico { background: rgba(255,255,255,.16); }

.snav-module__label { flex: 1; }

.snav-module__right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto;
}

/* Chevron rotates when open */
.snav-chevron { transition: transform .22s cubic-bezier(.4,0,.2,1); opacity: .55; }
.snav-module__hdr.open .snav-chevron { transform: rotate(90deg); opacity: 1; }

/* Sub-items */
.snav-module__items { padding: 2px 8px 4px 8px; }

.snav-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 16px;
  border-radius: 8px;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.snav-sub:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.snav-sub.active { background: rgba(255,255,255,.1); color: #fff; }
.snav-sub svg { flex-shrink: 0; opacity: .6; }
.snav-sub.active svg { opacity: 1; }

/* ─── Badges ────────────────────────────────────────────────────────────── */

.snav-badge {
  min-width: 20px; height: 20px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  font-size: .68rem; font-weight: 700;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  line-height: 1;
}
.snav-badge--accent {
  background: #ef4444;
  color: #fff;
}

/* ─── Flat section labels ────────────────────────────────────────────────── */

.snav-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  padding: 14px 20px 6px;
  user-select: none;
}

/* ─── Alpine transitions ────────────────────────────────────────────────── */

.snav-enter         { transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease; overflow: hidden; }
.snav-enter-start   { max-height: 0; opacity: 0; }
.snav-enter-end     { max-height: 500px; opacity: 1; }
.snav-leave         { transition: max-height .18s cubic-bezier(.4,0,.2,1), opacity .14s ease; overflow: hidden; }
.snav-leave-start   { max-height: 500px; opacity: 1; }
.snav-leave-end     { max-height: 0; opacity: 0; }

/* ─── Override old nav-group/nav-item classes (neutralize) ──────────────── */

.nav-group, .nav-group-header, .nav-group-items,
.nav-item, .nav-item--sub, .nav-item--standalone,
.nav-section, .nav-section-title,
.nav-group-chevron { all: unset; }



/* app.blade.php — Sidebar navigation (snav2) */

/* Container */
.snav2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .5rem .6rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.snav2:hover {
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.snav2::-webkit-scrollbar {
  width: 3px;
}
.snav2::-webkit-scrollbar-track {
  background: transparent;
}
.snav2::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.snav2:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
}

/* ── Section label ───────────────────────────────────────────── */
.snav2-section {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  padding: 1rem .6rem .4rem;
  user-select: none;
}

/* ── Badge ───────────────────────────────────────────────────── */
.snav2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: .1rem .45rem;
  border-radius: 10px;
  background: rgba(var(--primary-rgb),.15);
  color: var(--sidebar-accent);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.snav2-badge--accent {
  background: rgba(16,185,129,.15);
  color: #6ee7b7;
}

/* ── Flat item ───────────────────────────────────────────────── */
.snav2-flat {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  position: relative;
}
.snav2-flat:hover {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
}
.snav2-flat.active {
  background: rgba(var(--primary-rgb),.12);
  color: var(--sidebar-accent);
  font-weight: 600;
}
.snav2-flat__ico {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s;
}
.snav2-flat.active .snav2-flat__ico {
  color: var(--sidebar-accent);
}
.snav2-flat__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Flat item STACKED (label + hint) ────────────────────────────
   Fase 2 (privacidad Super Admin): la entrada "Consultorios" es la UNICA
   puerta clinica del admin. Un sublabel discreto aclara que el acceso al
   expediente es en modo soporte (break-glass), sin saturar la nav. */
.snav2-flat--stacked { align-items: flex-start; }
.snav2-flat--stacked .snav2-flat__ico { margin-top: 2px; }
.snav2-flat--stacked .snav2-flat__label {
  white-space: normal;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 1px;
}
.snav2-flat__hint {
  font-size: .66rem;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snav2-flat--stacked:hover .snav2-flat__hint { color: rgba(255,255,255,.6); }
.snav2-flat--stacked.active .snav2-flat__hint { color: var(--sidebar-accent); opacity: .85; }
/* Colapsado (solo desktop): vuelve a tile centrado icon-only. */
.sidebar-collapsed .snav2-flat--stacked { align-items: center; }
.sidebar-collapsed .snav2-flat--stacked .snav2-flat__ico { margin-top: 0; }

/* ── Accordion group ─────────────────────────────────────────── */
.snav2-group {
  border-radius: 8px;
}

/* Group header button */
.snav2-group__hdr {
  all: unset;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .65rem;
  border-radius: 8px;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.snav2-group__hdr:hover {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
}
.snav2-group__hdr.is-active {
  color: var(--sidebar-accent);
  font-weight: 600;
}
.snav2-group__hdr.is-open {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
}
.snav2-group__hdr.is-active:not(.is-open)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  border-radius: 0 2px 2px 0;
  background: var(--sidebar-accent);
}

/* Group icon box */
.snav2-group__ico {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s;
}
.snav2-group__hdr.is-active .snav2-group__ico {
  color: var(--sidebar-accent);
}

/* Group label */
.snav2-group__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta (badge + chevron) */
.snav2-group__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Chevron rotation */
.snav2-chevron {
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease;
  opacity: .45;
  flex-shrink: 0;
}
.snav2-group__hdr.is-open .snav2-chevron {
  transform: rotate(180deg);
  opacity: .9;
}

/* Group body (sub-items container) */
.snav2-group__body {
  padding-left: .6rem;
  margin-left: 1.1rem;
  border-left: 1.5px solid rgba(255,255,255,.06);
  overflow: hidden;
  transition: border-left-color .28s ease;
}
.snav2-group__hdr.is-open + .snav2-group__body {
  border-left-color: rgba(165, 180, 252, .22);
}

/* ── Sub-items ───────────────────────────────────────────────── */
.snav2-sub {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .65rem;
  font-size: .76rem;
  font-weight: 450;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  border-radius: 6px;
  transition: all .12s;
  position: relative;
}
.snav2-sub svg {
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .12s;
}
.snav2-sub:hover {
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
}
.snav2-sub:hover svg {
  opacity: .75;
}
.snav2-sub.active {
  color: var(--sidebar-accent);
  font-weight: 600;
}
.snav2-sub.active svg {
  opacity: 1;
  color: var(--sidebar-accent);
}

/* ── Alpine slide transitions ────────────────────────────────── */
/* Enter: spring easing — expansión suave con rebote sutil */
.snav2-slide-enter {
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1),
              max-height .32s cubic-bezier(0.16, 1, 0.3, 1),
              transform .28s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
  overflow: hidden;
}
.snav2-slide-enter-from {
  opacity: 0;
  max-height: 0;
  transform: translateY(-8px);
}
.snav2-slide-enter-to {
  opacity: 1;
  max-height: 220px;
  transform: translateY(0);
}
/* Leave: snappy, más rápida que la apertura */
.snav2-slide-leave {
  transition: opacity .16s ease-in,
              max-height .2s ease-in,
              transform .16s ease-in;
  transform-origin: top center;
  overflow: hidden;
}
.snav2-slide-leave-from {
  opacity: 1;
  max-height: 220px;
  transform: translateY(0);
}
.snav2-slide-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-5px);
}

/* ── Sub-item stagger (se resetea cada vez que Alpine muestra el grupo) ── */
@keyframes snav2-item-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.snav2-group__body .snav2-sub {
  animation: snav2-item-in .22s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.snav2-group__body .snav2-sub:nth-child(1) { animation-delay: 60ms; }
.snav2-group__body .snav2-sub:nth-child(2) { animation-delay: 95ms; }
.snav2-group__body .snav2-sub:nth-child(3) { animation-delay: 130ms; }
.snav2-group__body .snav2-sub:nth-child(4) { animation-delay: 165ms; }

/* ── Responsive: mobile sidebar keeps snav2 scrollable ────────── */
@media (max-width: 768px) {
  .snav2 {
    padding: .4rem .5rem;
  }
  .snav2-flat,
  .snav2-group__hdr {
    padding: .6rem .65rem;
    font-size: .82rem;
  }
  .snav2-sub {
    padding: .45rem .65rem;
    font-size: .78rem;
  }
}


/* =================================================================
   CHL2 — Changelog / Auditoria rediseno
   Prefix: chl2-
   ================================================================= */

@keyframes chl2-shimmer {
  0%   { background-position: -700px 0; }
  100% { background-position: 700px 0; }
}
@keyframes chl2-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chl2-wrap { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }

/* Hero */
.chl2-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--primary) 6%, var(--bg-card)) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 28px; position: relative; overflow: hidden;
}
.chl2-hero::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 8%, transparent); pointer-events: none;
}
.chl2-hero__text { display: flex; flex-direction: column; gap: 6px; }
.chl2-hero__title {
  font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px; margin: 0;
}
.chl2-hero__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary); flex-shrink: 0;
}
.chl2-hero__sub { font-size: .83rem; color: var(--text-muted); margin: 0; }
.chl2-hero__badge { display: flex; align-items: center; flex-shrink: 0; }
.chl2-hero__filtered-count {
  font-size: .85rem; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 5px 14px; white-space: nowrap;
}
.chl2-hero__filtered-label { font-weight: 400; color: var(--primary); margin-left: 4px; }

/* KPI Stats */
/* minmax(0,1fr): permite que las columnas se encojan bajo el min-content de
   la tarjeta (labels largas tipo "ACTUALIZACIONES") — con 1fr plano el track
   no baja del min-content y la 2ª columna se recortaba en móvil (≤430). */
.chl2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.chl2-stat {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid transparent;
  border-radius: var(--radius-lg); padding: 16px 18px; transition: box-shadow .18s, transform .18s;
}
.chl2-stat:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.chl2-stat--total  { border-left-color: #199c82; }
.chl2-stat--create { border-left-color: #22c55e; }
.chl2-stat--update { border-left-color: #f59e0b; }
.chl2-stat--delete { border-left-color: #ef4444; }
.chl2-stat__ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chl2-stat--total  .chl2-stat__ico { background: rgba(25,156,130,.12); color: #199c82; }
.chl2-stat--create .chl2-stat__ico { background: rgba(34,197,94,.12);  color: #22c55e; }
.chl2-stat--update .chl2-stat__ico { background: rgba(245,158,11,.12); color: #f59e0b; }
.chl2-stat--delete .chl2-stat__ico { background: rgba(239,68,68,.12);  color: #ef4444; }
.chl2-stat__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chl2-stat__val { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.chl2-stat__lbl { font-size: .73rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }

/* Filter card */
.chl2-filter-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 24px;
}
.chl2-filter-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.chl2-filter-header__title {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .07em;
}
.chl2-filter-header__count {
  margin-left: auto;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-lg);
}
.chl2-filter-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 140px 140px auto;
  gap: 12px; align-items: end;
}
.chl2-filter-group { display: flex; flex-direction: column; gap: 6px; }
.chl2-filter-label { font-size: .73rem; font-weight: 600; color: var(--text-secondary); letter-spacing: .02em; }

.chl2-select-wrap { position: relative; }
.chl2-select {
  width: 100%; appearance: none; background: var(--bg-card-hover);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 32px 8px 12px; font-size: .84rem; color: var(--text-primary);
  height: 38px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.chl2-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.chl2-select-arrow {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.chl2-input-wrap { position: relative; }
.chl2-input-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.chl2-input {
  width: 100%; box-sizing: border-box; background: var(--bg-card-hover);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-size: .84rem; color: var(--text-primary);
  height: 38px; transition: border-color .15s, box-shadow .15s;
}
.chl2-input--icon { padding-left: 32px; }
.chl2-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.chl2-input::placeholder { color: var(--text-muted); font-size: .82rem; }
.chl2-filter-actions { flex-direction: row !important; align-items: center; gap: 8px; }

.chl2-btn-apply {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 18px; height: 38px; background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius); font-size: .84rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.chl2-btn-apply:hover {
  background: color-mix(in srgb, var(--primary) 85%, #000);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translateY(-1px);
}
.chl2-btn-clear {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 14px; height: 38px; background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .82rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s; white-space: nowrap;
}
.chl2-btn-clear:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.chl2-active-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.chl2-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: .76rem;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3px 12px;
}
.chl2-pill strong { color: var(--text-primary); }
.chl2-pill--create { border-color: rgba(34,197,94,.3); color: #16a34a; background: rgba(34,197,94,.07); }
.chl2-pill--update { border-color: rgba(245,158,11,.3); color: #b45309; background: rgba(245,158,11,.07); }
.chl2-pill--delete { border-color: rgba(239,68,68,.3); color: #dc2626; background: rgba(239,68,68,.07); }

/* Skeleton */
.chl2-skeleton-wrap {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 8px 0; overflow: hidden;
}
.chl2-skel-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); position: relative;
}
.chl2-skel-row:last-child { border-bottom: none; }
.chl2-skel-bar--accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 40%, transparent) 50%, var(--border) 75%);
  background-size: 700px 100%;
  animation: chl2-shimmer 1.4s infinite linear;
}
.chl2-skel-cell {
  height: 12px; flex-shrink: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 40%, transparent) 50%, var(--border) 75%);
  background-size: 700px 100%;
  animation: chl2-shimmer 1.4s infinite linear;
}

/* Table card */
.chl2-table-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.chl2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chl2-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.chl2-thead { background: var(--bg-card-hover); }
.chl2-th {
  padding: 12px 16px; text-align: left; font-size: .71rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
.chl2-th--date { width: 100px; }
.chl2-th--desc { min-width: 200px; }
.chl2-th--ip   { width: 100px; }
.chl2-th--actions { width: 130px; }
.chl2-tbody { position: relative; }
.chl2-row { border-bottom: 1px solid var(--border); transition: background .15s; }
.chl2-row:hover { background: var(--bg-card-hover); }
.chl2-tbody:last-child .chl2-row { border-bottom: none; }
.chl2-row td:first-child { padding-left: 22px; position: relative; }
.chl2-row td:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.chl2-row--create td:first-child::before { background: #22c55e; }
.chl2-row--update td:first-child::before { background: #f59e0b; }
.chl2-row--delete td:first-child::before { background: #ef4444; }
.chl2-row--other  td:first-child::before { background: #94a3b8; }
.chl2-td { padding: 13px 16px; color: var(--text-secondary); vertical-align: middle; }
.chl2-td--date { white-space: nowrap; }
.chl2-td--desc { max-width: 280px; }
.chl2-td--ip   { white-space: nowrap; }
.chl2-td--actions { text-align: right; }
.chl2-date-main { display: block; font-size: .82rem; font-weight: 600; color: var(--text-primary); }
.chl2-date-time { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
.chl2-user { display: flex; align-items: center; gap: 9px; }
.chl2-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0; color: #fff;
}
.chl2-avatar--create { background: #22c55e; }
.chl2-avatar--update { background: #f59e0b; }
.chl2-avatar--delete { background: #ef4444; }
.chl2-avatar--other  { background: #94a3b8; }
.chl2-user__name { font-weight: 500; color: var(--text-primary); font-size: .83rem; white-space: nowrap; }
.chl2-code {
  font-family: "SF Mono","Fira Code",ui-monospace,monospace;
  font-size: .72rem; background: var(--bg-card-hover); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}
.chl2-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; padding: 3px 10px;
  border-radius: var(--radius-lg); white-space: nowrap; letter-spacing: .02em;
}
.chl2-badge--create { background: rgba(34,197,94,.12);  color: #16a34a; border: 1px solid rgba(34,197,94,.25); }
.chl2-badge--update { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.25); }
.chl2-badge--delete { background: rgba(239,68,68,.12);  color: #dc2626; border: 1px solid rgba(239,68,68,.25); }
.chl2-badge--other  { background: var(--bg-card-hover); color: var(--text-muted); border: 1px solid var(--border); }
.chl2-desc-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .82rem; color: var(--text-secondary); line-height: 1.5;
}
.chl2-ip { font-family: "SF Mono",ui-monospace,monospace; font-size: .72rem; color: var(--text-muted); }

/* Diff button */
.chl2-diff-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: .76rem; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.chl2-diff-btn:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}
.chl2-diff-btn.active { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: var(--primary); color: var(--primary); }

/* Diff expansion */
.chl2-diff-row { background: color-mix(in srgb, var(--primary) 3%, var(--bg-card)); }
.chl2-diff-td { padding: 0 !important; }
.chl2-diff-inner { display: grid; grid-template-columns: 1fr 1fr; }
.chl2-diff-pane { padding: 16px 20px; }
.chl2-diff-pane--before { border-right: 1px solid var(--border); background: rgba(239,68,68,.03); }
.chl2-diff-pane--after  { background: rgba(34,197,94,.03); }
.chl2-diff-pane__hdr {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
}
.chl2-diff-pane--before .chl2-diff-pane__hdr { color: #ef4444; }
.chl2-diff-pane--after  .chl2-diff-pane__hdr { color: #22c55e; }
.chl2-diff-pre {
  font-family: "SF Mono","Fira Code",ui-monospace,monospace;
  font-size: .74rem; line-height: 1.65; color: var(--text-secondary);
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin: 0;
  overflow-x: auto; max-height: 260px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
.chl2-diff-enter      { transition: opacity .2s ease, transform .2s ease; }
.chl2-diff-enter-from { opacity: 0; transform: translateY(-4px); }
.chl2-diff-enter-to   { opacity: 1; transform: translateY(0); }
.chl2-diff-leave      { transition: opacity .15s ease; }
.chl2-diff-leave-from { opacity: 1; }
.chl2-diff-leave-to   { opacity: 0; }

.chl2-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
}
.chl2-pagination__info { font-size: .78rem; color: var(--text-muted); }
.chl2-pagination__info strong { color: var(--text-secondary); font-weight: 700; }
.chl2-pagination__nav { display: flex; align-items: center; gap: 8px; }
.chl2-pagination__page { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.chl2-pagination__page strong { color: var(--text-primary); font-weight: 700; }
.chl2-pagination__btn {
  width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-card-hover);
  color: var(--text-secondary); text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.chl2-pagination__btn:hover:not(.is-disabled) {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}
.chl2-pagination__btn.is-disabled { opacity: .4; cursor: not-allowed; }

/* Empty state */
.chl2-empty {
  text-align: center; padding: 60px 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); animation: chl2-fade-up .4s ease both;
}
.chl2-empty__ico {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--bg-card-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; color: var(--text-muted);
}
.chl2-empty__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.chl2-empty__sub   { font-size: .84rem; color: var(--text-muted); margin: 0; }

[x-cloak] { display: none !important; }

@media (max-width: 1024px) {
  .chl2-stats       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chl2-filter-grid { grid-template-columns: 1fr 1fr 1fr; }
  .chl2-filter-actions { grid-column: span 3; }
}
@media (max-width: 768px) {
  .chl2-hero { flex-direction: column; padding: 18px 20px; }
  .chl2-hero__title { font-size: 1.05rem; }
  .chl2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chl2-filter-grid { grid-template-columns: 1fr 1fr; }
  .chl2-filter-actions { grid-column: span 2; }
  .chl2-diff-inner { grid-template-columns: 1fr; }
  .chl2-diff-pane--before { border-right: none; border-bottom: 1px solid var(--border); }
  .chl2-th--ip, .chl2-td--ip { display: none; }
}
@media (max-width: 480px) {
  .chl2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chl2-stat  { padding: 12px 14px; gap: 10px; }
  .chl2-stat__val { font-size: 1.1rem; }
  .chl2-filter-grid { grid-template-columns: 1fr; }
  .chl2-filter-actions { grid-column: span 1; }
  .chl2-table { min-width: 580px; }
}

/* ── Auto-zoom guard (Regla 8): campos ≥16px en touch/portrait ──────
   iOS Safari auto-zoomea al enfocar campos < 16px. Los filtros del
   módulo son .84rem (~13.4px). En breakpoints táctiles (≤1024px, cubre
   iPad 11"/10" portrait y teléfonos) los subimos a 16px sin tocar el
   viewport meta. Cubre selects, el buscador de usuario y los date-pickers. */
@media (max-width: 1024px) {
  .chl2-input,
  .chl2-select { font-size: 16px; }
}

/* =================================================================
   CFG2 — Settings / Configuracion rediseno
   Prefix: cfg2-
   ================================================================= */

@keyframes cfg2-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* ── Alert ───────────────────────────────────────────────────────── */
.cfg2-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-lg);
  font-size: .84rem; font-weight: 500; margin-bottom: 4px;
  animation: chl2-fade-up .3s ease both;
}
.cfg2-alert--ok {
  background: rgba(34,197,94,.1); color: #15803d;
  border: 1px solid rgba(34,197,94,.25);
}
.cfg2-alert--err {
  background: rgba(239,68,68,.08); color: #b91c1c;
  border: 1px solid rgba(239,68,68,.25);
}
.cfg2-alert__close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; opacity: .6; color: inherit; padding: 2px;
  display: flex; align-items: center;
}
.cfg2-alert__close:hover { opacity: 1; }

/* ── Wrap ─────────────────────────────────────────────────────────── */
.cfg2-wrap { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }

/* ── Layout ──────────────────────────────────────────────────────── */
.cfg2-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Sidenav ─────────────────────────────────────────────────────── */
.cfg2-sidenav {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 20px;
}
.cfg2-sidenav__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.cfg2-sidenav__brand-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cfg2-sidenav__brand-label {
  font-size: .82rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em;
}
.cfg2-sidenav__list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.cfg2-sidenav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text-secondary); transition: background .15s, color .15s;
  position: relative;
}
.cfg2-sidenav__item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.cfg2-sidenav__item.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.cfg2-sidenav__ico {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.cfg2-sidenav__item.is-active .cfg2-sidenav__ico {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
.cfg2-sidenav__item:hover .cfg2-sidenav__ico {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.cfg2-sidenav__texts { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cfg2-sidenav__label { font-size: .83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg2-sidenav__sub   { font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg2-sidenav__item.is-active .cfg2-sidenav__sub { color: color-mix(in srgb, var(--primary) 70%, transparent); }
.cfg2-sidenav__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-left: auto;
}

/* ── Panel wrap ──────────────────────────────────────────────────── */
.cfg2-panel-wrap { position: relative; min-height: 300px; }

/* ── Skeleton ────────────────────────────────────────────────────── */
.cfg2-skel-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 28px 32px; position: absolute; inset: 0;
}
.cfg2-skel-hdr { margin-bottom: 28px; }
.cfg2-skel-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cfg2-skel-field { display: flex; flex-direction: column; }
.cfg2-skel-line {
  background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 40%, transparent) 50%, var(--border) 75%);
  background-size: 600px 100%; animation: cfg2-shimmer 1.3s infinite linear;
}

/* ── Panel ───────────────────────────────────────────────────────── */
.cfg2-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.cfg2-panel__hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 28px; border-bottom: 1px solid var(--border);
  background: var(--bg-card-hover);
}
.cfg2-panel__hdr-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); display: flex; align-items: center; justify-content: center;
}
.cfg2-panel__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.cfg2-panel__sub   { font-size: .78rem; color: var(--text-muted); margin: 0; }

/* ── Section block ───────────────────────────────────────────────── */
.cfg2-section-block {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}
.cfg2-section-block:last-of-type { border-bottom: none; }
.cfg2-section-block__title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin-bottom: 14px;
}
.cfg2-section-block__hint {
  font-size: .81rem; color: var(--text-muted); margin-bottom: 18px; line-height: 1.55;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.cfg2-divider { height: 1px; background: var(--border); margin: 0; }

/* ── Form grid ───────────────────────────────────────────────────── */
.cfg2-form { display: flex; flex-direction: column; }
.cfg2-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.cfg2-field { display: flex; flex-direction: column; gap: 6px; }
.cfg2-field--full { grid-column: span 2; }

/* Label */
.cfg2-label {
  font-size: .75rem; font-weight: 600; color: var(--text-secondary); letter-spacing: .02em;
}

/* Input */
.cfg2-input-wrap { position: relative; }
.cfg2-input-wrap--reveal { position: relative; }
.cfg2-input-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.cfg2-reveal-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 2px; transition: color .15s;
}
.cfg2-reveal-btn:hover { color: var(--text-primary); }
.cfg2-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px;
  font-size: .84rem; color: var(--text-primary); height: 40px;
  transition: border-color .15s, box-shadow .15s;
}
.cfg2-input--ico       { padding-left: 34px; }
.cfg2-input--ico-right { padding-right: 36px; }
.cfg2-input--mono      { font-family: "SF Mono","Fira Code",ui-monospace,monospace; font-size: .8rem; }
.cfg2-input--narrow    { width: 80px; text-align: center; }
.cfg2-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.cfg2-input::placeholder { color: var(--text-muted); }

/* Textarea */
.cfg2-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px;
  font-size: .84rem; color: var(--text-primary); resize: vertical; min-height: 70px;
  font-family: inherit; line-height: 1.5; transition: border-color .15s, box-shadow .15s;
}
.cfg2-textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.cfg2-textarea::placeholder { color: var(--text-muted); }

/* Select */
.cfg2-select-wrap { position: relative; }
.cfg2-select {
  width: 100%; appearance: none;
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 32px 9px 12px;
  font-size: .84rem; color: var(--text-primary); height: 40px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cfg2-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.cfg2-select-arrow {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}

/* ── Save bar ────────────────────────────────────────────────────── */
.cfg2-save-bar {
  padding: 18px 28px; border-top: 1px solid var(--border);
  background: var(--bg-card-hover); display: flex; align-items: center; gap: 12px;
}
.cfg2-btn-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 22px; height: 40px; background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .12s;
}
.cfg2-btn-save:hover {
  background: color-mix(in srgb, var(--primary) 85%, #000);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent);
  transform: translateY(-1px);
}

/* ── Color picker ────────────────────────────────────────────────── */
.cfg2-color-grid { display: flex; flex-direction: column; gap: 12px; }
.cfg2-color-field {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg-card-hover);
  transition: border-color .15s;
}
.cfg2-color-field:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.cfg2-color-preview-wrap { position: relative; flex-shrink: 0; }
.cfg2-color-native {
  position: absolute; opacity: 0; width: 52px; height: 52px;
  top: 0; left: 0; cursor: pointer;
}
.cfg2-color-swatch {
  display: block; width: 52px; height: 52px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.2); box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cfg2-color-swatch:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cfg2-color-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cfg2-color-desc { font-size: .73rem; color: var(--text-muted); margin: 0 0 6px; }

/* ── Logo upload ─────────────────────────────────────────────────── */
.cfg2-logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfg2-logo-card {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
}
.cfg2-logo-preview-area {
  width: 88px; height: 88px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-hover);
}
.cfg2-logo-img { width: 100%; height: 100%; object-fit: contain; }
.cfg2-logo-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: .68rem; text-align: center; padding: 8px;
}
.cfg2-logo-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cfg2-logo-name { font-size: .84rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.cfg2-logo-desc { font-size: .74rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.4; }
.cfg2-upload-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; font-size: .79rem; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all .15s;
}
.cfg2-upload-btn:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}
.cfg2-upload-btn input[type=file] { display: none; }

/* ── Note banner ─────────────────────────────────────────────────── */
.cfg2-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 20px; margin: 20px 28px 0;
  border-radius: var(--radius); font-size: .82rem; line-height: 1.55;
}
.cfg2-note--info {
  background: rgba(59,130,246,.08); color: #1d4ed8;
  border: 1px solid rgba(59,130,246,.2);
}
.cfg2-note p { margin: 0; }
.cfg2-note svg { flex-shrink: 0; margin-top: 2px; }

/* ── Link ────────────────────────────────────────────────────────── */
.cfg2-link { color: var(--primary); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.cfg2-link:hover { text-decoration-color: var(--primary); }

/* ── Maintenance action cards ────────────────────────────────────── */
.cfg2-action-grid { display: flex; flex-direction: column; gap: 10px; }
.cfg2-action-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg-card-hover);
  transition: border-color .15s, box-shadow .15s;
}
.cfg2-action-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.cfg2-action-ico {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cfg2-action-ico--primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.cfg2-action-ico--purple  { background: rgba(139,92,246,.12);  color: #7c3aed; }
.cfg2-action-ico--teal    { background: rgba(20,184,166,.12);  color: #199c82; }
.cfg2-action-ico--amber   { background: rgba(245,158,11,.12);  color: #d97706; }
.cfg2-action-info { flex: 1; }
.cfg2-action-name { font-size: .84rem; font-weight: 600; color: var(--text-primary); margin: 0 0 2px; }
.cfg2-action-desc { font-size: .76rem; color: var(--text-muted); margin: 0; }
.cfg2-btn-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; font-size: .8rem; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: all .15s;
}
.cfg2-btn-action:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}

/* ── Danger zone ─────────────────────────────────────────────────── */
.cfg2-danger-zone {
  padding: 22px 28px;
  background: rgba(239,68,68,.03);
  border-top: 1px solid rgba(239,68,68,.15);
}
.cfg2-danger-zone__hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; color: #dc2626;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.cfg2-danger-zone__desc {
  font-size: .82rem; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5;
}
.cfg2-danger-form {}
.cfg2-danger-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cfg2-danger-label { font-size: .83rem; color: var(--text-secondary); white-space: nowrap; }
.cfg2-btn-danger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 18px; height: 38px; background: #ef4444; color: #fff;
  border: none; border-radius: var(--radius); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.cfg2-btn-danger:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239,68,68,.3); }

/* ── Test-email row ──────────────────────────────────────────────── */
.cfg2-test-email-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cfg2-btn-test-email {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 20px; height: 42px; background: #0f172a; color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: background .15s, box-shadow .15s; white-space: nowrap;
}
.cfg2-btn-test-email:hover {
  background: #1e293b; box-shadow: 0 4px 12px rgba(15,23,42,.25);
}
.cfg2-field-error {
  font-size: .8rem; color: #dc2626; margin: 0;
}

/* ── Logs filter bar ─────────────────────────────────────────────── */
.cfg2-logs-filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 28px; border-bottom: 1px solid var(--border);
  background: var(--bg-card-hover);
}

/* ── Terminal log list ───────────────────────────────────────────── */
.cfg2-terminal {
  display: flex; flex-direction: column; gap: 0;
  font-family: "SF Mono","Fira Code",ui-monospace,monospace;
  font-size: .76rem; padding: 0;
}
.cfg2-log-row {
  display: grid; grid-template-columns: 90px 110px 120px 1fr 100px;
  gap: 10px; align-items: center;
  padding: 9px 28px; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.cfg2-log-row:last-child { border-bottom: none; }
.cfg2-log-row:hover { background: var(--bg-card-hover); }
.cfg2-log-lv {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: var(--radius-lg); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.cfg2-log-lv--debug { background: rgba(148,163,184,.12); color: #94a3b8; }
.cfg2-log-lv--info  { background: rgba(59,130,246,.12);  color: #2563eb; }
.cfg2-log-lv--warn  { background: rgba(245,158,11,.12);  color: #d97706; }
.cfg2-log-lv--error { background: rgba(239,68,68,.12);   color: #dc2626; }
.cfg2-log-lv--crit  { background: rgba(239,68,68,.2);    color: #b91c1c; font-weight: 800; }
.cfg2-log-ts  { color: var(--text-muted); white-space: nowrap; }
.cfg2-log-mod { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg2-log-msg { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg2-log-usr { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* ── Export cards ────────────────────────────────────────────────── */
.cfg2-export-grid { display: flex; flex-direction: column; gap: 10px; }
.cfg2-export-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none;
  background: var(--bg-card-hover); transition: all .18s;
}
.cfg2-export-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow: 0 4px 16px rgba(0,0,0,.07); transform: translateX(2px);
  background: var(--bg-card);
}
.cfg2-export-ico {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cfg2-export-ico--green  { background: rgba(34,197,94,.12);  color: #16a34a; }
.cfg2-export-ico--indigo { background: rgba(25,156,130,.12); color: #116d5b; }
.cfg2-export-ico--blue   { background: rgba(59,130,246,.12); color: #2563eb; }
.cfg2-export-ico--red    { background: rgba(239,68,68,.12);  color: #dc2626; }
.cfg2-export-info { flex: 1; }
.cfg2-export-name {
  font-size: .86rem; font-weight: 600; color: var(--text-primary);
  margin: 0 0 3px; display: flex; align-items: center; gap: 8px;
}
.cfg2-export-badge {
  font-size: .65rem; font-weight: 700; padding: 1px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cfg2-export-badge--excel { background: rgba(34,197,94,.15);  color: #15803d; }
.cfg2-export-badge--csv   { background: rgba(25,156,130,.15); color: #116d5b; }
.cfg2-export-badge--pdf   { background: rgba(239,68,68,.15);  color: #b91c1c; }
.cfg2-export-desc { font-size: .77rem; color: var(--text-muted); margin: 0 0 3px; }
.cfg2-export-ext  { font-size: .72rem; color: var(--text-muted); font-family: "SF Mono",ui-monospace,monospace; margin: 0; }
.cfg2-export-dl {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); transition: all .15s;
}
.cfg2-export-card:hover .cfg2-export-dl {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}

/* ── About grid ──────────────────────────────────────────────────── */
.cfg2-about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 28px;
}
.cfg2-about-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg-card-hover);
}
.cfg2-about-ico {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cfg2-about-info { display: flex; flex-direction: column; gap: 2px; }
.cfg2-about-key  { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.cfg2-about-val  { font-size: .85rem; font-weight: 600; color: var(--text-primary); }

/* ── Empty state ─────────────────────────────────────────────────── */
.cfg2-empty {
  text-align: center; padding: 48px 24px;
}
.cfg2-empty__ico {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--bg-card-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; color: var(--text-muted);
}
.cfg2-empty__title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.cfg2-empty__sub   { font-size: .8rem; color: var(--text-muted); margin: 0; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cfg2-layout { grid-template-columns: 200px 1fr; gap: 14px; }
  .cfg2-log-row { grid-template-columns: 80px 100px 1fr 90px; }
  .cfg2-log-row .cfg2-log-mod { display: none; }
}
@media (max-width: 768px) {
  .cfg2-layout { grid-template-columns: 1fr; }
  .cfg2-sidenav { position: static; }
  .cfg2-sidenav__list { flex-direction: row; flex-wrap: wrap; padding: 8px; gap: 4px; }
  .cfg2-sidenav__item { flex: 0 0 auto; padding: 8px 10px; }
  .cfg2-sidenav__texts { display: none; }
  .cfg2-sidenav__dot { display: none; }
  .cfg2-sidenav__ico { width: 32px; height: 32px; }
  .cfg2-form-grid { grid-template-columns: 1fr; }
  .cfg2-field--full { grid-column: span 1; }
  .cfg2-logo-grid { grid-template-columns: 1fr; }
  .cfg2-about-grid { grid-template-columns: 1fr; }
  .cfg2-log-row { grid-template-columns: 80px 1fr; }
  .cfg2-log-row .cfg2-log-ts, .cfg2-log-row .cfg2-log-usr { display: none; }
  .cfg2-panel__hdr { padding: 18px 20px; }
  .cfg2-section-block { padding: 20px; }
  .cfg2-save-bar { padding: 14px 20px; }
  .cfg2-color-field { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .cfg2-sidenav__brand { padding: 12px 14px; }
  .cfg2-panel__hdr { flex-wrap: wrap; }
  .cfg2-note { padding: 12px 16px; margin: 16px 20px 0; }
  .cfg2-logs-filterbar { padding: 12px 16px; }
  .cfg2-terminal .cfg2-log-row { padding: 8px 16px; }
}

/* ── Pagination (logs) ───────────────────────────────────────────── */
.cfg2-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 28px; border-top: 1px solid var(--border);
  background: var(--bg-card-hover);
}
.cfg2-pagination__info { font-size: .78rem; color: var(--text-muted); }
.cfg2-pagination__info strong { color: var(--text-secondary); font-weight: 700; }
.cfg2-pagination__nav { display: flex; align-items: center; gap: 8px; }
.cfg2-pagination__page { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.cfg2-pagination__page strong { color: var(--text-primary); font-weight: 700; }
.cfg2-pagination__btn {
  width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.cfg2-pagination__btn:hover:not(.is-disabled) {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}
.cfg2-pagination__btn.is-disabled { opacity: .4; cursor: not-allowed; }

/* ── Auto-zoom guard (Regla 8): campos ≥16px en touch/portrait ──────
   iOS Safari hace auto-zoom al enfocar un campo con font-size < 16px.
   Los campos del módulo son .84rem (~13.4px). En breakpoints táctiles
   (≤1024px — cubre iPad 11"/10" portrait y todos los teléfonos) los
   subimos a 16px para eliminar el zoom sin tocar el viewport meta.
   Cubre inputs (incl. --mono y --narrow por herencia), selects y textareas. */
@media (max-width: 1024px) {
  .cfg2-input,
  .cfg2-input--mono,
  .cfg2-textarea,
  .cfg2-select { font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   rpt2 — Reports module v2
   Prefix: rpt2-
   ═══════════════════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important; }

/* ── Wrap ──────────────────────────────────────────────────────────── */
.rpt2-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
.rpt2-wrap > * { min-width: 0; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.rpt2-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
}

.rpt2-hero__left {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.rpt2-hero__ico {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rpt2-hero__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .15rem;
}

.rpt2-hero__sub {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Hero filter form ──────────────────────────────────────────────── */
.rpt2-hero__right {
    flex-shrink: 0;
}

.rpt2-filter-form {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.rpt2-filter-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.rpt2-filter-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rpt2-filter-input {
    /* Reset estilos nativos browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    height: 42px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.rpt2-filter-input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Icono calendario nativo — hacerlo moderno y accesible */
.rpt2-filter-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    padding: 4px;
    border-radius: 4px;
    transition: opacity .15s, background .15s;
}
.rpt2-filter-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--primary-bg);
}

.rpt2-filter-sep {
    font-size: .9rem;
    color: var(--text-muted);
    margin-bottom: .4rem;
}

.rpt2-filter-btns {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.rpt2-btn-apply {
    /* Reset estilos nativos de browser (iOS Safari aplica pill radius por default) */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 42px;
    padding: 0 1.35rem;
    border-radius: 12px !important;
    background: var(--primary);
    color: #fff !important;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
    border: none !important;
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(15,23,42,.10),
        0 4px 12px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
    font-family: inherit;
    text-decoration: none;
    user-select: none;
}
.rpt2-btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15,23,42,.1), 0 6px 16px rgba(15,23,42,.12);
    filter: brightness(1.06);
}
.rpt2-btn-apply:active {
    transform: translateY(0);
    filter: brightness(.95);
}
.rpt2-btn-apply:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.rpt2-btn-ghost {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 .9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    transition: border-color .15s, color .15s;
}
.rpt2-btn-ghost:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ── KPI strip ─────────────────────────────────────────────────────── */
.rpt2-kpis {
    position: relative;
    min-height: 90px;
    /* Grid real de KPIs. El blade usa .rpt2-kpis directamente (no había
       wrapper .rpt2-kpis-inner), por lo que las tarjetas salían apiladas a
       ancho completo. El skeleton ya mostraba 4 columnas → este grid alinea
       el contenido real con el placeholder y evita el salto de layout. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.rpt2-kpi-skel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.rpt2-kpi-skel-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rpt2-skel-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: rpt2-shimmer 1.5s infinite linear;
}

@keyframes rpt2-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.rpt2-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    border-left: 4px solid transparent;
    transition: transform .2s, box-shadow .2s;
}
.rpt2-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
}

.rpt2-kpi--blue   { border-left-color: #3b82f6; }
.rpt2-kpi--green  { border-left-color: #10b981; }
.rpt2-kpi--purple { border-left-color: #8b5cf6; }
.rpt2-kpi--amber  { border-left-color: #f59e0b; }

.rpt2-kpi__ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rpt2-kpi--blue   .rpt2-kpi__ico { background: rgba(59,130,246,.12);  color: #3b82f6;  }
.rpt2-kpi--green  .rpt2-kpi__ico { background: rgba(16,185,129,.12);  color: #10b981;  }
.rpt2-kpi--purple .rpt2-kpi__ico { background: rgba(139,92,246,.12);  color: #8b5cf6;  }
.rpt2-kpi--amber  .rpt2-kpi__ico { background: rgba(245,158,11,.12);  color: #f59e0b;  }

.rpt2-kpi__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }

.rpt2-kpi__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.rpt2-kpi__val {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt2-kpi__hint {
    font-size: .71rem;
    color: var(--text-muted);
}

/* ── Section title ─────────────────────────────────────────────────── */
.rpt2-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    margin-top: .5rem;
}

/* ── Generation grid ───────────────────────────────────────────────── */
.rpt2-gen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rpt2-gen-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.rpt2-gen-hdr {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.rpt2-gen-hdr:hover { background: var(--bg-card-hover); }

.rpt2-gen-hdr__ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rpt2-gen-hdr__ico--teal  { background: rgba(13,148,136,.12); color: #199c82; }
.rpt2-gen-hdr__ico--green { background: rgba(16,185,129,.12); color: #10b981; }

.rpt2-gen-hdr__text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.rpt2-gen-hdr__title {
    font-size: .87rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rpt2-gen-hdr__sub {
    font-size: .74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt2-gen-chevron {
    color: var(--text-muted);
    transition: transform .25s;
    flex-shrink: 0;
}
.rpt2-gen-hdr.is-open .rpt2-gen-chevron { transform: rotate(180deg); }

.rpt2-gen-body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-light);
}

/* Alpine slide transitions */
.rpt2-slide-enter { transition: max-height .25s ease, opacity .2s ease !important; }
.rpt2-slide-from  { max-height: 0; opacity: 0; overflow: hidden; }
.rpt2-slide-to    { max-height: 800px; opacity: 1; overflow: visible; }
.rpt2-slide-leave { transition: max-height .2s ease, opacity .15s ease !important; }

.rpt2-gen-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: rgba(59,130,246,.05);
    border: 1px solid rgba(59,130,246,.13);
    border-radius: 9px;
    padding: .55rem .8rem;
    font-size: .77rem;
    color: var(--text-muted);
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.rpt2-gen-note svg { flex-shrink: 0; margin-top: 1px; color: #3b82f6; }

/* ── Gen form row: date-range bar + action buttons ─────────────────── */
.rpt2-gen-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rpt2-gen-dates {
    display: flex;
    align-items: stretch;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
    min-width: 260px;
    transition: border-color .15s, box-shadow .15s;
}
.rpt2-gen-dates:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
    background: #fff;
}

.rpt2-gen-date-group {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    padding: 0 .85rem;
    min-width: 0;
    position: relative;
}

.rpt2-gen-date-group + .rpt2-gen-date-group {
    border-left: 1px solid var(--border);
}

.rpt2-gen-date-group svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.rpt2-gen-date-inner {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    flex: 1;
    min-width: 0;
    padding: .45rem 0;
}

.rpt2-gen-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}

.rpt2-required { color: #ef4444; }

.rpt2-date-input-wrap { display: contents; }
.rpt2-date-input-wrap svg { display: none; }

.rpt2-date-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
}
.rpt2-date-input::-webkit-calendar-picker-indicator {
    opacity: .4;
    cursor: pointer;
    margin-left: .2rem;
}
.rpt2-date-input::-webkit-datetime-edit { padding: 0; }

.rpt2-gen-actions {
    display: flex;
    gap: .45rem;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.rpt2-btn-gen {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 42px;
    padding: 0 1.1rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .01em;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.rpt2-btn-gen:hover {
    opacity: .9;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0,0,0,.16);
}
.rpt2-btn-gen:active { transform: translateY(0); box-shadow: none; }

.rpt2-btn-gen--pdf   { background: #ef4444; color: #fff; }
.rpt2-btn-gen--excel { background: #10b981; color: #fff; }
.rpt2-btn-gen--csv   { background: var(--primary); color: #fff; }

/* ── Income KPIs ───────────────────────────────────────────────────── */
.rpt2-income-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
}

.rpt2-income-kpi {
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    border: 1px solid transparent;
}
.rpt2-income-kpi--green  { background: rgba(16,185,129,.07);  border-color: rgba(16,185,129,.2);  }
.rpt2-income-kpi--blue   { background: rgba(59,130,246,.07);  border-color: rgba(59,130,246,.2);  }
.rpt2-income-kpi--amber  { background: rgba(245,158,11,.07);  border-color: rgba(245,158,11,.2);  }

.rpt2-income-kpi__val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.rpt2-income-kpi__lbl {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .71rem;
    color: var(--text-muted);
}

/* ── Income table with day/month toggle ────────────────────────────── */
.rpt2-income-table-wrap { margin-top: .5rem; }

.rpt2-income-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.rpt2-toggle-group {
    display: flex;
    background: var(--bg-body);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.rpt2-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .75rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.rpt2-toggle-btn.active {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    font-weight: 600;
}

.rpt2-btn-dl {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .85rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.rpt2-btn-dl:hover { border-color: #3b82f6; color: #3b82f6; }

.rpt2-income-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 360px;
    border-radius: 10px;
    border: 1px solid var(--border);
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.12) transparent;
}
.rpt2-income-table-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.rpt2-income-table-scroll::-webkit-scrollbar-track { background: transparent; }
.rpt2-income-table-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 10px; }

.rpt2-income-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.rpt2-income-table thead tr {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}

.rpt2-income-table tfoot tr {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.rpt2-income-table th {
    padding: .6rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}

.rpt2-income-row:not(:last-child) td {
    border-bottom: 1px solid var(--border-light);
}
.rpt2-income-row:hover td { background: var(--bg-card-hover); }

.rpt2-income-table td {
    padding: .55rem .9rem;
    color: var(--text-secondary);
}

.rpt2-income-date    { font-weight: 600; color: var(--text-primary); }
.rpt2-income-amount  { font-weight: 700; color: #10b981; }
.rpt2-income-accum   { color: var(--text-muted); font-size: .8rem; }

.rpt2-sessions-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 .5rem;
    border-radius: var(--radius-lg);
    background: rgba(59,130,246,.1);
    color: #3b82f6;
    font-size: .75rem;
    font-weight: 700;
}
.rpt2-sessions-chip--bold { background: rgba(59,130,246,.18); }

.rpt2-income-total td {
    font-weight: 700;
    color: var(--text-primary);
    border-top: 2px solid var(--border);
    background: var(--bg-body);
}

.rpt2-income-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: .82rem;
}

/* ── Charts row ────────────────────────────────────────────────────── */
.rpt2-charts-row {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    min-width: 0;
}

.rpt2-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    overflow: hidden;
    min-width: 0;
}

.rpt2-chart-card--wide  { /* default */ }
.rpt2-chart-card--small { }

.rpt2-chart-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.rpt2-chart-title {
    font-size: .87rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .15rem;
}

.rpt2-chart-sub {
    font-size: .74rem;
    color: var(--text-muted);
    margin: 0;
}

.rpt2-chart-legend {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .75rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.rpt2-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rpt2-chart-body { position: relative; min-width: 0; overflow: hidden; max-width: 100%; }
.rpt2-chart-body canvas { display: block; max-width: 100%; }
.rpt2-chart-body--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rpt2-chart-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: .82rem;
}

/* ── Analysis row ──────────────────────────────────────────────────── */
.rpt2-analysis-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-width: 0;
}

.rpt2-analysis-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    min-width: 0;
    overflow: hidden;
}

.rpt2-analysis-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border-light);
}

.rpt2-analysis-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: .82rem;
}

/* Top patients list */
.rpt2-top-list { display: flex; flex-direction: column; gap: .65rem; }

.rpt2-top-item {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.rpt2-top-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rpt2-top-rank--gold {
    background: rgba(245,158,11,.15);
    color: #b45309;
}

.rpt2-top-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rpt2-top-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rpt2-top-name:hover { color: #3b82f6; }

.rpt2-top-bar-wrap {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-body);
    overflow: hidden;
}

.rpt2-top-bar {
    height: 100%;
    border-radius: 2px;
    background: var(--primary);
    transition: width .4s ease;
}

.rpt2-top-sub {
    font-size: .72rem;
    color: var(--text-muted);
}

.rpt2-top-amount {
    font-size: .8rem;
    font-weight: 700;
    color: #10b981;
    flex-shrink: 0;
}

/* Tipo sesión list */
.rpt2-tipo-list { display: flex; flex-direction: column; gap: .65rem; }

.rpt2-tipo-item { display: flex; flex-direction: column; gap: .3rem; }

.rpt2-tipo-hdr {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}

.rpt2-tipo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rpt2-tipo-name {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt2-tipo-count {
    font-weight: 700;
    color: var(--text-primary);
    font-size: .8rem;
}

.rpt2-tipo-pct {
    font-size: .75rem;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
}

.rpt2-tipo-bar-track {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-body);
    overflow: hidden;
}

.rpt2-tipo-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

/* ── Recent visits table ───────────────────────────────────────────── */
.rpt2-visits-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.rpt2-visits-hdr {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.rpt2-visits-title {
    font-size: .87rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .1rem;
}

.rpt2-visits-sub {
    font-size: .74rem;
    color: var(--text-muted);
    margin: 0;
}

.rpt2-visits-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 440px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.12) transparent;
}
.rpt2-visits-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.rpt2-visits-scroll::-webkit-scrollbar-track { background: transparent; }
.rpt2-visits-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 10px; }

/* Pista de scroll horizontal: un degradado en el borde derecho que aparece
   SOLO cuando hay más columnas hacia la derecha (clase .rpt2-fade-end la pone
   el JS según la posición de scroll) y desaparece al llegar al final. Sirve en
   las tablas que pueden desbordar en pantallas chicas (Ingresos, Visitas,
   Escalas). El mask aplica al box visible, no descuadra el header sticky. */
.rpt2-visits-scroll.rpt2-fade-end,
.rpt2-income-table-scroll.rpt2-fade-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}

.rpt2-visits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.rpt2-visits-table thead tr {
    background: var(--bg-body);
    position: sticky;
    top: 0;
    z-index: 2;
}

.rpt2-visits-table th {
    padding: .6rem .9rem;
    font-size: .71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.rpt2-visit-row:not(:last-child) td { border-bottom: 1px solid var(--border-light); }
.rpt2-visit-row:hover td { background: var(--bg-card-hover); }

.rpt2-visits-table td {
    padding: .6rem .9rem;
    color: var(--text-secondary);
    vertical-align: middle;
}

.rpt2-vt-date  { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.rpt2-vt-name  { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.rpt2-vt-tipo  { color: var(--text-muted); white-space: nowrap; }
.rpt2-vt-diag  { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt2-vt-monto { font-weight: 700; color: #10b981; white-space: nowrap; }
.rpt2-vt-muted { color: var(--text-muted); }
.rpt2-vt-action { white-space: nowrap; }

/* Risk badges */
.rpt2-risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem .55rem;
    border-radius: var(--radius-lg);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.rpt2-risk--none   { background: rgba(13,148,136,.12);  color: #199c82;  }
.rpt2-risk--leve   { background: rgba(245,158,11,.12);  color: #b45309;  }
.rpt2-risk--mod    { background: rgba(249,115,22,.12);  color: #c2410c;  }
.rpt2-risk--alto   { background: rgba(239,68,68,.12);   color: #dc2626;  }
.rpt2-risk--urgent { background: rgba(124,58,237,.12);  color: #7c3aed;  }

.rpt2-btn-view {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: .76rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    background: transparent;
    transition: border-color .15s, color .15s;
}
.rpt2-btn-view:hover { border-color: #3b82f6; color: #3b82f6; }

.rpt2-visits-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem;
    color: var(--text-muted);
    font-size: .85rem;
}

/* ── Toggle count badges ────────────────────────────────────────────── */
.rpt2-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 .4rem;
    border-radius: var(--radius-lg);
    font-size: .68rem;
    font-weight: 700;
    background: rgba(0,0,0,.07);
    color: var(--text-muted);
    transition: background .15s, color .15s;
}
.rpt2-toggle-count.active {
    background: rgba(59,130,246,.15);
    color: #3b82f6;
}

.rpt2-table-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.rpt2-table-rows-hint {
    font-size: .75rem;
    color: var(--text-muted);
}

.rpt2-scroll-hint {
    font-size: .72rem;
    color: #3b82f6;
    font-weight: 500;
    margin-left: .2rem;
}

/* Scroll badge in visits header */
.rpt2-scroll-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: var(--radius-lg);
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.18);
    font-size: .73rem;
    font-weight: 600;
    color: #3b82f6;
}

/* ── Responsive ────────────────────────────────────────────────────── */

/* 1200px: KPIs pasan a 2 columnas. El corte se mantiene en 1200 (no más abajo):
   los labels son largos y nowrap ("PACIENTES ATENDIDOS"), así que cada KPI pide
   ~230px y 4 en fila necesitan ~970px de contenido — por debajo de ~1240px de
   viewport (con el sidebar) se recortarían. En iPad 11" horizontal (1194px) el
   2×2 es la opción limpia. */
@media (max-width: 1200px) {
    .rpt2-kpis     { grid-template-columns: repeat(2, 1fr); }
    .rpt2-kpi-skel { grid-template-columns: repeat(2, 1fr); }
}

/* 1100px: charts stack */
@media (max-width: 1100px) {
    .rpt2-charts-row { grid-template-columns: 1fr; }
    .rpt2-chart-card--small { max-width: 380px; margin: 0 auto; width: 100%; }
}

/* 900px: gen-grid and analysis stack, income KPIs 2-col */
@media (max-width: 900px) {
    .rpt2-gen-grid       { grid-template-columns: 1fr; }
    .rpt2-analysis-row   { grid-template-columns: 1fr; }
    .rpt2-income-kpis    { grid-template-columns: 1fr 1fr; }
    .rpt2-table-meta     { flex-wrap: wrap; gap: .4rem; }
}

/* 768px: hero stacks, filter form vertical */
@media (max-width: 768px) {
    .rpt2-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.1rem;
    }
    .rpt2-hero__right { width: 100%; }
    .rpt2-filter-form {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
        width: 100%;
    }
    .rpt2-filter-sep { display: none; }
    .rpt2-filter-group { width: 100%; }
    .rpt2-filter-input {
        width: 100%;
        height: 48px !important;
        font-size: .95rem;
        padding: 0 1rem;
        border-radius: 12px !important;
    }
    .rpt2-filter-btns { display: flex; gap: .5rem; width: 100%; }
    /* El botón es hijo directo del form (en columna), NO de un .rpt2-filter-btns
       horizontal. Con `flex: 1` su flex-basis 0 colapsaba la ALTURA al contenido
       (~19px) en el eje principal del flex-column, ignorando el height:48px y
       dejándolo como una píldora fina. `flex: 0 0 auto` respeta su altura; el
       ancho completo lo da align-items:stretch del form (+ width:100% explícito). */
    .rpt2-btn-apply,
    .rpt2-btn-ghost { flex: 0 0 auto; width: 100%; justify-content: center; }
    .rpt2-btn-apply {
        /* Más contenido y liviano que los inputs (48px): 44px de alto — sigue
           cumpliendo el mínimo táctil — con tipografía y sombra más sobrias para
           que no domine visualmente la tarjeta. */
        height: 44px !important;
        font-size: .85rem;
        font-weight: 700;
        padding: 0 1.4rem !important;
        margin-top: .15rem;
        border-radius: 12px !important;
        box-shadow:
            0 1px 2px rgba(15,23,42,.10),
            0 3px 10px rgba(15,23,42,.08),
            inset 0 1px 0 rgba(255,255,255,.12);
    }
    .rpt2-btn-apply:active {
        transform: translateY(1px);
        box-shadow:
            0 1px 2px rgba(15,23,42,.14),
            0 2px 6px rgba(15,23,42,.10);
    }

    /* Generation dates bar horizontal → keep but full width */
    .rpt2-gen-dates { width: 100%; }
    .rpt2-gen-row   { flex-direction: column; align-items: stretch; gap: .75rem; }
    .rpt2-gen-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
    .rpt2-btn-gen { flex: 1; justify-content: center; min-width: 90px; }

    /* Income toggle */
    .rpt2-income-toggle-row { flex-direction: column; align-items: stretch; gap: .5rem; }
    .rpt2-toggle-group { width: 100%; }
    .rpt2-toggle-btn { flex: 1; justify-content: center; }
    .rpt2-table-meta { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .rpt2-btn-dl { align-self: flex-start; }

    /* Las tablas (.rpt2-visits-table) NO ocultan columnas en pantallas chicas:
       la clase la comparten dos tablas distintas (Visitas y Escalas) y por
       nth-child se borraban datos críticos de Escalas (cuál escala, el puntaje)
       y el botón "Ver" en ambas. En su lugar el contenedor .rpt2-visits-scroll
       (overflow-x:auto) permite scroll horizontal y se conserva todo. */
}

/* 640px: KPIs 2-col, income KPIs 1-col, tighter padding */
@media (max-width: 640px) {
    .rpt2-wrap { padding: .85rem .75rem; gap: 1rem; }

    .rpt2-hero { border-radius: var(--radius, 10px); padding: .9rem 1rem; }
    .rpt2-hero__title { font-size: 1rem; }
    .rpt2-hero__sub   { font-size: .76rem; }

    .rpt2-kpis     { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .rpt2-kpi-skel { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .rpt2-kpi      { padding: .9rem 1rem; gap: .7rem; border-left-width: 3px; }
    .rpt2-kpi__val   { font-size: 1rem; }
    .rpt2-kpi__ico   { width: 34px; height: 34px; }

    .rpt2-section-title { font-size: .73rem; }

    .rpt2-income-kpis { grid-template-columns: 1fr; gap: .5rem; }
    .rpt2-income-kpi  { padding: .6rem .85rem; }

    .rpt2-gen-card { border-radius: var(--radius, 10px); }
    .rpt2-gen-body { padding: 0 1rem 1rem; }
    .rpt2-gen-dates { flex-direction: column; border-radius: var(--radius-sm, 6px); }
    .rpt2-gen-date-group { border-left: none !important; border-top: 1px solid var(--border); }
    .rpt2-gen-date-group:first-child { border-top: none; }

    .rpt2-chart-card { border-radius: var(--radius, 10px); padding: .85rem 1rem; }
    .rpt2-chart-body canvas { max-height: 220px; }

    .rpt2-analysis-card { border-radius: var(--radius, 10px); }
    .rpt2-top-bar-wrap { height: 3px; }

    .rpt2-visits-card { border-radius: var(--radius, 10px); }
    .rpt2-scroll-badge { font-size: .7rem; }
    .rpt2-visits-sub { display: none; }
}

/* 480px: KPIs 1-col, minimal everything */
@media (max-width: 480px) {
    .rpt2-kpis     { grid-template-columns: 1fr; }
    .rpt2-kpi-skel { grid-template-columns: 1fr; }

    .rpt2-gen-row       { gap: .6rem; }
    .rpt2-btn-gen       { height: 38px; font-size: .78rem; }

    /* Sin ocultar columnas: la tabla de Ingresos perdía su "Total" (la cifra
       clave) y la de visitas/escalas el botón "Ver". Ambas viven en
       contenedores con overflow-x:auto → scroll horizontal y datos completos. */

    .rpt2-chart-body canvas { max-height: 180px; }
    .rpt2-chart-title { font-size: .82rem; }
    .rpt2-chart-sub   { font-size: .72rem; }
}

/* 360px: absolute minimum */
@media (max-width: 360px) {
    .rpt2-wrap { padding: .65rem .5rem; }
    .rpt2-kpi__label { font-size: .65rem; }
    .rpt2-kpi__val   { font-size: .95rem; }
    .rpt2-filter-btns { flex-direction: column; }
    .rpt2-btn-apply,
    .rpt2-btn-ghost { width: 100%; }
}

/* ── Reports: Quick date presets ────────────────────────────────────── */
.rpt2-presets {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.rpt2-preset {
    padding: 5px 14px; border-radius: 9999px;
    background: var(--bg-card); border: 1.5px solid var(--border);
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-decoration: none; transition: all .15s;
}
.rpt2-preset:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.rpt2-preset--active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }

/* ── Reports: Tabs ─────────────────────────────────────────────────── */
.rpt2-tabs {
    display: flex; gap: 4px; margin-bottom: 18px;
    border-bottom: 2px solid var(--border-light); padding-bottom: 0;
}
.rpt2-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 18px; border: none; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; font-family: inherit; transition: all .15s;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    border-radius: 0;
}
.rpt2-tab svg { width: 14px; height: 14px; }
.rpt2-tab:hover { color: var(--text-primary); }
.rpt2-tab--active {
    color: var(--primary); border-bottom-color: var(--primary);
}

/* ── Reports: KPI trend badge ──────────────────────────────────────── */
.rpt2-kpi__trend {
    display: inline-block; padding: 2px 7px; border-radius: 9999px;
    font-size: 10px; font-weight: 700; margin-top: 4px;
}
.rpt2-kpi__trend--up { background: rgba(34,197,94,.1); color: #16a34a; }
.rpt2-kpi__trend--down { background: rgba(239,68,68,.1); color: #dc2626; }

/* ── Reports: Patient stats grid ───────────────────────────────────── */
.rpt2-patient-stats {
    display: flex; flex-direction: column; gap: 12px; margin-top: 12px;
}
.rpt2-pstat {
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--bg-card-hover); border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: space-between;
}
.rpt2-pstat--warn { background: #fef9c3; border-color: #fde68a; }
.rpt2-pstat__num { font-size: 24px; font-weight: 800; color: var(--text-primary); }
.rpt2-pstat--warn .rpt2-pstat__num { color: #a16207; }
.rpt2-pstat__label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* ── Reports: Export grid ──────────────────────────────────────────── */
.rpt2-analysis-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.rpt2-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rpt2-export-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--bg-card-hover); border: 1.5px solid var(--border);
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; transition: all .15s;
}
.rpt2-export-btn:hover { border-color: var(--primary); color: var(--primary); }
.rpt2-export-btn svg { width: 14px; height: 14px; }
.rpt2-export-btn--pdf { border-color: rgba(239,68,68,.2); color: #dc2626; }
.rpt2-export-btn--pdf:hover { background: rgba(239,68,68,.05); border-color: #ef4444; }
.rpt2-export-btn--excel { border-color: rgba(34,197,94,.2); color: #16a34a; }
.rpt2-export-btn--excel:hover { background: rgba(34,197,94,.05); border-color: #22c55e; }
.rpt2-export-btn--csv { border-color: rgba(59,130,246,.2); color: #2563eb; }
.rpt2-export-btn--csv:hover { background: rgba(59,130,246,.05); border-color: #3b82f6; }

/* ── Reports: Personal vs Clinica column colors ────────────────── */
.rpt2-th--personal { color: #1d4ed8; }
.rpt2-th--clinica { color: #b45309; }
.rpt2-td--personal { color: #1d4ed8; font-weight: 600; }
.rpt2-td--clinica { color: #b45309; font-weight: 600; }

@media (max-width: 768px) {
    .rpt2-tabs { gap: 0; overflow-x: auto; }
    .rpt2-tab { font-size: 12px; padding: 8px 12px; white-space: nowrap; }
    .rpt2-export-grid { grid-template-columns: 1fr; }
    .rpt2-patient-stats { gap: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   cal2 — Calendario de Citas v2 (rediseño 2026: minimalista clínico)
   Prefix: cal2-
   Sin estilos inline. Tokens centralizados del sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/* Local tokens. Compartidos entre wrap + overlay + popover porque
   los modales y popovers se montan en body-level, fuera de .cal2-wrap. */
.cal2-wrap,
.cal2-overlay,
.cal2-pop {
    --cal2-gap:        1rem;
    --cal2-radius:     14px;
    --cal2-radius-sm:  10px;
    --cal2-radius-xs:  6px;
    --cal2-border:     1px solid var(--border-light);
    --cal2-cell-min:   90px;
    --cal2-cell-min-lg:106px;

    /* Riesgo (alineado a la paleta del sistema, sobrio) */
    --cal2-risk-sin:   #199c82;
    --cal2-risk-leve:  #f59e0b;
    --cal2-risk-mod:   #f97316;
    --cal2-risk-alto:  #ef4444;
    --cal2-risk-urg:   #7c3aed;
    --cal2-cita:       #3b82f6;
    --cal2-cita-dk:    #2563eb;
    --cal2-today:      var(--primary);
}

.cal2-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--cal2-gap);
    padding: 1.25rem 1.25rem 1.5rem;
    animation: cal2FadeIn .32s ease both;
}
@keyframes cal2FadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── HEADER ──────────────────────────────────────────────────────── */
.cal2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cal2-header__left {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}
.cal2-header__ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cal2-header__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.cal2-header__sub {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 2px 0 0;
    font-weight: 500;
}
.cal2-header__actions { display: flex; gap: .5rem; }

.cal2-btn-agendar {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .95rem;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-family);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(var(--primary-rgb),.18);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.cal2-btn-agendar:hover {
    background: var(--primary-dark);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(var(--primary-rgb),.22);
}
.cal2-btn-agendar:active { transform: translateY(1px); box-shadow: none; }
.cal2-btn-agendar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.25);
}

/* ── LAYOUT ──────────────────────────────────────────────────────── */
.cal2-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--cal2-gap);
    align-items: start;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.cal2-sidebar-toggle {
    display: none;
    align-items: center;
    gap: .4rem;
    height: 34px;
    padding: 0 .75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cal2-sidebar-toggle:hover,
.cal2-sidebar-toggle.is-active {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb),.25);
}

.cal2-sidebar {
    background: var(--bg-card);
    border-radius: var(--cal2-radius);
    padding: 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: var(--cal2-border);
    box-shadow: var(--shadow-sm);
}
.cal2-side-section { display: flex; flex-direction: column; gap: .55rem; }
.cal2-side-section + .cal2-side-section {
    padding-top: .9rem;
    border-top: 1px dashed var(--border-light);
}

.cal2-section-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}

/* Stats */
.cal2-stats-list { display: flex; flex-direction: column; gap: .35rem; }
.cal2-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem 0;
}
.cal2-stat-label {
    font-size: .78rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.cal2-stat-val {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.cal2-stat-val--blue { color: var(--cal2-cita); }
.cal2-stat-val--red  { color: var(--cal2-risk-alto); }

/* Skeleton placeholders dentro del stats list */
.cal2-stat-skel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem 0;
}
.cal2-skel-line {
    background: linear-gradient(90deg, #eef2f6 0%, #f7fafc 50%, #eef2f6 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    height: 10px;
    animation: cal2Shimmer 1.4s ease-in-out infinite;
}
.cal2-skel-line--label { width: 60%; }
.cal2-skel-line--num   { width: 22px; }
@keyframes cal2Shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Legend */
.cal2-legend { display: flex; flex-direction: column; gap: .38rem; }
.cal2-legend-group-title {
    font-size: .7rem;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 .15rem;
}
.cal2-legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.cal2-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal2-dot--sin  { background: var(--cal2-risk-sin); }
.cal2-dot--leve { background: var(--cal2-risk-leve); }
.cal2-dot--mod  { background: var(--cal2-risk-mod); }
.cal2-dot--alto { background: var(--cal2-risk-alto); }
.cal2-dot--urg  { background: var(--cal2-risk-urg); }
.cal2-dot--cita { background: var(--cal2-cita); }
.cal2-legend-divider {
    height: 1px;
    background: var(--border-light);
    margin: .3rem 0 .2rem;
}

/* ── MAIN CARD ───────────────────────────────────────────────────── */
.cal2-card {
    background: var(--bg-card);
    border-radius: var(--cal2-radius);
    border: var(--cal2-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ── TOOLBAR ─────────────────────────────────────────────────────── */
.cal2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.cal2-nav { display: flex; align-items: center; gap: .35rem; }
.cal2-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cal2-nav-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border);
}
.cal2-nav-btn:active { transform: scale(.96); }
.cal2-nav-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.18);
}
.cal2-period {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 .55rem;
    min-width: 130px;
    letter-spacing: -.005em;
}
.cal2-today-btn {
    height: 32px;
    padding: 0 .8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: .35rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cal2-today-btn:hover {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb),.25);
}
.cal2-today-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.2);
}

/* View switcher — segmented control con pill deslizante */
.cal2-view-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    isolation: isolate;
}
.cal2-view-pill {
    position: absolute;
    top: 3px;
    left: 0;
    height: calc(100% - 6px);
    background: var(--bg-card);
    border-radius: 7px;
    box-shadow: var(--shadow-sm);
    transition: transform .26s cubic-bezier(.16,1,.3,1), width .26s cubic-bezier(.16,1,.3,1);
    z-index: 0;
    pointer-events: none;
}
.cal2-view-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .7rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;
    transition: color .18s ease;
}
.cal2-view-btn:hover { color: var(--text-secondary); }
.cal2-view-btn.is-active { color: var(--primary); }
.cal2-view-btn:focus-visible {
    outline: none;
    color: var(--primary);
}
.cal2-view-btn svg { flex-shrink: 0; }

/* ── SKELETON ────────────────────────────────────────────────────── */
.cal2-skel-wrap {
    padding: .65rem .85rem 1rem;
    transition: opacity .22s ease;
}
.cal2-skel-wrap.is-fading { opacity: 0; }
.cal2-skel-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal2-skel-cell {
    aspect-ratio: 1 / .85;
    background: linear-gradient(90deg, #f1f5f9 0%, #f8fafc 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: cal2Shimmer 1.5s ease-in-out infinite;
}

/* ── FullCalendar overrides ──────────────────────────────────────── */
#cal2-fc {
    padding: .35rem .55rem .65rem;
    font-family: var(--font-family) !important;
    opacity: 0;
    transition: opacity .28s ease;
}
#cal2-fc.is-revealing { opacity: 0; }
#cal2-fc.is-revealed  { opacity: 1; }
#cal2-fc.is-loading   { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.fc { font-family: var(--font-family) !important; }

/* Grid base */
#cal2-fc .fc-scrollgrid {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
    border: 0 !important;
}
#cal2-fc .fc-scrollgrid-sync-table,
#cal2-fc .fc-scrollgrid-section-body table,
#cal2-fc .fc-scrollgrid-section-header table,
#cal2-fc .fc-col-header,
#cal2-fc .fc-daygrid-body,
#cal2-fc .fc-daygrid-body > table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
#cal2-fc table   { display: table !important; }
#cal2-fc thead   { display: table-header-group !important; }
#cal2-fc tbody   { display: table-row-group !important; }
#cal2-fc tr      { display: table-row !important; }
#cal2-fc td      { display: table-cell !important; }
#cal2-fc th      { display: table-cell !important; }

#cal2-fc .fc-view-harness {
    position: relative !important;
    height: auto !important;
    min-height: 480px;
}
#cal2-fc .fc-view-harness-active > .fc-view {
    position: relative !important;
    inset: auto !important;
}
/* Semana / Día (time-grid): FullCalendar necesita su modelo nativo de altura
   fija — el .fc-view absoluto llenando el harness — para que el scroller
   interno calcule su alto. El override de arriba (flujo natural, .fc-view
   relative) es correcto SOLO para Mes/Lista; aplicado al time-grid hace que el
   cuerpo colapse a 0px y la vista salga en blanco (sin horas ni eventos). La
   clase .cal2-fc--timegrid la alterna el JS según la vista activa. */
#cal2-fc.cal2-fc--timegrid .fc-view-harness-active > .fc-view {
    position: absolute !important;
    inset: 0 !important;
}

/* Header (días de la semana) */
#cal2-fc .fc-col-header-cell {
    width: calc(100% / 7) !important;
    vertical-align: middle !important;
    padding: 10px 4px !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center !important;
}
/* Vista Día: una sola columna de día. Forzarla a 1/7 (regla de arriba, para
   los 7 días de Mes/Semana) deja el header del día en 1/7 y al axis-header
   absorbiendo los otros 6/7 → encabezado desalineado del cuerpo. La clase la
   pone el JS solo en timeGridDay. */
#cal2-fc.cal2-fc--day .fc-col-header-cell { width: auto !important; }
#cal2-fc .fc-col-header-cell-cushion {
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    font-family: var(--font-family) !important;
}

/* Day cells */
#cal2-fc .fc-daygrid-day {
    width: calc(100% / 7) !important;
    vertical-align: top !important;
    border: 1px solid var(--border-light) !important;
    background: var(--bg-card) !important;
    min-height: var(--cal2-cell-min) !important;
    height: auto !important;
    transition: background .18s ease;
}
#cal2-fc .fc-daygrid-day:hover {
    background: rgba(248, 250, 252, .85) !important;
}
#cal2-fc .fc-daygrid-day-frame {
    position: relative !important;
    min-height: var(--cal2-cell-min) !important;
    padding: 4px 5px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
#cal2-fc .fc-daygrid-day-top {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 1px 2px 3px !important;
    flex-shrink: 0 !important;
}
#cal2-fc .fc-daygrid-day-number {
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    padding: 2px 6px !important;
    border-radius: 50% !important;
    min-width: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background .18s ease, color .18s ease;
}
#cal2-fc .fc-day-other .fc-daygrid-day-number { color: var(--text-muted) !important; opacity: .55; }
#cal2-fc .fc-day-today { background: rgba(var(--primary-rgb),.04) !important; }
#cal2-fc .fc-day-today .fc-daygrid-day-number {
    background: var(--cal2-today) !important;
    color: #fff !important;
    width: 24px;
    height: 24px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(var(--primary-rgb),.35);
}
#cal2-fc .fc-day-sat,
#cal2-fc .fc-day-sun { background: var(--bg-body) !important; }
#cal2-fc .fc-day-today.fc-day-sat,
#cal2-fc .fc-day-today.fc-day-sun { background: rgba(var(--primary-rgb),.045) !important; }

#cal2-fc .fc-daygrid-day-events {
    position: relative !important;
    min-height: 0 !important;
    margin-top: 2px !important;
    flex: 1 !important;
    overflow: hidden !important;
}
#cal2-fc .fc-daygrid-event-harness { margin: 1px 0 !important; }
#cal2-fc .fc-daygrid-day-bottom {
    padding: 2px 2px 0 !important;
    flex-shrink: 0 !important;
}

/* Reset estilos default de eventos en daygrid + timegrid */
#cal2-fc .fc-daygrid-event,
#cal2-fc .fc-daygrid-dot-event {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-family: var(--font-family) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: background .15s ease;
    /* iOS: tap inmediato (sin delay 300ms) + sin highlight gris feo */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(var(--primary-rgb),.18);
    -webkit-touch-callout: none;
    user-select: none;
}
#cal2-fc .fc-daygrid-event:hover { background: var(--bg-card-hover) !important; }
#cal2-fc .fc-daygrid-event:active { background: var(--primary-bg) !important; }
#cal2-fc .fc-daygrid-event-dot,
#cal2-fc .fc-event-time,
#cal2-fc .fc-event-title-container { display: none !important; }

/* Los hijos del chip no deben capturar el tap — todo el tap va al
   <a> padre (.fc-daygrid-event) donde FullCalendar tiene el handler.
   Sin esto, iOS a veces dispara el click en el inner span y la
   delegación de FC lo pierde. */
.cal2-chip,
.cal2-chip * { pointer-events: none; }
.cal2-tchip,
.cal2-tchip * { pointer-events: none; }

/* ── CHIP (compact event renderer) ───────────────────────────────── */
.cal2-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1.35;
    font-size: .73rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.cal2-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chip-color, var(--cal2-cita));
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.cal2-chip__time {
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: .7rem;
    flex-shrink: 0;
}
.cal2-chip__name {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.cal2-chip__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    background: var(--primary-bg);
    color: var(--primary);
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Variante de DOS líneas (Mes con hora): fila superior compacta (dot + hora +
   ×N) y el nombre debajo a ancho COMPLETO de la celda. Así el nombre se lee
   mucho mejor que en una sola línea, donde el dot y la hora le quitaban espacio
   y casi todo quedaba en "…". */
.cal2-chip--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 3px 6px;
}
.cal2-chip__top {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.cal2-chip--stack .cal2-chip__name {
    width: 100%;
    line-height: 1.25;
}

/* "+N más" link estilizado */
#cal2-fc .fc-daygrid-more-link {
    display: inline-block !important;
    padding: 2px 7px !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: var(--primary-bg) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-family: var(--font-family) !important;
    transition: background .15s ease, color .15s ease;
}
#cal2-fc .fc-daygrid-more-link:hover {
    background: rgba(var(--primary-rgb),.14) !important;
    color: var(--primary-dark) !important;
}
.fc-more-link {
    font-family: var(--font-family) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
}
/* Popover default de FullCalendar oculto — usamos nuestro day popover */
.fc-popover { display: none !important; }

/* TimeGrid (semana/día) */
#cal2-fc .fc-timegrid { width: 100% !important; }
#cal2-fc .fc-timegrid-axis,
#cal2-fc .fc-timegrid-slot { border-color: var(--border-light) !important; }
#cal2-fc .fc-timegrid-slot { height: 1.9em !important; }
#cal2-fc .fc-timegrid-slot-label-cushion {
    font-size: .68rem !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    padding: 0 .55rem !important;
    font-variant-numeric: tabular-nums;
}
#cal2-fc .fc-timegrid-axis-frame {
    justify-content: flex-end !important;
}
#cal2-fc .fc-timegrid-col.fc-day-today {
    background: rgba(var(--primary-rgb),.035) !important;
}
#cal2-fc .fc-timegrid-now-indicator-line {
    border-color: var(--cal2-risk-alto) !important;
    border-top-width: 2px !important;
}
#cal2-fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--cal2-risk-alto) !important;
    border-width: 5px !important;
}
#cal2-fc .fc-timegrid-event {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
#cal2-fc .fc-timegrid-event .fc-event-main {
    padding: 0 !important;
    background: transparent !important;
    color: var(--text-primary);
}
#cal2-fc .fc-timegrid-event .fc-event-main-frame {
    padding: 0 !important;
}

/* Chip vertical para semana/día */
.cal2-tchip {
    --chip-color: var(--cal2-cita);
    height: 100%;
    padding: 4px 6px 4px 8px;
    background: color-mix(in srgb, var(--chip-color) 9%, white);
    border-left: 3px solid var(--chip-color);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    transition: background .15s ease, transform .12s ease;
}
.cal2-tchip:hover {
    background: color-mix(in srgb, var(--chip-color) 14%, white);
}
.cal2-tchip__time {
    font-size: .68rem;
    font-weight: 700;
    color: var(--chip-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    flex-shrink: 0;
}
.cal2-tchip__name {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    word-break: break-word;
}
/* Fallback para navegadores sin color-mix (Safari < 16.4) */
@supports not (background: color-mix(in srgb, red, blue)) {
    .cal2-tchip       { background: rgba(59,130,246,.09); }
    .cal2-tchip:hover { background: rgba(59,130,246,.14); }
}

/* ── LIST VIEW ───────────────────────────────────────────────────── */
#cal2-fc .fc-list { border: 0 !important; }
#cal2-fc .fc-list-table { width: 100%; border-collapse: collapse; }
#cal2-fc .fc-list-day th {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#cal2-fc .fc-list-day-cushion {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--bg-body) !important;
    padding: .55rem .85rem !important;
    border-bottom: 1px solid var(--border-light) !important;
}
#cal2-fc .fc-list-day-text,
#cal2-fc .fc-list-day-side-text {
    font-size: .73rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    text-transform: capitalize !important;
    font-family: var(--font-family) !important;
}
#cal2-fc .fc-list-day-side-text {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-left: .4rem !important;
}
#cal2-fc .fc-list-event td {
    padding: .65rem .85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    vertical-align: middle !important;
}
#cal2-fc .fc-list-event:hover td {
    background: var(--bg-card-hover) !important;
    cursor: pointer !important;
}
/* Punto de evento en vista Lista. FullCalendar colorea el punto con
   border-color, así que un punto LLENO se logra con width/height 0 y el borde
   formando todo el círculo (Ø = 2×border-width). Con width/height 10px + borde
   5px quedaba una caja de 20px con centro hueco → se veía como anillo, distinto
   de los puntos llenos de la leyenda. */
#cal2-fc .fc-list-event-dot {
    border-radius: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-width: 6px !important;
}
#cal2-fc .fc-list-event-time {
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    font-family: var(--font-family) !important;
    white-space: nowrap !important;
    min-width: 56px !important;
    font-variant-numeric: tabular-nums;
}
#cal2-fc .fc-list-event-title a {
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    font-family: var(--font-family) !important;
}
#cal2-fc .fc-list-empty {
    background: var(--bg-body) !important;
    padding: 3rem 1rem !important;
}
#cal2-fc .fc-list-empty-cushion {
    font-size: .85rem !important;
    color: var(--text-muted) !important;
    font-family: var(--font-family) !important;
}

#cal2-fc .fc-button,
#cal2-fc .fc-button-primary,
#cal2-fc .fc-header-toolbar { display: none !important; }

/* ── DAY POPOVER (custom, ligero) ────────────────────────────────── */
.cal2-pop {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, calc(100vw - 24px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
    z-index: 1090;
    overflow: hidden;
}
.cal2-pop.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cal2-pop__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem .55rem;
    border-bottom: 1px solid var(--border-light);
}
.cal2-pop__title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.005em;
}
.cal2-pop__close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.cal2-pop__close:hover {
    background: var(--bg-body);
    color: var(--text-primary);
}
.cal2-pop__body {
    max-height: 360px;
    overflow-y: auto;
    padding: .35rem 0 .45rem;
}
.cal2-pop__body::-webkit-scrollbar { width: 6px; }
.cal2-pop__body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.cal2-pop__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cal2-pop__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    cursor: pointer;
    transition: background .12s ease;
    border-left: 2px solid transparent;
}
.cal2-pop__item:hover,
.cal2-pop__item:focus-visible {
    background: var(--bg-card-hover);
    border-left-color: var(--primary);
    outline: none;
}
.cal2-pop__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color, var(--cal2-cita));
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.cal2-pop__item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.cal2-pop__item-name {
    font-size: .81rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal2-pop__item-meta {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}
.cal2-pop__chev {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: .65;
}
.cal2-pop__empty {
    margin: 0;
    padding: 1.2rem .9rem;
    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
}

/* Utility */
.cal2-is-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   MODALES (Detalle + Agendar) — limpios y consistentes
   ════════════════════════════════════════════════════════════════════ */
.cal2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1100;
}
.cal2-overlay.is-open { opacity: 1; pointer-events: all; }

.cal2-modal {
    width: 100%;
    max-width: 540px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15,23,42,.22), 0 6px 18px rgba(15,23,42,.08);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    transform: translateY(12px) scale(.985);
    opacity: 0;
    transition: transform .26s cubic-bezier(.16,1,.3,1), opacity .22s ease;
    overflow: hidden;
}
.cal2-overlay.is-open .cal2-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.cal2-modal--agendar { max-width: 500px; }

@keyframes cal2-avatar-in {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
@keyframes cal2-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cal2-modal__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem .85rem;
    gap: .75rem;
    border-bottom: 1px solid var(--border-light);
}
.cal2-modal__hdr-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.cal2-modal__avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.cal2-overlay.is-open .cal2-modal__avatar {
    animation: cal2-avatar-in 360ms cubic-bezier(.16,1,.3,1);
}
.cal2-modal__avatar--teal {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.cal2-modal__avatar--blue {
    background: linear-gradient(135deg, var(--cal2-cita) 0%, var(--cal2-cita-dk) 100%);
    box-shadow: 0 2px 8px rgba(59,130,246,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.cal2-modal__avatar svg { color: #fff; }

.cal2-modal__hdr-text { min-width: 0; }
.cal2-modal__patient {
    font-size: .98rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal2-modal__subtitle {
    font-size: .76rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}
.cal2-modal__close {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.cal2-modal__close:hover {
    background: var(--bg-body);
    color: var(--text-primary);
}
.cal2-modal__close:active { transform: scale(.94); }
.cal2-modal__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.2);
}

.cal2-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: .01em;
}
.cal2-type-badge--sesion {
    background: var(--primary-bg);
    color: var(--primary);
}
.cal2-type-badge--cita {
    background: rgba(59,130,246,.1);
    color: var(--cal2-cita);
}

.cal2-modal__body {
    padding: 1rem 1.1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.cal2-modal__body::-webkit-scrollbar { width: 6px; }
.cal2-modal__body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.cal2-modal__body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.cal2-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--border-light);
}
.cal2-detail-row:last-child { border-bottom: 0; }

.cal2-detail-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.cal2-detail-label svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.cal2-detail-val {
    font-size: .83rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.cal2-risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .005em;
}
.cal2-risk--none   { background: var(--primary-bg);             color: var(--primary); }
.cal2-risk--leve   { background: rgba(245,158,11,.12);          color: #b45309; }
.cal2-risk--mod    { background: rgba(249,115,22,.12);          color: #c2410c; }
.cal2-risk--alto   { background: rgba(239,68,68,.12);           color: #b91c1c; }
.cal2-risk--urgent { background: rgba(124,58,237,.12);          color: #6d28d9; }

/* Edit body */
.cal2-edit-body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding-top: 1.1rem;
}
.cal2-edit-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -.005em;
}
.cal2-edit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.cal2-edit-field { display: flex; flex-direction: column; gap: .35rem; }
.cal2-edit-label {
    font-size: .75rem;
    color: var(--text-secondary);
    font-weight: 600;
    transition: color .18s ease;
}
.cal2-edit-label-opt {
    color: var(--text-muted);
    font-weight: 400;
    font-size: .7rem;
}
.cal2-edit-field:focus-within .cal2-edit-label { color: var(--primary); }

.cal2-edit-input {
    height: 38px;
    padding: 0 .75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: .82rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cal2-edit-input:hover:not(:focus) { border-color: var(--text-muted); }
.cal2-edit-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.16);
}
.cal2-edit-input::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease;
}
.cal2-edit-input:hover::-webkit-calendar-picker-indicator,
.cal2-edit-input:focus::-webkit-calendar-picker-indicator { opacity: .9; }

.cal2-edit-hint {
    font-size: .78rem;
    color: var(--error, #ef4444);
    font-weight: 500;
    padding: .55rem .75rem;
    background: rgba(239,68,68,.08);
    border-radius: 9px;
    border: 1px solid rgba(239,68,68,.18);
    margin: 0;
    animation: cal2-fade-in 200ms cubic-bezier(.16,1,.3,1);
}

/* Footer + buttons */
.cal2-modal__footer {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-body);
}
.cal2-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    flex-wrap: wrap;
}
.cal2-footer-right { display: flex; gap: .55rem; }

.cal2-btn-outline,
.cal2-btn-edit,
.cal2-btn-primary,
.cal2-btn-save {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 36px;
    padding: 0 .85rem;
    border-radius: 9px;
    font-family: var(--font-family);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
    text-decoration: none;
    white-space: nowrap;
}
.cal2-btn-outline:focus-visible,
.cal2-btn-edit:focus-visible,
.cal2-btn-primary:focus-visible,
.cal2-btn-save:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.22);
}

.cal2-btn-outline {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.cal2-btn-outline:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.cal2-btn-outline:active { transform: translateY(1px); }

.cal2-btn-edit {
    background: var(--primary-bg);
    border: 1px solid rgba(var(--primary-rgb),.18);
    color: var(--primary);
}
.cal2-btn-edit:hover {
    background: rgba(var(--primary-rgb),.12);
    border-color: rgba(var(--primary-rgb),.3);
}
.cal2-btn-edit:active { transform: translateY(1px); }

.cal2-btn-primary {
    background: var(--primary);
    border: 0;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 3px rgba(var(--primary-rgb),.18);
}
.cal2-btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(var(--primary-rgb),.22);
}
.cal2-btn-primary:active { transform: translateY(1px); box-shadow: none; }

.cal2-btn-save {
    background: var(--primary);
    border: 0;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 3px rgba(var(--primary-rgb),.18);
}
.cal2-btn-save:hover {
    background: var(--primary-dark);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(var(--primary-rgb),.22);
}
.cal2-btn-save:active { transform: translateY(1px); box-shadow: none; }
.cal2-btn-save:disabled {
    opacity: .7;
    cursor: not-allowed;
    background: var(--primary);
}

.cal2-spin {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cal2Spin .65s linear infinite;
}
@keyframes cal2Spin { to { transform: rotate(360deg); } }

/* Form fields (agendar modal) */
.cal2-form-field { display: flex; flex-direction: column; gap: .35rem; }
.cal2-form-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--text-secondary);
    font-weight: 600;
    transition: color .18s ease;
}
.cal2-form-label svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.cal2-form-label-opt {
    color: var(--text-muted);
    font-weight: 400;
    font-size: .7rem;
}
.cal2-form-label-req {
    color: var(--cal2-risk-alto);
    font-weight: 600;
}
.cal2-form-field:focus-within .cal2-form-label { color: var(--primary); }

.cal2-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.cal2-patient-search-wrap { position: relative; }
.cal2-search-ico {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color .18s ease;
}
.cal2-patient-search-wrap:focus-within .cal2-search-ico { color: var(--primary); }

.cal2-form-input {
    height: 38px;
    padding: 0 .75rem;
    padding-right: 2rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: .82rem;
    width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cal2-form-input::placeholder { color: var(--text-muted); }
.cal2-form-input:hover:not(:focus) { border-color: var(--text-muted); }
.cal2-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.16);
}
.cal2-form-input::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease;
}
.cal2-form-input:hover::-webkit-calendar-picker-indicator,
.cal2-form-input:focus::-webkit-calendar-picker-indicator { opacity: .9; }

.cal2-form-textarea {
    min-height: 60px;
    padding: .55rem .75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: .82rem;
    line-height: 1.45;
    resize: vertical;
    width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cal2-form-textarea::placeholder { color: var(--text-muted); }
.cal2-form-textarea:hover:not(:focus) { border-color: var(--text-muted); }
.cal2-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.16);
}

.cal2-patient-dropdown {
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .35rem;
    margin-top: 4px;
    box-shadow: var(--shadow-md);
    animation: cal2-fade-in 180ms cubic-bezier(.16,1,.3,1);
}
.cal2-patient-dropdown::-webkit-scrollbar { width: 6px; }
.cal2-patient-dropdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.cal2-patient-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: .82rem;
    color: var(--text-primary);
    transition: background .12s ease;
}
.cal2-patient-option:hover {
    background: var(--bg-card-hover);
}
.cal2-patient-option:not(:last-child) { margin-bottom: 2px; }
.cal2-patient-option-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.cal2-patient-option:hover .cal2-patient-option-avatar {
    background: var(--primary);
    color: #fff;
}

.cal2-no-results {
    padding: .85rem .6rem;
    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
}

.cal2-selected-patient {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    padding: 3px 9px;
    background: var(--primary-bg);
    color: var(--primary);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    align-self: flex-start;
}

.cal2-ag-error {
    font-size: .8rem;
    color: var(--cal2-risk-alto);
    font-weight: 500;
    padding: .55rem .75rem;
    background: rgba(239,68,68,.08);
    border-radius: 9px;
    border: 1px solid rgba(239,68,68,.18);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    animation: cal2-fade-in 200ms cubic-bezier(.16,1,.3,1);
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */

/* Laptop pequeño / tablet horizontal */
@media (max-width: 1180px) {
    .cal2-layout { grid-template-columns: 200px 1fr; }
    .cal2-period { min-width: 100px; font-size: .85rem; }
}

/* Tablet vertical / iPad: el sidebar pasa a toggle */
@media (max-width: 1023.98px) {
    .cal2-layout { grid-template-columns: 1fr; }
    .cal2-sidebar-toggle { display: inline-flex; }
    .cal2-sidebar {
        display: none;
        position: relative;
        order: -1;
    }
    .cal2-sidebar.is-open { display: flex; }

    /* Stats + Legend side-by-side cuando el sidebar abre en tablet */
    .cal2-sidebar.is-open {
        flex-direction: row;
        gap: 1.25rem;
        flex-wrap: wrap;
    }
    .cal2-sidebar.is-open .cal2-side-section {
        flex: 1 1 220px;
        min-width: 0;
    }
    .cal2-sidebar.is-open .cal2-side-section + .cal2-side-section {
        padding-top: 0;
        border-top: 0;
    }

    .cal2-toolbar {
        padding: .6rem .7rem;
        gap: .5rem;
    }
    .cal2-period { min-width: 0; }
    #cal2-fc .fc-daygrid-day { min-height: 78px !important; }
    #cal2-fc .fc-daygrid-day-frame { min-height: 78px !important; }
}

/* Tablet más pequeña */
@media (max-width: 820px) {
    .cal2-wrap { padding: 1rem .85rem 1.25rem; gap: .85rem; }
    .cal2-header__title { font-size: 1rem; }
    .cal2-header__sub { font-size: .73rem; }
    .cal2-btn-agendar { height: 36px; padding: 0 .8rem; font-size: .76rem; }
    .cal2-toolbar { padding: .55rem .65rem; }
    .cal2-view-btn { padding: 0 .55rem; font-size: .72rem; }
    #cal2-fc .fc-daygrid-day { min-height: 70px !important; }
    #cal2-fc .fc-daygrid-day-frame { min-height: 70px !important; padding: 3px 3px 5px !important; }
    .cal2-chip { font-size: .7rem; padding: 2px 4px; gap: 4px; }
    .cal2-chip__time { font-size: .67rem; }
}

/* Móvil grande */
@media (max-width: 640px) {
    .cal2-wrap { padding: .85rem .65rem 1rem; gap: .75rem; }
    .cal2-header { gap: .65rem; }
    .cal2-header__ico { width: 32px; height: 32px; border-radius: 9px; }
    .cal2-header__title { font-size: .95rem; }
    .cal2-header__actions { width: 100%; }
    .cal2-btn-agendar { width: 100%; justify-content: center; height: 38px; }

    /* Chips MÁS grandes para tap cómodo (mín 28px alto incl. padding) */
    .cal2-chip {
        padding: 5px 7px;
        font-size: .73rem;
        gap: 5px;
        min-height: 26px;
    }
    .cal2-chip__dot { width: 8px; height: 8px; }
    .cal2-chip__time { font-size: .68rem; }

    /* Mes en móvil (vista NO por defecto — el default es Lista): las celdas de
       ~50px son demasiado estrechas para 2 líneas; la hora se truncaría a "18:".
       Volvemos a una sola línea compacta: dot + nombre (+ ×N), sin hora. */
    .cal2-chip--stack { flex-direction: row; align-items: center; gap: 4px; }
    .cal2-chip--stack .cal2-chip__top { flex-shrink: 0; gap: 4px; }
    .cal2-chip--stack .cal2-chip__time { display: none; }
    .cal2-chip--stack .cal2-chip__name { width: auto; }

    /* "+N más" también grande para tocar */
    #cal2-fc .fc-daygrid-more-link {
        padding: 4px 8px !important;
        font-size: .7rem !important;
        min-height: 24px;
        display: inline-flex !important;
        align-items: center;
    }
    /* Día clickeable: cursor + estado activo */
    #cal2-fc .fc-daygrid-day { cursor: pointer; }
    #cal2-fc .fc-daygrid-day:active {
        background: var(--primary-bg) !important;
    }

    .cal2-toolbar {
        flex-wrap: wrap;
        gap: .55rem;
        padding: .55rem .65rem;
    }
    .cal2-nav {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
    .cal2-period {
        font-size: .82rem;
        padding: 0 .35rem;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cal2-today-btn { font-size: .72rem; padding: 0 .6rem; }
    .cal2-view-group {
        width: 100%;
        justify-content: space-between;
        order: 3;
    }
    .cal2-view-btn { flex: 1 1 0; justify-content: center; padding: 0 .35rem; }

    .cal2-modal { max-height: calc(100vh - 1rem); }
    .cal2-modal__hdr { padding: .85rem .9rem .65rem; }
    .cal2-modal__body { padding: .85rem .9rem; }
    .cal2-modal__footer { padding: .75rem .9rem; }
    .cal2-footer-row { flex-direction: column-reverse; align-items: stretch; }
    .cal2-footer-right { flex-direction: column-reverse; gap: .5rem; }
    .cal2-btn-outline, .cal2-btn-edit, .cal2-btn-primary, .cal2-btn-save {
        width: 100%; justify-content: center;
    }
    .cal2-edit-fields { grid-template-columns: 1fr; }
    .cal2-form-row { grid-template-columns: 1fr; }

    .cal2-patient-dropdown { max-height: 200px; }
}

/* Móvil pequeño */
@media (max-width: 420px) {
    .cal2-wrap { padding: .65rem .5rem .9rem; }
    .cal2-view-btn span { display: none; }
    .cal2-view-btn { padding: 0 .55rem; }
    .cal2-view-btn svg { display: block; }
    .cal2-period { font-size: .78rem; }
    /* List view tighter */
    #cal2-fc .fc-list-event td { padding: .5rem .6rem !important; }
    #cal2-fc .fc-list-event-title a { font-size: .8rem !important; }
    #cal2-fc .fc-list-event-time { font-size: .72rem !important; min-width: 44px !important; }
}

/* Mes: que la grilla LLENE el alto disponible en pantallas grandes (laptop,
   desktop, tablets 11") en lugar de dejar un hueco vacío debajo. Cada una de
   las 6 filas toma ~1/6 del alto del viewport; `dvh` es robusto en iOS Safari
   (la barra de direcciones no descuadra el cálculo). Las celdas crecen si hay
   más eventos y nunca bajan del piso. Va DESPUÉS de los overrides de tablet
   (78/70px) para ganarles por orden de fuente en el rango 768–1023. No aplica
   en móvil (<768), donde la vista por defecto es Lista. */
@media (min-width: 768px) {
    #cal2-fc .fc-daygrid-day,
    #cal2-fc .fc-daygrid-day-frame {
        min-height: max(90px, calc((100dvh - 360px) / 6)) !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cal2-wrap,
    .cal2-modal,
    .cal2-pop,
    .cal2-skel-cell,
    .cal2-skel-line,
    .cal2-view-pill,
    .cal2-btn-agendar,
    .cal2-nav-btn,
    .cal2-spin,
    .cal2-chip,
    #cal2-fc,
    #cal2-fc .fc-daygrid-day {
        animation: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   show.blade.php — Patient Show / Expediente
   Prefix: psh3- for new classes. Existing Alpine-bound classes
   (patient-show-layout, demographics-sidebar, filter-panel,
    nav-tabs-modern, tab-content-modern, timeline-container,
    timeline-item, table-modern, etc.) are restyled here.
   ════════════════════════════════════════════════════════════════ */

/* --- Alpine cloak --- */
[x-cloak] { display: none !important; }

/* --- Layout Grid --- */
.patient-show-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

/* --- Sidebar --- */
.demographics-sidebar,
.demographics-sidebar * { box-sizing: border-box; }

/*
 * Desktop only: push sidebar down so its TOP aligns with the tab-content TOP
 * (below filter-panel 54px + nav-tabs-modern ~45px).
 * Without this offset the sidebar aligns with the filter-panel top (col-2
 * header), which visually disconnects the sidebar from the tab body.
 * On tablet/mobile the layout collapses to flex-column and this offset is
 * reset below in the @media (max-width: 1023.98px) block.
 */
.demographics-sidebar {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-height, 64px) + 16px);
    margin-top: 99px;
    width: 100%;
    max-width: 100%;
    word-break: break-word;
    align-self: start;
    height: fit-content;
}

/* Banner decorativo superior */
.profile-banner {
    height: 70px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    position: relative;
    flex-shrink: 0;
}

.profile-banner::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 22px;
    background: var(--bg-card);
    border-radius: 18px 18px 0 0;
}

.profile-header {
    padding: 0 20px 18px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    margin-top: -36px;
    position: relative;
    z-index: 1;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 3px solid var(--bg-card);
    box-shadow: 0 4px 18px rgba(25,156,130,0.24), 0 1px 4px rgba(0,0,0,0.08);
    color: var(--primary);
    font-size: 21px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    letter-spacing: -0.5px;
    font-family: var(--font-family);
}

.profile-name {
    margin: 0 0 2px;
    font-size: .97rem;
    color: var(--text-primary);
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    font-family: var(--font-family);
}

/* Fila de estado + tipo */
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.profile-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .67rem;
    font-weight: 600;
    background: var(--bg-body);
    color: var(--text-muted);
    font-family: var(--font-family);
    letter-spacing: .03em;
    border: 1px solid var(--border-light);
}

/* --- Sidebar Info Groups --- */
.profile-body { padding: 4px 0; }

.info-group {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.14s ease;
}

.info-group:last-child { border-bottom: none; }
.info-group:hover { background: var(--bg-body); }

/* Ícono del info-group */
.info-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-bg);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.info-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cuerpo de texto del info-group */
.info-body { flex: 1; min-width: 0; }

.info-label {
    display: block;
    font-size: .59rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-family: var(--font-family);
}

.info-value {
    font-size: .84rem;
    color: var(--text-primary);
    font-weight: 500;
    display: block;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
    font-family: var(--font-family);
}

.info-value--sub {
    font-size: .8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-weight: 400;
}

.info-value--sub svg {
    width: 13px;
    height: 13px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.psh3-age-hint {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 400;
    margin-left: 3px;
}

.psh3-mayoredad {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .74rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 5px;
}

.psh3-mayoredad--mayor {
    background: #dcfce7;
    color: #166534;
}

.psh3-mayoredad--menor {
    background: #fef9c3;
    color: #854d0e;
}

/* --- Main Content Area --- */
.timeline-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 0;
}

/* --- Unified Toolbar --- */
.filter-panel {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 54px;
    flex-wrap: nowrap;
}

.filter-panel__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
}

.filter-panel__label {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    color: var(--text-muted); font-size: .78rem; font-weight: 400;
    font-family: var(--font-family);
}

.filter-panel__action {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

.filter-input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--bg-card);
    flex: 1;
    min-width: 0;
    max-width: 360px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* --- Tabs Pill Style --- */
.nav-tabs-modern {
    display: flex;
    gap: 4px;
    padding: 10px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-tabs-modern::-webkit-scrollbar {
    display: none;
}

.nav-tabs-modern button {
    border: none; background: transparent;
    padding: 7px 12px; border-radius: 7px;
    font-size: .78rem; font-weight: 500;
    font-family: var(--font-family);
    color: var(--text-muted); cursor: pointer;
    transition: all .15s;
    display: inline-flex; align-items: center;
    gap: 5px; white-space: nowrap; line-height: 1;
}

.nav-tabs-modern button:hover {
    color: var(--text-primary); background: var(--bg-body);
}

.nav-tabs-modern button.active {
    color: var(--text-primary); background: var(--bg-body);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--primary);
    border-radius: 7px 7px 0 0;
}

.nav-tabs-modern button.active .psh-tab-count {
    background: var(--primary); color: #fff;
}

/* --- Tab Content --- */
.tab-content-modern {
    padding: 0;
    min-height: 300px;
}

/*
 * Tables or empty-states that sit as DIRECT children of a tab-panel div
 * (Diagnosticos, Medicamentos, Consentimientos, Cartas) need the same 20px
 * top gap that timeline-container and psh3-tab-pad already provide in their
 * respective tabs.  The "> div >" selector is intentionally one level deep:
 * it matches the x-show wrapper → immediate content, but NOT the
 * psh3-table-scroll that lives inside psh3-tab-pad (Archivos, Metas).
 */
.tab-content-modern > div > .psh3-table-scroll {
    margin-top: 20px;
}

/* --- Visitas Timeline (left-bordered cards) --- */
.timeline-container {
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline-container::before {
    display: none;
}

.timeline-item {
    position: relative;
    padding: 0;
    margin: 0;
}

.timeline-dot {
    display: none;
}

.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: border-color .15s, box-shadow .15s;
}

.timeline-content:hover {
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.visit-meta {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 8px;
}

.visit-date {
    font-size: .8rem; font-weight: 500;
    color: var(--text-secondary);
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-family);
}

.visit-date svg {
    color: var(--primary);
    flex-shrink: 0;
}

.visit-amount {
    font-size: .72rem; font-weight: 600;
    color: #059669; background: rgba(16,185,129,.08);
    padding: 2px 8px; border-radius: 10px;
    font-family: var(--font-family);
}

.visit-details h4 {
    margin: 0 0 4px; font-size: .82rem;
    color: var(--text-secondary); font-weight: 500;
    font-family: var(--font-family);
}

.visit-details p {
    margin: 0 0 5px; font-size: .8rem;
    color: var(--text-muted); line-height: 1.5;
    font-family: var(--font-family);
}
.visit-details p:last-child {
    margin-bottom: 0;
}

.next-visit-card {
    background: var(--warning-bg);
    border: 1px dashed var(--warning);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.next-visit-card svg {
    color: var(--warning);
    flex-shrink: 0;
}
.next-visit-content p {
    margin: 0; font-size: .75rem;
    color: #92400e; font-weight: 400;
    font-family: var(--font-family);
}

/* Variante "por definir": misma anatomía visual que `.next-visit-card` pero
   con tonos neutros — comunica "pendiente intencional", no "vencido/alerta". */
.next-visit-card--pending {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.next-visit-card--pending svg {
    color: #64748b;
}
.next-visit-card--pending .next-visit-content p {
    color: #475569;
}
.next-visit-card--pending .next-visit-content strong {
    color: #334155;
    font-weight: 700;
}
.next-visit-hint {
    margin-top: 4px !important;
    font-size: .68rem !important;
    color: #64748b !important;
    font-style: italic;
}

/* --- Load More Button --- */
.psh3-load-more {
    display: flex;
    justify-content: center;
    padding: 16px 0 4px;
}

.psh3-load-more-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 18px; border-radius: var(--radius-lg);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-size: .78rem; font-weight: 500;
    font-family: var(--font-family); cursor: pointer;
    transition: all .15s;
}
.psh3-load-more-btn:hover {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary);
}

/* --- Tables (scrollable with sticky header) --- */
.psh3-table-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    position: relative;
}

.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.table-modern {
    width: 100%;
    border-collapse: collapse;
}

.table-modern thead th {
    background: var(--bg-body); padding: 9px 14px;
    text-align: left; font-size: .65rem; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .04em; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
    font-family: var(--font-family);
}

.table-modern tbody td {
    padding: 10px 14px; font-size: .8rem;
    color: var(--text-secondary); font-weight: 400;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top; font-family: var(--font-family);
}

.table-modern tbody tr:hover td {
    background: var(--bg-card-hover);
}

.table-modern tbody tr.row-clickable {
    cursor: pointer;
    transition: background var(--transition);
}
.table-modern tbody tr.row-clickable:hover td {
    background: var(--primary-bg) !important;
}
.table-modern tbody tr.row-clickable:active td {
    background: rgba(25, 156, 130, 0.08) !important;
}

/* --- Empty States --- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state svg {
    margin-bottom: 12px;
    opacity: 0.4;
    color: var(--text-muted);
}
.empty-state h4 {
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
    font-size: .88rem;
    font-family: var(--font-family);
}
.empty-state p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}

.empty-timeline {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-timeline svg {
    margin-bottom: 16px;
    opacity: 0.4;
}

/* --- Upload Section (Archivos Tab) --- */
.psh3-upload-zone {
    background: var(--bg-body);
    border: 2px dashed var(--border);
    padding: 20px;
    border-radius: var(--radius);
    text-align: center;
    margin-bottom: 20px;
    transition: border-color var(--transition);
}
.psh3-upload-zone:hover {
    border-color: var(--primary);
}
.psh3-upload-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}

/* --- Bulk Actions Bar --- */
.psh3-bulk-bar {
    background: var(--primary-bg);
    border: 1px solid rgba(25, 156, 130, 0.2);
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.psh3-bulk-bar__count {
    font-size: .8rem; color: var(--primary-dark);
    font-weight: 500; font-family: var(--font-family);
}
.psh3-bulk-bar__actions {
    display: flex;
    gap: 8px;
}

/* --- File Row Selected State --- */
.psh3-file-selected td {
    background: var(--primary-bg) !important;
}

/* --- Swal Modern Popup --- */
.swal-modern-popup {
    border-radius: 16px !important;
    padding: 24px !important;
    width: 90% !important;
    max-width: 800px !important;
}
.swal-modern-title {
    font-size: 1rem !important; font-weight: 600 !important;
    color: var(--text-primary) !important; text-align: left !important;
    margin-bottom: 4px !important; font-family: var(--font-family) !important;
}
.swal-modern-subtitle {
    font-size: .8rem !important; color: var(--text-muted);
    text-align: left; margin-bottom: 16px; font-weight: 400;
    font-family: var(--font-family);
}
.swal-modern-textarea {
    width: 100%;
    min-height: 250px;
    max-height: min(60vh, 60dvh);
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-family) !important;
    font-size: 14px;
    color: var(--text-primary);
    resize: vertical;
    line-height: 1.6;
    background: var(--bg-body);
    transition: all var(--transition);
}
.swal-modern-textarea:focus {
    outline: none;
    background: var(--bg-card);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* ═══════════════════════════════════════════════════════════════
   EDIT VISIT MODAL — SweetAlert2 Overrides + Form Design
   ═══════════════════════════════════════════════════════════════ */

/* ── Popup shell ── */
.swal2-popup.swal-edit-popup {
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-family: var(--font-family) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08) !important;
    border: 1px solid var(--border-light) !important;
}

/* ── Modal title bar ── */
.swal-edit-title {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 18px 24px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.15) !important;
}

/* ── HTML content area ── */
.swal-edit-html-container {
    padding: 22px 24px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    text-align: left !important;
}

/* ── Actions footer ── */
.swal-edit-actions {
    padding: 14px 24px 20px !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-top: 1px solid var(--border-light) !important;
    margin-top: 0 !important;
    flex-direction: row !important;
}

/* ── Confirm button ── */
.swal-edit-confirm-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 0 22px !important;
    height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    cursor: pointer !important;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
    box-shadow: 0 2px 8px rgba(25,156,130,.32) !important;
    min-width: 150px !important;
    justify-content: center !important;
}
.swal-edit-confirm-btn:hover {
    background: var(--primary-dark) !important;
    box-shadow: 0 4px 16px rgba(25,156,130,.42) !important;
    transform: translateY(-1px) !important;
}
.swal-edit-confirm-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(25,156,130,.28) !important;
}

/* ── Cancel button ── */
.swal-edit-cancel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 0 18px !important;
    height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    font-family: var(--font-family) !important;
    cursor: pointer !important;
    transition: background var(--transition), border-color var(--transition), color var(--transition) !important;
}
.swal-edit-cancel-btn:hover {
    background: var(--bg-body) !important;
    border-color: var(--text-muted) !important;
    color: var(--text-primary) !important;
}

/* ── Validation message ── */
.swal2-popup.swal-edit-popup .swal2-validation-message {
    margin: 8px 24px 0 !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12.5px !important;
}

/* ── Form container ── */
.swal-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

/* ── Section block (wraps divider + grid) ── */
.swal-edit-block {
    margin-bottom: 18px;
}

/* Hint dentro de un bloque (ej. "Deja vacío = por definir" en próxima cita). */
.swal-edit-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
    font-style: italic;
}
.swal-edit-hint strong {
    color: var(--text-primary, #1e293b);
    font-style: normal;
    font-weight: 600;
}

/* ── Section divider ── */
.swal-edit-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.swal-edit-section-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.swal-edit-section-line {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* ── 2-column grid ── */
.swal-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Single field group ── */
.swal-edit-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Label ── */
.swal-edit-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1;
}
.swal-edit-label svg {
    color: var(--primary);
    flex-shrink: 0;
    opacity: .85;
}

/* ── Input wrapper (for icon + input) ── */
.swal-edit-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.swal-edit-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    z-index: 1;
}

/* ── Date / Time inputs ── */
.swal-edit-input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 36px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
.swal-edit-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.1);
    background: #fff;
}
.swal-edit-input:hover:not(:focus) {
    border-color: var(--text-muted);
}
.swal-edit-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    padding-right: 4px;
}
.swal-edit-input::-webkit-datetime-edit {
    padding: 0;
    color: var(--text-primary);
}
/* Picker estandar (.fpick) en escritorio: el trigger propio trae su icono y
   borde, asi que se oculta el icono lateral del wrap y se deja que el wrapper
   ocupe todo el ancho. El trigger iguala el alto/radio de los inputs del modal.
   En tactil (sin .fpick) el input nativo con su icono se conserva intacto. */
.swal-edit-input-wrap:has(.fpick) .swal-edit-input-icon { display: none; }
.swal-edit-input-wrap > .fpick { flex: 1 1 auto; min-width: 0; }

/* ── Textarea ── */
.swal-edit-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
    box-sizing: border-box;
    resize: vertical;
    min-height: 82px;
    line-height: 1.55;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.swal-edit-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.1);
    background: #fff;
}
.swal-edit-textarea:hover:not(:focus) {
    border-color: var(--text-muted);
}
.swal-edit-textarea::placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 13px;
}

/* ── Select (if needed) ── */
.swal-edit-select {
    width: 100%;
    height: 42px;
    padding: 0 36px 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.swal-edit-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.1);
}

/* ═══════════════════════════════════════════════════════════════
   EDIT VISIT MODAL — light header variant. Scoped to
   `.swal-edit-popup--visit` / `.swal-edit-title--visit` so it
   replaces ONLY `editarVisita`'s heavy gradient header without
   touching the shared `.swal-edit-*` base (clinical / medication
   modals keep their current look). Declared AFTER the base rules
   so the overrides win on equal/greater specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ── Popup width (visit variant) ── */
.swal2-popup.swal-edit-popup--visit {
    width: 540px !important;
    max-width: calc(100vw - 32px) !important;
}

/* ── Light header: soft surface + accent icon, no heavy gradient ── */
.swal-edit-title.swal-edit-title--visit {
    background: var(--bg-card, #fff) !important;
    color: var(--text-primary, #1e293b) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 18px 22px 15px !important;
    border-bottom: 1px solid var(--border-light) !important;
    text-shadow: none !important;
    text-align: left !important;
}
.swal-edit-title--visit .swal-edit-title__main {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary, #1e293b);
    letter-spacing: -0.01em;
}
.swal-edit-title--visit .swal-edit-title__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(25, 156, 130, .12);
    color: var(--primary);
    flex-shrink: 0;
}
.swal-edit-title--visit .swal-edit-title__sub {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
    letter-spacing: 0;
    text-transform: none;
    padding-left: 43px;
}

/* ── Content padding (visit variant) ── */
.swal-edit-html-container--visit {
    padding: 20px 22px 2px !important;
}

/* ── Mobile (≤600px): near full-width, compact header ── */
@media (max-width: 600px) {
    .swal2-popup.swal-edit-popup--visit {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
    }
    .swal-edit-title.swal-edit-title--visit {
        padding: 15px 16px 13px !important;
    }
    .swal-edit-title--visit .swal-edit-title__main {
        font-size: 14.5px;
        gap: 10px;
    }
    .swal-edit-title--visit .swal-edit-title__ico {
        width: 30px;
        height: 30px;
    }
    .swal-edit-title--visit .swal-edit-title__sub {
        font-size: 11.5px;
        padding-left: 40px;
    }
    .swal-edit-html-container--visit {
        padding: 16px 16px 2px !important;
    }
    /* Footer: stack full-width buttons, primary on top, tactile height */
    .swal-edit-popup--visit .swal-edit-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        padding: 14px 16px 18px !important;
    }
    .swal-edit-popup--visit .swal-edit-confirm-btn,
    .swal-edit-popup--visit .swal-edit-cancel-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
    }
}

/* ── Extra-small (≤400px): stack date/time so date inputs never
       overflow horizontally; full-bleed subtitle ── */
@media (max-width: 400px) {
    .swal-edit-popup--visit .swal-edit-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }
    .swal-edit-title--visit .swal-edit-title__sub {
        padding-left: 0;
    }
}

/* ── Respect reduced-motion across the edit-modal family ── */
@media (prefers-reduced-motion: reduce) {
    .swal-edit-confirm-btn,
    .swal-edit-cancel-btn,
    .swal-edit-input,
    .swal-edit-textarea,
    .swal-edit-select {
        transition: none !important;
    }
    .swal-edit-confirm-btn:hover,
    .swal-edit-confirm-btn:active {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EDIT CLINICAL DETAIL MODAL — title with subtitle, segmented
   tabs, scrollable panels and form spacing. Extends `.swal-edit-*`
   (SweetAlert2 customClass) used by `editarDetalleClinico`.
   ═══════════════════════════════════════════════════════════════ */

/* ── Popup width (clinical variant) ── */
.swal2-popup.swal-edit-popup--clinical {
    width: 620px !important;
    max-width: calc(100vw - 32px) !important;
}

/* ── Title bar overrides for stacked title + subtitle ── */
.swal-edit-title--clinical {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 18px 24px 16px !important;
    text-align: left !important;
    text-shadow: none !important;
}
.swal-edit-title__main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: -0.01em;
}
.swal-edit-title__main svg {
    flex-shrink: 0;
    opacity: .95;
}
.swal-edit-title__sub {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    padding-left: 28px;
}

/* ── HTML container (clinical) ── */
.swal-edit-html-container--clinical {
    padding: 20px 24px 4px !important;
}

/* ── Wrapper inside html container ── */
.swal-clinical-edit {
    display: flex;
    flex-direction: column;
}

/* ── Segmented tabs ── */
.swal-edit-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: var(--radius);
    margin: 0 0 18px;
}
.swal-edit-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: none;
    border-radius: 7px;
    height: 36px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    outline: none;
    white-space: nowrap;
}
.swal-edit-tab:hover:not(.is-active) {
    color: var(--text-secondary);
}
.swal-edit-tab:focus-visible {
    box-shadow: 0 0 0 2px rgba(25, 156, 130, .35);
}
.swal-edit-tab svg {
    flex-shrink: 0;
    opacity: .7;
}
.swal-edit-tab span {
    line-height: 1;
}
.swal-edit-tab.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
}
.swal-edit-tab.is-active svg {
    opacity: 1;
}

/* ── Panels ── */
.swal-edit-panel {
    display: none;
    max-height: 52vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -6px;
    padding: 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.swal-edit-panel.is-active {
    display: block;
}
.swal-edit-panel::-webkit-scrollbar {
    width: 6px;
}
.swal-edit-panel::-webkit-scrollbar-track {
    background: transparent;
}
.swal-edit-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}
.swal-edit-panel::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Form spacing inside panels ── */
.swal-edit-panel .swal-edit-form { gap: 14px; }
.swal-edit-panel .swal-edit-grid { gap: 14px; margin: 0; }

/* ── Plain input (no leading icon — resets the 36px left padding
       designed for `.swal-edit-input-wrap`'s absolute icon) ── */
.swal-edit-input--plain {
    padding-left: 14px !important;
}

/* ── Textarea size variants ── */
.swal-edit-textarea--md { min-height: 96px; }
.swal-edit-textarea--lg { min-height: 170px; max-height: 280px; }

/* ── Scrollbar polish for textareas ── */
.swal-edit-textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.swal-edit-textarea::-webkit-scrollbar {
    width: 6px;
}
.swal-edit-textarea::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}
.swal-edit-textarea::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Tablet (≤1024px): width follows viewport ── */
@media (max-width: 1023.98px) {
    .swal2-popup.swal-edit-popup--clinical {
        width: min(620px, calc(100vw - 32px)) !important;
    }
}

/* ── Mobile (≤600px): single column, taller panel, narrower padding ── */
@media (max-width: 600px) {
    .swal2-popup.swal-edit-popup--clinical {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }
    .swal-edit-title--clinical {
        padding: 16px 18px 14px !important;
    }
    .swal-edit-title__main {
        font-size: 14.5px;
    }
    .swal-edit-title__sub {
        font-size: 11.5px;
        padding-left: 0;
    }
    .swal-edit-html-container--clinical {
        padding: 16px 16px 2px !important;
    }
    .swal-edit-tabs {
        margin-bottom: 14px;
    }
    .swal-edit-tab {
        font-size: 10.5px;
        gap: 5px;
        padding: 0 8px;
        height: 38px;
    }
    .swal-edit-panel {
        max-height: 58vh;
    }
    .swal-edit-panel .swal-edit-form { gap: 12px; }
    .swal-edit-panel .swal-edit-grid { gap: 12px; }
    .swal-edit-textarea--md { min-height: 100px; }
    .swal-edit-textarea--lg { min-height: 150px; }
}

/* ── Extra-small (≤420px): hide tab icons to save space, keep label ── */
@media (max-width: 420px) {
    .swal-edit-tab {
        gap: 4px;
        padding: 0 6px;
        font-size: 10px;
    }
    .swal-edit-tab svg {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EDIT CLINICAL DETAIL MODAL — Premium polish (typography +
   fluid field interactions + styled dropdowns).
   Scoped to `.swal-edit-panel` / `.swal-edit-popup--clinical`
   so it never affects `editarVisita` or `editarMedicacion`.
   ═══════════════════════════════════════════════════════════════ */

/* ── Type rendering & numeric polish ── */
.swal2-popup.swal-edit-popup--clinical,
.swal2-popup.swal-edit-popup--clinical * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss03", "ss01";
}

/* ── Title bar: refined weight + tracking ── */
.swal-edit-title__main {
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.018em;
}
.swal-edit-title__sub {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.003em;
    color: rgba(255, 255, 255, .88);
}

/* ── Tabs: softer, more dimensional — palette tokens only ── */
.swal-edit-tabs {
    background: var(--border-light);
    padding: 5px;
    border-radius: var(--radius-lg);
    margin-bottom: 22px;
}
.swal-edit-tab {
    height: 38px;
    font-size: 11.5px;
    letter-spacing: 0.035em;
    border-radius: 8px;
    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}
.swal-edit-tab.is-active {
    box-shadow:
        0 1px 3px rgba(15, 23, 42, .09),
        0 1px 2px rgba(15, 23, 42, .04),
        0 0 0 1px rgba(15, 23, 42, .04);
}

/* ── Labels: bolder, present, sentence-case ── */
.swal-edit-panel .swal-edit-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: -0.005em;
    margin: 0 0 8px;
    line-height: 1.3;
    transition: color var(--transition);
}
.swal-edit-panel .swal-edit-group:focus-within .swal-edit-label {
    color: var(--primary);
}
.swal-edit-panel .swal-edit-group { gap: 0; }

/* ── Fields: taller, rounder, fluid — palette-aligned ── */
/* NOTE: state rules below MUST use `background-color` longhand (not the
   `background` shorthand). The select carries a chevron via
   `background-image` + repeat/position/size; the shorthand would reset
   those longhand sub-properties to their defaults (`repeat`, `0% 0%`,
   `auto`), tiling the chevron across the field. */
.swal-edit-panel .swal-edit-input,
.swal-edit-panel .swal-edit-select,
.swal-edit-panel .swal-edit-textarea {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    letter-spacing: -0.005em;
    caret-color: var(--primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
}

/* Hover — subtle background lift, darker border */
.swal-edit-panel .swal-edit-input:hover:not(:focus),
.swal-edit-panel .swal-edit-select:hover:not(:focus),
.swal-edit-panel .swal-edit-textarea:hover:not(:focus) {
    border-color: var(--text-muted);
    background-color: var(--bg-input);
}

/* Focus — soft ring, primary border, pure white bg */
.swal-edit-panel .swal-edit-input:focus,
.swal-edit-panel .swal-edit-select:focus,
.swal-edit-panel .swal-edit-textarea:focus {
    border-color: var(--primary);
    background-color: var(--bg-input);
    box-shadow:
        0 0 0 4px rgba(25, 156, 130, .13),
        0 1px 2px rgba(15, 23, 42, .04);
    outline: none;
}

/* Placeholder polish */
.swal-edit-panel .swal-edit-input::placeholder,
.swal-edit-panel .swal-edit-textarea::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.003em;
    opacity: 1;
}

/* ── SELECT: custom chevron, no OS arrow, color-shifts by state ── */
/* Chevron strokes encode palette colors:
       %2394a3b8 = var(--text-muted)
       %23475569 = var(--text-secondary)
       %23199c82 = var(--primary)
   data-URI cannot reference CSS vars, so the hex must mirror the palette. */
.swal-edit-panel .swal-edit-select {
    padding-right: 42px;
    padding-left: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.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: 18px 18px;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        background-image var(--transition);
}
.swal-edit-panel .swal-edit-select::-ms-expand { display: none; }
.swal-edit-panel .swal-edit-select:hover:not(:focus) {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.swal-edit-panel .swal-edit-select:focus {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23199c82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.swal-edit-panel .swal-edit-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--text-primary);
}
.swal-edit-panel .swal-edit-select option {
    background: var(--bg-input);
    color: var(--text-primary);
    font-weight: 500;
    padding: 10px;
}

/* ── TEXTAREA: auto-height, comfortable line-height ── */
.swal-edit-panel .swal-edit-textarea {
    height: auto;
    padding: 13px 14px;
    line-height: 1.65;
    resize: vertical;
}
.swal-edit-panel .swal-edit-textarea--md { min-height: 104px; }
.swal-edit-panel .swal-edit-textarea--lg { min-height: 184px; max-height: 320px; }

/* ── Confirm button: flat palette primary, depth via shadow only ── */
.swal-edit-popup--clinical .swal-edit-confirm-btn {
    height: 44px !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    background: var(--primary) !important;
    box-shadow:
        0 4px 14px rgba(25, 156, 130, .28),
        0 1px 2px rgba(25, 156, 130, .18) !important;
    transition:
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition) !important;
}
.swal-edit-popup--clinical .swal-edit-confirm-btn:hover {
    background: var(--primary-dark) !important;
    box-shadow:
        0 6px 20px rgba(25, 156, 130, .35),
        0 1px 2px rgba(25, 156, 130, .2) !important;
    transform: translateY(-1px) !important;
}
.swal-edit-popup--clinical .swal-edit-confirm-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(25, 156, 130, .22) !important;
}

/* ── Cancel button: filled-neutral, palette grays ── */
.swal-edit-popup--clinical .swal-edit-cancel-btn {
    height: 44px !important;
    border-radius: var(--radius) !important;
    background: var(--border-light) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition) !important;
}
.swal-edit-popup--clinical .swal-edit-cancel-btn:hover {
    background: var(--border) !important;
    border-color: var(--text-muted) !important;
    color: var(--text-primary) !important;
}

/* ── Mobile (≤600): scale typography + fields without losing premium feel ── */
@media (max-width: 600px) {
    .swal-edit-title__main {
        font-size: 15.5px;
    }
    .swal-edit-title__sub {
        font-size: 12.5px;
    }
    .swal-edit-tabs {
        margin-bottom: 16px;
    }
    .swal-edit-panel .swal-edit-label {
        font-size: 12px;
        margin-bottom: 7px;
    }
    .swal-edit-panel .swal-edit-input,
    .swal-edit-panel .swal-edit-select,
    .swal-edit-panel .swal-edit-textarea {
        height: 44px;
        font-size: 13.5px;
    }
    .swal-edit-panel .swal-edit-textarea {
        height: auto;
    }
    .swal-edit-panel .swal-edit-textarea--md { min-height: 100px; }
    .swal-edit-panel .swal-edit-textarea--lg { min-height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   EDIT CLINICAL DETAIL MODAL — Light header refresh (v2).
   Reemplaza el header con gradiente por una cabecera clara con icono
   de acento (mismo patrón que `--visit`), aligera el botón guardar y
   compacta campos/tabs. Scopeado 100% a `--clinical`: NO afecta a
   editarVisita, editarMedicacion ni a ningún otro modal `.swal-edit-*`.
   Declarado al final del bloque clínico para ganar en cascada.
   ═══════════════════════════════════════════════════════════════ */

/* ── Header claro: superficie blanca + icono de acento, sin gradiente ── */
.swal-edit-title.swal-edit-title--clinical {
    background: var(--bg-card, #fff) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 17px 22px 15px !important;
    text-shadow: none !important;
}
.swal-edit-title--clinical .swal-edit-title__main {
    color: var(--text-primary) !important;
    gap: 11px;
}
.swal-edit-title--clinical .swal-edit-title__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(25, 156, 130, .12);              /* fallback */
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    flex-shrink: 0;
}
.swal-edit-title--clinical .swal-edit-title__main svg {
    opacity: 1;
}
.swal-edit-title--clinical .swal-edit-title__sub {
    color: var(--text-muted) !important;
    padding-left: 43px;                               /* alinea bajo el título (chip 32 + gap 11) */
}

/* ── Botón guardar: más liviano (sin glow pesado) ── */
.swal-edit-popup--clinical .swal-edit-confirm-btn {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10) !important;
}
.swal-edit-popup--clinical .swal-edit-confirm-btn:hover {
    box-shadow: 0 3px 10px rgba(15, 23, 42, .12) !important;
}
.swal-edit-popup--clinical .swal-edit-confirm-btn:active {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10) !important;
}

/* ── Campos un poco más compactos y sobrios ── */
.swal-edit-panel .swal-edit-input,
.swal-edit-panel .swal-edit-select {
    height: 44px;
}

/* ── Tabs más compactas ── */
.swal-edit-tabs { margin-bottom: 18px; }
.swal-edit-tab  { height: 36px; }

/* ── Header claro en móvil ── */
@media (max-width: 600px) {
    .swal-edit-title.swal-edit-title--clinical { padding: 15px 16px 13px !important; }
    .swal-edit-title--clinical .swal-edit-title__sub { padding-left: 43px; }
}
@media (max-width: 420px) {
    .swal-edit-title--clinical .swal-edit-title__sub { padding-left: 0; }
}


/* --- Metas / Archivos Tab Padding --- */
.psh3-tab-pad {
    padding: 20px;
}

/* --- Skeleton Loader Animation --- */
.psh3-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}
.psh3-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-body) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: psh3Shimmer 1.4s ease-in-out infinite;
}
.psh3-skeleton-bar--lg { height: 20px; width: 60%; }
.psh3-skeleton-bar--md { height: 14px; width: 80%; }
.psh3-skeleton-bar--sm { height: 14px; width: 45%; }

@keyframes psh3Shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Responsive Root Fix (scoped) --- */
body,
.main-wrapper,
.content {
    max-width: 100vw;
    overflow-x: hidden;
}

/* --- Responsive: Tablet / Mobile (breakpoint oficial lg=1024) --- */
@media (max-width: 1023.98px) {
    .patient-show-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .demographics-sidebar,
    .timeline-section {
        position: static;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .demographics-sidebar {
        margin-top: 0;
    }

    /* En tablet: info-groups en 2 columnas para ocupar menos altura */
    .profile-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }

    .info-group {
        border-right: 1px solid var(--border-light);
    }

    .info-group:nth-child(even) {
        border-right: none;
    }

    .filter-panel {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
        min-height: 44px;
    }
    .filter-panel__search {
        width: 100%;
        order: 1;
    }
    .filter-panel__label {
        flex: 1;
    }
    .filter-input {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .filter-panel__action {
        margin-left: auto;
    }
}

/* Tab label system: full on desktop, short on mobile — ALWAYS visible */
.psh3-tab-short { display: none; }
.psh3-tab-full  { display: inline; }

@media (max-width: 600px) {
    .desktop-text { display: none !important; }

    /* Switch to short labels — never hide text completely */
    .psh3-tab-full  { display: none !important; }
    .psh3-tab-short { display: inline !important; }

    .nav-tabs-modern {
        padding: 6px 8px;
        gap: 2px;
    }

    .nav-tabs-modern button {
        padding: 6px 8px;
        font-size: .68rem;
        gap: 4px;
    }

    .timeline-container {
        padding: 14px 12px !important;
        gap: 10px;
    }

    .timeline-content {
        padding: 12px;
    }

    .visit-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .table-modern thead th,
    .table-modern tbody td {
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* ── Edit Visit modal — mobile overrides ── */
    .swal2-popup.swal-edit-popup {
        width: calc(100vw - 20px) !important;
        margin: 10px !important;
    }
    .swal-edit-html-container {
        padding: 16px 16px 0 !important;
    }
    .swal-edit-actions {
        padding: 12px 16px 16px !important;
        flex-direction: column-reverse !important;
    }
    .swal-edit-confirm-btn,
    .swal-edit-cancel-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
    }
    .swal-edit-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .swal-edit-block {
        margin-bottom: 14px;
    }

    .psh3-tab-pad {
        padding: 14px 12px;
    }

    .profile-header {
        padding: 0 14px 14px;
    }

    /* Móvil: volver a columna única */
    .profile-body {
        display: block;
    }

    .info-group {
        padding: 10px 14px;
        border-right: none !important;
    }
}

@media (max-width: 768px) {
    .swal-modern-popup {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 24px 16px 16px 16px !important;
    }
    .swal2-container.swal2-center > .swal2-popup.swal-modern-popup {
        align-self: flex-end !important;
    }
    .swal-modern-title { font-size: 16px !important; }
    .swal-modern-textarea {
        min-height: min(45vh, 45dvh);
        padding: 12px;
        font-size: 14px;
    }
}

/* SweetAlert2 SIEMPRE por encima de cualquier modal/overlay de la app. Su
   z-index por defecto (1060) queda DEBAJO de varios overlays del sistema
   (.cal2-overlay: 1100, .ncdtp-backdrop: 1100, modales a 2000/2500/9999), así
   que un Swal de confirmación abierto DENTRO de esos modales quedaba atrapado
   detrás y no se podía tocar (el modal interceptaba los clics). Como capa de
   confirmación, SweetAlert debe ser siempre la más alta. */
.swal2-container { z-index: 100000 !important; }



/* ════════════════════════════════════════════════════════════════
   MÓDULO: TAREAS PSICOLÓGICAS  ·  /admin/tareas
   ----------------------------------------------------------------
   Rediseño Fase visual: CSS ligero, 100% scopeado a `.tareas-index`.
   - Tokens locales en el wrapper (NO `:root`): no contamina el sistema.
   - Usa la paleta/tipografía/sombras/radios GLOBALES del design system.
   - Sin blobs, sin backdrop-filter pesado, sin gradientes oscuros,
     sin animaciones infinitas decorativas.
   - Microanimaciones 150–220ms (opacity/transform) + reduced-motion.
   Patrón espejo del módulo `.pp2` (portal pacientes v2).
════════════════════════════════════════════════════════════════ */

/* ─── Tokens locales (alias de los tokens del sistema) ───────────
   Definidos en el wrapper, NO en :root. Conservan los nombres que
   el JS inline usa (var(--sub)/var(--muted)/var(--text)) para no
   tocar el script. NO redefine --border ni --shadow-* → heredan del
   sistema (esa era la fuga global que rompía la identidad). */
.tareas-index {
  --teal:      var(--primary);
  --teal-dk:   var(--primary-dark);
  --teal-lt:   var(--primary-light);
  --teal-ring: rgba(25, 156, 130, .14);
  --teal-glow: rgba(25, 156, 130, .20);
  --violet:    var(--info);
  --violet-lt: var(--info-bg);
  --ok:   var(--success);  --ok-bg:   var(--success-bg);
  --warn: var(--warning);  --warn-bg: var(--warning-bg);
  --err:  var(--error);    --err-bg:  var(--error-bg);
  --surface: var(--bg-card);
  --bg:      var(--bg-body);
  --text:    var(--text-primary);
  --text-2:  var(--text-secondary);
  --sub:     var(--text-secondary);
  --muted:   var(--text-muted);
  --font: var(--font-family);
  --r:    var(--radius-lg);
  --r-sm: var(--radius);
  --r-xs: var(--radius-sm);
  font-family: var(--font-family);
  color: var(--text-primary);
}

.tareas-index .tp-page { position: relative; }

/* ─── Microanimación de entrada (stagger) ─────────────────────── */
@keyframes tpEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tareas-index .enter { animation: tpEnter .35s ease both; }
.tareas-index .d1 { animation-delay: .04s; }
.tareas-index .d2 { animation-delay: .10s; }
.tareas-index .d3 { animation-delay: .16s; }
.tareas-index .d4 { animation-delay: .22s; }
.tareas-index .d5 { animation-delay: .28s; }

/* ─── Tarjeta base (sustituye al viejo .glass con blur) ───────── */
.tareas-index .glass {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ─── Header del módulo (claro, integrado al admin) ───────────── */
.tareas-index .tp-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.6vw, 24px) clamp(18px, 3vw, 28px);
  margin-bottom: 20px;
}
.tareas-index .tp-hero-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.tareas-index .tp-hero-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tareas-index .tp-hero-icon {
  width: 52px; height: 52px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--teal-lt); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.tareas-index .tp-hero-icon svg { width: 24px; height: 24px; color: var(--teal); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-hero-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.2; }
.tareas-index .tp-hero-sub { font-size: .875rem; color: var(--muted); font-weight: 500; margin-top: .2rem; }
.tareas-index .tp-hero-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Chips de estadística (claros) */
.tareas-index .tp-chip { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 14px; }
.tareas-index .tp-chip-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tareas-index .tp-chip-ico.teal  { background: var(--teal-lt); color: var(--teal); }
.tareas-index .tp-chip-ico.amber { background: var(--warn-bg); color: #b45309; }
.tareas-index .tp-chip-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-chip-val { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1; }
.tareas-index .tp-chip-lbl { font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .12rem; }

/* Botón del header (ghost claro; reemplaza el viejo botón "glass") */
.tareas-index .btn-hero,
.tareas-index .btn-hero-glass {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-weight: 600; font-size: .875rem; cursor: pointer; font-family: var(--font);
  white-space: nowrap; text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tareas-index .btn-hero svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .btn-hero:hover { background: var(--teal-lt); border-color: var(--teal); color: var(--teal); }

/* ─── Panel de búsqueda ───────────────────────────────────────── */
.tareas-index .tp-search { border-radius: var(--r); padding: clamp(16px, 2.4vw, 22px) clamp(18px, 3vw, 26px); margin-bottom: 20px; }
.tareas-index .tp-search-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tareas-index .tp-search-icon {
  width: 48px; height: 48px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--teal-lt); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--teal);
}
.tareas-index .tp-search-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-search-field { flex: 1; min-width: 220px; }
.tareas-index .tp-search-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sub); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.tareas-index .tp-search-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ─── Panel / estados ─────────────────────────────────────────── */
.tareas-index .tp-panel { border-radius: var(--r); overflow: hidden; }
.tareas-index .tp-panel-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.tareas-index .tp-panel-body { padding: 20px 22px; }

.tareas-index .tp-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; }
.tareas-index .tp-state-icon {
  width: 72px; height: 72px; border-radius: var(--r); margin-bottom: 18px;
  background: var(--teal-lt); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--teal);
}
.tareas-index .tp-state-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-state h3, .tareas-index .tp-state__title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tareas-index .tp-state p { font-size: .875rem; color: var(--muted); font-weight: 500; max-width: 300px; line-height: 1.6; }
.tareas-index .tp-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--teal-lt); border-top-color: var(--teal); animation: tpSpin .7s linear infinite; margin: 0 auto 18px; }
@keyframes tpSpin { to { transform: rotate(360deg); } }

/* ─── Tarjetas de tarea ───────────────────────────────────────── */
.tareas-index .task-list { display: flex; flex-direction: column; gap: 12px; }
.tareas-index .tc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 18px 20px; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tareas-index .tc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background var(--transition); }
.tareas-index .tc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.tareas-index .tc:hover::before { background: var(--teal); }
.tareas-index .tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.tareas-index .tc-title { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.tareas-index .tc-badge { flex-shrink: 0; padding: 4px 11px; border-radius: 30px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tareas-index .tc-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.tareas-index .tc-badge.abierta { background: var(--ok-bg);   color: #065f46; } .tareas-index .tc-badge.abierta::before { background: var(--ok); }
.tareas-index .tc-badge.cerrada { background: var(--err-bg);  color: #991b1b; } .tareas-index .tc-badge.cerrada::before { background: var(--err); }
.tareas-index .tc-badge.vencida { background: var(--warn-bg); color: #92400e; } .tareas-index .tc-badge.vencida::before { background: var(--warn); }
.tareas-index .tc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8rem; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.tareas-index .tc-meta span { display: flex; align-items: center; gap: 5px; }
.tareas-index .tc-meta svg { width: 13px; height: 13px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tareas-index .tc-responded { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; color: var(--ok); background: var(--ok-bg); padding: 3px 9px; border-radius: 20px; }
.tareas-index .tc-responded svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.tareas-index .tc-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; }

/* ─── Paginación ──────────────────────────────────────────────── */
.tareas-index .tp-pagination-wrap { margin-top: 20px; }
.tareas-index .tp-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.tareas-index .tp-pagination-info { font-size: .8rem; font-weight: 500; color: var(--muted); }
.tareas-index .tp-pagination-info strong { color: var(--text); font-weight: 700; }
.tareas-index .tp-pagination-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tareas-index .tp-pg-btn {
  min-width: 36px; height: 36px; padding: 0 11px; border-radius: var(--r-xs);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-weight: 600; font-size: .85rem; cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tareas-index .tp-pg-btn:hover:not(:disabled):not(.active) { border-color: var(--teal); background: var(--teal-lt); color: var(--teal); }
.tareas-index .tp-pg-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); cursor: default; }
.tareas-index .tp-pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.tareas-index .tp-pg-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-pg-dots { color: var(--muted); padding: 0 4px; font-weight: 700; user-select: none; }
.tareas-index .tp-pg-mobile { display: none; font-size: .8rem; font-weight: 700; color: var(--text); padding: 0 10px; min-width: 68px; text-align: center; }

/* ─── Botones de acción ───────────────────────────────────────── */
.tareas-index .btn-tp {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-xs); border: 1px solid transparent;
  font-weight: 600; font-size: .83rem; cursor: pointer; font-family: var(--font); white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tareas-index .btn-tp svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .btn-tp:hover { transform: translateY(-1px); }
.tareas-index .btn-tp-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-sm); }
.tareas-index .btn-tp-primary:hover { background: var(--teal-dk); box-shadow: var(--shadow-md); }
.tareas-index .btn-tp-ghost { background: var(--teal-lt); color: var(--teal); border-color: var(--border); }
.tareas-index .btn-tp-ghost:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.tareas-index .btn-tp-warn { background: var(--warn-bg); color: #92400e; border-color: rgba(245, 158, 11, .25); }
.tareas-index .btn-tp-warn:hover { background: var(--warn); color: #fff; border-color: var(--warn); }
.tareas-index .btn-tp-danger { background: var(--err-bg); color: #991b1b; border-color: rgba(239, 68, 68, .25); }
.tareas-index .btn-tp-danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
.tareas-index .btn-tp-pdf { background: var(--info-bg); color: #0369a1; border: 1px solid rgba(59, 130, 246, .25); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-xs); font-weight: 600; font-size: .83rem; cursor: pointer; font-family: var(--font); white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.tareas-index .btn-tp-pdf svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .btn-tp-pdf:hover { background: var(--info); color: #fff; border-color: var(--info); }
.tareas-index .btn-tp-ref { background: var(--teal-lt); color: var(--teal); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 8px 14px; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.tareas-index .btn-tp-ref svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.tareas-index .btn-tp-ref:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ─── Modales ─────────────────────────────────────────────────── */
.tareas-index .tp-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.tareas-index .tp-overlay.open { opacity: 1; pointer-events: auto; }
.tareas-index .tp-modal {
  background: var(--surface); border-radius: var(--r); width: 100%; overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.99); transition: transform .22s ease;
}
.tareas-index .tp-overlay.open .tp-modal { transform: none; }
.tareas-index .tp-modal-sm { max-width: min(540px, calc(100vw - 32px)); }
.tareas-index .tp-modal-lg { max-width: min(780px, calc(100vw - 32px)); }
.tareas-index .tp-modal-xl { max-width: min(1000px, calc(100vw - 32px)); }
.tareas-index .tp-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px 14px; flex-wrap: wrap; }
.tareas-index .tp-modal-head > div:first-child { flex: 1 1 220px; min-width: 0; }
.tareas-index .tp-modal-t { font-size: 1.05rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.tareas-index .tp-modal-t svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-modal-sub { font-size: .8rem; color: var(--muted); font-weight: 500; margin-top: 4px; }
.tareas-index .tp-modal-close { width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); flex-shrink: 0; }
.tareas-index .tp-modal-close:hover { background: var(--err-bg); color: var(--err); border-color: rgba(239, 68, 68, .25); }
.tareas-index .tp-modal-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tareas-index .tp-modal-body { padding: 22px; background: var(--bg); max-height: min(72vh, 72dvh); overflow-y: auto; overscroll-behavior: contain; }
.tareas-index .tp-modal-body::-webkit-scrollbar { width: 6px; }
.tareas-index .tp-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.tareas-index .tp-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tareas-index .tmpl-modal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ─── Formulario ──────────────────────────────────────────────── */
.tareas-index .tp-fgroup { display: flex; flex-direction: column; gap: 7px; }
.tareas-index .tp-flabel { font-size: .76rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.tareas-index .tp-flabel .req { color: var(--err); font-size: .9rem; }
.tareas-index .tp-finput, .tareas-index .tp-fselect, .tareas-index .tp-ftextarea {
  width: 100%; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--surface);
  padding: 11px 14px; font-size: .92rem; font-weight: 500; font-family: var(--font); color: var(--text);
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.tareas-index .tp-finput:focus, .tareas-index .tp-fselect:focus, .tareas-index .tp-ftextarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-ring); }
.tareas-index .tp-ftextarea { resize: vertical; min-height: 160px; line-height: 1.7; }
.tareas-index .tp-fhint { font-size: .76rem; color: var(--muted); font-weight: 500; }
.tareas-index .tp-fgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tareas-index .tp-avail-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.tareas-index .tp-avail-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tareas-index .tp-avail-pill { padding: 8px 16px; border-radius: 30px; border: 1px solid var(--border); font-size: .82rem; font-weight: 600; cursor: pointer; font-family: var(--font); background: var(--surface); color: var(--sub); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.tareas-index .tp-avail-pill.selected { border-color: var(--teal); background: var(--teal-lt); color: var(--teal); }
.tareas-index .tp-ffield-date, .tareas-index .tp-ffield-days { flex: 1; min-width: 160px; }

/* ─── Plantillas (gestor) ─────────────────────────────────────── */
.tareas-index .tmpl-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.tareas-index .tmpl-filter-btn { padding: 6px 15px; border-radius: 20px; font-size: .78rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--sub); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.tareas-index .tmpl-filter-btn:hover { border-color: var(--teal); color: var(--teal); }
.tareas-index .tmpl-filter-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.tareas-index .tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tareas-index .tmpl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.tareas-index .tmpl-card::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--teal); opacity: 0; transition: opacity var(--transition); }
.tareas-index .tmpl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.tareas-index .tmpl-card:hover::before { opacity: 1; }
.tareas-index .tmpl-focus { display: inline-block; width: fit-content; padding: 3px 10px; border-radius: 6px; margin-bottom: 8px; background: var(--violet-lt); color: var(--violet); font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tareas-index .tmpl-title { font-size: .98rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tareas-index .tmpl-desc { font-size: .84rem; color: var(--sub); line-height: 1.55; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tareas-index .tmpl-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.tareas-index .tmpl-badge-sistema, .tareas-index .tmpl-badge-propia { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 6px; margin-bottom: 6px; }
.tareas-index .tmpl-badge-sistema { background: var(--teal-lt); color: var(--teal); border: 1px solid var(--border); }
.tareas-index .tmpl-badge-propia { background: var(--info-bg); color: #0369a1; border: 1px solid rgba(59, 130, 246, .2); }

/* ─── Banner de paciente en header del panel ──────────────────── */
.tareas-index .tp-patient-banner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tareas-index .tp-patient-avatar { width: 40px; height: 40px; border-radius: var(--r-xs); flex-shrink: 0; background: var(--teal-lt); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.tareas-index .tp-patient-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.tareas-index .tp-patient-count { font-size: .78rem; color: var(--muted); font-weight: 500; margin-top: 2px; }

/* ─── Detalle / respuesta (modal) ─────────────────────────────── */
.tareas-index .resp-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px; margin-top: 14px; }
.tareas-index .resp-block h4 { font-size: .85rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.tareas-index .resp-text { background: var(--teal-lt); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 14px; font-size: .9rem; color: var(--text); line-height: 1.7; white-space: pre-wrap; }
.tareas-index .resp-meta-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); font-weight: 500; margin-top: 10px; }
.tareas-index .instr-block { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: 0 var(--r-xs) var(--r-xs) 0; padding: 14px 16px; font-size: .9rem; color: var(--text-2); line-height: 1.7; white-space: pre-wrap; }

/* ─── Modal de referencias bibliográficas ─────────────────────── */
.tareas-index .ref-banner { display: flex; gap: 14px; align-items: flex-start; background: var(--teal-lt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px 18px; margin-bottom: 22px; color: var(--teal-dk); font-size: .875rem; line-height: 1.6; }
.tareas-index .ref-banner svg { flex-shrink: 0; margin-top: 2px; stroke: var(--teal); }
.tareas-index .ref-banner p { margin: 0; }
.tareas-index .ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tareas-index .ref-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.tareas-index .ref-card__badge { display: inline-block; width: fit-content; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .65rem; border-radius: 6px; }
.tareas-index .ref-card__badge.tcc   { background: #eff6ff; color: #1d4ed8; }
.tareas-index .ref-card__badge.mbsr  { background: #f0fdf4; color: #15803d; }
.tareas-index .ref-card__badge.act   { background: #fff7ed; color: #c2410c; }
.tareas-index .ref-card__badge.dbt   { background: #fdf4ff; color: #9333ea; }
.tareas-index .ref-card__badge.relax { background: #f0fdfa; color: #199c82; }
.tareas-index .ref-card__badge.edu   { background: #fefce8; color: #a16207; }
.tareas-index .ref-card__badge.pos   { background: #fff0f3; color: #be123c; }
.tareas-index .ref-card__badge.sist  { background: #f0fdf4; color: #166534; }
.tareas-index .ref-card__enfoque { font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.tareas-index .ref-card__tecnicas { display: flex; flex-wrap: wrap; gap: 5px; }
.tareas-index .ref-card__tecnicas span { font-size: .72rem; padding: .2rem .55rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--sub); font-weight: 500; }
.tareas-index .ref-card__list { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.tareas-index .ref-card__list li { font-size: .78rem; color: var(--text-2); line-height: 1.55; list-style: disc; }
.tareas-index .ref-card__list li strong { color: var(--text); }
.tareas-index .ref-card__list li em { font-style: italic; }
.tareas-index .ref-footer { display: flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--muted); font-weight: 500; padding: 14px 0 0; border-top: 1px solid var(--border); }
.tareas-index .ref-footer svg { flex-shrink: 0; stroke: var(--muted); fill: none; }

/* ─── Toast ───────────────────────────────────────────────────── */
.tareas-index .tp-toast { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast, 1100); background: #1e293b; color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-size: .84rem; font-weight: 500; font-family: var(--font); box-shadow: var(--shadow-lg); max-width: 330px; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.tareas-index .tp-toast.show { opacity: 1; transform: none; }
.tareas-index .tp-toast.ok .tp-tmark  { color: #4ade80; }
.tareas-index .tp-toast.err .tp-tmark { color: #f87171; }
.tareas-index .tp-tmark { font-weight: 800; font-size: 1rem; }

/* ─── Select2 — caja de selección (scopeada al módulo) ─────────── */
.tareas-index .select2-container--default .select2-selection--single { height: 46px !important; border-radius: var(--r-xs) !important; border: 1px solid var(--border) !important; background: var(--surface) !important; }
.tareas-index .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 14px !important; font-weight: 600 !important; letter-spacing: -.005em !important; font-family: var(--font) !important; font-size: .92rem !important; color: var(--text) !important; }
.tareas-index .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; right: 12px !important; }
.tareas-index .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--teal) !important; box-shadow: 0 0 0 3px var(--teal-ring) !important; }
.tareas-index .tp-modal-body .select2-container { width: 100% !important; }
.tareas-index .tp-modal .select2-container--open .select2-dropdown { z-index: 10050; }

/* Dropdown de select2 del módulo (se monta en <body>, fuera del scope):
   se marca con dropdownCssClass: 'tp-s2' desde el JS y usa tokens del
   sistema directamente. */
.select2-dropdown.tp-s2 {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .28), 0 4px 12px -6px rgba(15, 23, 42, .12) !important;
  overflow: hidden !important;
  font-family: var(--font-family) !important;
}
.select2-dropdown.tp-s2 .select2-results__options { padding: 6px !important; max-height: 300px !important; }
.select2-dropdown.tp-s2 .select2-results__option {
  padding: 10px 13px !important;
  margin: 1px 0 !important;
  min-height: 0 !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em !important;
  color: var(--text-primary) !important;
  display: block !important;
  transition: background-color .13s ease, color .13s ease, transform .13s ease !important;
}
.select2-dropdown.tp-s2 .select2-results__option--highlighted,
.select2-dropdown.tp-s2 .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateX(2px) !important;
}
.select2-dropdown.tp-s2 .select2-results__option--selected {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
  font-weight: 700 !important;
}
.select2-dropdown.tp-s2 .select2-results__option[aria-disabled="true"] {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}
/* Etiquetas de grupo (optgroup: "Plantillas del Sistema" / "Mis Plantillas") */
.select2-dropdown.tp-s2 .select2-results__group {
  font-size: .66rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--text-muted) !important;
  padding: 10px 11px 4px !important;
}
/* Buscador interno del dropdown */
.select2-dropdown.tp-s2 .select2-search--dropdown { padding: 8px !important; }
.select2-dropdown.tp-s2 .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  font-family: var(--font-family) !important;
  color: var(--text-primary) !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.select2-dropdown.tp-s2 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(25, 156, 130, .14) !important;
}
/* Entrada notoria pero optimizada: solo opacity + transform (GPU). El dropdown
   se monta en <body>, por eso estas reglas NO están scopeadas a .tareas-index. */
@keyframes tpS2In   { from { opacity: 0; transform: translateY(-12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tpS2InUp { from { opacity: 0; transform: translateY(12px)  scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tpS2Fade { from { opacity: 0; } to { opacity: 1; } }
.select2-dropdown.tp-s2 { transform-origin: top center; animation: tpS2In .24s cubic-bezier(.16, 1, .3, 1) both; }
.select2-dropdown--above.tp-s2 { transform-origin: bottom center; animation-name: tpS2InUp; }
@media (prefers-reduced-motion: reduce) {
  .select2-dropdown.tp-s2 { animation: tpS2Fade .14s ease both !important; }
}
@media (pointer: coarse) {
  .select2-dropdown.tp-s2 .select2-search--dropdown .select2-search__field { font-size: 16px !important; }
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tareas-index .tp-panel-head, .tareas-index .tp-panel-body { padding: 14px 16px; }
  .tareas-index .tp-hero { padding: 16px 18px; }
  .tareas-index .tp-hero-right { width: 100%; }
  .tareas-index .tp-chip { flex: 1; }
  .tareas-index .ref-grid, .tareas-index .tmpl-grid { grid-template-columns: 1fr; }
  .tareas-index .btn-tp, .tareas-index .btn-hero, .tareas-index .tp-pg-btn { min-height: var(--touch-min); }
  .tareas-index .tp-modal-close { width: var(--touch-min); height: var(--touch-min); }
}
@media (max-width: 560px) {
  .tareas-index .tp-fgrid-2 { grid-template-columns: 1fr; }
  .tareas-index .tp-hero-left { flex-wrap: wrap; }
  .tareas-index .tp-modal-body { padding: 16px; }
  .tareas-index .tp-modal-foot { flex-wrap: wrap; }
  .tareas-index .tp-modal-foot .btn-tp, .tareas-index .tp-modal-foot .btn-hero { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .tareas-index .tc-actions { gap: 6px; }
  .tareas-index .tc-actions .btn-tp { flex: 1 1 auto; min-width: 0; }
  .tareas-index .tp-avail-row { flex-direction: column; }
  .tareas-index .tp-pagination { justify-content: center; }
  .tareas-index .tp-pagination-info { order: 1; width: 100%; text-align: center; }
  .tareas-index .tp-pg-btn.num, .tareas-index .tp-pg-dots { display: none; }
  .tareas-index .tp-pg-mobile { display: inline-flex; align-items: center; justify-content: center; }
  .tareas-index .tmpl-filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tareas-index .tmpl-filter-bar::-webkit-scrollbar { display: none; }
  .tareas-index .tmpl-filter-btn { flex-shrink: 0; }
  .tareas-index .btn-tp-ref span { display: none; }
  /* Header del modal Plantillas: las acciones bajan a una 2ª fila a ancho
     completo para que "Nueva Plantilla" no se corte en móvil. */
  .tareas-index .tp-modal-head { padding: 14px 16px; }
  .tareas-index .tmpl-modal-actions { width: 100%; justify-content: flex-end; }
  .tareas-index .tmpl-modal-actions .btn-tp { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .tareas-index .tmpl-modal-actions .tp-modal-close { flex: 0 0 auto; }
}

/* ─── Accesibilidad: respeta prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  .tareas-index *,
  .tareas-index *::before,
  .tareas-index *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  PORTAL PACIENTES v2 — Tab-based redesign
 *  Prefix: pp2-
 * ═══════════════════════════════════════════════════════════════ */

.pp2 { --pp-font: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); --pp-mono: 'JetBrains Mono', monospace;
  --pp-pri: #199c82; --pp-pri-dk: #116d5b; --pp-pri-lt: #e8f5f2; --pp-pri-glow: rgba(25,156,130,.15);
  --pp-text: #0f172a; --pp-text2: #334155; --pp-sub: #64748b; --pp-muted: #94a3b8;
  --pp-bg: #f8fafc; --pp-card: #fff; --pp-border: #e2e8f0; --pp-border2: #f1f5f9;
  --pp-ok: #10b981; --pp-warn: #f59e0b; --pp-err: #ef4444; --pp-blue: #3b82f6; --pp-purple: #8b5cf6;
  --pp-r: 12px; --pp-r-sm: 8px; --pp-r-lg: 16px;
  --pp-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
  --pp-shadow-md: 0 4px 12px rgba(15,23,42,.06);
  font-family: var(--pp-font); background: var(--pp-bg); min-height: calc(100vh - var(--topbar-height, 64px));
}

/* ── Compact Header ──────────────────────────────────────── */
.pp2-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.5rem; background: var(--pp-card);
  border-bottom: 1px solid var(--pp-border);
}
.pp2-header-left { display: flex; align-items: center; gap: .65rem; }
.pp2-header-ico { width: 34px; height: 34px; border-radius: 10px;
  background: var(--pp-pri-lt); color: var(--pp-pri);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pp2-header-ico svg { width: 17px; height: 17px; }
.pp2-header-title { font-size: 1.1rem; font-weight: 800; color: var(--pp-text); letter-spacing: -.02em; }

.pp2-header-kpis { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.pp2-kpi { display: flex; align-items: baseline; gap: .35rem; }
.pp2-kpi-val { font-size: 1.05rem; font-weight: 900; color: var(--pp-text); }
.pp2-kpi-val small { font-size: .75rem; font-weight: 600; color: var(--pp-muted); }
.pp2-kpi-lbl { font-size: .7rem; font-weight: 600; color: var(--pp-muted); }
.pp2-kpi--alert .pp2-kpi-val { color: var(--pp-warn); }
.pp2-kpi--alert .pp2-kpi-lbl { color: var(--pp-warn); font-weight: 700; }
.pp2-kpi--warn .pp2-kpi-val { color: var(--pp-err); }
.pp2-kpi-sep { width: 1px; height: 20px; background: var(--pp-border); }

/* flex-wrap: la barra de acciones ENVUELVE en vez de desbordar cuando no cabe
   (fix root del recorte del botón derecho + overflow horizontal en móvil
   portrait). min-width:0 evita que empuje el ancho del header más allá del
   viewport. */
.pp2-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.pp2-hdr-btn {
  width: 34px; height: 34px; border-radius: var(--pp-r-sm); border: 1px solid var(--pp-border);
  background: var(--pp-card); color: var(--pp-sub); display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all .15s; text-decoration: none;
}
.pp2-hdr-btn svg { width: 15px; height: 15px; }
.pp2-hdr-btn:hover { border-color: var(--pp-pri); color: var(--pp-pri); background: var(--pp-pri-lt); }
.pp2-hdr-btn.active { background: var(--pp-pri); color: #fff; border-color: var(--pp-pri); }
.pp2-hdr-btn--accent { border-color: rgba(25,156,130,.3); color: var(--pp-pri); }
.pp2-hdr-btn--accent:hover { background: var(--pp-pri); color: #fff; }

/* Header actions — botones ETIQUETADOS (con texto). Migrado desde el <style>
   inline de admin/portal-pacientes/index.blade.php para centralizar el CSS.
   Debe ir DESPUÉS del bloque base .pp2-hdr-btn de arriba (misma cascada que
   tenía el @push, que cargaba tras app.css). */
.pp2-hdr-btn {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.pp2-hdr-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pp2-hdr-btn span { line-height: 1; }
/* En viewports angostos colapsa a solo-icono para ahorrar espacio. */
@media (max-width: 1100px) {
  .pp2-hdr-btn { padding: 0; width: 34px; }
  .pp2-hdr-btn span { display: none; }
}
/* Touch (móvil/tablet): área táctil ≥44px en los botones de acción del header
   (accesibilidad). min-height gana sobre el height:34px base. Solo en punteros
   gruesos: en escritorio el mouse hace innecesario el tamaño extra. Debe ir
   DESPUÉS del bloque max-width:1100px para ganar en orden de cascada. */
@media (pointer: coarse) {
  .pp2-hdr-btn { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 1100px) {
  .pp2-hdr-btn { width: 44px; }
  .pp2-hdr-btn svg { width: 17px; height: 17px; }
}

/* ── Main Split Layout ───────────────────────────────────── */
.pp2-main[hidden] { display: none; }
.pp2-main { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - var(--topbar-height, 64px) - 55px); }

/* ── Sidebar (Patient List) ──────────────────────────────── */
.pp2-sidebar {
  display: flex; flex-direction: column; background: var(--pp-card);
  border-right: 1px solid var(--pp-border); overflow: hidden;
}
.pp2-sb-head { padding: 1rem 1rem .75rem; }
.pp2-sb-search { position: relative; margin-bottom: .6rem; }
.pp2-sb-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--pp-muted); pointer-events: none; }
.pp2-sb-search input {
  width: 100%; height: 38px; border-radius: var(--pp-r-sm); border: 1.5px solid var(--pp-border);
  background: var(--pp-bg); padding: 0 .75rem 0 2rem; font-size: .82rem; font-weight: 600;
  font-family: var(--pp-font); outline: none; color: var(--pp-text); transition: all .15s;
}
.pp2-sb-search input:focus { border-color: var(--pp-pri); box-shadow: 0 0 0 3px rgba(25,156,130,.08); background: #fff; }
.pp2-sb-search input::placeholder { color: var(--pp-muted); font-weight: 500; }

.pp2-sb-filters { display: flex; flex-wrap: wrap; gap: .3rem; }
.pp2-pill {
  padding: .25rem .6rem; border-radius: var(--radius-lg); border: 1.5px solid var(--pp-border);
  background: var(--pp-card); font-size: .68rem; font-weight: 700; color: var(--pp-sub);
  cursor: pointer; font-family: var(--pp-font); transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .25rem;
}
.pp2-pill.active { border-color: var(--pp-pri); color: var(--pp-pri); background: var(--pp-pri-lt); }
.pp2-pill:hover:not(.active) { border-color: var(--pp-pri); color: var(--pp-pri); }
.pp2-pill--alert { color: #b45309; border-color: rgba(245,158,11,.35); }
.pp2-pill--alert.active { color: #92400e; border-color: var(--pp-warn); background: rgba(245,158,11,.1); }

/* Patient rows */
.pp2-sb-list { flex: 1; overflow-y: auto; }
.pp2-sb-list::-webkit-scrollbar { width: 3px; }
.pp2-sb-list::-webkit-scrollbar-thumb { background: var(--pp-border); border-radius: 2px; }

.pp2-row {
  display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem;
  cursor: pointer; border-bottom: 1px solid var(--pp-border2); transition: background .12s; position: relative;
}
.pp2-row:hover { background: var(--pp-bg); }
.pp2-row.active { background: var(--pp-pri-lt); border-left: 3px solid var(--pp-pri); padding-left: calc(1rem - 3px); }
.pp2-row.active .pp2-row-name { color: var(--pp-pri-dk); }

.pp2-row-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--pp-pri-lt); color: var(--pp-pri);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
}
.pp2-row.active .pp2-row-avatar { background: var(--pp-pri); color: #fff; }

.pp2-row-info { flex: 1; min-width: 0; }
.pp2-row-name { font-size: .82rem; font-weight: 700; color: var(--pp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp2-row-meta { font-size: .68rem; font-weight: 600; color: var(--pp-muted); }

.pp2-unread {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--pp-warn); color: #fff; font-size: .65rem; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(245,158,11,.3);
}
.pp2-alert-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pp-warn); flex-shrink: 0;
  box-shadow: 0 0 5px rgba(245,158,11,.4); animation: pp2-pulse 2s ease-in-out infinite;
}
@keyframes pp2-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.pp2-status {
  flex-shrink: 0; padding: .18rem .5rem; border-radius: var(--radius-lg); font-size: .62rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: .25rem;
}
.pp2-status::before { content:''; width: 5px; height: 5px; border-radius: 50%; }
.pp2-status.ok { background: #dcfce7; color: #065f46; }
.pp2-status.ok::before { background: var(--pp-ok); }
.pp2-status.off { background: #fee2e2; color: #991b1b; }
.pp2-status.off::before { background: var(--pp-err); }
.pp2-status.none { background: var(--pp-border2); color: var(--pp-sub); }
.pp2-status.none::before { background: var(--pp-muted); }

.pp2-no-results { text-align: center; padding: 3rem 1rem; color: var(--pp-muted); font-size: .85rem; font-weight: 600; }

/* Bulk checkboxes */
.pp2-chk { display: none; flex-shrink: 0; cursor: pointer; position: relative; width: 18px; height: 18px; }
.pp2-bulk-active .pp2-chk { display: flex; }
.pp2-chk-mark {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--pp-border);
  background: #fff; display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.pp-bulk-input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-bulk-input:checked + .pp2-chk-mark { background: var(--pp-pri); border-color: var(--pp-pri); }
.pp-bulk-input:checked + .pp2-chk-mark::after { content:''; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }

.pp2-back-btn {
  display: none; align-items: center; gap: .35rem; padding: .6rem 1rem;
  border-top: 1px solid var(--pp-border); background: var(--pp-card);
  font-size: .8rem; font-weight: 700; color: var(--pp-pri); cursor: pointer; border: none; font-family: var(--pp-font);
}
.pp2-back-btn svg { width: 14px; height: 14px; }

/* ── Detail Panel ────────────────────────────────────────── */
.pp2-detail { background: var(--pp-bg); overflow-y: auto; padding: 1.25rem; }

.pp2-empty { text-align: center; padding: 4rem 1.5rem; color: var(--pp-muted); }
.pp2-empty svg { width: 48px; height: 48px; margin: 0 auto .8rem; display: block; opacity: .2; }
.pp2-empty p { font-size: .88rem; font-weight: 600; }

.pp2-loading { text-align: center; padding: 4rem 1.5rem; }
.pp2-spinner { width: 36px; height: 36px; border: 3px solid var(--pp-pri-lt); border-top-color: var(--pp-pri); border-radius: 50%; animation: pp2-spin .6s linear infinite; margin: 0 auto .8rem; }
@keyframes pp2-spin { to { transform: rotate(360deg); } }
.pp2-loading p { font-size: .85rem; color: var(--pp-sub); font-weight: 600; }

/* ── Patient Bar (compact header) ────────────────────────── */
.pp2-patient-bar {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1.15rem;
  background: var(--pp-card); border: 1px solid var(--pp-border); border-radius: var(--pp-r);
  box-shadow: var(--pp-shadow); margin-bottom: 0;
}
.pp2-bar-avatar {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: #fff;
  background: var(--pp-pri); position: relative;
}
.pp2-bar-avatar.off { background: var(--pp-err); }
.pp2-bar-info { flex: 1; min-width: 0; }
.pp2-bar-name { font-size: 1rem; font-weight: 800; color: var(--pp-text); letter-spacing: -.02em; }
.pp2-bar-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.pp2-bar-chip { font-size: .68rem; font-weight: 600; color: var(--pp-muted); padding: .15rem .5rem; background: var(--pp-bg); border-radius: 6px; }
.pp2-bar-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; margin-left: auto; }
.pp2-bar-feed-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem; border-radius: var(--pp-r-sm);
  border: 1px solid var(--pp-border); background: var(--pp-card);
  color: var(--pp-sub); font-size: .72rem; font-weight: 700;
  cursor: pointer; font-family: var(--pp-font); transition: all .15s;
}
.pp2-bar-feed-btn svg { width: 13px; height: 13px; }
.pp2-bar-feed-btn:hover { border-color: var(--pp-pri); color: var(--pp-pri); background: var(--pp-pri-lt); }
.pp2-bar-back { display: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--pp-border); background: var(--pp-card); color: var(--pp-sub); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.pp2-bar-back svg { width: 16px; height: 16px; }

/* ── Tabs ────────────────────────────────────────────────── */
.pp2-tabs {
  display: flex; gap: 0; margin-top: .75rem; background: var(--pp-card);
  border: 1px solid var(--pp-border); border-radius: var(--pp-r) var(--pp-r) 0 0;
  border-bottom: none; overflow-x: auto; scrollbar-width: none;
}
.pp2-tabs::-webkit-scrollbar { display: none; }

.pp2-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .75rem 1rem; font-size: .8rem; font-weight: 700; color: var(--pp-sub);
  cursor: pointer; border: none; background: none; font-family: var(--pp-font);
  border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; position: relative;
}
.pp2-tab svg { width: 14px; height: 14px; }
.pp2-tab:hover { color: var(--pp-text); background: var(--pp-bg); }
.pp2-tab.active { color: var(--pp-pri); border-bottom-color: var(--pp-pri); background: var(--pp-card); }
.pp2-tab-badge {
  min-width: 18px; height: 18px; border-radius: 10px; background: var(--pp-pri-lt); color: var(--pp-pri);
  font-size: .6rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

.pp2-tab-panels { background: var(--pp-card); border: 1px solid var(--pp-border); border-top: none; border-radius: 0 0 var(--pp-r) var(--pp-r); min-height: 300px; }
.pp2-tab-panel { display: none; padding: 1.25rem; }
.pp2-tab-panel.active { display: block; animation: pp2-fadeIn .2s ease; }
@keyframes pp2-fadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: none; } }

/* ── Tab: Resumen — Alerts ───────────────────────────────── */
.pp2-alerts { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; padding: .85rem; background: rgba(245,158,11,.04); border: 1px solid rgba(245,158,11,.15); border-radius: var(--pp-r-sm); }
.pp2-alert-item { display: flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 700; color: var(--pp-text2); }
.pp2-alert-ico { display: flex; align-items: center; flex-shrink: 0; }
.pp2-alert-ico svg { width: 14px; height: 14px; }

/* ── Tab: Resumen — Onboarding ───────────────────────────── */
.pp2-onboarding { margin-bottom: 1rem; }
.pp2-ob-bar { height: 5px; background: var(--pp-border2); border-radius: 3px; margin-bottom: .6rem; overflow: hidden; }
.pp2-ob-fill { height: 100%; background: var(--pp-pri); border-radius: 3px; transition: width .5s ease; }
.pp2-ob-steps { display: flex; flex-wrap: wrap; gap: .35rem; }
.pp2-ob-step { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 6px; background: var(--pp-bg); color: var(--pp-muted); border: 1px solid var(--pp-border2); }
.pp2-ob-step.done { background: #dcfce7; color: #065f46; border-color: rgba(16,185,129,.2); }

/* ── Tab: Resumen — Metrics Grid ─────────────────────────── */
.pp2-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 1rem; }
.pp2-metric {
  padding: .85rem; border-radius: var(--pp-r-sm); background: var(--pp-bg); border: 1px solid var(--pp-border2);
  transition: border-color .15s;
}
.pp2-metric:hover { border-color: var(--pp-border); }
.pp2-metric-val { font-size: 1.15rem; font-weight: 900; color: var(--pp-text); }
.pp2-metric-lbl { font-size: .68rem; font-weight: 700; color: var(--pp-muted); margin-top: .1rem; }
.pp2-metric-sub { font-size: .6rem; font-weight: 600; color: var(--pp-muted); opacity: .7; display: block; margin-top: .1rem; }

.pp2-tag { font-size: .58rem; font-weight: 800; padding: .12rem .4rem; border-radius: 5px; display: inline-block; margin-top: .2rem; margin-right: .2rem; }
.pp2-tag.open { background: rgba(245,158,11,.1); color: #b45309; }
.pp2-tag.closed { background: rgba(16,185,129,.1); color: #065f46; }
.pp2-tag.expired { background: rgba(239,68,68,.1); color: #991b1b; }

.pp2-week { padding-top: .85rem; border-top: 1px solid var(--pp-border2); }
.pp2-week-lbl { font-size: .65rem; font-weight: 800; color: var(--pp-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.pp2-week-days { display: flex; gap: .4rem; justify-content: space-between; }
.pp2-wd { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: 1; }
.pp2-wd span { font-size: .62rem; font-weight: 700; color: var(--pp-muted); }
.pp2-wd-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--pp-border2); border: 2px solid transparent; }
.pp2-wd.has .pp2-wd-dot { background: var(--pp-pri); box-shadow: 0 2px 6px var(--pp-pri-glow); }
.pp2-wd.has span { color: var(--pp-pri); }
.pp2-wd.today .pp2-wd-dot { border-color: var(--pp-pri); }

/* ── Tab: Credenciales ───────────────────────────────────── */
.pp2-cred-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pp2-badge { padding: .3rem .75rem; border-radius: var(--radius-lg); font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; gap: .35rem; }
.pp2-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.pp2-badge.active { background: #dcfce7; color: #065f46; }
.pp2-badge.active .pp2-badge-dot { background: var(--pp-ok); }
.pp2-badge.inactive { background: #fee2e2; color: #991b1b; }
.pp2-badge.inactive .pp2-badge-dot { background: var(--pp-err); }
.pp2-cred-date { font-size: .72rem; font-weight: 600; color: var(--pp-muted); }

.pp2-cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1rem; }
.pp2-cred-card { padding: 1rem; border-radius: var(--pp-r-sm); background: var(--pp-bg); border: 1px solid var(--pp-border2); }
.pp2-cred-lbl { font-size: .65rem; font-weight: 800; color: var(--pp-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .45rem; }
.pp2-cred-box { display: flex; align-items: center; gap: .4rem; }
.pp2-cred-val { font-size: .9rem; font-weight: 700; color: var(--pp-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp2-cred-email { font-size: .72rem; color: var(--pp-muted); font-weight: 600; margin-top: .35rem; }
.pp2-cred-email em { font-style: italic; }

.pp2-cred-secure { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: var(--pp-r-sm); background: rgba(59,130,246,.03); border: 1px dashed rgba(59,130,246,.2); }
.pp2-cred-secure svg { width: 18px; height: 18px; color: var(--pp-blue); opacity: .5; flex-shrink: 0; }
.pp2-cred-secure strong { font-size: .78rem; color: var(--pp-text2); display: block; }
.pp2-cred-secure span { font-size: .68rem; color: var(--pp-muted); }

.pp2-icon-btn { width: 30px; height: 30px; border-radius: 7px; background: var(--pp-card); border: 1px solid var(--pp-border); display: flex; align-items: center; justify-content: center; color: var(--pp-sub); cursor: pointer; transition: all .15s; flex-shrink: 0; }
.pp2-icon-btn svg { width: 13px; height: 13px; }
.pp2-icon-btn:hover { background: var(--pp-pri-lt); color: var(--pp-pri); border-color: rgba(25,156,130,.25); }

.pp2-cred-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .85rem; border-top: 1px solid var(--pp-border2); }
.pp2-act-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem;
  border-radius: var(--pp-r-sm); border: 1.5px solid var(--pp-border); background: var(--pp-card);
  font-size: .76rem; font-weight: 700; color: var(--pp-sub); cursor: pointer; font-family: var(--pp-font); transition: all .18s;
}
.pp2-act-btn svg { width: 13px; height: 13px; }
.pp2-act-btn:hover { border-color: var(--pp-pri); color: var(--pp-pri); background: var(--pp-pri-lt); }
.pp2-act-btn.accent { border-color: rgba(25,156,130,.3); color: var(--pp-pri); font-weight: 800; }
.pp2-act-btn.accent:hover { background: var(--pp-pri); color: #fff; }
.pp2-act-btn.warn { border-color: rgba(239,68,68,.25); color: var(--pp-err); }
.pp2-act-btn.warn:hover { background: #fee2e2; }
.pp2-act-btn.ok { border-color: rgba(16,185,129,.25); color: var(--pp-ok); }
.pp2-act-btn.ok:hover { background: #dcfce7; }

/* Edit zone */
.pp2-edit-zone { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .2s; }
.pp2-edit-zone.open { max-height: 280px; opacity: 1; margin-bottom: .85rem; }
.pp2-edit-inner { padding: 1rem; background: var(--pp-bg); border: 1px solid var(--pp-border); border-radius: var(--pp-r-sm); margin-top: .85rem; }
.pp2-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .65rem; }
.pp2-field { display: flex; flex-direction: column; gap: .25rem; }
.pp2-field label { font-size: .68rem; font-weight: 700; color: var(--pp-text2); text-transform: uppercase; letter-spacing: .04em; }
.pp2-field label small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--pp-muted); }
.pp2-field input {
  height: 36px; border: 1px solid var(--pp-border); border-radius: 7px; padding: 0 .7rem;
  font-size: .82rem; font-family: var(--pp-font); color: var(--pp-text); background: var(--pp-card); outline: none; transition: all .15s;
}
.pp2-field input:focus { border-color: var(--pp-pri); box-shadow: 0 0 0 3px rgba(25,156,130,.08); }
.pp2-edit-error { font-size: .75rem; color: var(--pp-err); font-weight: 600; margin-bottom: .5rem; display: none; }
.pp2-edit-btns { display: flex; gap: .5rem; justify-content: flex-end; }
.pp2-btn-cancel { padding: .4rem .8rem; border-radius: 7px; background: var(--pp-card); color: var(--pp-sub); border: 1px solid var(--pp-border); font-size: .78rem; font-weight: 600; cursor: pointer; font-family: var(--pp-font); }
.pp2-btn-save { padding: .4rem .8rem; border-radius: 7px; background: var(--pp-pri); color: #fff; border: none; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: var(--pp-font); transition: background .15s; }
.pp2-btn-save:hover { background: var(--pp-pri-dk); }
.pp2-btn-save:disabled { opacity: .5; cursor: not-allowed; }

/* No account form */
.pp2-no-acc { text-align: center; padding: 2rem 1rem; }
.pp2-no-acc-ico { width: 56px; height: 56px; margin: 0 auto .85rem; color: var(--pp-pri); opacity: .5; }
.pp2-no-acc h3 { font-size: 1.05rem; font-weight: 800; color: var(--pp-text); margin-bottom: .4rem; }
.pp2-no-acc p { font-size: .82rem; color: var(--pp-muted); max-width: 360px; margin: 0 auto 1.25rem; }
.pp2-create-form { max-width: 440px; margin: 0 auto; text-align: left; }
.pp2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.pp2-btn-create {
  width: 100%; height: 44px; border-radius: var(--pp-r-sm); border: none;
  background: var(--pp-pri); color: #fff; font-size: .85rem; font-weight: 800; font-family: var(--pp-font);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: all .2s; box-shadow: 0 4px 12px var(--pp-pri-glow);
}
.pp2-btn-create svg { width: 15px; height: 15px; }
.pp2-btn-create:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--pp-pri-glow); }

/* ── Tab: Timeline ───────────────────────────────────────── */
.pp2-tl { display: flex; flex-direction: column; }
.pp2-tl-date { font-size: .68rem; font-weight: 800; color: var(--pp-muted); text-transform: uppercase; letter-spacing: .05em; padding: .5rem 0 .3rem; border-bottom: 1px solid var(--pp-border2); margin-bottom: .4rem; }
.pp2-tl-item { display: flex; gap: .7rem; padding: .5rem 0; }
.pp2-tl-dot { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid; }
.pp2-tl-dot svg { width: 13px; height: 13px; }
.pp2-tl-body { flex: 1; min-width: 0; padding-top: .15rem; }
.pp2-tl-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.pp2-tl-title { font-size: .78rem; font-weight: 700; color: var(--pp-text); }
.pp2-tl-time { font-size: .68rem; font-weight: 700; color: var(--pp-muted); font-family: var(--pp-mono); }
.pp2-tl-detail { font-size: .72rem; font-weight: 600; color: var(--pp-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp2-tl-meta { font-size: .65rem; font-weight: 600; color: var(--pp-muted); font-family: var(--pp-mono); }

/* ── Tab: Notas ──────────────────────────────────────────── */
.pp2-evo { padding: 0 0 1rem; }
.pp2-evo-track { position: relative; padding: .5rem 0; }
.pp2-evo-line { position: absolute; top: 50%; left: 12px; right: 12px; height: 2px; background: var(--pp-border); transform: translateY(-50%); }
.pp2-evo-dots { display: flex; justify-content: space-between; gap: .2rem; position: relative; overflow-x: auto; scrollbar-width: none; }
.pp2-evo-dots::-webkit-scrollbar { display: none; }
.pp2-evo-dot { display: flex; flex-direction: column; align-items: center; gap: .2rem; flex-shrink: 0; }
.pp2-evo-emoji { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; border: 1.5px solid; background: #fff; transition: transform .15s; }
.pp2-evo-dot:hover .pp2-evo-emoji { transform: scale(1.15); }
.pp2-evo-date { font-size: .55rem; font-weight: 700; color: var(--pp-muted); }

.pp2-notes-toolbar { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; padding-bottom: .85rem; border-bottom: 1px solid var(--pp-border2); margin-bottom: .85rem; }
.pp2-notes-search { position: relative; flex: 1; min-width: 160px; max-width: 280px; }
.pp2-notes-search svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--pp-muted); pointer-events: none; }
.pp2-notes-search input { width: 100%; height: 34px; border-radius: 7px; border: 1.5px solid var(--pp-border); background: var(--pp-bg); padding: 0 .65rem 0 1.9rem; font-size: .78rem; font-weight: 600; font-family: var(--pp-font); outline: none; color: var(--pp-text); transition: all .15s; }
.pp2-notes-search input:focus { border-color: var(--pp-pri); box-shadow: 0 0 0 3px rgba(25,156,130,.08); background: #fff; }
.pp2-emo-filters { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.pp2-emo-pill { padding: .22rem .55rem; border-radius: var(--radius-lg); border: 1.5px solid var(--pp-border); background: var(--pp-card); font-size: .66rem; font-weight: 700; color: var(--pp-sub); cursor: pointer; font-family: var(--pp-font); transition: all .15s; display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.pp2-emo-pill:hover:not(.active) { border-color: var(--pc, var(--pp-pri)); color: var(--pc, var(--pp-pri)); }
.pp2-emo-pill.active { border-color: var(--pc, var(--pp-pri)); color: var(--pc, var(--pp-pri)); background: color-mix(in srgb, var(--pc, var(--pp-pri)) 8%, #fff); }
.pp2-emo-pill small { font-size: .58rem; opacity: .5; }

.pp2-masonry { columns: 2; column-gap: .85rem; }
.pp2-note-card {
  break-inside: avoid; margin-bottom: .85rem; background: var(--pp-card); border: 1px solid var(--pp-border2);
  border-radius: var(--pp-r-sm); padding: 1rem; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pp2-note-card:hover { transform: translateY(-2px); box-shadow: var(--pp-shadow-md); border-color: var(--pp-border); }
.pp2-note-stripe { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 3px 0 0 3px; }
.pp2-note-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.pp2-note-date { font-size: .68rem; font-weight: 700; color: var(--pp-sub); }
.pp2-note-emo { font-size: .65rem; font-weight: 800; padding: .18rem .55rem; border-radius: var(--radius-lg); display: inline-flex; align-items: center; gap: .25rem; }
.pp2-note-text { font-size: .82rem; color: var(--pp-text); line-height: 1.6; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pp2-hl { background: rgba(245,158,11,.2); border-radius: 2px; padding: 0 1px; }
.pp2-btn-reset { margin-top: .75rem; background: var(--pp-pri); color: #fff; border: none; padding: .4rem 1rem; border-radius: 7px; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: var(--pp-font); }

/* Pagination */
.pp2-pgbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--pp-border2); }
.pp2-pginfo { font-size: .72rem; font-weight: 700; color: var(--pp-muted); }
.pp2-pgbtns { display: flex; gap: .25rem; }
.pp2-pgbtn { min-width: 30px; height: 30px; padding: 0 .5rem; border-radius: 7px; border: 1px solid var(--pp-border); background: var(--pp-card); color: var(--pp-sub); font-size: .75rem; font-weight: 700; cursor: pointer; font-family: var(--pp-font); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.pp2-pgbtn:hover { border-color: var(--pp-pri); color: var(--pp-pri); }
.pp2-pgbtn.active { background: var(--pp-pri); color: #fff; border-color: var(--pp-pri); }
.pp2-pgbtn:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }

/* ── Activity Feed (default empty state) ─────────────────── */
.pp2-feed { background: var(--pp-card); border: 1px solid var(--pp-border); border-radius: var(--pp-r); overflow: hidden; }
.pp2-feed-hdr { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--pp-border2); font-size: .82rem; font-weight: 800; color: var(--pp-text); }
.pp2-feed-hdr svg { width: 15px; height: 15px; color: var(--pp-pri); }
.pp2-feed-badge { font-size: .65rem; font-weight: 800; padding: .2rem .55rem; border-radius: var(--radius-lg); background: rgba(245,158,11,.1); color: #b45309; margin-left: auto; }
.pp2-feed-list { max-height: calc(100vh - 260px); overflow-y: auto; }
.pp2-feed-item { display: flex; align-items: center; gap: .65rem; padding: .65rem 1rem; border-bottom: 1px solid var(--pp-border2); cursor: pointer; transition: background .1s; }
.pp2-feed-item:last-child { border-bottom: none; }
.pp2-feed-item:hover { background: var(--pp-bg); }
.pp2-feed-item--new { background: rgba(245,158,11,.03); }
.pp2-feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-border); flex-shrink: 0; }
.pp2-feed-dot.active { background: var(--pp-warn); box-shadow: 0 0 5px rgba(245,158,11,.4); }
.pp2-feed-body { flex: 1; min-width: 0; }
.pp2-feed-name { font-size: .78rem; font-weight: 700; color: var(--pp-text); }
.pp2-feed-desc { font-size: .68rem; font-weight: 600; color: var(--pp-muted); }
.pp2-feed-time { font-size: .65rem; font-weight: 700; color: var(--pp-muted); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   BANDEJA CLÍNICA — Fase 1 (reemplaza al feed plano .pp2-feed)
   Estructura: 3 zonas (crítica / nueva / al día)
   Mobile-first; escalable a miles de eventos con agrupación.
══════════════════════════════════════════════════════════════════════ */

/* Paleta semántica (severidad) */
.bdj {
  --sev-critical:    #dc2626;
  --sev-critical-bg: rgba(220,38,38,.08);
  --sev-critical-br: rgba(220,38,38,.18);

  --sev-alert:       #f59e0b;
  --sev-alert-bg:    rgba(245,158,11,.09);
  --sev-alert-br:    rgba(245,158,11,.22);

  --sev-clinical:    #8b5cf6;
  --sev-clinical-bg: rgba(139,92,246,.08);
  --sev-clinical-br: rgba(139,92,246,.20);

  --sev-operational: #06b6d4;
  --sev-operational-bg: rgba(6,182,212,.08);
  --sev-operational-br: rgba(6,182,212,.20);

  --sev-ok:          #10b981;
  --sev-ok-bg:       rgba(16,185,129,.08);
  --sev-ok-br:       rgba(16,185,129,.22);

  --sev-neutral:     #64748b;
  --sev-neutral-bg:  rgba(100,116,139,.06);
  --sev-neutral-br:  rgba(100,116,139,.16);

  display: flex; flex-direction: column; gap: .9rem;
  padding: .25rem;
}

/* ── Header de la bandeja ─────────────────────────────────── */
.bdj-hdr {
  display: flex; align-items: center;
  gap: .75rem; flex-wrap: wrap;
  padding: .25rem .15rem .5rem;
}
.bdj-hdr-title {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--pp-text);
}
.bdj-hdr-title svg { width: 16px; height: 16px; color: var(--pp-pri); }
.bdj-hdr-summary { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-left: auto; }

/* Chips de resumen */
.bdj-chip {
  display: inline-flex; align-items: center;
  padding: .28rem .6rem;
  font-size: .68rem; font-weight: 800;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: .01em;
}
.bdj-chip--critical { background: var(--sev-critical-bg); color: var(--sev-critical); border: 1px solid var(--sev-critical-br); }
.bdj-chip--clinical { background: var(--sev-clinical-bg); color: var(--sev-clinical); border: 1px solid var(--sev-clinical-br); }
.bdj-chip--ok       { background: var(--sev-ok-bg);       color: var(--sev-ok);       border: 1px solid var(--sev-ok-br); }

/* ── Zone (contenedor de cada zona) ───────────────────────── */
.bdj-zone {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r);
  overflow: hidden;
}
.bdj-zone--empty { background: transparent; }

.bdj-zone-hdr {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--pp-border2);
  background: transparent;
  width: 100%; text-align: left;
  font: inherit; color: inherit;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: default;
}
.bdj-zone-hdr--collapsible { cursor: pointer; transition: background .15s; }
.bdj-zone-hdr--collapsible:hover { background: var(--pp-bg); }

.bdj-zone--empty .bdj-zone-hdr { border-bottom-color: transparent; }

.bdj-zone-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px transparent;
}
.bdj-zone-dot--critical { background: var(--sev-critical); box-shadow: 0 0 0 3px var(--sev-critical-bg); }
.bdj-zone-dot--clinical { background: var(--sev-clinical); box-shadow: 0 0 0 3px var(--sev-clinical-bg); }
.bdj-zone-dot--ok       { background: var(--sev-ok);       box-shadow: 0 0 0 3px var(--sev-ok-bg); }

.bdj-zone-title {
  font-size: .82rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--pp-text); margin: 0;
  display: inline-flex; align-items: baseline; gap: .35rem;
}
.bdj-zone-sub { font-size: .68rem; font-weight: 600; color: var(--pp-muted); }

.bdj-zone-count {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 .5rem;
  border-radius: 11px;
  font-size: .7rem; font-weight: 800;
  background: var(--pp-bg); color: var(--pp-muted);
  letter-spacing: .02em;
}
.bdj-zone--critical .bdj-zone-count { background: var(--sev-critical-bg); color: var(--sev-critical); }
.bdj-zone--new      .bdj-zone-count { background: var(--sev-clinical-bg); color: var(--sev-clinical); }
.bdj-zone--ok       .bdj-zone-count { background: var(--sev-ok-bg);       color: var(--sev-ok); }

.bdj-zone-hint {
  font-size: .68rem; font-weight: 600; color: var(--pp-muted);
  margin-left: .35rem;
}

/* Toggle de colapso (flechita) */
.bdj-zone-toggle {
  width: 13px; height: 13px; color: var(--pp-muted);
  transition: transform .2s;
  margin-left: .25rem;
}
.bdj-zone-hdr[data-open="0"] + .bdj-zone-body { display: none; }
.bdj-zone-hdr[data-open="0"] .bdj-zone-toggle { transform: rotate(-90deg); }

.bdj-zone-body {
  animation: bdjFadeIn .2s ease-out;
}
@keyframes bdjFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty state dentro de zona */
.bdj-zone-empty {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem .9rem;
  font-size: .78rem; color: var(--pp-muted); font-weight: 600;
}
.bdj-zone-empty svg { width: 14px; height: 14px; color: var(--sev-ok); flex-shrink: 0; }

/* ── Lista de items ───────────────────────────────────────── */
.bdj-items {
  display: flex; flex-direction: column;
}

/* Separador temporal */
.bdj-bucket-sep {
  padding: .5rem .9rem .3rem;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-muted);
  background: var(--pp-bg);
  border-top: 1px solid var(--pp-border2);
  border-bottom: 1px solid var(--pp-border2);
}
.bdj-bucket:first-child .bdj-bucket-sep { border-top: none; }

/* ── Item individual ──────────────────────────────────────── */
.bdj-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid var(--pp-border2);
  border-left: 3px solid transparent;
  transition: background .12s, border-left-color .12s;
  position: relative;
}
.bdj-item:last-child { border-bottom: none; }
.bdj-item:hover { background: var(--pp-bg); }

/* Borde izquierdo por severidad */
.bdj-item--sev-critical    { border-left-color: var(--sev-critical); }
.bdj-item--sev-alert       { border-left-color: var(--sev-alert); }
.bdj-item--sev-clinical    { border-left-color: var(--sev-clinical); }
.bdj-item--sev-operational { border-left-color: var(--sev-operational); }
.bdj-item--sev-neutral     { border-left-color: var(--sev-neutral); }

/* Botón principal del item (área clickeable del paciente) */
.bdj-item-main {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem;
  background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  width: 100%; min-width: 0;
  min-height: 44px; /* tap target */
}
.bdj-item-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--pp-pri-lt), #e0e7ff);
  color: var(--pp-pri-dk);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  flex-shrink: 0;
}
.bdj-item--sev-critical .bdj-item-avatar    { background: var(--sev-critical-bg); color: var(--sev-critical); }
.bdj-item--sev-alert .bdj-item-avatar       { background: var(--sev-alert-bg);    color: var(--sev-alert); }
.bdj-item--sev-clinical .bdj-item-avatar    { background: var(--sev-clinical-bg); color: var(--sev-clinical); }
.bdj-item--sev-operational .bdj-item-avatar { background: var(--sev-operational-bg); color: var(--sev-operational); }

.bdj-item-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .08rem;
}
.bdj-item-name {
  font-size: .83rem; font-weight: 700; color: var(--pp-text);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bdj-item-title {
  font-size: .72rem; font-weight: 600; color: var(--pp-muted);
  line-height: 1.35;
}
.bdj-item-detail {
  font-size: .7rem; font-weight: 600;
  color: var(--pp-text-light, #475569);
  line-height: 1.3; margin-top: .05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bdj-item-time {
  font-size: .65rem; font-weight: 700;
  color: var(--pp-muted);
  flex-shrink: 0; padding-left: .4rem;
  text-transform: lowercase;
}

/* Botón "Marcar revisado" (check) */
.bdj-item-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 0 .85rem;
  background: transparent; border: none; border-left: 1px solid var(--pp-border2);
  color: var(--pp-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.bdj-item-action svg { width: 15px; height: 15px; }
.bdj-item-action:hover {
  background: var(--sev-ok-bg);
  color: var(--sev-ok);
}
.bdj-item-action:focus-visible {
  outline: 2px solid var(--sev-ok); outline-offset: -2px;
}

/* Focus ring teclado (P3.3) */
.bdj-item.bdj-item--keyfocus {
  background: var(--pp-bg);
  box-shadow: inset 2px 0 0 var(--pp-pri);
}
.bdj-item.bdj-item--keyfocus .bdj-item-name { color: var(--pp-pri-dk); }

/* Estado "removiéndose" al marcar atendido */
.bdj-item.bdj-item--dismissing {
  opacity: 0; transform: translateX(12px);
  transition: opacity .25s, transform .25s, max-height .35s .1s;
  max-height: 0; overflow: hidden; border-bottom: none;
}

/* ── Grupo colapsado ──────────────────────────────────────── */
.bdj-group {
  border-bottom: 1px solid var(--pp-border2);
  border-left: 3px solid transparent;
}
.bdj-group:last-child { border-bottom: none; }
.bdj-group--sev-clinical    { border-left-color: var(--sev-clinical); }
.bdj-group--sev-operational { border-left-color: var(--sev-operational); }
.bdj-group--sev-alert       { border-left-color: var(--sev-alert); }

.bdj-group-hdr {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; padding: .7rem .9rem;
  background: var(--pp-bg); border: none;
  cursor: pointer; font: inherit; color: inherit; text-align: left;
  min-height: 44px;
  transition: background .12s;
}
.bdj-group-hdr:hover { background: #eef2f7; }

.bdj-group-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--pp-card); border: 1px solid var(--pp-border2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bdj-group-icon svg { width: 13px; height: 13px; color: var(--pp-muted); }
.bdj-group--sev-clinical .bdj-group-icon svg    { color: var(--sev-clinical); }
.bdj-group--sev-operational .bdj-group-icon svg { color: var(--sev-operational); }

.bdj-group-label {
  flex: 1;
  font-size: .78rem; font-weight: 700; color: var(--pp-text);
  line-height: 1.3;
}
.bdj-group-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 .5rem;
  border-radius: 11px;
  font-size: .68rem; font-weight: 800;
  background: var(--pp-card); color: var(--pp-muted);
  border: 1px solid var(--pp-border);
}
.bdj-group-toggle {
  width: 13px; height: 13px; color: var(--pp-muted);
  transition: transform .2s;
}
.bdj-group.bdj-group--open .bdj-group-toggle { transform: rotate(180deg); }

.bdj-group-members {
  display: none;
  background: var(--pp-card);
  border-top: 1px solid var(--pp-border2);
}
.bdj-group.bdj-group--open .bdj-group-members { display: block; animation: bdjFadeIn .2s ease-out; }

/* Los items dentro de un grupo no tienen su propio border-left fuerte */
.bdj-group-members .bdj-item {
  border-left-width: 0;
  padding-left: .25rem;
}

/* ── Lista "Al día" (Zona 3 expandible) ───────────────────── */
.bdj-aldia-list {
  display: flex; flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
}
.bdj-aldia-list::-webkit-scrollbar { width: 4px; }
.bdj-aldia-list::-webkit-scrollbar-thumb { background: var(--pp-border); border-radius: 2px; }

.bdj-aldia-item {
  display: grid;
  grid-template-columns: 28px 1fr 14px;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  background: transparent; border: none;
  border-bottom: 1px solid var(--pp-border2);
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: background .1s;
  width: 100%;
}
.bdj-aldia-item:last-child { border-bottom: none; }
.bdj-aldia-item:hover { background: var(--pp-bg); }
.bdj-aldia-item:hover .bdj-aldia-arrow { color: var(--pp-pri); }

.bdj-aldia-avatar {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--sev-ok-bg); color: var(--sev-ok);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
  flex-shrink: 0;
}
.bdj-aldia-body { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.bdj-aldia-name {
  font-size: .78rem; font-weight: 700; color: var(--pp-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bdj-aldia-meta {
  font-size: .66rem; font-weight: 600; color: var(--pp-muted);
}
.bdj-aldia-arrow {
  width: 12px; height: 12px; color: var(--pp-muted);
  transition: color .12s, transform .12s;
}

@media (max-width: 640px) {
  .bdj-aldia-item { padding: .6rem .75rem; grid-template-columns: 30px 1fr 14px; min-height: 48px; }
  .bdj-aldia-name { font-size: .8rem; }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */

/* Tablet portrait */
@media (max-width: 900px) {
  .bdj { padding: 0; gap: .7rem; }
  .bdj-zone { border-radius: var(--pp-r-sm); }
  .bdj-zone-hdr { padding: .65rem .75rem; }
  .bdj-item-main { padding: .65rem .75rem; gap: .6rem; }
  .bdj-item-avatar { width: 32px; height: 32px; font-size: .7rem; }
  .bdj-group-hdr { padding: .65rem .75rem; }
}

/* Móvil */
@media (max-width: 640px) {
  .bdj-hdr {
    padding: .15rem .1rem .35rem;
    flex-direction: column; align-items: flex-start; gap: .45rem;
  }
  .bdj-hdr-summary {
    width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .2rem;
    flex-wrap: nowrap;
  }
  .bdj-hdr-summary::-webkit-scrollbar { display: none; }
  .bdj-chip { flex-shrink: 0; }

  .bdj-zone { border-radius: 10px; }
  .bdj-zone-hdr { padding: .7rem .75rem; }
  .bdj-zone-title { font-size: .78rem; }
  .bdj-zone-sub { display: none; }
  .bdj-zone-hint { display: none; }

  /* Hit target más grande en móvil */
  .bdj-item-main { min-height: 52px; padding: .7rem .6rem .7rem .75rem; }
  .bdj-item-action { min-width: 48px; padding: 0 .75rem; }
  .bdj-item-name { font-size: .82rem; }
  .bdj-item-title { font-size: .7rem; }
  .bdj-item-detail { font-size: .68rem; }
  .bdj-item-time { font-size: .62rem; }

  .bdj-group-hdr { min-height: 52px; padding: .7rem .75rem; }

  .bdj-bucket-sep { padding: .45rem .75rem .3rem; font-size: .58rem; }
}

/* Viewport dinámico: evita cortes por toolbars móviles */
@supports (height: 100dvh) {
  .bdj { max-height: calc(100dvh - 180px); overflow-y: auto; }
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .bdj-zone-body, .bdj-item, .bdj-group-members { animation: none; transition: none; }
  .bdj-zone-toggle, .bdj-group-toggle { transition: none; }
}

/* ═══ Fase 2: View mode (ejecutiva / detallada) ═══════════ */
.bdj-viewmode {
  display: inline-flex;
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.bdj-viewmode-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .65rem;
  border: none; background: transparent;
  font: inherit; color: var(--pp-muted);
  font-size: .72rem; font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
  min-height: 30px;
}
.bdj-viewmode-btn svg { width: 13px; height: 13px; }
.bdj-viewmode-btn:hover { color: var(--pp-text); }
.bdj-viewmode-btn.is-active {
  background: var(--pp-card);
  color: var(--pp-text);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

/* ─── Ejecutiva: vista compacta ──────────────────────────────
   Oculta detalles secundarios e timestamps para un escaneo rápido.
   La zona 2 se colapsa vía data-open desde JS (bdjSetViewMode).      */
#bdjRoot.bdj--ejecutiva .bdj-item-detail { display: none; }
#bdjRoot.bdj--ejecutiva .bdj-item-time   { display: none; }
#bdjRoot.bdj--ejecutiva .bdj-item-main   { padding: .42rem .9rem; min-height: 40px; }

/* ─── Detallada: vista completa ──────────────────────────────
   Muestra todos los campos; la zona 2 se expande vía data-open. */
#bdjRoot.bdj--detallada .bdj-item-detail { display: block; }
#bdjRoot.bdj--detallada .bdj-item-time   { display: inline; }

/* ═══ Fase 2: Bump banner (nuevos desde que entraste) ═════ */
.bdj-bump {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem;
  background: linear-gradient(135deg, var(--sev-clinical-bg), var(--sev-operational-bg));
  border: 1px solid var(--sev-clinical-br);
  border-radius: 10px;
  font-size: .78rem;
  color: var(--pp-text);
  animation: bdjBumpIn .3s ease-out;
}
.bdj-bump[hidden] { display: none; }
.bdj-bump svg { width: 14px; height: 14px; color: var(--sev-clinical); flex-shrink: 0; }
.bdj-bump-msg { flex: 1; font-weight: 600; }
.bdj-bump-msg strong { font-weight: 800; color: var(--sev-clinical); }

.bdj-bump-action {
  padding: .3rem .75rem;
  background: var(--sev-clinical); color: #fff;
  border: none; border-radius: 6px;
  font: inherit; font-weight: 700; font-size: .72rem;
  cursor: pointer;
  transition: background .12s;
}
.bdj-bump-action:hover { background: #7c3aed; }

.bdj-bump-close {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--pp-muted);
  border-radius: 5px; cursor: pointer;
  transition: background .12s, color .12s;
}
.bdj-bump-close svg { width: 12px; height: 12px; }
.bdj-bump-close:hover { background: rgba(0,0,0,.05); color: var(--pp-text); }

@keyframes bdjBumpIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Fase 2: Pill count (cantidad dentro de pills de facetas) ═══ */
.pp2-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 0 .35rem;
  height: 16px;
  margin-left: .3rem;
  border-radius: 999px;
  font-size: .6rem; font-weight: 800;
  background: rgba(100,116,139,.15);
  color: inherit;
  line-height: 1;
}
.pp2-pill.active .pp2-pill-count { background: rgba(255,255,255,.25); }
.pp2-pill--alert .pp2-pill-count { background: rgba(245,158,11,.2); }

/* Responsive: Fase 2 elementos */
@media (max-width: 640px) {
  .bdj-viewmode { width: 100%; }
  .bdj-viewmode-btn { flex: 1; justify-content: center; min-height: 36px; }
  .bdj-viewmode-btn span { font-size: .7rem; }

  .bdj-bump { flex-wrap: wrap; gap: .45rem; padding: .55rem .65rem; }
  .bdj-bump-msg { font-size: .72rem; }
  .bdj-bump-action { order: 3; flex: 1; min-height: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — Drawer de evento (P3.5) + atribución (P3.4)
══════════════════════════════════════════════════════════════════ */
.bdj-drawer {
  position: fixed; inset: 0; z-index: 2500;
  display: flex; justify-content: flex-end;
  pointer-events: auto;
}
.bdj-drawer[hidden] { display: none; }

.bdj-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  animation: bdjDrawerFadeIn .2s ease-out;
}

.bdj-drawer-panel {
  position: relative;
  width: 100%; max-width: 480px;
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(15,23,42,.2);
  animation: bdjDrawerSlideR .25s cubic-bezier(.2,.8,.2,1);
  max-height: 100dvh;
}

@keyframes bdjDrawerFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes bdjDrawerSlideR {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes bdjDrawerSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Header */
.bdj-drawer-hdr {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--pp-border);
}
.bdj-drawer-hdr-left {
  display: flex; align-items: center; gap: .75rem;
  flex: 1; min-width: 0;
}
.bdj-drawer-avatar {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--sev-clinical-bg); color: var(--sev-clinical);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
  flex-shrink: 0;
}
.bdj-drawer-hdr-text { flex: 1; min-width: 0; }
.bdj-drawer-title {
  font-size: .95rem; font-weight: 800; color: var(--pp-text);
  margin: 0 0 .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bdj-drawer-meta {
  font-size: .72rem; font-weight: 600; color: var(--pp-muted);
  margin: 0; line-height: 1.35;
}
.bdj-drawer-close {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--pp-bg); border: none;
  color: var(--pp-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.bdj-drawer-close svg { width: 14px; height: 14px; }
.bdj-drawer-close:hover { background: #fee2e2; color: var(--pp-err); }

/* Body */
.bdj-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 1.15rem;
}
.bdj-drawer-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1rem; color: var(--pp-muted);
}

/* Sección de contenido del drawer */
.bdj-drawer-emotag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: var(--radius-lg);
  background: var(--pp-bg);
  font-size: .8rem; font-weight: 800; color: var(--pp-text);
  margin-bottom: 1rem;
}
.bdj-drawer-content {
  font-size: .92rem; line-height: 1.75;
  color: var(--pp-text); font-weight: 500;
  white-space: pre-wrap; word-break: break-word;
}
.bdj-drawer-section {
  margin-bottom: 1rem;
}
.bdj-drawer-section-title {
  font-size: .64rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-muted);
  margin: 0 0 .4rem;
}
.bdj-drawer-kv {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem;
  font-size: .78rem;
}
.bdj-drawer-kv dt { font-weight: 700; color: var(--pp-muted); }
.bdj-drawer-kv dd { margin: 0; font-weight: 600; color: var(--pp-text); }

/* Banda de "atendido por" (P3.4) */
.bdj-drawer-attended {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  background: var(--sev-ok-bg);
  border: 1px solid var(--sev-ok-br);
  border-radius: 10px;
  font-size: .78rem;
}
.bdj-drawer-attended svg {
  width: 16px; height: 16px; color: var(--sev-ok); flex-shrink: 0;
}
.bdj-drawer-attended-text {
  font-weight: 600; color: var(--pp-text); line-height: 1.4;
}
.bdj-drawer-attended-text strong { font-weight: 800; color: var(--sev-ok); }

/* Footer */
.bdj-drawer-ftr {
  display: flex; align-items: stretch; gap: .5rem;
  padding: .85rem 1.15rem;
  border-top: 1px solid var(--pp-border);
  background: var(--pp-bg);
}
.bdj-drawer-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1rem;
  border: 1px solid var(--pp-border);
  background: #fff; color: var(--pp-text);
  font: inherit; font-weight: 700; font-size: .82rem;
  border-radius: 10px; cursor: pointer;
  min-height: 44px;
  transition: background .12s, border-color .12s, color .12s;
}
.bdj-drawer-btn svg { width: 14px; height: 14px; }
.bdj-drawer-btn:hover { background: var(--pp-bg); }
.bdj-drawer-btn--primary {
  background: var(--sev-ok); color: #fff; border-color: var(--sev-ok);
  flex: 1;
}
.bdj-drawer-btn--primary:hover { background: #059669; border-color: #059669; }
.bdj-drawer-btn--primary:disabled { opacity: .55; cursor: not-allowed; }

/* Atribución pequeña en el item (inline hint cuando se atiende inline) */
.bdj-item--attended .bdj-item-action {
  color: var(--sev-ok); background: var(--sev-ok-bg);
}

/* ─── Drawer responsive: bottom sheet en móvil ─── */
@media (max-width: 640px) {
  .bdj-drawer { align-items: flex-end; }
  .bdj-drawer-panel {
    width: 100%; max-width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    animation: bdjDrawerSlideUp .25s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -20px 50px rgba(15,23,42,.25);
  }
  /* Drag handle visual */
  .bdj-drawer-panel::before {
    content: '';
    display: block;
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--pp-border);
    margin: .55rem auto .25rem;
  }
  .bdj-drawer-hdr { padding: .5rem 1rem .85rem; }
  .bdj-drawer-avatar { width: 38px; height: 38px; }
  .bdj-drawer-ftr { flex-direction: column-reverse; padding: .85rem 1rem calc(env(safe-area-inset-bottom, 0) + .85rem); }
  .bdj-drawer-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bdj-drawer-backdrop,
  .bdj-drawer-panel { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — Toggle nav Bandeja/Timeline (P3.1)
══════════════════════════════════════════════════════════════════ */
.pp2-nav-toggle {
  display: inline-flex;
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: 9px;
  padding: 2px;
  margin-right: .35rem;
}
.pp2-nav-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem;
  background: transparent; border: none;
  font: inherit; color: var(--pp-muted);
  font-size: .74rem; font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
  min-height: 30px;
  transition: background .12s, color .12s;
}
.pp2-nav-btn svg { width: 13px; height: 13px; }
.pp2-nav-btn:hover { color: var(--pp-text); }
.pp2-nav-btn.is-active {
  background: var(--pp-card);
  color: var(--pp-pri-dk);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

@media (max-width: 640px) {
  .pp2-nav-toggle { order: -1; width: 100%; margin-right: 0; margin-bottom: .5rem; }
  .pp2-nav-btn { flex: 1; justify-content: center; min-height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — Timeline View (P3.1)
══════════════════════════════════════════════════════════════════ */
.pp2-timeline-view[hidden] { display: none; }
.pp2-timeline-view {
  padding: 1rem 1.25rem;
  background: var(--pp-bg);
  min-height: calc(100vh - var(--topbar-height, 64px) - 55px);
}
@supports (height: 100dvh) {
  .pp2-timeline-view { min-height: calc(100dvh - var(--topbar-height, 64px) - 55px); }
}

.tl2-toolbar {
  display: flex; align-items: center; gap: .85rem;
  flex-wrap: wrap;
  padding: .65rem .85rem;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r);
  margin-bottom: .85rem;
}

.tl2-date-presets {
  display: inline-flex;
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: 8px; padding: 2px;
}
.tl2-preset {
  padding: .35rem .75rem;
  background: transparent; border: none;
  font: inherit; color: var(--pp-muted);
  font-size: .72rem; font-weight: 700;
  border-radius: 6px; cursor: pointer;
  min-height: 30px;
  transition: background .12s, color .12s;
}
.tl2-preset:hover { color: var(--pp-text); }
.tl2-preset.is-active {
  background: var(--pp-card); color: var(--pp-pri-dk);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

.tl2-type-filters {
  display: inline-flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
}
.tl2-chk {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem;
  background: var(--pp-bg); border: 1px solid var(--pp-border);
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: var(--pp-text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  min-height: 32px;
}
.tl2-chk:hover { border-color: var(--pp-pri); }
.tl2-chk-input { display: none; }
.tl2-chk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--d, var(--pp-muted));
  box-shadow: 0 0 0 2px var(--pp-card);
}
.tl2-chk:has(.tl2-chk-input:not(:checked)) { opacity: .45; }

.tl2-meta {
  margin-left: auto;
  font-size: .72rem; font-weight: 700; color: var(--pp-muted);
}

/* Lista */
.tl2-list {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r);
  padding: .35rem;
}
.tl2-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1rem;
}

.tl2-day-sep {
  padding: .55rem .8rem .3rem;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-muted);
}

.tl2-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center; gap: .7rem;
  padding: .65rem .85rem;
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  text-align: left; font: inherit; color: inherit; width: 100%;
}
.tl2-item:hover { background: var(--pp-bg); }
.tl2-item--sev-clinical    { border-left-color: var(--sev-clinical); }
.tl2-item--sev-operational { border-left-color: var(--sev-operational); }

.tl2-item-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--pp-bg); color: var(--pp-muted);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tl2-item-icon svg { width: 14px; height: 14px; }
.tl2-item--sev-clinical    .tl2-item-icon { background: var(--sev-clinical-bg); color: var(--sev-clinical); }
.tl2-item--sev-operational .tl2-item-icon { background: var(--sev-operational-bg); color: var(--sev-operational); }

.tl2-item-body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tl2-item-line1 {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.tl2-item-patient {
  font-size: .85rem; font-weight: 800; color: var(--pp-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl2-item-title {
  font-size: .75rem; font-weight: 600; color: var(--pp-muted);
}
.tl2-item-detail {
  font-size: .72rem; color: var(--pp-text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl2-item-attended {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .65rem; font-weight: 700; color: var(--sev-ok);
  padding: .15rem .45rem;
  background: var(--sev-ok-bg);
  border-radius: 999px;
  margin-top: .2rem;
}
.tl2-item-attended svg { width: 10px; height: 10px; }

.tl2-item-time {
  font-size: .68rem; font-weight: 700; color: var(--pp-muted);
  text-align: right; flex-shrink: 0;
  min-width: 72px;
  white-space: nowrap;
}

/* Empty state */
.tl2-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 1rem;
  color: var(--pp-muted);
  text-align: center; gap: .5rem;
}
.tl2-empty svg { width: 34px; height: 34px; opacity: .4; }
.tl2-empty p { margin: 0; font-size: .85rem; font-weight: 600; }

.tl2-loadmore-wrap { display: flex; justify-content: center; padding: 1rem; }
.tl2-loadmore {
  padding: .6rem 1.5rem;
  background: var(--pp-card); border: 1px solid var(--pp-border);
  color: var(--pp-text);
  font: inherit; font-weight: 700; font-size: .78rem;
  border-radius: 10px; cursor: pointer;
  min-height: 40px;
  transition: background .12s, border-color .12s, color .12s;
}
.tl2-loadmore:hover { border-color: var(--pp-pri); color: var(--pp-pri); }
.tl2-loadmore:disabled { opacity: .5; cursor: not-allowed; }

/* Responsive */
@media (max-width: 640px) {
  .pp2-timeline-view { padding: .65rem; }
  .tl2-toolbar { gap: .5rem; padding: .55rem .65rem; }
  .tl2-date-presets, .tl2-type-filters { width: 100%; justify-content: center; }
  .tl2-meta { width: 100%; text-align: center; margin-left: 0; }

  .tl2-item { grid-template-columns: 34px 1fr auto; gap: .55rem; padding: .6rem .65rem; }
  .tl2-item-icon { width: 30px; height: 30px; }
  .tl2-item-patient { font-size: .82rem; }
  .tl2-item-time { min-width: 60px; font-size: .65rem; }
}


/* ── Modal (kept from v1) ────────────────────────────────── */
.pp-modal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,.55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1.25rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.pp-modal-overlay.open { opacity: 1; pointer-events: auto; }
.pp-modal-box { background: #fff; border-radius: var(--pp-r-lg); width: 100%; max-width: min(580px, calc(100vw - 32px)); max-height: min(85vh, 85dvh); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 50px rgba(15,23,42,.2); transform: scale(.95); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pp-modal-overlay.open .pp-modal-box { transform: scale(1); }
.pp-modal-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--pp-border); display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.pp-modal-t { font-size: .95rem; font-weight: 800; color: var(--pp-text); }
.pp-modal-dt { font-size: .75rem; color: var(--pp-muted); font-weight: 600; margin-top: .15rem; }
.pp-modal-close { width: 32px; height: 32px; border-radius: 8px; background: var(--pp-bg); border: none; color: var(--pp-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.pp-modal-close:hover { background: #fee2e2; color: var(--pp-err); }
.pp-modal-close svg { width: 14px; height: 14px; }
.pp-modal-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.pp-modal-emo { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 800; padding: .4rem 1rem; border-radius: var(--radius-lg); margin-bottom: 1rem; }
.pp-modal-content { font-size: .95rem; color: var(--pp-text); line-height: 1.8; font-weight: 500; white-space: pre-wrap; word-break: break-word; }

/* ─── Respuesta de la doctora (modal admin) ─────────────────
   Visible dentro del .pp-modal-box--reply al pie de la nota.
   Tres estados: existing (read), empty (CTA), editor.

   IMPORTANTE: las cards usan `display: flex`, lo cual gana al
   atributo `hidden` de HTML (que vale `display: none`). Sin esta
   regla los tres estados se renderizan juntos.
*/
.pp-modal-box--reply { max-width: min(680px, calc(100vw - 32px)); }
.pp-modal-box--reply [hidden] { display: none !important; }

/* ── Body de la nota (col izq en desktop) ── */
.pp-modal-note-pane { min-width: 0; display: flex; flex-direction: column; gap: 0; }

/* En movil/tablet limitamos la altura del cuerpo de la nota para que
   el editor de respuesta quede al alcance sin scrollear todo el modal. */
@media (max-width: 1023px) {
  .pp-modal-note-pane .pp-modal-content {
    max-height: 38vh;
    overflow-y: auto;
    padding-right: .35rem;
  }
}

/* Desktop ≥1024px: dos columnas. Nota (scroll propio) | Editor (sticky). */
@media (min-width: 1024px) {
  .pp-modal-box--reply {
    max-width: min(960px, calc(100vw - 64px));
    max-height: min(88vh, 88dvh);
  }
  .pp-modal-body--twocol {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 1.6rem;
    align-items: start;
  }
  .pp-modal-note-pane {
    max-height: calc(88vh - 130px);
    overflow-y: auto;
    padding-right: .5rem;
  }
  .pp-modal-body--twocol .pp-reply {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px dashed var(--pp-border);
    padding-left: 1.6rem;
    position: sticky;
    top: 0;
    max-height: calc(88vh - 130px);
    overflow-y: auto;
  }
}

.pp-reply { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--pp-border); display: flex; flex-direction: column; gap: .9rem; }
.pp-reply-head { display: flex; align-items: center; gap: .55rem; }
.pp-reply-ico { width: 18px; height: 18px; color: var(--primary, #199c82); flex-shrink: 0; }
.pp-reply-title { margin: 0; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-text); }

.pp-reply-existing { background: linear-gradient(180deg, rgba(25,156,130,.05) 0%, rgba(25,156,130,.02) 100%); border: 1px solid rgba(25,156,130,.18); border-left: 3px solid var(--primary, #199c82); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.pp-reply-author { display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: baseline; }
.pp-reply-author-name { font-size: .8rem; font-weight: 800; color: var(--primary, #199c82); }
.pp-reply-author-date { font-size: .7rem; color: var(--pp-muted); font-weight: 600; }
.pp-reply-text { font-size: .92rem; color: var(--pp-text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-weight: 500; }
.pp-reply-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .35rem; border-top: 1px dashed rgba(25,156,130,.18); }

.pp-reply-empty { background: var(--pp-bg, #f8fafc); border: 1px dashed var(--pp-border); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.pp-reply-empty-msg { margin: 0; font-size: .85rem; color: var(--pp-muted); line-height: 1.55; font-weight: 500; }

.pp-reply-editor { display: flex; flex-direction: column; gap: .6rem; }
.pp-reply-label { font-size: .78rem; font-weight: 700; color: var(--pp-muted); }
.pp-reply-textarea { width: 100%; min-height: 130px; resize: vertical; padding: .85rem 1rem; border: 1px solid var(--pp-border); border-radius: 10px; background: #fff; font: inherit; font-size: .92rem; line-height: 1.65; color: var(--pp-text); transition: border-color .15s, box-shadow .15s; }
.pp-reply-textarea:focus { outline: none; border-color: var(--primary, #199c82); box-shadow: 0 0 0 3px rgba(25,156,130,.15); }
.pp-reply-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pp-reply-counter { font-size: .72rem; color: var(--pp-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-reply-editor-actions { display: flex; gap: .5rem; }

.pp-reply-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; background: transparent; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.pp-reply-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pp-reply-btn:active { transform: translateY(1px); }
.pp-reply-btn--primary { background: var(--primary, #199c82); color: #fff; }
.pp-reply-btn--primary:hover { background: #157a67; }
.pp-reply-btn--primary:disabled { opacity: .55; cursor: not-allowed; }
.pp-reply-btn--ghost { background: var(--pp-bg, #f1f5f9); color: var(--pp-text); border-color: var(--pp-border); }
.pp-reply-btn--ghost:hover { background: #e2e8f0; }
.pp-reply-btn--danger { background: #fff; color: #dc2626; border-color: #fecaca; }
.pp-reply-btn--danger:hover { background: #fee2e2; border-color: #fca5a5; }

.pp-reply-privacy { display: flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .72rem; color: var(--pp-muted); line-height: 1.5; font-weight: 500; }
.pp-reply-privacy svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--pp-muted); }

/* Badge "Respondida" en la card de nota dentro del tab Notas */
.pp2-note-card--replied { box-shadow: inset 0 0 0 1px rgba(25,156,130,.25); }
.pp2-note-replied { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 800; color: var(--primary, #199c82); background: rgba(25,156,130,.1); border: 1px solid rgba(25,156,130,.25); padding: .15rem .45rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; margin-left: auto; }
.pp2-note-replied svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Responsive: editor stack en movil admin */
@media (max-width: 640px) {
  .pp-modal-box--reply { max-width: 100%; max-height: 100dvh; border-radius: 0; }
  .pp-reply-actions, .pp-reply-editor-actions { width: 100%; }
  .pp-reply-actions .pp-reply-btn, .pp-reply-editor-actions .pp-reply-btn { flex: 1; justify-content: center; }
  .pp-reply-editor-foot { flex-direction: column; align-items: stretch; }
}

/* ── Bulk Bar & Toast (kept from v1) ─────────────────────── */
.pp-bulk-bar { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); z-index: 1500; visibility: hidden; opacity: 0; pointer-events: none; transition: bottom .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, visibility .3s; }
.pp-bulk-bar.show { bottom: 1.25rem; visibility: visible; opacity: 1; pointer-events: auto; }
.pp-bulk-bar-inner { display: flex; align-items: center; gap: 1rem; background: #1e293b; border: 1px solid rgba(255,255,255,.1); border-radius: var(--pp-r); padding: .65rem 1rem; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.pp-bulk-bar-left { display: flex; align-items: center; gap: .6rem; }
.pp-bulk-bar-close { width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,.08); border: none; color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pp-bulk-bar-close svg { width: 12px; height: 12px; }
.pp-bulk-bar-close:hover { color: #f87171; }
.pp-bulk-bar-count { font-size: .78rem; font-weight: 800; color: #fff; white-space: nowrap; }
.pp-bulk-sel-all { background: none; border: 1px solid rgba(255,255,255,.12); color: #94a3b8; font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 5px; cursor: pointer; font-family: var(--pp-font); }
.pp-bulk-sel-all:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.pp-bulk-bar-actions { display: flex; gap: .4rem; padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.1); }
.pp-bulk-btn { padding: .4rem .85rem; border-radius: 7px; border: 1.5px solid; font-size: .75rem; font-weight: 800; cursor: pointer; font-family: var(--pp-font); transition: all .15s; }
.pp-bulk-btn.ok { background: rgba(16,185,129,.1); color: #4ade80; border-color: rgba(16,185,129,.3); }
.pp-bulk-btn.ok:hover { background: rgba(16,185,129,.2); color: #fff; }
.pp-bulk-btn.err { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.3); }
.pp-bulk-btn.err:hover { background: rgba(239,68,68,.2); color: #fff; }

.pp-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #1e293b; color: #fff; padding: .6rem 1rem; border-radius: var(--pp-r-sm); font-size: .8rem; font-weight: 600; font-family: var(--pp-font); box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 9999; opacity: 0; transform: translateY(8px); transition: all .25s; pointer-events: none; }
.pp-toast.show { opacity: 1; transform: translateY(0); }
.pp-toast.ok::before { content: '\2713'; margin-right: .4rem; color: #4ade80; font-weight: 900; }
.pp-toast.err::before { content: '\2715'; margin-right: .4rem; color: #f87171; font-weight: 900; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pp2-main { grid-template-columns: 280px 1fr; }
  .pp2-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Mobile: full screen states — list OR detail, never both */
  .pp2-main { grid-template-columns: 1fr; display: flex; flex-direction: column; height: auto; min-height: calc(100vh - var(--topbar-height, 64px) - 55px); }

  /* Sidebar takes full available space by default */
  .pp2-sidebar { flex: 1; border-right: none; border-bottom: none; min-height: 0; }
  .pp2-sb-list { max-height: none; flex: 1; }

  /* Detail hidden by default on mobile */
  .pp2-detail { display: none; flex: 1; }

  /* When a patient is selected: hide sidebar, show detail */
  .pp2-main--detail .pp2-sidebar { display: none; }
  .pp2-main--detail .pp2-detail { display: block; }

  /* Show back buttons in detail view */
  .pp2-bar-back { display: flex; }

  /* Feed/empty state: show a "back to patients" link on mobile when coming from backToFeed */
  .pp2-feed { border: none; border-radius: 0; }
}

@media (max-width: 640px) {
  .pp2-header { padding: .65rem .75rem; gap: .5rem; }
  .pp2-header-kpis { display: none; }
  .pp2-header-title { font-size: .95rem; }
  /* La barra de acciones ocupa su propia fila a ancho completo: el toggle
     Bandeja/Timeline (order:-1, width:100%) queda en la primera línea y los
     botones-ícono fluyen debajo, alineados a la derecha, sin desbordar el
     viewport ni recortar el último botón (ej. "Vista profesional"). */
  .pp2-header-actions { width: 100%; justify-content: flex-end; }
  .pp2-detail { padding: .75rem; }
  .pp2-metrics { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .pp2-cred-grid { grid-template-columns: 1fr; }
  .pp2-edit-row { grid-template-columns: 1fr; }
  .pp2-form-row { grid-template-columns: 1fr; }
  .pp2-masonry { columns: 1; }

  /* Notas: search y filtros apilados verticalmente.
     Sin esto, .pp2-notes-search (max-width:280px) y .pp2-emo-filters
     (flex:1) compiten en la misma fila y las pills se apilan una por línea
     porque no caben a lo ancho. Apilando, cada bloque usa 100% de ancho. */
  .pp2-notes-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .pp2-notes-search {
    max-width: 100%;
    min-width: 0;
    flex: none;
    width: 100%;
  }
  .pp2-emo-filters {
    flex: none;
    width: 100%;
    gap: .3rem;
  }
  .pp2-emo-pill { font-size: .68rem; padding: .28rem .6rem; }

  /* Evolution timeline: dots un poco más cómodos al hacer scroll horizontal */
  .pp2-evo-dots { gap: .35rem; padding: 0 .15rem; }
  .pp2-evo-emoji { width: 32px; height: 32px; font-size: .9rem; }
  .pp2-evo-date { font-size: .6rem; }

  .pp2-cred-actions { flex-direction: column; }
  .pp2-act-btn { width: 100%; justify-content: center; }
  .pp-bulk-bar { display: none; }
  .pp2-bulk-active .pp-bulk-bar { display: block; }
  .pp-bulk-bar-inner { flex-direction: column; gap: .5rem; padding: .75rem; width: calc(100vw - 1.5rem); max-width: 360px; }
  .pp-bulk-bar-actions { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,.1); padding-top: .5rem; width: 100%; justify-content: center; }
  .pp2-tab { font-size: .72rem; padding: .6rem .6rem; }
  .pp2-tab svg { width: 12px; height: 12px; }
  .pp2-tl-meta { display: none; }
  .pp2-patient-bar { flex-wrap: wrap; }
  .pp2-bar-info { min-width: 0; }
  .pp2-bar-actions { width: 100%; justify-content: space-between; margin-top: .35rem; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SKELETON LOADING SYSTEM
   Reusable classes for shimmer loading states across all modules.
   Usage: <div class="sk"></div> or <div class="sk sk-text"></div>
 * ═══════════════════════════════════════════════════════════════ */

/* ── Shimmer animation ──────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* ── Base skeleton block ────────────────────────────────────── */
.sk {
  background: linear-gradient(90deg, #e8ecf1 25%, #f1f4f8 37%, #e8ecf1 63%);
  background-size: 1200px 100%;
  animation: sk-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  min-height: 14px;
}

/* ── Preset shapes ──────────────────────────────────────────── */
.sk-circle       { border-radius: 50%; }
.sk-rounded      { border-radius: var(--radius); }
.sk-rounded-lg   { border-radius: var(--radius-lg); }
.sk-pill         { border-radius: 9999px; }

/* ── Preset sizes ───────────────────────────────────────────── */
.sk-xs    { height: 10px; }
.sk-sm    { height: 14px; }
.sk-md    { height: 20px; }
.sk-lg    { height: 28px; }
.sk-xl    { height: 40px; }
.sk-title { height: 24px; width: 60%; }
.sk-sub   { height: 14px; width: 40%; }
.sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.sk-avatar-lg { width: 56px; height: 56px; border-radius: var(--radius); flex-shrink: 0; }
.sk-btn   { height: 40px; width: 120px; border-radius: var(--radius-sm); }
.sk-badge { height: 22px; width: 64px; border-radius: 9999px; }
.sk-input { height: 42px; width: 100%; border-radius: var(--radius-sm); }

/* ── Card skeleton ──────────────────────────────────────────── */
.sk-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ── Table skeleton ─────────────────────────────────────────── */
.sk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sk-table-row {
  display: flex;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}
.sk-table-row:last-child { border-bottom: none; }
.sk-table-cell {
  flex: 1;
  min-height: 14px;
}

/* ── Stat card skeleton ─────────────────────────────────────── */
.sk-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ── Layout helpers for skeleton groups ──────────────────────── */
.sk-flex   { display: flex; gap: .75rem; align-items: center; }
.sk-stack  { display: flex; flex-direction: column; gap: .5rem; }
.sk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sk-w-full { width: 100%; }
.sk-w-75   { width: 75%; }
.sk-w-50   { width: 50%; }
.sk-w-40   { width: 40%; }
.sk-w-25   { width: 25%; }

/* ── Page-level skeleton wrapper ────────────────────────────── */
.sk-page {
  animation: sk-fadeIn .3s ease both;
}
@keyframes sk-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Page content transition ────────────────────────────────── */
.content[data-sk-ready] {
  animation: sk-contentIn .35s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes sk-contentIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Stagger delays (for skeleton rows/cards) ───────────────── */
.sk-delay-1 { animation-delay: .05s; }
.sk-delay-2 { animation-delay: .1s; }
.sk-delay-3 { animation-delay: .15s; }
.sk-delay-4 { animation-delay: .2s; }
.sk-delay-5 { animation-delay: .25s; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sk-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .sk-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sk-grid-2-mobile-1 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sk-grid-2 { grid-template-columns: 1fr; }
  .sk-grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — db-* (layouts/admin/dashboard.blade.php)
 * ═══════════════════════════════════════════════════════════════ */
.db { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 18px); }

/* Hero */
.db-hero {
    background: var(--primary);
    border-radius: 14px;
    padding: clamp(18px, 2.5vw, 22px) clamp(20px, 3vw, 26px);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(25,156,130,.25);
}
.db-hero-text { min-width: 0; flex: 1; }
.db-hero-text h2 { font-size: clamp(18px, 2vw, 21px); font-weight: 700; color: #fff; margin: 0 0 3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-hero-text p { font-size: 12px; color: rgba(255,255,255,.7); margin: 0; }
.db-hero-text p::first-letter { text-transform: uppercase; }
.db-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.db-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap; border: none; cursor: pointer; line-height: 1;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.db-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.db-btn:active { transform: scale(.97); }
.db-btn:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }
.db-btn--ghost { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.db-btn--ghost:hover { background: rgba(255,255,255,.25); color: #fff; }
.db-btn--solid { background: #fff; color: #199c82; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.db-btn--solid:hover { background: #f0fdf9; color: #199c82; }

/* KPI Grid — auto-fit elimina saltos discretos entre breakpoints */
.db-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(10px, 1.4vw, 14px);
}
.db-kpi {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 18px 20px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07); position: relative; overflow: hidden; min-width: 0;
}
.db-kpi-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.db-kpi-icon svg { width: 20px; height: 20px; }
.db-kpi--teal .db-kpi-icon   { background: rgba(25,156,130,.12); color: #199c82; }
.db-kpi--green .db-kpi-icon  { background: rgba(34,197,94,.12);  color: #22c55e; }
.db-kpi--amber .db-kpi-icon  { background: rgba(245,158,11,.12); color: #f59e0b; }
.db-kpi--blue  .db-kpi-icon  { background: rgba(59,130,246,.12); color: #3b82f6; }
.db-kpi--red   .db-kpi-icon  { background: rgba(239,68,68,.12);  color: #ef4444; }
.db-kpi--purple .db-kpi-icon { background: rgba(139,92,246,.12); color: #8b5cf6; }
.db-kpi-body { flex: 1; min-width: 0; }
.db-kpi-val {
    display: block; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800;
    color: #1e293b; line-height: 1; letter-spacing: -.5px;
}
.db-kpi-label {
    display: block; font-size: 11px; font-weight: 600;
    color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px;
}
.db-kpi-spark {
    position: absolute; bottom: 8px; right: 12px;
    width: 80px; height: 28px; opacity: .6;
}

/* Income row */
.db-income-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 14px); }
.db-income-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 20px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.07); min-width: 0;
}
.db-income-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.db-income-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.db-income-trend {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-lg); white-space: nowrap;
}
.db-trend-up   { background: #f0fdf4; color: #16a34a; }
.db-trend-down { background: #fef2f2; color: #dc2626; }
.db-trend-zero { background: #f8fafc; color: #94a3b8; }
.db-income-val { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; color: #1e293b; letter-spacing: -.5px; line-height: 1; margin-bottom: 6px; }
.db-income-sub { font-size: 12px; color: #94a3b8; }

/* Chart cards */
.db-chart-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 18px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.07); min-width: 0; overflow: hidden;
}
.db-chart-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 2px; }
.db-chart-sub   { font-size: 12px; color: #94a3b8; margin-bottom: 14px; }
.db-chart-wrap { position: relative; width: 100%; }
.db-chart-wrap--main   { height: 260px; }
.db-chart-wrap--donut  { height: 240px; }
.db-chart-wrap--week   { height: 180px; }
.db-charts-main { display: grid; grid-template-columns: 3fr 1.4fr; gap: clamp(10px, 1.4vw, 14px); }

/* Panels */
.db-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(10px, 1.4vw, 14px); }
.db-panel {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07); overflow: hidden; display: flex; flex-direction: column;
}
.db-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.db-panel-head h3 {
    font-size: 14px; font-weight: 700; color: #1e293b;
    display: flex; align-items: center; gap: 7px; margin: 0;
}
.db-panel-head h3 svg { width: 15px; height: 15px; flex-shrink: 0; }
.db-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-lg); white-space: nowrap; }
.db-badge--warn { background: #fef9c3; color: #92400e; }
.db-badge--info { background: #e0f2fe; color: #0369a1; }
.db-badge--red  { background: #fef2f2; color: #dc2626; }
.db-panel-body { overflow-y: auto; max-height: 300px; flex: 1; }

/* Variante cuando el panel body contiene una tabla: scroll horizontal seguro */
.db-panel-body--table {
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 300px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.db-panel-body--table > table { min-width: max-content; }

/* Alert items */
.db-alert-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 18px; border-bottom: 1px solid #f8fafc; transition: background .15s;
}
.db-alert-item:last-child { border-bottom: none; }
.db-alert-item:hover { background: #fafbfc; }
.db-avatar {
    width: 36px; height: 36px; border-radius: 50%; color: #fff;
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.db-avatar--teal  { background: #199c82; }
.db-avatar--amber { background: #f59e0b; }
.db-avatar--red   { background: #ef4444; }
.db-alert-info { flex: 1; min-width: 0; }
.db-alert-name { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-alert-meta { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.db-days-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-lg); white-space: nowrap; flex-shrink: 0; }
.db-days-pill--critical { background: #fef2f2; color: #dc2626; }
.db-days-pill--warning  { background: #fef9c3; color: #a16207; }
.db-days-pill--neutral  { background: #f1f5f9; color: #64748b; }

/* Upcoming table */
.db-upcoming-table { width: 100%; border-collapse: collapse; }
.db-upcoming-table th {
    font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px;
    padding: 8px 18px; text-align: left; border-bottom: 1px solid #e2e8f0; background: #f8fafc; white-space: nowrap;
}
.db-upcoming-table td {
    padding: 10px 18px; font-size: 12px; color: #1e293b; border-bottom: 1px solid #f8fafc; vertical-align: middle;
}
.db-upcoming-table td:first-child { font-weight: 600; white-space: nowrap; }
.db-upcoming-table tr:last-child td { border-bottom: none; }
.db-upcoming-table tr:hover td { background: #fafbfc; }
.db-date-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(25,156,130,.1); color: #199c82;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-lg);
}
.db-date-pill svg { width: 10px; height: 10px; }

/* Agenda block */
.db-agenda {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07); overflow: hidden;
}
.db-agenda-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #f1f5f9;
}
.db-agenda-head h3 {
    font-size: 14px; font-weight: 700; color: #1e293b;
    display: flex; align-items: center; gap: 7px; margin: 0;
}
.db-agenda-head h3 svg { width: 15px; height: 15px; }
.db-agenda-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px; border-bottom: 1px solid #f8fafc; transition: background .15s;
}
.db-agenda-item:last-child { border-bottom: none; }
.db-agenda-item:hover { background: #fafbfc; }
.db-agenda-time {
    font-size: 13px; font-weight: 700; color: #199c82;
    min-width: 50px; white-space: nowrap;
}
.db-agenda-time--none { color: #94a3b8; }
.db-agenda-info { flex: 1; min-width: 0; }
.db-agenda-name { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-agenda-tipo { font-size: 11px; color: #94a3b8; }
.db-agenda-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 36px; padding: 8px 14px; border-radius: 8px;
    background: rgba(25,156,130,.08); color: #199c82;
    font-size: 12px; font-weight: 600; text-decoration: none; flex-shrink: 0;
    transition: background-color .15s ease, transform .12s ease;
}
.db-agenda-action:hover { background: rgba(25,156,130,.15); }
.db-agenda-action:active { transform: scale(.96); }
.db-agenda-action:focus-visible { outline: 2px solid rgba(25,156,130,.6); outline-offset: 2px; }
.db-agenda-action svg { width: 12px; height: 12px; }

/* Portal activity feed */
.db-portal-feed { display: flex; flex-direction: column; }
.db-portal-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px; border-bottom: 1px solid #f8fafc;
}
.db-portal-item:last-child { border-bottom: none; }
.db-portal-ico {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(139,92,246,.1); color: #8b5cf6;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.db-portal-ico svg { width: 14px; height: 14px; }
.db-portal-text { flex: 1; min-width: 0; }
.db-portal-name { font-size: 12px; font-weight: 600; color: #1e293b; }
.db-portal-date { font-size: 10px; color: #94a3b8; }

/* Empty state */
.db-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 36px 20px; gap: 8px; color: #94a3b8;
}
.db-empty svg { width: 36px; height: 36px; opacity: .35; }
.db-empty p { font-size: 13px; margin: 0; text-align: center; }

/* Main content grid (agenda left, alerts right) */
.db-content-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(10px, 1.4vw, 14px); }

/* ── Dashboard Responsive ──────────────────────────────────── */
/* Apilar las dos gráficas en cuanto el área útil baja (iPad landscape con
   sidebar visible queda en ~764px; entre 900–1199 también es tight). */
@media (max-width: 1199px) {
    .db-charts-main { grid-template-columns: 1fr; }
    /* Card a ancho completo: el donut se capa y centra para no quedar
       perdido en una tarjeta muy ancha (la leyenda es interna del canvas). */
    .db-chart-wrap--donut { height: 240px; max-width: 340px; margin-inline: auto; }
}

/* Tablets pequeñas / iPad portrait: stack del resto de bloques y limpieza */
@media (max-width: 900px) {
    .db-bottom { grid-template-columns: 1fr; }
    .db-content-grid { grid-template-columns: 1fr; }
    /* 4 KPIs: forzar 2×2 en el rango (641–900) donde auto-fit dejaba 3+1.
       Abajo de 640 ya hay regla 2 cols; abajo de 360 cae a 1 col. */
    .db-kpis { grid-template-columns: 1fr 1fr; }
    .db-chart-wrap--donut { height: 220px; }

    /* Sparkline: en widths chicos se monta sobre el valor del KPI → ocultar */
    .db-kpi-spark { display: none; }

    /* Eliminar scroll anidado en táctil: la página entera scrollea */
    .db-panel-body,
    .db-panel-body--table { max-height: none; overflow-y: visible; }
}

/* Móvil: stack completo, KPIs 2 cols, controles full-width
   Las tipografías ya escalan vía clamp() — sólo se redefine layout. */
@media (max-width: 640px) {
    .db-hero { flex-direction: column; align-items: stretch; gap: 14px; }
    .db-hero-text { width: 100%; }
    .db-actions { width: 100%; flex-direction: column; gap: 10px; }
    .db-btn { width: 100%; min-height: 44px; padding: 12px 18px; font-size: 14px; }
    .db-kpis { grid-template-columns: 1fr 1fr; }
    .db-kpi { padding: 14px; gap: 10px; }
    .db-kpi-label { font-size: 10px; }
    .db-income-row { grid-template-columns: 1fr; }
    .db-chart-wrap--main  { height: 220px; }
    .db-chart-wrap--donut { height: 220px; }
    .db-chart-wrap--week  { height: 150px; }
    .db-agenda-action { min-height: 40px; padding: 10px 16px; font-size: 13px; }
}

/* Móviles muy pequeños (≤360 px): última caída a 1 col */
@media (max-width: 360px) {
    .db-kpis { grid-template-columns: 1fr; }
    .db-income-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Próximas Citas: tabla → lista táctil en pantallas chicas ──
   Mantiene el HTML <table> intacto pero re-renderiza cada <tr> como
   card flex (nombre izquierda + fecha derecha). Elimina el scroll
   horizontal generado por `min-width: max-content`. */
@media (max-width: 700px) {
    .db-panel-body--table {
        padding: 0;
        overflow-x: visible;
    }
    /* Debe ganar en especificidad al base `.db-panel-body--table > table
       { min-width: max-content }` (0,1,1); si no, la tabla se fuerza a
       max-content y `.db-panel { overflow:hidden }` recorta la columna
       de fecha en móvil. Selector hijo directo → especificidad (0,2,0). */
    /* `display:block` es clave: como <table> mantiene display:table, su
       algoritmo de auto-layout ignora width:100% y crece a max-content
       (nombre largo sin cortar), desbordando el panel. Volviéndola block
       llena el ancho del panel y deja que los <tr> flex encojan con
       ellipsis. */
    .db-panel-body--table > .db-upcoming-table { min-width: 0; display: block; }
    .db-upcoming-table thead { display: none; }
    .db-upcoming-table tbody { display: block; }
    .db-upcoming-table tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 18px;
        border-bottom: 1px solid #f1f5f9;
        transition: background-color .15s ease;
    }
    .db-upcoming-table tr:last-child { border-bottom: none; }
    .db-upcoming-table tr:hover { background: #fafbfc; }
    .db-upcoming-table tr:hover td { background: transparent; }
    .db-upcoming-table td {
        display: block;
        padding: 0;
        border-bottom: none;
        background: transparent;
        font-size: 13px;
    }
    .db-upcoming-table td:first-child {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .db-upcoming-table td:last-child {
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CARTAS MODULE — crt-* (admin/cartas/create, show)
   Rediseño completo: Document Studio + Viewer
 * ═══════════════════════════════════════════════════════════════ */

/* ── Shared: buttons ───────────────────────────────────────────── */
.crt-abtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600;
    border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.crt-abtn svg { width: 14px; height: 14px; flex-shrink: 0; }
.crt-abtn--primary {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(25,156,130,.22);
}
.crt-abtn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 3px 12px rgba(25,156,130,.30); }
.crt-abtn--outline {
    background: var(--bg-card); color: var(--text-secondary); border-color: var(--border);
}
.crt-abtn--outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.crt-abtn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.crt-abtn--ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.crt-abtn--danger { background: transparent; color: var(--error); border-color: #fecaca; }
.crt-abtn--danger:hover { background: var(--error-bg); }
.crt-abtn--full { width: 100%; justify-content: center; }
.crt-abtn__lbl { display: inline; }

/* ── Shared: status badges ─────────────────────────────────────── */
.crt-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
    letter-spacing: .03em;
}
.crt-badge svg { width: 10px; height: 10px; }
.crt-badge--borrador { background: #fef3c7; color: #92400e; }
.crt-badge--firmada  { background: rgba(25,156,130,.1); color: var(--primary); }
.crt-badge--enviada  { background: rgba(34,197,94,.1); color: #16a34a; }
.crt-badge--lg { padding: 5px 12px; font-size: 12px; }
.crt-badge--lg svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════
   CREATE PAGE — Document Studio
   admin/cartas/create.blade.php
 * ═══════════════════════════════════════════════════════════════ */
.crt-wrap { margin: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-height)); }

/* Context bar */
.crt-ctx {
    display: flex; align-items: center; gap: 8px; padding: 0 24px;
    height: 48px; background: var(--bg-card); border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.crt-ctx__back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none;
    transition: color .15s;
}
.crt-ctx__back:hover { color: var(--primary); }
.crt-ctx__back svg { width: 14px; height: 14px; }
.crt-ctx__sep { width: 14px; height: 14px; color: var(--border); flex-shrink: 0; }
.crt-ctx__page { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.crt-ctx__patient {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.crt-ctx__av {
    width: 24px; height: 24px; border-radius: 50%; background: var(--primary);
    color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.crt-ctx__lib-toggle {
    display: none; align-items: center; gap: 6px; padding: 5px 10px;
    font-size: 12px; font-weight: 600; color: var(--primary); border: 1.5px solid var(--primary);
    border-radius: var(--radius); background: var(--primary-bg); cursor: pointer;
    margin-left: 8px;
}
.crt-ctx__lib-toggle svg { width: 13px; height: 13px; }

/* Studio columns */
.crt-studio { display: flex; align-items: flex-start; flex: 1; }

/* Library sidebar */
.crt-lib {
    width: 296px; flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-card);
    position: sticky; top: calc(var(--topbar-height) + 48px);
    max-height: calc(100vh - var(--topbar-height) - 48px);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.crt-lib::-webkit-scrollbar { width: 4px; }
.crt-lib::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.crt-lib__hd {
    display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.crt-lib__hd svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Search */
.crt-lib__search-wrap {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.crt-lib__search-wrap > svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.crt-lib__search-wrap input {
    flex: 1; border: none; outline: none; font-size: 13px;
    color: var(--text-primary); background: transparent; font-family: inherit;
}
.crt-lib__search-wrap input::placeholder { color: var(--text-muted); }
.crt-lib__search-x {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; border-radius: 50%; padding: 0;
    transition: background .15s, color .15s;
}
.crt-lib__search-x:hover { background: var(--error-bg); color: var(--error); }
.crt-lib__search-x svg { width: 10px; height: 10px; }

/* Category accordion */
.crt-lib__cats { padding: 6px 0; }
.crt-acc { border-bottom: 1px solid #f1f5f9; }
.crt-acc:last-child { border-bottom: none; }

.crt-acc__hd {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    cursor: pointer; border: none; background: transparent; width: 100%;
    text-align: left; transition: background .12s;
}
.crt-acc__hd:hover { background: var(--bg-hover); }
.crt-acc__ico {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover); color: var(--text-muted);
}
.crt-acc__ico svg { width: 14px; height: 14px; }
.crt-acc__name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; text-align: left; }
.crt-acc__count {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    background: var(--bg-hover); padding: 1px 7px; border-radius: 999px;
}
.crt-acc__chev {
    width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.crt-acc--open .crt-acc__chev { transform: rotate(180deg); }

.crt-acc__body { overflow: hidden; max-height: 0; transition: max-height .28s cubic-bezier(.4,0,.2,1); }
.crt-acc--open .crt-acc__body { max-height: 1200px; }

/* Template cards */
.crt-tpl-card {
    display: block; padding: 9px 12px 9px 20px;
    border-left: 2.5px solid transparent; text-decoration: none;
    transition: background .12s, border-color .12s;
}
.crt-tpl-card:hover { background: var(--bg-hover); border-left-color: var(--border); }
.crt-tpl-card--sel { background: var(--primary-bg); border-left-color: var(--primary); }
.crt-tpl-card__name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.crt-tpl-card--sel .crt-tpl-card__name { color: var(--primary); }
.crt-tpl-card__desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.crt-tpl-card__badge {
    display: inline-flex; align-items: center; gap: 3px; margin-top: 4px;
    font-size: 10px; font-weight: 700; color: var(--primary);
    background: rgba(25,156,130,.12); padding: 2px 7px; border-radius: 999px;
}
.crt-tpl-card__badge svg { width: 9px; height: 9px; }

/* History section */
.crt-lib__hist {
    padding: 10px 0 8px; border-top: 1px solid var(--border); margin-top: 2px;
}
.crt-lib__hist-title {
    display: flex; align-items: center; gap: 6px; padding: 0 12px 8px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}
.crt-lib__hist-title svg { width: 12px; height: 12px; }
.crt-hist-row { display: block; padding: 8px 12px; text-decoration: none; transition: background .12s; }
.crt-hist-row:hover { background: var(--bg-hover); }
.crt-hist-row__name { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.crt-hist-row__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.crt-hist-row__meta > span:first-child { font-size: 11px; color: var(--text-muted); }

/* Workspace */
.crt-workspace { flex: 1; min-width: 0; }

/* Empty state */
.crt-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 64px 40px;
    min-height: calc(100vh - var(--topbar-height) - 48px - 64px);
}
.crt-empty__art { margin-bottom: 24px; }
.crt-empty__art svg { width: 140px; height: 140px; }
.crt-empty__title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; }
.crt-empty__body { font-size: 14px; color: var(--text-secondary); max-width: 400px; line-height: 1.65; margin: 0 0 24px; }
.crt-empty__body strong { color: var(--text-primary); }
.crt-empty__cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.crt-empty__pill {
    padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border); color: var(--text-secondary);
    background: var(--bg-card); cursor: pointer; transition: all .15s;
}
.crt-empty__pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }

/* Editor */
.crt-editor { padding: 28px 32px 100px; }
.crt-editor__hd {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.crt-editor__cat {
    display: inline-flex; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    background: var(--primary-bg); color: var(--primary); margin-bottom: 6px;
}
.crt-editor__name { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; line-height: 1.3; }
.crt-editor__desc { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.crt-editor__vars-note {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: 11px; color: var(--text-muted); background: var(--bg-hover);
    padding: 6px 10px; border-radius: var(--radius); white-space: nowrap;
}
.crt-editor__vars-note svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Form fields */
.crt-editor__form { display: flex; flex-direction: column; gap: 28px; }
.crt-field { display: flex; flex-direction: column; gap: 8px; }
.crt-field__lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .06em;
}
.crt-field__lbl svg { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }
.crt-field__opt { font-size: 10px; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.crt-field__meta-bar { display: flex; justify-content: flex-end; }
.crt-field__wc { font-size: 11px; color: var(--text-muted); }
.crt-field__ta {
    width: 100%; resize: vertical; font-size: 13.5px; color: var(--text-primary);
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px; font-family: inherit;
    line-height: 1.7; transition: border-color .15s, box-shadow .15s; outline: none;
}
.crt-field__ta:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,156,130,.09); }
.crt-field__ta--sm { min-height: 72px; font-size: 13px; }
.crt-field__ta--lg { min-height: 360px; font-size: 13.5px; }

/* Signature block */
.crt-sig-block {
    border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px;
}
.crt-sig-block--has {
    display: flex; align-items: center; gap: 20px;
    background: rgba(25,156,130,.03); border-color: rgba(25,156,130,.25);
}
.crt-sig-block__img img { max-height: 64px; max-width: 160px; object-fit: contain; display: block; }
.crt-sig-block__name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.crt-sig-block__title { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.crt-sig-block__lic { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.crt-sig-block__ok {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    font-size: 11px; font-weight: 700; color: var(--primary);
}
.crt-sig-block__ok svg { width: 11px; height: 11px; }
.crt-sig-block--empty {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-hover); color: var(--text-muted); font-size: 13px;
}
.crt-sig-block--empty svg { width: 22px; height: 22px; opacity: .4; flex-shrink: 0; }
.crt-sig-block--empty a { color: var(--primary); }
.crt-sig-block--empty p { margin: 0; }

/* Sticky action bar */
.crt-actbar {
    position: sticky; bottom: 0; z-index: 20;
    background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--border); flex-shrink: 0;
}
.crt-actbar__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 24px;
}
.crt-actbar__info {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-muted); overflow: hidden; min-width: 0;
}
.crt-actbar__info svg { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }
.crt-actbar__tpl { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-actbar__pat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-actbar__btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   SHOW PAGE — Document Viewer
   admin/cartas/show.blade.php
 * ═══════════════════════════════════════════════════════════════ */
.crt-view { margin: 0; }

/* ── Toolbar ── */
.crt-vbar {
    display: flex; align-items: center; gap: 10px; padding: 0 20px;
    height: 56px; background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky; top: var(--topbar-height); z-index: 15;
}
.crt-vbar__back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none;
    padding: 5px 8px; border-radius: var(--radius); transition: all .15s; flex-shrink: 0;
}
.crt-vbar__back:hover { color: var(--primary); background: var(--primary-bg); }
.crt-vbar__back svg { width: 14px; height: 14px; }
.crt-vbar__back span { white-space: nowrap; }
.crt-vbar__divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.crt-vbar__title {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font-size: 13.5px; font-weight: 600; color: var(--text-primary);
}
.crt-vbar__title svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }
.crt-vbar__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-vbar__spacer { flex: 1; }
.crt-vbar__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.crt-vbar__del {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #fecaca; border-radius: var(--radius);
    background: transparent; color: var(--error); cursor: pointer;
    transition: background .15s, border-color .15s; flex-shrink: 0;
}
.crt-vbar__del:hover { background: var(--error-bg); border-color: var(--error); }
.crt-vbar__del svg { width: 14px; height: 14px; }

/* ── Two-column layout ── */
.crt-view-cols { display: flex; align-items: flex-start; }

/* ── Meta panel ── */
.crt-vmeta {
    width: 260px; flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: #fafdfb;
    position: sticky; top: calc(var(--topbar-height) + 56px);
    max-height: calc(100vh - var(--topbar-height) - 56px);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    display: flex; flex-direction: column;
}
.crt-vmeta::-webkit-scrollbar { width: 4px; }
.crt-vmeta::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Patient card */
.crt-vm-patient {
    display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(25,156,130,.04) 0%, rgba(25,156,130,.01) 100%);
}
.crt-vm-patient__av {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #0d7d68 100%);
    color: #fff; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(25,156,130,.3);
}
.crt-vm-patient__info { flex: 1; min-width: 0; }
.crt-vm-patient__name { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-vm-patient__tag {
    display: inline-flex; align-items: center; gap: 3px; margin-top: 2px;
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.crt-vm-patient__tag svg { width: 10px; height: 10px; }
.crt-vm-patient__link {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--text-muted); text-decoration: none;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.crt-vm-patient__link:hover { background: var(--primary-bg); color: var(--primary); }
.crt-vm-patient__link svg { width: 12px; height: 12px; }

/* Status badge */
.crt-vm-status { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.crt-vm-status__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.crt-vm-status__badge svg { width: 12px; height: 12px; }
.crt-vm-status__badge--borrador { background: #fef3c7; color: #92400e; }
.crt-vm-status__badge--firmada  { background: rgba(25,156,130,.12); color: var(--primary); border: 1px solid rgba(25,156,130,.2); }
.crt-vm-status__badge--enviada  { background: rgba(34,197,94,.1); color: #16a34a; border: 1px solid rgba(34,197,94,.2); }

/* Meta rows */
.crt-vm-rows { padding: 4px 0; flex: 1; }
.crt-vm-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 16px; transition: background .12s;
}
.crt-vm-row:hover { background: rgba(25,156,130,.03); }
.crt-vm-row__ico {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover); color: var(--text-muted);
}
.crt-vm-row__ico--ok { background: rgba(25,156,130,.1); color: var(--primary); }
.crt-vm-row__ico--sent { background: rgba(34,197,94,.1); color: #16a34a; }
.crt-vm-row__ico svg { width: 13px; height: 13px; }
.crt-vm-row__lbl {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-bottom: 2px;
}
.crt-vm-row__val { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.crt-vm-row__sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.crt-vm-row__email { font-size: 12px; color: var(--text-primary); word-break: break-all; }
.crt-vm-row--sent { background: rgba(34,197,94,.03); }

/* Actions */
.crt-vm-actions {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px; border-top: 1px solid var(--border);
    background: var(--bg-card);
}

/* ── Document area ── */
.crt-docview {
    flex: 1; min-width: 0;
    padding: 40px 48px 64px;
    background: #eef2f6;
}

/* Paper card */
.crt-paper {
    max-width: 700px; margin: 0 auto;
    background: #fff; border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.08);
    padding: 56px 60px;
}

/* Letterhead */
.crt-paper__lh {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 4px;
}
.crt-paper__lh-logo { flex-shrink: 0; }
.crt-paper__lh-logo img { max-width: 80px; max-height: 68px; object-fit: contain; display: block; }
.crt-paper__lh-info { flex: 1; }
.crt-paper__lh-name { font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: -.2px; }
.crt-paper__lh-prof { font-size: 10.5px; color: var(--primary); font-weight: 700; margin-top: 2px; letter-spacing: .02em; }
.crt-paper__lh-contact { font-size: 11px; color: #64748b; margin-top: 5px; line-height: 1.6; }
.crt-paper__rule { height: 2.5px; background: linear-gradient(90deg, var(--primary) 0%, rgba(25,156,130,.3) 100%); border-radius: 2px; margin: 14px 0 22px; }
.crt-paper__date { text-align: right; font-size: 12px; color: #64748b; margin-bottom: 22px; font-style: italic; }
.crt-paper__recipient {
    font-size: 13px; color: #1e293b; font-weight: 600; line-height: 1.55;
    margin-bottom: 20px; padding: 12px 16px;
    background: #f8fafc; border-left: 3px solid var(--primary);
    border-radius: 0 6px 6px 0;
}
.crt-paper__body {
    font-size: 13.5px; color: #334155; line-height: 1.85;
    text-align: justify; word-break: break-word; margin-bottom: 36px;
}
.crt-paper__body p { margin: 0 0 12px 0; }
.crt-paper__body p:last-child { margin-bottom: 0; }
.crt-paper__sig { border-top: 1px solid #e2e8f0; padding-top: 28px; }
.crt-paper__sig-saludo { font-size: 13px; color: #64748b; margin: 0 0 14px; }
.crt-paper__sig-img { max-height: 64px; margin-bottom: 6px; display: block; }
.crt-paper__sig-blank { height: 52px; width: 180px; border-bottom: 1px solid #1e293b; margin-bottom: 8px; }
.crt-paper__sig-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.crt-paper__sig-title { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.crt-paper__sig-lic { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   SHARED MODAL
 * ═══════════════════════════════════════════════════════════════ */
.crt-modal {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.48); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity .22s;
}
.crt-modal--open { opacity: 1; pointer-events: auto; }
.crt-modal__box {
    background: var(--bg-card); border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.18); width: 100%; max-width: 480px;
    max-height: min(90vh, 90dvh);
    display: flex; flex-direction: column;
    transform: scale(.96) translateY(8px);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    overflow: hidden;
}
.crt-modal__body { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.crt-modal--open .crt-modal__box { transform: scale(1) translateY(0); }
.crt-modal__hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.crt-modal__hd-left { display: flex; align-items: center; gap: 12px; }
.crt-modal__ico {
    width: 38px; height: 38px; border-radius: var(--radius); flex-shrink: 0;
    background: var(--primary-bg); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.crt-modal__ico svg { width: 18px; height: 18px; }
.crt-modal__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.crt-modal__sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.crt-modal__close {
    width: var(--touch-min); height: var(--touch-min); border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.crt-modal__close:hover { background: var(--error-bg); color: var(--error); }
.crt-modal__close svg { width: 13px; height: 13px; }
.crt-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.crt-modal__ft {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-hover);
}
.crt-mfield { display: flex; flex-direction: column; gap: 5px; }
.crt-mfield__lbl { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.crt-mfield__opt { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.crt-mfield__input {
    border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 9px 12px; font-size: 13px; color: var(--text-primary);
    background: var(--bg-card); font-family: inherit; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.crt-mfield__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,156,130,.09); }
.crt-mfield__ta { resize: vertical; min-height: 80px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .crt-lib { width: 260px; }
    .crt-editor { padding: 20px 24px 100px; }
    .crt-paper { padding: 40px 42px; }
    .crt-abtn__lbl { display: none; }
    .crt-abtn--full .crt-abtn__lbl,
    .crt-actbar__btns .crt-abtn .crt-abtn__lbl { display: inline; }
}

@media (max-width: 768px) {
    .crt-ctx { height: auto; min-height: 48px; padding: 8px 16px; flex-wrap: wrap; }
    .crt-ctx__patient { margin-left: 0; width: 100%; margin-top: 2px; }
    .crt-ctx__lib-toggle { display: flex; }

    .crt-lib {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
        width: 280px; transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        max-height: 100dvh; box-shadow: none;
    }
    .crt-lib--visible {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.16);
    }

    .crt-workspace { width: 100%; }
    .crt-editor { padding: 16px 16px 80px; }
    .crt-editor__hd { flex-direction: column; gap: 10px; }
    .crt-editor__name { font-size: 18px; }
    .crt-editor__vars-note { display: none; }

    .crt-actbar__in { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .crt-actbar__info { display: none; }
    .crt-actbar__btns { flex-direction: column; }
    .crt-actbar__btns .crt-abtn { width: 100%; justify-content: center; }
    .crt-abtn__lbl { display: inline !important; }

    .crt-vbar { height: auto; min-height: 58px; flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
    .crt-vbar__title { order: 2; width: 100%; font-size: 13px; }
    .crt-vbar__back { order: 1; }
    .crt-vbar__acts { order: 3; width: 100%; }
    .crt-vbar__acts .crt-abtn { flex: 1; justify-content: center; }
    .crt-vbar__acts .crt-abtn--danger { flex: 0 0 auto; }
    .crt-abtn__lbl { display: inline !important; }

    .crt-view-cols { flex-direction: column; }
    .crt-vmeta { width: 100%; position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); padding: 16px; }
    .crt-docview { padding: 20px 16px 40px; }
    .crt-paper { padding: 28px 24px; }
    .crt-paper__lh { flex-direction: column-reverse; gap: 10px; }

    .crt-empty { padding: 40px 20px; min-height: min(60vh, 60dvh); }

    .crt-modal { align-items: flex-end; padding: 0; }
    .crt-modal__box { border-radius: 16px 16px 0 0; max-width: 100%; }
}

@media (max-width: 480px) {
    .crt-empty__art svg { width: 100px; height: 100px; }
    .crt-empty__title { font-size: 17px; }
    .crt-paper { padding: 22px 16px; }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  FASE 1 — RESPONSIVE FOUNDATION
 *  Utilidades responsive + clases base (.table-wrapper, .modal-shell)
 *  Breakpoints oficiales: sm=480 · md=768 · lg=1024 · xl=1280
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Utilidades: Display / Visibilidad ────────────────────────── */
.u-hidden           { display: none !important; }

/* Ocultar bajo cierto breakpoint (mobile, hasta antes de md/lg) */
@media (max-width: 767.98px)  { .u-hide-md-down { display: none !important; } }
@media (max-width: 1023.98px) { .u-hide-lg-down { display: none !important; } }

/* Ocultar desde cierto breakpoint hacia arriba (tablet+, desktop+) */
@media (min-width: 768px)     { .u-hide-md-up   { display: none !important; } }
@media (min-width: 1024px)    { .u-hide-lg-up   { display: none !important; } }

/* Alias semánticos */
.u-only-mobile      { }
.u-only-desktop     { display: none; }
@media (min-width: 1024px) {
    .u-only-mobile  { display: none !important; }
    .u-only-desktop { display: revert; }
}

/* ─── Utilidades: Layout helpers ───────────────────────────────── */
.u-stack            { display: flex; flex-direction: column; gap: var(--u-gap, .75rem); }
.u-row-wrap         { display: flex; flex-wrap: wrap; gap: var(--u-gap, .5rem); align-items: center; }
.u-row-between      { display: flex; flex-wrap: wrap; gap: var(--u-gap, .5rem); align-items: center; justify-content: space-between; }

/* Grid que se autorreconfigura sin media queries.
   Controlar con --grid-min (por defecto 240px) y --grid-gap. */
.u-auto-grid {
    display: grid;
    gap: var(--grid-gap, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 240px)), 1fr));
}
.u-auto-grid--sm    { --grid-min: 180px; }
.u-auto-grid--lg    { --grid-min: 320px; }

/* Forzar stack en móvil (para grids legacy que no tienen breakpoint) */
@media (max-width: 767.98px) {
    .u-stack-md-down        { grid-template-columns: 1fr !important; flex-direction: column !important; }
    .u-stack-md-down > *    { width: 100% !important; }
}

/* ─── Utilidad: touch target mínimo ────────────────────────────── */
.u-touch            { min-height: var(--touch-min); min-width: var(--touch-min); }

/* ─── Utilidad: screen-reader only (accesibilidad) ─────────────── */
.u-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Utilidades tipográficas fluidas ─────────────────────────── */
.u-text-xs          { font-size: var(--fs-xs); }
.u-text-sm          { font-size: var(--fs-sm); }
.u-text-md          { font-size: var(--fs-md); }
.u-text-lg          { font-size: var(--fs-lg); }
.u-text-xl          { font-size: var(--fs-xl); }
.u-text-2xl         { font-size: var(--fs-2xl); }
.u-text-3xl         { font-size: var(--fs-3xl); }

/*
 * ─── .table-wrapper ───────────────────────────────────────────
 * Envuelve cualquier <table> para habilitar scroll horizontal
 * seguro en móvil sin romper el layout del padre.
 *
 * Uso:
 *   <div class="table-wrapper">
 *     <table>…</table>
 *   </div>
 *
 * Variante --flush: sin radius ni fondo (cuando ya va dentro de card).
 */
.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    position: relative;
}

.table-wrapper > table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
}

.table-wrapper--flush {
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Scrollbar sutil y consistente */
.table-wrapper::-webkit-scrollbar { height: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Hint visual: sombra a la derecha cuando hay scroll disponible.
   El sticky dentro de un contenedor con overflow se comporta como hint
   que se despega al llegar al final del scroll. */
.table-wrapper--hint { padding-right: 0; }
.table-wrapper--hint::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    display: block;
    width: 1px;
    height: 100%;
    box-shadow: -12px 0 12px -8px rgba(15, 23, 42, .12);
    pointer-events: none;
}

/*
 * ─── .modal-shell ─────────────────────────────────────────────
 * Estructura base responsive para modales custom.
 * No sustituye a los modales existentes: es el estándar para
 * modales NUEVOS y para los que se migren en fases posteriores.
 *
 * Uso:
 *   <div class="modal-shell is-open" role="dialog" aria-modal="true">
 *     <div class="modal-shell__box modal-shell__box--lg">
 *       <header class="modal-shell__header">…</header>
 *       <div class="modal-shell__body">…</div>
 *       <footer class="modal-shell__footer">…</footer>
 *     </div>
 *   </div>
 */
.modal-shell {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 3vw, 24px);
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.modal-shell.is-open {
    display: flex;
    animation: modalShellFadeIn .22s var(--transition) both;
}

.modal-shell__box {
    position: relative;
    width: 100%;
    max-width: min(560px, calc(100vw - 24px));
    max-height: min(85dvh, 85vh);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalShellSlideUp .28s var(--transition) both;
}

.modal-shell__box--sm  { max-width: min(420px, calc(100vw - 24px)); }
.modal-shell__box--lg  { max-width: min(800px, calc(100vw - 24px)); }
.modal-shell__box--xl  { max-width: min(1040px, calc(100vw - 24px)); }
.modal-shell__box--full {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
}

.modal-shell__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

.modal-shell__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.modal-shell__close {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.modal-shell__close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.modal-shell__body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-shell__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}

/* Adaptación móvil: padding más compacto + footer de ancho completo */
@media (max-width: 480px) {
    .modal-shell__header,
    .modal-shell__body,
    .modal-shell__footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .modal-shell__footer { justify-content: stretch; }
    .modal-shell__footer > * { flex: 1 1 auto; }
}

/* Variante "sheet" en móvil: pegado abajo, radius superior */
@media (max-width: 480px) {
    .modal-shell--sheet { align-items: flex-end; padding: 0; }
    .modal-shell--sheet .modal-shell__box {
        max-width: 100vw;
        max-height: 92dvh;
        border-radius: 20px 20px 0 0;
        animation: modalShellSheetUp .32s var(--transition) both;
    }
}

@keyframes modalShellFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalShellSlideUp {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalShellSheetUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-shell.is-open,
    .modal-shell__box { animation: none; }
}

/*
 * ─── Select2 — Hardening responsive (Fase 3) ──────────────────
 * Select2 se carga desde CDN en clinical-notes/create y tareas/index.
 * Estas reglas aseguran que el dropdown respete el viewport móvil
 * y que los controles tengan touch target correcto.
 * No sustituye a la inicialización JS, solo la refuerza.
 */
.select2-container { max-width: 100% !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    display: flex;
    align-items: center;
}

.select2-dropdown {
    max-width: calc(100vw - 16px) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md);
}

.select2-results__options {
    max-height: min(50vh, 50dvh) !important;
}

.select2-container--open .select2-dropdown--below {
    margin-top: 4px;
}

.select2-search--dropdown .select2-search__field {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        min-height: var(--touch-min);
    }
    .select2-results__options { max-height: min(60vh, 60dvh) !important; }
    .select2-results__option {
        padding: 10px 12px;
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
    }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  FASES 6-9 — iPad 11" responsive foundation completada
 *  (bp lg oficial 1023.98px)
 *
 *  DEUDA TÉCNICA REMANENTE (Fase 10, continua):
 *
 *  1. Unificar breakpoints legacy (900, 992, 860, 1100, 820, 780,
 *     600, 420, 380, 360) a oficiales (sm=480, md=768, lg=1024,
 *     xl=1280). Riesgo alto si se hace masivamente; migrar por
 *     módulo según se toquen.
 *
 *  2. Migrar modales existentes (.cal2-modal, .mt3-modal,
 *     .tp-modal, .crt-modal, .esc4-modal, .ncf-modal, .pp-modal,
 *     .b3-modal) a la clase base .modal-shell (definida en Fase 1).
 *     Cada migración debe probarse en flujo completo (abrir/cerrar,
 *     forms dentro, focus trap).
 *
 *  3. Reducir uso de !important en app.css (~665 ocurrencias).
 *     Indica cascada frágil. Refactor progresivo al tocar módulos.
 *
 *  4. Convertir tablas de gestión (patients, users, changelog) a
 *     card view en móvil/iPad portrait. Hoy son tabla con scroll
 *     horizontal; el patrón card es más usable en táctil.
 *
 *  5. Migrar 374 font-sizes fijos a tokens --fs-xs..--fs-3xl
 *     (definidos en Fase 1). Escalado fluido automático.
 *
 *  6. Touch targets restantes <44px: audit completo de todos los
 *     selectores con height: 30/32/36/38px en admin.
 * ═══════════════════════════════════════════════════════════════
 */

/*
 * Fase 6 overrides — colapso de 2-col a 1-col en iPad portrait
 * para formularios principales del admin.
 */

/* ─── Fase 10 — Reset appearance global en inputs del admin ────
   iOS Safari aplica estilos nativos (pill radius, border propio) a
   submits, dates, selects. Este reset asegura que solo nuestro CSS
   aplique. No toca checkboxes, radios ni file (donde native OK).
*/
.form-input,
.form-select,
.form-textarea,
.pat-input,
.pat-select,
.usr-input,
.usr-select,
.ncf-input,
.ncf-select,
.cfg2-input,
.cfg2-select,
.tp-finput,
.tp-fselect,
.tp-ftextarea,
.mc3-input,
.mc3-select,
.crt-mfield__input,
.rpt2-filter-input,
input[type="submit"].pat-btn,
input[type="submit"].usr-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Tareas admin: fields con min-width que colapsa en móvil (migrado desde inline) */
.tp-ffield-date { flex: 1; min-width: 180px; }
.tp-ffield-days { flex: 1; min-width: 140px; }

/* Settings: wrap de select con min-width que colapsa en tablet (migrado desde inline) */
.cfg2-select-wrap--wide { min-width: 160px; }

@media (max-width: 767.98px) {
    .tp-ffield-date,
    .tp-ffield-days {
        min-width: 0;
        width: 100%;
        flex-basis: 100%;
    }
    .cfg2-select-wrap--wide {
        min-width: 0;
        width: 100%;
    }
}

/* Form grids: colapsar a 1 col en iPad portrait y tablet */
@media (max-width: 1023.98px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .form-group--full {
        grid-column: 1 !important;
    }
    .usr-form-grid {
        grid-template-columns: 1fr !important;
    }
    .usr-form-group--full {
        grid-column: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ESTUDIO DE AUDIO — Mi Consultorio > Pestaña Audios
   Prefijo: ea-
   ═══════════════════════════════════════════════════════════════ */
@keyframes eaFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes eaShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Info box */
.ea-info {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 16px; margin-bottom: 20px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid #99f6e4; border-radius: 12px;
    font-size: 13px; color: #134e4a; line-height: 1.55;
}
.ea-info svg { width: 16px; height: 16px; color: #14b8a6; flex-shrink: 0; margin-top: 2px; }
.ea-info strong { color: #0f766e; font-weight: 700; }

/* Exercise list */
.ea-exercises { display: flex; flex-direction: column; gap: 16px; }
.ea-exercise {
    background: #fff; border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px; overflow: hidden;
    animation: eaFadeIn .4s ease both;
}
.ea-exercise:nth-child(2) { animation-delay: .05s; }
.ea-exercise:nth-child(3) { animation-delay: .1s; }

.ea-exercise__head {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    background: linear-gradient(180deg, #fafbff 0%, transparent 100%);
}
.ea-exercise__emoji {
    font-size: 28px; line-height: 1; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px;
    background: #f8fafc; display: flex; align-items: center; justify-content: center;
}
.ea-exercise__title {
    font-size: 15px; font-weight: 700; color: var(--text-primary, #0f172a);
    margin: 0 0 2px; letter-spacing: -.005em;
}
.ea-exercise__hint {
    font-size: 12.5px; color: var(--text-secondary, #64748b); margin: 0;
}

/* Slots within exercise */
.ea-exercise__slots {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.ea-slot {
    padding: 18px 20px;
    border-right: 1px solid var(--border-light, #f1f5f9);
    transition: background .22s;
    display: flex; flex-direction: column; gap: 14px;
}
.ea-slot:last-child { border-right: none; }
.ea-slot--loaded { background: linear-gradient(145deg, #fafffe 0%, #fff 100%); }
.ea-slot--empty { background: #fafbfc; }

.ea-slot__head {
    display: flex; align-items: flex-start; gap: 12px;
}
.ea-slot__icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ea-slot__icon svg { width: 17px; height: 17px; }
.ea-slot__icon--voz     { background: #fce7f3; color: #db2777; }
.ea-slot__icon--ambient { background: #ede9fe; color: #7c3aed; }

.ea-slot__meta { flex: 1; min-width: 0; }
.ea-slot__label {
    font-size: 13.5px; font-weight: 700; color: var(--text-primary, #0f172a);
    margin: 0 0 2px; line-height: 1.3;
}
.ea-slot__hint {
    font-size: 11.5px; color: var(--text-muted, #94a3b8); margin: 0; line-height: 1.4;
}
.ea-slot__badge { flex-shrink: 0; }

.ea-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.ea-badge--ok { background: #dcfce7; color: #15803d; }
.ea-badge--ok svg { width: 11px; height: 11px; }
.ea-badge--empty { background: #f1f5f9; color: #64748b; }

/* Player */
.ea-slot__player {
    display: flex; flex-direction: column; gap: 6px;
    animation: eaFadeIn .3s ease both;
}
.ea-audio {
    width: 100%; height: 36px;
    border-radius: 10px;
}
.ea-audio::-webkit-media-controls-panel { background: #f8fafc; }
.ea-slot__meta-small {
    font-size: 11px; color: var(--text-muted, #94a3b8);
    letter-spacing: .02em;
}

/* ─── Admin: Portal guide copy button ────────────────────── */
.pp2-hdr-btn--guide {
  transition: color .25s, background .25s;
}
.pp2-hdr-btn--guide.is-copied {
  color: #059669;
  background: #f0fdf4;
}
.pp2-hdr-btn--guide.is-copied svg {
  stroke: #059669;
}

/* Actions */
.ea-file-input { display: none; }
.ea-slot__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ea-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px;
    font-size: 12.5px; font-weight: 600; font-family: var(--font-family, inherit);
    cursor: pointer; border: none; transition: all .2s; white-space: nowrap;
}
.ea-btn svg { width: 14px; height: 14px; }
.ea-btn--primary {
    /* Acento de marca de la doctora (antes degradado teal fijo). Sólido como
       el resto de CTAs del módulo (.mc3-btn-save). */
    background: var(--primary);
    color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb),.25);
}
.ea-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb),.35); }
.ea-btn--ghost {
    background: transparent; color: var(--text-secondary, #64748b);
    border: 1px solid var(--border, #e2e8f0);
}
.ea-btn--ghost:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* Touch targets: en táctil los botones del Estudio de audio (~33px por el
   padding) suben al mínimo cómodo de 44px sin afectar el desktop. */
@media (pointer: coarse) {
    .ea-btn { min-height: 44px; }
}

/* Progress */
.ea-slot__progress { display: flex; flex-direction: column; gap: 6px; }
.ea-slot__progress-bar {
    width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;
}
.ea-slot__progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #14b8a6, #0d9488, #14b8a6);
    background-size: 200% 100%;
    animation: eaShimmer 1.5s linear infinite;
    transition: width .2s ease;
    border-radius: 3px;
}
.ea-slot__progress-text { font-size: 11px; color: var(--text-secondary, #64748b); font-weight: 600; }

/* Final tip */
.ea-tip {
    margin-top: 20px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 10px;
    font-size: 12.5px; color: #78350f; line-height: 1.55;
}
.ea-tip strong { color: #92400e; }

/* Responsive */
@media (max-width: 700px) {
    .ea-exercise__slots { grid-template-columns: 1fr; }
    .ea-slot { border-right: none; border-bottom: 1px solid var(--border-light, #f1f5f9); }
    .ea-slot:last-child { border-bottom: none; }
    .ea-exercise__head { padding: 14px 16px; gap: 12px; }
    .ea-slot { padding: 16px; }
    .ea-exercise__emoji { width: 40px; height: 40px; font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Estudio de audio · "Abrir guía" — boton secundario en slot voz
   ══════════════════════════════════════════════════════════════════════ */
.ea-btn--guide {
    background: #fff;
    color: #0f766e;
    border: 1px solid #99f6e4;
    box-shadow: 0 1px 2px rgba(15, 118, 110, .06);
}
.ea-btn--guide:hover {
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border-color: #5eead4;
    color: #0d5d54;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 118, 110, .12);
}
.ea-btn--guide svg { color: #14b8a6; }

/* ═══════════════════════════════════════════════════════════════════════
   Estudio de audio · Modal de guía (.eag-*)  ·  Rediseño v3 mobile-first
   No graba audio. Es un teleprompter clínico responsivo y accesible.
   Filosofía: mobile-first base → escala a 640px (tablet) y 1024px (desktop).
   Sin backdrop-filter pesado, sin ambient blobs animados, sin halos.
   safe-area-insets en iOS, dvh con fallback, prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* ─────────── ROOT CONTAINER ─────────── */
.eag {
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex; flex-direction: column;
    background: rgba(15, 23, 42, .55);
}
.eag--reading { background: #050811; }

.eag-backdrop {
    position: absolute; inset: 0;
    cursor: pointer;
    z-index: 0;
}
.eag--reading .eag-backdrop { cursor: default; pointer-events: none; }

/* Alpine transitions */
.eag--enter { transition: opacity .25s ease; }
.eag--enter-start { opacity: 0; }
.eag--enter-end { opacity: 1; }
.eag--leave { transition: opacity .2s ease; }
.eag--leave-start { opacity: 1; }
.eag--leave-end { opacity: 0; }

/* ─────────── SHEET ─────────── */
.eag-sheet {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fafffe 100%);
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    animation: eag-sheet-in .35s cubic-bezier(.16, .84, .44, 1);
}
.eag--reading .eag-sheet {
    background: linear-gradient(180deg, #050811 0%, #0b1220 100%);
    color: #e2e8f0;
}

/* ─────────── HEADER ─────────── */
.eag-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: #fff;
    border-bottom: 1px solid rgba(15, 118, 110, .08);
    flex-shrink: 0;
}
.eag-top__close {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .1);
    background: #fff;
    color: #475569;
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .18s;
    flex-shrink: 0;
}
.eag-top__close svg { width: 18px; height: 18px; }
.eag-top__close:hover {
    background: #fff1f2;
    border-color: #fecaca;
    color: #dc2626;
}
.eag-top__close:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.eag-top__meta { min-width: 0; }
.eag-top__title {
    margin: 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 800;
    color: #0f172a;
    letter-spacing: -.012em;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eag-top__emoji {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.eag-top__sub {
    margin: 2px 0 0;
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: #64748b;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.eag-top__actions {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}

/* CHRONO */
.eag-chrono {
    display: inline-flex; flex-direction: column; align-items: flex-end;
    gap: 4px;
    padding: 4px 8px;
    min-width: 50px;
}
.eag-chrono__num {
    font-size: 13.5px; font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
    line-height: 1;
}
.eag-chrono__bar {
    width: 46px; height: 3px;
    background: rgba(15, 118, 110, .12);
    border-radius: 999px;
    overflow: hidden;
}
.eag-chrono__bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #14b8a6, #0d9488);
    border-radius: inherit;
    transition: width .6s cubic-bezier(.16, .84, .44, 1);
}

.eag-top__menu {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .1);
    background: #fff;
    color: #475569;
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .18s;
}
.eag-top__menu svg { width: 16px; height: 16px; }
.eag-top__menu:hover { background: #f8fafc; color: #0f766e; border-color: #99f6e4; }
.eag-top__menu.is-active {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-color: transparent;
}
.eag-top__menu:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

/* ─────────── PROGRESS ─────────── */
.eag-progress {
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid rgba(15, 118, 110, .06);
    flex-shrink: 0;
}
.eag-progress__line {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.eag-progress__text {
    font-size: 11.5px; font-weight: 500;
    color: #64748b;
    line-height: 1.3;
    min-width: 0;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.eag-progress__text strong {
    color: #0f766e;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.eag-progress__sep { color: #cbd5e1; }
.eag-progress__label {
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.eag-progress__pct {
    font-size: 11px; font-weight: 800;
    color: #0d9488;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.eag-progress__bar {
    position: relative;
    height: 5px;
    background: rgba(15, 118, 110, .1);
    border-radius: 999px;
    overflow: hidden;
}
.eag-progress__bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #14b8a6, #0d9488);
    border-radius: inherit;
    transition: width .55s cubic-bezier(.16, .84, .44, 1);
    box-shadow: 0 0 8px rgba(20, 184, 166, .35);
}

/* ─────────── HERO ─────────── */
.eag-hero {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
    position: relative;
}

/* Tone chip */
.eag-tone {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
    border: 1px solid #fbcfe8;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600; font-style: italic;
    color: #9d174d;
    align-self: flex-start;
    line-height: 1.3;
    max-width: 100%;
}
.eag-tone svg { width: 12px; height: 12px; color: #db2777; flex-shrink: 0; }

/* Prose */
/* ── Guion (card de lectura tipo teleprompter) ──────────────────────────
   Tipografia: serif del sistema para el contenido (sensacion editorial,
   de "texto para leer en voz alta"), sans para el chrome (kicker, label).
   Sin Google Fonts — stack moderno con fallback Georgia.
   ───────────────────────────────────────────────────────────────────── */

/* Stack serif reutilizable (system-native + fallback Georgia) */
.eag-prose {
    position: relative;
    background: linear-gradient(180deg, #fffefb 0%, #fefcf6 100%);
    border: 1px solid rgba(94, 234, 212, .28);
    border-left: 3px solid #14b8a6;
    border-radius: 14px;
    padding: 24px 24px 22px;
    box-shadow: 0 4px 16px -10px rgba(15, 118, 110, .12);
    max-width: 62ch;
    margin: 0 auto;
}

/* Kicker discreto: "Guion para leer" (queda en sans, es chrome) */
.eag-prose__kicker {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    font-size: 10.5px; font-weight: 800;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin: -4px 0 16px;
}
.eag-prose__kicker-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
    flex-shrink: 0;
}

/* Linea base (animacion + reset) */
.eag-prose__line {
    margin: 0 0 16px;
    opacity: 0;
    animation: eag-fade-up .45s cubic-bezier(.16, .84, .44, 1) both;
    animation-delay: var(--d, 0s);
}
.eag-prose__line:last-child { margin-bottom: 0; }

/* Narrativa (lectura estandar) — SERIF editorial */
.eag-prose__line--narrative {
    font-family: ui-serif, 'Iowan Old Style', 'Charter', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    font-size: clamp(17px, 2.1vw, 19.5px);
    line-height: 1.78;
    color: #1f2937;
    font-weight: 400;
    letter-spacing: .002em;
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: pretty;
}

/* Instruccion (label clinico: "Decite por dentro:") — SANS uppercase */
.eag-prose__line--instruction {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 10px 0 8px;
    line-height: 1.3;
}
.eag-prose__line--instruction:first-of-type { margin-top: 0; }

/* Quote (frase exacta a decir) — SERIF mas grande, peso editorial */
.eag-prose__line--quote {
    font-family: ui-serif, 'Iowan Old Style', 'Charter', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    font-size: clamp(19.5px, 2.6vw, 24px);
    line-height: 1.45;
    color: #0f172a;
    font-weight: 400;
    letter-spacing: -.008em;
    padding: 4px 0 6px 18px;
    border-left: 2px solid rgba(20, 184, 166, .5);
    margin: 6px 0 12px;
    font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1;
    text-wrap: balance;
}
.eag-prose__line--quote + .eag-prose__line--quote {
    margin-top: -6px;
}

/* Narrativa post-quote = texto de cierre/apoyo (mas chico, italica serif) */
.eag-prose__line--quote + .eag-prose__line--narrative {
    font-size: clamp(14px, 1.7vw, 15.5px);
    color: #475569;
    font-style: italic;
    line-height: 1.65;
    padding-top: 14px;
    margin-top: 16px;
    border-top: 1px dashed rgba(15, 118, 110, .22);
    letter-spacing: 0;
}

/* Pause card (inline) */
.eag-pause {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid rgba(94, 234, 212, .55);
    border-radius: 14px;
}
.eag-pause.is-active {
    background: linear-gradient(135deg, #fff1f2 0%, #fff7ed 100%);
    border-color: rgba(251, 113, 133, .55);
}
.eag-pause__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(94, 234, 212, .6);
    color: #0d9488;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.eag-pause__icon svg { width: 18px; height: 18px; }
.eag-pause.is-active .eag-pause__icon {
    color: #f43f5e;
    border-color: rgba(251, 113, 133, .6);
    animation: eag-pause-pulse 1.5s ease-in-out infinite;
}
.eag-pause__body { min-width: 0; flex: 1; }
.eag-pause__label {
    font-size: 10.5px; font-weight: 800;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1.2;
}
.eag-pause.is-active .eag-pause__label { color: #be123c; }
.eag-pause__value {
    margin-top: 3px;
    font-size: 13.5px;
    color: #0f172a;
    line-height: 1.35;
}
.eag-pause__value strong {
    font-size: 17px; font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
}
.eag-pause.is-active .eag-pause__value strong { color: #be123c; }
.eag-pause__hint {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}

/* Reading mode (immersive dark) */
.eag--reading .eag-hero {
    justify-content: center;
    padding: 28px 6vw 28px;
}
.eag--reading .eag-prose {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 60ch;
}
.eag--reading .eag-prose__kicker {
    color: #5eead4;
    margin-bottom: 26px;
    justify-content: center;
    align-self: center;
}
.eag--reading .eag-prose__kicker-dot {
    background: #5eead4;
    box-shadow: 0 0 0 3px rgba(94, 234, 212, .2);
}
.eag--reading .eag-prose__line {
    text-align: center;
    margin-bottom: 28px;
}
.eag--reading .eag-prose__line--narrative {
    font-size: clamp(22px, 3.6vw, 32px);
    color: #f1f5f9;
    font-weight: 300;
    letter-spacing: -.012em;
    line-height: 1.55;
}
.eag--reading .eag-prose__line--instruction {
    font-size: 12px;
    color: #5eead4;
    margin: 6px 0 20px;
    letter-spacing: .18em;
}
.eag--reading .eag-prose__line--quote {
    font-size: clamp(26px, 4.4vw, 40px);
    color: #ffffff;
    font-weight: 400;
    padding: 14px 8px;
    border-left: none;
    border-top: 1px solid rgba(94, 234, 212, .22);
    border-bottom: 1px solid rgba(94, 234, 212, .22);
    margin: 14px auto 20px;
    max-width: 24ch;
    letter-spacing: -.018em;
    line-height: 1.4;
    font-style: italic;
}
.eag--reading .eag-prose__line--quote + .eag-prose__line--quote {
    margin-top: -8px;
    border-top: none;
    padding-top: 8px;
}
.eag--reading .eag-prose__line--quote + .eag-prose__line--narrative {
    font-size: clamp(15px, 1.8vw, 17px);
    color: #94a3b8;
    border-top: none;
    padding-top: 12px;
    margin-top: 14px;
    font-style: italic;
}
.eag-reading-exit {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: rgba(148, 163, 184, .12);
    border: 1px solid rgba(148, 163, 184, .25);
    color: #cbd5e1;
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .18s;
    z-index: 5;
}
.eag-reading-exit svg { width: 18px; height: 18px; }
.eag-reading-exit:hover {
    background: rgba(148, 163, 184, .22);
    color: #f1f5f9;
}
.eag-reading-exit:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
}

/* ─────────── DECK ─────────── */
.eag-deck {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(15, 118, 110, .08);
    box-shadow: 0 -6px 18px -10px rgba(15, 23, 42, .1);
    flex-shrink: 0;
}
.eag-deck--with-pause {
    grid-template-columns: 1fr 1fr 1fr;
}
.eag-deck--reading {
    background: rgba(11, 18, 32, .9);
    border-top-color: rgba(148, 163, 184, .15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.eag-nav {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 14px;
    font-size: 13.5px; font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    transition: transform .15s, background .18s, border-color .18s, box-shadow .18s;
    font-family: var(--font-family, inherit);
    letter-spacing: -.005em;
}
.eag-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.eag-nav__txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eag-nav:not(:disabled):active {
    transform: scale(.97);
}
.eag-nav:not(:disabled):hover {
    border-color: #99f6e4;
    color: #0f766e;
}
.eag-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.eag-nav:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}
.eag-nav--next {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(20, 184, 166, .4);
}
.eag-nav--next:not(:disabled):hover {
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(20, 184, 166, .55);
}
.eag-deck--reading .eag-nav {
    background: rgba(148, 163, 184, .08);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, .25);
}
.eag-deck--reading .eag-nav:not(:disabled):hover {
    background: rgba(148, 163, 184, .15);
    color: #f0fdfa;
    border-color: #5eead4;
}
.eag-deck--reading .eag-nav--next {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
}

/* Primary (pause control) */
.eag-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    border: none;
    border-radius: 14px;
    font-size: 13px; font-weight: 800;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(244, 63, 94, .4);
    transition: transform .15s, box-shadow .18s;
    letter-spacing: -.005em;
    font-family: var(--font-family, inherit);
}
.eag-primary svg { width: 17px; height: 17px; flex-shrink: 0; }
.eag-primary__txt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.eag-primary:active { transform: scale(.97); }
.eag-primary:hover { box-shadow: 0 6px 18px -4px rgba(244, 63, 94, .55); }
.eag-primary.is-active {
    background: linear-gradient(135deg, #f43f5e, #be123c);
    animation: eag-primary-pulse 1.6s ease-in-out infinite;
}
.eag-primary:focus-visible {
    outline: 2px solid #f43f5e;
    outline-offset: 2px;
}

/* ─────────── VEIL (for both sheets) ─────────── */
.eag-veil {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 12;
    cursor: pointer;
}

/* ─────────── BOTTOM SHEET MENU ─────────── */
.eag-sheet-menu {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 13;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 32px -8px rgba(15, 23, 42, .25);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1);
    max-height: 80vh; max-height: 80dvh;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: none;
    visibility: hidden;
}
.eag-sheet-menu.is-open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
.eag-sheet-menu__grab {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: #cbd5e1;
    border-radius: 999px;
}
.eag-sheet-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 22px 20px 8px;
    border-bottom: 1px solid #f1f5f9;
}
.eag-sheet-menu__head h3 {
    margin: 0;
    font-size: 16px; font-weight: 800;
    color: #0f172a;
    letter-spacing: -.015em;
}
.eag-sheet-menu__close {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .1);
    background: #fff;
    color: #64748b;
    display: grid; place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .18s;
}
.eag-sheet-menu__close svg { width: 15px; height: 15px; }
.eag-sheet-menu__close:hover { background: #f8fafc; color: #0f172a; }
.eag-sheet-menu__close:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}
.eag-sheet-menu__list {
    margin: 0;
    padding: 6px 8px 16px;
    list-style: none;
    overflow-y: auto;
    flex: 1;
}
.eag-sheet-menu__list > li {
    margin: 0;
}
.eag-sheet-menu__body {
    padding: 18px 20px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column; gap: 18px;
}

/* Option row */
.eag-opt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s;
    font-family: var(--font-family, inherit);
    min-height: 56px;
}
.eag-opt:hover, .eag-opt:focus-visible {
    background: #f8fafc;
    outline: none;
}
.eag-opt:focus-visible {
    box-shadow: 0 0 0 2px #0d9488;
}
.eag-opt--btn {
    color: inherit;
}
.eag-opt__text {
    min-width: 0;
    flex: 1;
}
.eag-opt__text strong {
    display: block;
    font-size: 14px; font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -.005em;
}
.eag-opt__text small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.45;
}
.eag-opt__action {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.eag-opt__action svg { width: 16px; height: 16px; }

/* SWITCH (in settings) */
.eag-switch {
    position: relative;
    width: 44px; height: 26px;
    border-radius: 999px;
    background: #e2e8f0;
    flex-shrink: 0;
    transition: background .25s;
    display: inline-block;
}
.eag-switch input {
    position: absolute;
    opacity: 0; width: 0; height: 0;
    pointer-events: none;
}
.eag-switch__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .2);
    transition: transform .28s cubic-bezier(.16, .84, .44, 1);
}
.eag-switch.is-on {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}
.eag-switch.is-on .eag-switch__thumb {
    transform: translateX(18px);
}

/* TIPS sheet */
.eag-tip-group h4 {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 800;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.eag-tip-group ul {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 10px;
}
.eag-tip-group li {
    position: relative;
    padding-left: 18px;
    font-size: 13px; line-height: 1.55;
    color: #475569;
}
.eag-tip-group li::before {
    content: '';
    position: absolute;
    left: 4px; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}
.eag-tip-cta {
    display: flex; gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid rgba(94, 234, 212, .45);
    border-radius: 14px;
}
.eag-tip-cta__icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid rgba(94, 234, 212, .45);
    color: #0d9488;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.eag-tip-cta__icon svg { width: 16px; height: 16px; }
.eag-tip-cta strong {
    display: block;
    font-size: 13px; font-weight: 800;
    color: #0f766e;
    margin-bottom: 3px;
}
.eag-tip-cta p {
    margin: 0;
    font-size: 12.5px; line-height: 1.55;
    color: #475569;
}

/* ─────────── ANIMATIONS ─────────── */
@keyframes eag-sheet-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes eag-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes eag-pause-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 63, 94, .35); }
    50%      { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
}
@keyframes eag-primary-pulse {
    0%, 100% { box-shadow: 0 4px 14px -4px rgba(244, 63, 94, .4), 0 0 0 0 rgba(244, 63, 94, .5); }
    50%      { box-shadow: 0 4px 14px -4px rgba(244, 63, 94, .6), 0 0 0 6px rgba(244, 63, 94, 0); }
}

/* ─────────── REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce) {
    .eag-sheet, .eag-prose__line, .eag-pause__icon, .eag-primary.is-active,
    .eag-sheet-menu, .eag-switch__thumb, .eag-progress__bar > span,
    .eag-chrono__bar > span, .eag-top__menu, .eag-nav, .eag-primary {
        animation: none !important;
        transition: none !important;
    }
    .eag-prose__line { opacity: 1; transform: none; }
}

/* ─────────── RESPONSIVE ─────────── */
/* Default: mobile-first (360-639px) is the base above */

/* ≥ 640px: Tablet portrait. Modal becomes a centered sheet with breathing room. */
@media (min-width: 640px) {
    .eag {
        padding: 24px;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, .55);
    }
    .eag--reading {
        padding: 0;
        background: #050811;
    }
    .eag-sheet {
        width: 100%; max-width: 720px;
        height: auto; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
        border-radius: 22px;
        flex: 0 1 auto;
        box-shadow: 0 30px 80px -12px rgba(15, 23, 42, .45);
    }
    .eag--reading .eag-sheet {
        max-width: none; max-height: 100vh; max-height: 100dvh;
        width: 100vw; height: 100vh; height: 100dvh;
        border-radius: 0;
    }
    .eag-top { padding: 14px 18px; padding-top: 14px; }
    .eag-top__title { font-size: 16px; }
    .eag-top__sub { font-size: 12px; }
    .eag-top__emoji { font-size: 20px; }
    .eag-chrono__num { font-size: 14.5px; }
    .eag-chrono__bar { width: 56px; }

    .eag-progress { padding: 14px 22px 12px; }
    .eag-progress__text { font-size: 12.5px; }
    .eag-progress__pct { font-size: 12px; }

    .eag-hero { padding: 18px 24px 22px; gap: 14px; }
    .eag-prose { padding: 24px 28px 22px; border-radius: 16px; }
    .eag-prose__line { margin-bottom: 16px; }
    .eag-prose__line--narrative { line-height: 1.75; }
    .eag-pause { padding: 14px 18px; }
    .eag-pause__icon { width: 44px; height: 44px; }
    .eag-pause__value { font-size: 14px; }
    .eag-pause__value strong { font-size: 18px; }

    .eag-deck { padding: 14px 20px; gap: 10px; }
    .eag-nav, .eag-primary { padding: 10px 16px; min-height: 50px; font-size: 14px; }

    /* Settings sheet becomes a centered card on tablet+ */
    .eag-sheet-menu {
        left: auto; right: auto; bottom: auto;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(.95);
        width: 100%; max-width: 460px;
        border-radius: 20px;
        max-height: min(80vh, 560px);
        opacity: 0;
        transition: transform .25s cubic-bezier(.16, .84, .44, 1), opacity .25s ease, visibility 0s linear .25s;
        /* pointer-events / visibility heredados de la regla base */
    }
    .eag-sheet-menu.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        transition: transform .25s cubic-bezier(.16, .84, .44, 1), opacity .25s ease, visibility 0s linear 0s;
    }
    .eag-sheet-menu__grab { display: none; }
    .eag-sheet-menu__head { padding: 18px 22px 12px; }
}

/* ≥ 1024px: Desktop. Wider modal, slightly bigger prose. */
@media (min-width: 1024px) {
    .eag-sheet { max-width: 820px; }
    .eag-prose { padding: 28px 32px 26px; }
    .eag-step__label { font-size: 18px; }
    .eag-nav__txt { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   App Footer — V2 Identity Strip
   ══════════════════════════════════════════════════════════════════════ */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 24px;
    border-top: 1px solid rgba(226,232,240,.8);
    background: transparent;
    flex-shrink: 0;
    opacity: 0;
    animation: appFooterIn .5s ease .35s forwards;
}
.app-footer__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-footer__item {
    font-size: 11px;
    font-weight: 500;
    color: #b6c0cc;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: color .25s ease;
}
.app-footer:hover .app-footer__item {
    color: var(--text-secondary, #64748b);
}
.app-footer__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d8dfe8;
    flex-shrink: 0;
}
.app-footer__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: rgba(25,156,130,.07);
    color: rgba(25,156,130,.55);
    border: 1px solid rgba(25,156,130,.15);
    transition: all .25s ease;
    user-select: none;
}
.app-footer:hover .app-footer__badge {
    background: rgba(25,156,130,.13);
    color: #199c82;
    border-color: rgba(25,156,130,.28);
    box-shadow: 0 0 10px rgba(25,156,130,.18);
}
@keyframes appFooterIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
    .app-footer { height: 30px; padding: 0 16px; }
    .app-footer__item { font-size: 10px; }
    .app-footer__badge { font-size: 9px; padding: 1.5px 6px; }
}

/* ========================================================================
 *  PATIENT REFERRAL v2 — Flujo de transferencia de paciente entre doctores
 *  Vistas: admin/patients/refer.blade.php          (.refr-*)
 *          admin/patients/refer-verify.blade.php   (.rotp-*)
 *
 *  Diseno premium clinico:
 *    - Hero degradado con identidad del paciente
 *    - Stepper visual de 3 pasos
 *    - Layout 2 columnas en desktop / stack en mobile con safe-area
 *    - Selector de profesional con cards interactivas y busqueda fluida
 *    - Confirmacion en danger-zone clara y separada
 *    - Sticky action bar tactil en mobile (44px+ touch targets)
 *    - OTP con barra de progreso de expiracion + boxes premium
 *    - Tokens visuales: var(--primary), var(--error), var(--warning)
 * ====================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────── */

.refr-page,
.rotp-page {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.rotp-page { max-width: 560px; }

/* Page-header neutralizado: el hero hace el trabajo del header en el v2 */
.refr-page > .page-header,
.rotp-page > .page-header { display: none; }

/* ── Hero card (refer) ─────────────────────────────────────────────── */

.refr-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 22px 24px 22px 26px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
}
/* Rail de acento clinico — reemplaza el gradiente multi-capa pesado por
   una sola franja sobria, coherente con la identidad teal del sistema. */
.refr-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}
.refr-hero__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(25, 156, 130, .55);
    flex-shrink: 0;
}
.refr-hero__icon svg { width: 28px; height: 28px; }
.refr-hero__copy { min-width: 0; }
.refr-hero__kicker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(239, 68, 68, .10); color: var(--error);
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 6px;
}
.refr-hero__kicker::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--error); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
    animation: refr-pulse 1.8s ease-in-out infinite;
}
@keyframes refr-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, .04); }
}
.refr-hero__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.refr-hero__subtitle {
    margin: 6px 0 0;
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.refr-hero__patient {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 0;
}
.refr-hero__avatar {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--primary-bg); color: var(--primary);
    font-weight: 700; font-size: 1rem;
    flex-shrink: 0;
}
.refr-hero__patient-body { min-width: 0; }
.refr-hero__patient-name {
    margin: 0;
    font-weight: 700; font-size: .95rem;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.refr-hero__patient-meta {
    margin: 2px 0 0;
    font-size: .76rem; color: var(--text-secondary);
    display: flex; gap: 10px; flex-wrap: wrap;
}
.refr-hero__patient-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ── Stepper ───────────────────────────────────────────────────────── */

.refr-stepper {
    display: flex; align-items: center; gap: 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 14px;
    margin-bottom: 22px;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.refr-stepper::-webkit-scrollbar { display: none; }
.refr-step {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-muted);
    font-size: .85rem; font-weight: 600;
    flex-shrink: 0;
}
.refr-step__num {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg-card-hover);
    border: 1.5px solid var(--border);
    font-weight: 700; font-size: .8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.refr-step--current { color: var(--text-primary); }
.refr-step--current .refr-step__num {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, .14);
}
.refr-step--done .refr-step__num {
    background: var(--primary-bg); color: var(--primary);
    border-color: rgba(25, 156, 130, .35);
}
.refr-step__sep {
    flex: 1 1 30px; min-width: 24px; height: 2px;
    background: var(--border);
    margin: 0 12px; border-radius: 2px;
    flex-shrink: 1;
}

/* ── Alerta de error del modulo ────────────────────────────────────── */

.refr-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, .22);
    background: var(--error-bg);
}
.refr-alert__icon {
    width: 32px; height: 32px; border-radius: 9px;
    flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(239, 68, 68, .12);
    color: var(--error);
}
.refr-alert__icon svg { width: 18px; height: 18px; }
.refr-alert__body { min-width: 0; }
.refr-alert__title {
    margin: 0;
    font-size: .9rem; font-weight: 700;
    color: var(--error);
    line-height: 1.3;
}
.refr-alert__msg {
    margin: 3px 0 0;
    font-size: .85rem; line-height: 1.5;
    color: var(--text-secondary);
}
.refr-alert__list {
    margin: 5px 0 0; padding-left: 18px;
    font-size: .85rem; line-height: 1.5;
    color: var(--text-secondary);
}
.refr-alert__list li + li { margin-top: 3px; }

/* ── Layout 2 columnas ─────────────────────────────────────────────── */

.refr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}
.refr-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.refr-aside {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 16px;
}

/* ── Section card ──────────────────────────────────────────────────── */

.refr-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.refr-section:focus-within {
    border-color: rgba(25, 156, 130, .35);
    box-shadow: 0 6px 20px -10px rgba(25, 156, 130, .25);
}
.refr-section__head {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-light, var(--border));
    background: linear-gradient(180deg, var(--bg-card-hover), transparent);
}
.refr-section__num {
    width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--primary-bg); color: var(--primary);
    font-weight: 700; font-size: .9rem;
    flex-shrink: 0;
}
.refr-section__num--danger { background: rgba(239, 68, 68, .10); color: var(--error); }
.refr-section__title {
    margin: 0; font-size: 1rem; font-weight: 700;
    color: var(--text-primary); line-height: 1.3;
}
.refr-section__sub {
    margin: 3px 0 0; font-size: .82rem;
    color: var(--text-secondary); line-height: 1.45;
}
.refr-section__body { padding: 20px 22px; }

/* ── Search input premium ──────────────────────────────────────────── */

.refr-search {
    position: relative;
    margin-bottom: 12px;
}
.refr-search__icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    width: 18px; height: 18px;
}
.refr-search__input {
    width: 100%;
    min-height: 46px;
    padding: 11px 42px 11px 42px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: .95rem;
    font-family: var(--font-family);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.refr-search__input::placeholder { color: var(--text-muted); }
.refr-search__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, .14);
    background: var(--bg-input);
}
.refr-search__clear {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 8px;
    border: none; background: var(--bg-card-hover);
    color: var(--text-secondary);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.refr-search__clear:hover { background: var(--border); color: var(--text-primary); }
.refr-search__clear[hidden] { display: none; }

/* ── Doctor cards ──────────────────────────────────────────────────── */

.refr-doctors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.refr-doctors::-webkit-scrollbar { width: 8px; }
.refr-doctors::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.refr-doctors::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.refr-doc {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
    min-width: 0;
}
.refr-doc:hover {
    border-color: rgba(25, 156, 130, .35);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .12);
}
.refr-doc input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.refr-doc:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(180deg, rgba(25, 156, 130, .07), var(--bg-card));
    box-shadow: 0 0 0 4px rgba(25, 156, 130, .12);
}
.refr-doc:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.refr-doc__avatar {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--primary-bg); color: var(--primary);
    font-weight: 700; font-size: .95rem;
    flex-shrink: 0;
}
.refr-doc__body { flex: 1 1 auto; min-width: 0; }
.refr-doc__name {
    display: block;
    font-weight: 600; color: var(--text-primary);
    font-size: .92rem; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.refr-doc__email {
    display: block;
    font-size: .76rem; color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.refr-doc__role {
    display: inline-flex; align-items: center;
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; letter-spacing: .04em;
    background: var(--primary-bg); color: var(--primary);
    flex-shrink: 0;
}
.refr-doc__role--admin { background: rgba(245, 158, 11, .12); color: var(--warning); }
.refr-doc__check {
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center;
    opacity: 0; transform: scale(.5);
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: none;
}
.refr-doc__check svg { width: 12px; height: 12px; }
.refr-doc:has(input:checked) .refr-doc__check {
    opacity: 1; transform: scale(1);
}

.refr-doctors-empty {
    text-align: center; padding: 36px 16px;
    color: var(--text-secondary);
    font-size: .88rem;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    background: var(--bg-card-hover);
    margin-top: 8px;
}

.refr-empty-state {
    text-align: center; padding: 40px 24px;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--text-secondary);
    font-size: .92rem; line-height: 1.55;
}
.refr-empty-state strong { color: var(--text-primary); display: block; margin-bottom: 6px; font-size: 1rem; }

/* ── Textarea con contador ─────────────────────────────────────────── */

.refr-textarea-wrap { position: relative; }
.refr-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 14px 32px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: .95rem; font-family: var(--font-family);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.refr-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, .14);
    background: var(--bg-input);
}
.refr-textarea__counter {
    position: absolute;
    right: 12px; bottom: 10px;
    font-size: .72rem; font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px var(--bg-card);
    padding: 2px 8px; border-radius: 999px;
    pointer-events: none;
}
.refr-textarea__counter--warn { color: var(--warning); }
.refr-textarea__counter--max  { color: var(--error); }

/* ── Confirmation switch ───────────────────────────────────────────── */

.refr-confirm {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    background: rgba(239, 68, 68, .04);
    border: 1.5px solid rgba(239, 68, 68, .22);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.refr-confirm:hover { background: rgba(239, 68, 68, .07); }
.refr-confirm:has(input:checked) {
    border-color: var(--error);
    background: rgba(239, 68, 68, .08);
}
.refr-confirm input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    cursor: pointer;
    flex-shrink: 0; margin-top: 2px;
    display: grid; place-items: center;
    transition: background var(--transition), border-color var(--transition);
}
.refr-confirm input[type="checkbox"]:checked {
    background: var(--error); border-color: var(--error);
}
.refr-confirm input[type="checkbox"]:checked::after {
    content: ""; width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.refr-confirm input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.refr-confirm__text {
    font-size: .9rem; line-height: 1.5;
    color: var(--text-secondary);
}
.refr-confirm__text strong { color: var(--text-primary); }

/* ── Aside info cards ──────────────────────────────────────────────── */

.refr-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}
.refr-info__title {
    margin: 0 0 12px;
    font-size: .78rem; font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.refr-info__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 9px;
}
.refr-info__list li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: .85rem; color: var(--text-secondary);
    line-height: 1.4;
}
.refr-info__list li::before {
    content: ""; width: 16px; height: 16px;
    background: var(--primary-bg);
    border-radius: 50%;
    flex-shrink: 0; margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23199c82' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px; background-position: center; background-repeat: no-repeat;
}

.refr-callout {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, .22);
    background: linear-gradient(180deg, rgba(239, 68, 68, .06), rgba(239, 68, 68, .02));
    display: flex; gap: 12px; align-items: flex-start;
}
.refr-callout__icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(239, 68, 68, .12); color: var(--error);
    display: grid; place-items: center; flex-shrink: 0;
}
.refr-callout__icon svg { width: 18px; height: 18px; }
.refr-callout__title {
    margin: 0; font-weight: 700; font-size: .9rem;
    color: var(--error);
    line-height: 1.3;
}
.refr-callout__body {
    margin: 5px 0 0; font-size: .82rem;
    color: var(--text-secondary); line-height: 1.5;
}
.refr-callout__body strong { color: var(--text-primary); }

/* ── Action bar — sticky en mobile, inline en desktop ──────────────── */

.refr-actionbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 0 0;
    margin-top: 22px;
}
.refr-actionbar__hint {
    font-size: .8rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.refr-actionbar__hint--ready { color: var(--success); }
.refr-actionbar__hint svg { width: 14px; height: 14px; }
.refr-actionbar__btns { display: flex; gap: 10px; flex-shrink: 0; }
.refr-actionbar .btn { min-height: 46px; padding: 12px 20px; font-weight: 600; }

/* Boton destructivo (compartido por el flujo de referencia) */
.btn-danger {
    background: var(--error, #ef4444); color: #fff;
    border: 1px solid var(--error, #ef4444);
    box-shadow: 0 1px 4px rgba(239, 68, 68, .28);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   Centro de notificaciones del topbar (.nc-bell + .nc-dropdown)
   --------------------------------------------------------------------
   Componente unificado usado tanto por la bell de doctora como por la
   bell de admin/operador. La bell admin tambien lleva clases pfm-* por
   compatibilidad con estilos legacy de platform-admin.css; el namespace
   .nc-* es la fuente de verdad.

   Reglas:
   - Sin CSS inline.
   - Responsive: desktop / tablet / movil.
   - Sin redirect: el bell SOLO abre/cierra el dropdown. Los items
     internos son los que navegan.
   ════════════════════════════════════════════════════════════════════ */

.nc-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nc-bell__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nc-bell__trigger:hover,
.nc-bell__trigger:focus-visible {
    background: var(--bg-card-hover, #f1f5f9);
    color: var(--primary, #199c82);
    border-color: var(--border, #e2e8f0);
    outline: none;
}

.nc-bell.is-open .nc-bell__trigger {
    background: var(--bg-card-hover, #f1f5f9);
    color: var(--primary, #199c82);
    border-color: var(--border, #e2e8f0);
}

.nc-bell__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-body, #fff);
    pointer-events: none;
    transition: transform .15s ease;
}

.nc-bell__badge--zero { display: none; }
.nc-bell__badge--warn { background: #d97706; }
.nc-bell.is-loading .nc-bell__badge { opacity: .55; }
.nc-bell.has-update .nc-bell__badge { animation: nc-pulse .9s ease-out 1; }

@keyframes nc-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ─── Dropdown ───────────────────────────────────────────────── */
.nc-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 480px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    /* Animacion abierta/cerrada — OPTIMIZADA.
     *
     * Antes: `display: none` ↔ `display: flex`. Cambiar `display` no es
     * animable, asi que la transicion al CERRAR no corria (el dropdown
     * desaparecia abruptamente) y al ABRIR dependia del frame-timing del
     * browser (a veces sin transicion).
     *
     * Ahora: la presencia se controla con `visibility` + `pointer-events`,
     * que SI son transicionables (con delay sincronizado al fade). Asi
     * `opacity` y `transform` corren de forma fluida en ambos sentidos,
     * acelerado por GPU. Cero reflow, cero repaint fuera de la zona del
     * dropdown — la animacion es pura compositor.
     *
     * `display: flex` queda permanente (el dropdown ocupa 0 espacio en el
     * flujo porque es `position: absolute|fixed`, asi que no hay costo). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1100;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition:
        opacity   .18s cubic-bezier(.16, 1, .3, 1),
        transform .22s cubic-bezier(.16, 1, .3, 1),
        visibility 0s linear .22s; /* oculta DESPUES del fade-out */
}

.nc-bell.is-open .nc-dropdown {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    /* GPU hint solo mientras esta abierto — al cerrar, el navegador
     * libera el layer automaticamente (no permanecemos en `will-change`
     * cuando ya no hay animacion activa, mejor uso de memoria). */
    will-change: transform, opacity;
    transition:
        opacity   .16s cubic-bezier(.16, 1, .3, 1),
        transform .20s cubic-bezier(.16, 1, .3, 1),
        visibility 0s linear 0s; /* muestra de inmediato al abrir */
}

/* Accesibilidad: respeta la preferencia del SO de "menos movimiento".
 * Usuarios con vestibulos sensibles, motion sickness o lectores de
 * pantalla con flash-aversion ven solo un fade muy corto, sin slide ni
 * scale. La barrera de aceptacion del menu sigue funcional. */
@media (prefers-reduced-motion: reduce) {
    .nc-dropdown {
        transform: none;
        transition: opacity .1s linear, visibility 0s linear .1s;
    }
    .nc-bell.is-open .nc-dropdown {
        transform: none;
        transition: opacity .1s linear, visibility 0s linear 0s;
    }
}

.nc-dropdown__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem 1rem .7rem;
    border-bottom: 1px solid var(--border, #f1f5f9);
}

.nc-dropdown__head-text { min-width: 0; flex: 1 1 auto; }

.nc-dropdown__title {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-primary, #0f172a);
}

.nc-dropdown__sub {
    margin: .15rem 0 0;
    font-size: .74rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.3;
}

.nc-dropdown__head-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.nc-dropdown__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-body, #f8fafc);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.nc-dropdown__action:hover {
    background: var(--primary-bg, #e6f7f3);
    color: var(--primary-dark, #116d5b);
    border-color: var(--primary, #199c82);
}

.nc-dropdown__action--danger:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.nc-dropdown__action:active { transform: scale(.94); }
.nc-dropdown__action[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Body (lista + skeleton + vacio) ───────────────────────── */
.nc-dropdown__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 110px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nc-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nc-dropdown__list--skeleton {
    padding: .25rem 0;
}

.nc-item {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: .75rem;
    align-items: flex-start;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border, #f1f5f9);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}

.nc-item:first-child { border-top: none; }
.nc-item:hover { background: var(--bg-card-hover, #f8fafc); }

.nc-item__dot {
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.nc-item--critical .nc-item__dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.nc-item--warning  .nc-item__dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .15); }
.nc-item--info     .nc-item__dot { background: var(--primary, #199c82); box-shadow: 0 0 0 3px rgba(25, 156, 130, .15); }

.nc-item__body { min-width: 0; }

.nc-item__title {
    margin: 0;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    line-height: 1.3;
}

.nc-item__detail {
    margin: .15rem 0 0;
    font-size: .78rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
    word-break: break-word;
}

.nc-item__meta {
    margin: .35rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    color: var(--text-muted, #94a3b8);
}

.nc-item__cta {
    align-self: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary-dark, #116d5b);
    background: var(--primary-bg, #e6f7f3);
    padding: .25rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nc-item--read {
    opacity: .68;
}

.nc-item--read .nc-item__title { font-weight: 500; }

/* Skeleton inicial — shimmer suave coherente con el sistema */
.nc-item--skeleton {
    grid-template-columns: 10px 1fr;
    pointer-events: none;
    border-top: 1px solid var(--border, #f1f5f9);
}

.nc-item--skeleton:first-child { border-top: none; }

.nc-item__sk-dot,
.nc-item__sk-line {
    background: linear-gradient(90deg,
        var(--bg-body, #f1f5f9) 0%,
        rgba(255, 255, 255, .7) 50%,
        var(--bg-body, #f1f5f9) 100%);
    background-size: 200% 100%;
    animation: nc-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.nc-item__sk-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.nc-item__sk-line { height: 10px; margin-top: 5px; }

@keyframes nc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Estado vacio */
.nc-dropdown__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.8rem 1rem 1.7rem;
    text-align: center;
}

.nc-dropdown__empty svg {
    color: var(--primary, #199c82);
    opacity: .55;
    margin-bottom: .15rem;
}

.nc-dropdown__empty p {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.nc-dropdown__empty span {
    font-size: .76rem;
    color: var(--text-secondary, #64748b);
}

/* Footer */
.nc-dropdown__foot {
    padding: .65rem 1rem;
    border-top: 1px solid var(--border, #f1f5f9);
    background: var(--bg-body, #f8fafc);
    font-size: .76rem;
    color: var(--text-secondary, #64748b);
    text-align: center;
}

.nc-dropdown__foot-link {
    color: var(--primary-dark, #116d5b);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.nc-dropdown__foot-link:hover { color: var(--primary, #199c82); }

.nc-dropdown__foot-hint { font-size: .73rem; }

/* ─── Backdrop opcional en movil ─────────────────────────────── */
.nc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 1099;
}

.nc-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Fix mobile tap-through: topbar stacking context trap ───────
 * El topbar usa `backdrop-filter: blur(12px)` que crea un stacking
 * context propio. Sin este override, el `.nc-dropdown` (z-index 1100)
 * queda ATRAPADO en el contexto del topbar (z-index 50) mientras que
 * el `.nc-backdrop` (z-index 1099 en root) compite a nivel raiz y
 * gana visualmente. Eso convertia el backdrop en un atrapa-taps que
 * cerraba el dropdown en cada toque.
 *
 * Scope: solo movil. En desktop el dropdown es `position: absolute`
 * y no necesita el bump (ademas, subir el topbar a 1200 en desktop
 * podria meterlo arriba de modales/sidebars).
 *
 * Cuando el bell se abre (JS añade `nc-open` al topbar), subimos el
 * z-index del topbar por encima del backdrop. El topbar y su dropdown
 * quedan visibles, el backdrop dim el fondo (no la barra) y los taps
 * llegan a los items correctamente. */
@media (max-width: 640px) {
    .topbar.nc-open {
        z-index: 1200;
    }
}

/* ─── Responsive ─────────────────────────────────────────────── */

/* Tablets pequenas */
@media (max-width: 768px) {
    .nc-dropdown {
        width: 340px;
        max-height: 70vh;
    }
}

/* Movil: drawer fullwidth desde la parte alta */
@media (max-width: 640px) {
    .nc-dropdown {
        position: fixed;
        top: 64px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 84px);
        border-radius: 14px;
        transform-origin: top center;
    }

    .nc-dropdown__body { max-height: calc(100vh - 220px); }
    .nc-bell__trigger { width: 40px; height: 40px; }
    .nc-item__cta { display: none; }
    .nc-item {
        grid-template-columns: 10px 1fr;
        padding: .85rem .95rem;
    }
}

/* Pantallas muy estrechas: aprovechar todo el ancho */
@media (max-width: 360px) {
    .nc-dropdown {
        top: 60px;
        right: 6px;
        left: 6px;
        border-radius: 12px;
    }
    .nc-dropdown__head { padding: .8rem .85rem .65rem; }
    .nc-item { padding: .75rem .85rem; }
    .nc-item__title { font-size: .82rem; }
    .nc-item__detail { font-size: .75rem; }
}

/* Theme dark (cuando aplica via :root[data-theme]) */
:root[data-theme="dark"] .nc-dropdown {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"] .nc-dropdown__head,
:root[data-theme="dark"] .nc-dropdown__foot,
:root[data-theme="dark"] .nc-item { border-color: #334155; }

:root[data-theme="dark"] .nc-dropdown__title,
:root[data-theme="dark"] .nc-item__title,
:root[data-theme="dark"] .nc-dropdown__empty p { color: #e2e8f0; }

:root[data-theme="dark"] .nc-dropdown__sub,
:root[data-theme="dark"] .nc-item__detail,
:root[data-theme="dark"] .nc-dropdown__foot,
:root[data-theme="dark"] .nc-dropdown__empty span { color: #94a3b8; }

:root[data-theme="dark"] .nc-item:hover { background: #283548; }
:root[data-theme="dark"] .nc-dropdown__foot { background: #283548; }

:root[data-theme="dark"] .nc-dropdown__action {
    background: #283548;
    border-color: #3f4f6b;
    color: #cbd5e1;
}

:root[data-theme="dark"] .nc-dropdown__action:hover {
    background: #324155;
    color: #fff;
}

/* Reduced motion: deshabilitar animaciones */
@media (prefers-reduced-motion: reduce) {
    .nc-dropdown,
    .nc-bell__badge,
    .nc-item__sk-dot,
    .nc-item__sk-line { transition: none; animation: none; }
}

/* Link "Ver recordatorios" del toast de bienvenida del dashboard. */
.dashboard-toast__link {
    color: var(--primary, #199c82);
    font-weight: 600;
    font-size: 13px;
    text-decoration: underline;
}
.dashboard-toast__link:hover { color: var(--primary-dark, #116d5b); }

/* Contenido del modal SweetAlert de "Limpiar notificaciones" */
.nc-swal-body {
    text-align: left;
    font-size: .92rem;
    line-height: 1.45;
}

.nc-swal-body__lead {
    margin: 0 0 .5rem;
}

.nc-swal-body__note {
    margin: 0;
    color: #475569;
    font-size: .85rem;
}

:root[data-theme="dark"] .nc-swal-body__note { color: #cbd5e1; }

.btn-danger:hover {
    background: var(--error-dark, #dc2626);
    border-color: var(--error-dark, #dc2626);
    box-shadow: 0 4px 14px rgba(239, 68, 68, .38);
    transform: translateY(-1px);
}
.btn-danger[disabled],
.btn-danger:disabled {
    opacity: .5; cursor: not-allowed;
    transform: none; box-shadow: none;
}

/* Icon-spin: utility para SVGs cargando dentro de botones (reusa @keyframes spin) */
.icon-spin { animation: spin 1s linear infinite; }

/* ── Visit cancelled (badge usado en otros modulos al heredar refer) ── */

.visit-cancelled-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: var(--error, #ef4444);
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    line-height: 1.2; cursor: help;
}
.visit-cancelled-badge svg { flex-shrink: 0; }
.visit-meta--cancelled .visit-date { text-decoration: line-through; color: var(--text-muted); }
.visit-meta--cancelled .visit-amount { opacity: .55; }
.visit-meta--cancelled + .visit-details { opacity: .72; }

/* ════════════════════════════════════════════════════════════════════
 *  OTP VERIFY PAGE  (.rotp-*)
 * ════════════════════════════════════════════════════════════════════ */

.rotp-page > .page-header,
.rotp-page > .page-header .page-header-left {
    text-align: center; justify-content: center;
}

.rotp-hero {
    text-align: center;
    padding: 24px 16px 6px;
    margin-bottom: 18px;
}
.rotp-hero__lock {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 20px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(25, 156, 130, .55);
}
.rotp-hero__lock svg { width: 30px; height: 30px; }
.rotp-hero__title {
    margin: 0;
    font-size: clamp(1.45rem, 4vw, 1.75rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.rotp-hero__subtitle {
    margin: 8px auto 0;
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 420px;
}

.rotp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px 26px 20px;
    box-shadow: 0 8px 32px -16px rgba(15, 23, 42, .12);
}

.rotp-mail {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--primary-bg);
    border: 1px solid rgba(25, 156, 130, .22);
    margin-bottom: 16px;
}
.rotp-mail__icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(25, 156, 130, .15);
    color: var(--primary);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.rotp-mail__icon svg { width: 18px; height: 18px; }
.rotp-mail__body { min-width: 0; flex: 1; }
.rotp-mail__label {
    margin: 0; font-size: .72rem; font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .06em;
}
.rotp-mail__value {
    margin: 2px 0 0; font-weight: 700;
    color: var(--text-primary); font-size: .92rem;
    word-break: break-word;
}

.rotp-summary {
    display: flex; flex-direction: column;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
}
.rotp-summary__row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    padding: 11px 14px;
    font-size: .85rem;
}
.rotp-summary__row + .rotp-summary__row {
    border-top: 1px solid var(--border-light, var(--border));
}
.rotp-summary__label {
    color: var(--text-secondary); font-weight: 600;
    text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
    flex-shrink: 0;
}
.rotp-summary__value {
    color: var(--text-primary); font-weight: 600;
    text-align: right; word-break: break-word; min-width: 0;
}

.rotp-form-alert { margin-bottom: 16px; }

.rotp-label {
    display: block; text-align: center;
    font-size: .82rem; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .05em;
    margin: 6px 0 12px;
}

.rotp-inputs {
    display: flex; justify-content: center; gap: 10px;
    margin: 0 0 8px;
}
.rotp-input {
    width: 50px; height: 60px;
    text-align: center;
    font-size: 1.55rem; font-weight: 700;
    font-family: 'Courier New', monospace;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
    -moz-appearance: textfield;
    padding: 0;
    caret-color: var(--primary);
}
.rotp-input::-webkit-outer-spin-button,
.rotp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rotp-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, .18);
    background: var(--bg-input);
    transform: translateY(-1px);
}
.rotp-input.is-filled {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary-dark);
}
.rotp-input.is-error {
    border-color: var(--error);
    background: rgba(239, 68, 68, .05);
    animation: rotp-shake .35s ease-in-out;
}
@keyframes rotp-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.rotp-progress {
    height: 4px; width: 100%;
    background: var(--bg-card-hover);
    border-radius: 999px;
    overflow: hidden;
    margin: 18px 0 8px;
}
.rotp-progress__bar {
    height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 999px;
    transition: width 1s linear, background var(--transition);
    transform-origin: left center;
}
.rotp-progress__bar--low {
    background: linear-gradient(90deg, var(--warning), #d97706);
}
.rotp-progress__bar--expired {
    background: var(--error);
}

.rotp-meta {
    text-align: center;
    color: var(--text-secondary);
    font-size: .82rem;
    margin: 0 0 18px;
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
}
.rotp-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.rotp-meta__item svg { width: 14px; height: 14px; opacity: .6; }
.rotp-meta strong { color: var(--text-primary); }
.rotp-meta__timer {
    font-family: 'Courier New', monospace; font-weight: 700;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}
.rotp-meta__timer--low      { color: var(--warning); }
.rotp-meta__timer--expired  { color: var(--error); }

.rotp-actions {
    display: flex; flex-direction: column; gap: 10px;
}
.rotp-actions .btn { min-height: 48px; font-weight: 600; padding: 12px 20px; }

.rotp-resend {
    text-align: center; margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light, var(--border));
    font-size: .85rem; color: var(--text-secondary);
}
.rotp-resend form { display: inline; }
.rotp-resend__btn {
    background: none; border: none; padding: 6px 8px;
    color: var(--primary); font-weight: 700; font-size: .85rem;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
}
.rotp-resend__btn:hover {
    color: var(--primary-dark);
    background: var(--primary-bg);
}
.rotp-resend__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.rotp-resend__btn[disabled] {
    color: var(--text-muted); text-decoration: none;
    cursor: not-allowed; background: transparent;
}

/* ════════════════════════════════════════════════════════════════════
 *  RESPONSIVE — 4 breakpoints (1024 / 820 / 640 / 380)
 * ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .refr-layout { grid-template-columns: 1fr; }
    .refr-aside { position: static; order: -1; }
    .refr-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (max-width: 820px) {
    .refr-hero {
        grid-template-columns: auto 1fr;
        padding: 22px 20px;
        gap: 16px;
    }
    .refr-hero__patient {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    .refr-hero__patient-name { max-width: 100%; }
    .refr-doctors { grid-template-columns: 1fr; max-height: 420px; }
}

@media (max-width: 640px) {
    .refr-page,
    .rotp-page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

    .refr-hero { padding: 18px; border-radius: 16px; gap: 14px; }
    .refr-hero__icon { width: 48px; height: 48px; border-radius: 14px; }
    .refr-hero__icon svg { width: 24px; height: 24px; }
    .refr-hero__patient { padding: 10px 12px; }
    .refr-hero__avatar { width: 38px; height: 38px; border-radius: 10px; font-size: .9rem; }
    .refr-hero__patient-meta { gap: 6px 12px; }

    .refr-stepper { padding: 12px 14px; gap: 0; }
    .refr-step { font-size: .78rem; }
    .refr-step span:not(.refr-step__num) { display: none; }
    .refr-step--current span:not(.refr-step__num) { display: inline; }
    .refr-step__sep { margin: 0 8px; }

    .refr-aside { grid-template-columns: 1fr; }
    .refr-section__head { padding: 16px 18px; }
    .refr-section__body { padding: 16px 18px; }
    .refr-section__title { font-size: .95rem; }

    .refr-doctors { max-height: 380px; padding: 0; }
    .refr-doc { padding: 12px; }
    .refr-doc__avatar { width: 38px; height: 38px; font-size: .85rem; }
    .refr-doc__name { font-size: .88rem; }

    .refr-confirm { padding: 14px; gap: 12px; }
    .refr-confirm__text { font-size: .85rem; }

    /* Sticky action bar tactil en mobile */
    .refr-actionbar {
        position: fixed;
        left: 0; right: 0;
        bottom: 0;
        margin: 0;
        padding: 12px max(14px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px -10px rgba(15, 23, 42, .12);
        z-index: 50;
        flex-direction: column;
        align-items: stretch;
    }
    .refr-actionbar__hint { order: -1; justify-content: center; padding: 2px 0; }
    .refr-actionbar__btns { display: grid; grid-template-columns: auto 1fr; gap: 10px; width: 100%; }
    .refr-actionbar .btn { min-height: 48px; }

    .rotp-hero { padding: 16px 12px 4px; margin-bottom: 14px; }
    .rotp-hero__lock { width: 56px; height: 56px; border-radius: 18px; }
    .rotp-hero__lock svg { width: 26px; height: 26px; }
    .rotp-card { padding: 22px 18px 18px; border-radius: 16px; }
    .rotp-input { width: 44px; height: 56px; font-size: 1.4rem; border-radius: 10px; }
    .rotp-inputs { gap: 8px; }
    .rotp-summary__row { padding: 10px 12px; font-size: .82rem; }
}

@media (max-width: 380px) {
    .refr-hero { padding: 14px 14px 14px 18px; }
    .refr-hero__icon { width: 44px; height: 44px; }
    .refr-hero__title { font-size: 1.2rem; }
    .refr-hero__subtitle { font-size: .85rem; }

    .rotp-card { padding: 18px 14px 14px; }
    .rotp-input { width: 38px; height: 50px; font-size: 1.25rem; gap: 6px; }
    .rotp-inputs { gap: 6px; }
    .rotp-meta { font-size: .78rem; gap: 8px; }
}

/* ── Accesibilidad: respeta prefers-reduced-motion ─────────────────────
   Excepcion documentada al "evitar !important": el reset de animacion por
   accesibilidad es el patron canonico y va scopeado SOLO a estas dos
   paginas, sin impacto global. Neutraliza el pulse del kicker, el shake
   del OTP, hovers con transform y transiciones. */
@media (prefers-reduced-motion: reduce) {
    .refr-page *,
    .rotp-page * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Users module — extensions for username preview, resend temp password
   and force-change-password flow
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Info card (helper card explicando flujo en create) ─────────────────── */
.usr-info-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid #99f6e4;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.usr-info-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #99f6e4;
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.usr-info-card__icon svg { width: 20px; height: 20px; }
.usr-info-card__title {
    margin: 0 0 8px;
    font-size: .95rem;
    font-weight: 700;
    color: #0f172a;
}
.usr-info-card__list {
    margin: 0;
    padding-left: 18px;
    font-size: .85rem;
    color: #334155;
    line-height: 1.7;
}
.usr-info-card__list li + li { margin-top: 2px; }

/* ── Username preview chip (live mientras escribes display_name) ────────── */
.usr-username-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: .92rem;
    transition: all .2s ease;
}
.usr-username-preview svg { width: 18px; height: 18px; flex-shrink: 0; color: #94a3b8; }
.usr-username-preview span {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: .02em;
    /* R2: usernames largos no deben desbordar el chip. */
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.usr-username-preview small {
    margin-left: auto;
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.usr-username-preview--ready {
    border-color: #5eead4;
    background: #f0fdfa;
    color: #0f766e;
}
.usr-username-preview--ready svg { color: #0d9488; }
.usr-username-preview--ready small { color: #0d9488; }

/* F7: estados honestos del preview AJAX ─────────────────────────────────── */
.usr-username-preview--checking {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.usr-username-preview--checking .usr-username-preview__icon,
.usr-username-preview--checking svg.usr-username-preview__icon {
    animation: usr-spin 0.9s linear infinite;
    color: #64748b;
}
.usr-username-preview--checking small { color: #64748b; }

.usr-username-preview--collision {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}
.usr-username-preview--collision svg { color: #d97706; }
.usr-username-preview--collision small { color: #b45309; text-transform: none; letter-spacing: 0; }
.usr-username-preview--collision span { color: #78350f; }

/* UX2: error inline en inputs ──────────────────────────────────────────── */
.usr-input--error,
.usr-input--error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.usr-input--error::placeholder { color: #fca5a5; }

.usr-error-text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    color: #b91c1c;
    line-height: 1.4;
    margin-top: 2px;
    font-weight: 500;
}
/* `display: flex` arriba pisa al `display: none` del atributo `hidden`.
   Restauramos el ocultamiento real cuando el span no tiene mensaje. */
.usr-error-text[hidden] { display: none !important; }
.usr-error-text::before {
    content: '!';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    margin-top: 1px;
}
/* Si hay error visible, la hint se oculta para no competir visualmente. */
.usr-form-group:has(.usr-error-text:not([hidden])) .usr-hint { display: none; }

/* V6: estado loading del submit ─────────────────────────────────────────── */
.ep-btn--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
    cursor: progress;
}
.ep-btn--loading svg { display: none; }
.ep-btn--loading::before {
    content: '';
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: usr-spin 0.7s linear infinite;
    display: inline-block;
    vertical-align: -2px;
}

/* R1: en móvil, libera el sticky bar cuando un input tiene foco ────────── */
@media (max-width: 600px) {
    .usr-page--input-focused > form > .usr-actions {
        position: static;
        background: transparent;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
}

/* ── Resend temp password card (en edit) ────────────────────────────────── */
.usr-resend-card {
    border-left: 4px solid #199c82;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
}
.usr-form-card__icon--accent {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #ffffff;
}
.usr-resend-body {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 0 20px 20px;
    flex-wrap: wrap;
}
.usr-resend-meta {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}
.usr-resend-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: .85rem;
}
.usr-resend-meta__label {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
}
.usr-resend-meta__value {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}
.usr-resend-meta__value a {
    color: #0f766e;
    text-decoration: none;
}
.usr-resend-meta__value a:hover { text-decoration: underline; }

.usr-resend-btn {
    align-self: center;
    min-width: 220px;
    justify-content: center;
    white-space: nowrap;
}
.usr-resend-btn svg { width: 16px; height: 16px; margin-right: 6px; }
.usr-resend-btn[disabled],
.usr-resend-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.usr-resend-btn--loading svg {
    animation: usr-spin 1s linear infinite;
}
@keyframes usr-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.usr-resend-note {
    margin: 0 20px 18px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #78350f;
    font-size: .82rem;
    line-height: 1.6;
}

.usr-resend-feedback {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 20px 20px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
}
.usr-resend-feedback svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.usr-resend-feedback--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}
.usr-resend-feedback--error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.usr-resend-feedback__cta {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.usr-resend-feedback__cta:hover {
    background: #b91c1c;
    color: #ffffff;
}

/* ── Status stack en tabla (Activo + Pendiente cambio pwd) ──────────────── */
.usr-status-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.usr-status--temp {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.usr-status--temp svg { width: 12px; height: 12px; }

/* Badge "Pendiente cambio" en preview avatar (edit page) */
.usr-preview-badge--temp {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    margin-left: 8px;
}
.usr-preview-badge--temp .usr-preview-badge__dot { background: #f59e0b; }

/* ── Alert variants extra ───────────────────────────────────────────────── */
.usr-alert--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.pat-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}
.pat-alert--warning svg { color: #d97706; }

/* ── Force-change-password page ─────────────────────────────────────────── */
.acc-pwd-page { max-width: 640px; margin: 0 auto; }
.acc-pwd-icon {
    background: linear-gradient(135deg, #199c82, #14b8a6);
    color: #ffffff;
}
.acc-pwd-card { border-top: 4px solid #199c82; }
.acc-pwd-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.acc-pwd-logout-form { display: inline-flex; margin: 0; }

/* ── Responsive (tablet & móvil) ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .usr-resend-body { flex-direction: column; padding: 0 16px 16px; }
    .usr-resend-meta { flex: 1 1 100%; }
    .usr-resend-btn { width: 100%; min-width: 0; }
    .usr-resend-note { margin: 0 16px 14px; }
    .usr-resend-feedback { margin: 0 16px 16px; }
    .usr-info-card { padding: 14px 16px; gap: 12px; }
    .usr-info-card__icon { width: 36px; height: 36px; }
    .usr-username-preview { flex-wrap: wrap; }
    .usr-username-preview small { margin-left: 0; width: 100%; margin-top: 4px; }
    .acc-pwd-actions { flex-direction: column-reverse; }
    .acc-pwd-actions .ep-btn { width: 100%; justify-content: center; }
    .acc-pwd-logout-form { width: 100%; }
    .acc-pwd-logout-form .ep-btn { width: 100%; }
}

@media (max-width: 480px) {
    .usr-info-card__list { font-size: .8rem; }
    .usr-resend-meta__row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .usr-resend-meta__value { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Users module — Credentials reveal (one-shot fallback cuando SMTP falla)
   resources/views/admin/users/credentials-reveal.blade.php
   ═══════════════════════════════════════════════════════════════════════════ */

.usr-page-header--warn {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}
.usr-page-header--warn::before { background: rgba(255,255,255,0.08); }

.usr-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}
.usr-alert--warning svg { color: #d97706; }
.usr-reveal-alert { align-items: flex-start; }
.usr-reveal-alert__text { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.55; color: #7c2d12; }
.usr-reveal-alert__text a { color: #b45309; text-decoration: underline; font-weight: 600; }
.usr-reveal-alert__text a:hover { color: #92400e; }

.usr-reveal-card { border-top: 4px solid #d97706; }

.usr-reveal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.usr-reveal-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.usr-reveal-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.usr-reveal-row__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.usr-reveal-row__value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.usr-reveal-row__value--muted { color: var(--text-secondary); font-weight: 500; }

.usr-reveal-credential {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usr-reveal-credential__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.usr-reveal-credential__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.usr-reveal-credential__box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.usr-reveal-credential__box:hover { border-color: #cbd5e1; background: #f1f5f9; }

.usr-reveal-credential__value {
    flex: 1;
    min-width: 0;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.04em;
    word-break: break-all;
    user-select: all;
    background: transparent;
}

.usr-reveal-credential__value--masked {
    letter-spacing: 0.25em;
    color: #64748b;
}

.usr-reveal-copy,
.usr-reveal-eye {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.usr-reveal-copy svg,
.usr-reveal-eye svg { width: 15px; height: 15px; }

.usr-reveal-copy:hover,
.usr-reveal-eye:hover {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary);
}

.usr-reveal-copy:focus-visible,
.usr-reveal-eye:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.usr-reveal-copy--ok {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
}
.usr-reveal-copy--err {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

.usr-reveal-eye {
    padding: 6px 8px;
}

.usr-reveal-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    color: #115e59;
    font-size: 0.85rem;
    line-height: 1.5;
}
.usr-reveal-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: #0d9488; }

/* ── Responsive: tablet ────────────────────────────────────────── */
@media (max-width: 768px) {
    .usr-reveal-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 0;
    }
    .usr-reveal-row__value { text-align: left; }
    .usr-reveal-credential__box { padding: 12px 14px; gap: 8px; }
    .usr-reveal-credential__value { font-size: 0.92rem; }
}

/* ── Responsive: móvil ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .usr-reveal-credential__box {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .usr-reveal-copy {
        width: 100%;
        justify-content: center;
        padding: 10px 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Users module — Danger zone + delete confirmation modal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Danger card ─────────────────────────────────────────────────────────── */
.usr-danger-card {
    border-left: 4px solid #dc2626;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}
.usr-form-card__icon--danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
}
.usr-danger-title { color: #991b1b; }

.usr-danger-body {
    display: flex;
    gap: 20px;
    align-items: stretch;
    padding: 0 20px 20px;
    flex-wrap: wrap;
}
.usr-danger-info {
    flex: 1 1 320px;
    background: #ffffff;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 14px 16px;
}
.usr-danger-info__title {
    margin: 0 0 6px;
    font-size: .95rem;
    font-weight: 700;
    color: #991b1b;
}
.usr-danger-info__desc {
    margin: 0;
    font-size: .85rem;
    color: #475569;
    line-height: 1.6;
}

.usr-danger-reasons {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.usr-danger-reasons li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: .82rem;
    color: #78350f;
    line-height: 1.5;
}
.usr-danger-reasons svg {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #d97706;
}

/* Botón danger (zona peligro + modal) */
.usr-btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
    border: 1px solid #b91c1c;
    align-self: center;
    min-width: 220px;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(220, 38, 38, .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.usr-btn-danger:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(220, 38, 38, .35);
    transform: translateY(-1px);
}
.usr-btn-danger:active:not(:disabled) { transform: translateY(0); }
.usr-btn-danger:disabled,
.usr-btn-danger[disabled] {
    background: #fca5a5;
    border-color: #fca5a5;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .85;
}
.usr-btn-danger svg { width: 16px; height: 16px; margin-right: 6px; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.usr-modal[hidden] { display: none !important; }
.usr-modal {
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: usrModalFadeIn .18s ease-out;
}
@keyframes usrModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.usr-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.usr-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .35), 0 6px 18px rgba(15, 23, 42, .15);
    padding: 28px 28px 24px;
    animation: usrModalSlideIn .22s cubic-bezier(.2,.9,.3,1.2);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
@keyframes usrModalSlideIn {
    from { transform: translateY(14px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.usr-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.usr-modal__close:hover { background: #f1f5f9; color: #0f172a; }
.usr-modal__close svg { width: 16px; height: 16px; }

.usr-modal__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.usr-modal__icon svg { width: 28px; height: 28px; }

.usr-modal__title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.usr-modal__desc {
    margin: 0 0 18px;
    font-size: .9rem;
    color: #475569;
    line-height: 1.6;
}

.usr-modal__user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 18px;
}
.usr-modal__user-avatar {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}
.usr-modal__user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.usr-modal__user-meta strong {
    font-size: .92rem;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}
.usr-modal__user-meta span {
    font-size: .78rem;
    color: #64748b;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    word-break: break-all;
}

.usr-modal__label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    line-height: 1.5;
}
.usr-modal__label code {
    display: inline-block;
    background: #fef2f2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: .82rem;
    border: 1px solid #fecaca;
}
.usr-modal__input {
    width: 100%;
    margin-bottom: 18px;
    border-color: #fecaca;
}
.usr-modal__input:focus {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, .15);
}
.usr-modal__input--match {
    border-color: #10b981;
    background: #f0fdf4;
}
.usr-modal__input--match:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.usr-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Cuando el modal está abierto, congelar scroll del body */
body.usr-modal-open { overflow: hidden; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .usr-danger-body { flex-direction: column; padding: 0 16px 16px; }
    .usr-danger-info { flex: 1 1 100%; }
    .usr-btn-danger { width: 100%; min-width: 0; }
    .usr-modal__panel { padding: 24px 20px 20px; max-width: 100%; }
    .usr-modal__actions { flex-direction: column-reverse; }
    .usr-modal__actions .ep-btn { width: 100%; justify-content: center; }
    .usr-modal__user-meta strong { font-size: .88rem; }
}

@media (max-width: 480px) {
    .usr-modal__title { font-size: 1.08rem; }
    .usr-modal__desc { font-size: .85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  PATIENT CREATE V3 — PREMIUM REDESIGN
 *  Scope: .pc (admin/patients/create.blade.php)
 *
 *  Vista: resources/views/admin/patients/create.blade.php
 *
 *  Filosofía:
 *   • Capa visual nueva 100% scoped bajo `.pc` (no toca form-card / form-input
 *     globales — la vista de edit y el resto del sistema quedan intactos).
 *   • Custom dropdown (.pc-select) y datepicker (.pc-datepicker) con la
 *     misma identidad visual del sistema: primary, radius, sombras, family.
 *   • 4 breakpoints: 1024 / 820 / 640 / 380 — touch targets ≥ 44px en móvil.
 *   • Respeta prefers-reduced-motion.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ───── Scope root ───── */
.pc {
    max-width: 920px;
    margin: 0 auto;
    padding: 28px max(20px, env(safe-area-inset-left)) 32px max(20px, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--font-family);
}

/* ───── Hero ───── */
.pc-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(25, 156, 130, 0.12) 0%, transparent 55%),
        radial-gradient(70% 60% at 0% 100%, rgba(99, 102, 241, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
    padding: 22px 24px 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px -10px rgba(15, 23, 42, 0.10);
}

.pc-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: -6px 0 10px -10px;
    min-height: 36px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition), background var(--transition), transform 0.15s ease;
}
.pc-back:hover {
    color: var(--primary);
    background: rgba(25, 156, 130, 0.08);
}
.pc-back:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc-back:active { transform: scale(0.97); }

.pc-hero__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.pc-hero__copy { flex: 1; min-width: 0; }

.pc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pc-hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.18);
    animation: pcPulse 2.2s ease-in-out infinite;
}
@keyframes pcPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(25, 156, 130, 0.05); }
}

.pc-hero__title {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.022em;
    line-height: 1.15;
    margin: 0 0 8px;
}
.pc-hero__subtitle {
    font-size: clamp(0.875rem, 1.8vw, 0.95rem);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 56ch;
    margin: 0;
}

.pc-hero__meta {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--primary);
    box-shadow: 0 8px 24px -12px rgba(25, 156, 130, 0.45);
}

/* ───── Alerta de errores ───── */
.pc-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
}
.pc-alert--error {
    background: var(--error-bg);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--error);
}
.pc-alert__content { flex: 1; min-width: 0; font-size: 0.875rem; }
.pc-alert__list { margin: 6px 0 0 18px; color: var(--text-secondary); }

/* ───── Form layout ───── */
.pc-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ───── Cards ───── */
.pc-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 28px -20px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.pc-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(25, 156, 130, 0.7) 0%,
        rgba(99, 102, 241, 0.6) 100%);
    opacity: 0.85;
}
.pc-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 14px 36px -22px rgba(15, 23, 42, 0.18);
}

.pc-card__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
}

.pc-card__step {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}

.pc-card__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(25, 156, 130, 0.12);
}
.pc-card__icon--ident {
    background: rgba(99, 102, 241, 0.10);
    color: #6366f1;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}
.pc-card__icon--personal {
    background: rgba(34, 197, 94, 0.10);
    color: #16a34a;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}
.pc-card__icon--contact {
    background: rgba(14, 165, 233, 0.10);
    color: #0284c7;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18);
}

.pc-card__heading { flex: 1; min-width: 0; padding-right: 36px; }
.pc-card__title {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}
.pc-card__subtitle {
    font-size: 0.825rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

/* ───── Grid ───── */
.pc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    padding: 22px 24px 24px;
}
.pc-grid--single { grid-template-columns: 1fr; }

.pc-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.pc-field--full { grid-column: 1 / -1; }

/* ───── Labels & hints ───── */
.pc-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.pc-label--required::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    margin-left: 4px;
}

.pc-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: -2px;
}

/* ───── Inputs ───── */
.pc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pc-input-wrap--action .pc-input { padding-right: 48px; }

.pc-input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pc-input::placeholder {
    color: var(--text-muted);
    opacity: 0.9;
}
.pc-input:hover {
    border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted) 40%);
}
.pc-input:focus,
.pc-input:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.12);
    background: var(--bg-card);
}
.pc-input.is-error {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}
.pc-input.is-verified {
    border-color: var(--success);
    background: var(--success-bg);
}

/* Icono lead (decorativo) flotando dentro del wrap */
.pc-input-wrap > .pc-input-lead {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.18s ease;
    z-index: 1;
}
.pc-input-wrap:focus-within > .pc-input-lead { color: var(--primary); }
.pc-input-wrap.is-error > .pc-input-lead { color: var(--error); }

/* Input modificador: padding-left para dejar espacio al icono lead */
.pc-input.pc-input--lead { padding-left: 42px; }

/* Errores */
.pc-error {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--error);
    font-weight: 500;
}

/* Skeleton shimmer reutilizado para name autocompletado */
.pc-input-wrap .form-input-skeleton {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.pc-input-wrap.is-loading .form-input-skeleton {
    opacity: 1;
    will-change: background-position;
    animation: shimmer 1.4s linear infinite;
}

/* ───── Custom Select (pc-select) ───── */
.pc-select { position: relative; }

.pc-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.pc-select__trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pc-select__trigger:hover {
    border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted) 40%);
}
.pc-select__trigger:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.12);
    background: var(--bg-card);
}
.pc-select.is-open .pc-select__trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.12);
    background: var(--bg-card);
}
.pc-select.is-error .pc-select__trigger {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}

.pc-select__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.18s ease;
}
.pc-select__trigger:focus-visible .pc-select__icon,
.pc-select.is-open .pc-select__icon {
    color: var(--primary);
}

.pc-select__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.pc-select__label.is-placeholder { color: var(--text-muted); }

.pc-select__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.18s ease;
}
.pc-select.is-open .pc-select__chev {
    transform: rotate(180deg);
    color: var(--primary);
}

.pc-select__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 14px 36px -12px rgba(15, 23, 42, 0.18);
    max-height: 280px;
    overflow-y: auto;
    animation: pcDropdownIn 0.16s ease-out;
}

@keyframes pcDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-select__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.pc-select__opt.is-active {
    background: var(--primary-bg);
    color: var(--primary);
}
.pc-select__opt.is-selected {
    color: var(--primary);
    font-weight: 600;
}
.pc-select__opt-check {
    opacity: 0;
    transition: opacity 0.12s ease;
    color: var(--primary);
}
.pc-select__opt.is-selected .pc-select__opt-check { opacity: 1; }

/* ───── Custom Datepicker (pc-datepicker) ───── */
.pc-datepicker { position: relative; }

.pc-datepicker__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.pc-datepicker__trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pc-datepicker__trigger:hover {
    border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted) 40%);
}
.pc-datepicker__trigger:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.12);
    background: var(--bg-card);
}
.pc-datepicker.is-open .pc-datepicker__trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(25, 156, 130, 0.12);
    background: var(--bg-card);
}
.pc-datepicker.is-error .pc-datepicker__trigger {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}

.pc-datepicker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.18s ease;
}
.pc-datepicker__trigger:focus-visible .pc-datepicker__icon,
.pc-datepicker.is-open .pc-datepicker__icon { color: var(--primary); }

.pc-datepicker__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.pc-datepicker__value.is-placeholder { color: var(--text-muted); }

.pc-datepicker__chev {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.18s ease;
}
.pc-datepicker.is-open .pc-datepicker__chev {
    transform: rotate(180deg);
    color: var(--primary);
}

.pc-datepicker__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 16px 40px -12px rgba(15, 23, 42, 0.22);
    animation: pcDropdownIn 0.16s ease-out;
}

.pc-datepicker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.pc-datepicker__navbtn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.pc-datepicker__navbtn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-bg);
}
.pc-datepicker__navbtn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc-datepicker__navbtn:active { transform: scale(0.94); }

.pc-datepicker__pickers {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
}
.pc-datepicker__msel,
.pc-datepicker__ysel {
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
        no-repeat right 8px center / 12px var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pc-datepicker__msel { min-width: 110px; }
.pc-datepicker__ysel { min-width: 80px; }
.pc-datepicker__msel:focus-visible,
.pc-datepicker__ysel:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.12);
}

.pc-datepicker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 4px;
}
.pc-datepicker__weekdays span {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 0;
    text-transform: uppercase;
}

.pc-datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pc-datepicker__day {
    aspect-ratio: 1 / 1;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
    font-variant-numeric: tabular-nums;
}
.pc-datepicker__day:hover:not(.is-disabled) {
    background: var(--primary-bg);
    color: var(--primary);
}
.pc-datepicker__day.is-outside { color: var(--text-muted); opacity: 0.4; }
.pc-datepicker__day.is-today {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}
.pc-datepicker__day.is-selected {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(25, 156, 130, 0.45);
}
.pc-datepicker__day.is-disabled {
    color: var(--text-muted);
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}
.pc-datepicker__day:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc-datepicker__day:active:not(.is-disabled) { transform: scale(0.92); }

.pc-datepicker__foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}
.pc-datepicker__chip {
    flex: 1;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--primary-bg);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.pc-datepicker__chip:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.pc-datepicker__chip--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.pc-datepicker__chip--ghost:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.pc-datepicker__chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc-datepicker__chip:active { transform: scale(0.97); }

/* ───── Lookup refresh button (override scoped) ───── */
.pc .lookup-refresh {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition), transform 0.15s ease;
}
.pc .lookup-refresh:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-bg);
}
.pc .lookup-refresh:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc .lookup-refresh:active { transform: translateY(-50%) scale(0.94); }
.pc .lookup-refresh.is-hidden { display: none; }

.pc .lookup-spinner {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    display: none;
    pointer-events: none;
}
.pc .lookup-spinner.is-active {
    display: flex;
    animation: spin 1s linear infinite;
}

/* Re-color del banner para que herede tokens del scope */
.pc .lookup-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.45;
    margin-top: 6px;
    border: 1px solid transparent;
}
.pc .lookup-banner svg { flex-shrink: 0; margin-top: 2px; }
.pc .lookup-banner__title { font-weight: 600; margin: 0 0 3px; line-height: 1.35; }
.pc .lookup-banner__body  { margin: 0; color: var(--text-secondary); word-break: break-word; }
.pc .lookup-banner__content { flex: 1; min-width: 0; }
.pc .lookup-banner a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 4px;
    border-radius: var(--radius-sm, 6px);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    transition: background var(--transition);
}
.pc .lookup-banner a:hover, .pc .lookup-banner a:focus-visible {
    background: rgba(0, 0, 0, 0.10);
    text-decoration: underline;
}
.pc .lookup-banner--success { background: var(--success-bg); color: var(--success); border-color: rgba(34, 197, 94, 0.25); }
.pc .lookup-banner--warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(245, 158, 11, 0.25); }
.pc .lookup-banner--error   { background: var(--error-bg);   color: var(--error);   border-color: rgba(239, 68, 68, 0.25); }
.pc .lookup-banner--info    { background: var(--primary-bg); color: var(--primary); border-color: rgba(25, 156, 130, 0.25); }
.pc .lookup-banner--neutral { background: var(--bg-card-hover); color: var(--text-secondary); border-color: var(--border); }

/* ───── Acciones (footer) ───── */
.pc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 4px 0 16px;
}
.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.12s ease;
}
.pc-btn--primary {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 92%, white 8%) 0%,
        var(--primary) 100%);
    color: #ffffff;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 20px -8px rgba(25, 156, 130, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.06);
}
.pc-btn--primary:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 88%, white 12%) 0%,
        color-mix(in srgb, var(--primary) 94%, black 6%) 100%);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.22) inset,
        0 12px 28px -10px rgba(25, 156, 130, 0.65),
        0 1px 2px rgba(0, 0, 0, 0.06);
}
.pc-btn--primary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc-btn--primary:active { transform: scale(0.98); }
.pc-btn--primary:disabled { opacity: 0.7; cursor: wait; }

.pc-btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
}
.pc-btn--ghost:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.pc-btn--ghost:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.pc-btn--ghost:active { transform: scale(0.98); }

/* ───── Responsive ───── */

/* Tablet landscape + laptop pequeña */
@media (max-width: 1024px) {
    .pc {
        max-width: 760px;
        padding-top: 22px;
        padding-bottom: 28px;
    }
    .pc-hero { padding: 20px 22px 22px; }
    .pc-hero__meta { width: 64px; height: 64px; }
    .pc-card__head { padding: 18px 20px 16px; }
    .pc-grid { padding: 20px; gap: 16px 20px; }
    .pc-datepicker__pop { width: 300px; }
}

/* Tablet portrait — 1 columna */
@media (max-width: 820px) {
    .pc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pc-field--full { grid-column: 1; }
}

/* Mobile L (iPhone Pro Max, Galaxy) */
@media (max-width: 640px) {
    .pc {
        padding: 18px max(14px, env(safe-area-inset-left)) 24px max(14px, env(safe-area-inset-right));
        gap: 18px;
    }
    .pc-hero {
        padding: 18px 18px 20px;
    }
    .pc-hero__body { gap: 16px; }
    .pc-hero__meta { width: 56px; height: 56px; border-radius: 14px; }
    .pc-hero__meta svg { width: 32px; height: 32px; }
    .pc-hero__title { font-size: 1.45rem; }

    .pc-card__head { padding: 16px 16px 14px; gap: 12px; }
    .pc-card__icon { width: 38px; height: 38px; border-radius: 10px; }
    .pc-card__step { top: 12px; right: 14px; font-size: 0.7rem; }
    .pc-card__heading { padding-right: 32px; }
    .pc-card__title { font-size: 0.98rem; }
    .pc-grid { padding: 16px; gap: 14px; }

    /* iOS auto-zoom prevention: ≥ 16px */
    .pc-input,
    .pc-select__trigger,
    .pc-datepicker__trigger {
        font-size: 16px;
        min-height: 48px;
    }
    .pc-input { padding: 12px 14px; }
    .pc-input.pc-input--lead { padding-left: 44px; }
    .pc-input-wrap > .pc-input-lead { left: 14px; }

    /* Lookup refresh: sale del input para mejor tap */
    .pc-input-wrap--action { flex-wrap: wrap; }
    .pc .lookup-refresh {
        position: static;
        order: 3;
        width: auto;
        min-height: 44px;
        height: auto;
        padding: 10px 16px;
        margin-top: 10px;
        font-size: 0.825rem;
        font-weight: 500;
        gap: 8px;
        background: var(--bg-card-hover);
        border-color: var(--border);
        color: var(--text-secondary);
        transform: none;
    }
    .pc .lookup-refresh:active { transform: scale(0.97); }
    .pc .lookup-refresh::after { content: 'Refrescar consulta'; }
    .pc-input-wrap--action .pc-input { padding-right: 14px; }
    .pc .lookup-spinner { right: 16px; }

    /* Datepicker popup: full ancho */
    .pc-datepicker__pop {
        width: calc(100vw - 28px);
        left: 50%;
        transform: translateX(-50%);
    }
    .pc-datepicker__day { min-height: 40px; font-size: 0.875rem; }

    /* Acciones: sticky footer + safe-area */
    .pc-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 0 -14px -24px;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        background: var(--bg-card);
        border-top: 1px solid var(--border-light);
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
    }
    .pc-btn { width: 100%; min-height: 50px; }
}

/* Mobile (iPhone SE) */
@media (max-width: 380px) {
    .pc-card__icon { width: 34px; height: 34px; }
    .pc-card__subtitle { display: none; }
    .pc-hero__subtitle { font-size: 0.85rem; }
    .pc-hero__meta { display: none; }
    .pc-datepicker__msel { min-width: 96px; }
    .pc-datepicker__ysel { min-width: 70px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pc-hero__dot,
    .pc-input-wrap.is-loading .form-input-skeleton,
    .pc .lookup-spinner.is-active svg,
    #submitBtn svg {
        animation: none !important;
    }
    .pc-btn,
    .pc-back,
    .pc-input,
    .pc-select__trigger,
    .pc-datepicker__trigger,
    .pc-card,
    .pc-select__chev,
    .pc-datepicker__chev {
        transition: none !important;
    }
    .pc-btn:active,
    .pc-back:active,
    .pc-datepicker__navbtn:active,
    .pc-datepicker__chip:active,
    .pc-datepicker__day:active {
        transform: none !important;
    }
    .pc-select__list,
    .pc-datepicker__pop {
        animation: none !important;
    }
}



/* === CONSULTORIO IDENTITY V1 === */
/* Estilos para la seccion Identidad Profesional rediseñada en Mi Consultorio.
   Convive con .mc3-* heredados — agrega .mc-id-* y .mc-id-preview-* sin
   sobreescribir reglas existentes. Removible borrando este bloque. */

.mc-id-preview {
    margin: 0 0 22px 0;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
    border: 1px solid #bae6fd;
    position: relative;
    overflow: hidden;
}
.mc-id-preview::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4 0%, #14b8a6 100%);
}
.mc-id-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.mc-id-preview__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0e7490;
}
.mc-id-preview__hint {
    font-size: 11.5px;
    color: #64748b;
}
.mc-id-preview__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mc-id-preview__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #0f172a;
}
.mc-id-preview__row--muted {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
}
.mc-id-preview__label {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 180px;
}
.mc-id-preview__formal {
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.mc-id-preview__creds {
    color: #475569;
    font-size: 13px;
}
.mc-id-preview__brand {
    color: #0e7490;
    font-weight: 600;
    font-size: 13px;
}
.mc-id-preview__warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #9a3412;
}

/* Grid identidad — divisor visual entre profesional y consultorio */
.mc-id-grid {
    row-gap: 16px;
}
.mc-id-field {
    min-width: 0;
}
.mc-id-field--full {
    grid-column: 1 / -1;
}
.mc-id-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 -4px 0;
}
.mc-id-divider::before,
.mc-id-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
}
.mc-id-divider__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

/* Hints debajo de inputs */
.mc3-label__hint {
    margin: 6px 0 0 0;
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
}
.mc3-label__opt {
    color: #94a3b8;
    font-weight: 400;
    font-size: 11px;
}

/* Errores por campo (FormRequest devuelve $errors) */
.mc3-field__error {
    margin: 4px 0 0 0;
    color: #b91c1c;
    font-size: 11.5px;
    font-weight: 500;
}

/* Select estilizado coherente con .mc3-input */
.mc3-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Responsive — preview y grid */
@media (max-width: 720px) {
    .mc-id-preview {
        padding: 14px 14px;
    }
    .mc-id-preview__label {
        min-width: 0;
        width: 100%;
    }
    .mc-id-preview__formal {
        font-size: 15px;
    }
}

/* === CONSULTORIO IDENTITY V1 — banner forzado === */
.mc-id-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    margin: 0 0 18px 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 1px solid #fed7aa;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
    position: relative;
    overflow: hidden;
}
.mc-id-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}
.mc-id-banner__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
}
.mc-id-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}
.mc-id-banner__title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: #78350f;
    letter-spacing: -0.01em;
}
.mc-id-banner__text {
    margin: 0 0 12px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #7c2d12;
}
.mc-id-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    background: #d97706;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.mc-id-banner__btn:hover {
    background: #b45309;
    transform: translateY(-1px);
}
.mc-id-banner__btn:active {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .mc-id-banner {
        padding: 14px 14px;
        flex-direction: column;
    }
    .mc-id-banner__icon {
        margin-bottom: 4px;
    }
}

/* === CONSULTORIO BRANDING PREVIEW V1 === */
/* Estilos para la seccion "Vista previa de documentos y comunicaciones"
   dentro de Mi Consultorio. Variables --bp-accent inyectadas por Alpine
   en cada card permiten que el color de acento sea reactivo sin recargar. */

.mc-bp-section {
    margin-top: 18px;
}

.mc-bp-tpl-card {
    grid-column: 1 / -1;
}

.mc-bp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 8px;
}
@media (max-width: 900px) {
    .mc-bp-grid {
        grid-template-columns: 1fr;
    }
}

.mc-bp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.mc-bp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
}
.mc-bp-card__kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}
.mc-bp-card__hint {
    font-size: 11px;
    color: #94a3b8;
}
.mc-bp-tpl-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #a5f3fc;
}

/* ── Preview header PDF (simulacion HTML) ───────────────────── */
.mc-bp-pdf {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    min-height: 240px;
    position: relative;
    font-family: 'DejaVu Sans', system-ui, -apple-system, sans-serif;
}
.mc-bp-pdf__logo {
    max-height: 50px;
    max-width: 120px;
    object-fit: contain;
    margin-bottom: 12px;
    display: block;
}
.mc-bp-pdf__logo-placeholder {
    width: 80px;
    height: 50px;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 12px;
}
.mc-bp-pdf__info {
    text-align: left;
}
.mc-bp-pdf__name {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.mc-bp-pdf__title {
    font-size: 12px;
    color: var(--bp-accent, #199c82);
    font-weight: 700;
    margin-top: 3px;
}
.mc-bp-pdf__contact {
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
}
.mc-bp-pdf__rule {
    height: 2.5px;
    background-color: var(--bp-accent, #199c82);
    border-radius: 1px;
    margin-top: 12px;
}
.mc-bp-pdf__rule-accent {
    display: none; /* solo se ve en institutional */
}
.mc-bp-pdf__doc-title {
    margin-top: 16px;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.mc-bp-pdf__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.mc-bp-pdf__line {
    display: block;
    height: 5px;
    background: #f1f5f9;
    border-radius: 2px;
    width: 100%;
}
.mc-bp-pdf__line--w90 { width: 90%; }
.mc-bp-pdf__line--w70 { width: 70%; }

/* Variantes por template ----------------------------------------- */
.mc-bp-pdf--tpl-classic .mc-bp-pdf__name {
    letter-spacing: 0.3px;
}
.mc-bp-pdf--tpl-classic .mc-bp-pdf__title {
    color: #334155;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
}
.mc-bp-pdf--tpl-classic .mc-bp-pdf__rule {
    background-color: #94a3b8;
    height: 1px;
}

.mc-bp-pdf--tpl-minimal .mc-bp-pdf__name {
    font-size: 15px;
    font-weight: 600;
}
.mc-bp-pdf--tpl-minimal .mc-bp-pdf__title {
    color: #64748b;
    font-weight: normal;
}
.mc-bp-pdf--tpl-minimal .mc-bp-pdf__contact {
    font-size: 10px;
    color: #94a3b8;
}

.mc-bp-pdf--tpl-institutional .mc-bp-pdf__name {
    font-size: 18px;
    color: #0b1220;
    letter-spacing: 0.2px;
}
.mc-bp-pdf--tpl-institutional .mc-bp-pdf__title {
    color: #1e293b;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}
.mc-bp-pdf--tpl-institutional .mc-bp-pdf__rule {
    background-color: #0f172a;
    height: 1.5px;
}
.mc-bp-pdf--tpl-institutional .mc-bp-pdf__rule-accent {
    display: block;
    height: 1.5px;
    background-color: var(--bp-accent, #199c82);
    margin-top: 2px;
    border-radius: 1px;
}

/* ── Preview firma email ───────────────────────────────────── */
.mc-bp-email {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 22px 4px 0;
    min-height: 200px;
}
.mc-bp-email__intro {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 8px;
}
.mc-bp-email__name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.mc-bp-email__sub {
    font-size: 13px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.45;
}
.mc-bp-email__lic {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
.mc-bp-email__contact {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
    line-height: 1.45;
}
.mc-bp-email__accent {
    width: 36px;
    height: 3px;
    background: var(--bp-accent, #199c82);
    border-radius: 2px;
    margin-top: 14px;
}

/* ── Readiness por tipo de documento ───────────────────────── */
.mc-bp-readiness {
    margin-top: 22px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.mc-bp-readiness__title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.mc-bp-readiness__hint {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.mc-bp-readiness__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.mc-bp-doc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mc-bp-doc-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.mc-bp-doc-card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.mc-bp-doc-card__desc {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
.mc-bp-doc-card__missing {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #b45309;
    line-height: 1.55;
}
.mc-bp-doc-card__missing li {
    margin-bottom: 2px;
}
.mc-bp-doc-card__ok {
    margin: 0;
    font-size: 12px;
    color: #15803d;
}

.mc-bp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mc-bp-status__icon {
    font-size: 12px;
    line-height: 1;
}
.mc-bp-status--ready {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.mc-bp-status--partial {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.mc-bp-status--missing {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@media (max-width: 640px) {
    .mc-bp-card { padding: 14px; }
    .mc-bp-pdf { padding: 16px; }
}

/* === CONSULTORIO COMMUNICATIONS V1 === */
/* Estilos para la seccion "Comunicaciones y portal" — Fase 3.
   Convive con .mc3-* y .mc-bp-* sin sobreescribir. Removible borrando
   este bloque + el bloque del Blade marcado con
   {{-- consultorio-communications-v1:* --}}. */

.mc-cm-section {
    margin-top: 22px;
}

.mc-cm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 720px) {
    .mc-cm-grid {
        grid-template-columns: 1fr;
    }
}
.mc-cm-field {
    min-width: 0;
}
.mc-cm-field--full {
    grid-column: 1 / -1;
}

/* ── Disclaimer toggle + fields ──────────────────────────────── */
.mc-cm-disclaimer {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 16px;
}
.mc-cm-disclaimer__head {
    margin-bottom: 10px;
}
.mc-cm-disclaimer__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.mc-cm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.mc-cm-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.mc-cm-toggle__slider {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.18s ease;
    flex: 0 0 auto;
}
.mc-cm-toggle__slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.mc-cm-toggle__input:checked + .mc-cm-toggle__slider {
    background: #14b8a6;
}
.mc-cm-toggle__input:checked + .mc-cm-toggle__slider::after {
    transform: translateX(16px);
}
.mc-cm-toggle__label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

/* ── Previews ───────────────────────────────────────────────── */
.mc-cm-previews {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed #e2e8f0;
}
.mc-cm-previews__title {
    margin: 0 0 14px 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mc-cm-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.mc-cm-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
}
.mc-cm-card__kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}
.mc-cm-card__hint {
    font-size: 11px;
    color: #94a3b8;
}

/* ── Preview saludo del portal ──────────────────────────────── */
.mc-cm-portal {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: 22px 20px;
    text-align: center;
    position: relative;
}
.mc-cm-portal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: var(--cm-accent, #199c82);
}
.mc-cm-portal__greeting {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.mc-cm-portal__sub {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 16px;
}
.mc-cm-portal__btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: default;
}

/* ── Preview footer del correo ──────────────────────────────── */
.mc-cm-email {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 18px 22px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.mc-cm-email__intro {
    font-size: 12.5px;
    color: #cbd5e1;
    font-style: italic;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e2e8f0;
}
.mc-cm-email__meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
    line-height: 1.7;
}
.mc-cm-email__meta strong {
    color: #0f172a;
    font-weight: 600;
}
.mc-cm-email__footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.mc-cm-email__disclaimer {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
}
.mc-cm-email__disclaimer-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9a3412;
    margin-bottom: 4px;
}
.mc-cm-email__disclaimer-body {
    font-size: 11.5px;
    color: #7c2d12;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.mc-cm-email__accent {
    width: 36px;
    height: 3px;
    background: var(--cm-accent, #199c82);
    border-radius: 2px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .mc-cm-card { padding: 14px; }
    .mc-cm-portal { padding: 18px 14px; }
}

/* === COLORS ISOLATION V1 === */
/* Restablecer al predeterminado por color + mini-form de pdf_template
   aislado del form de colores. */

.mc-colors-toolbar {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 10px;
}
.mc-colors-toolbar__reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid #d97706;
    border-radius: 8px;
    background: #ffffff;
    color: #92400e;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mc-colors-toolbar__reset:hover {
    background: #d97706;
    color: #ffffff;
}
.mc-colors-toolbar__hint {
    margin: 8px 0 0 0;
    font-size: 11.5px;
    color: #7c2d12;
    line-height: 1.5;
}

/* Boton de reset por color */
.mc-color-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mc-color-reset:hover {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

/* Card en estado reset: swatch dim + nota */
.mc-color--reset .mc3-color-swatch {
    opacity: 0.35;
    filter: grayscale(70%);
    cursor: not-allowed;
}
.mc-color--reset .mc3-color-hex {
    color: #94a3b8;
    font-style: italic;
}
.mc-color--reset .mc-color-reset {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

/* Mini-form de pdf_template (movido fuera del form de colores) */
.mc-bp-tpl-form {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 12px;
}
.mc-bp-tpl-form__label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: #0f172a;
    font-weight: 600;
}
.mc-bp-tpl-form__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.mc-bp-tpl-form__select {
    flex: 1 1 200px;
    min-width: 160px;
}
.mc-bp-tpl-form__btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .mc-bp-tpl-form__row {
        flex-direction: column;
    }
    /* En columna el eje principal es VERTICAL: un flex-basis de 200px se
       interpretaría como ALTURA y estiraba el <select> a 200px de alto.
       Se neutraliza el basis (auto) y se fuerza ancho completo → altura
       natural del control. */
    .mc-bp-tpl-form__select {
        flex-basis: auto;
        width: 100%;
    }
    .mc-bp-tpl-form__btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LOW-POWER DEVICE SAFETY LAYER — Capa de compatibilidad GPU/performance
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Esta capa es ARQUITECTURA, no parche. Aplica progressive enhancement
 * desde abajo hacia arriba: la base funciona en hardware debil; los efectos
 * costosos se anaden por capacidad de viewport (proxy razonable de potencia
 * GPU/memoria en el ecosistema actual de tablets/moviles).
 *
 * Motivacion: el sistema acumula 86 backdrop-filter, 60 filter:blur, 39
 * animaciones infinitas y 138 transition:all en sus CSS. Cada uno fue
 * intencional en su contexto pero el conjunto golpea fuerte a GPUs moviles
 * de gama media-baja (Mali-G52, Adreno 610-619, PowerVR Rogue) presentes
 * en Lenovo M10/M11/Tab, Galaxy Tab A, tablets economicas Android — donde
 * Chromium produce tearing/banding al componer multiples capas con blur.
 *
 * Esta capa debe ser la ULTIMA del archivo para ganar por orden de cascada
 * a cualquier definicion previa (usa !important con criterio quirurgico,
 * solo donde hay reglas previas con la misma especificidad).
 *
 * Politica de viewports (alineada con politica del Sprint):
 *   <=480px   movil pequeno
 *   <=640px   movil grande
 *   <=900px   tablet portrait
 *   <=1366px  tablet landscape + edge cases (Lenovo P11/M11 reportando DPR alto)
 *   <=1440px  tablets tactiles (Tier 5 — sin impacto en laptops por filter touch)
 *   >1366px   laptop/desktop  → recibe efectos completos
 *
 * NOTA: el limite del Tier 1 se amplio a 1366px (antes 1280px) porque
 * algunas Lenovo 11" landscape reportan 1281-1366px de viewport segun
 * DPR/scaling. Costo: laptops/Chromebooks de 1366px pierden el efecto
 * vidrio esmerilado del topbar/modales. Aceptable — son la mayoria
 * dispositivos modestos que tambien se benefician de menos blur GPU.
 * Tier 5 se amplio a 1440px porque su targeting touch-only no afecta a
 * laptops aunque esten en ese rango.
 *
 * NO toca: layout, colores, branding, tipografia, espaciado, navegacion,
 * identidad visual ni componentes funcionales. Solo neutraliza propiedades
 * conocidas por causar inestabilidad visual sin aportar a la usabilidad.
 */

/* ─── Tier 1 ── Tablets y menores: matar backdrop-filter ────────────────── *
 * Ofensor #1: backdrop-filter full-screen. Causa tearing en GPUs debiles
 * porque el compositor debe muestrear el viewport entero y blurearlo cada
 * frame. El velo semitransparente subyacente (rgba) sigue presente — solo
 * desaparece el desenfoque del fondo, que es puramente decorativo.
 *
 * Limite ampliado a 1366px (antes 1280px) tras detectar que algunas Lenovo
 * Tab P11/M11 en landscape reportan 1281-1366px de CSS viewport segun DPR
 * y nivel de zoom del navegador. El bug original se manifesto justo en ese
 * rango. Costo aceptable: Chromebooks/laptops de 1366px pierden el efecto
 * vidrio del topbar y modales — son dispositivos modestos que tambien se
 * benefician al evitar blur GPU. Desktops 1440px+ no se afectan.          */
@media (max-width: 1366px) {
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ─── Tier 2 ── Tablet/movil: degradar filtros blur decorativos ─────────── *
 * `filter: blur(80px)` y similares se usan en blobs decorativos (auth
 * pages, hero sections, welcome-card del dashboard). En desktop son livianos
 * porque corren sobre elementos pequenos; en tablet/movil con resolucion alta
 * el coste se dispara (el blur se calcula en device pixels, no CSS pixels).
 *
 * Cobertura ampliada a tablet (<=900px) y se anade explicitamente
 * `.welcome-banner::after` que es un blob decorativo sin sufijo identificable
 * (circulo teal 300x300 con blur(80px), .welcome-banner del dashboard).
 * El layout no cambia — solo no se pinta el blur. */
@media (max-width: 900px) {
    [class*="-blob"],
    [class*="-glow"],
    [class*="bg-orb"],
    [class*="-aura"],
    .welcome-banner::before,
    .welcome-banner::after {
        filter: none !important;
        opacity: 0 !important;
    }
}

/* ─── Tier 3 ── prefers-reduced-motion: respeto a preferencia del SO ───── *
 * Refuerzo global. El proyecto ya tiene 16 bloques prefers-reduced-motion
 * dispersos, pero la cobertura no es completa. Esta regla los complementa
 * sin sobrescribir comportamiento funcional (modales abren/cierran igual,
 * solo sin transicion perceptible).                                       */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Tier 4 ── Movil pequeno: pausar animaciones decorativas infinitas ── *
 * En <=480px, animaciones infinitas decorativas (pulse, shimmer, float)
 * consumen GPU continua sin aportar valor de UX. Skeletons de carga son
 * la excepcion (terminan al renderizar contenido real) — los reconocemos
 * por sufijos comunes y los preservamos. Targeting por sufijo de clase
 * en lugar de selector universal para evitar matar animaciones funcionales. */
@media (max-width: 480px) {
    [class*="-pulse"]:not([class*="skel"]):not([class*="skeleton"]),
    [class*="-float"],
    [class*="-aura"],
    [class*="-glow"] {
        animation: none !important;
    }
}

/* ─── Tier 5 ── Tablets tactiles: shimmer y filter-blur full-coverage ──── *
 * Refuerzo post-Tier 1. El bug original se atribuyo a backdrop-filter y se
 * neutralizo en Tier 1, pero en Lenovo M-series/Galaxy Tab A (Mali-G52,
 * Adreno 610) reaparece como bandas horizontales sobre paneles tipo popover/
 * skeleton — la causa subyacente NO es backdrop-filter, es:
 *
 *   (a) Animacion `background-position` sobre linear-gradient de baja
 *       diferencia tonal (shimmer de skeletons). El compositor rasteriza el
 *       gradiente en un buffer temporal de N pixeles y lo traslada cada
 *       frame; en GPUs de 6 bits por canal o con buffer reducido aparecen
 *       bandas por cuantizacion del gradiente. Visualmente: rayas regulares.
 *
 *   (b) `filter: blur()` decorativo en blobs/auras de cards y heros entre
 *       901 y 1280px (Tier 2 solo cubria hasta 900). El blob se rasteriza
 *       en un canvas off-screen del tamano del bbox del elemento; si el
 *       elemento tiene transform o animacion, el canvas se reproyecta cada
 *       frame y la GPU debil pierde frames → tearing visible.
 *
 *   (c) `will-change: background-position` permanente: aunque el shimmer
 *       se desactive, el hint mantiene el layer GPU promovido y el repaint
 *       de elementos cercanos sigue costando vsync.
 *
 * Esta capa se activa SOLO en touch devices ((hover:none) AND (pointer:
 * coarse)) por debajo de 1440px — laptop convertibles y desktop touchscreen
 * (pointer: fine + coarse) NO se afectan. Es targeting de tablets puras.
 *
 * Limite ampliado a 1440px (antes 1280px) para cubrir tablets 11"-12" en
 * landscape con escalado alto (Lenovo Tab P11 Pro 11.5", Galaxy Tab S8+,
 * iPad Pro 12.9" rotada). Como el filtro touch-only ya excluye laptops
 * con trackpad/mouse, ampliar este rango no impacta a ningun dispositivo
 * que use mouse — el costo en laptops es exactamente cero.
 *
 * No cambia diseno visible: skeleton sigue rendrenizado como bloque gris
 * estatico (es un placeholder, no contenido informativo); blobs decorativos
 * pasan a opacity 0 (eran solo accent, no estructura).                     */
@media (max-width: 1440px) and (hover: none) and (pointer: coarse) {
    /* (a) Shimmer / skeleton loaders — freeze sin matar el placeholder.
     * Targeting amplio por sufijo conocido + clases concretas detectadas
     * en code review. Si aparece un skeleton nuevo, agregarlo aqui o
     * adoptar prefijo `*-skel*` para que caiga en el sufijo generico.    */
    [class*="-shimmer"],
    [class*="-skeleton"],
    [class*="-skel-"],
    [class*="skel-line"],
    .form-input-skeleton,
    .pat-skeleton-row td,
    .cal2-skel-line,
    .b4-skeleton,
    .rem-skel,
    .psh3-skeleton-bar,
    .cs3-skeleton,
    .chl2-skeleton-wrap,
    .mc3-demo-pdf__line--shimmer {
        animation: none !important;
        background-position: 0 0 !important;
        will-change: auto !important;
    }

    /* (b) Filter:blur decorativo — extender Tier 2 hasta el limite de
     * Tier 1 (1280) en touch devices. Coincide con la lista de Tier 2 +
     * sufijos adicionales detectados.
     *
     * .welcome-banner::after (NOT .welcome-card) es un circulo teal 300x300
     * con filter:blur(80px) y opacity:.3 en el welcome del dashboard. Era
     * el ofensor real del bug visual en Lenovo Tab M11 portrait — el blur
     * del blob hacia tearing horizontal sobre el banner. Cubierto aqui +
     * en Tier 2.                                                          */
    [class*="-blob"],
    [class*="-glow"],
    [class*="bg-orb"],
    [class*="-aura"],
    [class*="-halo"],
    [class*="-sheen"],
    .welcome-banner::before,
    .welcome-banner::after {
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 0 !important;
    }

    /* (c) will-change permanente — soltar layer cuando no hay animacion
     * activa. Selectores estrechos para evitar bajar performance en flujos
     * que SI necesitan el hint (modales que abren/cierran).               */
    .form-input-skeleton,
    .pat-skeleton-row td,
    [class*="-skel-"] {
        will-change: auto !important;
    }

    /* (d) Navegacion del sidebar — eliminar cascada de compositor layers
     *
     * El JS de openSidebar() en layouts/app.blade.php aplica inline-style
     * `transform: translateX(-10px)` + `opacity: 0` + setTimeout staggered
     * a ~15+ items del nav (snav2-flat, snav2-group__hdr, snav2-section,
     * sidebar-brand). Cada item con transform se promueve a su propia
     * capa GPU; en Lenovo Tab M11 (Mali-G52) son 15+ capas concurrentes
     * componiendose en ~80ms → tearing / bandas visibles durante apertura.
     *
     * Aqui forzamos el estado FINAL via !important (que gana sobre inline
     * style sin !important). Resultado: el sidebar abre instantaneamente
     * en lugar de stagger, sin crear capas GPU. Visualmente: nav aparece
     * de golpe; funcionalmente: identico. Costo de UX: cero (la animacion
     * staggered es decorativa, no aporta a la usabilidad).                */
    .sidebar.open .snav2-flat,
    .sidebar.open .snav2-group__hdr,
    .sidebar.open .snav2-section,
    .sidebar.open .sidebar-brand,
    .sidebar.open .sidebar-profile,
    .sidebar.open .sidebar-stats {
        transform: none !important;
        opacity: 1 !important;
        transition: background-color .15s ease, color .15s ease !important;
    }

    /* (e) Sub-items: matar stagger keyframe + transform de Alpine slide
     *
     * .snav2-group__body .snav2-sub corre `snav2-item-in` con translateX
     * cuando un grupo expande sus sub-items. Combinado con la transicion
     * Alpine (.snav2-slide-enter), son ~8 propiedades animadas en paralelo
     * por cada submenu que se abre. Reducimos a opacity + max-height
     * (acordeon sigue funcionando, sin transform → sin nueva capa GPU).  */
    .snav2-group__body .snav2-sub {
        animation: none !important;
        transform: none !important;
    }
    .snav2-slide-enter,
    .snav2-slide-leave {
        transition: opacity .18s ease, max-height .22s ease !important;
    }
    .snav2-slide-enter-from,
    .snav2-slide-leave-to {
        transform: none !important;
    }

    /* (f) transition: all sobre items del nav — reemplazar por properties
     * especificas. `all` anima cualquier cambio (incluyendo color, padding,
     * border) cada vez que el hover/active cambia; en tap rapido en tablet
     * dispara repaints innecesarios.                                      */
    .snav2-flat,
    .snav2-group__hdr,
    .snav2-sub {
        transition: background-color .12s ease, color .12s ease !important;
    }

    /* (g) SIDEBAR SHELL — el ofensor REAL del banding al navegar.
     *
     * El .sidebar contenedor tiene definido a nivel base:
     *   transition: transform .38s cubic-bezier(...), box-shadow .38s ease
     *   box-shadow: 0 12px 32px (al abrir, --shadow-lg)
     *   box-shadow: 4px 0 28px (permanente cuando esta expandido)
     *
     * Cuando el sidebar slide-in en tablet (~280px de ancho moviendose):
     *   - cada frame el GPU mueve un elemento full-height (1000px+)
     *   - y simultaneamente rasterea una box-shadow con BLUR de 32px sobre
     *     toda esa altura
     *   - 380ms × 60fps = 23 frames de re-pintado costoso de la sombra
     *
     * En Mali-G52 / Adreno 610 esto es EXACTAMENTE el patron que produce
     * las bandas horizontales sobre la zona del sidebar al navegar (no
     * sobre el sidebar mismo — sobre el contenido detras que el GPU no
     * alcanza a recomponer limpio).
     *
     * Fix: la SOMBRA no se anima (queda estatica desde el primer frame),
     * el slide se acorta a 250ms, y reducimos el blur de 32 → 12. El
     * sidebar sigue viendose con depth (sombra presente), solo no es un
     * ejercicio de GPU para abrirlo.                                     */
    .sidebar {
        transition: transform .25s ease !important;
        will-change: auto !important;
    }
    .sidebar.open {
        box-shadow: 2px 0 12px rgba(0, 0, 0, .28) !important;
    }
    .app-layout:not(.sidebar-collapsed) .sidebar {
        box-shadow: 2px 0 8px rgba(0, 0, 0, .15) !important;
    }
}

/* ─── Notas de mantenimiento ────────────────────────────────────────────── *
 * Para deshabilitar esta capa puntualmente en un componente (ej. una pagina
 * publica que SI necesita el efecto glass full-screen para tablet), envolver
 * en `@media (min-width: ...)` con valor menor a 1180px, o anadir la regla
 * inversa en un CSS posterior cargado bajo @cssAsset.
 *
 * Si en el futuro el catalogo de dispositivos sube y se quiere reactivar
 * blur en tablets, mover el breakpoint del Tier 1 a 768px o eliminar el
 * bloque. NO usar feature detection (`@supports`) para esto: Chromium en
 * tablets debiles ANUNCIA soporte de backdrop-filter pero falla al
 * componer — el soporte declarado no refleja la capacidad real.
 *
 * Para reactivar shimmer en una pagina especifica (ej. demo de Mi
 * Consultorio que necesita la animacion para mostrar el flujo de carga),
 * usar `@media not all and (hover: none)` o targetear via clase de body
 * para anular el Tier 5 puntualmente.                                    */

/* ════════════════════════════════════════════════════════════════════════
 *  ANTI AUTO-ZOOM GLOBAL (iOS / iPadOS / Android) — TODO EL SISTEMA
 * ════════════════════════════════════════════════════════════════════════
 *  iOS Safari/Chrome y algunos Android hacen ZOOM automatico al enfocar un
 *  campo cuyo font-size < 16px. Esta regla fuerza 16px en TODOS los campos
 *  enfocables de TODA la app, SOLO en dispositivos tactiles: `pointer: coarse`
 *  (iOS/iPadOS/Android estandar) MAS `hover: none` como respaldo defensivo para
 *  tablets/navegadores que no reportan `coarse` correctamente. El escritorio con
 *  mouse (`hover: hover` + `pointer: fine`) NO matchea ninguna → no cambia nada.
 *
 *  Por que aqui (al final) y con !important:
 *  - Va al final del archivo → gana empates de especificidad por orden de
 *    fuente sobre reglas previas SIN !important.
 *  - !important → gana a cualquier regla de modulo sin !important, sin
 *    importar su especificidad.
 *  - Las UNICAS reglas con `font-size <16px !important` mas especificas en
 *    todo el sistema son los search de select2 del modulo Notas Clinicas
 *    (.ncf-app / .ncf-s2), que YA tienen su propio override a 16px arriba en
 *    este archivo. El resto del sistema no tiene !important de fuente en
 *    campos, asi que esta regla los cubre a todos. (Auditado sobre app.css.)
 *
 *  Se excluyen checkbox/radio/range/color (no llevan texto ni hacen zoom, y
 *  algunos se dimensionan en em). [contenteditable="false"] tambien se excluye. */
@media (pointer: coarse), (hover: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]),
    textarea,
    select,
    [contenteditable]:not([contenteditable="false"]),
    .select2-search__field {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SIDEBAR — MINI-RAIL + FLYOUT (desktop ≥1025px)
 * ---------------------------------------------------------------------------
 * Aporte rescatado del template `sidebar-with-dropdown-menu` (CodingNepal):
 * cuando el sidebar se "colapsa" en desktop, en lugar de ocultarse por
 * completo (comportamiento previo: translateX(-100%)), se transforma en una
 * RAIL de solo-iconos (76px) y los grupos despliegan su submenu como FLYOUT
 * flotante al hover.
 *
 * GARANTÍAS DE AISLAMIENTO (no rompe nada existente):
 *  - Todo va dentro de @media (min-width:1025px): NO toca el offcanvas
 *    mobile/tablet (≤1024px usa .sidebar.open, intacto).
 *  - Reusa el markup actual (.snav2-*, .sidebar-*) — CERO cambios en Blade/JS.
 *  - Override del estado colapsado anterior por orden de cascada (este bloque
 *    va al final del archivo) + especificidad ≥ a las reglas previas.
 *  - Único !important del bloque: forzar el flyout sobre el `display:none`
 *    INLINE que Alpine (x-show) escribe en .snav2-group__body. Está acotado a
 *    `.sidebar-collapsed ... :hover` — no afecta el render normal del acordeón.
 *
 * LIMITACIÓN CONOCIDA: la rail usa overflow:visible (para que el flyout escape
 * del recorte del sidebar), por lo que pierde el scroll vertical propio. Con
 * ~10 iconos entra sin problema en viewports desktop normales (≥700px alto).
 * En ventanas desktop muy bajas podría desbordar — caso borde aceptado.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    :root { --sidebar-rail-width: 84px; }

    /* EFECTO ABRIR/CERRAR: animar el ANCHO de la rail en sincronía con el
       margen del contenido. La transición base de .sidebar solo cubre
       transform/box-shadow (servía cuando el colapso era translateX); al
       pasar a rail por width, sin esto el ancho saltaba de golpe.
       Mismo timing/easing que .main-wrapper (margin-left) → se mueven juntos. */
    .sidebar {
        transition: transform .38s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow .38s ease,
                    width .38s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Rail en vez de ocultar: sidebar angosto, visible, sin recorte */
    .sidebar-collapsed .sidebar {
        transform: none;
        width: var(--sidebar-rail-width);
        overflow: visible;
    }
    .sidebar-collapsed .main-wrapper {
        margin-left: var(--sidebar-rail-width);
    }

    /* Mantener nav + footer visibles (anula el fade-out del modo "ocultar") */
    .sidebar-collapsed .sidebar .snav2,
    .sidebar-collapsed .sidebar .sidebar-footer {
        opacity: 1;
        pointer-events: auto;
    }

    /* La rail no scrollea (overflow visible) → centra su contenido con aire */
    .sidebar-collapsed .snav2 {
        overflow: visible;
        align-items: center;
        gap: 7px;
        padding: .6rem .4rem;
    }

    /* Header: solo el icono de marca, centrado y con más presencia */
    .sidebar-collapsed .sidebar-header { justify-content: center; padding: 0; }
    .sidebar-collapsed .sidebar-brand__text { display: none; }
    .sidebar-collapsed .sidebar-brand__icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    .sidebar-collapsed .sidebar-brand__icon svg {
        width: 22px;
        height: 22px;
    }

    /* Perfil: solo avatar, sin tarjeta, más grande */
    .sidebar-collapsed .sidebar-profile {
        justify-content: center;
        padding: 12px 0 8px;
        margin: 6px auto 4px;
        background: transparent;
        border: none;
    }
    .sidebar-collapsed .sidebar-profile__info { display: none; }
    .sidebar-collapsed .sidebar-profile__avatar img,
    .sidebar-collapsed .sidebar-profile__initials {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 18px;
    }

    /* Sin espacio para stats ni labels de sección en la rail */
    .sidebar-collapsed .sidebar-stats,
    .sidebar-collapsed .snav2-section { display: none; }

    /* Items planos y headers de grupo → tiles cuadrados generosos de solo-icono */
    .sidebar-collapsed .snav2-flat,
    .sidebar-collapsed .snav2-group__hdr {
        width: 50px;
        height: 50px;
        padding: 0;
        justify-content: center;
        border-radius: 14px;
        color: rgba(255,255,255,.72);
    }

    /* Iconos más grandes y nítidos (override de los width/height inline del SVG) */
    .sidebar-collapsed .snav2-flat__ico,
    .sidebar-collapsed .snav2-group__ico { width: auto; }
    .sidebar-collapsed .snav2-flat__ico svg,
    .sidebar-collapsed .snav2-group__ico svg {
        width: 22px;
        height: 22px;
    }

    /* Hover: pill que llena el tile */
    .sidebar-collapsed .snav2-flat:hover,
    .sidebar-collapsed .snav2-group__hdr:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

    /* Activo: pill teal con halo sutil */
    .sidebar-collapsed .snav2-flat.active,
    .sidebar-collapsed .snav2-group__hdr.is-active {
        background: rgba(var(--primary-rgb),.18);
        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),.4),
                    0 4px 14px rgba(var(--primary-rgb),.18);
    }
    /* La barrita lateral del acordeón no aplica a un tile centrado */
    .sidebar-collapsed .snav2-group__hdr.is-active:not(.is-open)::before {
        display: none;
    }
    .sidebar-collapsed .snav2-group__label,
    .sidebar-collapsed .snav2-group__meta {
        display: none;
    }

    /* Badge de item plano (ej. Calendario) → punto indicador en la esquina
       del tile. Sin esto, el número se escapa a la derecha de la rail.
       (Los badges DENTRO de grupos van en __meta, ya oculto; los de los
       sub-links siguen mostrando el número dentro del flyout.) */
    .sidebar-collapsed .snav2-flat > .snav2-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 0;
        width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        border-radius: 50%;
    }

    /* Footer: logout como tile de icono */
    .sidebar-collapsed .sidebar-footer { padding: 10px 0; }
    .sidebar-collapsed .sidebar-logout {
        width: 44px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .sidebar-collapsed .sidebar-logout span { display: none; }

    /* ── Anclas de posicionamiento del flyout ── */
    .sidebar-collapsed .snav2-group,
    .sidebar-collapsed .snav2-flat { position: relative; }

    /* Puente invisible para cruzar el gap rail→flyout sin perder el hover */
    .sidebar-collapsed .snav2-group::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 0;
        width: 14px;
        height: 100%;
    }

    /* ── Flyout del submenu (oculto; aparece al hover del grupo) ── */
    .sidebar-collapsed .snav2-group__body {
        display: none;            /* base — coincide con el x-show de Alpine */
        position: absolute;
        left: calc(100% + 10px);
        top: -6px;
        min-width: 210px;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(255,255,255,.08);
        border-left: 1px solid rgba(255,255,255,.08);
        border-radius: 12px;
        background: var(--bg-sidebar, #072b24);
        box-shadow: 0 14px 36px rgba(0,0,0,.45);
        z-index: 60;
        /* Safety: un grupo con muchos sub-links (ej. Herramientas, o "Acceso
           clínico" del admin) o un viewport bajo podría hacer que el flyout
           se extienda fuera de pantalla. Lo acotamos a la altura visible y
           dejamos que scrollee dentro del panel en vez de quedar inalcanzable. */
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .sidebar-collapsed .snav2-group:hover > .snav2-group__body,
    .sidebar-collapsed .snav2-group:focus-within > .snav2-group__body {
        /* !important: vence el `display:none` INLINE que escribe Alpine x-show.
           :focus-within → en táctil (sin hover) el tap enfoca el botón del
           grupo y revela el flyout; en desktop mejora la navegación por teclado. */
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        animation: snav2-flyout-in .16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Sub-links a ancho completo dentro del flyout; sin el stagger inline */
    .sidebar-collapsed .snav2-group__body .snav2-sub {
        width: auto;
        padding: .5rem .65rem;
        animation: none;
    }

    /* ── Tooltip de label para items planos (sin submenu) ── */
    .sidebar-collapsed .snav2-flat .snav2-flat__label { display: none; }
    .sidebar-collapsed .snav2-flat:hover .snav2-flat__label,
    .sidebar-collapsed .snav2-flat:focus-visible .snav2-flat__label {
        display: block;
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        padding: 6px 12px;
        border-radius: 8px;
        background: var(--bg-sidebar, #072b24);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 8px 24px rgba(0,0,0,.35);
        color: #fff;
        font-size: .76rem;
        z-index: 60;
        animation: snav2-tooltip-in .16s ease;
    }

    @keyframes snav2-flyout-in {
        from { opacity: 0; transform: translateX(-6px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes snav2-tooltip-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Respetar prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .sidebar-collapsed .snav2-group:hover > .snav2-group__body,
        .sidebar-collapsed .snav2-group:focus-within > .snav2-group__body,
        .sidebar-collapsed .snav2-flat:hover .snav2-flat__label,
        .sidebar-collapsed .snav2-flat:focus-visible .snav2-flat__label {
            animation: none;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * FIX offcanvas: en mobile/tablet (≤1024px) el sidebar es un DRAWER completo
 * (.sidebar.open). La clase `sidebar-collapsed` persiste en localStorage desde
 * desktop, pero NO debe tener efecto aquí: la regla global del sistema
 * `.sidebar-collapsed .sidebar nav/.sidebar-footer { opacity:0 }` ocultaba el
 * menú y el logout dentro del drawer. La rail solo existe en desktop (≥1025px),
 * así que aquí restauramos visibilidad y ancho completo del drawer.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }
    .sidebar-collapsed .sidebar nav,
    .sidebar-collapsed .sidebar .sidebar-footer {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Chip "Modo demostración" — cuenta demo comercial (link mágico /demo).
 * Indicador flotante NO invasivo: pointer-events:none (nunca bloquea clicks),
 * position:fixed (no altera el flujo ni el responsive). Bottom-left para no
 * chocar con los FABs (bottom-right). Paleta teal del sistema.
 * ═══════════════════════════════════════════════════════════════════════════ */
.demo-chip{
    position:fixed; z-index:40;
    /* En el panel de la doctora el sidebar ocupa la esquina inferior IZQUIERDA
       (botón "Cerrar sesión"), así que el chip va abajo-DERECHA en desktop.
       Al colapsar a drawer (<=1024px) el sidebar desaparece → abajo-izquierda.
       Regla 12 (WebKit): respeta la safe-area de iOS con fallback 0px. */
    right:max(14px, env(safe-area-inset-right, 0px));
    bottom:max(14px, env(safe-area-inset-bottom, 0px));
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 13px; border-radius:999px;
    background:var(--teal-900,#0f3d34); color:#eafaf6;
    font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1;
    box-shadow:0 4px 14px rgba(16,24,40,.18);
    border:1px solid rgba(255,255,255,.14);
    pointer-events:auto; user-select:none; cursor:pointer; text-decoration:none;
    transition:background .15s, transform .12s, box-shadow .15s;
}
.demo-chip:hover{ background:#12564a; transform:translateY(-1px); box-shadow:0 10px 24px rgba(9,43,36,.30); }
.demo-chip:focus-visible{ outline:2px solid #5eead4; outline-offset:2px; }
.demo-chip__dot{
    width:8px; height:8px; border-radius:50%;
    background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.25);
    flex:none;
}
.demo-chip__sep{ width:1px; height:14px; background:rgba(255,255,255,.18); flex:none; }
.demo-chip__action{ display:inline-flex; align-items:center; gap:5px; color:#5eead4; font-weight:700; }
.demo-chip__action svg{ width:13px; height:13px; flex:none; }
/* Al colapsar el sidebar a drawer (<=1024px) desaparece de la izquierda →
   el chip vuelve a abajo-izquierda (y el FAB de recordatorios queda a la
   derecha, sin conflicto). */
@media (max-width: 1024px){
    .demo-chip{ left:max(14px, env(safe-area-inset-left, 0px)); right:auto; }
}
@media (max-width: 480px){
    .demo-chip{
        left:max(10px, env(safe-area-inset-left, 0px));
        right:auto;
        bottom:max(10px, env(safe-area-inset-bottom, 0px));
        padding:6px 11px; font-size:11.5px;
    }
    /* En móvil, compacto: solo el punto + "Cambiar vista". */
    .demo-chip__text, .demo-chip__sep{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Tour guiado de la DEMO comercial (public/js/demo-tour.js).
 * Spotlight sobre el elemento + globo explicativo; tarjeta centrada cuando el
 * objetivo no está visible. Paleta teal del sistema.
 * ═══════════════════════════════════════════════════════════════════════════ */
.demo-guide-btn{
    display:inline-flex; align-items:center; gap:7px;
    height:34px; padding:0 13px; border-radius:9px;
    background:rgba(25,156,130,.12); color:var(--primary,#199c82);
    border:1px solid rgba(25,156,130,.28);
    font-size:13px; font-weight:600; cursor:pointer; line-height:1;
    transition:background .15s, border-color .15s, transform .1s;
    -webkit-appearance:none; appearance:none;
}
.demo-guide-btn:hover{ background:rgba(25,156,130,.20); border-color:rgba(25,156,130,.45); }
.demo-guide-btn:active{ transform:translateY(1px); }
.demo-guide-btn svg{ flex:none; }
@media (max-width: 640px){
    .demo-guide-btn{ padding:0 9px; }
    .demo-guide-btn__label{ display:none; }   /* icono solo en móvil */
}

/* Botón "Copiar enlace de la demo" (topbar, solo admin). */
.demo-link-btn{
    display:inline-flex; align-items:center; gap:7px;
    height:34px; padding:0 13px; border-radius:9px;
    background:rgba(25,156,130,.12); color:var(--primary,#199c82);
    border:1px solid rgba(25,156,130,.28);
    font-size:13px; font-weight:600; cursor:pointer; line-height:1;
    transition:background .15s, border-color .15s, transform .1s;
    -webkit-appearance:none; appearance:none;
}
.demo-link-btn:hover{ background:rgba(25,156,130,.20); border-color:rgba(25,156,130,.45); }
.demo-link-btn:active{ transform:translateY(1px); }
.demo-link-btn svg{ flex:none; }
@media (max-width: 640px){
    .demo-link-btn{ padding:0 9px; }
    .demo-link-btn__label{ display:none; }   /* icono solo en móvil */
}

.dtour[hidden]{ display:none; }
.dtour{ position:fixed; inset:0; z-index:99990; }
.dtour__backdrop{
    position:fixed; inset:0; z-index:99990;
    background:transparent; /* en modo targeted el hole aporta el oscurecido */
}
.dtour--center .dtour__backdrop{ background:rgba(9,43,36,.62); }
.dtour__hole{
    position:fixed; z-index:99991; display:none;
    border-radius:12px; border:2px solid var(--primary,#199c82);
    box-shadow:0 0 0 9999px rgba(9,43,36,.58);
    pointer-events:none;
    transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.dtour__pop{
    position:fixed; z-index:99993; box-sizing:border-box;
    width:min(340px, calc(100vw - 24px));
    background:var(--bg-card,#fff); color:var(--text-primary,#1e293b);
    border:1px solid rgba(15,23,42,.08); border-radius:14px;
    box-shadow:0 18px 48px rgba(9,43,36,.28);
    padding:16px 16px 14px;
}
.dtour--center .dtour__pop{ left:50%; top:50%; transform:translate(-50%,-50%); }
.dtour__pop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dtour__step{
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--primary,#199c82); background:rgba(25,156,130,.10);
    padding:3px 9px; border-radius:999px;
}
.dtour__close{
    width:26px; height:26px; border:none; background:transparent; cursor:pointer;
    font-size:22px; line-height:1; color:var(--text-3,#94a3b8); border-radius:7px;
    display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s;
}
.dtour__close:hover{ background:rgba(15,23,42,.06); color:var(--text-primary,#1e293b); }
.dtour__title{ font-size:16.5px; font-weight:700; margin:0 0 6px; line-height:1.3; }
.dtour__body{ font-size:14px; line-height:1.55; margin:0 0 14px; color:var(--text-2,#475569); }
.dtour__try{
    display:block; width:100%; margin:0 0 10px; height:40px; padding:0 14px;
    border-radius:9px; background:rgba(25,156,130,.10); color:var(--primary,#199c82);
    border:1px solid rgba(25,156,130,.32); font-size:14px; font-weight:700; cursor:pointer;
    line-height:1; transition:background .14s,border-color .14s,transform .1s; -webkit-appearance:none; appearance:none;
}
.dtour__try:hover{ background:rgba(25,156,130,.18); border-color:rgba(25,156,130,.5); }
.dtour__try:active{ transform:translateY(1px); }
.dtour__try[hidden]{ display:none; }
.dtour__nav{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.dtour__btn{
    height:36px; padding:0 16px; border-radius:9px; font-size:13.5px; font-weight:600;
    cursor:pointer; line-height:1; border:1px solid transparent; transition:background .14s,border-color .14s,transform .1s;
    -webkit-appearance:none; appearance:none;
}
.dtour__btn:active{ transform:translateY(1px); }
.dtour__btn--ghost{ background:transparent; color:var(--text-2,#475569); border-color:rgba(15,23,42,.14); }
.dtour__btn--ghost:hover{ background:rgba(15,23,42,.05); }
.dtour__btn--solid{ background:var(--primary,#199c82); color:#fff; }
.dtour__btn--solid:hover{ background:var(--teal-700,#157a66); }
@media (max-width: 640px){
    .dtour__pop{ width:calc(100vw - 24px); }
    .dtour__title{ font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Aviso "acceso registrado" a data clínica — Fase 0 (privacidad Super Admin)
   ───────────────────────────────────────────────────────────────────────
   Franja delgada, no intrusiva, que aparece cuando un ADMIN entra a una ruta
   clínica (bandera `adminClinicalAccessNotice` publicada por el middleware
   `clinical.audit`). Transparencia + disuasión + soporte al audit trail.
   Usa la familia semántica --warning de la paleta (ámbar), coherente con
   `.lookup-banner--warning`. No aparece al imprimir.
   ═══════════════════════════════════════════════════════════════════════ */
.clinic-access-notice{
    display:flex; align-items:center; gap:10px;
    margin:0 0 16px; padding:10px 14px;
    background:var(--warning-bg, rgba(245,158,11,.08));
    border:1px solid rgba(245,158,11,.28);
    border-left:3px solid var(--warning, #f59e0b);
    border-radius:var(--radius, 10px);
    color:#8a5a00;
}
.clinic-access-notice__icon{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:8px;
    background:rgba(245,158,11,.15); color:var(--warning, #f59e0b);
}
.clinic-access-notice__icon svg{ display:block; }
.clinic-access-notice__text{
    margin:0; font-size:13.5px; line-height:1.45; color:inherit;
}
.clinic-access-notice__text strong{ font-weight:700; color:#7a4e00; }
@media (max-width: 600px){
    .clinic-access-notice{ align-items:flex-start; padding:10px 12px; }
    .clinic-access-notice__text{ font-size:13px; }
}
@media print{
    .clinic-access-notice{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Comunicados (super admin) — envío de correos formales a grupos
   Prefix: com-  ·  Paleta teal (var(--primary) #199c82)
   ═══════════════════════════════════════════════════════════════════ */
.com-wrap { display:flex; flex-direction:column; gap:18px; padding-bottom:40px; width:100%; max-width:960px; margin-inline:auto; }

/* Head */
.com-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--bg-card)), var(--bg-card));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px; }
.com-head__left { display:flex; align-items:center; gap:14px; }
.com-head__ico { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; }
.com-head__title { font-size:1.15rem; font-weight:700; color:var(--text-primary); margin:0 0 3px; }
.com-head__sub { font-size:.82rem; color:var(--text-muted); margin:0; line-height:1.5; max-width:60ch; }
.com-head__chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }

/* Alerts */
.com-alert { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius); font-size:.85rem; font-weight:500; }
.com-alert svg { flex-shrink:0; }
.com-alert--ok { background:rgba(25,156,130,.1); color:#0f766e; border:1px solid rgba(25,156,130,.28); }
.com-alert--err { background:rgba(239,68,68,.08); color:#b91c1c; border:1px solid rgba(239,68,68,.25); }

/* Form + cards */
.com-form { display:flex; flex-direction:column; gap:18px; }
.com-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; }
.com-card__hd { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.com-card__num { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; font-size:.8rem; font-weight:700; }
.com-card__title { font-size:.95rem; font-weight:700; color:var(--text-primary); margin:0 0 2px; }
.com-card__hint { font-size:.78rem; color:var(--text-muted); margin:0; line-height:1.5; }

/* Group radio cards */
.com-groups { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.com-group { position:relative; cursor:pointer; display:block; }
.com-group__radio { position:absolute; opacity:0; width:0; height:0; }
.com-group__box { display:flex; flex-direction:column; gap:8px; height:100%; box-sizing:border-box; padding:16px;
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg-card-hover);
  transition:border-color .15s, box-shadow .15s, background .15s; }
.com-group__top { display:flex; align-items:center; justify-content:space-between; }
.com-group__ico { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.com-group__check { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:#fff; background:transparent; transition:all .15s; }
.com-group__name { font-size:.85rem; font-weight:600; color:var(--text-primary); }
.com-group__count { font-size:.75rem; color:var(--text-muted); font-weight:500; }
.com-group:hover .com-group__box { border-color:color-mix(in srgb, var(--primary) 40%, transparent); }
.com-group__radio:checked + .com-group__box { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, var(--bg-card)); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.com-group__radio:checked + .com-group__box .com-group__check { background:var(--primary); border-color:var(--primary); }
.com-group__radio:focus-visible + .com-group__box { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }

/* Summary */
.com-summary { display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 14px; border-radius:var(--radius); background:color-mix(in srgb, var(--primary) 8%, transparent); color:var(--text-secondary); font-size:.83rem; }
.com-summary svg { color:var(--primary); flex-shrink:0; }
.com-summary strong { color:var(--text-primary); font-weight:700; }

/* Fields */
.com-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.com-field:last-child { margin-bottom:0; }
.com-label { font-size:.78rem; font-weight:600; color:var(--text-secondary); }
.com-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.com-input, .com-textarea { width:100%; box-sizing:border-box; background:var(--bg-card-hover); border:1px solid var(--border); border-radius:var(--radius); padding:10px 13px; font-size:.9rem; color:var(--text-primary); font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.com-input { height:44px; }
.com-textarea { resize:vertical; min-height:220px; line-height:1.6; font-family:"SF Mono","Fira Code",ui-monospace,monospace; font-size:.82rem; }
.com-input:focus, .com-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.com-input::placeholder, .com-textarea::placeholder { color:var(--text-muted); }
.com-field-error { font-size:.78rem; color:#dc2626; margin:0; }

/* Template button */
.com-tpl-btn { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; font-size:.78rem; font-weight:600; color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, transparent); border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius:var(--radius); cursor:pointer; transition:all .15s; }
.com-tpl-btn:hover { background:color-mix(in srgb, var(--primary) 15%, transparent); }

/* Actions */
.com-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.com-btn { display:inline-flex; align-items:center; gap:8px; padding:0 22px; height:46px; border-radius:var(--radius); font-size:.9rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .15s; }
.com-btn--ghost { background:var(--bg-card); color:var(--text-secondary); border-color:var(--border); }
.com-btn--ghost:hover { border-color:color-mix(in srgb, var(--primary) 40%, transparent); color:var(--primary); }
.com-btn--send { background:var(--primary); color:#fff; }
.com-btn--send:hover { background:color-mix(in srgb, var(--primary) 88%, #000); box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 30%, transparent); transform:translateY(-1px); }

/* Modal vista previa */
.com-modal { position:fixed; inset:0; z-index:100050; display:flex; align-items:center; justify-content:center; padding:20px; }
.com-modal[hidden] { display:none; }
.com-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); }
.com-modal__panel { position:relative; width:100%; max-width:680px; max-height:90vh; display:flex; flex-direction:column; background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.com-modal__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--bg-card-hover); }
.com-modal__title { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:var(--text-primary); }
.com-modal__title svg { color:var(--primary); }
.com-modal__close { width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.com-modal__close:hover { background:var(--border); color:var(--text-primary); }
.com-modal__body { padding:0; overflow:auto; background:#f1f5f9; }
.com-modal__frame { width:100%; height:60vh; min-height:420px; border:none; display:block; background:#f1f5f9; }

/* Responsive */
@media (max-width: 720px) {
  .com-groups { grid-template-columns:1fr; }
  .com-head { padding:16px 18px; }
  .com-card { padding:18px 16px; }
  .com-actions { flex-direction:column-reverse; }
  .com-btn { width:100%; justify-content:center; }
}
/* Auto-zoom guard (Regla 8): inputs/textarea >=16px en touch/portrait */
@media (max-width: 1024px) {
  .com-input, .com-textarea { font-size:16px; }
}