/*
 * Tiempo de Milagros — Design System 2026
 * Fuente única para el app shell y los componentes compartidos.
 * Los módulos pueden definir solamente composición local; color, tipografía,
 * radios, sombras, estados y controles nacen de estos tokens.
 */
:root {
    color-scheme: dark;
    --app-bg: #080b12;
    --sidebar-bg: #0d111b;
    --topbar-bg: rgba(13, 17, 27, .88);
    --surface-1: #111722;
    --surface-2: #171e2b;
    --surface-3: #1d2635;
    --surface-elevated: #1a2230;
    --surface-hover: #212c3c;
    --border-subtle: #263143;
    --border-strong: #35445a;
    --text-primary: #f7f9fc;
    --text-secondary: #b5c0d1;
    --text-muted: #7f8ca1;
    --text-disabled: #596579;
    --primary: #7c5cff;
    --primary-hover: #9278ff;
    --primary-soft: rgba(124, 92, 255, .14);
    --success: #35c98b;
    --warning: #f2b84b;
    --danger: #f06b78;
    --info: #52a8ff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
    --shadow-md: 0 14px 34px rgba(0,0,0,.22);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.32);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --sidebar-width: 272px;
    --sidebar-collapsed-width: 82px;
    --topbar-height: 76px;
    --content-max: 1540px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 240ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
    --control-height: 42px;
    --z-dropdown: 120;
    --z-sticky: 140;
    --z-drawer: 190;
    --z-command: 200;
    --z-modal: 220;
    --z-toast: 230;
    --z-tooltip: 240;

    --motion-enter-distance: 10px;
    --motion-enter-scale: .985;
    --ease-enter: cubic-bezier(.16, 1, .3, 1);
    --ease-exit: cubic-bezier(.4, 0, 1, 1);
    --overlay-blur: 4px;
    --elevation-1: var(--shadow-sm);
    --elevation-2: var(--shadow-md);
    --elevation-3: var(--shadow-lg);

    /* Movimiento — usados por .app-modal, popovers, dropdowns y toasts.
       Todo lo que "entra" en la interfaz debe animarse con estos valores,
       no con duraciones sueltas por componente. */
    --motion-enter-distance: 10px;
    --motion-enter-scale: .985;
    --ease-enter: cubic-bezier(.16, 1, .3, 1);
    --ease-exit: cubic-bezier(.4, 0, 1, 1);
    --overlay-blur: 4px;

    /* Elevacion — sombra + borde consistentes para todo lo "flotante"
       (modal, popover, dropdown, toast). Evita que cada modulo invente
       su propia sombra suelta. */
    --elevation-1: var(--shadow-sm);
    --elevation-2: var(--shadow-md);
    --elevation-3: var(--shadow-lg);

    /* Compatibilidad semántica mientras se migran vistas de dominio. */
    --bg: var(--app-bg);
    --surface: var(--surface-1);
    --sidebar: var(--sidebar-bg);
    --panel: var(--surface-1);
    --panel2: var(--surface-2);
    --soft: var(--surface-2);
    --line: var(--border-subtle);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --accent: var(--primary);
    --orange: var(--primary);
    --blue: var(--info);
    --green: var(--success);
    --overlay: rgba(3, 6, 12, .74);
    --shadow: var(--shadow-md);
    --brand: var(--primary);
    --accent-soft: var(--primary-soft);
    --ui-radius-sm: var(--radius-sm);
    --ui-radius-md: var(--radius-md);
    --ui-radius-lg: var(--radius-lg);
    --ui-radius-xl: var(--radius-xl);
}

body.theme-light {
    color-scheme: light;
    --app-bg: #f3f5f9;
    --sidebar-bg: #fbfcfe;
    --topbar-bg: rgba(251, 252, 254, .9);
    --surface-1: #ffffff;
    --surface-2: #f5f7fb;
    --surface-3: #edf1f7;
    --surface-elevated: #ffffff;
    --surface-hover: #e9eef6;
    --border-subtle: #dde3ed;
    --border-strong: #c9d2df;
    --text-primary: #182031;
    --text-secondary: #4e5c70;
    --text-muted: #64748b;
    --text-disabled: #94a0b2;
    --primary-soft: color-mix(in srgb, var(--primary) 11%, white);
    --shadow-sm: 0 1px 2px rgba(30, 42, 63, .06);
    --shadow-md: 0 14px 34px rgba(30, 42, 63, .08);
    --shadow-lg: 0 28px 70px rgba(30, 42, 63, .14);
    --overlay: rgba(22, 30, 45, .48);

    /*
     * Los módulos históricos todavía consumen estos nombres semánticos.
     * Deben declararse otra vez dentro del tema: si solo se heredan desde
     * :root, sus var() quedan calculadas con la paleta oscura de la raíz.
     */
    --bg: var(--app-bg);
    --surface: var(--surface-1);
    --sidebar: var(--sidebar-bg);
    --panel: var(--surface-1);
    --panel2: var(--surface-2);
    --soft: var(--surface-2);
    --line: var(--border-subtle);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --accent: var(--primary);
    --accent-soft: var(--primary-soft);
    --orange: var(--primary);
    --blue: var(--info);
    --green: var(--success);
    --shadow: var(--shadow-md);
    --brand: var(--primary);
}

/* Identidad 2.1: navegación de alto contraste y escala de producto. */
body:not(.ui-scale-small) { font-size: 14.5px; }
body.theme-light .sidebar {
    --text-primary:#f7f7fb;
    --text-secondary:#b7bfd0;
    --text-muted:#78849a;
    --surface-1:#171a27;
    --surface-2:#202432;
    --surface-3:#272c3c;
    --surface-hover:#222738;
    --border-subtle:#2b3040;
    --border-strong:#3b4256;
    --surface:var(--surface-1);
    --panel:var(--surface-1);
    --panel2:var(--surface-2);
    --soft:var(--surface-2);
    --line:var(--border-subtle);
    --text:var(--text-primary);
    --muted:var(--text-muted);
    background:
        radial-gradient(circle at 35% -8%, rgba(124,92,255,.16), transparent 260px),
        #11141f;
}
body.theme-light .sidebar .brand { background:rgba(17,20,31,.88); }
body.theme-light .sidebar .account { box-shadow:0 12px 32px rgba(0,0,0,.16); }
body.theme-light .sidebar,
body.theme-light .sidebar .account-text strong { color:var(--text-primary); }
.sidebar { box-shadow:12px 0 40px rgba(4,7,15,.055); }
.brand-mark { border:1px solid color-mix(in srgb,var(--primary) 42%,transparent); }
.topbar { box-shadow:0 9px 28px color-mix(in srgb,var(--app-bg) 62%,transparent); }
.content { max-width:1720px; }
.btn { letter-spacing:-.005em; }
.nav-item.active,.nav-toggle.active { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 13%,transparent); }
body.ui-scale-small { font-size: 13px; }
body.ui-scale-large { font-size: 15px; }
body.density-compact { --topbar-height: 66px; --space-4: 13px; --space-5: 16px; --space-6: 20px; }
body.density-compact .nav-item, body.density-compact .nav-toggle { min-height: 36px; }
body.density-compact .content { padding-top: 18px; }
body.high-contrast { --border-subtle: var(--border-strong); --text-muted: var(--text-secondary); }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--app-bg); scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 78% -10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 30rem),
        var(--app-bg);
    color: var(--text-primary);
    font: 400 14px/1.55 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon { display:inline-block; flex:0 0 auto; vertical-align:-.18em; overflow:visible; }
.ui-icon * { vector-effect:non-scaling-stroke; }
[hidden] { display: none !important; }
::selection { background: var(--primary-soft); color: var(--text-primary); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
[aria-disabled="true"], :disabled { color: var(--text-disabled); }

.ui-skip-link { position: fixed; top: 10px; left: 50%; z-index: 999; translate: -50% -160%; padding: 10px 16px; border-radius: var(--radius-md); background: var(--primary); color: white; font-weight: 750; transition: translate var(--duration-base); }
.ui-skip-link:focus { translate: -50% 0; }

/* App shell */
.app { min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: var(--sidebar-width); display: flex; flex-direction: column;
    border-right: 1px solid var(--border-subtle); background: var(--sidebar-bg);
    transition: width var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
.brand { height: var(--topbar-height); padding: 14px 16px; display: flex; align-items: center; border-bottom: 1px solid var(--border-subtle); }
.brand-link { min-width: 0; width: 100%; display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 48%, #111827)); color: #fff; font-size: 13px; font-weight: 850; box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 22%, transparent); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { min-width: 0; display: grid; }
.brand-text strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.brand-text span { overflow: hidden; color: var(--text-muted); font-size: 10.5px; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sidebar-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 11px 24px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.nav-section { display: grid; gap: 3px; margin: 0 0 15px; }
.nav-section-title { padding: 4px 11px 6px; color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.nav-item, .nav-toggle {
    position: relative; width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px;
    padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent;
    color: var(--text-secondary); cursor: pointer; text-align: left;
    transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.nav-item:hover, .nav-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-item.active, .nav-toggle.active { background: var(--primary-soft); color: color-mix(in srgb, var(--primary) 76%, white); }
.nav-item.active::before, .nav-toggle.active::before { content: ""; position: absolute; inset: 9px auto 9px -11px; width: 3px; border-radius: 0 4px 4px 0; background: var(--primary); box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 45%, transparent); }
.nav-icon { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; }
.nav-icon svg { width: 19px; height: 19px; }

/* Bloques de color por categoria - aprobado en mockup. */
.nav-item.cat-home .nav-icon, .nav-item.cat-comm .nav-icon, .nav-toggle.cat-comm2 .nav-icon,
.nav-item.cat-counseling .nav-icon, .nav-toggle.cat-pastoral .nav-icon, .nav-toggle.cat-events .nav-icon,
.nav-toggle.cat-office .nav-icon, .nav-toggle.cat-resources .nav-icon, .nav-toggle.cat-analysis .nav-icon {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-md); color: #fff;
    transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast);
}
.nav-item.cat-home .nav-icon { background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #1a1006)); }
.nav-item.cat-comm .nav-icon { background: linear-gradient(145deg, #3b7de8, #1d4d94); }
.nav-toggle.cat-comm2 .nav-icon { background: linear-gradient(145deg, #7f77dd, #453f8f); }
.nav-item.cat-counseling .nav-icon, .nav-toggle.cat-pastoral .nav-icon { background: linear-gradient(145deg, #d4457e, #7e2749); }
.nav-toggle.cat-events .nav-icon { background: linear-gradient(145deg, #1d9e75, #0f5c44); }
.nav-toggle.cat-office .nav-icon, .nav-toggle.cat-resources .nav-icon { background: linear-gradient(145deg, #e09a2c, #8a5c14); }
.nav-toggle.cat-analysis .nav-icon { background: linear-gradient(145deg, #639922, #37540f); }
.nav-icon-flat { color: var(--text-secondary); }
body:not(.sidebar-collapsed) .nav-item.cat-home:hover .nav-icon, body:not(.sidebar-collapsed) .nav-item.cat-comm:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-comm2:hover .nav-icon,
body:not(.sidebar-collapsed) .nav-item.cat-counseling:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-pastoral:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-events:hover .nav-icon,
body:not(.sidebar-collapsed) .nav-toggle.cat-office:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-resources:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-analysis:hover .nav-icon {
    transform: scale(1.08);
}

/* Bloques de color por categoría — aprobado en mockup. Cada categoría del
   sidebar principal (no el pie de Configuración/Ayuda/Soporte/Perfil, que
   se queda con íconos planos con .nav-icon-flat) tiene su propio color de
   fondo en degradé, para diferenciarlas de un vistazo sin depender solo
   del texto. */
.nav-item.cat-home .nav-icon, .nav-item.cat-comm .nav-icon, .nav-toggle.cat-comm2 .nav-icon,
.nav-item.cat-counseling .nav-icon, .nav-toggle.cat-pastoral .nav-icon, .nav-toggle.cat-events .nav-icon,
.nav-toggle.cat-office .nav-icon, .nav-toggle.cat-resources .nav-icon, .nav-toggle.cat-analysis .nav-icon {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-md); color: #fff;
    transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast);
}
.nav-item.cat-home .nav-icon { background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #1a1006)); }
.nav-item.cat-comm .nav-icon { background: linear-gradient(145deg, #3b7de8, #1d4d94); }
.nav-toggle.cat-comm2 .nav-icon { background: linear-gradient(145deg, #7f77dd, #453f8f); }
.nav-item.cat-counseling .nav-icon, .nav-toggle.cat-pastoral .nav-icon { background: linear-gradient(145deg, #d4457e, #7e2749); }
.nav-toggle.cat-events .nav-icon { background: linear-gradient(145deg, #1d9e75, #0f5c44); }
.nav-toggle.cat-office .nav-icon, .nav-toggle.cat-resources .nav-icon { background: linear-gradient(145deg, #e09a2c, #8a5c14); }
.nav-toggle.cat-analysis .nav-icon { background: linear-gradient(145deg, #639922, #37540f); }
body:not(.sidebar-collapsed) .nav-item.cat-home:hover .nav-icon, body:not(.sidebar-collapsed) .nav-item.cat-comm:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-comm2:hover .nav-icon,
body:not(.sidebar-collapsed) .nav-item.cat-counseling:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-pastoral:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-events:hover .nav-icon,
body:not(.sidebar-collapsed) .nav-toggle.cat-office:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-resources:hover .nav-icon, body:not(.sidebar-collapsed) .nav-toggle.cat-analysis:hover .nav-icon {
    transform: scale(1.08);
}
.nav-icon-flat { color: var(--text-secondary); }
.nav-label { min-width: 0; flex: 1; font-size: 13px; font-weight: 630; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chevron { rotate: 0deg; color: var(--text-muted); font-size: 18px; line-height: 1; transition: rotate var(--duration-base); }
.nav-toggle.open .nav-chevron { rotate: 90deg; }
.submenu { display: none; gap: 2px; padding: 4px 0 2px 42px; }
.submenu.open { display: grid; animation: submenu-in var(--duration-base) var(--ease-standard); }
@keyframes submenu-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
body.reduce-motion .submenu.open { animation: none; }
.submenu.open { display: grid; }
.submenu a { position: relative; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.submenu a:hover, .submenu a.active { background: var(--surface-2); color: var(--text-primary); }
.submenu a.active::before { content: ""; position: absolute; left: -13px; top: 50%; width: 5px; height: 5px; translate: 0 -50%; border-radius: 50%; background: var(--primary); }

/* Píldora deslizante del sidebar: un resaltado que se desliza detrás
   del item con el mouse encima, en vez de solo cambiar de color de
   golpe. El JS (bindNavPill en panel.blade.php) ya calcula su
   posición — este bloque solo faltaba para que se vea (antes vivía
   en un CSS legado que dejó de cargarse). El item activo real sigue
   marcado por CSS (.nav-item.active) sin depender de JS. */
.sidebar-scroll { position: relative; }
.nav-hover-pill {
    position: absolute; left: 11px; right: 11px; top: 0; height: 0;
    border-radius: var(--radius-md); background: var(--surface-hover);
    opacity: 0; pointer-events: none;
    transition: top var(--duration-base) var(--ease-standard), height var(--duration-base) var(--ease-standard), opacity var(--duration-fast) ease;
}
body.sidebar-collapsed .nav-hover-pill { display: none; }
.nav-item, .nav-toggle { position: relative; z-index: 1; }

/* Colapsado: efecto "dock" (zoom + leve elevación del ícono), igual
   que un dock de escritorio, en vez de solo cambiar el fondo. */
body.sidebar-collapsed .nav-item:hover, body.sidebar-collapsed .nav-toggle:hover { transform: scale(1.12) translateY(-1px); }
body.sidebar-collapsed .nav-item:hover .nav-icon, body.sidebar-collapsed .nav-toggle:hover .nav-icon { box-shadow: 0 8px 16px rgba(0,0,0,.28); }

.sidebar-bottom { padding: 10px 11px 14px; border-top: 1px solid var(--border-subtle); }
.sidebar-bottom nav { display: grid; gap: 3px; }
.sidebar-logout-form { margin-top: 4px; }
.sidebar-logout-btn { color: var(--danger); }
.account { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: linear-gradient(145deg, var(--primary), #3d2e8c); color: #fff; font-weight: 800; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-text, .profile-text { min-width: 0; display: grid; }
.account-text strong, .profile-text strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-text span, .profile-text span { overflow: hidden; color: var(--text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.main { min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; transition: margin-left var(--duration-slow) var(--ease-standard); }
.topbar { position: sticky; top: 0; z-index: 70; min-height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--topbar-bg); backdrop-filter: blur(18px) saturate(135%); }
.topbar-left, .topbar-actions, .topbar-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-title { min-width: 150px; }
.top-title .eyebrow { margin: 0; }
.top-title h1 { margin: 1px 0 0; font-size: 17px; font-weight: 720; letter-spacing: -.015em; }
.search-trigger { width: min(430px, 34vw); height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-muted); cursor: pointer; text-align: left; transition: border-color var(--duration-fast), background var(--duration-fast); }
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface-2); }
.search-trigger svg { width: 17px; height: 17px; }
.search-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { padding: 3px 7px; border: 1px solid var(--border-subtle); border-bottom-color: var(--border-strong); border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font: 650 10px/1.2 inherit; }
.tool-btn, .mobile-menu-btn { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
.tool-btn:hover, .mobile-menu-btn:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text-primary); }
.tool-btn svg, .mobile-menu-btn svg { width: 18px; height: 18px; }
.mobile-menu-btn, .mobile-search-tool { display: none; }
.profile-pill { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 5px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.profile-pill .avatar { width: 34px; height: 34px; flex-basis: 34px; }
.profile-pill .chev, .quick-actions-btn .chev { width: 14px; height: 14px; rotate: -90deg; }

body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-section-title, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-chevron, body.sidebar-collapsed .submenu, body.sidebar-collapsed .account-text, body.sidebar-collapsed .sidebar-badge { display: none !important; }
body.sidebar-collapsed .brand { padding-inline: 19px; }
body.sidebar-collapsed .nav-item, body.sidebar-collapsed .nav-toggle { justify-content: center; padding-inline: 10px; }
body.sidebar-collapsed .nav-item.active::before, body.sidebar-collapsed .nav-toggle.active::before { left: -11px; }

.content { width: 100%; max-width: var(--content-max); flex: 1; margin: 0 auto; padding: 24px clamp(18px, 2.4vw, 38px) 42px; }
.app-footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px clamp(18px, 2.4vw, 38px); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 11px; }
.app-footer-main { display: flex; gap: 7px; }
.app-footer strong { color: var(--text-secondary); }

/* Type and reusable content */
h1, h2, h3, h4 { color: var(--text-primary); letter-spacing: -.018em; }
.eyebrow { color: var(--primary); font-size: 10.5px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.muted { color: var(--text-muted); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head h1 { margin: 3px 0 0; font-size: clamp(24px, 3vw, 34px); }
.page-head p { margin: 5px 0 0; color: var(--text-muted); }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel, .card, .panel-card, .admin-card, .mi-panel, .mi-directory, .greet-card, .mini-profile, .stat-card, .metric {
    border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important;
    background: var(--surface-1) !important; box-shadow: var(--shadow-sm) !important;
}
.panel, .card, .admin-card { padding: 20px; }
.notice, .alert { margin-bottom: 14px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-subtle)); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--text-secondary); }
.tag, .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 10.5px; font-weight: 720; white-space: nowrap; }
.tag.good, .badge.good, .badge.success { border-color: transparent; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.tag.warn, .badge.warn, .badge.warning { border-color: transparent; background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.tag.bad, .badge.bad, .badge.danger { border-color: transparent; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.tag.info, .badge.info { border-color: transparent; background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }

.btn { min-height:var(--button-height-md,42px); display:inline-flex; align-items:center; justify-content:center; gap:var(--button-icon-gap,8px); padding:var(--button-padding-md,.68rem .95rem); border:1px solid var(--button-primary-border,var(--primary)); border-radius:var(--button-radius,var(--radius-md)); background:var(--button-primary-background,var(--primary)); color:var(--button-primary-foreground,#fff); font-family:var(--button-font-family,inherit); font-size:var(--button-font-size-md,.8125rem); font-weight:var(--button-font-weight,750); line-height:var(--button-line-height,1.15); letter-spacing:0; text-decoration:none; cursor:pointer; box-shadow:0 8px 18px color-mix(in srgb,var(--button-primary-background,var(--primary)) 22%,transparent); transition:transform var(--duration-fast),background var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast),color var(--duration-fast); }
.btn:hover { background:var(--button-primary-background-hover,var(--primary-hover)); color:var(--button-primary-foreground,#fff); box-shadow:0 10px 22px color-mix(in srgb,var(--button-primary-background,var(--primary)) 28%,transparent); transform:translateY(-1px); }
.btn:active { background:var(--button-primary-background-active,var(--primary)); color:var(--button-primary-foreground,#fff); transform:translateY(0); }
.btn.secondary, .btn.outline { border-color:var(--button-secondary-border,var(--border-subtle)); background:var(--button-secondary-background,var(--surface-2)); color:var(--button-secondary-foreground,var(--text-primary)); box-shadow:none; }
.btn.secondary:hover, .btn.outline:hover { border-color:var(--border-strong); background:var(--button-secondary-background-hover,var(--surface-3)); color:var(--button-secondary-foreground,var(--text-primary)); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); box-shadow: none; }
.btn.danger { border-color:var(--button-danger-border,var(--danger)); background:var(--button-danger-background,var(--danger)); color:var(--button-danger-foreground,#fff); }
.btn.danger:hover { background:var(--button-danger-background-hover,var(--danger)); color:var(--button-danger-foreground,#fff); }
.btn.danger:active { background:var(--button-danger-background-active,var(--danger)); color:var(--button-danger-foreground,#fff); }
.btn.sm { min-height:var(--button-height-sm,32px); padding:var(--button-padding-sm,5px 10px); font-size:var(--button-font-size-sm,11.5px); }
.btn.lg { min-height:var(--button-height-lg,46px); padding:var(--button-padding-lg,10px 18px); font-size:var(--button-font-size-lg,13.5px); }
.btn svg { width:var(--button-icon-size,16px); height:var(--button-icon-size,16px); flex:0 0 auto; color:currentColor; }
.btn:focus-visible { outline:3px solid color-mix(in srgb,var(--border-focus,var(--primary)) 45%,transparent); outline-offset:2px; }
.btn:disabled, .btn[aria-disabled="true"], button:disabled { border-color:var(--border-subtle); background:var(--button-disabled-background,var(--surface-1)); color:var(--button-disabled-foreground,var(--text-disabled)); opacity:1; cursor:not-allowed; pointer-events:none; transform:none; box-shadow:none; }

input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea {
    width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--text-primary); outline: 0; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); background: var(--surface-1); box-shadow: 0 0 0 3px var(--primary-soft); }
input[type=color] { width: 48px; height: 42px; padding: 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
input[type=file] { color: var(--text-secondary); }
input:disabled, select:disabled, textarea:disabled { border-color:var(--border-subtle); background:var(--control-disabled-surface,var(--surface-1)); color:var(--control-disabled-foreground,var(--text-secondary)); cursor:not-allowed; opacity:1; }
label { color: var(--text-secondary); }
.form-grid, .admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field, .admin-label { display: grid; gap: 7px; font-size: 12px; font-weight: 650; }
.full { grid-column: 1 / -1; }
.admin-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.form-section { padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }

/* Biblioteca UI 2.1 */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.ui-card-head,.form-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.ui-card-heading,.form-section-head > div:first-child { display:grid; gap:4px; }
.ui-card-heading h3,.form-section-head h3 { margin:0; font-size:15px; }
.ui-card-heading p,.form-section-head p { margin:0; color:var(--text-muted); font-size:11.5px; }
.ui-card-actions { display:flex; align-items:center; gap:8px; }
.ui-breadcrumbs { display:flex; align-items:center; gap:7px; margin-bottom:7px; color:var(--text-muted); font-size:11px; }
.ui-breadcrumbs a:hover { color:var(--text-primary); }
.page-head-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.field-label { color:var(--text-secondary); font-size:11.5px; font-weight:700; }
.field-required { color:var(--danger); }
.field-hint { color:var(--text-muted); font-size:10.5px; font-weight:450; }
.field-error { color:var(--danger); font-size:10.5px; font-weight:650; }
.ui-control.is-invalid,[aria-invalid=true] { border-color:var(--danger) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 12%,transparent) !important; }
.empty-state-actions { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.ui-icon-button { width:38px; height:38px; display:inline-grid; place-items:center; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-2); color:var(--text-secondary); cursor:pointer; transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast); }
.ui-icon-button:hover { transform:translateY(-1px); border-color:var(--border-strong); background:var(--surface-3); color:var(--text-primary); }
.ui-icon-button:disabled,.ui-icon-button[aria-disabled="true"] { opacity:.52; pointer-events:none; }
.ui-icon-button.primary { border-color:var(--button-primary-border,var(--primary)); background:var(--button-primary-background,var(--primary)); color:var(--button-primary-foreground,#fff); }
.ui-icon-button.danger { color:var(--danger); }
.ui-icon-button svg { width:17px; height:17px; }
.form-section { padding:0; overflow:hidden; }
.form-section-head { margin:0; padding:18px 20px; border-bottom:1px solid var(--border-subtle); }
.form-section-body { padding:20px; }
.ui-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.ui-check input,.ui-switch input { position:absolute; opacity:0; pointer-events:none; }
.ui-check-box { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; margin-top:1px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface-2); color:transparent; transition:background var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast); }
.ui-check input:checked + .ui-check-box { border-color:var(--primary); background:var(--primary); color:#fff; box-shadow:0 0 0 3px var(--primary-soft); }
.ui-check input:disabled ~ *,.ui-switch input:disabled ~ * { opacity:1; cursor:not-allowed; }
.ui-check input:disabled + .ui-check-box,.ui-switch input:disabled + .ui-switch-track { border-color:var(--border-subtle); background:var(--control-disabled-surface,var(--surface-1)); color:var(--control-disabled-foreground,var(--text-disabled)); box-shadow:none; }
.ui-check input:disabled ~ .ui-check-copy strong,.ui-switch input:disabled ~ .ui-switch-copy strong { color:var(--control-disabled-foreground,var(--text-disabled)); }
.ui-check input:disabled ~ .ui-check-copy small,.ui-switch input:disabled ~ .ui-switch-copy small { color:var(--control-disabled-foreground,var(--text-disabled)); }
.ui-check input:focus-visible + .ui-check-box,.ui-switch input:focus-visible + .ui-switch-track { outline:3px solid var(--primary-soft); outline-offset:2px; }
.ui-check-copy,.ui-switch-copy { display:grid; gap:2px; }
.ui-check-copy strong,.ui-switch-copy strong { color:var(--text-primary); font-size:12px; }
.ui-check-copy small,.ui-switch-copy small { color:var(--text-muted); font-size:10.5px; font-weight:450; }
.ui-switch { display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; }
.ui-switch-copy { flex:1; }
.ui-switch-track { width:42px; height:24px; flex:0 0 42px; padding:3px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface-3); transition:background var(--duration-fast),border-color var(--duration-fast); }
.ui-switch-track i { display:block; width:16px; height:16px; border-radius:50%; background:var(--text-muted); transition:translate var(--duration-base),background var(--duration-base); }
.ui-switch input:checked + .ui-switch-track { border-color:var(--primary); background:var(--primary); }
.ui-switch input:checked + .ui-switch-track i { translate:18px 0; background:#fff; }
.ui-alert { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:start; gap:11px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--alert-color,var(--info)) 24%,var(--border-subtle)); border-radius:var(--radius-md); background:color-mix(in srgb,var(--alert-color,var(--info)) 8%,var(--surface-1)); }
.ui-alert.success { --alert-color:var(--success); }.ui-alert.warning { --alert-color:var(--warning); }.ui-alert.danger { --alert-color:var(--danger); }.ui-alert.info { --alert-color:var(--info); }
.ui-alert-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--alert-color) 14%,transparent); color:var(--alert-color); }
.ui-alert-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ui-alert-copy { display:grid; gap:2px; color:var(--text-secondary); font-size:11.5px; }
.ui-alert-copy strong { color:var(--text-primary); font-size:12px; }
.person-duplicate-feedback .person-duplicate-confirmation { display:flex; align-items:flex-start; gap:9px; margin-top:8px; color:var(--text-primary); font-weight:700; line-height:1.45; }
.person-duplicate-feedback .person-duplicate-confirmation input { flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--brand-primary); }
.ui-alert-close { border:0; background:transparent; color:var(--text-muted); font-size:20px; cursor:pointer; }
.ui-tabs { display:flex; align-items:center; gap:5px; overflow-x:auto; padding:5px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-2); scrollbar-width:none; }
.ui-tab { min-height:34px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:9px; color:var(--text-muted); font-size:11.5px; font-weight:650; white-space:nowrap; }
.ui-tab:hover { color:var(--text-primary); }
.ui-tab.is-active { background:var(--surface-1); color:var(--text-primary); box-shadow:var(--shadow-sm); }
.ui-tab > span { min-width:18px; height:18px; display:grid; place-items:center; padding:0 5px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:9px; }
.ui-skeleton { display:flex; align-items:center; gap:12px; padding:12px; }
.ui-skeleton-avatar,.ui-skeleton-lines i { display:block; background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:220% 100%; animation:ui-shimmer 1.35s linear infinite; }
.ui-skeleton-avatar { width:40px; height:40px; flex:0 0 40px; border-radius:12px; }
.ui-skeleton-lines { flex:1; display:grid; gap:7px; }
.ui-skeleton-lines i { height:9px; border-radius:99px; }.ui-skeleton-lines i:nth-child(2n) { width:72%; }.ui-skeleton-lines i:nth-child(3n) { width:48%; }
@keyframes ui-shimmer { to { background-position:-220% 0; } }
.ui-data-table { display:grid; gap:10px; }
.ui-table-toolbar,.ui-table-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ui-table-footer { color:var(--text-muted); font-size:11px; }
.ui-pagination { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.ui-pagination a,.ui-pagination > span { min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:6px 11px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--surface-1); color:var(--text-secondary); font-size:10.5px; font-weight:650; }
.ui-pagination a:hover { border-color:var(--primary); color:var(--primary); }
.ui-pagination .is-disabled { opacity:.45; }
.ui-pagination .ui-pagination-meta { border-color:transparent; background:transparent; color:var(--text-muted); }
.section-spacer { margin-top:15px; }
.filter-search-wide { grid-column:1 / -2; }
.table-actions-cell { text-align:right; }
.mi-view-tools { display:flex; align-items:center; gap:8px; }
.ui-form-stack { display:grid; gap:16px; }
.ui-radio-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.ui-radio-group label { position:relative; cursor:pointer; }
.ui-radio-group input { position:absolute; opacity:0; }
.ui-radio-group span { min-height:39px; display:grid; place-items:center; padding:7px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--surface-2); color:var(--text-muted); font-size:10.5px; font-weight:650; transition:border-color var(--duration-fast),background var(--duration-fast),color var(--duration-fast); }
.ui-radio-group input:checked + span { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.ui-radio-group input:focus-visible + span { outline:3px solid var(--primary-soft); outline-offset:2px; }
.ui-radio { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.ui-radio input { position:absolute; opacity:0; pointer-events:none; }
.ui-radio-mark { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; margin-top:1px; border:1px solid var(--border-strong); border-radius:50%; background:var(--surface-2); }
.ui-radio-mark::after { content:""; width:8px; height:8px; border-radius:50%; background:transparent; }
.ui-radio input:checked + .ui-radio-mark { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.ui-radio input:checked + .ui-radio-mark::after { background:var(--primary); }
.ui-radio input:focus-visible + .ui-radio-mark { outline:3px solid var(--primary-soft); outline-offset:2px; }
.ui-radio input:disabled ~ * { opacity:1; cursor:not-allowed; }
.ui-radio input:disabled + .ui-radio-mark { border-color:var(--border-subtle); background:var(--control-disabled-surface,var(--surface-1)); box-shadow:none; }
.ui-radio input:disabled ~ .ui-radio-copy :is(strong,small) { color:var(--control-disabled-foreground,var(--text-disabled)); }
.ui-radio-copy { display:grid; gap:2px; }
.ui-radio-copy strong { color:var(--text-primary); font-size:12px; }
.ui-radio-copy small { color:var(--text-muted); font-size:10.5px; font-weight:450; }
.appearance-color-row { display:flex; align-items:center; gap:10px; }
.appearance-switches { display:grid; gap:10px; margin-top:15px; }
.appearance-switches .ui-switch { padding:12px 13px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-2); }
.ui-error-list { margin:6px 0 0; padding-left:18px; }
.ui-validation-summary { width:100%; box-sizing:border-box; margin-bottom:var(--space-4); }
.ui-validation-summary > .ui-alert-copy { min-width:0; }
.form-submit-row { display:flex; justify-content:flex-end; gap:9px; }
.preview-label { margin-left:7px; color:#7f8ca1; font-size:10px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
tbody tr { transition: background var(--duration-fast); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td strong, td a { color: var(--text-primary); }

/* Search / command palette */
.search-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding: min(13vh, 110px) 18px 18px; background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity var(--duration-base), visibility var(--duration-base); }
.search-modal.open { opacity: 1; visibility: visible; }
.search-panel { width: min(680px, 100%); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow-lg); transform: translateY(-10px) scale(.985); transition: transform var(--duration-base); }
.search-modal.open .search-panel { transform: none; }
.search-panel-top { height: 60px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); }
.search-panel-top svg { width: 21px; height: 21px; color: var(--text-muted); }
.search-panel-input { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 15px; }
.search-close { width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); cursor: pointer; }
.search-results { max-height: 58vh; overflow-y: auto; padding: 10px; }
.search-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: var(--radius-md); }
.search-result:hover, .search-result.is-active { background: var(--primary-soft); }
.search-result span:first-child { display: grid; }
.search-result strong { font-size: 13px; }
.search-result small { color: var(--text-muted); font-size: 11px; }
.search-empty, .notif-empty { padding: 28px 18px; color: var(--text-muted); text-align: center; }

/* Dropdowns, notifications, modal and toast primitives */
.quick-actions-wrap, .profile-wrap, .notif-wrap { position: relative; }
.dropdown-backdrop, .notif-backdrop { display: none; }
.dropdown-panel, .notif-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-dropdown); width: 290px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: opacity var(--duration-base), transform var(--duration-base), visibility var(--duration-base); }
.quick-actions-wrap.open .dropdown-panel, .profile-wrap.open .dropdown-panel, .notif-wrap.open .notif-panel { opacity: 1; visibility: visible; transform: none; }
.dropdown-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; text-align: left; }
.dropdown-item:hover { background: var(--surface-2); color: var(--text-primary); }
.dropdown-item-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--primary); }
.dropdown-item-icon svg { width: 15px; height: 15px; }
.dropdown-item-text { display: grid; }
.dropdown-item-text small { color: var(--text-muted); font-size: 10px; }
.dropdown-item-danger { color: var(--danger); }
.dropdown-sep { height: 1px; margin: 6px 2px; background: var(--border-subtle); }
.profile-panel-head { display: flex; align-items: center; gap: 10px; padding: 8px; }
.profile-panel-head > div:last-child { min-width: 0; display: grid; }
.profile-panel-head span { color: var(--text-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.notif-panel { width: min(410px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-subtle); }
.notif-panel-head-actions { display: flex; gap: 6px; }
.notif-mark-all, .notif-close { border: 0; background: transparent; color: var(--primary); font-size: 10.5px; cursor: pointer; }
.notif-panel-list { max-height: 430px; overflow-y: auto; }
.notif-panel-foot { display: block; padding: 12px; border-top: 1px solid var(--border-subtle); color: var(--primary); font-size: 11.5px; font-weight: 700; text-align: center; }
.notif-badge, .sidebar-badge { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 999px; background: var(--danger) !important; color: #fff !important; font-size: 9px !important; font-weight: 800; }
.notif-badge { position: absolute; top: -4px; right: -4px; }
.notif-toast-stack { position: fixed; top: 88px; right: 18px; z-index: var(--z-toast); width: min(380px, calc(100vw - 36px)); display: grid; gap: 8px; }

.app-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-exit), visibility var(--duration-base); }
.app-modal.open { opacity: 1; visibility: visible; transition-timing-function: var(--ease-enter); }
.app-modal-backdrop { position: absolute; inset: 0; border: 0; padding: 0; background: var(--overlay); backdrop-filter: blur(var(--overlay-blur)); cursor: default; }
.app-modal-box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 36px); display:flex; flex-direction:column; overflow:hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-elevated); box-shadow: var(--elevation-3); transform: translateY(var(--motion-enter-distance)) scale(var(--motion-enter-scale)); transition: transform var(--duration-base) var(--ease-exit); }
.app-modal.open .app-modal-box { transform: none; transition-timing-function: var(--ease-enter); }
.app-modal-box.sm { width:min(420px,100%); }
.app-modal-box.md { width:min(560px,100%); }
.app-modal-box.lg { width:min(760px,100%); }
.app-modal-box.xl,.app-modal-box.wide { width:min(980px,100%); }
.app-modal-head, .app-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; }
.app-modal-head { flex:0 0 auto; border-bottom: 1px solid var(--border-subtle); background:var(--surface-elevated); }
.app-modal-head h3 { margin: 0; font-size: 17px; }
.app-modal-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.app-modal-body { min-height:0; overflow-y:auto; padding:20px; overscroll-behavior:contain; }
.app-modal-foot { flex:0 0 auto; border-top: 1px solid var(--border-subtle); justify-content: flex-end; background:var(--surface-elevated); }
.app-modal-x { width: 34px; height: 34px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-muted); cursor: pointer; }
.app-confirm-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.app-confirm-icon svg { width: 19px; height: 19px; }

/* Composiciones reutilizables: búsqueda, estados y acciones de formulario */
.ui-search { position:relative; display:grid; }
.ui-search > .ui-icon { position:absolute; left:12px; top:50%; translate:0 -50%; z-index:1; color:var(--text-muted); pointer-events:none; }
.ui-search .ui-control { padding-left:39px; }
.ui-search kbd { position:absolute; right:10px; top:50%; translate:0 -50%; padding:2px 6px; border:1px solid var(--border-subtle); border-radius:6px; background:var(--surface-1); color:var(--text-muted); font-size:9.5px; pointer-events:none; }
.ui-status { --status-color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--status-color) 24%,var(--border-subtle)); border-radius:999px; background:color-mix(in srgb,var(--status-color) 10%,transparent); color:var(--status-color); font-size:10.5px; font-weight:720; white-space:nowrap; }
.ui-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 13%,transparent); }
.ui-status.success { --status-color:var(--success); }.ui-status.warning { --status-color:var(--warning); }.ui-status.danger { --status-color:var(--danger); }.ui-status.info { --status-color:var(--info); }.ui-status.neutral { --status-color:var(--text-muted); }
.ui-form-footer { position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid var(--border-subtle); background:color-mix(in srgb,var(--surface-elevated) 94%,transparent); backdrop-filter:blur(14px); }
.ui-form-footer-copy { color:var(--text-muted); font-size:11px; }
.ui-form-footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; }

/* Dropdown nativo */
.ui-dropdown { position:relative; }
.ui-dropdown > summary { list-style:none; cursor:pointer; }
.ui-dropdown > summary::-webkit-details-marker { display:none; }
.ui-dropdown-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:var(--z-dropdown); min-width:220px; padding:7px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-elevated); box-shadow:var(--shadow-lg); }
.ui-dropdown[open] > summary::after { content:""; position:fixed; inset:0; z-index:-1; }

/* Drawer */
.ui-drawer { position:fixed; inset:0; z-index:var(--z-drawer); visibility:hidden; pointer-events:none; }
.ui-drawer.open { visibility:visible; pointer-events:auto; }
.ui-drawer-backdrop { position:absolute; inset:0; border:0; background:var(--overlay); opacity:0; transition:opacity var(--duration-base); }
.ui-drawer.open .ui-drawer-backdrop { opacity:1; }
.ui-drawer-panel { position:absolute; inset:0 0 0 auto; width:min(520px,100%); display:flex; flex-direction:column; border-left:1px solid var(--border-strong); background:var(--surface-elevated); box-shadow:var(--shadow-lg); translate:100% 0; transition:translate var(--duration-slow) var(--ease-standard); }
.ui-drawer.open .ui-drawer-panel { translate:0; }
.ui-drawer-head,.ui-drawer-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 19px; }
.ui-drawer-head { border-bottom:1px solid var(--border-subtle); }.ui-drawer-head h3 { margin:0; font-size:16px; }.ui-drawer-head p { margin:3px 0 0; color:var(--text-muted); font-size:11px; }
.ui-drawer-body { min-height:0; flex:1; overflow-y:auto; padding:19px; }
.ui-drawer-foot { border-top:1px solid var(--border-subtle); justify-content:flex-end; }

/* Stepper */
.ui-stepper { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; counter-reset:ui-step; }
.ui-stepper.steps-1 { grid-template-columns:1fr; }.ui-stepper.steps-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }.ui-stepper.steps-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }.ui-stepper.steps-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }.ui-stepper.steps-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.ui-step { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:9px; color:var(--text-muted); counter-increment:ui-step; }
.ui-step::before { content:counter(ui-step); width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:50%; background:var(--surface-2); color:var(--text-secondary); font-size:11px; font-weight:760; }
.ui-step:not(:last-child)::after { content:""; position:absolute; top:15px; left:39px; right:-1px; height:1px; background:var(--border-subtle); }
.ui-step-copy { position:relative; z-index:1; min-width:0; display:grid; background:var(--surface-1); }.ui-step-copy strong { overflow:hidden; color:inherit; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.ui-step-copy small { overflow:hidden; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.ui-step.is-active { color:var(--primary); }.ui-step.is-active::before { border-color:var(--primary); background:var(--primary); color:#fff; box-shadow:0 0 0 3px var(--primary-soft); }
.ui-step.is-complete { color:var(--success); }.ui-step.is-complete::before { border-color:var(--success); background:color-mix(in srgb,var(--success) 14%,var(--surface-1)); color:var(--success); }

/* Avatar, carga, toast y tooltip */
.ui-avatar { --avatar-size:40px; width:var(--avatar-size); height:var(--avatar-size); flex:0 0 var(--avatar-size); display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border-subtle)); border-radius:calc(var(--avatar-size) * .3); background:linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--primary) 48%,#111827)); color:#fff; font-size:calc(var(--avatar-size) * .31); font-weight:800; text-transform:uppercase; }
.ui-avatar.size-32 { --avatar-size:32px; }.ui-avatar.size-48 { --avatar-size:48px; }.ui-avatar.size-64 { --avatar-size:64px; }
.ui-avatar.round { border-radius:50%; }.ui-avatar img { width:100%; height:100%; object-fit:cover; }
.ui-loading { display:inline-flex; align-items:center; gap:9px; color:var(--text-secondary); font-size:11.5px; }
.ui-spinner { width:18px; height:18px; border:2px solid var(--border-strong); border-top-color:var(--primary); border-radius:50%; animation:ui-spin .72s linear infinite; }
@keyframes ui-spin { to { rotate:360deg; } }
.ui-toast { --toast-color:var(--info); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--toast-color) 27%,var(--border-subtle)); border-radius:var(--radius-lg); background:var(--surface-elevated); box-shadow:var(--shadow-lg); color:var(--text-secondary); }
.ui-toast.success { --toast-color:var(--success); }.ui-toast.warning { --toast-color:var(--warning); }.ui-toast.danger { --toast-color:var(--danger); }
.ui-toast-mark { width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--toast-color); box-shadow:0 0 0 4px color-mix(in srgb,var(--toast-color) 13%,transparent); }
.ui-toast-copy { display:grid; gap:2px; }.ui-toast-copy strong { color:var(--text-primary); font-size:12px; }.ui-toast-copy span { font-size:11px; }
.ui-tooltip { position:relative; display:inline-flex; }
.ui-tooltip::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); z-index:var(--z-tooltip); max-width:240px; padding:6px 8px; border-radius:7px; background:#05070d; color:#fff; font-size:10px; line-height:1.3; white-space:nowrap; opacity:0; visibility:hidden; translate:-50% 3px; transition:opacity var(--duration-fast),translate var(--duration-fast),visibility var(--duration-fast); pointer-events:none; }
.ui-tooltip:hover::after,.ui-tooltip:focus-within::after { opacity:1; visibility:visible; translate:-50% 0; }

/* Dashboard family */
.home-shell { display: grid; gap: 16px; }
.greet-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr); gap: 16px; }
.greet-card { position: relative; min-height: 170px; overflow: hidden; padding: 24px !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 17%, var(--surface-1)), var(--surface-1) 60%) !important; }
.greet-card::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -70px; border: 50px solid color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 50%; pointer-events: none; }
.greet-copy, .greet-highlight { position: relative; z-index: 1; }
.greet-copy p, .greet-copy span, .greet-phrase { color: var(--text-muted); }
.greet-copy h2 { margin: 5px 0 3px; font-size: clamp(24px, 3vw, 34px); }
.greet-highlight { max-width: 260px; text-align: right; }
.greet-clock { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.greet-clock-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); }
.greet-clock-icon svg { width: 19px; height: 19px; }
.greet-clock-time { font-size: 22px; font-weight: 780; }
.greet-phrase { margin: 7px 0 0; font-size: 11.5px; }
.mini-profile { padding: 18px !important; display: grid; align-content: space-between; gap: 16px; }
.mini-profile-top { display: flex; align-items: center; gap: 12px; }
.mini-avatar-wrap { position: relative; }
.mini-avatar { width: 50px; height: 50px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg, var(--primary), #392a8a); color: #fff; font-weight: 800; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mini-status { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--surface-1); border-radius: 50%; background: var(--success); }
.mini-profile-copy { min-width: 0; display: grid; }
.mini-profile-copy strong { overflow: hidden; text-overflow: ellipsis; }
.mini-role-badge { width: fit-content; margin-top: 4px; padding: 2px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 9.5px; font-weight: 750; text-transform: uppercase; }
.mini-dept { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.mini-profile-link { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--primary); font-size: 11.5px; font-weight: 720; }
.main-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.panel-card { padding: 20px !important; }
.panel-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-card-head h3 { margin: 2px 0 0; font-size: 15px; }
.head-link { color: var(--primary); font-size: 11px; font-weight: 700; }
.chat-preview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 9px; }
.chat-preview-item, .quick-link, .req-item, .today-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); }
.chat-preview-item:hover, .quick-link:hover, .req-item:hover { border-color: var(--border-strong); background: var(--surface-3); transform: translateY(-1px); }
.chat-preview-avatar, .module-icon { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.chat-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-preview-copy, .quick-link-copy, .req-item-copy { min-width: 0; flex: 1; display: grid; }
.chat-preview-copy strong, .quick-link-copy strong, .req-item-copy strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-copy span, .quick-link-copy span, .req-item-copy span { overflow: hidden; color: var(--text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-meta { display: grid; justify-items: end; gap: 4px; color: var(--text-muted); font-size: 9.5px; }
.chat-preview-unread { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--primary); color: #fff; font-size: 9px; }
.today-list, .quick-links, .req-list, .timeline { display: grid; gap: 8px; }
.today-item { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; }
.today-rail { align-self: stretch; border-radius: 4px; background: var(--info); }
.today-item.is-overdue .today-rail { background: var(--danger); }
.today-item small, .today-foot, .req-foot { color: var(--text-muted); font-size: 10.5px; }
.today-foot, .req-foot { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-subtle); }
.today-empty, .empty-state { padding: 28px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); text-align: center; }
.today-empty strong, .empty-state strong { display: block; margin-bottom: 3px; color: var(--text-primary); }
.quick-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.quick-link-arrow { color: var(--text-muted); }
.lower-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.timeline-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; }
.timeline-dot { width: 9px; height: 9px; margin: 5px auto 0; border-radius: 50%; background: var(--primary); }
.timeline-copy { display: grid; }
.timeline-copy strong { font-size: 12px; }
.timeline-copy span, .timeline-day { color: var(--text-muted); font-size: 10px; }

/* Settings layout and appearance preview */
.admin-module { display: grid; gap: 16px; }
.admin-module-header { padding: 3px 0 8px; }
.settings-appearance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: 18px; align-items: start; }
.appearance-options { display: grid; gap: 16px; }
.appearance-section { padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.appearance-section h3 { margin: 0 0 3px; font-size: 14px; }
.appearance-section > p { margin: 0 0 15px; color: var(--text-muted); font-size: 11.5px; }
.theme-choice-grid, .density-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice-card { position: relative; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.choice-card input { position: absolute; opacity: 0; }
.theme-swatch { height: 52px; display: grid; grid-template-columns: 30% 1fr; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 9px; background: #f4f6fa; }
.theme-swatch::before { content: ""; background: #141924; }
.theme-swatch.dark { background: #111722; }
.theme-swatch.dark::before { background: #0a0e16; }
.theme-swatch.auto { background: linear-gradient(120deg, #111722 0 50%, #f4f6fa 50%); }
.theme-swatch.auto::before { background: linear-gradient(120deg, #0a0e16 0 50%, #fff 50%); }
.choice-card strong { font-size: 11.5px; }
.appearance-preview { position: sticky; top: calc(var(--topbar-height) + 18px); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: #0a0e16; box-shadow: var(--shadow-lg); }
.preview-top { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #263143; }
.preview-top i { width: 7px; height: 7px; border-radius: 50%; background: #35445a; }
.preview-shell { min-height: 330px; display: grid; grid-template-columns: 82px 1fr; }
.preview-side { padding: 12px 8px; border-right: 1px solid #263143; background: #0d111b; }
.preview-side span { display: block; height: 10px; margin-bottom: 9px; border-radius: 4px; background: #263143; }
.preview-side span:first-child { width: 70%; height: 24px; margin-bottom: 20px; background: var(--primary); }
.preview-main { padding: 14px; background: #101621; }
.preview-main > span { display: block; width: 42%; height: 13px; margin-bottom: 14px; border-radius: 5px; background: #405069; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.preview-metrics i, .preview-chart { display: block; border: 1px solid #263143; border-radius: 9px; background: #171e2b; }
.preview-metrics i { height: 58px; }
.preview-chart { height: 145px; margin-top: 9px; background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 18%, #171e2b), #171e2b); }

/* CRM people */
.crm-shell { display: grid; gap: 15px; }
.crm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.crm-metric { padding: 15px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.crm-metric strong { display: block; font-size: 22px; }
.crm-metric span { color: var(--text-muted); font-size: 10.5px; }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .25fr)) auto; gap: 9px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-cell .avatar { width: 38px; height: 38px; flex-basis: 38px; }
.person-cell-copy { display: grid; }
.person-cell-copy small { color: var(--text-muted); }

/* Ministry surfaces: normalize old module composition to the same system. */
.mi { max-width: var(--content-max) !important; }
.mi-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.mi-directory { padding: 18px; }
.mi-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mi-heading h2 { margin: 2px 0 0; font-size: 17px; }
.mi-heading p { margin: 0; color: var(--text-muted); font-size: 11px; }
.mi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mi-card { overflow: hidden; transition: transform var(--duration-base), border-color var(--duration-base), box-shadow var(--duration-base); }
.mi-card-head { display: flex; align-items: center; gap: 10px; padding: 13px; }
.mi-logo { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: var(--accent); color: #fff; }
.mi-logo img { width: 100%; height: 100%; object-fit: cover; }
.mi-card-name { min-width: 0; flex: 1; display: grid; }
.mi-card-name small { color: var(--accent); font-size: 9px; font-weight: 780; letter-spacing: .08em; }
.mi-card-name b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mi-body { padding: 13px; }
.mi-person { margin: 0 0 8px; color: var(--text-secondary); font-size: 11px; }
.mi-person span { margin-right: 6px; color: var(--text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.mi-desc { min-height: 34px; margin: 0; color: var(--text-muted); font-size: 11px; }
.mi-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.mi-kpis div { padding: 8px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-2); }
.mi-kpis small, .mi-kpis b { display: block; }
.mi-kpis small { color: var(--text-muted); font-size: 8.5px; text-transform: uppercase; }
.mi-kpis b { font-size: 14px; }
.mi-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mi-growth { color: var(--text-muted); font-size: 10px; }
.mi-open { padding: 6px 9px; border: 1px solid var(--border-subtle); border-radius: 9px; font-size: 10.5px; font-weight: 700; }
.mi-aside { display: grid; gap: 12px; }
.mi-panel { padding: 16px; }
.mi-panel h3 { margin: 2px 0 7px; font-size: 14px; }
.mi-panel p { margin: 0; color: var(--text-muted); font-size: 11px; }
.mi-event { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.mi-event:first-of-type { border-top: 0; }
.mi-event b { font-size: 11.5px; }
.mi-event small { color: var(--text-muted); font-size: 10px; }
.mi-hero { border-color: var(--border-subtle) !important; border-radius: var(--radius-xl) !important; background: linear-gradient(130deg, color-mix(in srgb, var(--primary) 14%, var(--surface-1)), var(--surface-1) 62%) !important; }
.mi-focus div, .mi-card, .mi-kpis div, .mi-tools { border-color: var(--border-subtle) !important; background: var(--surface-1) !important; box-shadow: none !important; }
.mi-card { border-left: 1px solid var(--border-subtle) !important; }
.mi-card:hover { border-color: color-mix(in srgb, var(--primary) 44%, var(--border-subtle)) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
.mi-card-head { background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)) !important; }
.mi-open { border-color: var(--border-subtle) !important; background: var(--surface-2) !important; color: var(--text-primary) !important; }
.mi-grid.is-list { grid-template-columns: 1fr !important; }
.mi-grid.is-list .mi-card { display: grid; grid-template-columns: minmax(250px, .6fr) 1fr; }
.mi-grid.is-list .mi-card-head { align-items: center; }
.mi-grid.is-list .mi-body { display: grid; grid-template-columns: minmax(150px, .6fr) 1fr auto; align-items: center; gap: 14px; }
.mi-grid.is-list .mi-desc { display: none; }
.mi-grid.is-list .mi-kpis { margin: 0; }

.sidebar-overlay { position: fixed; inset: 0; z-index: 75; display: none; background: var(--overlay); }

/* Authentication shell */
body.auth-page { min-height: 100vh; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(440px, 1.1fr); }
.auth-story { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 70px); border-right: 1px solid var(--border-subtle); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 18%, #0b1019), #0b1019 58%); }
.auth-brand { position: relative; z-index: 2; width: fit-content; display: flex; align-items: center; gap: 12px; }
.auth-brand > span:last-child { display: grid; }
.auth-brand strong { font-size: 14px; }
.auth-brand small { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.auth-story-copy { position: relative; z-index: 2; max-width: 560px; }
.auth-story-copy h1 { max-width: 540px; margin: 11px 0 16px; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
.auth-story-copy p { max-width: 500px; margin: 0; color: var(--text-secondary); font-size: 15px; }
.auth-credit { position: relative; z-index: 2; color: var(--text-muted); }
.auth-orbit { position: absolute; width: 640px; height: 640px; right: -310px; bottom: -270px; border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 50%; }
.auth-orbit i { position: absolute; inset: 15%; border: inherit; border-radius: inherit; }
.auth-orbit i:nth-child(2) { inset: 31%; }
.auth-orbit i:nth-child(3) { inset: 45%; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.auth-access { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--app-bg); }
.auth-card { width: min(440px, 100%); padding: 30px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow-lg); }
.auth-card h1 { margin: 18px 0 5px; font-size: 27px; }
.auth-card p.lead { margin: 0 0 22px; color: var(--text-muted); }
.auth-card label { display: block; margin-top: 14px; font-size: 12px; font-weight: 650; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-card input:not([type=checkbox]) { margin-top: 6px; }
.auth-card .btn { width: 100%; margin-top: 20px; }
.back-home { display: inline-flex; gap: 7px; color: var(--text-muted); font-size: 11.5px; }
.back-home:hover { color: var(--text-primary); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 15px; }
.checkbox-row label { margin: 0; color: var(--text-muted); }
.foot-link { margin: 18px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }
.foot-link a { color: var(--primary); font-weight: 700; }
.error, .field-error { color: var(--danger); }
.error { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 10%, transparent); }

@media (max-width: 1180px) {
    .profile-text { display: none; }
    .search-trigger { width: min(330px, 31vw); }
    .greet-row, .main-row, .settings-appearance { grid-template-columns: 1fr; }
    .appearance-preview { position: static; }
    .crm-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    :root { --sidebar-width: 244px; }
    .sidebar { transform: translateX(-101%); box-shadow: var(--shadow-lg); }
    body.menu-open .sidebar { transform: translateX(0); }
    body.menu-open .sidebar-overlay { display: block; }
    .main, body.sidebar-collapsed .main { margin-left: 0; }
    .mobile-menu-btn { display: grid; }
    .desktop-collapse { display: none; }
    .top-title { display: none; }
    .search-trigger { width: min(460px, 48vw); }
    .topbar-page-actions .btn-label, .quick-actions-btn .btn-label { display: none; }
    .content { padding-top: 18px; }
    .form-grid, .admin-form { grid-template-columns: 1fr; }
    .mi-layout { grid-template-columns: 1fr; }
    .mi-aside { grid-template-columns: repeat(2, 1fr); }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .full { grid-column: auto; }
}
@media (max-width: 680px) {
    :root { --topbar-height: 64px; }
    .topbar { min-height: 64px; padding: 10px 12px; }
    .search-trigger { display: none; }
    .mobile-search-tool { display: grid; }
    .topbar-page-actions { display: none; }
    .profile-pill { border: 0; padding: 0; background: transparent; }
    .profile-pill .chev { display: none; }
    .content { padding: 14px 12px 30px; }
    .app-footer { flex-direction: column; padding-inline: 14px; }
    .greet-card { min-height: 220px; align-items: flex-start; flex-direction: column; }
    .greet-highlight { text-align: left; }
    .greet-clock { justify-content: flex-start; }
    .crm-metrics { grid-template-columns: 1fr 1fr; }
    .filter-bar { grid-template-columns: 1fr; }
    .theme-choice-grid, .density-choice-grid { grid-template-columns: 1fr; }
    .mi-grid, .mi-aside { grid-template-columns: 1fr; }
    .app-modal { padding: 0; align-items: end; }
    .app-modal-box, .app-modal-box.sm, .app-modal-box.md, .app-modal-box.lg, .app-modal-box.xl, .app-modal-box.wide { width: 100%; max-height: 100dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
    .app-modal.fullscreen-mobile { align-items:stretch; }
    .app-modal.fullscreen-mobile .app-modal-box { max-height:100dvh; height:100dvh; border:0; border-radius:0; }
    .ui-form-footer { flex-direction:column; align-items:stretch; }
    .ui-form-footer-actions { display:grid; grid-template-columns:1fr 1fr; }
    .ui-form-footer-actions .btn { width:100%; }
    .ui-stepper { grid-template-columns:1fr; }
    .ui-step:not(:last-child)::after { top:34px; bottom:-8px; left:15px; right:auto; width:1px; height:auto; }
    .ui-step-copy { padding:4px 0; }
    .ui-drawer-panel { width:100%; border-left:0; }
    .notif-panel { position: fixed; inset: auto 0 0; width: 100%; max-height: 78vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
    .dropdown-panel { position: fixed; inset: auto 10px 10px; width: auto; }
    .mi-grid.is-list .mi-card, .mi-grid.is-list .mi-body { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Floating UI — authoritative cross-module contract (Phase 4 audit).
   A floating surface never inherits foreground colors from its launcher. */
:where(.ui-menu, .ui-dropdown-menu, .dropdown-panel, .context-menu, .popover-panel) {
    border-color: var(--menu-border) !important;
    background: var(--menu-surface) !important;
    box-shadow: var(--menu-shadow) !important;
    color: var(--menu-foreground) !important;
    color-scheme: normal;
}
:where(.ui-menu-item, .ui-dropdown-menu > a, .ui-dropdown-menu > button, .dropdown-item, .context-menu [role="menuitem"], .popover-panel [role="menuitem"]) {
    background: var(--menu-item-surface);
    color: var(--menu-item-foreground) !important;
}
.ui-menu-item { display:flex; width:100%; min-height:2.5rem; align-items:center; gap:.625rem; padding:.625rem .75rem; border:0; border-radius:var(--radius-md); text-align:left; text-decoration:none; cursor:pointer; }
.ui-menu-copy { display:grid; min-width:0; gap:.125rem; }
.ui-menu-copy > :is(strong,small) { overflow:hidden; text-overflow:ellipsis; }
:where(.ui-menu-item, .ui-dropdown-menu > a, .ui-dropdown-menu > button, .dropdown-item, .context-menu [role="menuitem"], .popover-panel [role="menuitem"]):is(:hover, :focus-visible, [aria-current="true"], .is-active) {
    background: var(--menu-item-hover-surface) !important;
    color: var(--menu-item-hover-foreground) !important;
}
.ui-menu .ui-menu-item :is(strong, b),
:where(.ui-menu-item, .ui-dropdown-menu > a, .ui-dropdown-menu > button, .dropdown-item) :is(strong, b) {
    color: inherit !important;
}
:where(.ui-menu-description, .ui-menu-item small, .dropdown-item-text small) { color: var(--menu-muted) !important; }
:where(.ui-menu-separator, .dropdown-sep) { background: var(--menu-separator) !important; }
:where(.ui-menu-item, .dropdown-item)[aria-disabled="true"],
:where(.ui-menu-item, .dropdown-item):disabled {
    color: var(--menu-item-disabled-foreground) !important;
    cursor: not-allowed;
    opacity: .78;
}
:where(.app-modal-box, .ui-drawer-panel, .ui-toast) {
    border-color: var(--overlay-border);
    background: var(--overlay-surface);
    color: var(--overlay-foreground);
}
:where(.app-modal-body, .ui-drawer-body, .ui-toast-copy span) { color: var(--overlay-foreground); }
:where(.app-modal-head p, .ui-drawer-head p) { color: var(--overlay-muted); }
body:is(.app-modal-open,.app-drawer-open) { overflow:hidden; }

/* =====================================================================
   Phase 3 — application shell
   Sidebar, topbar, context bar, profile, notifications and responsive UI.
   Navigation groups and permissions remain unchanged until Phase 4.
   ===================================================================== */
:root {
    --sidebar-width: 286px;
    --topbar-height: 82px;
    --shell-gutter: clamp(16px, 2.35vw, 38px);
}

body .sidebar {
    isolation: isolate;
    border-right-color: color-mix(in srgb, var(--border-subtle) 84%, transparent);
    background:
        radial-gradient(circle at 15% -8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 270px),
        linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 96%, var(--primary)), var(--sidebar-bg) 42%);
    box-shadow: 18px 0 54px rgba(2, 5, 12, .12);
}
body.theme-light .sidebar {
    background:
        radial-gradient(circle at 15% -8%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 270px),
        linear-gradient(180deg, #151927, #10131d 48%);
}
body .brand {
    position: relative;
    min-height: var(--topbar-height);
    padding: 15px 17px;
    border-bottom-color: color-mix(in srgb, var(--border-subtle) 84%, transparent);
    background: color-mix(in srgb, var(--sidebar-bg) 78%, transparent);
    backdrop-filter: blur(18px);
}
body .brand-link { gap: 13px; }
body .brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 28%, transparent);
}
body .brand-text strong { font-size: 14.5px; letter-spacing: -.015em; }
body .brand-text span { margin-top: 2px; font-size: 9.5px; letter-spacing: .075em; }
.sidebar-mobile-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: none;
    place-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-secondary);
    cursor: pointer;
}
.sidebar-mobile-close svg { width: 18px; height: 18px; }

body .sidebar-scroll { padding: 17px 12px 26px; }
body .nav-section { gap: 4px; margin-bottom: 18px; }
body .nav-section-title {
    padding: 5px 12px 7px;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--primary));
    font-size: 9.5px;
    letter-spacing: .12em;
}
body .nav-item,
body .nav-toggle {
    min-height: 43px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 12px;
}
body .nav-item:hover,
body .nav-toggle:hover {
    border-color: color-mix(in srgb, var(--border-subtle) 72%, transparent);
    background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
    transform: translateX(2px);
}
body .nav-item.active,
body .nav-toggle.active {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border-subtle));
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 8%, transparent));
    color: color-mix(in srgb, var(--primary) 68%, white);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
body .nav-item.active::before,
body .nav-toggle.active::before {
    inset-block: 10px;
    left: -13px;
    width: 4px;
}
body .nav-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    color: color-mix(in srgb, currentColor 88%, var(--primary));
}
body .nav-label { font-size: 12.5px; }
body .submenu { margin-left: 21px; padding: 5px 0 3px 20px; border-left: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent); }
body .submenu a { padding: 7px 10px; }
body .submenu a.active { background: var(--primary-soft); color: color-mix(in srgb, var(--primary) 72%, white); }
body .sidebar-bottom {
    padding: 11px 12px 14px;
    background: color-mix(in srgb, var(--sidebar-bg) 88%, transparent);
    backdrop-filter: blur(18px);
}
body .account {
    min-height: 58px;
    border-color: color-mix(in srgb, var(--primary) 13%, var(--border-subtle));
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--primary) 7%, var(--surface-1)));
}

body .topbar {
    min-height: var(--topbar-height);
    padding: 13px var(--shell-gutter);
    border-bottom-color: color-mix(in srgb, var(--border-subtle) 80%, transparent);
    background: color-mix(in srgb, var(--topbar-bg) 92%, transparent);
    box-shadow: 0 12px 36px color-mix(in srgb, var(--app-bg) 72%, transparent);
}
body .topbar-left { flex: 1 1 auto; }
body .topbar-actions { flex: 0 0 auto; }
body .top-title { min-width: 176px; }
body .top-title h1 { margin-top: 2px; font-size: 18px; font-weight: 760; }
body .search-trigger {
    width: min(480px, 35vw);
    height: 44px;
    border-color: color-mix(in srgb, var(--border-subtle) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-1) 84%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
}
body .search-trigger:hover {
    border-color: color-mix(in srgb, var(--primary) 26%, var(--border-strong));
    background: var(--surface-2);
}
body .tool-btn,
body .mobile-menu-btn {
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-1) 90%, transparent);
}
body .tool-btn:focus-visible,
body .mobile-menu-btn:focus-visible,
body .profile-pill:focus-visible,
body .search-trigger:focus-visible,
.sidebar-mobile-close:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}
body .profile-pill {
    min-height: 46px;
    border-color: color-mix(in srgb, var(--primary) 12%, var(--border-subtle));
    border-radius: 15px;
    background: linear-gradient(145deg, var(--surface-1), color-mix(in srgb, var(--primary) 5%, var(--surface-2)));
}
body .profile-pill:hover { border-color: color-mix(in srgb, var(--primary) 28%, var(--border-strong)); }
body .profile-pill .avatar { width: 36px; height: 36px; flex-basis: 36px; }

.shell-context-bar {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 7px var(--shell-gutter);
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 74%, transparent);
    background: color-mix(in srgb, var(--surface-1) 58%, transparent);
    color: var(--text-muted);
    font-size: 10.5px;
}
.shell-breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 8px; }
.shell-breadcrumbs a { color: var(--text-muted); }
.shell-breadcrumbs a:hover { color: var(--primary); }
.shell-breadcrumbs span[aria-current="page"] {
    max-width: min(58vw, 620px);
    overflow: hidden;
    color: var(--text-secondary);
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-route-context {
    flex: 0 0 auto;
    font-weight: 680;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body .content {
    max-width: 1720px;
    padding: 26px var(--shell-gutter) 46px;
}

body .notif-panel {
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border-subtle));
    border-radius: 18px;
    background: var(--surface-elevated);
    box-shadow: 0 24px 70px rgba(2, 5, 12, .32);
}
body .notif-panel-head {
    min-height: 58px;
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
body .profile-panel {
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border-subtle));
    border-radius: 17px;
    box-shadow: 0 24px 70px rgba(2, 5, 12, .32);
}

.floating-chat {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, white 18%, transparent);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 68%, #352576));
    color: #fff;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 30%, rgba(0,0,0,.36));
    transition: translate var(--duration-fast), box-shadow var(--duration-fast);
}
.floating-chat:hover { color: #fff; translate: 0 -2px; box-shadow: 0 18px 38px color-mix(in srgb, var(--primary) 36%, rgba(0,0,0,.4)); }
.floating-chat:focus-visible { outline: 0; box-shadow: var(--focus-ring), 0 18px 38px color-mix(in srgb, var(--primary) 36%, rgba(0,0,0,.4)); }
.floating-chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--app-bg);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
    line-height: 16px;
    text-align: center;
}
.sidebar-overlay {
    width: 100%;
    border: 0;
    padding: 0;
    cursor: default;
}

body.sidebar-collapsed .brand { padding-inline: 18px; }
body.sidebar-collapsed .brand-mark { width: 46px; height: 46px; flex-basis: 46px; }
body.sidebar-collapsed .submenu { border-left: 0; }

@media (max-width: 1280px) {
    :root { --sidebar-width: 270px; }
    body .search-trigger { width: min(360px, 30vw); }
    body .top-title { min-width: 150px; }
}
@media (max-width: 900px) {
    :root { --sidebar-width: min(320px, 88vw); }
    body .sidebar { box-shadow: 28px 0 80px rgba(0,0,0,.42); }
    body .sidebar-mobile-close { display: grid; }
    body.menu-open { overflow: hidden; }
    body.menu-open .sidebar-overlay { display: block; }
    body .shell-context-bar { padding-inline: 16px; }
    body .content { padding-inline: 16px; }
}
@media (max-width: 680px) {
    :root { --topbar-height: 66px; --shell-gutter: 12px; }
    body .topbar { min-height: var(--topbar-height); padding: 10px 12px; gap: 8px; }
    body .topbar-left, body .topbar-actions, body .topbar-tools { gap: 7px; }
    body .tool-btn, body .mobile-menu-btn { width: 40px; height: 40px; flex-basis: 40px; }
    body .quick-actions-btn { width: 40px; min-width: 40px; padding-inline: 10px; }
    body .shell-context-bar { min-height: 36px; padding: 7px 12px; }
    body .shell-route-context { display: none; }
    body .shell-breadcrumbs span[aria-current="page"] { max-width: 68vw; }
    body .content { padding: 16px 12px 34px; }
    body .notif-panel { border-radius: 22px 22px 0 0; }
    .floating-chat { right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 15px; }
}

/* Fase 5 · Consejería: coordinación operativa sin acciones redundantes. */
.counseling-coordination-cell{min-width:250px}
.counseling-coordination-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:230px}
.counseling-coordination-actions .counseling-appointment-action{width:100%;justify-content:center;white-space:nowrap}
.counseling-assignment-action{display:grid;grid-template-columns:minmax(132px,1fr) auto;align-items:stretch;gap:8px;margin:0}
.counseling-assignment-action select{width:100%;min-width:0;min-height:42px}
.counseling-assignment-action .btn{min-width:88px;justify-content:center;white-space:nowrap}
@media(max-width:760px){
    .counseling-coordination-cell{min-width:0}
    .counseling-coordination-actions{min-width:0}
    .counseling-assignment-action{grid-template-columns:1fr}
    .counseling-assignment-action .btn{width:100%}
}