/*
 * ═══════════════════════════════════════════════════════════════
 *  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;
    --primary-light: #e6f7f3;
    --primary-dark: #116d5b;
    --primary-bg: rgba(25, 156, 130, 0.06);

    /* 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;
}

.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;
}

.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(25,156,130,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5eead4;
    box-shadow: 0 4px 12px rgba(25,156,130,.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(110,231,183,.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(25,156,130,.4);
}
.sidebar-profile__initials {
    background: rgba(25,156,130,.15);
    color: #5eead4;
    font-weight: 700;
    font-size: 16px;
    border: 2px solid rgba(25,156,130,.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(110,231,183,.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(25,156,130,.1);
    border-color: rgba(25,156,130,.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(110,231,183,.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;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    flex-shrink: 0;
}

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

/* Desktop sidebar collapse toggle */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
    padding: 0;
}
.sidebar-collapse-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* 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 on mobile (hamburger handles it) */
@media (max-width: 768px) {
    .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) ──────────────────────────────── */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 99;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

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

/* ─── 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;
}

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

/* ─── Sidebar Overlay (Mobile) ──────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

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

/* ─── 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; }
}
    color: var(--success);
}

.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);
}

.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;
}

/* ═══════════════════════════════════════════════════════════════
 *  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;
}

/* ── 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 ──────────────────────────────────────────────── */
.pat-pagination {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

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

/* ── 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 ─────────────────────────────────────────── */
@keyframes pat-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

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

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

.pat-skel {
    border-radius: 6px;
    background: linear-gradient(90deg, #e8ecef 25%, #f4f6f8 50%, #e8ecef 75%);
    background-size: 600px 100%;
    animation: pat-shimmer 1.4s infinite linear;
    display: block;
}

.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 sin wrap */
    .pat-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .pat-filter-tabs::-webkit-scrollbar { display: none; }
}

/* ── 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;
        flex-direction: column;
        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: tabla → tarjetas (769px–1023.98px) ──────────────── */
@media (min-width: 769px) 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;
        flex-direction: column;
        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;
    }
}

/* ═══════════════════════════════════════════════════════════════
 *  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; }

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

.usr-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
}

/* 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; }
.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--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;
}

.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--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: 4px; margin-top: 4px; }

.usr-strength__bar {
    flex: 1; height: 3px;
    border-radius: 2px;
    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 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.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; }

.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);
}

.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__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; }

/* ── 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;
}

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

/* ── Responsive: ≤768px ──────────────────────────────────────── */
@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; }

    /* Formulario */
    .usr-page { max-width: 100%; }
    .usr-form-grid { grid-template-columns: 1fr; }
    .usr-form-group--full { grid-column: 1; }
    .usr-role-grid { grid-template-columns: 1fr; gap: 10px; }
    .usr-actions { flex-direction: column-reverse; }
    .usr-actions .ep-btn { width: 100%; justify-content: center; }
    .usr-avatar-preview { flex-direction: column; text-align: center; align-items: 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: 16px; }
    .usr-form-grid { gap: 14px; }
    .usr-toggle-row { padding: 16px 20px; }
    .usr-role-grid { padding: 16px; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
 *  NCF — Nueva Nota Clínica (Clinical Notes Create)
 *  Full redesign — modern, responsive, animation-ready
 * ═══════════════════════════════════════════════════════════════ */

/* ── Entry Animation ─────────────────────────────────────────── */
@keyframes ncf-slide-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ncf-page > *:nth-child(1) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .04s; }
.ncf-page > *:nth-child(2) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .08s; }
.ncf-page > *:nth-child(3) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .12s; }
.ncf-page > *:nth-child(4) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .16s; }
.ncf-page > *:nth-child(5) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .20s; }
.ncf-page > *:nth-child(6) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .24s; }
.ncf-page > *:nth-child(7) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .28s; }
.ncf-page > *:nth-child(8) { animation: ncf-slide-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .32s; }

.ncf-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ncf-page > form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Page Header ─────────────────────────────────────────────── */
.ncf-hero {
    background: var(--primary);
    border-radius: var(--radius-lg, 14px);
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.ncf-hero::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    top: -100px;
    right: -60px;
    pointer-events: none;
}
.ncf-hero::after {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    bottom: -60px;
    left: 30%;
    pointer-events: none;
}
.ncf-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.ncf-hero-text { flex: 1; min-width: 0; }
.ncf-hero-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: 4px;
}
.ncf-hero-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.25;
}
.ncf-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,.75);
    margin: 0;
    line-height: 1.5;
}
.ncf-hero-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.ncf-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
    background: rgba(255,255,255,.1);
    transition: background .2s, border-color .2s;
    white-space: nowrap;
}
.ncf-btn-back:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.ncf-btn-back svg { width: 15px; height: 15px; }

/* ── Session Keep-Alive Indicator ────────────────────────────── */
.ncf-session-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 12px;
    color: var(--text-muted, #8492a6);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}
.ncf-session-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ncf-session-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
    flex-shrink: 0;
    animation: ncf-pulse-dot 2.5s ease-in-out infinite;
}
@keyframes ncf-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.12); }
}
.ncf-session-dot--warn {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
    animation-name: ncf-pulse-dot-warn;
}
@keyframes ncf-pulse-dot-warn {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(245,158,11,.12); }
}
.ncf-session-text { font-weight: 500; }
.ncf-session-text strong { font-weight: 700; color: var(--text-secondary, #475569); }
.ncf-session-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ncf-session-timer {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    background: var(--border-light, #f1f5f9);
    padding: 3px 10px;
    border-radius: 6px;
}
.ncf-draft-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #f59e0b;
    opacity: 0;
    transition: opacity .3s;
}
.ncf-draft-indicator.visible { opacity: 1; }
.ncf-draft-indicator svg { width: 12px; height: 12px; }

/* ── Wizard Step Indicator ───────────────────────────────────── */
.ncf-wizard-card {
    background: var(--bg-card, #fff);
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border, #e2e8f0);
    padding: 20px 28px 16px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.ncf-steps {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ncf-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    max-width: 160px;
    cursor: pointer;
    transition: opacity .2s;
}
.ncf-step-item:hover { opacity: .85; }
.ncf-step-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid var(--border, #e2e8f0);
    background: var(--bg-card, #fff);
    color: var(--text-muted, #94a3b8);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    z-index: 1;
    position: relative;
}
.ncf-step-circle svg { width: 18px; height: 18px; }
.ncf-step-item.active .ncf-step-circle {
    background: var(--primary);
    border-color: var(--primary, #199c82);
    color: #fff;
    box-shadow: 0 4px 16px rgba(25,156,130,.38);
    transform: scale(1.05);
}
.ncf-step-item.done .ncf-step-circle {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34,197,94,.25);
}
.ncf-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: color .3s;
}
.ncf-step-item.active .ncf-step-label { color: var(--primary, #199c82); font-weight: 700; }
.ncf-step-item.done  .ncf-step-label  { color: #22c55e; }
.ncf-connector {
    flex: 1;
    height: 3px;
    background: var(--border, #e2e8f0);
    margin-bottom: 22px;
    border-radius: 2px;
    transition: background .4s;
    position: relative;
    overflow: hidden;
}
.ncf-connector.done { background: #22c55e; }
.ncf-connector.done::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: ncf-connector-shine 1.5s ease-out;
}
@keyframes ncf-connector-shine {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ── Form Panel ──────────────────────────────────────────────── */
.ncf-panel         { display: none; }
.ncf-panel.active  { display: block; animation: ncf-panel-in .35s ease-out; }
@keyframes ncf-panel-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Card Shell ──────────────────────────────────────────────── */
.ncf-card {
    background: var(--bg-card, #fff);
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow .25s;
}
.ncf-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ncf-card-head {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ncf-card-head--blue   { background: #3b82f6; }
.ncf-card-head--teal   { background: var(--primary); }
.ncf-card-head--purple { background: #8b5cf6; }
.ncf-card-head-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}
.ncf-card-head-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.ncf-card-body { padding: 24px; }

/* ── Grid ────────────────────────────────────────────────────── */
.ncf-grid       { display: grid; gap: 18px; }
.ncf-col2       { grid-template-columns: 1fr 1fr; }
.ncf-col3       { grid-template-columns: 1fr 1fr 1fr; }
.ncf-full       { grid-column: 1 / -1; }
.ncf-span2      { grid-column: span 2; }

/* ── Fields ──────────────────────────────────────────────────── */
.ncf-field         { display: flex; flex-direction: column; gap: 6px; }
.ncf-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ncf-label svg    { width: 13px; height: 13px; opacity: .7; flex-shrink: 0; }
.ncf-req          { color: var(--error, #ef4444); }
.ncf-input,
.ncf-select,
.ncf-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-family, 'Inter', sans-serif);
    color: var(--text-primary, #1e293b);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.ncf-input:focus,
.ncf-select:focus,
.ncf-textarea:focus {
    outline: none;
    border-color: var(--primary, #199c82);
    box-shadow: 0 0 0 3px rgba(25,156,130,.12);
}
.ncf-input.err, .ncf-select.err, .ncf-textarea.err {
    border-color: var(--error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.ncf-textarea       { resize: vertical; min-height: 100px; line-height: 1.65; }
.ncf-textarea-mono  {
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 13.5px;
    min-height: 280px;
    padding: 16px 18px;
    line-height: 1.7;
    background: #fafbfc;
    border-color: var(--border, #e2e8f0);
}
.ncf-textarea-mono:focus { background: #fff; }
.ncf-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
}
.ncf-hint { font-size: 11px; color: var(--text-muted, #8492a6); margin-top: 2px; }
.ncf-hint-err { font-size: 11px; color: var(--error, #ef4444); margin-top: 2px; font-weight: 500; }

/* Sources panel for clinical note templates */
.ncf-sources-toggle { margin-top: 6px; position: relative; }
.ncf-sources-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-body);
    font-size: .68rem; font-weight: 500; color: var(--text-muted);
    cursor: pointer; font-family: var(--font-family);
    transition: all .15s;
}
.ncf-sources-btn:hover { border-color: #199c82; color: #199c82; }
.ncf-sources-panel {
    position: absolute; top: calc(100% + 4px); left: 0;
    z-index: 30; width: 340px; max-height: 320px;
    overflow-y: auto; scrollbar-width: thin;
    padding: 12px 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.ncf-sources-intro {
    font-size: .7rem; color: var(--text-secondary); line-height: 1.5;
    margin: 0 0 8px; font-family: var(--font-family);
}
.ncf-sources-list { display: flex; flex-direction: column; gap: 6px; }
.ncf-source-item {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 6px 8px; background: var(--bg-body);
    border: 1px solid var(--border-light); border-radius: 6px;
}
.ncf-source-badge {
    flex-shrink: 0; padding: 2px 6px; border-radius: 4px;
    font-size: .58rem; font-weight: 700; letter-spacing: .03em;
    background: rgba(25,156,130,.1); color: #199c82;
    font-family: var(--font-family);
}
.ncf-source-badge--teal { background: rgba(13,148,136,.1); color: #199c82; }
.ncf-source-badge--amber { background: rgba(245,158,11,.1); color: #b45309; }
.ncf-source-item strong {
    display: block; font-size: .68rem; font-weight: 600;
    color: var(--text-primary); margin-bottom: 1px;
    font-family: var(--font-family);
}
.ncf-source-item span {
    display: block; font-size: .62rem; color: var(--text-muted);
    line-height: 1.35; font-family: var(--font-family);
}
.ncf-sources-disclaimer {
    font-size: .6rem; color: #94a3b8; line-height: 1.35;
    margin: 8px 0 0; padding-top: 6px;
    border-top: 1px solid var(--border-light);
    font-style: italic; font-family: var(--font-family);
}
@media (max-width: 600px) {
    .ncf-sources-panel {
        width: calc(100vw - 48px); left: -8px;
        max-height: 260px;
    }
}

/* Clinical notes editor — edit/preview with section nav */
.ncf-notes-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.ncf-notes-tabs {
    display: flex; gap: 2px; background: var(--bg-body);
    border-radius: 8px; padding: 2px; border: 1px solid var(--border-light);
}
.ncf-notes-tab {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 6px; border: none;
    background: transparent; font-size: .74rem; font-weight: 500;
    color: var(--text-muted); cursor: pointer;
    font-family: var(--font-family); transition: all .15s;
}
.ncf-notes-tab:hover { color: var(--text-primary); }
.ncf-notes-tab--active {
    background: var(--bg-card); color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600;
}
.ncf-notes-sections {
    display: flex; gap: 3px; overflow-x: auto;
    scrollbar-width: none; flex: 1; min-width: 0;
    justify-content: flex-end;
}
.ncf-notes-sections::-webkit-scrollbar { display: none; }
.ncf-notes-jump {
    display: inline-flex; align-items: center;
    padding: 3px 8px; border-radius: 4px;
    border: 1px solid var(--border-light); background: var(--bg-card);
    font-size: .62rem; font-weight: 500; color: var(--text-muted);
    cursor: pointer; font-family: var(--font-family);
    white-space: nowrap; transition: all .12s;
}
.ncf-notes-jump:hover { border-color: var(--primary); color: var(--primary); }

/* Editor textarea — document-like */
.ncf-notes-editor {
    font-family: var(--font-family) !important;
    font-size: 13.5px !important; line-height: 1.75 !important;
    padding: 20px 22px !important; min-height: 400px;
    background: #fefefe !important; border-radius: 8px !important;
    color: var(--text-primary) !important;
    resize: vertical;
}
.ncf-notes-editor:focus { background: #fff !important; }

/* Preview panel */
.ncf-notes-preview {
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px; min-height: 400px; max-height: 600px;
    overflow-y: auto; scrollbar-width: thin;
}
.ncf-notes-preview__body { padding: 24px 28px; }
.ncf-notes-preview__empty {
    padding: 60px 20px; text-align: center;
    color: var(--text-muted); font-size: .82rem;
    font-family: var(--font-family);
}

/* Preview elements */
.ncf-pv-section {
    font-size: .88rem; font-weight: 600; color: var(--text-primary);
    margin: 18px 0 8px; padding-bottom: 5px;
    border-bottom: 1px solid var(--border-light);
    font-family: var(--font-family);
}
.ncf-pv-section:first-child { margin-top: 0; }
.ncf-pv-num { color: var(--primary); font-weight: 700; }

.ncf-pv-field {
    display: flex; align-items: baseline; gap: 6px;
    padding: 4px 0; font-size: .82rem;
    font-family: var(--font-family);
}
.ncf-pv-label {
    font-weight: 500; color: var(--text-secondary);
    flex-shrink: 0; min-width: 0;
}
.ncf-pv-label::after { content: ':'; }
.ncf-pv-value { color: var(--text-primary); font-weight: 400; }
.ncf-pv-value--empty {
    color: var(--text-muted); font-style: italic;
    font-size: .76rem; background: var(--bg-body);
    padding: 1px 8px; border-radius: 4px;
}

.ncf-pv-text {
    font-size: .82rem; color: var(--text-secondary);
    line-height: 1.6; padding: 2px 0;
    font-family: var(--font-family);
}

.ncf-pv-placeholder {
    font-size: .8rem; color: var(--primary);
    font-style: italic; padding: 6px 12px;
    background: rgba(13,148,136,.04);
    border-left: 2px solid rgba(13,148,136,.3);
    border-radius: 0 4px 4px 0; margin: 4px 0;
    font-family: var(--font-family);
}

.ncf-pv-check {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 0; font-size: .82rem;
    color: var(--text-secondary); font-family: var(--font-family);
}
.ncf-pv-check--done { color: var(--text-muted); text-decoration: line-through; }
.ncf-pv-checkbox {
    width: 16px; height: 16px; border-radius: 3px;
    border: 1.5px solid var(--border); display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--bg-card);
}
.ncf-pv-check--done .ncf-pv-checkbox {
    background: var(--primary); border-color: var(--primary); color: #fff;
}

.ncf-pv-spacer { height: 8px; }

@media (max-width: 600px) {
    .ncf-notes-toolbar { flex-direction: column; align-items: flex-start; }
    .ncf-notes-sections { justify-content: flex-start; width: 100%; }
    .ncf-notes-editor { min-height: 300px; padding: 14px 16px !important; font-size: 13px !important; }
    .ncf-notes-preview__body { padding: 16px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
   CLINICAL WORKSHEET (Hoja Clínica) — guided, document-like editor
   ══════════════════════════════════════════════════════════════════════ */
.ncf-ws {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ncf-ws:focus-within {
    border-color: var(--primary, #199c82);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.08), 0 4px 20px rgba(15, 23, 42, 0.05);
}

/* ── Header ────────────────────────────────────────────────────── */
.ncf-ws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.ncf-ws-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ncf-ws-header-txt { min-width: 0; }
.ncf-ws-badge {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--primary-bg, rgba(25,156,130,0.06));
    color: var(--primary, #199c82);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(25, 156, 130, 0.12);
}
.ncf-ws-badge svg { width: 18px; height: 18px; }
.ncf-ws-title {
    font-size: .92rem; font-weight: 700; color: var(--text-primary, #1e293b);
    letter-spacing: -0.01em; line-height: 1.2;
}
.ncf-ws-sub {
    font-size: .7rem; color: var(--text-muted, #94a3b8);
    margin-top: 2px; line-height: 1.4;
}
.ncf-ws-pill {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-light, #f1f5f9);
    font-family: var(--font-family, 'Inter', sans-serif);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: all .22s ease;
}
.ncf-ws-pill.is-ok {
    background: var(--primary-bg, rgba(25,156,130,0.06));
    border-color: rgba(25, 156, 130, 0.22);
}
.ncf-ws-pill-num { font-size: .78rem; font-weight: 700; color: var(--text-primary, #1e293b); }
.ncf-ws-pill.is-ok .ncf-ws-pill-num { color: var(--primary-dark, #116d5b); }
.ncf-ws-pill-lbl { font-size: .62rem; font-weight: 600; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .04em; }

/* ── Progress track ────────────────────────────────────────────── */
.ncf-ws-track {
    position: relative;
    height: 3px;
    background: var(--border-light, #f1f5f9);
    overflow: hidden;
}
.ncf-ws-track-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--primary, #199c82), #26c4a3);
    transition: width .35s cubic-bezier(.16, 1, .3, 1);
}

/* ── Body: gutter + lined "paper" ───────────────────────────────── */
.ncf-ws-body {
    display: flex;
    min-height: 380px;
    max-height: 640px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.ncf-ws-body::-webkit-scrollbar { width: 8px; }
.ncf-ws-body::-webkit-scrollbar-track { background: transparent; }
.ncf-ws-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; border: 2px solid #fff; }
.ncf-ws-body::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

.ncf-ws-gutter {
    width: 52px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #fbfcfd 0%, #f6f8fb 100%);
    border-right: 1.5px solid rgba(239, 68, 68, 0.12);
    position: relative;
}
.ncf-ws-gutter::before {
    content: '';
    position: absolute;
    right: -1px; top: 0;
    width: 1px; height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(239, 68, 68, 0.18) 18%, rgba(239, 68, 68, 0.18) 82%, transparent 100%);
}

.ncf-ws-doc {
    flex: 1;
    min-width: 0;
    padding: 22px 28px 26px;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 35px,
        rgba(226, 232, 240, 0.6) 35px,
        rgba(226, 232, 240, 0.6) 36px
    );
    background-position: 0 16px;
    font-family: var(--font-family, 'Inter', sans-serif);
    color: var(--text-primary, #1e293b);
}

/* ── Rows (generic) ─────────────────────────────────────────────── */
.ncf-ws-row {
    position: relative;
    padding: 2px 0;
    scroll-margin-top: 120px;
}
.ncf-ws-row--blank { height: 12px; padding: 0; }
.ncf-ws-row--section { padding: 10px 0 6px; }
.ncf-ws-row--section:not(:first-child) { margin-top: 14px; }

/* ── Section heading ────────────────────────────────────────────── */
.ncf-ws-section {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1.5px solid var(--border-light, #f1f5f9);
    padding-bottom: 6px;
}
.ncf-ws-section-num {
    font-size: .85rem;
    font-weight: 800;
    color: var(--primary, #199c82);
    letter-spacing: -0.01em;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ncf-ws-section-input {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    font-family: inherit;
    font-size: .88rem; font-weight: 700;
    color: var(--text-primary, #1e293b);
    letter-spacing: -0.005em;
    text-transform: uppercase;
    padding: 4px 0;
    outline: none;
    min-height: 30px;
}
.ncf-ws-section-input:focus { color: var(--primary-dark, #116d5b); }

/* ── Lettered item ──────────────────────────────────────────────── */
.ncf-ws-letter,
.ncf-ws-letter-fields {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    align-items: flex-start;
}
.ncf-ws-letter-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px;
    font-size: .78rem; font-weight: 700;
    color: var(--primary, #199c82);
    padding: 6px 0 0;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ncf-ws-letter-input {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    font-family: inherit;
    font-size: .85rem; font-weight: 500;
    color: var(--text-primary, #1e293b);
    line-height: 1.65;
    padding: 4px 0;
    outline: none;
    border-bottom: 1.5px dashed transparent;
    transition: border-color .18s ease;
}
.ncf-ws-letter-input:focus { border-bottom-color: var(--primary, #199c82); }
.ncf-ws-letter-input::placeholder { color: var(--text-muted, #94a3b8); font-style: italic; font-weight: 400; }

/* ── Fields grid (label + input) ────────────────────────────────── */
.ncf-ws-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 6px 0;
}
.ncf-ws-letter-fields .ncf-ws-fields { padding: 0; flex: 1; min-width: 0; }

.ncf-ws-field {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 180px;
    flex: 1 1 210px;
    padding: 4px 0;
    cursor: text;
    position: relative;
}
.ncf-ws-field-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .002em;
}
.ncf-ws-field-label::after { content: ':'; color: var(--text-muted, #94a3b8); margin-left: 1px; }
.ncf-ws-field-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    padding: 2px 2px 4px;
    outline: none;
    border-bottom: 1.5px dashed var(--border, #e2e8f0);
    transition: border-color .18s ease, background .18s ease;
    line-height: 1.5;
}
.ncf-ws-field-input:hover { border-bottom-color: var(--text-muted, #94a3b8); }
.ncf-ws-field-input:focus {
    border-bottom-color: var(--primary, #199c82);
    border-bottom-style: solid;
}
.ncf-ws-field-input::placeholder { color: #cbd5e1; font-weight: 400; }
.ncf-ws-field.is-empty .ncf-ws-field-input {
    border-bottom-color: rgba(245, 158, 11, 0.28);
}
.ncf-ws-field.is-empty .ncf-ws-field-input:focus {
    border-bottom-color: var(--primary, #199c82);
}

/* ── Placeholder hint (guided prompt + response) ───────────────── */
.ncf-ws-hint {
    margin: 10px 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(25,156,130,0.04), rgba(25,156,130,0.02));
    border: 1px solid rgba(25, 156, 130, 0.16);
    border-left: 3px solid var(--primary, #199c82);
    border-radius: 0 10px 10px 0;
    transition: all .22s ease;
}
.ncf-ws-hint.is-filled {
    background: #fff;
    border-left-color: rgba(25, 156, 130, 0.35);
    border-color: var(--border-light, #f1f5f9);
}
.ncf-ws-hint-prompt {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--primary-dark, #116d5b);
    margin-bottom: 8px;
    line-height: 1.45;
    letter-spacing: .002em;
}
.ncf-ws-hint-prompt svg {
    flex-shrink: 0;
    color: var(--primary, #199c82);
    opacity: .8;
    margin-top: 2px;
}
.ncf-ws-hint-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    line-height: 1.6;
    padding: 4px 0;
    outline: none;
    resize: none;
    min-height: 40px;
    overflow: hidden;
    border-bottom: 1.5px dashed transparent;
    transition: border-color .18s ease;
}
.ncf-ws-hint-input:focus { border-bottom-color: rgba(25, 156, 130, 0.35); }
.ncf-ws-hint-input::placeholder {
    color: var(--text-muted, #94a3b8);
    font-style: italic;
    font-weight: 400;
}

/* ── Checkbox ───────────────────────────────────────────────────── */
.ncf-ws-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
}
.ncf-ws-check-native {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.ncf-ws-check-box {
    width: 20px; height: 20px;
    border-radius: 5px;
    border: 1.8px solid var(--border, #e2e8f0);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s ease;
}
.ncf-ws-check-box svg {
    width: 13px; height: 13px;
    color: #fff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
}
.ncf-ws-check:hover .ncf-ws-check-box { border-color: var(--primary, #199c82); }
.ncf-ws-check.is-done .ncf-ws-check-box {
    background: var(--primary, #199c82);
    border-color: var(--primary, #199c82);
}
.ncf-ws-check.is-done .ncf-ws-check-box svg { opacity: 1; transform: scale(1); }
.ncf-ws-check-input {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    font-family: inherit;
    font-size: .85rem; font-weight: 500;
    color: var(--text-primary, #1e293b);
    padding: 2px 0;
    outline: none;
    line-height: 1.5;
    border-bottom: 1.5px dashed transparent;
    transition: border-color .18s ease;
}
.ncf-ws-check-input:focus { border-bottom-color: var(--primary, #199c82); }
.ncf-ws-check.is-done .ncf-ws-check-input {
    color: var(--text-muted, #94a3b8);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

/* ── Plain text line ───────────────────────────────────────────── */
.ncf-ws-textline {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    padding: 4px 0;
    outline: none;
    line-height: 1.65;
    border-bottom: 1.5px dashed transparent;
    transition: border-color .18s ease;
}
.ncf-ws-textline:focus { border-bottom-color: rgba(25, 156, 130, 0.35); }
.ncf-ws-textline::placeholder { color: #cbd5e1; font-weight: 400; }

/* ── Empty state ───────────────────────────────────────────────── */
.ncf-ws-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
}
.ncf-ws-empty-ico {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--primary-bg, rgba(25,156,130,0.06));
    color: var(--primary, #199c82);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.ncf-ws-empty-ico svg { width: 24px; height: 24px; }
.ncf-ws-empty-title {
    font-size: .95rem; font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 6px;
}
.ncf-ws-empty-desc {
    font-size: .8rem; line-height: 1.5;
    margin: 0 auto 16px;
    max-width: 380px;
}
.ncf-ws-empty-desc em {
    font-style: normal;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}
.ncf-ws-empty-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--primary, #199c82);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
    box-shadow: 0 2px 8px rgba(25, 156, 130, 0.25);
}
.ncf-ws-empty-cta:hover {
    background: var(--primary-dark, #116d5b);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 156, 130, 0.32);
}

/* ── Footer ────────────────────────────────────────────────────── */
.ncf-ws-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    background: #fafbfc;
    border-top: 1px solid var(--border-light, #f1f5f9);
    font-family: var(--font-family, 'Inter', sans-serif);
    flex-wrap: wrap;
}
.ncf-ws-footer-left {
    display: flex; align-items: center; gap: 7px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
}
.ncf-ws-footer-left svg { width: 14px; height: 14px; color: var(--primary, #199c82); opacity: .7; flex-shrink: 0; }
.ncf-ws-footer-count {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-light, #f1f5f9);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Plain textarea wrap tweaks ─────────────────────────────────── */
.ncf-ws-plain-wrap .ncf-notes-editor {
    border-radius: 14px;
    border-width: 1.5px;
    min-height: 420px;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 27px,
        rgba(226, 232, 240, 0.45) 27px,
        rgba(226, 232, 240, 0.45) 28px
    ) !important;
    background-position: 0 14px !important;
    padding: 18px 22px !important;
    line-height: 28px !important;
    font-size: 13.5px !important;
}
.ncf-ws-plain-wrap .ncf-notes-editor:focus { background-color: #fff !important; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ncf-ws-doc { padding: 18px 20px 22px; }
    .ncf-ws-field { min-width: 150px; flex-basis: 160px; }
}

@media (max-width: 640px) {
    .ncf-ws-header { padding: 12px 14px; gap: 10px; }
    .ncf-ws-badge { width: 32px; height: 32px; border-radius: 9px; }
    .ncf-ws-badge svg { width: 16px; height: 16px; }
    .ncf-ws-title { font-size: .86rem; }
    .ncf-ws-sub { font-size: .68rem; }
    .ncf-ws-header-right { display: none; }
    /* Let the page scroll naturally on mobile instead of a nested scroll zone */
    .ncf-ws-body { min-height: 300px; max-height: none; overflow: visible; }
    .ncf-ws-gutter { width: 32px; }
    .ncf-ws-doc {
        padding: 16px 14px 20px;
        background-image: repeating-linear-gradient(
            transparent,
            transparent 31px,
            rgba(226, 232, 240, 0.5) 31px,
            rgba(226, 232, 240, 0.5) 32px
        );
    }
    .ncf-ws-fields { gap: 10px 12px; }
    .ncf-ws-field { min-width: 100%; flex-basis: 100%; }
    .ncf-ws-letter-fields { flex-direction: column; }
    .ncf-ws-letter-fields .ncf-ws-letter-tag { padding: 0 0 4px; }
    .ncf-ws-section-input { font-size: .82rem; }
    .ncf-ws-hint { margin: 8px 0; padding: 10px 12px; }
    .ncf-ws-hint-prompt { font-size: .72rem; }
    .ncf-ws-footer { padding: 9px 14px; }
    .ncf-ws-footer-count { display: none; }
}

@media (max-width: 400px) {
    .ncf-ws-gutter { width: 22px; }
    .ncf-ws-doc { padding: 14px 12px 18px; }
    .ncf-ws-field-label { font-size: .74rem; }
    .ncf-ws-field-input,
    .ncf-ws-letter-input,
    .ncf-ws-textline,
    .ncf-ws-check-input { font-size: .82rem; }
}

/* Input prefix group */
.ncf-igroup          { display: flex; align-items: stretch; }
.ncf-igroup-pre {
    display: flex;
    align-items: center;
    padding: 0 13px;
    background: var(--border-light, #f1f5f9);
    border: 1.5px solid var(--border, #e2e8f0);
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}
.ncf-igroup .ncf-input { border-radius: 0 8px 8px 0; }

/* File input */
.ncf-file-zone {
    border: 2px dashed var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background .25s;
    background: #fafbfc;
    position: relative;
}
.ncf-file-zone:hover { border-color: var(--primary, #199c82); background: #f0fdf4; }
.ncf-file-zone.dragover { border-color: var(--primary, #199c82); background: #d1fae5; }
.ncf-file-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.ncf-file-icon { margin-bottom: 8px; color: var(--text-muted, #94a3b8); }
.ncf-file-icon svg { width: 32px; height: 32px; }
.ncf-file-text { font-size: 13px; color: var(--text-muted, #8492a6); line-height: 1.5; }
.ncf-file-text strong { color: var(--primary, #199c82); }
.ncf-file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ncf-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark, #116d5b);
}
.ncf-file-chip svg { width: 12px; height: 12px; }

/* ── DateTime Trigger ────────────────────────────────────────── */
.ncdtp-trigger {
    cursor: pointer !important;
    background: #fff !important;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Custom DateTime Picker ──────────────────────────────────── */
.ncdtp-backdrop {
    display: none; position: fixed; inset: 0; z-index: 9990;
}
.ncdtp-backdrop.open { display: block; }
.ncdtp-panel {
    display: none; position: fixed; z-index: 9999; background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 56px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.10);
    border: 1px solid #e2e8f0;
    flex-direction: row; overflow: hidden;
    width: 445px; height: 375px;
}
.ncdtp-panel.open { display: flex; }
.ncdtp-cal {
    padding: 16px 16px 12px; flex: 0 0 295px;
    border-right: 1px solid #f1f5f9;
    display: flex; flex-direction: column; overflow: hidden;
}
.ncdtp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ncdtp-month-label { font-weight: 700; font-size: 15px; color: #1e293b; }
.ncdtp-nav {
    background: none; border: none; color: #64748b; cursor: pointer;
    padding: 6px 9px; border-radius: 8px; display: flex; align-items: center;
    transition: background .15s;
}
.ncdtp-nav:hover { background: #f1f5f9; color: #1e293b; }
.ncdtp-nav svg   { width: 14px; height: 14px; }
.ncdtp-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; margin-bottom: 4px;
}
.ncdtp-weekdays span { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; padding: 3px 0; }
.ncdtp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.ncdtp-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 13px; cursor: pointer; transition: all .15s;
    color: #1e293b; border: none; background: none; width: 100%; padding: 0;
}
.ncdtp-day:hover:not(.other-month):not(.selected) { background: #f0fdf4; color: var(--primary, #199c82); font-weight: 600; }
.ncdtp-day.today:not(.selected) { border: 2px solid var(--primary, #199c82); color: var(--primary, #199c82); font-weight: 700; }
.ncdtp-day.selected { background: var(--primary, #199c82); color: #fff !important; font-weight: 700; box-shadow: 0 2px 8px rgba(25,156,130,.35); }
.ncdtp-day.other-month { color: #cbd5e1; cursor: default; pointer-events: none; }
.ncdtp-cal-footer { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.ncdtp-link-btn { background: none; border: none; font-size: 13px; color: #64748b; cursor: pointer; padding: 4px 8px; border-radius: 6px; font-weight: 500; transition: background .15s; }
.ncdtp-link-btn:hover { background: #f1f5f9; }
.ncdtp-link-btn.primary { color: var(--primary, #199c82); font-weight: 600; }
.ncdtp-time { flex: 1; display: flex; flex-direction: column; background: #f8fafc; min-width: 0; overflow: hidden; }
.ncdtp-time-header { padding: 12px 12px 8px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid #e2e8f0; text-align: center; flex-shrink: 0; }
.ncdtp-time-cols { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.ncdtp-scroll-col { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 4px 0; }
.ncdtp-scroll-col::-webkit-scrollbar { display: none; }
.ncdtp-time-colon { display: flex; align-items: flex-start; justify-content: center; width: 14px; padding-top: 18px; font-size: 18px; font-weight: 700; color: #94a3b8; flex-shrink: 0; }
.ncdtp-item { display: flex; align-items: center; justify-content: center; height: 42px; font-size: 17px; font-weight: 600; color: #475569; cursor: pointer; transition: all .12s; border-radius: 8px; margin: 1px 4px; }
.ncdtp-item:hover:not(.selected) { background: #d1fae5; color: var(--primary-dark, #116d5b); }
.ncdtp-item.selected { background: var(--primary, #199c82); color: #fff; box-shadow: 0 2px 8px rgba(25,156,130,.30); }

/* ── Templates Button ────────────────────────────────────────── */
.ncf-tpl-open-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; border: none; transition: all .2s;
    background: rgba(255,255,255,.18);
    color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
    white-space: nowrap;
}
.ncf-tpl-open-btn:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
.ncf-tpl-open-btn svg { width: 14px; height: 14px; }

/* ── Templates Modal ─────────────────────────────────────────── */
.ncf-overlay {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(15,23,42,.65);
    align-items: flex-start; justify-content: center;
    padding: 24px 16px; overflow-y: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ncf-overlay.open { display: flex; animation: ncf-fade-in .25s; }
@keyframes ncf-fade-in { from { opacity:0; } to { opacity:1; } }
.ncf-modal {
    background: #fff; border-radius: var(--radius-lg);
    width: 100%; max-width: 820px;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.22);
    animation: ncf-slide-up .3s cubic-bezier(.22,1,.36,1);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    margin: auto;
}
@keyframes ncf-slide-up { from { transform: translateY(30px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.ncf-modal-head {
    padding: 24px 28px;
    background: var(--primary);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.ncf-modal-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
.ncf-modal-head h2 svg { width: 22px; height: 22px; }
.ncf-modal-x {
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: var(--touch-min); height: var(--touch-min); border-radius: 50%; cursor: pointer;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s; line-height: 1;
}
.ncf-modal-x:hover { background: rgba(255,255,255,.3); transform: scale(1.1); }
.ncf-modal-body { flex: 1; overflow-y: auto; padding: 0; min-height: 0; }

/* Templates modal — Save row */
.ncf-modal-save-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 28px; background: #fffbeb; border-bottom: 1px solid #fde68a;
}
.ncf-modal-save-row-text { font-size: 13px; color: #92400e; font-weight: 500; }
.ncf-modal-save-row-text strong { font-weight: 700; }
.ncf-modal-save-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
    background: #f59e0b;
    color: #fff; border: none; cursor: pointer;
    transition: opacity .2s, transform .2s; white-space: nowrap;
}
.ncf-modal-save-btn:hover { opacity: .9; transform: translateY(-1px); }
.ncf-modal-save-btn svg { width: 14px; height: 14px; }

/* Templates modal — Tabs */
.ncf-tpl-tabs {
    display: flex; border-bottom: 2px solid var(--border, #e2e8f0);
    padding: 0 28px; background: #f8fafc;
}
.ncf-tpl-tab {
    padding: 14px 20px; font-size: 13px; font-weight: 600;
    color: var(--text-muted, #8492a6); cursor: pointer;
    border-bottom: 2.5px solid transparent; margin-bottom: -2px;
    transition: color .2s, border-color .2s; white-space: nowrap;
    display: flex; align-items: center; gap: 7px;
    background: none; border-top: none; border-left: none; border-right: none;
}
.ncf-tpl-tab:hover { color: var(--text-primary, #1e293b); }
.ncf-tpl-tab.active { color: var(--primary, #199c82); border-bottom-color: var(--primary, #199c82); }
.ncf-tpl-tab svg { width: 15px; height: 15px; }
.ncf-tpl-tab-count {
    font-size: 10px; font-weight: 700;
    background: var(--border-light, #e2e8f0); color: var(--text-muted, #64748b);
    border-radius: 10px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.ncf-tpl-tab.active .ncf-tpl-tab-count { background: rgba(25,156,130,.12); color: var(--primary, #199c82); }

/* Templates modal — Panels */
.ncf-tpl-panel { display: none; padding: 24px 28px 28px; }
.ncf-tpl-panel.active { display: block; animation: ncf-panel-in .3s ease-out; }

/* Predefined template grid */
.ncf-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.ncf-tpl-card {
    border: 1.5px solid var(--border, #e2e8f0); border-radius: 14px;
    padding: 22px 18px 18px; cursor: pointer; transition: all .25s cubic-bezier(.22,1,.36,1);
    background: #fff; position: relative; overflow: hidden;
}
.ncf-tpl-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--tpl-color, var(--primary, #199c82)); border-radius: 14px 14px 0 0;
    opacity: 0; transition: opacity .25s;
}
.ncf-tpl-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.1); border-color: #d1d5db; }
.ncf-tpl-card:hover::before { opacity: 1; }
.ncf-tpl-ico {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ncf-tpl-ico svg { width: 20px; height: 20px; color: #fff; }
.ncf-tpl-name { font-size: 14.5px; font-weight: 700; color: #1e293b; margin-bottom: 5px; }
.ncf-tpl-desc { font-size: 12px; color: #8492a6; line-height: 1.55; }

/* Custom templates — list items */
.ncf-custom-empty {
    text-align: center; padding: 40px 20px; color: var(--text-muted, #8492a6);
}
.ncf-custom-empty-icon { margin-bottom: 12px; color: #cbd5e1; }
.ncf-custom-empty-icon svg { width: 44px; height: 44px; }
.ncf-custom-empty h4 { font-size: 15px; font-weight: 700; color: var(--text-secondary, #475569); margin: 0 0 4px; }
.ncf-custom-empty p { font-size: 13px; margin: 0; }
.ncf-custom-list { display: flex; flex-direction: column; gap: 10px; }
.ncf-custom-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: #f8fafc; border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 12px; transition: border-color .2s, box-shadow .2s; cursor: pointer;
}
.ncf-custom-item:hover { border-color: var(--primary, #199c82); box-shadow: 0 2px 10px rgba(25,156,130,.08); }
.ncf-custom-item-info { flex: 1; min-width: 0; }
.ncf-custom-item-name { font-size: 14px; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 2px; }
.ncf-custom-item-meta { font-size: 11.5px; color: var(--text-muted, #8492a6); }
.ncf-custom-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ncf-custom-item-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
}
.ncf-custom-item-btn svg { width: 14px; height: 14px; }
.ncf-custom-item-btn--use { background: #d1fae5; color: var(--primary-dark, #116d5b); }
.ncf-custom-item-btn--use:hover { background: #a7f3d0; }
.ncf-custom-item-btn--del { background: #fef2f2; color: #ef4444; }
.ncf-custom-item-btn--del:hover { background: #fecaca; }

/* ── Error Alert ─────────────────────────────────────────────── */
.ncf-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 10px;
    padding: 14px 18px;
}
.ncf-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ncf-alert--error {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    color: #dc2626;
}
.ncf-alert--error strong { font-size: 13.5px; }
.ncf-alert--error ul { margin: 8px 0 0 18px; padding: 0; }
.ncf-alert--error li { font-size: 13px; margin-bottom: 2px; }
.ncf-alert--success {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    color: #166534;
}
.ncf-alert--success strong { font-size: 13.5px; }

/* ── Draft Banner ────────────────────────────────────────────── */
.ncf-draft-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; background: #fffbeb; border: 1.5px solid #fde68a;
    border-radius: 10px; padding: 12px 18px; flex-wrap: wrap;
}
.ncf-draft-banner-info strong { font-size: 13.5px; color: #92400e; }
.ncf-draft-banner-info p { font-size: 12px; color: #b45309; margin: 2px 0 0; }
.ncf-draft-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ncf-draft-btn {
    padding: 7px 15px; border-radius: 7px; font-size: 12px;
    font-weight: 600; cursor: pointer; border: 1.5px solid; transition: all .18s;
}
.ncf-draft-btn--x { border-color: #fca5a5; color: #dc2626; background: #fff; }
.ncf-draft-btn--x:hover { background: #fef2f2; }
.ncf-draft-btn--ok { border-color: var(--primary, #199c82); color: #fff; background: var(--primary, #199c82); }
.ncf-draft-btn--ok:hover { background: var(--primary-dark, #116d5b); }

/* ── Navigation Buttons ──────────────────────────────────────── */
.ncf-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 18px; border-top: 2px solid var(--border-light, #f1f5f9);
    flex-wrap: wrap; gap: 10px;
}
.ncf-nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all .22s;
}
.ncf-nav-btn svg    { width: 15px; height: 15px; }
.ncf-nav-btn--back  { background: #f1f5f9; color: #4a5568; }
.ncf-nav-btn--back:hover  { background: #e2e8f0; }
.ncf-nav-btn--next  {
    background: var(--primary);
    color: #fff; box-shadow: 0 4px 14px rgba(25,156,130,.3);
}
.ncf-nav-btn--next:hover  { opacity: .9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(25,156,130,.35); }
.ncf-nav-btn--save  {
    background: #22c55e;
    color: #fff; box-shadow: 0 4px 14px rgba(34,197,94,.3);
}
.ncf-nav-btn--save:hover  { opacity: .9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,.35); }

/* ── Select2 Overrides ───────────────────────────────────────── */
.ncf-page .select2-container--default .select2-selection--single,
.ncf-page .select2-container--default .select2-selection--multiple {
    min-height: 44px !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-family: var(--font-family, 'Inter', sans-serif) !important;
    background: #fff !important;
}
.ncf-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: var(--text-primary, #1e293b) !important;
    padding: 0 !important;
}
.ncf-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}
.ncf-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: var(--primary-dark, #116d5b) !important;
    border-radius: 6px !important;
    padding: 2px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.ncf-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--primary-dark, #116d5b) !important;
    margin-right: 5px !important;
}
.ncf-page .select2-container--focus .select2-selection--single,
.ncf-page .select2-container--focus .select2-selection--multiple,
.ncf-page .select2-container--default.select2-container--open .select2-selection--single,
.ncf-page .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary, #199c82) !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.12) !important;
    outline: none !important;
}

/* Select2 dropdown (renders outside .ncf-page on body) */
.select2-dropdown { border: 1.5px solid var(--primary, #199c82) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--primary, #199c82) !important; }
.select2-search--dropdown .select2-search__field { border-radius: 6px !important; border: 1.5px solid var(--border, #e2e8f0) !important; padding: 6px 10px !important; font-size: 13px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0 !important; }

/* ── NCF Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ncf-col2, .ncf-col3 { grid-template-columns: 1fr; }
    .ncf-span2, .ncf-full { grid-column: unset; }
    .ncf-hero { padding: 22px 20px; }
    .ncf-hero-title { font-size: 21px; }
    .ncf-hero-inner { flex-direction: column; align-items: flex-start; }
    .ncf-hero-actions { width: 100%; }
    .ncf-btn-back { width: 100%; justify-content: center; }
    .ncf-card-body { padding: 16px; }
    .ncf-wizard-card { padding: 14px 12px 10px; }
    .ncf-step-label { font-size: 9px; }
    .ncf-step-circle { width: 40px; height: 40px; }
    .ncf-step-circle svg { width: 16px; height: 16px; }
    .ncf-nav-btn { padding: 10px 18px; font-size: 13px; }
    .ncf-session-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 14px; }
    .ncf-session-right { width: 100%; justify-content: space-between; }
    .ncf-card-head { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .ncf-card-head-title { font-size: 13px; }
    .ncf-tpl-open-btn { font-size: 11px; padding: 6px 12px; }
    .ncf-modal { max-width: calc(100vw - 24px); border-radius: 16px; }
    .ncf-modal-head { padding: 18px 20px; }
    .ncf-modal-head h2 { font-size: 17px; }
    .ncf-tpl-panel { padding: 18px 20px 22px; }
    .ncf-tpl-tabs { padding: 0 20px; }
    .ncf-tpl-grid { grid-template-columns: 1fr; }
    .ncf-modal-save-row { padding: 12px 20px; flex-wrap: wrap; }
}
@media (max-width: 767px) {
    .ncdtp-panel { width: calc(100vw - 24px); height: auto; max-height: calc(100dvh - 40px); flex-direction: column; overflow-y: auto; }
    .ncdtp-cal { flex: none; border-right: none; border-bottom: 1px solid #f1f5f9; overflow: visible; }
    .ncdtp-time { flex: none; }
    .ncdtp-time-header { display: none; }
    .ncdtp-time-cols { height: 160px; }
}
@media (max-width: 480px) {
    .ncf-hero { padding: 18px 16px; }
    .ncf-hero-title { font-size: 19px; }
    .ncf-wizard-card { padding: 10px 8px 8px; }
    .ncf-step-label { display: none; }
    .ncf-step-circle { width: 36px; height: 36px; }
    .ncf-nav { gap: 8px; }
    .ncf-nav-btn { width: 100%; justify-content: center; }
    .ncf-file-zone { padding: 14px; }
    .ncf-textarea-mono { min-height: 220px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════
 *  NCF v2 — Redesigned Layout (Split: dark sidebar + editor)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes ncf2-slide-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ncf2-panel-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── App Shell ───────────────────────────────────────────────── */
.ncf-app {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: #eef2f7;
    animation: ncf2-slide-in .45s cubic-bezier(.22,1,.36,1) both;
}

/* ── Top Bar ─────────────────────────────────────────────────── */
.ncf-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 28px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    flex-shrink: 0;
}
.ncf-topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    flex-shrink: 0;
    white-space: nowrap;
}
.ncf-topbar-back:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
.ncf-topbar-back svg  { width: 14px; height: 14px; }
.ncf-topbar-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}
.ncf-topbar-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--primary, #199c82);
    line-height: 1;
}
.ncf-topbar-heading {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ncf-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.ncf-topbar-session-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 12px;
}
.ncf-topbar-session-lbl {
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
}
.ncf-topbar-timer {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .5px;
}

/* ── Workspace ───────────────────────────────────────────────── */
.ncf-workspace {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ── Dark Sidebar ────────────────────────────────────────────── */
.ncf-sidebar {
    width: 266px;
    flex-shrink: 0;
    background: #111d2e;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    scrollbar-width: none;
}
.ncf-sidebar::-webkit-scrollbar { display: none; }
.ncf-sidebar-inner {
    padding: 28px 18px 16px;
    flex: 1;
}
.ncf-sidebar-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin: 0 0 22px;
    padding-left: 6px;
}

/* ── Step List ───────────────────────────────────────────────── */
.ncf-steplist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 10px 13px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .25s;
    border-left: 3px solid transparent;
    position: relative;
    user-select: none;
}
.ncf-steplist-item:hover {
    background: rgba(255,255,255,.05);
}
.ncf-steplist-item.active {
    background: rgba(25,156,130,.12);
    border-left-color: var(--primary, #199c82);
}
.ncf-steplist-item.done {
    background: rgba(34,197,94,.07);
    border-left-color: #22c55e;
    cursor: default;
}
.ncf-steplist-num {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 20px;
    font-weight: 800;
    color: rgba(255,255,255,.15);
    flex-shrink: 0;
    width: 38px;
    line-height: 1;
    letter-spacing: -0.5px;
    transition: color .25s;
}
.ncf-steplist-item.active .ncf-steplist-num { color: var(--primary, #199c82); }
.ncf-steplist-item.done  .ncf-steplist-num  { color: rgba(34,197,94,.7); }

.ncf-steplist-body { flex: 1; min-width: 0; }
.ncf-steplist-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.38);
    margin-bottom: 3px;
    transition: color .25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ncf-steplist-desc {
    font-size: 11px;
    color: rgba(255,255,255,.18);
    font-weight: 500;
    transition: color .25s;
}
.ncf-steplist-item.active .ncf-steplist-name { color: rgba(255,255,255,.92); }
.ncf-steplist-item.active .ncf-steplist-desc { color: rgba(255,255,255,.5); }
.ncf-steplist-item.done   .ncf-steplist-name { color: rgba(255,255,255,.6); }
.ncf-steplist-item.done   .ncf-steplist-desc { color: rgba(255,255,255,.3); }

.ncf-steplist-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.7);
    transition: all .3s cubic-bezier(.22,1,.36,1);
    color: #fff;
}
.ncf-steplist-item.done .ncf-steplist-check {
    background: #22c55e;
    opacity: 1;
    transform: scale(1);
}
.ncf-steplist-check svg { width: 11px; height: 11px; }

.ncf-steplist-line {
    width: 2px;
    height: 18px;
    background: rgba(255,255,255,.07);
    margin: 0 0 0 32px;
    border-radius: 1px;
    transition: background .4s;
}
.ncf-steplist-line.done { background: rgba(34,197,94,.35); }

/* Sidebar footer */
.ncf-sidebar-foot {
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.ncf-sidebar-foot-txt {
    font-size: 11px;
    color: rgba(255,255,255,.2);
    line-height: 1.55;
    margin: 0;
}

/* ── Content Area ────────────────────────────────────────────── */
.ncf-content-area {
    flex: 1;
    min-width: 0;
    padding: 30px 36px 48px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

/* ── Panel (form step) ───────────────────────────────────────── */
.ncf-panel           { display: none; flex-direction: column; }
.ncf-panel.active    { display: flex; animation: ncf2-panel-in .35s cubic-bezier(.22,1,.36,1) both; }

/* ── Section Header ──────────────────────────────────────────── */
.ncf-section-hd {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ncf-section-hd-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.ncf-section-hd-icon svg { width: 22px; height: 22px; }
.ncf-section-hd-text { flex: 1; min-width: 0; }
.ncf-section-hd-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
    line-height: 1.2;
}
.ncf-section-hd-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* ── Form Body Card ──────────────────────────────────────────── */
.ncf-section-body {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e4e9f0;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(15,23,42,.06);
    margin-bottom: 4px;
}

/* ── Section Divider ─────────────────────────────────────────── */
.ncf-section-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 8px 0;
    grid-column: 1 / -1;
}

/* ── Panel Navigation Bar ────────────────────────────────────── */
.ncf-panelnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 4px;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Navigation Buttons ──────────────────────────────────────── */
.ncf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .22s cubic-bezier(.22,1,.36,1);
    font-family: var(--font-family, 'Inter', sans-serif);
    white-space: nowrap;
}
.ncf-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.ncf-btn--prev {
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}
.ncf-btn--prev:hover { background: #e8edf4; border-color: #cbd5e1; color: #1e293b; }

.ncf-btn--next {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(25,156,130,.32);
}
.ncf-btn--next:hover {
    box-shadow: 0 6px 22px rgba(25,156,130,.45);
    transform: translateY(-1px);
}
.ncf-btn--next:active { transform: translateY(0); }

.ncf-btn--save {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(25,156,130,.32);
    padding: 13px 30px;
    font-size: 14.5px;
}
.ncf-btn--save:hover {
    box-shadow: 0 8px 28px rgba(25,156,130,.5);
    transform: translateY(-1px);
}
.ncf-btn--save:active { transform: translateY(0); }

/* ── Templates open button (override) ───────────────────────── */
.ncf-section-hd .ncf-tpl-open-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .22s;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 3px 12px rgba(25,156,130,.28);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.ncf-section-hd .ncf-tpl-open-btn:hover {
    box-shadow: 0 5px 18px rgba(25,156,130,.42);
    transform: translateY(-1px);
}
.ncf-section-hd .ncf-tpl-open-btn svg { width: 14px; height: 14px; }

/* ── Draft indicator (in topbar) ─────────────────────────────── */
.ncf-draft-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #f59e0b;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 7px;
    padding: 4px 10px;
    opacity: 0;
    transition: opacity .3s;
    white-space: nowrap;
}
.ncf-draft-indicator.visible { opacity: 1; }
.ncf-draft-indicator svg { width: 12px; height: 12px; }

/* Session dot override for topbar */
.ncf-topbar-session-info .ncf-session-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
    flex-shrink: 0;
    animation: ncf-pulse-dot 2.5s ease-in-out infinite;
}
.ncf-topbar-session-info .ncf-session-dot--warn {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
    animation-name: ncf-pulse-dot-warn;
}

/* ── Select2 overrides for .ncf-app ─────────────────────────── */
.ncf-app .select2-container--default .select2-selection--single,
.ncf-app .select2-container--default .select2-selection--multiple {
    min-height: 44px !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-family: var(--font-family, 'Inter', sans-serif) !important;
    background: #fff !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: var(--text-primary, #1e293b) !important;
    padding: 0 !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: var(--primary-dark, #116d5b) !important;
    border-radius: 6px !important;
    padding: 2px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--primary-dark, #116d5b) !important;
    margin-right: 5px !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(--primary, #199c82) !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.12) !important;
    outline: none !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
}

/* ── NCF v2 Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .ncf-sidebar { width: 230px; }
    .ncf-content-area { padding: 24px 28px 40px; }
}

@media (max-width: 820px) {
    .ncf-workspace { flex-direction: column; }
    .ncf-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .ncf-sidebar-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 12px 16px;
        flex: 1;
        overflow-x: auto;
    }
    .ncf-sidebar-label { display: none; }
    .ncf-steplist-item {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 14px;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 8px;
        flex-shrink: 0;
    }
    .ncf-steplist-item.active { border-bottom-color: var(--primary, #199c82); }
    .ncf-steplist-item.done   { border-bottom-color: #22c55e; }
    .ncf-steplist-num { font-size: 15px; width: auto; }
    .ncf-steplist-body { text-align: center; }
    .ncf-steplist-name { font-size: 11px; white-space: nowrap; }
    .ncf-steplist-desc { display: none; }
    .ncf-steplist-check { display: none; }
    .ncf-steplist-line {
        width: 24px;
        height: 2px;
        margin: 0;
        align-self: center;
        flex-shrink: 0;
    }
    .ncf-sidebar-foot { display: none; }
    .ncf-content-area { padding: 20px 20px 36px; }
    .ncf-section-hd { gap: 12px; }
    .ncf-section-body { padding: 20px; }
}

@media (max-width: 640px) {
    .ncf-topbar { padding: 0 16px; height: 52px; gap: 10px; }
    .ncf-topbar-back { padding: 6px 10px; font-size: 12px; }
    .ncf-topbar-back span { display: none; }
    .ncf-topbar-session-info { padding: 4px 8px; gap: 6px; }
    .ncf-topbar-session-lbl { display: none; }
    .ncf-topbar-badge { display: none; }
    .ncf-topbar-heading { font-size: 14px; }
    .ncf-content-area { padding: 16px 14px 32px; }
    .ncf-section-body { padding: 16px; }
    .ncf-section-hd-title { font-size: 17px; }
    .ncf-col2 { grid-template-columns: 1fr; }
    .ncf-col3 { grid-template-columns: 1fr; }
    .ncf-span2, .ncf-full { grid-column: unset; }
    .ncf-btn--save { width: 100%; justify-content: center; }
    .ncf-btn--next { padding: 10px 18px; font-size: 13px; }
    .ncf-btn--prev { padding: 10px 16px; font-size: 13px; }
    .ncf-section-hd .ncf-tpl-open-btn { padding: 8px 13px; font-size: 12px; }
}

@media (max-width: 480px) {
    .ncf-topbar-center { align-items: flex-start; }
    .ncf-panelnav { flex-direction: column-reverse; gap: 8px; }
    .ncf-btn { width: 100%; justify-content: center; }
    .ncf-textarea-mono { min-height: 200px; font-size: 12.5px; }
}

/* RESPONSIVE GLOBAL — reglas del sidebar ya están definidas arriba (línea ~651).
   Este bloque duplicado fue eliminado en Fase 8.2 (limpieza deuda técnica). */

@media (max-width: 992px) {
    .login-page {
        background: #f8fafc;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .login-hero {
        display: none;
    }

    .login-form-wrapper {
        padding: 0;
        width: 100%;
    }

    .login-form-container {
        background: #fff;
        padding: 40px 32px;
        border-radius: var(--radius-lg);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
            0 8px 10px -6px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

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

@media (max-width: 768px) {
    .content {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 1.35rem;
    }

    .patients-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .search-form {
        width: 100%;
        justify-content: flex-start;
    }

    .search-input {
        min-width: 100%;
        max-width: 100%;
    }

    .search-actions {
        width: 100%;
    }

    .search-actions .btn {
        flex: 1;
    }

    .welcome-banner {
        padding: 24px;
    }

    .welcome-text h2 {
        font-size: 1.5rem;
    }

    .card-body {
        padding: 16px;
    }

    /* Responsive Data Tables (Mobile Stacking) */
    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        margin-bottom: 20px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-sm);
    }

    .data-table td {
        border-bottom: 1px solid var(--border-light);
        padding: 12px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .data-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-table td:first-child {
        padding-top: 0;
    }

    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.70rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        width: 100%;
        text-align: left;
    }

    .data-table td>div,
    .data-table td>span {
        text-align: left;
        width: 100%;
        justify-content: flex-start;
    }

    .patient-cell {
        justify-content: flex-start;
        width: 100%;
    }

    .contact-cell {
        align-items: flex-start;
        width: 100%;
    }

    .visit-cell {
        align-items: flex-start;
        width: 100%;
    }

    .text-truncate {
        max-width: 100%;
        white-space: normal;
    }

    .table-responsive {
        background: transparent;
        border: none;
        overflow-x: hidden;
    }

    .card .table-responsive {
        padding: 0;
    }

    /* Form grids */
    .form-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {

    /* EP module responsive */
    .ep-grid {
        grid-template-columns: 1fr;
    }

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

    .ep-role-cards {
        grid-template-columns: 1fr;
    }

    .ep-toggle-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ep-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ep-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 0 16px;
    }

    .page-title {
        font-size: 1rem;
    }
}
/* create.blade.php - Nueva Nota Clínica (cn2) */
.cn2-page {
    display: grid;
    gap: 18px;
}

.cn2-hero {
    border-radius: 16px;
    border: 1px solid rgba(25, 156, 130, 0.16);
    background: radial-gradient(
        circle at top right,
        rgba(25, 156, 130, 0.14),
        rgba(255, 255, 255, 0.96)
    );
    padding: 20px 22px;
}

.cn2-hero__left {
    display: grid;
    gap: 4px;
}

.cn2-hero__right {
    margin-top: 10px;
}

.cn2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--primary-dark);
    background: rgba(25, 156, 130, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
}

.cn2-title {
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.cn2-subtitle {
    margin: 0;
    color: #334155;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 850px;
}

.cn2-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.cn2-aside {
    display: grid;
    gap: 14px;
    align-content: start;
}

.cn2-stepper {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.cn2-step {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 12px;
    padding: 11px;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 160ms ease;
    font: inherit;
}

.cn2-step:hover {
    border-color: rgba(25, 156, 130, 0.35);
    transform: translateY(-1px);
    background: rgba(25, 156, 130, 0.03);
}

.cn2-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    background: #eef2f7;
}

.cn2-step__meta {
    display: grid;
    line-height: 1.25;
}

.cn2-step__meta strong {
    font-size: 0.86rem;
    color: #0f172a;
}

.cn2-step__meta small {
    color: #64748b;
    font-size: 0.74rem;
}

.cn2-step.is-active,
.cn2-step.is-done {
    border-color: rgba(25, 156, 130, 0.34);
    background: rgba(25, 156, 130, 0.05);
}

.cn2-step.is-active .cn2-step__num,
.cn2-step.is-done .cn2-step__num {
    background: var(--primary);
    color: #fff;
}

.cn2-aside__card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.cn2-aside__card h3 {
    font-size: 0.95rem;
    margin: 0 0 8px;
    color: #0f172a;
}

.cn2-aside__card ul {
    display: grid;
    gap: 8px;
    padding-left: 18px;
    margin: 0;
    color: #475569;
    font-size: 0.84rem;
}

.cn2-main {
    display: grid;
    gap: 12px;
}

.cn2-progress {
    height: 8px;
    border-radius: 999px;
    background: #e9eef5;
    overflow: hidden;
}

.cn2-progress__bar {
    width: 0;
    height: 100%;
    background: var(--primary);
    transition: width 240ms ease;
}

.cn2-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.cn2-card__head {
    margin-bottom: 14px;
}

.cn2-card__head h2 {
    font-size: 1.12rem;
    color: #0f172a;
    margin: 0;
}

.cn2-card__head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.86rem;
}

.cn2-card__head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.cn2-grid {
    display: grid;
    gap: 14px;
}

.cn2-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn2-field {
    display: grid;
    gap: 6px;
}

.cn2-field--full {
    grid-column: 1 / -1;
}

.cn2-field label {
    font-size: 0.82rem;
    color: #334155;
    font-weight: 700;
    margin: 0;
}

.cn2-field label span {
    color: #dc2626;
}

.cn2-field input,
.cn2-field select,
.cn2-field textarea {
    width: 100%;
    border: 1px solid #d6e0ea;
    border-radius: 11px;
    font: inherit;
    color: #0f172a;
    background: #fff;
    padding: 10px 12px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.cn2-field input,
.cn2-field select {
    min-height: 44px;
}

.cn2-field select[multiple] {
    min-height: 140px;
}

.cn2-field textarea {
    resize: vertical;
    min-height: 120px;
}

.cn2-field input:focus,
.cn2-field select:focus,
.cn2-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 156, 130, 0.14);
    background: #fcfefe;
}

.cn2-help {
    color: #64748b;
    font-size: 0.75rem;
}

.cn2-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 12px;
    background: rgba(244, 246, 249, 0.88);
    backdrop-filter: blur(8px);
    border-top: 1px solid #d9e3ef;
    padding: 12px 0 2px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cn2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.84rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
    text-decoration: none;
}

.cn2-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.cn2-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.cn2-btn--ghost {
    border-color: #d5dee8;
    background: #fff;
    color: #334155;
}

.cn2-btn--primary {
    background: var(--primary);
    color: #fff;
}

.cn2-btn--success {
    background: #22c55e;
    color: #fff;
}

.cn2-btn--info {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.cn2-alert {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
    font-size: 0.86rem;
}

.cn2-alert ul {
    margin-top: 7px;
    padding-left: 18px;
}

.cn2-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.24);
    color: #b91c1c;
}

.cn2-draft {
    border: 1px solid rgba(59, 130, 246, 0.24);
    background: rgba(59, 130, 246, 0.08);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cn2-draft strong {
    color: #1e3a8a;
}

.cn2-draft p {
    color: #1e40af;
    font-size: 0.82rem;
    margin: 3px 0 0;
}

.cn2-draft__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cn2-modal[hidden] {
    display: none;
}

.cn2-modal {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: grid;
    place-items: center;
    padding: 14px;
}

.cn2-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.46);
}

.cn2-modal__dialog {
    position: relative;
    width: min(620px, 100%);
    background: #fff;
    border: 1px solid #dce6f2;
    border-radius: 14px;
    box-shadow: 0 24px 46px rgba(2, 8, 23, 0.25);
    overflow: hidden;
}

.cn2-modal__head {
    padding: 13px 14px;
    border-bottom: 1px solid #e6edf6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cn2-modal__head h3 {
    font-size: 0.98rem;
    margin: 0;
    color: #0f172a;
}

.cn2-modal__close {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.cn2-modal__body {
    padding: 14px;
    display: grid;
    gap: 10px;
    max-height: min(72vh, 680px);
    overflow: auto;
}

.cn2-template-search {
    width: 100%;
    border: 1px solid #d6e1ec;
    border-radius: 10px;
    padding: 10px 11px;
    font: inherit;
}

.cn2-template-item {
    border: 1px solid #dbe6f1;
    border-radius: 11px;
    padding: 11px;
    background: #fff;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
    font: inherit;
}

.cn2-template-item strong {
    color: #0f172a;
    font-size: 0.87rem;
}

.cn2-template-item span {
    color: #64748b;
    font-size: 0.78rem;
}

.cn2-template-item:hover {
    border-color: rgba(25, 156, 130, 0.38);
    background: rgba(25, 156, 130, 0.06);
}

@media (max-width: 1080px) {
    .cn2-shell {
        grid-template-columns: 1fr;
    }

    .cn2-stepper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cn2-step {
        grid-template-columns: 28px 1fr;
    }

    .cn2-aside__card {
        display: none;
    }
}

@media (max-width: 780px) {
    .cn2-grid--2 {
        grid-template-columns: 1fr;
    }

    .cn2-stepper {
        grid-template-columns: 1fr;
    }

    .cn2-card {
        padding: 14px;
    }

    .cn2-actions {
        justify-content: stretch;
    }

    .cn2-actions .cn2-btn {
        flex: 1 1 100%;
    }

}

/* ═══════════════════════════════════════════════════════════════
 *  NCF v3 — Premium Centered Layout  (create.blade.php)
 *  Frosted-glass topbar · Horizontal tracker · Centered form card
 * ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes ncfv3-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ncfv3-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ncfv3-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ncfv3-blob-drift {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(40px,-30px) scale(1.08); }
    66%       { transform: translate(-20px,20px) scale(.95); }
}
@keyframes ncfv3-session-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

/* ── App Shell: override v2 background for v3 ────────────────── */
.ncf-app {
    background: #f1f5f9;
    position: relative;
    overflow-x: hidden;
}

/* ── Ambient background blobs ────────────────────────────────── */
.ncf-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ncf-ambient::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25,156,130,.10) 0%, transparent 70%);
    top: -180px;
    right: -120px;
    animation: ncfv3-blob-drift 22s ease-in-out infinite;
}
.ncf-ambient::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25,156,130,.08) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: ncfv3-blob-drift 28s ease-in-out infinite reverse;
}

/* ── Topbar: frosted glass override ──────────────────────────── */
.ncf-topbar {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226,232,240,.8);
    box-shadow: 0 1px 12px rgba(15,23,42,.06);
    z-index: 100;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    height: 56px;
    flex-shrink: 0;
}

.ncf-topbar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.25px;
    flex: 1;
}
.ncf-topbar-brand svg {
    width: 18px;
    height: 18px;
    color: var(--primary, #199c82);
    flex-shrink: 0;
}

.ncf-topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Session pill */
.ncf-session-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 5px 12px;
}
.ncf-session-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: ncfv3-session-pulse 2.5s ease-in-out infinite;
}
.ncf-session-dot--warn {
    background: #f59e0b;
}
.ncf-session-pill-lbl {
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}
.ncf-session-pill-timer {
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .5px;
    min-width: 58px;
    text-align: right;
}

/* ── Main centered wrapper ───────────────────────────────────── */
.ncf-main {
    position: relative;
    z-index: 1;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: ncfv3-slide-up .5s cubic-bezier(.22,1,.36,1) both;
}

/* ── Alert banners ───────────────────────────────────────────── */
.ncf-main .ncf-alert {
    border-radius: 10px;
    margin-bottom: 0;
}

/* ── Step Tracker ────────────────────────────────────────────── */
.ncf-tracker {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.9);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    gap: 0;
    box-shadow: 0 1px 6px rgba(15,23,42,.06);
}

.ncf-tracker-step {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 10px;
    transition: background .2s;
    user-select: none;
}
.ncf-tracker-step:hover { background: #f8fafc; }
.ncf-tracker-step.active { cursor: default; }
.ncf-tracker-step.active:hover { background: transparent; }

.ncf-tracker-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all .3s cubic-bezier(.22,1,.36,1);
}
.ncf-tracker-step.active .ncf-tracker-ring {
    border-color: var(--primary, #199c82);
    background: var(--primary, #199c82);
    box-shadow: 0 0 0 4px rgba(25,156,130,.15);
}
.ncf-tracker-step.done .ncf-tracker-ring {
    border-color: #22c55e;
    background: #22c55e;
}

.ncf-tracker-num {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    line-height: 1;
    transition: color .3s;
}
.ncf-tracker-step.active .ncf-tracker-num { color: #fff; }
.ncf-tracker-step.done   .ncf-tracker-num { display: none; }

.ncf-tracker-check {
    width: 16px;
    height: 16px;
    color: #fff;
    display: none;
    stroke-width: 3;
}
.ncf-tracker-step.done .ncf-tracker-check { display: block; }
.ncf-tracker-step.done .ncf-tracker-num   { display: none; }

.ncf-tracker-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ncf-tracker-title {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s;
}
.ncf-tracker-sub {
    font-size: 11px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s;
}
.ncf-tracker-step.active .ncf-tracker-title { color: #0f172a; }
.ncf-tracker-step.active .ncf-tracker-sub   { color: #64748b; }
.ncf-tracker-step.done   .ncf-tracker-title { color: #22c55e; }
.ncf-tracker-step.done   .ncf-tracker-sub   { color: #86efac; }

.ncf-tracker-connector {
    flex: 0 0 40px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 1px;
    transition: background .4s;
    flex-shrink: 0;
}
.ncf-tracker-connector.done { background: #22c55e; }

/* ── Form Card ───────────────────────────────────────────────── */
.ncf-form-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15,23,42,.08);
    overflow: hidden;
}

/* ── Panel scope fix: v3 uses display:block for active panels ── */
.ncf-form-card .ncf-panel           { display: none; }
.ncf-form-card .ncf-panel.active    { display: block; animation: ncfv3-panel-in .35s cubic-bezier(.22,1,.36,1) both; }

/* ── Panel Header ────────────────────────────────────────────── */
.ncfp-hd {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
    flex-wrap: wrap;
}

.ncfp-hd--blue   { border-top: 3px solid #3b82f6; }
.ncfp-hd--teal   { border-top: 3px solid var(--primary, #199c82); }
.ncfp-hd--purple { border-top: 3px solid #8b5cf6; }

.ncfp-hd-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ncfp-hd--blue   .ncfp-hd-icon { background: rgba(59,130,246,.1);  color: #3b82f6; }
.ncfp-hd--teal   .ncfp-hd-icon { background: rgba(25,156,130,.1);  color: var(--primary, #199c82); }
.ncfp-hd--purple .ncfp-hd-icon { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.ncfp-hd-icon svg { width: 20px; height: 20px; }

.ncfp-hd-text { flex: 1; min-width: 0; }
.ncfp-hd-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px;
    line-height: 1.2;
}
.ncfp-hd-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

.ncfp-hd-step-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #94a3b8;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Template trigger button (in panel header) ───────────────── */
.ncf-tpl-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid rgba(25,156,130,.35);
    background: rgba(25,156,130,.07);
    color: var(--primary, #199c82);
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ncf-tpl-trigger:hover {
    background: rgba(25,156,130,.14);
    border-color: var(--primary, #199c82);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(25,156,130,.18);
}
.ncf-tpl-trigger svg { width: 14px; height: 14px; }

/* ── Panel Body ──────────────────────────────────────────────── */
.ncfp-bd {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Panel Footer ────────────────────────────────────────────── */
.ncfp-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 28px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

/* ── Field Grid ──────────────────────────────────────────────── */
.ncf-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ncf-field-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.ncf-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ncf-field-row--full {
    grid-column: 1 / -1;
}

/* ── Label ───────────────────────────────────────────────────── */
.ncf-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    letter-spacing: .1px;
}
.ncf-lbl svg {
    width: 13px;
    height: 13px;
    color: #94a3b8;
    flex-shrink: 0;
}
.ncf-req {
    color: #ef4444;
    font-weight: 700;
}

/* ── Input wrap (for icon suffix) ────────────────────────────── */
.ncf-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.ncf-input-wrap .ncf-input {
    flex: 1;
    padding-right: 40px;
}
.ncf-input-suffix {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #94a3b8;
}
.ncf-input-suffix svg { width: 15px; height: 15px; }

/* ── Risk Level Buttons ──────────────────────────────────────── */
.ncf-risk-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ncf-risk-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid color-mix(in srgb, var(--risk-color) 35%, transparent);
    background: color-mix(in srgb, var(--risk-color) 8%, #fff);
    color: color-mix(in srgb, var(--risk-color) 70%, #111);
    transition: all .2s;
    user-select: none;
}
.ncf-risk-btn:hover {
    border-color: var(--risk-color);
    background: color-mix(in srgb, var(--risk-color) 14%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--risk-color) 30%, transparent);
}
.ncf-risk-btn.active {
    border-color: var(--risk-color);
    background: var(--risk-color);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--risk-color) 40%, transparent);
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .ncf-risk-btn {
        border-color: rgba(100,100,100,.25);
        background: rgba(100,100,100,.05);
        color: #374151;
    }
    .ncf-risk-btn.active {
        background: #199c82;
        border-color: #199c82;
        color: #fff;
    }
}

/* ── Subsections ─────────────────────────────────────────────── */
.ncf-subsection {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 20px;
    border-bottom: 1px dashed #e2e8f0;
}
.ncf-subsection:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ncf-subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0;
}
.ncf-subsection-title svg {
    width: 15px;
    height: 15px;
    color: #94a3b8;
    flex-shrink: 0;
}

/* ── Drop Zone ───────────────────────────────────────────────── */
.ncf-dropzone {
    border: 2px dashed #d1d9e6;
    border-radius: 12px;
    padding: 32px 24px;
    background: #fafbfd;
    text-align: center;
    cursor: pointer;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.ncf-dropzone:hover,
.ncf-dropzone.dragover {
    border-color: var(--primary, #199c82);
    background: rgba(25,156,130,.04);
}
.ncf-dropzone.dragover { box-shadow: 0 0 0 4px rgba(25,156,130,.12); }
.ncf-dropzone input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.ncf-dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(25,156,130,.08);
    color: var(--primary, #199c82);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    transition: background .25s;
}
.ncf-dropzone:hover .ncf-dropzone-icon { background: rgba(25,156,130,.15); }
.ncf-dropzone-icon svg { width: 22px; height: 22px; }
.ncf-dropzone-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
}
.ncf-dropzone-hint {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0;
}

/* ── CTA Buttons ─────────────────────────────────────────────── */
.ncf-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .22s cubic-bezier(.22,1,.36,1);
    text-decoration: none;
    white-space: nowrap;
}
.ncf-cta svg { width: 15px; height: 15px; flex-shrink: 0; }

.ncf-cta--primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(25,156,130,.32);
}
.ncf-cta--primary:hover {
    box-shadow: 0 6px 22px rgba(25,156,130,.45);
    transform: translateY(-1px);
}
.ncf-cta--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(25,156,130,.25); }

.ncf-cta--ghost {
    background: #fff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}
.ncf-cta--ghost:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }
.ncf-cta--ghost:active { background: #f1f5f9; }

.ncf-cta--save {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 18px rgba(25,156,130,.35);
    padding: 12px 28px;
    font-size: 14px;
}
.ncf-cta--save:hover {
    box-shadow: 0 8px 28px rgba(25,156,130,.5);
    transform: translateY(-1px);
}
.ncf-cta--save:active { transform: translateY(0); }
.ncf-cta--save:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ncf-main { max-width: 720px; padding: 24px 16px 48px; }
}

/* iPad portrait y tablet: stepper de notas clínicas compacto */
@media (max-width: 1023.98px) {
    .ncf-tracker-info { display: none; }
}

@media (max-width: 768px) {
    .ncf-topbar { padding: 0 16px; gap: 8px; }
    .ncf-topbar-brand span { display: none; }
    .ncf-session-pill-lbl { display: none; }
    .ncf-session-pill { padding: 5px 9px; }

    .ncf-main { padding: 16px 12px 40px; gap: 16px; }

    .ncf-tracker { padding: 12px 14px; }
    .ncf-tracker-step { gap: 8px; }
    .ncf-tracker-connector { flex: 0 0 20px; }

    .ncf-field-grid { grid-template-columns: 1fr; }
    .ncf-field-grid--3 { grid-template-columns: 1fr; }

    .ncfp-hd { padding: 18px 18px; gap: 12px; }
    .ncfp-hd-step-badge { order: -1; margin-left: 0; }
    .ncfp-bd { padding: 18px; gap: 16px; }
    .ncfp-ft { padding: 14px 18px; flex-direction: column-reverse; }
    .ncfp-ft .ncf-cta { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .ncf-topbar-back span { display: none; }
    .ncf-topbar-back { padding: 7px 10px; }
    .ncf-tracker-ring { width: 30px; height: 30px; }
    .ncf-tracker-num { font-size: 12px; }
    .ncf-risk-group { gap: 6px; }
    .ncf-risk-btn { padding: 7px 12px 7px 10px; font-size: 12px; }
    .ncf-risk-btn .ncf-risk-ico { width: 13px; height: 13px; }
    .ncf-cta { font-size: 13px; padding: 9px 18px; }
    .ncfp-hd-icon { display: none; }
    .ncf-dropzone { padding: 20px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
 *  NCF v3 Supplemental — Fixes & Polish
 * ═══════════════════════════════════════════════════════════════ */

/* ── Native datepicker mobile toggle ─────────────────────────── */
.ncf-dtp-desktop { display: flex; }
.ncf-native-dt   { display: none; }

@media (max-width: 768px) {
    .ncf-dtp-desktop { display: none !important; }
    .ncf-native-dt {
        display: flex;
        gap: 8px;
    }
    .ncf-native-dt .ncf-native-date { flex: 1.4; min-width: 0; }
    .ncf-native-dt .ncf-native-time { flex: 1; min-width: 0; }
}

/* ── Risk buttons v2: icon + dot indicator ───────────────────── */
.ncf-risk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 8px 11px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid color-mix(in srgb, var(--risk-color) 30%, transparent);
    background: color-mix(in srgb, var(--risk-color) 7%, #fff);
    color: color-mix(in srgb, var(--risk-color) 80%, #111);
    transition: all .22s cubic-bezier(.22,1,.36,1);
    user-select: none;
    letter-spacing: .1px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.ncf-risk-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .2s;
}
.ncf-risk-btn:hover {
    border-color: var(--risk-color);
    background: color-mix(in srgb, var(--risk-color) 12%, #fff);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--risk-color) 28%, transparent);
}
.ncf-risk-btn:hover .ncf-risk-ico { transform: scale(1.15); }
.ncf-risk-btn.active {
    border-color: var(--risk-color);
    background: var(--risk-color);
    color: #fff;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--risk-color) 45%, transparent);
    transform: translateY(-1px);
}
.ncf-risk-btn.active .ncf-risk-ico { stroke: #fff; }

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .ncf-risk-btn { border-color: #e2e8f0; background: #f8fafc; color: #374151; }
    .ncf-risk-btn.active { background: #199c82; border-color: #199c82; color: #fff; }
}

/* ── SweetAlert above templates modal ────────────────────────── */
.ncf-swal-top.swal2-container { z-index: 1000000 !important; }

/* ═══════════════════════════════════════════════════════════════
 *  Select2 Premium Overrides — Global (dropdown appended to body)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Selection box (the visible input-like element) ──────────── */
.ncf-app .select2-container { font-family: inherit; }

.ncf-app .select2-container--default .select2-selection--single,
.ncf-app .select2-container--default .select2-selection--multiple {
    min-height: 46px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    padding: 0 !important;
    transition: border-color .2s, box-shadow .2s !important;
}

/* Single: internal rendered text */
.ncf-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    color: #1e293b !important;
    padding-left: 14px !important;
    padding-right: 36px !important;
    font-size: 14px !important;
}

/* Placeholder color */
.ncf-app .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

/* Single: custom chevron arrow */
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    width: 36px !important;
    right: 4px !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    top: 55% !important;
}
.ncf-app .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary, #199c82) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Multiple: inner wrapper */
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 4px 8px !important;
    min-height: 38px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Multiple: tags/chips */
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(25,156,130,.1) !important;
    border: 1.5px solid rgba(25,156,130,.3) !important;
    color: #0f5c4e !important;
    border-radius: 6px !important;
    padding: 3px 6px 3px 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.4 !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(15,92,78,.55) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    order: 2 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ef4444 !important;
}

/* Multiple: search input inside the box */
.ncf-app .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: #1e293b !important;
    font-size: 14px !important;
    font-family: inherit !important;
    padding: 2px 4px !important;
    margin: 0 !important;
}

/* Focus state */
.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(--primary, #199c82) !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.14) !important;
    outline: none !important;
}

/* ── Dropdown panel (appended to body — global styles) ───────── */
.select2-dropdown {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(15,23,42,.14) !important;
    overflow: hidden !important;
    background: #fff !important;
    margin-top: 4px !important;
}

/* Search box inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    outline: none !important;
    margin: 10px 10px 6px !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary, #199c82) !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.12) !important;
}

/* Results list */
.select2-container--default .select2-results__options {
    padding: 6px !important;
    max-height: 260px !important;
}

.select2-container--default .select2-results__option {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: #374151 !important;
    border-radius: 8px !important;
    transition: background .15s !important;
    cursor: pointer !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(25,156,130,.1) !important;
    color: #0f5c4e !important;
}
.select2-container--default .select2-results__option--selected {
    background: rgba(25,156,130,.06) !important;
    color: var(--primary, #199c82) !important;
    font-weight: 600 !important;
}
.select2-container--default .select2-results__option--disabled {
    color: #cbd5e1 !important;
}

/* "No results" message */
.select2-container--default .select2-results__message {
    padding: 12px !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  Select2 Popup Animation — inspired by popup/burger nav pattern
 *  Scale-in from origin, smooth item hover with color fill
 * ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes s2PopIn {
    0%   { opacity: 0; transform: scale(.82) translateY(-6px); }
    70%  { opacity: 1; transform: scale(1.015) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes s2PopInAbove {
    0%   { opacity: 0; transform: scale(.82) translateY(6px); }
    70%  { opacity: 1; transform: scale(1.015) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes s2ItemSlide {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Dropdown container ──────────────────────────────────────── */
.select2-dropdown {
    /* Visual: card-panel feel like the popup reference */
    background: #fff !important;
    border: 1.5px solid #e0e7ef !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 6px rgba(15,23,42,.06),
        0 10px 30px rgba(15,23,42,.12),
        0 0 0 1px rgba(25,156,130,.06) !important;
    overflow: hidden !important;
    margin-top: 5px !important;
    padding: 6px !important;
}

/* Scale-in animation when dropdown opens below */
.select2-dropdown--below {
    transform-origin: top center;
    animation: s2PopIn .22s cubic-bezier(.22,1,.36,1) both !important;
}

/* Scale-in animation when dropdown opens above */
.select2-dropdown--above {
    transform-origin: bottom center;
    animation: s2PopInAbove .22s cubic-bezier(.22,1,.36,1) both !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

/* ── Search field (inside dropdown) ──────────────────────────── */
.select2-container--default .select2-search--dropdown {
    padding: 6px 6px 4px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary, #199c82) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.13) !important;
}

/* ── Results list wrapper ─────────────────────────────────────── */
.select2-container--default .select2-results__options {
    padding: 4px 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e2e8f0 transparent !important;
}
.select2-container--default .select2-results__options::-webkit-scrollbar {
    width: 5px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* ── Result items — nav button pattern ───────────────────────── */
.select2-container--default .select2-results__option {
    display: flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: #374151 !important;
    border-radius: 8px !important;
    margin: 1px 2px !important;
    cursor: pointer !important;
    /* column-gap like the nav buttons in the reference */
    gap: 10px !important;
    transition:
        background .15s ease-in-out,
        color .15s ease-in-out,
        transform .12s ease-in-out !important;
}

/* Hover: solid color fill — mirrors nav-button-hover-bg pattern */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--primary, #199c82) !important;
    color: #fff !important;
    transform: translateX(2px) !important;
}

/* Already selected */
.select2-container--default .select2-results__option--selected {
    background: rgba(25,156,130,.1) !important;
    color: #0a5c4a !important;
    font-weight: 600 !important;
}

/* Selected + highlighted (hover over selected) */
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background: var(--primary, #199c82) !important;
    color: #fff !important;
}

/* Disabled */
.select2-container--default .select2-results__option--disabled {
    color: #c4cdd9 !important;
    cursor: default !important;
}

/* Group label (optgroup) */
.select2-container--default .select2-results__group {
    padding: 8px 14px 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
}

/* No results */
.select2-container--default .select2-results__message {
    padding: 14px !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    text-align: center !important;
}

/* ── Selection box: open state arrow animation ───────────────── */
.ncf-app .select2-container--default.select2-container--open
    .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary, #199c82) transparent !important;
    border-width: 0 5px 6px 5px !important;
    transition: border-color .18s !important;
}

/* ── Native .ncf-select — popup-inspired custom arrow ────────── */
.ncf-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Animated chevron via SVG data URI — teal on focus */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 15px !important;
    padding-right: 42px !important;
    cursor: pointer !important;
    transition: border-color .2s, box-shadow .2s, background-image .2s !important;
}
.ncf-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23199c82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") !important;
}

/* ── Selection box: subtle entry animation when Select2 opens ── */
.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(--primary, #199c82) !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.13) !important;
    border-radius: 10px 10px 6px 6px !important;
}

/* ── Clearable "×" button inside single select ───────────────── */
.ncf-app .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #94a3b8 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin-right: 6px !important;
    transition: color .15s !important;
    font-weight: 400 !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #ef4444 !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  Select2 — Final canonical style  (clinical-notes/create)
 *  Matches screenshot: clean white box · generous items · light selected
 *  These rules are last in file → win over all prior !important rules
 * ═══════════════════════════════════════════════════════════════ */

/* ── Trigger box — single ─────────────────────────────────────── */
.ncf-app .select2-container { font-family: inherit !important; }

.ncf-app .select2-container--default .select2-selection--single {
    height: 52px !important;
    border: 1.5px solid #dce6f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
    box-shadow: none !important;
}

.ncf-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px !important;
    padding: 0 48px 0 16px !important;
    color: #1e293b !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ncf-app .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Chevron arrow */
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    width: 44px !important;
    right: 2px !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent !important;
    border-width: 5px 5px 0 5px !important;
    border-style: solid !important;
    transition: border-color .18s !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    position: static !important;
}

/* Clear button */
.ncf-app .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #c0c9d6 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    margin-right: 4px !important;
    transition: color .15s !important;
    order: 2 !important;
}
.ncf-app .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #ef4444 !important;
}

/* ── Trigger box — multiple ───────────────────────────────────── */
.ncf-app .select2-container--default .select2-selection--multiple {
    min-height: 52px !important;
    border: 1.5px solid #dce6f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 6px 10px !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
}

/* Tags/chips */
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(25,156,130,.09) !important;
    border: 1.5px solid rgba(25,156,130,.25) !important;
    color: #0c5548 !important;
    border-radius: 7px !important;
    padding: 4px 8px 4px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.35 !important;
    transition: background .15s !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: rgba(25,156,130,.15) !important;
}

/* Remove × on chip */
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(12,85,72,.45) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    order: 2 !important;
    transition: color .15s !important;
    line-height: 1 !important;
}
.ncf-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ef4444 !important;
}

/* Inline search input inside multiple */
.ncf-app .select2-container--default .select2-selection--multiple
    .select2-search--inline .select2-search__field {
    color: #1e293b !important;
    font-size: 14px !important;
    font-family: inherit !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    min-width: 120px !important;
}

/* ── Focus / open state ───────────────────────────────────────── */
.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(--primary, #199c82) !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.13) !important;
    outline: none !important;
}

/* Arrow flips teal when open */
.ncf-app .select2-container--default.select2-container--open
    .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary, #199c82) transparent !important;
    border-width: 0 5px 6px 5px !important;
}

/* ── Dropdown panel ───────────────────────────────────────────── */
.select2-dropdown {
    background: #fff !important;
    border: 1.5px solid #dce6f0 !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 8px rgba(15,23,42,.07),
        0 16px 40px rgba(15,23,42,.11) !important;
    padding: 6px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}

/* Pop-in animation */
.select2-dropdown--below {
    transform-origin: top center !important;
    animation: s2PopIn .2s cubic-bezier(.22,1,.36,1) both !important;
}
.select2-dropdown--above {
    transform-origin: bottom center !important;
    animation: s2PopInAbove .2s cubic-bezier(.22,1,.36,1) both !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

/* ── Dropdown search field ────────────────────────────────────── */
.select2-container--default .select2-search--dropdown {
    padding: 6px 6px 4px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary, #199c82) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(25,156,130,.12) !important;
}

/* ── Results list ─────────────────────────────────────────────── */
.select2-container--default .select2-results__options {
    padding: 2px 0 !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e2e8f0 transparent !important;
}
.select2-container--default .select2-results__options::-webkit-scrollbar { width: 5px; }
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: #dce6f0;
    border-radius: 10px;
}

/* ── Result items ─────────────────────────────────────────────── */
.select2-container--default .select2-results__option {
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    color: #374151 !important;
    border-radius: 9px !important;
    margin: 1px 2px !important;
    cursor: pointer !important;
    transition: background .13s ease, color .13s ease !important;
    line-height: 1.45 !important;
}

/* Hover — light tint, NOT full solid color */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #f0fdf8 !important;
    color: #0c5548 !important;
    font-weight: 500 !important;
}

/* Selected item — light teal background + bold text (matches screenshot) */
.select2-container--default .select2-results__option--selected {
    background: rgba(25,156,130,.1) !important;
    color: #0a5040 !important;
    font-weight: 700 !important;
}

/* Hover over already-selected item */
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background: rgba(25,156,130,.15) !important;
    color: #083c30 !important;
}

/* Disabled */
.select2-container--default .select2-results__option--disabled {
    color: #c4cdd9 !important;
    cursor: default !important;
}

/* Group label */
.select2-container--default .select2-results__group {
    padding: 10px 16px 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
}

/* No results */
.select2-container--default .select2-results__message {
    padding: 16px !important;
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  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 ──────────────────────────────────────── */
.cs3-firmas-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cs3-firma-panel {
    border: 2px dashed var(--b3-border); border-radius: var(--b3-radius);
    overflow: hidden; background: #fafcff; transition: border-color 0.2s;
}
.cs3-firma-panel:hover { border-color: rgba(25,156,130,.3); }
.cs3-firma-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--b3-bg); border-bottom: 1px solid var(--b3-border);
}
.cs3-firma-panel__title {
    font-size: 13px; font-weight: 600; color: var(--b3-text);
    display: flex; align-items: center; gap: 6px;
}
.cs3-firma-panel__title svg { width: 14px; height: 14px; color: var(--b3-muted); }
.cs3-firma-panel__badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.cs3-firma-panel__badge--req { background: rgba(239,68,68,.08); color: #ef4444; }
.cs3-firma-panel__badge--opt { background: rgba(14,165,233,.08); color: #0369a1; }
.cs3-firma-clear {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: #ef4444;
    background: #fef2f2; border: 1px solid #fecaca;
    padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s;
}
.cs3-firma-clear:hover { background: #fee2e2; }

.cs3-canvas-wrap { position: relative; }
.cs3-canvas {
    display: block; width: 100%; cursor: crosshair;
    touch-action: none; background: #fff;
}
.cs3-canvas-guide {
    position: absolute; bottom: 30px; left: 20px; right: 20px;
    height: 1px; background: #cbd5e1; pointer-events: none; opacity: 0.5;
}

.cs3-firma-panel__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-top: 1px solid var(--b3-border);
}
.cs3-firma-name { font-size: 13px; font-weight: 600; color: var(--b3-text); }
.cs3-firma-status { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; }
.cs3-firma-status--empty  { background: #f1f5f9; color: #94a3b8; }
.cs3-firma-status--signed { background: rgba(16,185,129,.12); color: #065f46; }
.cs3-firma-status--error  { background: #fef2f2; color: #ef4444; }

/* ── Firma professional mode toggle ───────────────────────── */
.cs3-firma-mode {
    display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--b3-border);
}
.cs3-firma-mode__opt {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--radius-lg);
    font-size: 13px; font-weight: 500; cursor: pointer;
    background: var(--b3-bg); border: 1.5px solid var(--b3-border);
    color: var(--b3-muted); transition: all 0.15s;
}
.cs3-firma-mode__opt:hover { border-color: rgba(25,156,130,.3); }
.cs3-firma-mode__opt--active {
    background: rgba(25,156,130,.08); border-color: var(--primary); color: var(--primary);
}
.cs3-firma-saved-preview {
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: #fff;
}
.cs3-firma-saved-preview img {
    max-width: 280px; max-height: 120px;
    border: 1px solid var(--b3-border); border-radius: 8px;
}

/* ── 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;
    }
}
@media print {
    .cs3-no-print { display: none !important; }
    .cs3-print-only { display: inline !important; }
    .sidebar, .topbar, .hamburger, .sidebar-overlay { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .content { padding: 0 !important; max-width: none !important; }
    .cs3-page { padding: 0 !important; max-width: none !important; }
    .cs3-doc {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !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; }
    /* Keep signatures together, avoid breaking across pages */
    .cs3-doc__firmas-section { page-break-inside: avoid; break-inside: 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; }
    .cs3-firmas-row { 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; }
    .cs3-firma-mode { 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 — Premium Redesign v2
   Prefijo: rem-
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────── */
.rem-layout{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:26px;align-items:start}
.rem-list-col{display:flex;flex-direction:column;min-width:0}

/* ── Hero header ─────────────────────────────────────────────────── */
.rem-hero{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    margin-bottom:24px;padding:22px 26px;border-radius:20px;flex-wrap:wrap;
    background:
        radial-gradient(120% 220% at 0% 0%, rgba(52,211,153,.18) 0%, rgba(52,211,153,0) 55%),
        radial-gradient(120% 220% at 100% 100%, rgba(124,58,237,.12) 0%, rgba(124,58,237,0) 55%),
        linear-gradient(135deg,#0e3b32 0%,#072b24 100%);
    color:#fff;position:relative;overflow:hidden;
    border:1px solid rgba(255,255,255,.05);
    box-shadow:0 22px 44px -22px rgba(7,43,36,.55);
}
.rem-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
        radial-gradient(circle at 18% 30%, rgba(255,255,255,.08) 0 1.5px, transparent 2px),
        radial-gradient(circle at 75% 70%, rgba(255,255,255,.06) 0 1.5px, transparent 2px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,.05) 0 1px, transparent 2px);
    background-size:90px 90px;opacity:.55;
}
.rem-hero__main{display:flex;align-items:center;gap:16px;min-width:0;flex:1;position:relative;z-index:1}
.rem-hero__avatar{
    width:54px;height:54px;border-radius:16px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#fff;
    background:linear-gradient(135deg,#34d399,#10b981);
    box-shadow:0 12px 26px -8px rgba(16,185,129,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.rem-hero__text{min-width:0}
.rem-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(209,250,229,.78);margin-bottom:5px}
.rem-hero__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.22);animation:rem-pulse-dot 2s ease-in-out infinite}
@keyframes rem-pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.22)}50%{box-shadow:0 0 0 5px rgba(52,211,153,.05)}}
.rem-hero__title{font-size:1.55rem;font-weight:800;color:#fff;margin:0;letter-spacing:-.025em;line-height:1.1}
.rem-hero__subtitle{font-size:.83rem;color:rgba(209,250,229,.78);margin:4px 0 0;font-weight:500}
.rem-hero__action{
    display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;
    font-size:.78rem;font-weight:700;letter-spacing:.02em;
    background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);
    cursor:pointer;transition:all .22s;text-decoration:none;white-space:nowrap;font-family:inherit;
    backdrop-filter:blur(8px);position:relative;z-index:1;
}
.rem-hero__action:hover{background:#fff;color:#0e3b32;border-color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(255,255,255,.45)}

/* ── KPIs (rem-stat) ─────────────────────────────────────────────── */
.rem-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}
.rem-stat{
    background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
    padding:18px 18px;position:relative;overflow:hidden;
    display:flex;align-items:center;gap:14px;cursor:default;
    transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s,border-color .22s;
}
.rem-stat:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(15,23,42,.2);border-color:transparent}
.rem-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.rem-stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;opacity:.07;transition:transform .25s ease}
.rem-stat:hover::after{transform:scale(1.18)}
.rem-stat--total::before{background:linear-gradient(180deg,#199c82,#10b981)}
.rem-stat--total::after{background:radial-gradient(circle,#199c82 0%,transparent 70%)}
.rem-stat--pendiente::before{background:linear-gradient(180deg,#f59e0b,#fb923c)}
.rem-stat--pendiente::after{background:radial-gradient(circle,#f59e0b 0%,transparent 70%)}
.rem-stat--completado::before{background:linear-gradient(180deg,#10b981,#22c55e)}
.rem-stat--completado::after{background:radial-gradient(circle,#10b981 0%,transparent 70%)}
.rem-stat--vencido::before{background:linear-gradient(180deg,#ef4444,#f43f5e)}
.rem-stat--vencido::after{background:radial-gradient(circle,#ef4444 0%,transparent 70%)}
.rem-stat__icon-wrap{
    width:46px;height:46px;border-radius:13px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.rem-stat--total .rem-stat__icon-wrap{background:linear-gradient(135deg,rgba(25,156,130,.14),rgba(25,156,130,.04));color:#199c82}
.rem-stat--pendiente .rem-stat__icon-wrap{background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(245,158,11,.04));color:#d97706}
.rem-stat--completado .rem-stat__icon-wrap{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(16,185,129,.04));color:#059669}
.rem-stat--vencido .rem-stat__icon-wrap{background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(239,68,68,.04));color:#dc2626}
.rem-stat__main{flex:1;min-width:0;position:relative;z-index:1}
.rem-stat__label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);margin-bottom:6px}
.rem-stat__value{font-size:1.85rem;font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--text-primary)}
.rem-stat--total .rem-stat__value{color:#199c82}
.rem-stat--pendiente .rem-stat__value{color:#d97706}
.rem-stat--completado .rem-stat__value{color:#059669}
.rem-stat--vencido .rem-stat__value{color:#dc2626}

/* ── Controls (search + segments + chips) ────────────────────────── */
.rem-controls{
    background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
    padding:14px 16px;margin-bottom:14px;
    box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.rem-controls__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rem-controls__row + .rem-controls__row{margin-top:11px;padding-top:11px;border-top:1px dashed var(--border-light)}
.rem-controls__hint{font-size:.66rem;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-right:2px;flex-shrink:0}
.rem-controls__results{margin-left:auto;font-size:.74rem;color:var(--text-muted);font-weight:600;flex-shrink:0;white-space:nowrap}

/* Search */
.rem-search-wrap{position:relative;flex:1;min-width:220px}
.rem-search-input{
    width:100%;height:42px;padding:0 38px 0 40px;border:1.5px solid var(--border);
    border-radius:12px;font-size:.875rem;color:var(--text-primary);background:#fff;
    outline:none;transition:all .2s;box-sizing:border-box;font-family:inherit;
}
.rem-search-input::placeholder{color:#94a3b8}
.rem-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(25,156,130,.12)}
.rem-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;display:flex;pointer-events:none;transition:color .2s;z-index:1}
.rem-search-wrap:focus-within .rem-search-icon{color:var(--primary)}
.rem-search-clear{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;
    background:#f1f5f9;border:none;color:#64748b;cursor:pointer;padding:0;
    display:none;align-items:center;justify-content:center;border-radius:50%;transition:all .15s;
}
.rem-search-clear:hover{background:#fee2e2;color:#dc2626}
.rem-search-clear.visible{display:flex}

/* Segmented filter tabs */
.rem-filter-row{
    display:inline-flex;gap:2px;background:#f1f5f9;border:1px solid var(--border-light);
    border-radius:12px;padding:4px;overflow-x:auto;scrollbar-width:none;
}
.rem-filter-row::-webkit-scrollbar{display:none}
.rem-filter-tab{
    padding:8px 14px;border-radius:9px;font-size:.76rem;font-weight:700;cursor:pointer;
    border:none;background:transparent;color:#64748b;transition:all .18s;
    font-family:inherit;white-space:nowrap;letter-spacing:.01em;flex-shrink:0;
}
.rem-filter-tab:hover:not(.active){background:rgba(255,255,255,.7);color:var(--text-primary)}
.rem-filter-tab.active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04)}

/* Priority chips */
.rem-prio-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.rem-prio-chip{
    padding:6px 12px;border-radius:20px;font-size:.72rem;font-weight:700;border:1.5px solid var(--border);
    cursor:pointer;transition:all .18s;background:var(--bg-card);color:var(--text-secondary);
    font-family:inherit;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px;
}
.rem-prio-chip:hover{border-color:#94a3b8;color:var(--text-primary);transform:translateY(-1px)}
.rem-prio-chip.active{border-color:transparent;color:#fff;transform:translateY(-1px)}
.rem-prio-chip[data-prio="todos"].active{background:linear-gradient(135deg,#199c82,#10b981);box-shadow:0 4px 14px -3px rgba(25,156,130,.45)}
.rem-prio-chip[data-prio="urgente"].active{background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 4px 14px -3px rgba(124,58,237,.45)}
.rem-prio-chip[data-prio="alta"].active{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 4px 14px -3px rgba(220,38,38,.45)}
.rem-prio-chip[data-prio="media"].active{background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 4px 14px -3px rgba(217,119,6,.45)}
.rem-prio-chip[data-prio="baja"].active{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 4px 14px -3px rgba(22,163,74,.45)}
.rem-prio-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.rem-prio-chip.active .rem-prio-dot{box-shadow:0 0 0 2px rgba(255,255,255,.55) inset}

/* Hide legacy results row (kept in markup for JS compat) */
.rem-results-row{display:none}
.rem-results-count{font-size:.74rem;color:var(--text-muted);font-weight:600}

/* ── Card list ───────────────────────────────────────────────────── */
.rem-list{display:flex;flex-direction:column;gap:10px}

.rem-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
    padding:16px 18px 16px 22px;display:flex;gap:14px;align-items:flex-start;
    transition:box-shadow .22s,transform .22s,border-color .22s;
    position:relative;overflow:hidden;
}
.rem-card:hover{box-shadow:0 16px 36px -18px rgba(15,23,42,.18);transform:translateY(-2px);border-color:transparent}
.rem-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0}
.rem-card.prio-baja::before{background:linear-gradient(180deg,#4ade80,#16a34a)}
.rem-card.prio-media::before{background:linear-gradient(180deg,#fcd34d,#d97706)}
.rem-card.prio-alta::before{background:linear-gradient(180deg,#fb923c,#dc2626)}
.rem-card.prio-urgente::before{background:linear-gradient(180deg,#c084fc,#7c3aed)}
.rem-card.estado-completado{background:linear-gradient(135deg,#fafcfb,#f1f5f9)}
.rem-card.estado-completado .rem-card__title{text-decoration:line-through;color:var(--text-muted)}
.rem-card.estado-cancelado{opacity:.5}

.rem-card__check{flex-shrink:0;margin-top:2px}
.rem-check-btn{
    width:26px;height:26px;border-radius:50%;border:2px solid #cbd5e1;background:transparent;
    cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent;
    transition:all .2s;
}
.rem-check-btn:hover:not(.done){border-color:#16a34a;background:#f0fdf4;color:#16a34a;transform:scale(1.08)}
.rem-check-btn.done{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:#16a34a;color:#fff;box-shadow:0 4px 10px -2px rgba(22,163,74,.45)}

.rem-card__body{flex:1;min-width:0}
.rem-card__title{font-size:.92rem;font-weight:700;color:var(--text-primary);margin:0 0 4px;line-height:1.4;letter-spacing:-.005em}
.rem-card__desc{font-size:.8rem;color:var(--text-secondary);margin:0 0 10px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.rem-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}

.rem-card__actions{flex-shrink:0;display:flex;gap:5px;align-items:flex-start;opacity:0;transition:opacity .2s}
.rem-card:hover .rem-card__actions, .rem-card:focus-within .rem-card__actions{opacity:1}

.rem-action-btn{
    width:32px;height:32px;border-radius:9px;border:1.5px solid var(--border);background:var(--bg-card);
    cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;
    transition:all .15s;
}
.rem-action-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(25,156,130,.08);transform:translateY(-1px)}
.rem-action-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2}

/* Badges */
.rem-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.02em}
.rem-badge--baja{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.rem-badge--media{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.rem-badge--alta{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.rem-badge--urgente{background:#faf5ff;color:#6b21a8;border:1px solid #e9d5ff}
.rem-badge--fecha{background:#f8fafc;color:var(--text-secondary);border:1px solid var(--border)}
.rem-badge--rep{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.rem-badge--vencido{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;font-weight:800;animation:rem-pulse 1.6s ease-in-out infinite}
.rem-badge--email{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}
@keyframes rem-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}

/* Postpone dropdown */
.rem-postpone{position:relative}
.rem-postpone-btn{display:flex;align-items:center;gap:2px;padding:0 8px;width:auto}
.rem-postpone-menu{
    display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--bg-card);
    border:1px solid var(--border);border-radius:12px;
    box-shadow:0 18px 38px -10px rgba(15,23,42,.2);z-index:60;min-width:160px;padding:6px;
}
.rem-postpone.is-open .rem-postpone-menu{display:block;animation:rem-fade-in .15s ease}
@keyframes rem-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.rem-postpone-item{
    display:flex;align-items:center;gap:8px;width:100%;padding:8px 11px;text-align:left;
    font-size:.8rem;font-weight:600;color:var(--text-secondary);border:none;background:none;
    cursor:pointer;font-family:inherit;border-radius:8px;transition:all .12s;
}
.rem-postpone-item:hover{background:rgba(25,156,130,.08);color:var(--primary)}
.rem-postpone-item svg{flex-shrink:0;opacity:.7}

/* ─────────────────────────────────────────────────────────────────────
   FORM PANEL — Premium redesign
   ───────────────────────────────────────────────────────────────────── */
.rem-form-panel{
    background:var(--bg-card);border:1px solid var(--border);border-radius:20px;
    overflow:hidden;position:sticky;top:24px;
    box-shadow:0 24px 48px -28px rgba(15,23,42,.18), 0 1px 0 rgba(15,23,42,.02);
}
.rem-form-hero{
    position:relative;padding:22px 24px 20px;color:#fff;display:flex;align-items:center;gap:14px;
    background:
        radial-gradient(120% 200% at 100% 0%, rgba(124,58,237,.18) 0%, transparent 55%),
        linear-gradient(135deg,#0e3b32 0%,#199c82 100%);
    overflow:hidden;
}
.rem-form-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1.5px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.05) 0 1.5px, transparent 2px);
    background-size:80px 80px;opacity:.55;
}
.rem-form-hero__icon{
    width:44px;height:44px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -6px rgba(7,43,36,.5);
    position:relative;z-index:1;
}
.rem-form-hero__text{flex:1;min-width:0;position:relative;z-index:1}
.rem-form-title{font-size:1rem;font-weight:800;margin:0;display:flex;align-items:center;gap:10px;color:#fff;letter-spacing:-.005em}
.rem-form-title-dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.3);flex-shrink:0;transition:background .3s, box-shadow .3s}
.rem-form-subtitle{font-size:.74rem;color:rgba(209,250,229,.78);margin:3px 0 0;font-weight:500;letter-spacing:.01em}

.rem-form-close-btn{display:none}

.rem-form-body{padding:22px 22px 24px}

/* Field architecture */
.rem-field{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.rem-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.rem-field-row .rem-field{margin-bottom:0}

.rem-field__label{
    font-size:.7rem;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.08em;
    display:flex;align-items:center;gap:8px;line-height:1;
}
.rem-field__label-icon{
    width:22px;height:22px;border-radius:7px;background:rgba(25,156,130,.1);color:var(--primary);
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rem-field__req{
    margin-left:auto;font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:#dc2626;background:#fee2e2;padding:3px 8px;border-radius:10px;
    display:inline-flex;align-items:center;gap:4px;
}
.rem-field__req::before{content:"";width:5px;height:5px;border-radius:50%;background:#dc2626;animation:rem-pulse-dot 2s ease-in-out infinite}

.rem-field__control{position:relative;display:flex;align-items:stretch}
.rem-field__leading{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:#94a3b8;display:flex;pointer-events:none;transition:color .2s;z-index:2;
}
.rem-field__input,.rem-field__textarea{
    width:100%;height:46px;padding:0 14px;border:1.5px solid var(--border);border-radius:12px;
    font-family:inherit;font-size:.9rem;color:var(--text-primary);background:#fff;outline:none;
    transition:all .2s;box-sizing:border-box;
}
.rem-field__input--icon{padding-left:42px}
.rem-field__input:hover,.rem-field__textarea:hover{border-color:#94a3b8}
.rem-field__input:focus,.rem-field__textarea:focus{
    border-color:var(--primary);box-shadow:0 0 0 4px rgba(25,156,130,.12);
}
.rem-field__control:focus-within .rem-field__leading{color:var(--primary)}

.rem-field__textarea{height:auto;min-height:96px;padding:13px 14px;line-height:1.55;resize:vertical}
.rem-field__counter{
    position:absolute;right:12px;bottom:8px;font-size:.66rem;font-weight:700;color:#94a3b8;
    background:rgba(255,255,255,.85);padding:2px 7px;border-radius:8px;pointer-events:none;backdrop-filter:blur(4px);
}

input.rem-field__input[type="date"],
input.rem-field__input[type="time"]{font-family:inherit;color-scheme:light}
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 .2s}
input.rem-field__input[type="date"]:hover::-webkit-calendar-picker-indicator,
input.rem-field__input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:.9}

/* 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 — visual chip selector */
.rem-prio-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rem-prio-pick{
    padding:10px 6px;border:1.5px solid var(--border);background:#fff;border-radius:11px;
    font-family:inherit;font-size:.72rem;font-weight:700;color:#475569;cursor:pointer;
    transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:6px;
    text-transform:capitalize;line-height:1;
}
.rem-prio-pick:hover{border-color:#94a3b8;color:var(--text-primary);transform:translateY(-1px)}
.rem-prio-pick__dot{width:14px;height:14px;border-radius:50%;display:block;box-shadow:0 0 0 3px #fff inset, 0 0 0 1px rgba(0,0,0,.06)}
.rem-prio-pick.active{color:#fff;border-color:transparent;transform:translateY(-1px)}
.rem-prio-pick.active[data-val="baja"]{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 8px 18px -6px rgba(22,163,74,.55)}
.rem-prio-pick.active[data-val="media"]{background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 8px 18px -6px rgba(217,119,6,.55)}
.rem-prio-pick.active[data-val="alta"]{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 8px 18px -6px rgba(220,38,38,.55)}
.rem-prio-pick.active[data-val="urgente"]{background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 8px 18px -6px rgba(124,58,237,.55)}
.rem-prio-pick.active .rem-prio-pick__dot{background:#fff !important;box-shadow:0 0 0 3px transparent inset}

/* Repetition picker */
.rem-rep-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rem-rep-pick{
    padding:10px 12px;border:1.5px solid var(--border);background:#fff;border-radius:11px;
    font-family:inherit;font-size:.78rem;font-weight:600;color:#475569;cursor:pointer;
    transition:all .18s;display:flex;align-items:center;gap:9px;text-align:left;
}
.rem-rep-pick:hover{border-color:#94a3b8;color:var(--text-primary);background:#f8fafc}
.rem-rep-pick__icon{
    width:30px;height:30px;border-radius:9px;background:#f1f5f9;color:#64748b;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;
}
.rem-rep-pick.active{border-color:var(--primary);background:rgba(25,156,130,.06);color:var(--text-primary)}
.rem-rep-pick.active .rem-rep-pick__icon{background:linear-gradient(135deg,#199c82,#10b981);color:#fff;box-shadow:0 6px 14px -4px rgba(25,156,130,.5)}

/* State picker (edit mode) */
.rem-state-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rem-state-pick{
    padding:10px 10px;border:1.5px solid var(--border);background:#fff;border-radius:11px;
    font-family:inherit;font-size:.74rem;font-weight:700;color:#475569;cursor:pointer;
    transition:all .18s;text-transform:capitalize;
}
.rem-state-pick:hover{border-color:#94a3b8;color:var(--text-primary)}
.rem-state-pick.active[data-val="pendiente"]{border-color:#d97706;background:#fffbeb;color:#92400e;box-shadow:0 4px 10px -3px rgba(217,119,6,.3)}
.rem-state-pick.active[data-val="completado"]{border-color:#16a34a;background:#f0fdf4;color:#15803d;box-shadow:0 4px 10px -3px rgba(22,163,74,.3)}
.rem-state-pick.active[data-val="cancelado"]{border-color:#94a3b8;background:#f1f5f9;color:#334155}

/* Form actions */
.rem-form-actions{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--border)}
.rem-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:48px;padding:0 20px;border-radius:13px;font-family:inherit;font-size:.86rem;font-weight:700;
    cursor:pointer;transition:all .22s;border:none;letter-spacing:.01em;
    position:relative;overflow:hidden;
}
.rem-btn--primary{
    background:linear-gradient(135deg,#199c82 0%,#10b981 100%);color:#fff;
    box-shadow:0 10px 22px -8px rgba(25,156,130,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.rem-btn--primary::after{
    content:"";position:absolute;inset:0;background:linear-gradient(135deg,#10b981 0%,#199c82 100%);
    opacity:0;transition:opacity .25s;
}
.rem-btn--primary > *{position:relative;z-index:1}
.rem-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(25,156,130,.65)}
.rem-btn--primary:hover::after{opacity:1}
.rem-btn--primary:active{transform:translateY(0)}
.rem-btn--primary:disabled{opacity:.7;cursor:not-allowed;transform:none}
.rem-btn--ghost{background:#fff;color:var(--text-secondary);border:1.5px solid var(--border)}
.rem-btn--ghost:hover{background:#f8fafc;color:var(--text-primary);border-color:#cbd5e1}
.rem-btn__icon{display:inline-flex;align-items:center;transition:transform .2s}
.rem-btn--primary:hover .rem-btn__icon{transform:translateX(3px)}

/* ── Empty state ─────────────────────────────────────────────────── */
.rem-empty{
    text-align:center;padding:64px 24px;color:var(--text-muted);
    background:var(--bg-card);border:1px dashed var(--border);border-radius:16px;
}
.rem-empty__icon{margin:0 auto 14px;opacity:.25;display:block}
.rem-empty__title{font-size:1rem;font-weight:700;color:var(--text-secondary);margin:0 0 6px}
.rem-empty__sub{font-size:.83rem;margin:0}

/* ── Skeleton loader ─────────────────────────────────────────────── */
.rem-skel{background:linear-gradient(90deg,var(--bg-card-hover) 25%,color-mix(in srgb,var(--border) 60%,transparent) 50%,var(--bg-card-hover) 75%);background-size:400% 100%;animation:b4-shimmer 1.5s infinite linear;border-radius:8px}
.rem-skel-overlay{position:absolute;inset:0;z-index:20;background:var(--bg-main,#f1f5f9);display:flex;flex-direction:column;gap:24px;padding:0;transition:opacity .35s ease}
.rem-skel-page-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.rem-skel-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rem-skel-layout{display:grid;grid-template-columns:1fr 410px;gap:26px}
.rem-skel-list-col{display:flex;flex-direction:column;gap:10px}
@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:16px 0 4px;text-align:center;display:none}
.rem-load-more-info{font-size:.74rem;color:var(--text-muted);margin-bottom:9px;font-weight:600}
.rem-load-more-btn{
    display:inline-flex;align-items:center;gap:7px;padding:10px 24px;border-radius:22px;
    border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
    font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit;
}
.rem-load-more-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(25,156,130,.06);transform:translateY(-1px)}

/* ── FAB — mobile only ───────────────────────────────────────────── */
.rem-fab{
    position:fixed;bottom:22px;right:18px;z-index:300;display:none;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,#199c82,#10b981);color:#fff;border:none;cursor:pointer;
    box-shadow:0 14px 32px -6px rgba(25,156,130,.55), inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .22s,box-shadow .22s;
}
.rem-fab:hover{transform:scale(1.08) rotate(90deg);box-shadow:0 18px 38px -6px rgba(25,156,130,.65)}
.rem-fab:active{transform:scale(.95)}

/* 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;
}
.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: #199c82; background: var(--bg-card); box-shadow: 0 0 0 3px rgba(25,156,130,.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: #199c82; background: var(--bg-card); box-shadow: 0 0 0 3px rgba(25,156,130,.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: #199c82; background: rgba(25,156,130,.08); }
.mc3-tip-trigger:focus { outline: none; color: #199c82; }

/* ── 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: #199c82; 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(25,156,130,.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(25,156,130,.08); color: #199c82;
    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: #199c82; 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(25,156,130,.06); border: 1px solid rgba(25,156,130,.1);
}
.mc3-demo-portal__greeting-icon { color: #199c82; 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(25,156,130,.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(25,156,130,.03);
    animation: mc3PreviewPulse 1.5s ease infinite;
}
@keyframes mc3PreviewPulse {
    0%, 100% { background: rgba(25,156,130,.03); }
    50% { background: rgba(25,156,130,.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: #199c82; color: #fff;
    font-size: .65rem; font-weight: 700;
    font-family: var(--font-family); letter-spacing: .03em;
    box-shadow: 0 2px 8px rgba(25,156,130,.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: #199c82; color: #199c82; }
.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: #199c82; box-shadow: 0 0 0 3px rgba(25,156,130,.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(25,156,130,.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(25,156,130,.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: #199c82; color: #199c82; background: rgba(25,156,130,.05); }
.mc3-input--inline {
    flex: 1; height: 32px; padding: 0 .65rem;
    border: 1.5px solid #199c82; 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(25,156,130,.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: #199c82; }
.mc3-chip__input {
    border: none; border-bottom: 1.5px solid #199c82;
    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: #199c82; 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(25,156,130,.25);
}
.mc3-btn-save:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(25,156,130,.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; }
}


/* 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:18px 18px;gap:14px;border-radius:18px;margin-bottom:18px}
    .rem-hero__avatar{width:46px;height:46px;border-radius:13px}
    .rem-hero__title{font-size:1.3rem}
    .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:14px 14px;gap:12px}
    .rem-stat__icon-wrap{width:40px;height:40px;border-radius:11px}
    .rem-stat__value{font-size:1.55rem}
    .rem-controls{padding:12px;border-radius:14px}
    .rem-controls__row{gap:10px}
    .rem-search-wrap{min-width:unset;flex:1 1 100%}
    .rem-filter-row{display:flex;width:100%}
    .rem-filter-tab{padding:8px 10px;font-size:.72rem;flex:1;text-align:center}
    .rem-prio-chips{gap:5px}
    .rem-prio-chip{padding:5px 11px;font-size:.7rem}
    .rem-controls__results{margin-left:0;width:100%;text-align:center}
    .rem-controls__hint{display:none}
    .rem-card{padding:14px 14px 14px 18px}
    .rem-card__actions{opacity:1}
    .rem-postpone-menu{right:auto;left:0}
    .rem-field-row{grid-template-columns:1fr;gap:14px}
    .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:18px}
    .rem-form-panel.rem-form-open{display:block;animation:rem-fade-in .25s ease}
    .rem-form-close-btn{
        display:flex;align-items:center;justify-content:center;width:34px;height:34px;
        border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);
        cursor:pointer;color:#fff;transition:all .15s;flex-shrink:0;margin-left:auto;
        position:relative;z-index:1;
    }
    .rem-form-close-btn:hover{background:rgba(255,255,255,.22)}
    /* 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{padding:16px;flex-direction:column;align-items:stretch}
    .rem-hero__main{flex-direction:row;align-items:center}
    .rem-stats-grid{grid-template-columns:1fr 1fr;gap:8px}
    .rem-stat__value{font-size:1.45rem}
    .rem-card{padding:12px 12px 12px 16px}
    .rem-card__title{font-size:.86rem}
    .rem-badge{font-size:.65rem;padding:2px 8px}
    .rem-form-body{padding:18px 18px 20px}
    .rem-form-hero{padding:18px 18px 16px}
    .rem-prio-picker{grid-template-columns:repeat(2,1fr)}
    .rem-rep-picker{grid-template-columns:1fr}
    .rem-state-picker{grid-template-columns: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 ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .gsearch-wrap { max-width: none; flex: 1; min-width: 0; margin: 0 .25rem; }
    .gsearch-group-ico,
    .gsearch-item__icon { display: none; }
    .gsearch-hints { display: none !important; }
    .gsearch-input { font-size: .8rem; }
    .gsearch-input::placeholder { font-size: .78rem; }
    .topbar-breadcrumb { display: none; }
    .gsearch-input-row { height: 36px; }
}
@media (max-width: 480px) {
    .gsearch-wrap { margin: 0 .15rem; }
    .gsearch-input-row { padding: 0 .55rem; }
    /* Dropdown seguro en móvil: se ancla al borde derecho del input y nunca desborda el viewport */
    .gsearch-dropdown {
        left: auto;
        right: 0;
        width: max(280px, 90vw);
        max-width: calc(100vw - 16px);
        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(25,156,130,.15);
  color: #5eead4;
  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(25,156,130,.12);
  color: #5eead4;
  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: #20bca0;
}
.snav2-flat__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 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: #5eead4;
  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: #20bca0;
}

/* 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: #20bca0;
}

/* 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: #5eead4;
  font-weight: 600;
}
.snav2-sub.active svg {
  opacity: 1;
  color: #20bca0;
}

/* ── 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 */
.chl2-stats { display: grid; grid-template-columns: repeat(4, 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; }
.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; }

/* 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; justify-content: center; padding: 18px 20px; border-top: 1px solid var(--border); }

/* 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, 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, 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: 1fr 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; }
}

/* =================================================================
   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; }
}


/* ═══════════════════════════════════════════════════════════════════════
   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;
}

.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-kpis-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.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; }

.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 begin to compress */
@media (max-width: 1200px) {
    .rpt2-kpis-inner { 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%; }
    .rpt2-btn-apply,
    .rpt2-btn-ghost { flex: 1; justify-content: center; }
    .rpt2-btn-apply {
        height: 48px !important;
        font-size: .95rem;
        font-weight: 700;
        padding: 0 1.5rem !important;
        margin-top: .35rem;
        border-radius: 12px !important;
        box-shadow:
            0 2px 4px rgba(15,23,42,.12),
            0 8px 24px rgba(15,23,42,.10),
            inset 0 1px 0 rgba(255,255,255,.14);
    }
    .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; }

    /* Visits table: hide less critical columns */
    .rpt2-vt-tipo,
    .rpt2-visits-table th:nth-child(3),
    .rpt2-visits-table td:nth-child(3) { display: none; }
}

/* 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-inner { 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); }
    /* Hide diagnosis on mobile visits table */
    .rpt2-vt-diag,
    .rpt2-visits-table th:nth-child(4),
    .rpt2-visits-table td:nth-child(4) { display: none; }

    .rpt2-scroll-badge { font-size: .7rem; }
    .rpt2-visits-sub { display: none; }
}

/* 480px: KPIs 1-col, minimal everything */
@media (max-width: 480px) {
    .rpt2-kpis-inner { grid-template-columns: 1fr; }
    .rpt2-kpi-skel   { grid-template-columns: 1fr; }

    .rpt2-gen-row       { gap: .6rem; }
    .rpt2-btn-gen       { height: 38px; font-size: .78rem; }

    /* Income table: hide acumulado column on very small */
    .rpt2-income-accum,
    .rpt2-income-table th:last-child,
    .rpt2-income-table td:last-child { display: none; }

    /* Visits table: hide monto column */
    .rpt2-vt-monto,
    .rpt2-visits-table th:nth-child(6),
    .rpt2-visits-table td:nth-child(6) { display: none; }

    .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
   Prefix: cal2-
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   cal2 — Calendario de Citas v2  (rewrite: correct vars + responsive)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wrap ──────────────────────────────────────────────────────────── */
.cal2-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    animation: cal2FadeIn .35s ease both;
}
@keyframes cal2FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    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;
}
.cal2-header__ico {
    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(59,130,246,.3);
}
.cal2-header__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .12rem;
    letter-spacing: -.02em;
    font-family: var(--font-family);
}
.cal2-header__sub {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family);
}

/* Agendar Cita button */
.cal2-btn-agendar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    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;
    box-shadow: 0 2px 10px rgba(59,130,246,.35);
    transition: opacity .15s, transform .15s, box-shadow .15s;
    font-family: var(--font-family);
    white-space: nowrap;
}
.cal2-btn-agendar:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(59,130,246,.4);
}
.cal2-btn-agendar:active { transform: translateY(0); box-shadow: none; }

/* ── Layout grid ───────────────────────────────────────────────────── */
.cal2-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: start;
    gap: 1rem;
}

/* Mobile sidebar toggle — hidden on desktop */
.cal2-sidebar-toggle {
    display: none;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: var(--font-family);
    width: fit-content;
}
.cal2-sidebar-toggle:hover,
.cal2-sidebar-toggle.is-active {
    background: var(--bg-body);
    color: var(--text-primary);
    border-color: #3b82f6;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.cal2-sidebar {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    position: sticky;
    top: calc(var(--topbar-height, 64px) + 1rem);
}

/* Stats card */
.cal2-stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-sm);
}

.cal2-section-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin: 0 0 .75rem;
    font-family: var(--font-family);
}

.cal2-stats-list { display: flex; flex-direction: column; gap: .55rem; }

.cal2-stat-skel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.cal2-skel-line {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: cal2Shimmer 1.5s infinite linear;
}

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

.cal2-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.cal2-stat-label {
    font-size: .8rem;
    color: var(--text-secondary);
    font-family: var(--font-family);
}
.cal2-stat-val {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-family);
}
.cal2-stat-val--blue   { color: #2563eb; }
.cal2-stat-val--red    { color: #dc2626; }

/* Legend card */
.cal2-legend-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-sm);
}
.cal2-legend-list { display: flex; flex-direction: column; gap: .3rem; }
.cal2-legend-group { display: flex; flex-direction: column; gap: .35rem; }
.cal2-legend-group-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: 0 0 .1rem;
    font-family: var(--font-family);
}
.cal2-legend-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    color: var(--text-secondary);
    font-family: var(--font-family);
}
.cal2-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

/* ── Skeleton loader for calendar ──────────────────────────────────── */
.cal2-skel-wrap {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.cal2-skel-toolbar {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
    align-items: center;
}
.cal2-skel-block {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: cal2Shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm);
}
.cal2-skel-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .35rem;
}
.cal2-skel-cell {
    height: 72px;
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: cal2Shimmer 1.5s infinite linear;
    border-radius: 8px;
}
.cal2-skel-cell:nth-child(2n)   { animation-delay: .1s; }
.cal2-skel-cell:nth-child(3n)   { animation-delay: .2s; }
.cal2-skel-cell:nth-child(5n)   { animation-delay: .15s; }
.cal2-skel-cell:nth-child(7n+1) { animation-delay: .05s; }

/* ── Toolbar ───────────────────────────────────────────────────────── */
.cal2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.cal2-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.cal2-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.cal2-nav-btn:hover {
    background: var(--bg-body);
    color: var(--text-primary);
    border-color: #3b82f6;
}
.cal2-period {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
    font-family: var(--font-family);
    letter-spacing: -.01em;
}
.cal2-today-btn {
    height: 32px;
    padding: 0 .8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-family: var(--font-family);
    margin-left: .1rem;
}
.cal2-today-btn:hover {
    background: rgba(59,130,246,.07);
    color: #3b82f6;
    border-color: rgba(59,130,246,.35);
}

/* View switcher */
.cal2-view-group {
    display: flex;
    background: var(--bg-body);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--border);
}
.cal2-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 28px;
    padding: 0 .7rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-size: .77rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
    font-family: var(--font-family);
}
.cal2-view-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* ── FullCalendar overrides ─────────────────────────────────────────── */
#cal2-fc {
    padding: .5rem .75rem .85rem;
    font-family: var(--font-family) !important;
}
.fc { font-family: var(--font-family) !important; }

.fc-daygrid-event {
    border-radius: 5px !important;
    border: none !important;
    padding: 2px 6px !important;
    font-size: .73rem !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    cursor: pointer;
}
.fc-timegrid-event {
    border-radius: 6px !important;
    border: none !important;
    padding: 3px 6px !important;
    font-size: .73rem !important;
}
.fc-list-event-title a {
    font-size: .83rem !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    color: var(--text-primary) !important;
}
.fc-list-event-time {
    font-size: .78rem !important;
    color: var(--text-muted) !important;
}
.fc-col-header-cell-cushion {
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-family: var(--font-family) !important;
}
.fc-daygrid-day-number {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-family: var(--font-family) !important;
}
.fc-day-today { background: rgba(59,130,246,.04) !important; }
.fc-day-today .fc-daygrid-day-number {
    background: #3b82f6 !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .76rem !important;
    margin: 2px;
}
#cal2-fc .fc-button, #cal2-fc .fc-button-primary { display: none !important; }

/* ── FC6 grid-fix: ensure table layout works with global resets ──── */
#cal2-fc .fc .fc-scrollgrid { border-color: var(--border-light) !important; }
#cal2-fc .fc .fc-scrollgrid,
#cal2-fc .fc .fc-scrollgrid table { width: 100% !important; }
#cal2-fc .fc .fc-scrollgrid td,
#cal2-fc .fc .fc-scrollgrid th { border-color: var(--border-light) !important; }
#cal2-fc .fc .fc-daygrid-body,
#cal2-fc .fc .fc-daygrid-body table { width: 100% !important; }
#cal2-fc .fc .fc-col-header { width: 100% !important; }
#cal2-fc .fc .fc-col-header table { width: 100% !important; }
#cal2-fc .fc .fc-view-harness { position: relative !important; }
#cal2-fc .fc-list-day-cushion { background: var(--bg-body) !important; }
#cal2-fc .fc-list-event:hover td { background: var(--bg-card-hover) !important; cursor: pointer; }
.fc-more-link {
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    font-family: var(--font-family) !important;
}

/* ── List view: clean, readable on all screen sizes ─────────────────── */
#cal2-fc .fc-list {
    border: none !important;
}
#cal2-fc .fc-list-table { width: 100%; border-collapse: collapse; }

#cal2-fc .fc-list-day th {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
}
#cal2-fc .fc-list-day-cushion {
    background: var(--bg-body) !important;
    padding: .5rem .85rem .4rem !important;
}
#cal2-fc .fc-list-day-text,
#cal2-fc .fc-list-day-side-text {
    font-size: .76rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    text-transform: capitalize !important;
    font-family: var(--font-family) !important;
    letter-spacing: .01em !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: .55rem .85rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    vertical-align: middle !important;
}
#cal2-fc .fc-list-event:hover td {
    background: var(--bg-body) !important;
    cursor: pointer !important;
}
#cal2-fc .fc-list-event-dot {
    border-radius: 50% !important;
    width: 10px !important;
    height: 10px !important;
}
#cal2-fc .fc-list-event-time {
    font-size: .77rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    font-family: var(--font-family) !important;
    white-space: nowrap !important;
    min-width: 48px !important;
}
#cal2-fc .fc-list-event-title a {
    font-size: .84rem !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: 2.5rem 1rem !important;
}
#cal2-fc .fc-list-empty-cushion {
    font-size: .85rem !important;
    color: var(--text-muted) !important;
    font-family: var(--font-family) !important;
}

/* ── Month-view: better cell sizing ─────────────────────────────────── */
#cal2-fc .fc-daygrid-day { min-height: 80px; }
#cal2-fc .fc-daygrid-day-frame { padding: 2px 3px 4px; }
#cal2-fc .fc-daygrid-event-harness { margin-bottom: 1px !important; }

/* Loading state */
.cal2-loading-state { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* ══════════════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════════════ */
.cal2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.cal2-overlay.is-open { opacity: 1; pointer-events: all; }

.cal2-modal {
    background: var(--bg-card);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.08);
    width: 100%;
    max-width: 460px;
    transform: scale(.95) translateY(10px);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 90dvh);
    border: 1px solid var(--border-light);
}
.cal2-overlay.is-open .cal2-modal { transform: scale(1) translateY(0); }
.cal2-modal--agendar { max-width: 480px; }

/* Modal header */
.cal2-modal__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 1.25rem .95rem;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.cal2-modal__hdr-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    flex: 1;
}
.cal2-modal__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    flex-shrink: 0;
    font-family: var(--font-family);
}
.cal2-modal__avatar--teal  { background: rgba(13,148,136,.12);  color: #199c82; }
.cal2-modal__avatar--blue  { background: rgba(59,130,246,.12);  color: #3b82f6; }
.cal2-modal__patient {
    font-size: .93rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family);
    letter-spacing: -.01em;
}
.cal2-modal__close {
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.cal2-modal__close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* Type badges */
.cal2-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: var(--radius-lg);
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--font-family);
}
.cal2-type-badge--sesion { background: rgba(13,148,136,.1);  color: #199c82; }
.cal2-type-badge--cita   { background: rgba(37,99,235,.1);   color: #2563eb; }

/* Modal body */
.cal2-modal__body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow-y: auto;
    flex: 1;
}

/* Detail rows */
.cal2-detail-row { display: flex; flex-direction: column; gap: .22rem; }
.cal2-detail-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: var(--font-family);
}
.cal2-detail-val {
    font-size: .86rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
    padding-left: 1.5rem;
    font-family: var(--font-family);
}

/* Risk badges */
.cal2-risk-badge {
    display: inline-flex;
    align-items: center;
    padding: .22rem .65rem;
    border-radius: var(--radius-lg);
    font-size: .74rem;
    font-weight: 700;
    font-family: var(--font-family);
}
.cal2-risk--none   { background: rgba(13,148,136,.1);  color: #199c82; }
.cal2-risk--leve   { background: rgba(245,158,11,.1);  color: #b45309; }
.cal2-risk--mod    { background: rgba(249,115,22,.1);  color: #c2410c; }
.cal2-risk--alto   { background: rgba(239,68,68,.1);   color: #dc2626; }
.cal2-risk--urgent { background: rgba(124,58,237,.1);  color: #7c3aed; }

/* Edit mode */
.cal2-edit-body {
    background: rgba(59,130,246,.03);
    border-top: 1px solid var(--border-light);
}
.cal2-edit-title {
    font-size: .83rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .1rem;
    font-family: var(--font-family);
}
.cal2-edit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.cal2-edit-field { display: flex; flex-direction: column; gap: .3rem; }
.cal2-edit-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: var(--font-family);
}
.cal2-edit-input {
    height: 38px;
    padding: 0 .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
    font-family: var(--font-family);
}
.cal2-edit-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.cal2-edit-hint { font-size: .77rem; margin: .2rem 0 0; }

/* Modal footer */
.cal2-modal__footer {
    padding: .85rem 1.25rem 1rem;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    background: var(--bg-card);
}
.cal2-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}
.cal2-footer-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Shared modal buttons */
.cal2-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    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);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: var(--font-family);
}
.cal2-btn-outline:hover { border-color: #3b82f6; color: #3b82f6; }

.cal2-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 36px;
    padding: 0 .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(25,156,130,.25);
    background: rgba(25,156,130,.06);
    font-size: .8rem;
    font-weight: 600;
    color: #199c82;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: var(--font-family);
}
.cal2-btn-edit:hover { background: rgba(25,156,130,.12); border-color: rgba(25,156,130,.4); }

.cal2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 36px;
    padding: 0 .9rem;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    transition: opacity .15s, transform .15s;
    font-family: var(--font-family);
}
.cal2-btn-primary:hover { opacity: .88; transform: translateY(-1px); }

.cal2-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;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(59,130,246,.3);
    font-family: var(--font-family);
}
.cal2-btn-save:hover   { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(59,130,246,.38); }
.cal2-btn-save:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Agendar form ───────────────────────────────────────────────────── */
.cal2-form-field { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.cal2-form-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .71rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: var(--font-family);
}
.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;
}
.cal2-form-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;
    width: 100%;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: var(--font-family);
}
.cal2-form-input:focus {
    border-color: #3b82f6;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
input[type="date"].cal2-form-input,
input[type="time"].cal2-form-input { padding-right: .85rem; cursor: pointer; }

.cal2-form-textarea {
    padding: .6rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
    width: 100%;
    resize: vertical;
    min-height: 64px;
    font-family: var(--font-family);
    transition: border-color .15s, box-shadow .15s;
}
.cal2-form-textarea:focus {
    border-color: #3b82f6;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* Patient dropdown */
.cal2-patient-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.cal2-patient-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    font-size: .83rem;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-family);
    transition: background .1s;
}
.cal2-patient-option:hover { background: var(--bg-body); }
.cal2-patient-option:not(:last-child) { border-bottom: 1px solid var(--border-light); }

.cal2-patient-option-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(25,156,130,.1);
    color: #199c82;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-family);
}
.cal2-no-results {
    padding: .75rem .85rem;
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-family);
}
.cal2-selected-patient {
    font-size: .78rem;
    color: #199c82;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 5px;
    background: rgba(13,148,136,.08);
    font-family: var(--font-family);
}
.cal2-ag-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);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .cal2-layout { grid-template-columns: 190px 1fr; }
}

/* iPad portrait + tablet + móvil: sidebar colapsado a toggle (bp oficial lg-down) */
@media (max-width: 1023.98px) {
    .cal2-layout {
        grid-template-columns: 1fr;
    }
    .cal2-sidebar-toggle { display: inline-flex; }
    .cal2-sidebar {
        display: none;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .75rem;
    }
    .cal2-sidebar.is-open { display: flex; }
    .cal2-stats-card,
    .cal2-legend-card { flex: 1; min-width: 200px; }
}

@media (max-width: 640px) {
    .cal2-wrap { padding: .85rem .75rem; gap: .85rem; }

    /* Header stacks, button full-width */
    .cal2-header { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .cal2-header__ico { width: 38px; height: 38px; }
    .cal2-header__title { font-size: 1.05rem; }
    .cal2-btn-agendar { width: 100%; justify-content: center; height: 44px; font-size: .85rem; }

    /* Sidebar cards stack full-width */
    .cal2-stats-card,
    .cal2-legend-card { flex: none; width: 100%; min-width: 0; }

    /* Toolbar: nav row + view switcher row */
    .cal2-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: .75rem .85rem;
    }
    .cal2-nav { width: 100%; justify-content: space-between; }
    .cal2-period { min-width: 0; flex: 1; text-align: center; font-size: .85rem; }
    .cal2-view-group { width: 100%; }
    .cal2-view-btn { flex: 1; justify-content: center; font-size: .74rem; padding: 0 .35rem; height: 30px; }

    /* ── Month view: dot-only mode on mobile ────────────────────── */
    #cal2-fc { padding: .25rem .35rem .65rem; }
    #cal2-fc .fc-scrollgrid { border: none !important; }
    #cal2-fc .fc-scrollgrid td,
    #cal2-fc .fc-scrollgrid th { border-color: var(--border-light) !important; }

    /* Day cells compact */
    #cal2-fc .fc-daygrid-day { min-height: 52px; }
    #cal2-fc .fc-daygrid-day-top { justify-content: center; }
    #cal2-fc .fc-daygrid-day-number {
        font-size: .72rem !important;
        padding: 3px 0 1px !important;
        text-align: center !important;
    }
    #cal2-fc .fc-col-header-cell-cushion {
        font-size: .65rem !important;
        padding: 6px 2px !important;
        letter-spacing: .03em !important;
    }

    /* Events: show as colored dots only — hide time text */
    #cal2-fc .fc-daygrid-event {
        padding: 0 !important;
        margin: 0 1px 1px !important;
        background: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        min-height: 0 !important;
    }
    #cal2-fc .fc-daygrid-event .fc-event-time,
    #cal2-fc .fc-daygrid-event .fc-event-title { display: none !important; }
    #cal2-fc .fc-daygrid-event .fc-daygrid-event-dot {
        display: inline-block !important;
        margin: 0 !important;
    }
    /* Dot-only: use the event itself as the dot */
    #cal2-fc .fc-daygrid-dot-event {
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #cal2-fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        margin: 1px !important;
        flex-shrink: 0 !important;
    }
    #cal2-fc .fc-daygrid-dot-event .fc-event-time,
    #cal2-fc .fc-daygrid-dot-event .fc-event-title-container { display: none !important; }

    /* Event harness: wrap dots in a row */
    #cal2-fc .fc-daygrid-day-events {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1px !important;
        padding: 0 2px !important;
        min-height: 0 !important;
    }
    #cal2-fc .fc-daygrid-event-harness {
        margin: 0 !important;
        width: auto !important;
        position: static !important;
    }

    /* "+N more" link compact */
    #cal2-fc .fc-daygrid-more-link {
        font-size: .6rem !important;
        display: block !important;
        text-align: center !important;
        margin-top: 1px !important;
        width: 100% !important;
    }

    /* Today marker smaller */
    .fc-day-today .fc-daygrid-day-number {
        width: 22px !important;
        height: 22px !important;
        font-size: .68rem !important;
    }

    /* ── List view ──────────────────────────────────────────────── */
    #cal2-fc .fc-list-event td { padding: .6rem .75rem !important; }
    #cal2-fc .fc-list-day-cushion { padding: .45rem .75rem .35rem !important; }

    /* Skeleton */
    .cal2-skel-cell { height: 48px; }

    /* Modals as bottom sheets */
    .cal2-overlay { align-items: flex-end; padding: 0; }
    .cal2-modal {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: min(92vh, 92dvh);
        transform: translateY(24px);
    }
    .cal2-overlay.is-open .cal2-modal { transform: translateY(0); }

    .cal2-modal__hdr { padding: 1rem 1.1rem .85rem; }
    .cal2-modal__body { padding: .85rem 1.1rem; }
    .cal2-modal__footer { padding: .75rem 1.1rem .9rem; }

    .cal2-edit-fields { grid-template-columns: 1fr; }
    .cal2-form-row    { grid-template-columns: 1fr; }

    .cal2-footer-row { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
    .cal2-footer-right { width: 100%; display: flex; gap: .5rem; }
    .cal2-footer-right .cal2-btn-primary,
    .cal2-footer-right .cal2-btn-edit { flex: 1; justify-content: center; }
    .cal2-btn-outline { justify-content: center; }
    .cal2-btn-save    { width: 100%; justify-content: center; height: 44px; font-size: .85rem; }
}

@media (max-width: 420px) {
    .cal2-wrap { padding: .65rem .55rem; }
    /* Hide button text, show icons only in view switcher */
    .cal2-view-btn span { display: none; }
    .cal2-view-btn { padding: 0 .5rem; }
    .cal2-view-btn svg { display: block; }
    /* Nav: smaller period text */
    .cal2-period { font-size: .8rem; }
    /* 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: .73rem !important; min-width: 42px !important; }
    /* Month dots even smaller */
    #cal2-fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
        width: 6px !important;
        height: 6px !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);
}

/* --- 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;
}

/* ── 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);
}

/* ── 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);
}

/* --- 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;
    }
}



/* ════════════════════════════════════════════
   MÓDULO: TAREAS PSICOLÓGICAS
   /admin/tareas — tokens, layout, cards, modals
════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  --teal:        #199c82;
  --teal-dk:     #116d5b;
  --teal-lt:     #f0fdfa;
  --teal-glow:   rgba(13,148,136,.22);
  --teal-ring:   rgba(13,148,136,.14);
  --violet:      #7c3aed;
  --violet-lt:   #ede9fe;
  --blue:        #3b82f6;
  --blue-lt:     #eff6ff;
  --ok:          #10b981; --ok-bg:   #dcfce7;
  --warn:        #f59e0b; --warn-bg: #fef3c7;
  --err:         #ef4444; --err-bg:  #fee2e2;
  --surface:     #ffffff;
  --bg:          #f1f5f9;
  --text:        #0f172a;
  --text-2:      #334155;
  --sub:         #64748b;
  --muted:       #94a3b8;
  --border:      rgba(226,232,240,.9);
  --shadow-sm:   0 1px 4px rgba(15,23,42,.06);
  --shadow-md:   0 6px 24px rgba(15,23,42,.08);
  --shadow-lg:   0 20px 60px rgba(15,23,42,.12);
  --r:           20px;
  --r-sm:        12px;
  --r-xs:        8px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════════
   PAGE BASE
═══════════════════════════════════════════════ */
.tp-wrap { font-family: var(--font); color: var(--text); background: var(--bg); min-height: 100vh; min-height: 100dvh; }

/* ═══════════════════════════════════════════════
   ANIMATED BACKGROUND BLOBS
═══════════════════════════════════════════════ */
.tp-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.tp-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .45;
  animation: blobFloat 18s ease-in-out infinite alternate;
}
.tp-blob-1 { width: 700px; height: 700px; background: #ccfbf1; top: -200px; right: -150px; animation-delay: 0s; }
.tp-blob-2 { width: 500px; height: 500px; background: #ccfbf1; bottom: -150px; left: -100px; animation-delay: -6s; }
.tp-blob-3 { width: 400px; height: 400px; background: #fef3c7; top: 40%; left: 30%; animation-delay: -12s; }
@keyframes blobFloat {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  100% { transform: translate(40px,40px) scale(1.08) rotate(20deg); }
}

/* ═══════════════════════════════════════════════
   GLASS CARD
═══════════════════════════════════════════════ */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════
   STAGGER ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes enterUp {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.enter { animation: enterUp .65s cubic-bezier(.16,1,.3,1) both; }
.d1  { animation-delay: .05s; }
.d2  { animation-delay: .15s; }
.d3  { animation-delay: .25s; }
.d4  { animation-delay: .35s; }
.d5  { animation-delay: .45s; }

/* ═══════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════ */
.tp-page { position: relative; z-index: 1; padding: 32px 28px 60px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 768px) { .tp-page { padding: 20px 16px 48px; } }

/* ═══════════════════════════════════════════════
   HERO HEADER
═══════════════════════════════════════════════ */
.tp-hero {
  border-radius: 28px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #0c1a2e 0%, #0f2a20 55%, #0c1a2e 100%);
  padding: 40px 44px 44px;
  margin-bottom: 28px;
}
.tp-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tp-hero-glow-1, .tp-hero-glow-2 {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.tp-hero-glow-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(13,148,136,.18) 0%, transparent 65%);
  top: -180px; right: -80px;
  animation: heroFloat1 10s ease-in-out infinite;
}
.tp-hero-glow-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(124,58,237,.1) 0%, transparent 65%);
  bottom: -120px; left: 5%;
  animation: heroFloat2 13s ease-in-out infinite;
}
@keyframes heroFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-25px,20px)} }
@keyframes heroFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-15px)} }

.tp-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.tp-hero-left { display: flex; align-items: center; gap: 20px; }

.tp-hero-icon {
  width: 64px; height: 64px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: linear-gradient(135deg, rgba(13,148,136,.35), rgba(13,148,136,.1));
  border: 1px solid rgba(13,148,136,.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 28px rgba(13,148,136,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.tp-hero-icon svg { width: 28px; height: 28px; color: #2dd4bf; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tp-hero-title  { font-size: 1.75rem; font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1.1; }
.tp-hero-sub    { font-size: .9rem; color: rgba(255,255,255,.45); font-weight: 500; margin-top: .3rem; }

.tp-hero-right  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Stat chips */
.tp-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 10px 16px; backdrop-filter: blur(12px);
  transition: background .2s, border-color .2s;
}
.tp-chip:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.tp-chip-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tp-chip-ico.teal   { background: rgba(13,148,136,.25); color: #2dd4bf; }
.tp-chip-ico.violet { background: rgba(124,58,237,.25);  color: #c4b5fd; }
.tp-chip-ico.amber  { background: rgba(245,158,11,.25);  color: #fcd34d; }
.tp-chip-ico svg  { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-chip-val  { font-size: 1.35rem; font-weight: 900; color: #fff; line-height: 1; }
.tp-chip-lbl  { font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .07em; margin-top: .1rem; }

/* ═══════════════════════════════════════════════
   SEARCH PANEL
═══════════════════════════════════════════════ */
.tp-search {
  border-radius: var(--r);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.tp-search-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tp-search-icon {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal-lt), rgba(13,148,136,.06));
  border: 1px solid rgba(13,148,136,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal); box-shadow: 0 6px 18px var(--teal-ring);
}
.tp-search-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-search-field { flex: 1; min-width: 220px; }
.tp-search-label {
  font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sub); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.tp-search-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* Select2 */
.select2-container--default .select2-selection--single {
  height: 52px !important; border-radius: 14px !important;
  border: 2px solid var(--border) !important;
  background: rgba(255,255,255,.9) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important; padding-left: 18px !important;
  font-weight: 700 !important; font-family: var(--font) !important;
  font-size: .95rem !important; color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px !important; right: 14px !important; }
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px var(--teal-ring) !important;
  background: #fff !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--teal) !important;
}
.select2-dropdown {
  border: 2px solid rgba(226,232,240,.8) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.14) !important;
  overflow: hidden;
}
.select2-container--default .select2-results__option {
  padding: 11px 16px !important;
  font-weight: 600 !important; font-family: var(--font) !important;
}

/* ═══════════════════════════════════════════════
   SPLIT GRID
═══════════════════════════════════════════════ */
.tp-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 20px;
}

/* ═══════════════════════════════════════════════
   PANEL SHELL
═══════════════════════════════════════════════ */
.tp-panel { border-radius: var(--r); overflow: hidden; }
.tp-panel-head {
  padding: 22px 28px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.tp-panel-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 800; color: var(--text);
}
.tp-panel-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--teal-lt); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px var(--teal-ring);
}
.tp-panel-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-panel-body { padding: 24px 28px; }
@media (max-width: 768px) { .tp-panel-head, .tp-panel-body { padding: 16px 18px; } }

/* ═══════════════════════════════════════════════
   EMPTY / LOADING STATES
═══════════════════════════════════════════════ */
.tp-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 24px; text-align: center; gap: 0;
}
.tp-state-icon {
  width: 80px; height: 80px; border-radius: var(--radius-lg); margin-bottom: 22px;
  background: linear-gradient(135deg, var(--teal-lt), rgba(13,148,136,.04));
  border: 1px solid rgba(13,148,136,.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal); box-shadow: 0 10px 30px var(--teal-ring);
}
.tp-state-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tp-state h3  { font-size: 1.1rem; font-weight: 800; color: var(--text);  margin-bottom: 8px; }
.tp-state p   { font-size: .9rem; color: var(--muted); font-weight: 500; max-width: 280px; line-height: 1.65; }

/* Spinner */
.tp-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid var(--teal-lt);
  border-top-color: var(--teal);
  animation: spinRing .7s linear infinite;
  margin: 0 auto 22px;
  box-shadow: 0 6px 20px var(--teal-ring);
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
   LOADING STATE CONTAINER
═══════════════════════════════════════════════ */
#tp-loading { display: none; }

/* ═══════════════════════════════════════════════
   TASK CARDS
═══════════════════════════════════════════════ */
.task-list { display: flex; flex-direction: column; gap: 14px; }

.tc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;
  position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, border-color .28s;
}
.tc::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: transparent; transition: background .25s;
  border-radius: 18px 0 0 18px;
}
.tc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(13,148,136,.25); }
.tc:hover::before { background: var(--teal); }

.tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.tc-title { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.3; }

/* Status badges */
.tc-badge {
  flex-shrink: 0; padding: 5px 13px; border-radius: 30px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.tc-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.tc-badge.abierta  { background: var(--ok-bg);   color: #065f46; } .tc-badge.abierta::before  { background: var(--ok); }
.tc-badge.cerrada  { background: var(--err-bg);  color: #991b1b; } .tc-badge.cerrada::before  { background: var(--err); }
.tc-badge.vencida  { background: var(--warn-bg); color: #92400e; } .tc-badge.vencida::before  { background: var(--warn); }

.tc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 16px;
}
.tc-meta span { display: flex; align-items: center; gap: 5px; }
.tc-meta svg  { width: 13px; height: 13px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.tc-responded {
  display: inline-flex; align-items: center; gap: 5px; font-size: .78rem;
  font-weight: 800; color: var(--ok); background: var(--ok-bg);
  padding: 3px 10px; border-radius: var(--radius-lg);
}
.tc-responded svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.tc-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid rgba(226,232,240,.7); padding-top: 14px;
}

/* ═══════════════════════════════════════════════
   PAGINATION (Tareas)
═══════════════════════════════════════════════ */
.tp-pagination-wrap { margin-top: 22px; }
.tp-pagination {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed rgba(226,232,240,.9);
}
.tp-pagination-info {
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.tp-pagination-info strong { color: var(--text); font-weight: 800; }
.tp-pagination-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-pg-btn {
  min-width: 36px; height: 36px; padding: 0 11px;
  border-radius: 10px; border: 1px solid var(--border);
  background: #fff; color: var(--text);
  font-weight: 700; font-size: .85rem; cursor: pointer;
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.tp-pg-btn:hover:not(:disabled):not(.active) {
  border-color: rgba(13,148,136,.35);
  background: var(--teal-lt); color: var(--teal);
  transform: translateY(-1px);
}
.tp-pg-btn.active {
  background: var(--teal); color: #fff; border-color: var(--teal);
  box-shadow: 0 6px 14px var(--teal-glow);
  cursor: default;
}
.tp-pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.tp-pg-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-pg-dots {
  color: var(--muted); padding: 0 4px; font-weight: 700;
  user-select: none; letter-spacing: 1px;
}
.tp-pg-mobile {
  display: none;
  font-size: .82rem; font-weight: 700; color: var(--text);
  padding: 0 10px; min-width: 68px; text-align: center;
}
@media (max-width: 560px) {
  .tp-pagination { justify-content: center; }
  .tp-pagination-info { order: 1; width: 100%; text-align: center; }
  .tp-pg-btn.num, .tp-pg-dots { display: none; }
  .tp-pg-mobile { display: inline-flex; align-items: center; justify-content: center; }
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-tp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 11px; border: none;
  font-weight: 700; font-size: .84rem; cursor: pointer;
  font-family: var(--font); white-space: nowrap;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.btn-tp svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-tp:hover { transform: translateY(-2px); }

.btn-tp-primary {
  background: var(--teal);
  color: #fff; box-shadow: 0 6px 18px var(--teal-glow);
}
.btn-tp-primary:hover { box-shadow: 0 10px 28px var(--teal-glow); }

.btn-tp-ghost {
  background: var(--teal-lt); color: var(--teal);
  border: 1px solid rgba(13,148,136,.2);
}
.btn-tp-ghost:hover { background: var(--teal); color: #fff; }

.btn-tp-warn {
  background: var(--warn-bg); color: #92400e;
  border: 1px solid rgba(245,158,11,.2);
}
.btn-tp-warn:hover { background: var(--warn); color: #fff; }

.btn-tp-danger {
  background: var(--err-bg); color: #991b1b;
  border: 1px solid rgba(239,68,68,.2);
}
.btn-tp-danger:hover { background: var(--err); color: #fff; }

/* Large hero buttons */
.btn-hero {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 14px; border: none;
  font-weight: 800; font-size: .92rem; cursor: pointer;
  font-family: var(--font); white-space: nowrap;
  transition: all .3s cubic-bezier(.34,1.56,.64,1); text-decoration: none;
}
.btn-hero svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-hero:hover { transform: translateY(-3px); }

.btn-hero-teal  { background: var(--teal); color: #fff; box-shadow: 0 8px 22px var(--teal-glow); }
.btn-hero-teal:hover  { box-shadow: 0 14px 32px var(--teal-glow); color: #fff; }
.btn-hero-glass { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(8px); }
.btn-hero-glass:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ═══════════════════════════════════════════════
   MODAL OVERLAY
═══════════════════════════════════════════════ */
.tp-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.tp-overlay.open { opacity: 1; pointer-events: auto; }

.tp-modal {
  background: #fff; border-radius: var(--radius-lg); width: 100%; overflow: hidden;
  box-shadow: 0 40px 80px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(20px) scale(.97);
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.tp-overlay.open .tp-modal { transform: translateY(0) scale(1); }
.tp-modal-sm { max-width: min(540px, calc(100vw - 32px)); }
.tp-modal-lg { max-width: min(780px, calc(100vw - 32px)); }
.tp-modal-xl { max-width: min(1000px, calc(100vw - 32px)); }

.tp-modal-head {
  padding: 22px 26px;
  background: linear-gradient(135deg, #f8fafc, #f0fdf9);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.tp-modal-t { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; }
.tp-modal-t svg { width: 18px; height: 18px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-modal-sub { font-size: .82rem; color: var(--muted); font-weight: 500; margin-top: 4px; }

.tp-modal-close {
  width: var(--touch-min); height: var(--touch-min); border-radius: 10px;
  background: #f1f5f9; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.tp-modal-close:hover { background: var(--err-bg); color: var(--err); border-color: rgba(239,68,68,.2); }
.tp-modal-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.tp-modal-body {
  padding: 28px 28px;
  background: #fafbfd;
  max-height: min(72vh, 72dvh); overflow-y: auto;
  overscroll-behavior: contain;
}
.tp-modal-body::-webkit-scrollbar { width: 5px; }
.tp-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.tp-modal-foot {
  padding: 16px 26px;
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}

/* ═══════════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════════ */
.tp-fgroup { display: flex; flex-direction: column; gap: 7px; }
.tp-flabel {
  font-size: .78rem; font-weight: 800; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px;
}
.tp-flabel .req { color: var(--err); font-size: .9rem; }
.tp-finput, .tp-fselect, .tp-ftextarea {
  width: 100%; border-radius: 13px; border: 2px solid var(--border);
  background: #fff; padding: 12px 16px;
  font-size: .94rem; font-weight: 600; font-family: var(--font);
  color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.tp-finput:focus, .tp-fselect:focus, .tp-ftextarea:focus {
  border-color: var(--teal); background: #fff;
  box-shadow: 0 0 0 4px var(--teal-ring);
}
.tp-ftextarea { resize: vertical; min-height: 160px; line-height: 1.7; }
.tp-fhint { font-size: .76rem; color: var(--muted); font-weight: 500; }
.tp-fgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .tp-fgrid-2 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   AVAILABILITY TOGGLE ROW
═══════════════════════════════════════════════ */
.tp-avail-row {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}
.tp-avail-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-avail-pill {
  padding: 8px 18px; border-radius: 30px; border: 2px solid var(--border);
  font-size: .82rem; font-weight: 700; cursor: pointer; font-family: var(--font);
  background: #fff; color: var(--sub); transition: all .22s;
}
.tp-avail-pill.selected { border-color: var(--teal); background: var(--teal-lt); color: var(--teal); }

/* ═══════════════════════════════════════════════
   TEMPLATE CARDS (gestor)
═══════════════════════════════════════════════ */
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tmpl-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; transition: all .28s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden;
}
.tmpl-card::before {
  content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
  background: var(--teal); border-radius: 16px 0 0 16px; opacity: 0; transition: opacity .25s;
}
.tmpl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(13,148,136,.25); }
.tmpl-card:hover::before { opacity: 1; }
.tmpl-focus {
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-lg); margin-bottom: 8px;
  background: var(--violet-lt); color: var(--violet);
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.tmpl-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.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; }
.tmpl-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(226,232,240,.6); }

/* Patient banner in task panel header */
.tp-patient-banner {
  display: flex; align-items: center; gap: 12px;
}
.tp-patient-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--teal-lt); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
}
.tp-patient-name { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.tp-patient-count { font-size: .78rem; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* Resposta detail inside modal */
.resp-block {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; margin-top: 14px;
}
.resp-block h4 { font-size: .9rem; font-weight: 800; color: var(--sub); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.resp-text {
  background: #f0fdf9; border: 1px solid rgba(13,148,136,.15);
  border-radius: 10px; padding: 16px;
  font-size: .9rem; color: var(--text); line-height: 1.75; white-space: pre-wrap;
}
.resp-meta-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: var(--muted); font-weight: 600; margin-top: 10px;
}

/* instrucciones block */
.instr-block {
  background: #f8fafc; border: 1px solid var(--border); border-left: 4px solid var(--teal);
  border-radius: 0 12px 12px 0; padding: 16px 18px;
  font-size: .9rem; color: var(--text-2); line-height: 1.75; white-space: pre-wrap;
}

/* Toast */
.tp-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 5000;
  background: #1e293b; color: #fff; padding: 12px 20px;
  border-radius: 14px; font-size: .84rem; font-weight: 600; font-family: var(--font);
  box-shadow: 0 16px 40px rgba(0,0,0,.3); max-width: 330px;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(10px);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.tp-toast.show { opacity: 1; transform: translateY(0); }
.tp-toast.ok  .tp-tmark { color: #4ade80; }
.tp-toast.err .tp-tmark { color: #f87171; }
.tp-tmark { font-weight: 900; font-size: 1rem; }

/* ─── Referencias button ────────────────────────────── */
.btn-tp-ref {
  background: rgba(25,156,130,.09); color: #199c82;
  border: 1px solid rgba(25,156,130,.2); border-radius: 12px;
  padding: 8px 16px; font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: all .18s;
}
.btn-tp-ref:hover { background: rgba(25,156,130,.16); border-color: rgba(25,156,130,.4); }
.btn-tp-ref svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ─── Template filter bar ───────────────────────────── */
.tmpl-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tmpl-filter-btn {
  padding: 6px 16px; border-radius: var(--radius-lg); font-size: .78rem; font-weight: 700;
  border: 1px solid var(--border); background: transparent; color: var(--sub);
  cursor: pointer; transition: all .15s;
}
.tmpl-filter-btn:hover { border-color: var(--teal); color: var(--teal); }
.tmpl-filter-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ─── Sistema badge in template cards ──────────────── */
.tmpl-badge-sistema {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: .2rem .55rem; border-radius: 6px;
  background: rgba(25,156,130,.1); color: #199c82;
  border: 1px solid rgba(25,156,130,.2);
  margin-bottom: 6px;
}
.tmpl-badge-propia {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: .2rem .55rem; border-radius: 6px;
  background: rgba(13,148,136,.09); color: var(--teal);
  border: 1px solid rgba(13,148,136,.2);
  margin-bottom: 6px;
}

/* ─── Reference modal styles ────────────────────────── */
.ref-banner {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(25,156,130,.06); border: 1px solid rgba(25,156,130,.18);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 24px;
  color: #116d5b; font-size: .88rem; line-height: 1.65;
}
.ref-banner svg { flex-shrink: 0; margin-top: 2px; stroke: #199c82; }
.ref-banner p { margin: 0; }

.ref-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.ref-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm);
}
.ref-card__badge {
  display: inline-block; font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .2rem .7rem; border-radius: 8px; width: fit-content;
}
.ref-card__badge.tcc  { background: #eff6ff; color: #1d4ed8; }
.ref-card__badge.mbsr { background: #f0fdf4; color: #15803d; }
.ref-card__badge.act  { background: #fff7ed; color: #c2410c; }
.ref-card__badge.dbt  { background: #fdf4ff; color: #9333ea; }
.ref-card__badge.relax{ background: #f0fdfa; color: #199c82; }
.ref-card__badge.edu  { background: #fefce8; color: #a16207; }
.ref-card__badge.pos  { background: #fff0f3; color: #be123c; }
.ref-card__badge.sist { background: #f0fdf4; color: #166534; }
.ref-card__enfoque {
  font-size: .8rem; font-weight: 800; color: var(--text); line-height: 1.4;
}
.ref-card__tecnicas {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.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: 600;
}
.ref-card__list {
  margin: 0; padding: 0 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.ref-card__list li {
  font-size: .78rem; color: var(--text-2); line-height: 1.6; list-style: disc;
}
.ref-card__list li strong { color: var(--text); }
.ref-card__list li em { font-style: italic; }

.ref-footer {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; color: var(--muted); font-weight: 600;
  padding: 14px 0 0; border-top: 1px solid var(--border);
}
.ref-footer svg { flex-shrink: 0; stroke: var(--muted); fill: none; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tp-hero { padding: 28px 24px 32px; }
  .tp-hero-title { font-size: 1.4rem; }
  .tp-hero-right { width: 100%; }
  .tp-chip { flex: 1; }
  .tp-search { padding: 20px 20px; }
  .ref-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tp-hero-left { flex-wrap: wrap; }
  .tp-hero-icon { width: 52px; height: 52px; border-radius: 15px; }
  .tp-hero-title { font-size: 1.25rem; }
  .tp-chip { flex-direction: row; }
  .tp-modal-body { padding: 18px; }
  .tmpl-grid { grid-template-columns: 1fr; }
  .tp-page { padding: 14px 12px 48px; }
  .btn-tp-ref span { display: none; }
}

/* ─── Tareas: extended mobile / tablet improvements ─── */
@media (max-width: 480px) {
  /* Modal footer: stack buttons vertically on small screens */
  .tp-modal-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tp-modal-foot .btn-tp,
  .tp-modal-foot .btn-hero {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  /* Task action buttons: wrap and fill row */
  .tc-actions {
    gap: 6px;
  }
  .tc-actions .btn-tp {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    font-size: .78rem;
    padding: 8px 10px;
  }
  /* Availability row: stack vertically */
  .tp-avail-row {
    flex-direction: column;
  }
  .tp-avail-pills {
    flex-wrap: wrap;
  }
  /* Hero chips: reduce size */
  .tp-chip {
    padding: 8px 12px;
  }
  .tp-chip-val {
    font-size: 1.1rem;
  }
  .btn-hero {
    padding: 10px 16px;
    font-size: .84rem;
  }
  /* Template filter bar: horizontal scroll on very small screens */
  .tmpl-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .tmpl-filter-bar::-webkit-scrollbar { display: none; }
  .tmpl-filter-btn {
    flex-shrink: 0;
  }
  /* Select2 within modals: ensure full width */
  .tp-modal-body .select2-container {
    width: 100% !important;
  }
}

/* Select2 inside tp-modal — prevent dropdown overflow */
.tp-modal .select2-container--open .select2-dropdown {
  z-index: 10050;
}
.tp-modal-body .select2-container--default .select2-selection--single {
  height: 52px !important;
  border-radius: 13px !important;
  border: 2px solid var(--border) !important;
  background: #fff !important;
}
.tp-modal-body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important;
  padding-left: 16px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  font-size: .94rem !important;
  color: var(--text) !important;
}
.tp-modal-body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px !important;
  right: 14px !important;
}
.tp-modal-body .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px var(--teal-ring) !important;
}

/* ─── PDF export button ─────────────────────────────── */
.btn-tp-pdf {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  color: #0369a1;
  border: 1px solid rgba(3,105,161,.25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 11px;
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-tp-pdf svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-tp-pdf:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3,105,161,.28);
}

/* ─── Referencias button — more prominent ───────────── */
.btn-tp-ref {
  background: rgba(25,156,130,.09);
  color: #199c82;
  border: 1px solid rgba(25,156,130,.25);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.btn-tp-ref:hover {
  background: #199c82;
  color: #fff;
  border-color: #199c82;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(25,156,130,.3);
}
.btn-tp-ref svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ─── Instructions textarea: enforce monospace-friendly appearance ── */
.tp-ftextarea[name="instrucciones"],
.tp-ftextarea[name="instrucciones_base"] {
  font-family: 'Courier New', 'DejaVu Sans Mono', monospace;
  font-size: .88rem;
  line-height: 1.75;
  tab-size: 4;
}

/* ═══════════════════════════════════════════════════════════════
 *  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); }

.pp2-header-actions { display: flex; align-items: center; gap: .4rem; }
.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; }

/* ── Main Split Layout ───────────────────────────────────── */
.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; }

/* ── Bulk Bar & Toast (kept from v1) ─────────────────────── */
.pp-bulk-bar { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); z-index: 1500; transition: bottom .3s cubic-bezier(.34,1.56,.64,1); }
.pp-bulk-bar.show { bottom: 1.25rem; }
.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; }
  .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; }
  .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: 18px; }

/* Hero */
.db-hero {
    background: var(--primary);
    border-radius: 14px; padding: 22px 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 h2 { font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 3px; line-height: 1.2; }
.db-hero-text p { font-size: 12px; color: rgba(255,255,255,.7); margin: 0; text-transform: capitalize; }
.db-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.db-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: all .2s; white-space: nowrap; border: none; cursor: pointer; line-height: 1;
}
.db-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.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; }
.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: 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: 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: 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: 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: 14px; }

/* Panels */
.db-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 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; gap: 4px;
    padding: 4px 10px; border-radius: 6px;
    background: rgba(25,156,130,.08); color: #199c82;
    font-size: 11px; font-weight: 600; text-decoration: none;
    transition: all .15s; flex-shrink: 0;
}
.db-agenda-action:hover { background: rgba(25,156,130,.15); }
.db-agenda-action svg { width: 11px; height: 11px; }

/* 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: 14px; }

/* ── Dashboard Responsive ──────────────────────────────────── */
@media (max-width: 1100px) {
    .db-charts-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .db-charts-main { grid-template-columns: 1fr; }
    .db-bottom { grid-template-columns: 1fr; }
    .db-content-grid { grid-template-columns: 1fr; }
    .db-chart-wrap--donut { height: 220px; }
}
@media (max-width: 640px) {
    .db-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px; }
    .db-hero-text h2 { font-size: 18px; }
    .db-actions { width: 100%; flex-direction: column; }
    .db-btn { justify-content: center; width: 100%; }
    .db-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .db-kpi { padding: 14px 14px; gap: 10px; }
    .db-kpi-val { font-size: 20px; }
    .db-kpi-label { font-size: 10px; }
    .db-income-row { grid-template-columns: 1fr; }
    .db-income-val { font-size: 22px; }
    .db-chart-wrap--main  { height: 200px; }
    .db-chart-wrap--donut { height: 200px; }
    .db-chart-wrap--week  { height: 150px; }
    .db-panel-body { max-height: 260px; }
}
@media (max-width: 400px) {
    .db-kpis { grid-template-columns: 1fr; }
    .db-income-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   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 {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff; box-shadow: 0 2px 8px rgba(20,184,166,.25);
}
.ea-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,184,166,.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; }

/* 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; }
}

/* ═══════════════════════════════════════════════════════════════════════
   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; }
}

/* ═══════════════════════════════════════════════════════════════
   PSG v2 — Plan de Seguridad · Herramienta clínica guiada
   =============================================================== */
@keyframes psg2-fadeIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes psg2-rowIn   { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes psg2-ringIn  { from { stroke-dashoffset: 226; } }
@keyframes psg2-pulseOk { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.35); } 50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
@keyframes psg2-skel    { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.psg2-page {
    --psg2-accent: #4f46e5;
    --psg2-accent-2: #6366f1;
    --psg2-accent-soft: #eef2ff;
    --psg2-accent-border: #c7d2fe;
    --psg2-heart: #ec4899;
    --psg2-ok: #16a34a;
    --psg2-ok-bg: #dcfce7;
    --psg2-ok-border: #bbf7d0;
    --psg2-surface: #ffffff;
    --psg2-surface-alt: #f8fafc;
    --psg2-track: #eef2f7;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 110px;
    animation: psg2-fadeIn .5s ease both;
    color: var(--text-primary);
}

/* ── Back link ───────────────────────────────────────────────── */
.psg2-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    margin-bottom: 18px; transition: color var(--transition); text-decoration: none;
}
.psg2-back:hover { color: var(--primary); }
.psg2-back svg { width: 16px; height: 16px; }

/* ── Hero ────────────────────────────────────────────────────── */
.psg2-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 26px;
    align-items: center;
    padding: 30px 34px;
    border-radius: 22px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(99,102,241,.18) 0%, transparent 55%),
        radial-gradient(100% 140% at 100% 100%, rgba(16,185,129,.14) 0%, transparent 55%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px -18px rgba(15,23,42,.15);
    margin-bottom: 22px;
    overflow: hidden;
}
.psg2-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(99,102,241,.08) 1px, transparent 1px);
    background-size: 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}
.psg2-hero__main { display: flex; align-items: center; gap: 20px; min-width: 0; position: relative; }
.psg2-hero__shield {
    width: 62px; height: 62px; border-radius: 18px; flex-shrink: 0;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 55%, #8b5cf6 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 28px -10px rgba(79,70,229,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.psg2-hero__shield svg { width: 30px; height: 30px; color: #fff; stroke: #fff; }
.psg2-hero__body { flex: 1; min-width: 0; }
.psg2-hero__kicker {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #4f46e5; background: rgba(79,70,229,.08); padding: 4px 10px;
    border-radius: 999px; margin-bottom: 8px;
}
.psg2-hero__kicker svg { width: 11px; height: 11px; }
.psg2-hero__title {
    font-size: 26px; font-weight: 800; line-height: 1.15;
    letter-spacing: -.018em; margin: 0 0 6px; color: var(--text-primary);
}
.psg2-hero__meta {
    font-size: 13.5px; color: var(--text-secondary);
    line-height: 1.55; margin: 0;
}
.psg2-hero__meta strong { color: var(--text-primary); font-weight: 600; }
.psg2-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.psg2-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: rgba(15,23,42,.04); color: var(--text-secondary);
    border: 1px solid rgba(15,23,42,.06);
}
.psg2-chip svg { width: 12px; height: 12px; }
.psg2-chip--ok    { background: var(--psg2-ok-bg); color: #15803d; border-color: var(--psg2-ok-border); }
.psg2-chip--idle  { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.psg2-chip--model { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.psg2-chip__dot   { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.psg2-chip--ok .psg2-chip__dot { animation: psg2-pulseOk 2.2s ease-in-out infinite; }

/* Progress ring */
.psg2-hero__ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.psg2-hero__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.psg2-ring-track { fill: none; stroke: #e2e8f0; stroke-width: 10; }
.psg2-ring-fill {
    fill: none;
    stroke: url(#psg2RingGradient);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s cubic-bezier(.34,1.3,.64,1);
    animation: psg2-ringIn .9s cubic-bezier(.34,1.3,.64,1) both;
}
.psg2-ring-label {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
.psg2-ring-label__num { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; line-height: 1; }
.psg2-ring-label__den { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.psg2-card__badge--heart svg { width: 20px; height: 20px; }
.psg2-actions__dot-sep { margin: 0 6px; color: var(--text-muted); }
.psg2-ring-label__sub { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }

/* ── Flash alerts ───────────────────────────────────────────── */
.psg2-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px;
}
.psg2-alert--ok    { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.psg2-alert--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.psg2-alert svg    { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.psg2-alert ul     { margin: 4px 0 0; padding-left: 18px; }

/* ── Layout: sidebar + main ─────────────────────────────────── */
.psg2-layout {
    display: grid;
    grid-template-columns: 286px 1fr;
    gap: 28px;
    align-items: start;
}
.psg2-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.psg2-side__title {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted); padding: 0 6px 4px;
}

/* Stepper */
.psg2-steps {
    position: relative;
    background: var(--psg2-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.psg2-steps::before {
    content: ""; position: absolute; left: 30px; top: 28px; bottom: 28px;
    width: 2px; background: var(--border-light); border-radius: 2px;
    z-index: 0;
}
.psg2-steps__item {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    text-align: left; border: none; background: transparent;
    cursor: pointer; font-family: var(--font-family);
    transition: background .2s ease;
}
.psg2-steps__item:hover { background: var(--psg2-surface-alt); }
.psg2-steps__item.is-active { background: var(--psg2-accent-soft); }
.psg2-steps__item.is-active .psg2-steps__title { color: var(--psg2-accent); }

.psg2-steps__dot {
    width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
    background: var(--psg2-surface);
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 700; font-size: 12.5px;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s ease;
}
.psg2-steps__dot svg { width: 14px; height: 14px; }
.psg2-steps__item.is-active .psg2-steps__dot {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 14px -4px rgba(79,70,229,.5);
}
.psg2-steps__item.is-done .psg2-steps__dot {
    background: var(--psg2-ok); border-color: var(--psg2-ok); color: #fff;
}
.psg2-steps__body { flex: 1; min-width: 0; }
.psg2-steps__title {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin: 0; line-height: 1.3; letter-spacing: -.005em;
}
.psg2-steps__meta {
    font-size: 11.5px; color: var(--text-muted);
    margin-top: 2px; font-weight: 500;
}
.psg2-steps__meta.is-done { color: var(--psg2-ok); font-weight: 600; }

/* Side info card */
.psg2-side__info {
    padding: 14px 16px; border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa; color: #9a3412;
    font-size: 12.5px; line-height: 1.55;
}
.psg2-side__info strong { display: block; color: #7c2d12; font-weight: 700; margin-bottom: 3px; font-size: 12.5px; }

/* ── Main column ─────────────────────────────────────────────── */
.psg2-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Activation card */
.psg2-activate {
    position: relative;
    display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
    padding: 22px 26px; border-radius: 18px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 60%, #f0fdfa 100%);
    border: 1.5px solid var(--psg2-ok-border);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
    overflow: hidden;
}
.psg2-activate::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(80% 120% at 100% 0%, rgba(22,163,74,.08) 0%, transparent 60%);
    pointer-events: none;
}
.psg2-activate.is-off {
    background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
    border-color: #e4e4e7;
}
.psg2-activate.is-off::after { background: none; }
.psg2-activate__ico {
    position: relative; z-index: 1;
    width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
    background: rgba(22,163,74,.14); color: #15803d;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
.psg2-activate.is-off .psg2-activate__ico { background: rgba(100,116,139,.12); color: #64748b; }
.psg2-activate__ico svg { width: 26px; height: 26px; }
.psg2-activate__body { position: relative; z-index: 1; min-width: 0; }
.psg2-activate__title {
    font-size: 15.5px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.psg2-activate__title .psg2-chip { font-size: 10.5px; padding: 3px 9px; }
.psg2-activate__sub {
    font-size: 12.75px; color: var(--text-secondary);
    margin: 0; line-height: 1.5;
}
.psg2-activate__switch { position: relative; z-index: 1; }

/* Switch (reused look) */
.psg2-switch { position: relative; display: block; width: 54px; height: 30px; cursor: pointer; }
.psg2-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; margin: 0; }
.psg2-switch__track {
    position: absolute; inset: 0; border-radius: 999px;
    background: #cbd5e1; transition: background .25s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.psg2-switch__thumb {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
    border-radius: 50%; background: #fff;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.psg2-switch input:checked ~ .psg2-switch__track { background: linear-gradient(135deg, #16a34a, #22c55e); }
.psg2-switch input:checked ~ .psg2-switch__thumb { transform: translateX(24px); }

/* ── Step card ───────────────────────────────────────────────── */
.psg2-card {
    position: relative;
    background: var(--psg2-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.psg2-card:hover { box-shadow: 0 4px 18px -8px rgba(15,23,42,.1); }
.psg2-card.is-done { border-color: var(--psg2-ok-border); }
.psg2-card.is-done::before {
    content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.psg2-card__head {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, #fafbff 0%, transparent 100%);
}
.psg2-card__badge {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px; letter-spacing: -.02em;
    box-shadow: 0 8px 18px -6px rgba(67,56,202,.4), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
}
.psg2-card__badge--heart { background: linear-gradient(135deg, #ec4899, #db2777); box-shadow: 0 8px 18px -6px rgba(236,72,153,.4); }
.psg2-card.is-done .psg2-card__badge::after {
    content: ""; position: absolute; top: -5px; right: -5px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--psg2-ok) center/12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(22,163,74,.35);
}

.psg2-card__heading { flex: 1; min-width: 0; }
.psg2-card__title {
    font-size: 15.5px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 4px; letter-spacing: -.005em;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.psg2-card__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    background: var(--psg2-accent-soft); color: var(--psg2-accent);
    border: 1px solid var(--psg2-accent-border);
}
.psg2-card.is-done .psg2-card__count { background: var(--psg2-ok-bg); color: #15803d; border-color: var(--psg2-ok-border); }
.psg2-card__sub {
    font-size: 13px; color: var(--text-secondary);
    margin: 0; line-height: 1.55;
}
.psg2-card__sub em { font-style: normal; color: var(--text-primary); font-weight: 600; }

.psg2-card__body { padding: 18px 26px 22px; }

/* Example tips (chips) */
.psg2-tips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px; margin-bottom: 14px;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px dashed #fde047;
    border-radius: 12px;
    font-size: 12.25px; color: #713f12;
}
.psg2-tips__icon { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #854d0e; }
.psg2-tips__icon svg { width: 13px; height: 13px; }
.psg2-tip {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(255,255,255,.7); color: #713f12;
    border: 1px solid rgba(202,138,4,.25);
    font-size: 11.75px; font-weight: 500;
}

/* ── Repeater (keep class hooks for JS) ─────────────────────── */
.psg-repeater { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.psg-row {
    display: flex; align-items: stretch; gap: 6px;
    padding: 4px 4px 4px 12px;
    background: var(--psg2-surface-alt);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    animation: psg2-rowIn .28s ease both;
    position: relative;
}
.psg-row::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 40%; border-radius: 3px;
    background: var(--border);
    transition: background .2s ease;
}
.psg-row:hover { background: #f1f5f9; border-color: #e2e8f0; }
.psg-row:focus-within {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.12);
}
.psg-row:focus-within::before { background: var(--primary); }

.psg-row input[type="text"],
.psg-row input[type="tel"] {
    flex: 1; min-width: 0;
    padding: 10px 12px;
    font-size: 13.75px; font-family: var(--font-family); color: var(--text-primary);
    background: transparent; border: none; border-radius: 8px;
    outline: none;
}
.psg-row input::placeholder { color: #94a3b8; }

.psg-row--2 > input:first-of-type { flex: 0 0 40%; border-right: 1px solid var(--border-light); }
.psg-row--3 > input:nth-of-type(1) { flex: 0 0 34%; border-right: 1px solid var(--border-light); }
.psg-row--3 > input:nth-of-type(2) { flex: 0 0 26%; border-right: 1px solid var(--border-light); }
.psg-row:focus-within .psg-row--2 > input,
.psg-row:focus-within .psg-row--3 > input { border-color: rgba(25,156,130,.2); }

.psg-row-del {
    width: 36px; align-self: center; height: 36px; flex-shrink: 0;
    border: 1px solid transparent; background: transparent;
    color: #94a3b8; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
    opacity: .55;
}
.psg-row:hover .psg-row-del,
.psg-row:focus-within .psg-row-del { opacity: 1; }
.psg-row-del:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; opacity: 1; }
.psg-row-del svg { width: 15px; height: 15px; }

/* Add button */
.psg-add {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px;
    background: transparent;
    border: 1.5px dashed var(--psg2-accent-border);
    color: var(--psg2-accent);
    border-radius: 10px;
    font-size: 13px; font-weight: 600; font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition);
}
.psg-add:hover {
    border-color: var(--psg2-accent);
    background: var(--psg2-accent-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(79,70,229,.25);
}
.psg-add svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* ── Single field / textarea ─────────────────────────────────── */
.psg2-field { margin-top: 16px; }
.psg2-field:first-child { margin-top: 0; }
.psg2-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 7px;
}
.psg2-label svg { width: 14px; height: 14px; color: var(--text-muted); }
.psg2-hint { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.psg2-input, .psg2-textarea {
    width: 100%; padding: 11px 14px;
    font-size: 14px; font-family: var(--font-family); color: var(--text-primary);
    background: var(--bg-input, #fff); border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color var(--transition), box-shadow var(--transition), background .2s ease;
    outline: none;
}
.psg2-input:hover, .psg2-textarea:hover { border-color: #cbd5e1; }
.psg2-input:focus, .psg2-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25,156,130,.12);
    background: #fff;
}
.psg2-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

/* Crisis phone field — special emphasis */
.psg2-crisis {
    margin-top: 18px; padding: 14px 16px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
}
.psg2-crisis .psg2-label { color: #991b1b; }
.psg2-crisis .psg2-label svg { color: #dc2626; }
.psg2-crisis .psg2-input {
    background: #fff; border-color: #fecaca;
}
.psg2-crisis .psg2-input:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* ── Sticky action bar with progress ─────────────────────────── */
.psg2-actions {
    position: sticky; bottom: 18px; z-index: 20;
    margin-top: 26px;
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.18), 0 4px 12px -6px rgba(15,23,42,.08);
    overflow: hidden;
}
.psg2-actions__progress {
    position: relative;
    height: 4px;
    background: var(--psg2-track);
    overflow: hidden;
}
.psg2-actions__progress::before {
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 50%, #16a34a 100%);
    border-radius: 0 4px 4px 0;
    transition: width .6s cubic-bezier(.34,1.3,.64,1);
}
.psg2-page[data-progress="0"] .psg2-actions__progress::before { width: 0%; }
.psg2-page[data-progress="1"] .psg2-actions__progress::before { width: 16.666%; }
.psg2-page[data-progress="2"] .psg2-actions__progress::before { width: 33.333%; }
.psg2-page[data-progress="3"] .psg2-actions__progress::before { width: 50%; }
.psg2-page[data-progress="4"] .psg2-actions__progress::before { width: 66.666%; }
.psg2-page[data-progress="5"] .psg2-actions__progress::before { width: 83.333%; }
.psg2-page[data-progress="6"] .psg2-actions__progress::before { width: 100%; }

.psg2-actions__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 20px;
}
.psg2-actions__info { font-size: 12.75px; color: var(--text-secondary); line-height: 1.4; }
.psg2-actions__info strong { color: var(--text-primary); font-weight: 700; }
.psg2-actions__info-status { font-weight: 600; }
.psg2-actions__info-status--on  { color: #16a34a; }
.psg2-actions__info-status--off { color: #64748b; }
.psg2-actions__buttons { display: flex; gap: 10px; flex-shrink: 0; }

.psg2-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600; font-family: var(--font-family);
    cursor: pointer; border: none; transition: all var(--transition); text-decoration: none;
}
.psg2-btn--primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; box-shadow: 0 6px 16px -6px rgba(25,156,130,.45);
}
.psg2-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(25,156,130,.55); }
.psg2-btn--ghost {
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border);
}
.psg2-btn--ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.psg2-btn svg { width: 16px; height: 16px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .psg2-layout { grid-template-columns: 1fr; gap: 18px; }
    .psg2-side { position: relative; top: 0; }
    .psg2-steps {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .psg2-steps::before { display: none; }
    .psg2-steps__item {
        min-width: 210px; scroll-snap-align: start;
        padding: 10px 12px;
    }
    .psg2-side__info { display: none; }
    .psg2-side__title { display: none; }
}

@media (max-width: 768px) {
    .psg2-hero {
        grid-template-columns: 1fr;
        padding: 24px 22px;
        text-align: left;
    }
    .psg2-hero__main { gap: 16px; }
    .psg2-hero__shield { width: 52px; height: 52px; }
    .psg2-hero__shield svg { width: 26px; height: 26px; }
    .psg2-hero__title { font-size: 21px; }
    .psg2-hero__ring { width: 96px; height: 96px; margin-left: 0; }
    .psg2-hero__ring-wrap {
        display: flex; align-items: center; gap: 14px;
        padding-top: 6px; border-top: 1px dashed var(--border);
        margin-top: 4px;
    }
    .psg2-hero__ring-side {
        font-size: 12px; color: var(--text-muted); line-height: 1.4;
    }
    .psg2-hero__ring-side strong { display: block; color: var(--text-primary); font-size: 13.5px; }
}

@media (max-width: 640px) {
    .psg2-page { padding-bottom: 120px; }
    .psg2-activate {
        grid-template-columns: auto 1fr;
        grid-template-areas: "ico body" "switch switch";
        gap: 14px 16px; padding: 18px;
    }
    .psg2-activate__ico   { grid-area: ico; width: 44px; height: 44px; }
    .psg2-activate__ico svg { width: 22px; height: 22px; }
    .psg2-activate__body  { grid-area: body; }
    .psg2-activate__switch { grid-area: switch; justify-self: stretch; display: flex; justify-content: flex-end; }

    .psg2-card__head { padding: 18px 18px 14px; gap: 12px; }
    .psg2-card__body { padding: 14px 18px 18px; }
    .psg2-card__badge { width: 40px; height: 40px; font-size: 14.5px; border-radius: 12px; }
    .psg2-card__title { font-size: 15px; }
    .psg2-card__sub { font-size: 12.5px; }

    .psg-row { flex-wrap: wrap; padding: 8px; }
    .psg-row--2, .psg-row--3 { flex-direction: column; align-items: stretch; }
    .psg-row--2 > input, .psg-row--3 > input {
        flex: 1 1 100% !important;
        border: none !important;
        border-bottom: 1px solid var(--border-light) !important;
        border-radius: 0 !important;
        padding: 10px 8px;
    }
    .psg-row--2 > input:last-of-type, .psg-row--3 > input:last-of-type { border-bottom: none !important; }
    .psg-row-del {
        width: 100%; height: 34px; order: 99; align-self: stretch;
        border: 1px dashed #fecaca; color: #dc2626; opacity: 1;
        font-size: 12px; gap: 6px;
    }
    .psg-row-del::after { content: "Eliminar fila"; font-size: 12px; font-weight: 600; }
    .psg-row::before { display: none; }

    .psg2-actions { bottom: 10px; margin-top: 20px; }
    .psg2-actions__row { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 10px; }
    .psg2-actions__buttons { width: 100%; }
    .psg2-btn { flex: 1; justify-content: center; }

    .psg2-hero__title { font-size: 19px; }
    .psg2-hero__kicker { font-size: 10px; }
}