/*
 * SLEP MGMT - Andean Institutional Design System
 * A distinctive, warm-yet-authoritative design for Chilean educational management
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Primary Colors - Institutional Navy */
    --color-navy-950: #0a1628;
    --color-navy-900: #0f2342;
    --color-navy-800: #1a365d;
    --color-navy-700: #234876;
    --color-navy-600: #2d5a8f;
    --color-navy-500: #3d6fa8;
    --color-navy-400: #5a8fc4;
    --color-navy-300: #8ab4d9;
    --color-navy-200: #bdd5eb;
    --color-navy-100: #e5eff7;
    --color-navy-50: #f2f7fc;

    /* Accent Colors - Terracotta */
    --color-terra-900: #6b2517;
    --color-terra-800: #8b3120;
    --color-terra-700: #a63d28;
    --color-terra-600: #c45a3b;
    --color-terra-500: #d97456;
    --color-terra-400: #e89478;
    --color-terra-300: #f2b49e;
    --color-terra-200: #f9d4c6;
    --color-terra-100: #fcebe5;
    --color-terra-50: #fef5f2;

    /* Neutrals - Warm Cream */
    --color-cream-950: #1c1917;
    --color-cream-900: #292524;
    --color-cream-800: #44403c;
    --color-cream-700: #57534e;
    --color-cream-600: #78716c;
    --color-cream-500: #a8a29e;
    --color-cream-400: #d6d3d1;
    --color-cream-300: #e7e5e4;
    --color-cream-200: #f5f5f4;
    --color-cream-100: #faf8f5;
    --color-cream-50: #fdfcfb;

    /* Semantic Colors */
    --color-success-700: #15803d;
    --color-success-600: #16a34a;
    --color-success-500: #22c55e;
    --color-success-100: #dcfce7;
    --color-success-50:  #f0fdf4;

    --color-warning-700: #854d0e;
    --color-warning-600: #ca8a04;
    --color-warning-500: #eab308;
    --color-warning-200: #fef08a;
    --color-warning-100: #fef9c3;
    --color-warning-50:  #fefce8;

    --color-danger-700:  #b91c1c;
    --color-danger-600: #dc2626;
    --color-danger-500: #ef4444;
    --color-danger-200: #fecaca;
    --color-danger-100: #fee2e2;
    --color-danger-50:   #fef2f2;

    /* Maturity Level Colors */
    --maturity-1: #dc2626;
    --maturity-2: #ea580c;
    --maturity-3: #eab308;
    --maturity-4: #65a30d;
    --maturity-5: #16a34a;

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Border Radius */
    --radius-sm: 0.375rem;   /* 6px — chips, pills, tabs */
    --radius-md: 0.625rem;   /* 10px — buttons, inputs, textareas */
    --radius-lg: 0.875rem;   /* 14px — cards */
    --radius-xl: 1.25rem;    /* 20px — modals */
    --radius-2xl: 1.5rem;    /* unchanged */
    --radius-full: 9999px;   /* unchanged */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --shadow-glow: 0 0 20px rgb(196 90 59 / 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 72px;
    --header-height: 72px;
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-cream-900);
    background-color: var(--color-cream-100);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--space-4);
    color: var(--color-navy-900);
}

h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 2rem; letter-spacing: -0.015em; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-terra-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-terra-700);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

/* Main Layout Container */
.layout {
    display: flex;
    min-height: 100vh;
}

/* Top accent hairline — landing parity ("accent-hair") for the logged-in shell. */
.app-accent-hair {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-terra-600);
    z-index: 110;
    pointer-events: none;
}

/* Sidebar — editorial dark band, mirroring the landing's .band-dark moment.
   Gold (#d4c79a) is the accent for eyebrows/firmas, terra for active states. */
.sidebar {
    --sidebar-gold: #d4c79a;
    --sidebar-rule: rgba(255, 255, 255, 0.08);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--color-navy-900);
    border-right: 1px solid var(--sidebar-rule);
    color: var(--color-navy-200);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-base), width var(--transition-base);
    overflow: visible;
}

.sidebar__brand {
    padding: var(--space-3);
    border-bottom: 1px solid var(--sidebar-rule);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

.sidebar__logo {
    width: 36px;
    height: 36px;
    background: var(--color-cream-100);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sidebar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

.sidebar__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-cream-100);
    margin: 0;
    white-space: nowrap;
}

.sidebar__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-navy-300);
    margin-top: 2px;
    display: inline-block;
}

.sidebar__nav {
    flex: 1;
    padding: var(--space-2) 0;
    overflow-y: auto;
    position: relative;
}

.sidebar__section {
    padding: var(--space-1) var(--space-2);
}

.sidebar__section-title {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--sidebar-gold);
    padding: var(--space-1) var(--space-3);
    margin: var(--space-2) 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sidebar__section-title::before {
    content: "";
    width: 1.2rem;
    height: 1px;
    background: var(--sidebar-gold);
    opacity: 0.7;
    flex-shrink: 0;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    margin: 1px var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-navy-200);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.sidebar__link:hover {
    color: var(--color-cream-50);
    background: var(--sidebar-hover-bg);
}

.sidebar__link--active {
  background: var(--color-navy-800);
  color: var(--color-cream-50);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-terra-600);
}
.sidebar__link--active .sidebar__link-icon { color: var(--color-cream-50); }

.sidebar__link-badge {
  margin-left: auto;
  background: var(--color-terra-600);
  color: white;
  font-size: 0.65rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.sidebar__link-icon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    flex-shrink: 0;
}

.sidebar__link--active .sidebar__link-icon {
    opacity: 1;
}

[x-cloak] { display: none !important; }

.sidebar__group {
    display: flex;
    flex-direction: column;
}

.sidebar__group-toggle {
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    width: auto;
}

.sidebar__group-toggle--active {
    color: var(--color-cream-50);
}

.sidebar__group-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    opacity: 0.7;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.sidebar__group-chevron--open {
    transform: rotate(180deg);
}

.sidebar__sublinks {
    display: flex;
    flex-direction: column;
    margin: 2px 0 var(--space-1) 0;
    padding-left: var(--space-3);
    border-left: 1px solid var(--sidebar-rule);
    margin-left: calc(var(--space-2) + var(--space-3) + 4px);
}

.sidebar__sublink {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3);
    margin: 1px 0;
    border-radius: var(--radius-md);
    color: var(--color-navy-300);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.sidebar__sublink:hover {
    color: var(--color-cream-50);
    background: var(--sidebar-hover-bg);
}

.sidebar__sublink--active {
    background: var(--color-navy-800);
    color: var(--color-cream-50);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--color-terra-600);
}

.sidebar__sublink-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
}

.sidebar__sublink--active .sidebar__sublink-bullet {
    opacity: 1;
}

@media (min-width: 1025px) {
    .sidebar--collapsed .sidebar__group-chevron {
        display: none;
    }
}

.sidebar__footer {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--sidebar-rule);
    position: relative;
}

.sidebar__credits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-navy-400);
    padding: var(--space-1) 0 var(--space-2);
    user-select: none;
}

.sidebar__credits-x {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--sidebar-gold);
    letter-spacing: 0;
    line-height: 1;
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-terra-600) 0%, var(--color-terra-700) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-cream-50);
    flex-shrink: 0;
}

.sidebar__user-info {
    flex: 1;
    min-width: 0;
}

.sidebar__user-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-cream-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__user-role {
    font-size: 0.75rem;
    color: var(--color-navy-300);
}

/* Logout (and any .btn--outline) inside the dark sidebar footer. */
.sidebar__footer .btn--outline {
    background: transparent;
    border-color: var(--sidebar-rule);
    color: var(--color-navy-200);
}
.sidebar__footer .btn--outline:hover {
    background: var(--sidebar-hover-bg);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-cream-50);
}

/* Sidebar Collapse Button */
.sidebar__brand-text {
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar__collapse-btn {
    display: none;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-navy-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar__collapse-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-cream-50);
}

.sidebar__collapse-btn svg {
    transition: transform var(--transition-base);
}

.sidebar__collapse-icon--rotated {
    transform: rotate(180deg);
}

/* Show collapse button on desktop only */
@media (min-width: 1025px) {
    .sidebar__collapse-btn {
        display: flex;
    }

    /* Collapsed sidebar */
    .sidebar.sidebar--collapsed {
        width: var(--sidebar-collapsed-width);
        overflow: visible;
    }

    .sidebar--collapsed .sidebar__brand-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sidebar--collapsed .sidebar__brand {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: var(--space-2) var(--space-2);
    }

    .sidebar--collapsed .sidebar__collapse-btn {
        margin-left: 0;
    }

    .sidebar--collapsed .sidebar__section-title {
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .sidebar--collapsed .sidebar__link {
        justify-content: center;
        padding: var(--space-3) var(--space-2);
    }

    .sidebar--collapsed .sidebar__link span {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: var(--space-3);
        padding: var(--space-2) var(--space-3);
        background: var(--color-navy-800);
        color: var(--color-cream-100);
        font-size: 0.8125rem;
        font-weight: 500;
        white-space: nowrap;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: none;
        z-index: 200;
    }

    .sidebar--collapsed .sidebar__link span::before {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-right-color: var(--color-navy-800);
    }

    .sidebar--collapsed .sidebar__link:hover span {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--transition-fast), visibility 0s;
    }

    .sidebar--collapsed .sidebar__link-icon {
        margin-right: 0;
    }

    .sidebar--collapsed .sidebar__nav {
        overflow: visible;
    }

    .sidebar--collapsed .sidebar__section {
        padding: var(--space-1) var(--space-2);
    }

    .sidebar--collapsed .sidebar__footer {
        padding: var(--space-3) var(--space-2);
    }

    .sidebar--collapsed .sidebar__credits {
        display: none;
    }

    .sidebar--collapsed .sidebar__user {
        flex-direction: column;
        gap: var(--space-2);
    }

    .sidebar--collapsed .sidebar__user-info {
        display: none;
    }

    .sidebar--collapsed .sidebar__avatar {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    /* Main content adjusts to collapsed sidebar */
    .main.main--sidebar-collapsed {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* ── Collapsed group flyout submenus ── */
    .sidebar--collapsed .sidebar__group {
        position: relative;
    }

    /* Hide the parent-label tooltip on group toggles — flyout shows the title */
    .sidebar--collapsed .sidebar__group-toggle > span {
        display: none;
    }

    /* Visual cue for the active group when collapsed */
    .sidebar--collapsed .sidebar__group-toggle--active {
        background: var(--color-navy-800);
        color: var(--color-cream-50);
        box-shadow: inset 2px 0 0 var(--color-terra-600);
    }

    /* Sublinks INSIDE the collapsed flyout sit on a cream panel, so they
       need light-bg colors that override the dark-sidebar defaults above. */
    .sidebar--collapsed .sidebar__sublinks .sidebar__sublink {
        color: var(--color-cream-700);
    }
    .sidebar--collapsed .sidebar__sublinks .sidebar__sublink:hover {
        background: var(--color-cream-100);
        color: var(--color-navy-900);
    }
    .sidebar--collapsed .sidebar__sublinks .sidebar__sublink--active {
        background: var(--color-cream-100);
        color: var(--color-navy-900);
    }

    /* Flyout panel: override Alpine's x-show inline display so we control visibility */
    .sidebar--collapsed .sidebar__sublinks {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0 0 0 var(--space-2);
        padding: var(--space-2);
        min-width: 240px;
        background: var(--color-cream-50);
        border: 1px solid var(--color-cream-300);
        border-left-color: var(--color-cream-300);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-fast), visibility 0s linear var(--transition-fast);
        z-index: 200;
    }

    /* Header inside the flyout — title comes from data-title on the .sidebar__sublinks div */
    .sidebar--collapsed .sidebar__sublinks::before {
        content: attr(data-title);
        display: block;
        padding: var(--space-1) var(--space-3) var(--space-2);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-navy-700);
        border-bottom: 1px solid var(--color-cream-200);
        margin-bottom: var(--space-1);
    }

    /* Invisible hover-bridge so the cursor can cross the gap without losing :hover */
    .sidebar--collapsed .sidebar__group::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 100%;
        width: var(--space-2);
        pointer-events: none;
    }
    .sidebar--collapsed .sidebar__group:hover::after {
        pointer-events: auto;
    }

    .sidebar--collapsed .sidebar__group:hover .sidebar__sublinks,
    .sidebar--collapsed .sidebar__group:focus-within .sidebar__sublinks {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity var(--transition-fast), visibility 0s;
    }

    /* Slightly larger, higher-contrast icons in collapsed mode */
    .sidebar--collapsed .sidebar__link-icon {
        width: 22px;
        height: 22px;
        opacity: 0.95;
    }
}

/* Main Content Area */
.main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition-base);
}

/* Header */
.header {
    height: var(--header-height);
    background: var(--color-cream-50);
    border-bottom: 1px solid var(--color-cream-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header__left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header__toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-navy-700);
    transition: background var(--transition-fast);
}

.header__toggle:hover {
    background: var(--color-cream-200);
}

.header__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-cream-600);
}

.header__breadcrumb-sep {
    color: var(--color-cream-400);
}

.header__breadcrumb-current {
    color: var(--color-navy-800);
    font-weight: 600;
}

.header__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header__period {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-cream-200);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--color-navy-700);
    font-weight: 500;
}

.header__notifications {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-full);
    color: var(--color-navy-700);
    transition: background var(--transition-fast);
}

.header__notifications:hover {
    background: var(--color-cream-200);
}

.header__notifications-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--color-terra-500);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-cream-50);
}

/* Content Area */
.content {
    flex: 1;
    padding: var(--space-4) var(--space-8) var(--space-8);
}

.content__header {
    margin-bottom: var(--space-8);
}

.content__title {
    font-size: 2rem;
    color: var(--color-navy-900);
    margin-bottom: var(--space-2);
}

.content__subtitle {
    font-size: 1rem;
    color: var(--color-cream-600);
    font-family: var(--font-body);
    font-weight: 400;
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

.card {
    background: var(--color-cream-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-cream-300);
    overflow: visible;
    transition: all var(--transition-base);
}

.card:hover {
    border-color: var(--color-cream-400);
    box-shadow: var(--shadow-md);
}

/* Card padding variants — para reemplazar bg-white rounded-2xl p-X shadow-sm */
.card--compact { padding: var(--space-4); }
.card--padded  { padding: var(--space-6); }
.card--roomy   { padding: var(--space-6) var(--space-8); }

/* ============================================
   ALERT — bandera de mensaje (flash, formularios, advertencias).
   Pareada con los 5 tonos semánticos de status-chip.
   ============================================ */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--space-3);
}
.alert--pos,
.alert--success { background: #ecfdf5; color: #14532d; border-color: #bbf7d0; }
.alert--neu,
.alert--info    { background: var(--color-navy-50); color: var(--color-navy-800); border-color: var(--color-navy-200); }
.alert--war,
.alert--warning { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.alert--neg,
.alert--danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ============================================
   FILTER SEGMENTED — pills tipo iOS para filtros con ≤6 valores fijos.
   Para más opciones usar table_filter_select.html (dropdown).
   ============================================ */
.filter-segmented { display: flex; align-items: center; gap: var(--space-3); }
.filter-segmented__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-cream-600);
}
.filter-segmented__group {
    display: inline-flex;
    padding: 3px;
    background: var(--color-cream-200);
    border-radius: var(--radius-full);
    gap: 2px;
}
.filter-segmented__pill {
    border: 0;
    background: transparent;
    padding: 4px 12px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    border-radius: var(--radius-full);
    color: var(--color-cream-700);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.filter-segmented__pill:hover { color: var(--color-navy-900); }
.filter-segmented__pill--active {
    background: white;
    color: var(--color-navy-900);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.card__header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--color-navy-800);
    margin: 0;
}

.card__body {
    padding: var(--space-6);
}

.card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-cream-200);
    background: var(--color-cream-100);
}

/* ============================================
   CAPABILITY CARD
   ============================================ */

.capability-card {
    background: var(--color-cream-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-cream-300);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    cursor: pointer;
}

.capability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, var(--color-navy-500));
    transition: height var(--transition-fast);
}

.capability-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cream-400);
}

.capability-card:hover::before {
    height: 6px;
}

.capability-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.capability-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--card-accent, var(--color-terra-500)) 12%, white);
  color: var(--card-accent, var(--color-terra-600));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.capability-card__icon svg {
  width: 18px;
  height: 18px;
}

.capability-card__traffic {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.capability-card__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-1);
}

.capability-card__description {
    font-size: 0.8125rem;
    color: var(--color-cream-600);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.capability-card__maturity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-cream-200);
}

.capability-card__level {
    display: flex;
    flex-direction: column;
}

.capability-card__level-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-cream-600);
    margin-bottom: var(--space-1);
}

.capability-card__level-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-navy-900);
    line-height: 1;
}

.capability-card__level-max {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-cream-500);
}

.capability-card__progress {
    flex: 1;
}

.capability-card__progress-bar {
  height: 8px;
  background: var(--color-cream-200);
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
}
.capability-card__progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--maturity-fill-start, var(--color-cream-500)), var(--maturity-fill-end, var(--color-cream-400)));
  transition: width var(--transition-base);
}
.capability-card[data-maturity="1"] { --maturity-fill-start: #b91c1c; --maturity-fill-end: var(--color-danger-500); }
.capability-card[data-maturity="2"] { --maturity-fill-start: #c2410c; --maturity-fill-end: #ea580c; }
.capability-card[data-maturity="3"] { --maturity-fill-start: #a16207; --maturity-fill-end: var(--color-warning-500); }
.capability-card[data-maturity="4"] { --maturity-fill-start: #4d7c0f; --maturity-fill-end: #65a30d; }
.capability-card[data-maturity="5"] { --maturity-fill-start: #15803d; --maturity-fill-end: var(--color-success-500); }

.capability-card__progress-label {
    font-size: 0.75rem;
    color: var(--color-cream-600);
    margin-top: var(--space-1);
    text-align: right;
}

/* ============================================
   TRAFFIC LIGHT INDICATOR
   ============================================ */

.traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-shadow:
    0 0 0 3px white,
    0 0 0 4px var(--tl-ring, rgba(120, 113, 108, 0.25));
}
.traffic-light--sm { width: 10px; height: 10px; }
.traffic-light--lg { width: 14px; height: 14px; }
.traffic-light--red    { background: var(--color-danger-500);  --tl-ring: rgba(220, 38, 38, 0.25); }
.traffic-light--yellow { background: var(--color-warning-500); --tl-ring: rgba(234, 179, 8, 0.25); }
.traffic-light--green  { background: var(--color-success-500); --tl-ring: rgba(22, 163, 74, 0.25); }
.traffic-light--gray   { background: var(--color-cream-400);   --tl-ring: rgba(168, 162, 158, 0.25); }

/* ============================================
   MATURITY BADGE
   ============================================ */

.maturity-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.maturity-badge--1 {
    background: rgba(220, 38, 38, 0.1);
    color: var(--maturity-1);
}

.maturity-badge--2 {
    background: rgba(234, 88, 12, 0.1);
    color: var(--maturity-2);
}

.maturity-badge--3 {
    background: rgba(234, 179, 8, 0.1);
    color: var(--maturity-3);
}

.maturity-badge--4 {
    background: rgba(101, 163, 13, 0.1);
    color: var(--maturity-4);
}

.maturity-badge--5 {
    background: rgba(22, 163, 74, 0.1);
    color: var(--maturity-5);
}

/* ============================================
   GRID LAYOUTS
   ============================================ */

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

/* ============================================
   STAT CARD
   ============================================ */

.stat-card {
    background: var(--color-cream-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-cream-300);
    padding: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-navy-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy-600);
    flex-shrink: 0;
}
.stat-card__icon--pos { background: var(--color-success-100); color: var(--color-success-600); }
.stat-card__icon--war { background: var(--color-warning-100); color: var(--color-warning-600); }
.stat-card__icon--neg { background: var(--color-danger-100);  color: var(--color-danger-600); }
.stat-card__icon--mut { background: var(--color-cream-100);   color: var(--color-cream-500); }

.stat-card__content {
    flex: 1;
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-navy-900);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stat-card__label {
    font-size: 0.875rem;
    color: var(--color-cream-600);
}

.stat-card__trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    margin-top: var(--space-2);
}

.stat-card__trend--up {
    color: var(--color-success-600);
}

.stat-card__trend--down {
    color: var(--color-danger-600);
}

/* ============================================
   COMPONENT: Learning Cycle (.lc)
   Used by templates/components/learning_cycle.html
   ============================================ */

.lc {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.lc__diagram {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.lc__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-terra-600) 0%, var(--color-terra-700) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    box-shadow: 0 6px 24px rgba(196, 90, 59, 0.4);
    z-index: 10;
}

.lc__center-label {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

.lc__center-title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    margin-top: 2px;
}

.lc__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    border: 2px dashed var(--color-cream-300);
    border-radius: var(--radius-full);
}

.lc__stage {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-fast);
    z-index: 5;
}

.lc__stage:hover {
    transform: scale(1.08);
}

.lc__stage-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-cream-50);
    border: 2px solid var(--color-cream-300);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--color-navy-700);
}

.lc__stage:hover .lc__stage-icon {
    border-color: var(--color-terra-600);
    background: var(--color-terra-50);
    color: var(--color-terra-600);
}

.lc__stage--active .lc__stage-icon {
    border-color: var(--color-terra-600);
    background: var(--color-terra-600);
    color: white;
    box-shadow: 0 4px 12px rgba(196, 90, 59, 0.4);
}

.lc__stage-name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-navy-800);
    margin-top: 6px;
    white-space: nowrap;
}

/* Position stages around the circle */
.lc__stage--top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.lc__stage--top:hover {
    transform: translateX(-50%) scale(1.08);
}

.lc__stage--top-right {
    top: 20%;
    right: 0;
}

.lc__stage--bottom-right {
    bottom: 12%;
    right: 8%;
}

.lc__stage--bottom-left {
    bottom: 12%;
    left: 8%;
}

.lc__stage--top-left {
    top: 20%;
    left: 0;
}

/* Details Panel */
.lc__details {
    min-height: 100px;
}

.lc__detail-card {
    background: var(--color-cream-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.lc__detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.lc__detail-header h4 {
    /* Typography handled by .h-card utility on the element */
    margin: 0;
}

.lc__detail-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.lc__detail-badge--1 {
    background: rgba(220, 38, 38, 0.1);
    color: var(--maturity-1);
}

.lc__detail-badge--2 {
    background: rgba(234, 88, 12, 0.1);
    color: var(--maturity-2);
}

.lc__detail-badge--3 {
    background: rgba(234, 179, 8, 0.1);
    color: var(--color-warning-600);
}

.lc__detail-badge--4 {
    background: rgba(101, 163, 13, 0.1);
    color: var(--maturity-4);
}

.lc__detail-badge--5 {
    background: rgba(22, 163, 74, 0.1);
    color: var(--maturity-5);
}

.lc__detail-card p {
    font-size: 0.875rem;
    color: var(--color-cream-700);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .lc__diagram {
        max-width: 260px;
    }

    .lc__center {
        width: 70px;
        height: 70px;
    }

    .lc__center-title {
        font-size: 0.75rem;
    }

    .lc__stage-icon {
        width: 40px;
        height: 40px;
    }

    .lc__stage-icon svg {
        width: 18px;
        height: 18px;
    }

    .lc__stage-name {
        font-size: 0.625rem;
    }
}

/* ============================================
   FILTER BAR
   ============================================ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-cream-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-cream-300);
    margin-bottom: var(--space-6);
}

.filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-bar__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-cream-600);
    font-weight: 600;
}

.filter-bar__select {
    padding: var(--space-2) var(--space-4);
    padding-right: var(--space-8);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-navy-800);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: none;
    min-width: 160px;
}

.filter-bar__select:hover {
    border-color: var(--color-navy-400);
}

.filter-bar__select:focus {
    outline: none;
    border-color: var(--color-terra-500);
    box-shadow: 0 0 0 3px rgba(196, 90, 59, 0.1);
}

.filter-bar__actions {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    margin-left: auto;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-terra-600) 0%, var(--color-terra-700) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(196, 90, 59, 0.3);
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-terra-700) 0%, var(--color-terra-800) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(196, 90, 59, 0.5);
    transform: translateY(-1px);
}

.btn--secondary {
    background: var(--color-cream-200);
    color: var(--color-navy-700);
}

.btn--secondary:hover {
    background: var(--color-cream-300);
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--color-cream-400);
    color: var(--color-navy-700);
}

.btn--outline:hover {
    background: var(--color-cream-100);
    border-color: var(--color-navy-400);
}

.btn--icon {
    padding: var(--space-2);
    width: 40px;
    height: 40px;
}

.btn--block {
    width: 100%;
    justify-content: center;
}

/* ============================================
   TRIPOD 7C CHART
   ============================================ */

.tripod-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tripod-chart__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.tripod-chart__label {
    width: 180px;
    font-size: 0.875rem;
    color: var(--color-navy-800);
    flex-shrink: 0;
}

.tripod-chart__bar {
    flex: 1;
    height: 24px;
    background: var(--color-cream-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.tripod-chart__fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
}

.tripod-chart__value {
    width: 48px;
    text-align: right;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-navy-900);
}

/* ============================================
   AUTH: Login
   Editorial first-impression page (templates/auth/login.html).
   Uses the system font stack (Inter + DM Serif Display) via the
   shared --font-* tokens. Scoped to .auth-login so the editorial
   layout (black bg, cream card, terra accent, § ornament) does not
   leak into the rest of the app.
   ============================================ */

.auth-login {
    /* Local aliases — keep the file self-contained as an editorial moment */
    --gold: #d4c79a;
    --rule-dark: rgba(212, 199, 154, 0.18);

    margin: 0;
    padding: 0;
    background: var(--color-navy-900);
    color: var(--color-cream-100);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

.auth-login *, .auth-login *::before, .auth-login *::after {
    box-sizing: border-box;
}

.auth-login::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.78 0 0 0 0 0.6 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.55;
    mix-blend-mode: overlay;
}

.auth-login .ornament {
    position: fixed;
    bottom: -4rem;
    right: -3rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16rem, 36vw, 32rem);
    line-height: 0.8;
    color: var(--gold);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.auth-login .page {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-login .rule-accent {
    height: 1px;
    background: var(--color-terra-700);
    width: 100%;
}

.auth-login .site-masthead {
    padding: var(--space-6);
    border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 768px) {
    .auth-login .site-masthead { padding: 1.75rem var(--space-12); }
}
@media (min-width: 1280px) {
    .auth-login .site-masthead { padding: 1.75rem var(--space-20); }
}

.auth-login .site-masthead__inner {
    max-width: 96rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .auth-login .site-masthead__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
    }
}

.auth-login .lockup {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.auth-login .lockup img {
    height: 2.5rem;
    width: auto;
    display: block;
}
@media (min-width: 768px) {
    .auth-login .lockup img { height: 2.75rem; }
}
.auth-login .lockup .ec-mark-light { filter: none; opacity: 1; }
.auth-login .lockup .phaway-light { filter: brightness(0) invert(1); opacity: 0.96; }

.auth-login .lockup-x {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.1em;
    user-select: none;
}

.auth-login .back-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
    position: relative;
    display: inline-block;
}
.auth-login .back-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transition: transform 280ms ease;
}
.auth-login .back-link:hover::after { transform: scaleX(0.6); }

.auth-login .login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
}

.auth-login .login-card {
    background: var(--color-cream-100);
    color: var(--color-navy-900);
    width: 100%;
    max-width: 30rem;
    padding: var(--space-12) 2.6rem 2.6rem 2.6rem;
    border-radius: 4px;
    border-left: 3px solid var(--color-terra-700);
    box-shadow:
        8px 8px 0 var(--color-navy-800),
        16px 16px 0 var(--color-navy-950);
    position: relative;
    animation: auth-login-lift 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes auth-login-lift {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* .login-card__eyebrow + .login-card__title use the .eyebrow--editorial
   and .h-page utilities in the template; we only tweak spacing here so
   the typographic tokens win. */
.auth-login .login-card__eyebrow {
    margin-bottom: var(--space-4);
}

.auth-login .login-card__title {
    /* h-page handles font-family/weight/size; keep cream-card spacing. */
    margin: 0 0 0.6rem 0;
}

.auth-login .login-card__subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-cream-600);
    margin: 0 0 var(--space-8) 0;
}

.auth-login .login-error {
    background: rgba(166, 61, 40, 0.08);
    border-left: 2px solid var(--color-terra-700);
    padding: 0.8rem var(--space-4);
    margin: 0 0 var(--space-6) 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-terra-800);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.auth-login .login-error svg { flex-shrink: 0; margin-top: 2px; }

.auth-login .field { margin-bottom: var(--space-5); }

.auth-login .field__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-navy-800);
    margin-bottom: 0.55rem;
}

.auth-login .field__input {
    width: 100%;
    padding: 0.85rem 0.95rem;
    background: transparent;
    border: 1px solid var(--color-cream-300);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-navy-900);
    transition: border-color 220ms ease, box-shadow 220ms ease;
}
.auth-login .field__input::placeholder {
    color: var(--color-cream-600);
    opacity: 0.7;
}
.auth-login .field__input:focus {
    outline: none;
    border-color: var(--color-terra-700);
    box-shadow: 0 0 0 3px rgba(166, 61, 40, 0.10);
}

.auth-login .field__password-wrap { position: relative; }
.auth-login .field__toggle {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    color: var(--color-cream-600);
    display: flex;
    align-items: center;
    transition: color 200ms ease;
}
.auth-login .field__toggle:hover { color: var(--color-terra-800); }
.auth-login .field__input--with-toggle { padding-right: 2.4rem; }

.auth-login .row-remember {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.4rem 0 1.8rem 0;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.auth-login .row-remember label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-navy-800);
    display: flex;
    align-items: center;
    gap: 0.55em;
    cursor: pointer;
}
.auth-login .row-remember input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-terra-700);
    cursor: pointer;
}
.auth-login .forgot-link {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-terra-800);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.auth-login .forgot-link:hover { color: var(--color-navy-900); }

.auth-login .btn-submit {
    width: 100%;
    padding: var(--space-4) 1.2rem;
    background: var(--color-navy-900);
    color: var(--color-cream-100);
    border: 1px solid var(--color-navy-900);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    transition: all 220ms ease;
}
.auth-login .btn-submit:hover {
    background: var(--color-terra-800);
    border-color: var(--color-terra-800);
}
.auth-login .btn-submit:hover .arrow { transform: translateX(4px); }
.auth-login .btn-submit .arrow { transition: transform 220ms ease; }

.auth-login .login-card__footer {
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-cream-300);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-cream-600);
}
.auth-login .login-card__footer a {
    color: var(--color-terra-800);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.auth-login .login-card__footer a:hover { color: var(--color-navy-900); }

.auth-login .site-footer {
    padding: var(--space-6);
    border-top: 1px solid var(--rule-dark);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(212, 199, 154, 0.45);
    text-align: center;
}

.auth-login .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: auth-login-reveal 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes auth-login-reveal { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .auth-login .reveal,
    .auth-login .login-card { animation: none; opacity: 1; transform: none; }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

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

    .sidebar.sidebar--open {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
    }

    .header__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar__overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }

    .sidebar--open + .sidebar__overlay {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    .content {
        padding: var(--space-4);
    }

    .content__title {
        font-size: 1.5rem;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-bar__select {
        width: 100%;
    }

    .filter-bar__actions {
        margin-left: 0;
        width: 100%;
    }

    .tripod-chart__label {
        width: 120px;
        font-size: 0.75rem;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Capability Card Accent Colors */
.capability-card[data-capability="PURPOSE"] { --card-accent: #c45a3b; }
.capability-card[data-capability="PEOPLE"] { --card-accent: #2563eb; }
.capability-card[data-capability="PROCESSES"] { --card-accent: #7c3aed; }
.capability-card[data-capability="TECHNOLOGY"] { --card-accent: #0891b2; }
.capability-card[data-capability="STRUCTURE"] { --card-accent: #059669; }
.capability-card[data-capability="WAYS_OF_WORKING"] { --card-accent: #d97706; }
.capability-card[data-capability="ROLES"] { --card-accent: #dc2626; }
.capability-card[data-capability="GOVERNANCE"] { --card-accent: #4f46e5; }
.capability-card[data-capability="LEADERSHIP"] { --card-accent: #0284c7; }
.capability-card[data-capability="CONTINUOUS_IMPROVEMENT"] { --card-accent: #16a34a; }
.capability-card[data-capability="LEARNING_CULTURE"] { --card-accent: #ea580c; }

/* Maturity Colors for Progress */
.capability-card[data-maturity="1"] { --maturity-color: var(--maturity-1); }
.capability-card[data-maturity="2"] { --maturity-color: var(--maturity-2); }
.capability-card[data-maturity="3"] { --maturity-color: var(--maturity-3); }
.capability-card[data-maturity="4"] { --maturity-color: var(--maturity-4); }
.capability-card[data-maturity="5"] { --maturity-color: var(--maturity-5); }

/* Reemplazos: two-column layout */
.reemplazos-layout {
    display: flex;
    flex-direction: row;
    gap: var(--space-6);
}

.reemplazos-layout__table {
    width: 60%;
    min-width: 0;
}

.reemplazos-layout__detail {
    width: 40%;
    min-width: 0;
}

@media (max-width: 768px) {
    .reemplazos-layout {
        flex-direction: column;
    }
    .reemplazos-layout__table,
    .reemplazos-layout__detail {
        width: 100%;
    }
}

/* HTMX Loading States */
.htmx-request:not(.no-htmx-indicator) {
    opacity: 0.7;
    pointer-events: none;
}

.htmx-request:not(.no-htmx-indicator)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--color-cream-300);
    border-top-color: var(--color-terra-500);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

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

/* ============================================
   TOM SELECT – Design-System Overrides
   ============================================ */

/* Reset wrapper — strip all chrome so only .ts-control draws the box */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Hide the original <select> that Tom Select keeps in the DOM */
select.tomselected,
.ts-hidden-accessible {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

/* Control (the visible "select" box) */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    background: white;
    padding: var(--space-2) var(--space-3);
    padding-right: var(--space-8);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-navy-900);
    box-shadow: none;
    min-height: 2.375rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

/* Single mode: vertically center placeholder/value */
.ts-wrapper.single .ts-control {
    display: flex;
    align-items: center;
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
    border-color: var(--color-navy-400);
}

/* Focus state */
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
    border-color: var(--color-terra-500);
    box-shadow: 0 0 0 3px rgba(196, 90, 59, 0.1);
    outline: none;
}

/* Hide Tom Select default caret */
.ts-wrapper.single .ts-control .ts-input-hidden ~ .dropdown-toggle,
.ts-wrapper .caret {
    display: none !important;
}

/* Chevron caret */
.ts-wrapper.single .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    border: none;
    margin: 0;
}

/* Dropdown menu */
.ts-dropdown {
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(15, 35, 66, 0.10);
    margin-top: var(--space-1);
    font-family: var(--font-body);
    font-size: 0.875rem;
    background: white;
    z-index: 50;
}

/* Dropdown options */
.ts-dropdown .option {
    padding: var(--space-2) var(--space-3);
    color: var(--color-navy-800);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: var(--color-cream-100);
    color: var(--color-navy-900);
}

.ts-dropdown .option.selected {
    background: var(--color-terra-50);
    color: var(--color-terra-700);
    font-weight: 500;
}

/* Search input inside dropdown */
.ts-dropdown .ts-dropdown-content {
    max-height: 240px;
}

.ts-wrapper .ts-dropdown [data-selectable] .highlight {
    background: var(--color-terra-100);
    border-radius: 2px;
}

/* Remove default Tom Select input styling that conflicts */
.ts-wrapper.single .ts-control > input {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-navy-900);
}

/* Selected item text (single) */
.ts-wrapper.single .ts-control > .item {
    color: var(--color-navy-900);
}

/* Multi-select: hide placeholder when items are selected */
.ts-wrapper.multi.has-items .ts-control > input::placeholder {
    color: transparent;
}

/* Multi-select: selected items as pills */
.ts-wrapper.multi .ts-control > .item {
    display: inline-flex;
    align-items: center;
    background: var(--color-navy-100);
    color: var(--color-navy-800);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.4;
    white-space: nowrap;
    margin: 1px 2px;
    border: none;
}

.ts-wrapper.multi .ts-control > .item.active {
    background: var(--color-terra-100);
    color: var(--color-terra-800);
}

/* Multi-select: remove × on each pill */
.ts-wrapper.multi .ts-control > .item .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    padding: 0;
    border: none !important;
    border-left: none !important;
    background: none;
    color: var(--color-navy-400);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 0.875rem;
    height: 0.875rem;
}

.ts-wrapper.multi .ts-control > .item .remove:hover {
    color: var(--color-terra-600);
    background: var(--color-terra-100);
}

/* Filter-bar sizing variant */
.filter-bar__group .ts-wrapper.single .ts-control {
    min-width: 160px;
}

.filter-bar__group .ts-wrapper.multi .ts-control {
    min-width: 160px;
}

/* Placeholder style for selects with empty value selected */
select.form-select:has(option[value=""]:checked) {
    color: var(--color-navy-400);
}

select.form-select option {
    color: var(--color-navy-800);
}

select.form-select option[value=""] {
    color: var(--color-navy-400);
}

/* Neutralize original select classes when Tom Select is active */
select.form-select.tomselected,
select.filter-bar__select.tomselected {
    appearance: none !important;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Table Tooltip ── */
.table-tooltip {
    position: relative;
}

.table-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-3);
    background: var(--color-navy-900);
    color: var(--color-cream-50);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    border-radius: var(--radius-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 10;
}

.table-tooltip::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: var(--color-navy-900);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 10;
}

.table-tooltip:hover::after,
.table-tooltip:hover::before {
    opacity: 1;
}

/* ── Global tooltip (use instead of native `title=`) ──
   Aplica a cualquier elemento con `data-tooltip="..."`. */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-navy-900);
    color: var(--color-cream-50);
    padding: 0.32rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(15, 35, 66, 0.18);
    pointer-events: none;
    opacity: 0;
    animation: data-tooltip-in 120ms ease-out 80ms forwards;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-navy-900);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    animation: data-tooltip-in 120ms ease-out 80ms forwards;
}
@keyframes data-tooltip-in { to { opacity: 1; } }

/* Bottom-positioned tooltip variant */
[data-tooltip][data-tooltip-position="bottom"]:hover::after,
[data-tooltip][data-tooltip-position="bottom"]:focus-visible::after {
    bottom: auto;
    top: calc(100% + 8px);
}
[data-tooltip][data-tooltip-position="bottom"]:hover::before,
[data-tooltip][data-tooltip-position="bottom"]:focus-visible::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: var(--color-navy-900);
}

/* Right-positioned tooltip variant */
[data-tooltip][data-tooltip-position="right"]:hover::after,
[data-tooltip][data-tooltip-position="right"]:focus-visible::after {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}
[data-tooltip][data-tooltip-position="right"]:hover::before,
[data-tooltip][data-tooltip-position="right"]:focus-visible::before {
    bottom: auto;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: var(--color-navy-900);
}

/* ============================================
   STAT STRIP — tinted KPI grid (variant 2)
   ============================================ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
@media (max-width: 768px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stat-strip { grid-template-columns: 1fr; }
}

.kpi-card {
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--kpi-border, var(--color-cream-300));
  border-left: 4px solid var(--kpi-accent, var(--color-cream-300));
  background: var(--kpi-bg, white);
}

/* Tone variants — body stays in palette (cream/terra/navy); semantic intent lives in the left stripe + value tint */
.kpi-card--terra  { --kpi-bg: var(--color-terra-50);   --kpi-border: var(--color-terra-200); --kpi-accent: var(--color-terra-500); }
.kpi-card--navy   { --kpi-bg: var(--color-navy-50);    --kpi-border: var(--color-navy-200);  --kpi-accent: var(--color-navy-500);  }
.kpi-card--cream  { --kpi-bg: var(--color-cream-100);  --kpi-border: var(--color-cream-300); --kpi-accent: var(--color-cream-400); }
.kpi-card--ok     { --kpi-bg: var(--color-cream-50);   --kpi-border: var(--color-cream-300); --kpi-accent: var(--color-success-500); }
.kpi-card--warn   { --kpi-bg: var(--color-cream-50);   --kpi-border: var(--color-cream-300); --kpi-accent: var(--color-warning-500); }
.kpi-card--danger { --kpi-bg: var(--color-cream-50);   --kpi-border: var(--color-cream-300); --kpi-accent: var(--color-danger-500); }

.kpi-card--danger .kpi-card__value { color: var(--color-danger-600); }
.kpi-card--warn   .kpi-card__value { color: var(--color-warning-600); }
.kpi-card--ok     .kpi-card__value { color: var(--color-success-600); }

.kpi-card__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-700);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.kpi-card__value {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 0.95;
  color: var(--color-navy-900);
  font-variant-numeric: tabular-nums;
}
.kpi-card__value-suffix {
  font-size: 1rem;
  color: var(--color-cream-600);
  font-weight: 400;
  margin-left: 0.15rem;
  font-family: var(--font-body);
}
.kpi-card__detail {
  font-size: 0.78rem;
  color: var(--color-cream-700);
  margin-top: var(--space-1);
}
.kpi-card__bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-2);
}
.kpi-card__bar > span {
  display: block;
  height: 100%;
  background: var(--color-navy-800);
}

.kpi-card__delta-up   { color: var(--color-success-600); font-weight: 600; }
.kpi-card__delta-down { color: var(--color-danger-600);  font-weight: 600; }

/* ============================================
   STATUS CHIP — 5 tonos semánticos.
   Para etiquetas no-semánticas (dimensiones,
   capacidades) usar .tag-chip más abajo.
   ============================================ */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}
.status-chip--sm { font-size: 0.68rem; padding: 0.15rem 0.55rem; }
.status-chip--lg { font-size: 0.78rem; padding: 0.3rem 0.8rem; }

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

/* Tonos semánticos — los únicos cinco */
.status-chip--pos { background: #ecfdf5; color: #14532d; border-color: #bbf7d0; }
.status-chip--neu { background: var(--color-navy-50);  color: var(--color-navy-800); border-color: var(--color-navy-200); }
.status-chip--war { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.status-chip--neg { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.status-chip--mut { background: var(--color-cream-100); color: var(--color-cream-700); border-color: var(--color-cream-300); }

/* Mapeo de slugs legacy → tonos. Permite que las
   plantillas existentes sigan funcionando sin cambios
   hasta que migren en Fase 2. */
.status-chip--alto,
.status-chip--activo,
.status-chip--activos,
.status-chip--contratado,
.status-chip--aprobada,
.status-chip--success,
.status-chip--completed             { background: #ecfdf5; color: #14532d; border-color: #bbf7d0; }

.status-chip--med,
.status-chip--publicada,
.status-chip--en_busqueda,
.status-chip--en_grace_period,
.status-chip--partialsuccess        { background: #fef9c3; color: #854d0e; border-color: #fde68a; }

.status-chip--bajo,
.status-chip--vencida,
.status-chip--urgente,
.status-chip--rechazado,
.status-chip--failed                { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.status-chip--solicitada,
.status-chip--entrevista,
.status-chip--top_1_propuesto,
.status-chip--por_validar,
.status-chip--habilitacion_pendiente,
.status-chip--por_habilitar,
.status-chip--validating,
.status-chip--committing,
.status-chip--validated             { background: var(--color-navy-50); color: var(--color-navy-800); border-color: var(--color-navy-200); }

.status-chip--cerrado,
.status-chip--inactivo,
.status-chip--cancelled             { background: var(--color-cream-100); color: var(--color-cream-700); border-color: var(--color-cream-300); }

/* ============================================
   TAG CHIP — para etiquetas NO semánticas:
   dimensiones, capacidades, recuentos.
   Usa el color de capacidad o un neutro.
   ============================================ */
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--color-cream-100);
    color: var(--color-cream-700);
    border: 1px solid var(--color-cream-300);
    white-space: nowrap;
}
.tag-chip--capability {
    background: color-mix(in srgb, var(--card-accent, var(--color-navy-500)) 12%, white);
    color: var(--card-accent, var(--color-navy-700));
    border-color: color-mix(in srgb, var(--card-accent, var(--color-navy-500)) 25%, white);
}

/* Comparison table — used by dashboards for tabular breakdowns */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-cream-200);
}
.comparison-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cream-600);
  background: var(--color-cream-100);
  white-space: nowrap;
}

/* Section title — small serif heading inside cards */
.section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-navy-900);
  margin-bottom: var(--space-6);
}

/* ============================================
   STEPPER — horizontal process indicator
   ============================================ */
.stepper { padding: var(--space-4) 0; }
.stepper__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-700);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.stepper__track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stepper__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  min-width: 0;
}
.stepper__step::after {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(50% + 12px);
  right: calc(-50% + 12px);
  height: 2px;
  background: var(--color-cream-300);
  z-index: 0;
}
.stepper__step:last-child::after { display: none; }
.stepper__step--done::after { background: var(--color-terra-600); }
.stepper__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-cream-400);
  z-index: 1;
}
.stepper__step--done .stepper__dot {
  background: var(--color-terra-600);
  border-color: var(--color-terra-600);
}
.stepper__step--current .stepper__dot {
  background: white;
  border-color: var(--color-terra-600);
  box-shadow: 0 0 0 4px rgba(196, 90, 59, 0.18);
}
.stepper__label {
  font-size: 0.68rem;
  text-align: center;
  color: var(--color-cream-700);
  font-weight: 500;
}
.stepper__step--done .stepper__label,
.stepper__step--current .stepper__label {
  color: var(--color-navy-900);
  font-weight: 600;
}

/* ============================================
   SECTION PILLS — encuesta navigation
   ============================================ */
.section-pills {
  display: flex;
  gap: 0.4rem;
  padding: var(--space-2) var(--space-6) var(--space-4);
  background: var(--color-cream-100);
  border-bottom: 1px solid var(--color-cream-300);
  overflow-x: auto;
  scrollbar-width: thin;
}
.section-pill {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  white-space: nowrap;
  border: 1px solid var(--color-cream-300);
  background: white;
  color: var(--color-cream-700);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.section-pill--done {
  background: var(--color-success-100);
  border-color: #bbf7d0;
  color: #15803d;
}
.section-pill--done::before { content: "✓"; font-weight: 700; }
.section-pill--current {
  background: var(--color-terra-50);
  border-color: var(--color-terra-600);
  color: var(--color-terra-900);
  font-weight: 600;
}
.section-pill--current::before { content: "●"; color: var(--color-terra-600); }

/* Filter chips (replaces plain select dropdowns) */
.filter-bar__chips {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-cream-300);
  border-bottom: 1px solid var(--color-cream-300);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-cream-400);
  border-radius: var(--radius-full);
  background: white;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--color-cream-900);
  transition: all var(--transition-fast);
}
.filter-chip:hover { border-color: var(--color-navy-300); }
.filter-chip--active {
  border-color: var(--color-navy-800);
  background: var(--color-navy-50);
  color: var(--color-navy-900);
  font-weight: 600;
}
.filter-chip__remove {
  color: var(--color-cream-700);
  font-size: 0.7rem;
  cursor: pointer;
}
.filter-chip__label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cream-700);
  font-weight: 500;
  white-space: nowrap;
}
.filter-chip__value-text {
  font-weight: 600;
  color: var(--color-navy-900);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-chip--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.filter-chip--disabled:hover { border-color: var(--color-cream-400); }
.filter-chip--disabled .filter-chip__button { cursor: not-allowed; }
.filter-chip__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  background: transparent;
  padding: 0 1.1rem 0 0.1rem;
  margin: 0;
  font: inherit;
  font-size: 0.78rem;
  color: inherit;
  cursor: pointer;
  line-height: 1.2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
}
.filter-chip__select:focus { outline: none; }
.filter-chip:focus-within {
  border-color: var(--color-navy-500);
  box-shadow: 0 0 0 2px var(--color-navy-100);
}
.filter-chip__select option {
  background: white;
  color: var(--color-cream-900);
  font-weight: 400;
}
input.filter-chip__select[type="date"] {
  background-image: none;
  padding-right: 0.25rem;
}
input.filter-chip__select[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* Custom dropdown (Alpine) — reemplaza al `<select>` nativo para
   mantener estilo de marca en el popup de opciones.
   Usado por templates/dashboard/partials/_filter_chip_select.html. */
.filter-chip--custom { position: relative; padding: 0; }
.filter-chip__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  color: inherit;
  cursor: pointer;
  line-height: 1.2;
  max-width: 100%;
  text-align: left;
}
.filter-chip__button:focus { outline: none; }
.filter-chip__value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-chip__caret {
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.4rem;
  color: var(--color-cream-700);
  transition: transform 150ms;
}
.filter-chip--custom[aria-expanded="true"] .filter-chip__caret,
.filter-chip__button[aria-expanded="true"] .filter-chip__caret {
  transform: rotate(180deg);
}
.filter-chip__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-width: 28rem;
  margin: 0;
  background: white;
  border: 1px solid var(--color-cream-300);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 35, 66, 0.12);
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.filter-chip__menu--right { left: auto; right: 0; }
.filter-chip__search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-cream-200);
}
.filter-chip__search-icon {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--color-cream-600);
}
.filter-chip__search {
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-cream-900);
  outline: none;
  min-width: 0;
}
.filter-chip__search::placeholder { color: var(--color-cream-500); }
.filter-chip__menu-list {
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
}
.filter-chip__menu-list li { margin: 0; padding: 0; }
.filter-chip__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.6rem;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-cream-900);
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  white-space: nowrap;
  transition: background 100ms;
}
.filter-chip__option:hover,
.filter-chip__option:focus-visible {
  background: var(--color-cream-100);
  outline: none;
}
.filter-chip__option.is-selected {
  background: var(--color-navy-50);
  color: var(--color-navy-900);
  font-weight: 600;
}
.filter-chip__option.is-selected:hover { background: var(--color-navy-100); }
.filter-chip__option--multi { display: flex; align-items: center; gap: 0.45rem; }
.filter-chip__check {
  flex: 0 0 0.85rem;
  width: 0.85rem;
  height: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-cream-400);
  border-radius: 3px;
  background: white;
  color: white;
  transition: background 100ms, border-color 100ms;
  overflow: hidden;
  box-sizing: border-box;
}
.filter-chip__check--on,
.filter-chip__option.is-selected .filter-chip__check {
  background: var(--color-navy-700);
  border-color: var(--color-navy-700);
}
.filter-chip__check svg {
  width: 0.65rem;
  height: 0.65rem;
  display: block;
  flex: 0 0 auto;
}
.filter-chip__no-results {
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
  color: var(--color-cream-700);
  font-style: italic;
  text-align: center;
}
.filter-chip__footer {
  border-top: 1px solid var(--color-cream-200);
  padding: 0.35rem 0.5rem;
  display: flex;
  justify-content: flex-end;
}
.filter-chip__clear {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.74rem;
  color: var(--color-navy-700);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
}
.filter-chip__clear:hover {
  background: var(--color-cream-100);
  color: var(--color-navy-900);
}

/* Filter chip — locked (rol con SLEP asignado) */
.filter-chip--locked {
  background: var(--color-cream-100);
  color: var(--color-navy-900);
  cursor: default;
}
.filter-chip--locked:hover { border-color: var(--color-cream-400); }
.filter-chip__value {
  font-weight: 600;
  color: var(--color-navy-900);
}

[x-cloak] { display: none !important; }

.filter-bar__search {
  flex: 1;
  min-width: 220px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-cream-400);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  color: var(--color-cream-900);
  background: white;
}

/* ============================================
   PAGE HEADER — editorial pattern
   ============================================ */
.page-header { padding: 0 0 var(--space-6); }
.page-header--compact { padding: 0 0 var(--space-4); }
.page-header--inline { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); }
.page-header__text { flex: 1; min-width: 0; }
.page-header__eyebrow {
  font-size: 0.72rem;
  color: var(--color-terra-600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.page-header__title {
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.page-header--compact .page-header__title { font-size: 1.85rem; }
.page-header__lede {
  font-size: 1rem;
  color: var(--color-cream-700);
  max-width: 56ch;
  line-height: 1.5;
  margin: 0;
}
.page-header--compact .page-header__lede { font-size: 0.9rem; }
.page-header__meta {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-cream-700);
  flex-wrap: wrap;
}
.page-header__meta strong {
  color: var(--color-cream-900);
  font-weight: 600;
}
.page-header__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .page-header { padding: 0 0 var(--space-4); }
  .page-header__title { font-size: 1.85rem; }
  .page-header--inline { flex-direction: column; align-items: stretch; gap: var(--space-4); }
}

/* ============================================
   TABLE MINI-BAR — inline maturity column treatment
   ============================================ */
.maturity-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 140px;
}
.maturity-inline__num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-navy-900);
  min-width: 2ch;
}
.maturity-inline__bar {
  flex: 1;
  height: 6px;
  background: var(--color-cream-200);
  border-radius: 3px;
  overflow: hidden;
}
.maturity-inline__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-cream-500);
}
.maturity-inline__fill--alto { background: var(--color-success-500); }
.maturity-inline__fill--med  { background: var(--color-warning-500); }
.maturity-inline__fill--bajo { background: var(--color-danger-500); }

/* Bar fill — tono unificado para barras de progreso/maduración */
.bar-fill--pos { background: var(--color-success-500); }
.bar-fill--neu { background: var(--color-navy-500); }
.bar-fill--war { background: var(--color-warning-500); }
.bar-fill--neg { background: var(--color-danger-500); }
.bar-fill--mut { background: var(--color-cream-400); }

/* ============================================
   SURVEY LAYOUT — minimal, focused, single-column
   ============================================ */
.survey-topbar {
  background: var(--color-navy-900);
  color: white;
  padding: 0.85rem var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.survey-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.survey-topbar__sub {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--color-navy-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: var(--space-2);
  font-weight: 400;
}
.survey-topbar__exit {
  font-size: 0.78rem;
  color: var(--color-navy-200);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-navy-800);
  background: transparent;
  cursor: pointer;
}

.survey-progress {
  background: var(--color-navy-800);
  padding: 0.85rem var(--space-6);
}
.survey-progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-navy-200);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.survey-progress__meta strong { color: white; font-weight: 600; }
.survey-progress__bar {
  height: 4px;
  background: var(--color-navy-950);
  border-radius: 2px;
  overflow: hidden;
}
.survey-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-terra-600), var(--color-terra-500));
  border-radius: 2px;
  transition: width var(--transition-base);
}

.survey-content {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  padding: 3rem var(--space-6) 8rem;
}

.survey-context {
  font-size: 0.85rem;
  color: var(--color-cream-700);
  padding: 0.85rem 1.1rem;
  background: var(--color-terra-50);
  border-left: 3px solid var(--color-terra-600);
  border-radius: var(--radius-md);
  margin: var(--space-5) 0 var(--space-8);
}
.survey-context strong { color: var(--color-cream-900); }

.survey-q-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-terra-600);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.survey-q-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-2);
}
.survey-q-help {
  font-size: 0.85rem;
  color: var(--color-cream-700);
  max-width: 60ch;
  line-height: 1.5;
  margin-bottom: var(--space-6);
}

.survey-options { display: grid; gap: 0.7rem; margin-bottom: var(--space-8); }
.survey-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--color-cream-300);
  border-radius: var(--radius-lg);
  background: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.survey-option:hover { border-color: var(--color-navy-300); background: var(--color-cream-100); }
.survey-option--selected {
  border-color: var(--color-terra-600);
  background: var(--color-terra-50);
  box-shadow: 0 4px 12px rgba(196, 90, 59, 0.1);
}
.survey-option__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-cream-200);
  color: var(--color-cream-700);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}
.survey-option--selected .survey-option__num {
  background: var(--color-terra-600);
  color: white;
}
.survey-option__title {
  font-weight: 600;
  color: var(--color-navy-900);
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
}
.survey-option--selected .survey-option__title { color: var(--color-terra-900); }
.survey-option__desc {
  font-size: 0.85rem;
  color: var(--color-cream-700);
  line-height: 1.5;
}

.survey-footer {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid var(--color-cream-300);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 -4px 16px rgba(15, 35, 66, 0.04);
  flex-wrap: wrap;
}
.survey-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--color-success-100);
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 600;
}
.survey-saved::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.survey-ev { margin-bottom: var(--space-8); }
.survey-ev-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-cream-700); font-weight: 600;
  margin-bottom: var(--space-2);
  display: flex; justify-content: space-between;
}
.survey-ev-label .opt { color: var(--color-cream-500); font-weight: 500; text-transform: none; letter-spacing: 0; }
.survey-ev-tx {
  width: 100%; min-height: 80px; padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-cream-300); border-radius: var(--radius-md);
  background: white; font-family: inherit; font-size: 0.9rem; color: var(--color-cream-900);
  resize: vertical;
}
.survey-ev-tx:focus {
  outline: none; border-color: var(--color-terra-600);
  box-shadow: 0 0 0 3px rgba(196, 90, 59, 0.12);
}

/* ============================================
   TYPOGRAPHIC UTILITIES — Calm Productivity
   Inter para estructura, DM Serif Display
   sólo en .h-stat y .eyebrow--editorial.
   ============================================ */
.h-page {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.75rem;            /* 28px */
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-3);
}

.h-section {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.25rem;            /* 20px */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-3);
}

.h-card {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;               /* 16px */
    line-height: 1.25;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-2);
}

.h-stat {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}

.eyebrow--editorial {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.875rem;           /* 14px */
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-terra-600);
}

.meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-cream-600);
}

.tabular { font-variant-numeric: tabular-nums; }

/* ============================================
   CONVENIOS — Inspector + Detalle del Indicador
   ============================================ */

/* Compact button size used by the year selector and other inline actions. */
.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
}

/* Progress bar primitive: track + fill. Fill consumes a --pct custom property
   (0–100) so we never need inline width styles. */
.bar {
    height: 6px;
    background: var(--color-cream-200);
    border-radius: 999px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    width: calc(var(--pct, 0) * 1%);
    transition: width 0.2s ease;
}

/* Year selector dropdown (Alpine listbox) */
.conv-year-selector { position: relative; display: inline-block; }
.conv-year-selector__menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--space-1);
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 9rem;
    z-index: 10;
    padding: var(--space-1) 0;
}
.conv-year-selector__item {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: 0.78rem;
    color: var(--color-cream-900);
    text-decoration: none;
}
.conv-year-selector__item:hover { background: var(--color-navy-50); }
.conv-year-selector__item--active {
    background: var(--color-navy-100);
    color: var(--color-navy-900);
    font-weight: 600;
}

/* Inspector — sidebar de objetivos */
.conv-sidebar { padding: var(--space-2) 0; align-self: start; }
.conv-sidebar__group { padding: var(--space-1) var(--space-3) var(--space-1); }
.conv-sidebar__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    color: var(--color-cream-900);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.conv-sidebar__item:hover { background: var(--color-cream-50); }
.conv-sidebar__item--active {
    background: var(--color-cream-100);
    border-left-color: var(--color-navy-900);
    color: var(--color-navy-900);
}
.conv-sidebar__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conv-sidebar__num {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-navy-900);
    letter-spacing: 0.01em;
}
.conv-sidebar__title {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--color-cream-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.conv-sidebar__item--active .conv-sidebar__title { color: var(--color-navy-900); }
.conv-sidebar__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.conv-sidebar__dot--pos { background: var(--color-success-500); }
.conv-sidebar__dot--war { background: var(--color-warning-500); }
.conv-sidebar__dot--neg { background: var(--color-danger-500); }
.conv-sidebar__dot--mut { background: var(--color-cream-400); }
.conv-sidebar__sep {
    border: none;
    border-top: 1px solid var(--color-cream-200);
    margin: var(--space-2) var(--space-3);
}

/* Inspector — indicador propio row */
.conv-indicador-row {
    display: grid;
    grid-template-columns: 1fr 130px auto;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-2);
}
.conv-indicador-row__name {
    font-weight: 600;
    color: var(--color-navy-900);
    text-decoration: none;
    font-size: 0.85rem;
    display: block;
    margin-bottom: var(--space-1);
}
.conv-indicador-row__name:hover { text-decoration: underline; }
.conv-indicador-row__progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.conv-indicador-row__progress-vals {
    display: flex;
    justify-content: space-between;
}
.conv-indicador-row__status { text-align: right; }

/* Inspector — link card (contribución entrante) */
.conv-link-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-1);
}
.conv-link-row__source {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.conv-link-row__name {
    font-size: 0.8rem;
    color: var(--color-cream-900);
}

/* Inspector — layout */
.conv-inspector-rail {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.conv-inspector-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.conv-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.conv-suggested-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.conv-suggested-banner__link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    opacity: 0.7;
    cursor: not-allowed;
}
.conv-empty {
    text-align: center;
    color: var(--color-cream-600);
    font-style: italic;
    padding: var(--space-4);
}

@media (max-width: 768px) {
    .conv-inspector-rail { grid-template-columns: 1fr; }
}

/* Detalle del indicador — tabla metas año por año */
.conv-metas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-top: var(--space-2);
}
.conv-metas-table th {
    background: var(--color-navy-900);
    color: white;
    padding: var(--space-2);
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.conv-metas-table th:first-child { background: var(--color-cream-700); }
.conv-metas-table .conv-metas-table__year {
    font-size: 0.6rem;
    opacity: 0.7;
}
.conv-metas-table td {
    border: 1px solid var(--color-cream-300);
    padding: var(--space-2);
    text-align: center;
}
.conv-metas-table .conv-metas-table__label {
    background: var(--color-cream-100);
    text-align: left;
    font-weight: 600;
    color: var(--color-cream-900);
}
.conv-metas-table__cell--pos { background: #ecfdf5; color: #14532d; font-weight: 700; }
.conv-metas-table__cell--war { background: #fef9c3; color: #854d0e; font-weight: 700; }
.conv-metas-table__cell--neg { background: #fef2f2; color: #991b1b; font-weight: 700; }
.conv-metas-table__cell--mut { background: var(--color-cream-50); color: var(--color-cream-600); }
.conv-metas-table__pending {
    font-style: italic;
    color: var(--color-cream-600);
}

/* Detalle del indicador — subíndices */
.conv-subindice-row {
    display: grid;
    grid-template-columns: 1fr 70px 70px auto;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-cream-100);
    font-size: 0.78rem;
    color: var(--color-cream-900);
    text-decoration: none;
    align-items: center;
}
.conv-subindice-row:hover { background: var(--color-cream-50); }
.conv-subindice-row__val {
    text-align: center;
    font-weight: 600;
}
.conv-subindice-row__val--pos { color: var(--color-success-600); }
.conv-subindice-row__val--war { color: var(--color-warning-600); }
.conv-subindice-row__val--neg { color: var(--color-danger-600); }
.conv-subindice-row__val--mut { color: var(--color-cream-500); }

/* Detalle del indicador — layout y secciones */
.conv-detalle-rail {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-5);
    margin-top: var(--space-4);
}
.conv-detalle-main,
.conv-detalle-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.conv-formula {
    font-family: var(--font-mono);
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-cream-900);
    white-space: pre-wrap;
    margin: 0 0 var(--space-2);
}
.conv-subindices-header {
    display: grid;
    grid-template-columns: 1fr 70px 70px 80px;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-cream-200);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cream-600);
    font-weight: 600;
}
.conv-mdv-row {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}
.conv-mdv-row:last-child { border-bottom: none; }
.conv-mdv-row__name {
    font-weight: 500;
    color: var(--color-cream-900);
}
.conv-vinculo-section-label {
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
}
.conv-vinculo-row {
    font-size: 0.72rem;
    color: var(--color-cream-900);
    line-height: 1.6;
}
.conv-historia-row {
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-cream-200);
    font-size: 0.72rem;
    color: var(--color-cream-700);
    display: flex;
    gap: var(--space-2);
}
.conv-historia-row:last-child { border-bottom: none; }
.conv-historia-row__date {
    min-width: 80px;
    color: var(--color-cream-500);
}

@media (max-width: 768px) {
    .conv-detalle-rail { grid-template-columns: 1fr; }
}

/* ============================================
   CONVENIOS — Button variants y feedback inline
   ============================================ */

.btn--navy {
    background: var(--color-navy-900);
    color: white;
}
.btn--navy:hover { background: var(--color-navy-800); color: white; }
.btn--navy:disabled,
.btn--ghost:disabled,
.btn--ghost-on-navy:disabled,
.btn--white-on-navy:disabled,
.btn--danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--ghost {
    background: transparent;
    color: var(--color-navy-800);
    border: 1px solid var(--color-cream-300);
}
.btn--ghost:hover { background: var(--color-cream-100); border-color: var(--color-navy-400); }

.btn--ghost-on-navy {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn--ghost-on-navy:hover { background: rgba(255, 255, 255, 0.22); color: white; }

.btn--white-on-navy {
    background: white;
    color: var(--color-navy-900);
    border: 1px solid white;
}
.btn--white-on-navy:hover { background: var(--color-cream-100); color: var(--color-navy-900); }

.btn--danger {
    background: white;
    color: var(--color-danger-600);
    border: 1px solid var(--color-cream-300);
}
.btn--danger:hover { background: var(--color-danger-100); border-color: var(--color-danger-500); }

.meta--ok {
    color: var(--color-success-600);
    font-weight: 600;
}

/* Banner amarillo (re-style: ya no es placeholder) */
.conv-suggested-banner__link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    opacity: 1;
    cursor: pointer;
}

/* ============================================
   CONVENIOS — Form cards (Medición + MDV)
   ============================================ */

.conv-medicion-form,
.conv-mdv-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.conv-medicion-form button[type="submit"],
.conv-mdv-form button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
}

.conv-medicion-form__label,
.conv-mdv-form__label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.78rem;
    color: var(--color-cream-700);
}
.conv-medicion-form__label--full,
.conv-mdv-form__label--full {
    grid-column: 1 / -1;
}

.conv-medicion-form input,
.conv-medicion-form textarea,
.conv-mdv-form input,
.conv-mdv-form textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-navy-900);
    background: white;
}
.conv-medicion-form input:focus,
.conv-medicion-form textarea:focus,
.conv-mdv-form input:focus,
.conv-mdv-form textarea:focus {
    outline: none;
    border-color: var(--color-navy-500);
    box-shadow: 0 0 0 2px rgba(45, 90, 143, 0.15);
}

.conv-mdv-list {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (max-width: 768px) {
    .conv-medicion-form,
    .conv-mdv-form { grid-template-columns: 1fr; }
}

/* ============================================
   CONVENIOS — Revisión de Vínculos
   ============================================ */

.conv-revision-wrap {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 1100px;
}

.conv-revision-header {
    background: var(--color-navy-900);
    color: white;
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.conv-revision-header .eyebrow { color: rgba(255, 255, 255, 0.65); }
.conv-revision-header .h-hero { color: white; margin: 0; }
.conv-revision-bulk {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.conv-revision-stats {
    background: var(--color-cream-100);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-cream-300);
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--color-cream-700);
}
.conv-revision-stats .stat { display: flex; align-items: center; gap: var(--space-2); }
.conv-revision-stats b { color: var(--color-navy-900); font-size: 0.95rem; }

.conv-revision-filters {
    padding: var(--space-3) var(--space-5);
    background: var(--color-cream-50);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--color-cream-300);
}
.conv-revision-filters__label { color: var(--color-cream-500); }
.conv-revision-filters__label--right { margin-left: var(--space-3); }

.conv-revision-chip {
    background: white;
    border: 1px solid var(--color-cream-300);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    color: var(--color-cream-700);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.conv-revision-chip:hover { background: var(--color-cream-100); border-color: var(--color-navy-400); }
.conv-revision-chip--active {
    background: var(--color-navy-900);
    color: white;
    border-color: var(--color-navy-900);
}

.conv-revision-list-wrap { padding: 0; }
.conv-revision-list {
    display: flex;
    flex-direction: column;
}

.conv-revision-card {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-cream-200);
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: var(--space-3);
    align-items: flex-start;
    transition: background var(--transition-fast);
}
.conv-revision-card:last-child { border-bottom: none; }
.conv-revision-card:hover { background: var(--color-cream-50); }
.conv-revision-card__check {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-cream-400);
    border-radius: var(--radius-sm);
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-navy-800);
}
.conv-revision-card__check--disabled {
    background: var(--color-cream-200);
    cursor: not-allowed;
}
.conv-revision-card__body { min-width: 0; }

.conv-revision-pair {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.conv-revision-arrow {
    color: var(--color-navy-900);
    font-size: 1.1rem;
    font-weight: 700;
}

.conv-revision-endpoint {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    min-width: 200px;
    max-width: 340px;
}
.conv-revision-endpoint__src {
    font-size: 0.68rem;
    color: var(--color-cream-600);
    margin-bottom: 2px;
}
.conv-revision-endpoint__name {
    font-size: 0.8rem;
    color: var(--color-navy-900);
    font-weight: 500;
    line-height: 1.4;
}

.conv-revision-pill {
    background: var(--color-navy-100);
    color: var(--color-navy-900);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    margin-right: var(--space-1);
}
.conv-revision-pill--cge_director_ejec { background: var(--color-danger-100); color: var(--color-danger-600); }
.conv-revision-pill--cdi_subdireccion { background: var(--color-navy-100); color: var(--color-navy-800); }
.conv-revision-pill--convenio_director_ee { background: var(--color-warning-100); color: var(--color-warning-600); }

.conv-revision-tags {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.conv-conf {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--color-warning-100);
    color: var(--color-warning-600);
}
.conv-conf--high { background: var(--color-success-100); color: var(--color-success-600); }
.conv-conf--med { background: var(--color-warning-100); color: var(--color-warning-600); }
.conv-conf--low { background: var(--color-danger-100); color: var(--color-danger-600); }

.conv-by, .conv-reltype, .conv-status {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.conv-by { background: var(--color-cream-200); color: var(--color-cream-700); }
.conv-reltype { background: var(--color-navy-100); color: var(--color-navy-800); }
.conv-status { background: var(--color-cream-200); color: var(--color-cream-700); text-transform: none; }
.conv-status--confirmed { background: var(--color-success-100); color: var(--color-success-600); }
.conv-status--dismissed { background: var(--color-danger-100); color: var(--color-danger-600); }
.conv-status--suggested { background: var(--color-warning-100); color: var(--color-warning-600); }

.conv-revision-reason {
    font-size: 0.7rem;
    color: var(--color-cream-600);
    font-style: italic;
    margin-top: var(--space-2);
}

.conv-revision-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-end;
}
.conv-revision-actions .btn { min-width: 110px; }

@media (max-width: 768px) {
    .conv-revision-card { grid-template-columns: 30px 1fr; }
    .conv-revision-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: stretch;
    }
}

/* ============================================
   MODAL (Re-rutear / Manual link)
   ============================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 35, 66, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
}

.modal {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal--sm { max-width: 420px; }
.modal--md { max-width: 540px; }
/* Permite que un dropdown interno (listbox) se despliegue fuera del modal sin
   recortarse. Especificidad doble (.modal.modal--*) para ganarle a `.modal form`
   que fija `overflow-y: auto` más abajo. Se redondea el footer porque perdemos
   el clip de overflow. */
.modal.modal--overflow-visible { overflow: visible; }
.modal.modal--overflow-visible form { overflow: visible; overflow-y: visible; }
.modal.modal--overflow-visible .modal__footer {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.modal--lg { max-width: 720px; }
.modal__body { display: flex; flex-direction: column; gap: var(--space-3); }
.modal__hint { font-size: 0.72rem; color: var(--color-cream-600); }

.modal__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-cream-500);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
}
.modal__close:hover { color: var(--color-navy-900); }

.modal form {
    padding: var(--space-4) var(--space-5);
    overflow-y: auto;
}

.modal__footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-cream-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    background: var(--color-cream-50);
}

/* Autocomplete (reroute search) */
.conv-autocomplete-list {
    margin-top: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
}
.conv-autocomplete {
    list-style: none;
    margin: 0;
    padding: 0;
}
.conv-autocomplete__item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-cream-200);
    font-size: 0.8rem;
    color: var(--color-navy-900);
}
.conv-autocomplete__item:last-child { border-bottom: none; }
.conv-autocomplete__item:hover { background: var(--color-navy-50); }

/* Manual link modal — toggle group + form groups */
.conv-manual-form__group {
    border: 1px solid var(--color-cream-200);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.conv-manual-form__group legend {
    padding: 0 var(--space-2);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-navy-800);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.conv-manual-kind-toggle {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

/* ===== Cascada (acordeón) ===== */
.casc-empty { color: var(--color-cream-700, #7a7160); }
.casc-filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }

.casc-controls { margin: 1rem 0; }
.casc-controls__year { display: flex; gap: .35rem; flex-wrap: wrap; }
.casc-controls__chip {
  padding: .25rem .75rem; border: 1px solid var(--color-cream-300, #d9cfb8);
  border-radius: 999px; font-size: .8rem; background: #fff; color: var(--color-navy-700, #1f2a44);
}
.casc-controls__chip--active { background: var(--color-navy-700, #1f2a44); color: #fff; border-color: var(--color-navy-700, #1f2a44); }

.casc-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .casc-summary { grid-template-columns: repeat(2, 1fr); } }
.casc-kpi { background: #fff; border: 1px solid var(--color-cream-300, #e3dcc9); border-radius: 12px; padding: .6rem .8rem; }
.casc-kpi--navy { background: var(--color-navy-700, #1f2a44); color: #fff; border: none; }
.casc-kpi__lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.casc-kpi__val { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.casc-kpi__val--ok { color: var(--color-success-600, #1d6b4c); }
.casc-kpi__val--war { color: var(--color-warning-600, #8a6510); }
.casc-kpi__val--off { color: var(--color-danger-600, #9c3826); }
.casc-kpi__val--na { color: var(--color-cream-700, #8a8170); }

.casc-tree { display: flex; flex-direction: column; gap: .4rem; }
.casc-node__row {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--color-cream-300, #e3dcc9);
  border-left: 4px solid var(--color-cream-400, #cfc6b0);
  border-radius: 10px; padding: .6rem .8rem;
}
.casc-node__row--ok  { border-left-color: var(--color-success-600, #2f9e6f); }
.casc-node__row--war { border-left-color: var(--color-warning-500, #e0a52b); }
.casc-node__row--off { border-left-color: var(--color-danger-600, #d2553f); }
.casc-node__row--na  { border-left-color: var(--color-cream-400, #cfc6b0); }

.casc-node__caret {
  width: 1.2rem; height: 1.2rem; flex: none; border: none; background: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--color-cream-700, #9a917e);
  transition: transform .15s ease;
}
.casc-node__caret--open { transform: rotate(90deg); }
.casc-node__caret--leaf { cursor: default; }
.casc-node__num {
  flex: none; min-width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center;
  background: var(--color-navy-700, #1f2a44); color: #fff; font-weight: 800; border-radius: 7px; font-size: .8rem;
}
.casc-node__badge {
  flex: none; padding: .15rem .5rem; background: var(--color-cream-200, #efe7d3);
  color: var(--color-cream-800, #7a6a3e); font-weight: 700; font-size: .65rem; border-radius: 5px;
}
.casc-node__body { flex: 1; min-width: 0; }
.casc-node__title { font-weight: 700; font-size: .9rem; color: var(--color-navy-700, #1f2a44); }
.casc-node__sub { font-size: .7rem; color: var(--color-cream-700, #9a917e); }
.casc-node__meta { font-size: .7rem; color: var(--color-cream-700, #8a8170); margin-top: .1rem; }
.casc-node__suggested { color: var(--color-warning-600, #8a6510); }
.casc-node__progress { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 7rem; }
.casc-node__bar { width: 100%; height: 7px; border-radius: 4px; background: var(--color-cream-200, #e7e0cf); overflow: hidden; }
.casc-node__bar > i { display: block; height: 100%; }
.casc-node__bar--ok > i  { background: var(--color-success-600, #2f9e6f); }
.casc-node__bar--war > i { background: var(--color-warning-500, #e0a52b); }
.casc-node__bar--off > i { background: var(--color-danger-600, #d2553f); }
.casc-node__bar--na > i  { background: var(--color-cream-400, #cfc6b0); }
.casc-node__pct { font-weight: 800; font-size: 1.05rem; text-align: right; color: var(--color-navy-700, #1f2a44); }
@media (max-width: 640px) { .casc-node__progress { min-width: 4rem; } .casc-node__meta { display: none; } }

.casc-node__chev { color: var(--color-cream-600, #b8af9a); font-size: 1rem; text-decoration: none; padding-left: .25rem; }
.casc-node__chev:hover { color: var(--color-navy-700, #1f2a44); }

.casc-node__kids {
  margin: .35rem 0 .35rem 1.4rem; padding-left: .8rem;
  border-left: 2px dashed var(--color-cream-300, #e3dcc9);
  display: flex; flex-direction: column; gap: .4rem;
}
@media (max-width: 640px) { .casc-node__kids { margin-left: .6rem; padding-left: .5rem; } }

/* ============================================
   Convenios dashboard roll-up (L1 + L2)
   ============================================ */
.dash-main { display: block; }

.dash-controls { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 18px; }
.dash-controls__year { display: flex; gap: 6px; }
.dash-controls__chip {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--color-navy-700); background: var(--color-cream-50);
  border: 1px solid var(--color-cream-300); text-decoration: none;
}
.dash-controls__chip--active {
  background: var(--color-navy-900); color: #fff; border-color: var(--color-navy-900);
}
.dash-controls__cascada-link {
  font-size: 13px; color: var(--color-navy-700); text-decoration: none;
}
.dash-controls__cascada-link:hover { text-decoration: underline; }

.dash-switcher { position: relative; display: inline-block; margin-bottom: 12px; }
.dash-switcher__button {
  background: var(--color-cream-50); border: 1px solid var(--color-cream-300);
  padding: 6px 12px; border-radius: 8px; font-size: 13px;
  color: var(--color-navy-700); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.dash-switcher__button:hover { background: var(--color-cream-100); }
.dash-switcher__caret { font-size: 10px; transition: transform 0.15s; }
.dash-switcher__caret--open { transform: rotate(180deg); }
.dash-switcher__menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid var(--color-cream-300); border-radius: 8px;
  list-style: none; padding: 4px; margin: 0; min-width: 280px;
  max-height: 360px; overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); z-index: 30;
}
.dash-switcher__group-header {
  padding: 8px 12px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-cream-700);
}
.dash-switcher__group-header:not(:first-child) {
  border-top: 1px solid var(--color-cream-200); margin-top: 4px;
}
.dash-switcher__item { padding: 0; }
.dash-switcher__item a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 6px;
  text-decoration: none; color: var(--color-navy-900);
}
.dash-switcher__item a:hover { background: var(--color-cream-50); }
.dash-switcher__item--current a { background: var(--color-navy-50); }
.dash-switcher__item-title { font-size: 13px; font-weight: 600; }
.dash-switcher__item-person { font-size: 11px; color: var(--color-cream-700); }

.dash-list {
  background: #fff; border-radius: 12px; border: 1px solid var(--color-cream-300); overflow: hidden;
}
.dash-row {
  display: grid;
  grid-template-columns: 4px 1fr 110px 110px 24px;
  gap: 14px;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--color-cream-200);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--color-cream-50); }
.dash-row__bar { align-self: stretch; }
.dash-row__bar--ok  { background: #16a34a; }
.dash-row__bar--war { background: #eab308; }
.dash-row__bar--off { background: #dc2626; }
.dash-row__bar--na  { background: var(--color-cream-300); }

.dash-row__body { padding: 16px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-row__title {
  font-size: 14px; color: var(--color-navy-900); font-weight: 500;
  line-height: 1.4;
}
.dash-row__meta { font-size: 12px; color: var(--color-cream-700); }
.dash-row__meta strong { color: var(--color-navy-700); font-weight: 600; }

.dash-row__spark { padding: 16px 0; display: flex; align-items: center; }
.dash-spark { display: block; }
.dash-spark--ok  .dash-spark__line, .dash-spark--ok  .dash-spark__dot { stroke: #16a34a; fill: #16a34a; }
.dash-spark--war .dash-spark__line, .dash-spark--war .dash-spark__dot { stroke: #eab308; fill: #eab308; }
.dash-spark--off .dash-spark__line, .dash-spark--off .dash-spark__dot { stroke: #dc2626; fill: #dc2626; }
.dash-spark--na  .dash-spark__line { stroke: var(--color-cream-400); stroke-dasharray: 3 3; }
.dash-spark--na  .dash-spark__dot  { display: none; }

.dash-row__right {
  padding: 16px 8px;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 4px;
}
.dash-row__pct {
  font-size: 36px; font-weight: 700; color: var(--color-navy-900);
  line-height: 1; font-feature-settings: "tnum";
}
.dash-row__chev { padding: 16px 16px 16px 0; display: flex; align-items: center; color: var(--color-cream-500); font-size: 18px; text-decoration: none; }
a.dash-row__chev:hover { color: var(--color-navy-700); }

/* ── L2 desglose panel ── */
.dash-l2 { display: flex; flex-direction: column; gap: 16px; }
.dash-l2__back {
  font-size: 13px; color: var(--color-navy-700); text-decoration: none; display: inline-block;
}
.dash-l2__back:hover { text-decoration: underline; }
.dash-l2__parent {
  display: grid; grid-template-columns: 4px 1fr 120px;
  gap: 14px; align-items: stretch;
  background: #fff; border-radius: 12px; border: 1px solid var(--color-cream-300); overflow: hidden;
}
.dash-l2__bar { align-self: stretch; }
.dash-l2__bar--ok  { background: #16a34a; }
.dash-l2__bar--war { background: #eab308; }
.dash-l2__bar--off { background: #dc2626; }
.dash-l2__bar--na  { background: var(--color-cream-300); }
.dash-l2__parent-body { padding: 16px 0; display: flex; flex-direction: column; gap: 4px; }
.dash-l2__parent-title { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--color-navy-900); line-height: 1.4; }
.dash-l2__parent-right {
  padding: 16px 16px 16px 0; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 6px;
}
.dash-l2__parent-pct { font-size: 32px; font-weight: 700; color: var(--color-navy-900); line-height: 1; }

.dash-l2__section-hd { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 4px; }
.dash-l2__section-title { font-size: 13px; font-weight: 600; color: var(--color-navy-700); }
.dash-l2__section-hint  { font-size: 11px; color: var(--color-cream-600); }
.dash-l2__list { background: #fff; border-radius: 12px; border: 1px solid var(--color-cream-300); overflow: hidden; }

/* ── L2 group header (navy) ── */
.dash-l2-group { border-radius: 10px; overflow: hidden; border: 1px solid var(--color-cream-300); margin-bottom: 8px; }
.dash-l2-group__hd {
  background: var(--color-navy-900); color: #fff;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 12px; padding: 10px 14px;
}
.dash-l2-group__left { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dash-l2-group__sigla { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.dash-l2-group__person { font-size: 12px; color: var(--color-cream-200); }
.dash-l2-group__meta { font-size: 11px; color: var(--color-cream-300); }
.dash-l2-group__pct { font-size: 22px; font-weight: 700; font-feature-settings: "tnum"; white-space: nowrap; }

/* ── L2 indicador row ── */
.dash-ind-row {
  display: grid; grid-template-columns: 4px 1fr 80px 90px 20px;
  gap: 12px; align-items: stretch;
  border-bottom: 1px solid var(--color-cream-200);
  text-decoration: none; color: inherit; cursor: pointer;
}
.dash-ind-row:last-child { border-bottom: none; }
.dash-ind-row:hover { background: var(--color-cream-50); }
.dash-ind-row__bar { align-self: stretch; }
.dash-ind-row__bar--ok  { background: #16a34a; }
.dash-ind-row__bar--war { background: #eab308; }
.dash-ind-row__bar--off { background: #dc2626; }
.dash-ind-row__bar--na  { background: var(--color-cream-300); }
.dash-ind-row__body { padding: 12px 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-ind-row__code { font-size: 11px; font-weight: 600; color: var(--color-navy-500); }
.dash-ind-row__name { font-size: 13px; color: var(--color-navy-900); line-height: 1.4; }
.dash-ind-row__upstream { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.dash-ind-row__badge {
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: var(--color-navy-100); color: var(--color-navy-700); font-weight: 500;
}
.dash-ind-row__values { padding: 12px 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; }
.dash-ind-row__actual { font-size: 16px; font-weight: 700; color: var(--color-navy-900); }
.dash-ind-row__target { font-size: 11px; color: var(--color-cream-600); }
.dash-ind-row__right { padding: 12px 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.dash-ind-row__pct { font-size: 16px; font-weight: 700; color: var(--color-navy-900); }
.dash-ind-row__chev { padding: 12px 12px 12px 0; display: flex; align-items: center; color: var(--color-cream-500); font-size: 14px; }

.dash-l2-ind {
  display: grid; grid-template-columns: 4px 60px 1fr 100px 110px 24px;
  gap: 12px; align-items: stretch; padding: 0;
  border-bottom: 1px solid var(--color-cream-200);
  text-decoration: none; color: inherit;
}
.dash-l2-ind:last-child { border-bottom: none; }
.dash-l2-ind:hover { background: var(--color-cream-50); }
.dash-l2-ind--sub { padding-left: 32px; background: var(--color-cream-50); }
.dash-l2-ind--sub:hover { background: var(--color-cream-100); }
.dash-l2-ind--sub .dash-l2-ind__code { font-size: 11px; color: var(--color-cream-700); }
.dash-l2-ind--sub .dash-l2-ind__name { font-size: 12px; color: var(--color-cream-700); }
.dash-l2-ind__bar { align-self: stretch; }
.dash-l2-ind__bar--ok  { background: #16a34a; }
.dash-l2-ind__bar--war { background: #eab308; }
.dash-l2-ind__bar--off { background: #dc2626; }
.dash-l2-ind__bar--na  { background: var(--color-cream-300); }
.dash-l2-ind__code {
  display: flex; align-items: center; padding: 12px 0;
  color: var(--color-navy-900); font-weight: 700; font-size: 13px;
  font-feature-settings: "tnum";
}
.dash-l2-ind__body { padding: 12px 4px 12px 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.dash-l2-ind__name { font-size: 13px; color: var(--color-navy-900); line-height: 1.4; }
.dash-l2-ind__meta { font-size: 11px; color: var(--color-cream-700); }
.dash-l2-ind__badges { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.dash-l2-ind__spark { padding: 12px 0; display: flex; align-items: center; }
.dash-l2-ind__right {
  padding: 12px 8px; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 3px;
}
.dash-l2-ind__pct {
  font-size: 22px; font-weight: 700; color: var(--color-navy-900);
  font-feature-settings: "tnum"; line-height: 1;
}
.dash-l2-ind__chev { padding: 12px 16px 12px 0; display: flex; align-items: center; color: var(--color-cream-500); font-size: 16px; }

@media (max-width: 640px) {
  .dash-row { grid-template-columns: 4px 1fr 80px 24px; }
  .dash-row__spark { display: none; }
  .dash-l2__parent { grid-template-columns: 4px 1fr 80px; }
  .dash-l2-ind { grid-template-columns: 4px 50px 1fr 70px 24px; }
  .dash-l2-ind__spark { display: none; }
}

/* ============================================
   DASHBOARD: BRIDGE VISUALIZATION
   Used by level_dep.html (Nivel 4) and
   level_slep.html (Nivel 3) — McKinsey 7S puente.
   ============================================ */
.bridge-section {
    background: linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-950) 100%);
    padding: var(--space-12) var(--space-12);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}
.bridge-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(196, 90, 59, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(196, 90, 59, 0.08) 0%, transparent 50%);
    pointer-events: none;
}
.bridge-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
.bridge {
    position: relative;
}
.bridge__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}
.bridge__endpoint {
    text-align: center;
    color: white;
}
.bridge__endpoint-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
}
.bridge__endpoint-desc {
    font-size: 0.75rem;
    color: var(--color-cream-400);
}
.bridge__deck {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terra-400), var(--color-terra-500), var(--color-terra-400));
    margin: 0 var(--space-6);
    border-radius: var(--radius-full);
    box-shadow: 0 0 20px rgba(196, 90, 59, 0.4);
}
.bridge__pillars {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}
.bridge__pillar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.bridge__pillar:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
.bridge__pillar-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--pillar-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: var(--space-2);
}
.bridge__pillar-name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-cream-300);
    text-align: center;
    margin-bottom: var(--space-2);
}
.bridge__pillar-level {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: white;
}
.bridge__base {
    height: 8px;
    background: var(--color-navy-800);
    border-radius: var(--radius-sm);
    margin-top: var(--space-6);
}

/* Comparison table footer (header/body live further up in this file) */
.comparison-table tfoot td {
    background: var(--color-cream-100);
    border-top: 2px solid var(--color-cream-300);
}

/* Level badge — square 28×28 maturity chip for tabular cells.
   Used in level_dep/level_slep comparison tables. */
.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.875rem;
}
.level-badge--1 { background: rgba(220, 38, 38, 0.15); color: var(--maturity-1); }
.level-badge--2 { background: rgba(234, 88, 12, 0.15); color: var(--maturity-2); }
.level-badge--3 { background: rgba(234, 179, 8, 0.15); color: var(--maturity-3); }
.level-badge--4 { background: rgba(101, 163, 13, 0.15); color: var(--maturity-4); }
.level-badge--5 { background: rgba(22, 163, 74, 0.15); color: var(--maturity-5); }
.level-badge--clickable {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.level-badge--clickable:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-md);
}

/* School / SLEP row name primitives — small RBD or region badge inline with the
   row label. */
.school-name,
.slep-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.school-name__badge,
.slep-name__region {
    font-size: 0.625rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    background: var(--color-cream-200);
    border-radius: var(--radius-sm);
    color: var(--color-cream-700);
}
.slep-name__region {
    white-space: nowrap;
}
.slep-row--current {
    background: rgba(196, 90, 59, 0.08);
}
.slep-row--current td:first-child {
    font-weight: 600;
}

@media (max-width: 768px) {
    .bridge__pillars { flex-wrap: wrap; }
    .bridge__pillar { flex: 0 0 calc(25% - var(--space-2)); }
    .bridge__pillar-name { font-size: 0.5rem; }
}

/* ============================================
   DASHBOARD: NIVEL 2 — Equipo Directivo layout
   Used only by level_leadership.html
   ============================================ */
.leadership-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
@media (max-width: 1280px) {
    .leadership-layout { grid-template-columns: 1fr; }
}
.capabilities-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.capability-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}
.capability-row:hover {
    border-color: var(--color-cream-400);
    box-shadow: var(--shadow-md);
}
.capability-row__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent, var(--color-navy-500)), color-mix(in srgb, var(--accent, var(--color-navy-500)) 80%, black));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.capability-row__content {
    flex: 1;
    min-width: 0;
}
.capability-row__name {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-1);
}
.capability-row__desc {
    font-size: 0.8125rem;
    color: var(--color-cream-600);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.capability-row__maturity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.capability-row__level {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-navy-900);
    width: 32px;
    text-align: center;
}
.capability-row__bar {
    width: 80px;
    height: 8px;
    background: var(--color-cream-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.capability-row__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}
.dream-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
}
.dream-class-card {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--transition-fast);
}
.dream-class-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.dream-class-card__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dream-class-card__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-2);
}
.dream-class-card__desc {
    font-size: 0.875rem;
    color: var(--color-cream-600);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}
.dream-class-card__score {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-cream-200);
}
.dream-class-card__value {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-navy-900);
    line-height: 1;
}
.dream-class-card__label {
    font-size: 0.75rem;
    color: var(--color-cream-600);
}

/* ============================================
   DASHBOARD: NIVEL 1 — Sala de Clases evidence
   Used only by level_classroom.html
   ============================================ */
.evidence-table {
    width: 100%;
    border-collapse: collapse;
}
.evidence-table th,
.evidence-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-cream-200);
}
.evidence-table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cream-600);
    background: var(--color-cream-100);
}
.evidence-type {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 500;
}
.evidence-level {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}
.evidence-level--high {
    background: var(--color-success-100);
    color: var(--color-success-600);
}
.evidence-level--medium {
    background: var(--color-warning-100);
    color: var(--color-warning-600);
}
.evidence-level--low {
    background: var(--color-cream-200);
    color: var(--color-cream-700);
}
.evidence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}
.evidence-dot--completed {
    background-color: var(--color-success-500);
    box-shadow: 0 0 0 2px var(--color-success-100);
}
.evidence-dot--in-progress {
    background-color: var(--color-warning-500);
    box-shadow: 0 0 0 2px var(--color-warning-100);
}
.evidence-dot--none {
    background-color: var(--color-cream-300);
    box-shadow: 0 0 0 2px var(--color-cream-100);
}

/* ============================================
   DASHBOARD: Classroom detail
   Used only by classroom_detail.html
   ============================================ */
.detail-status {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.detail-status--completed {
    background: var(--color-success-100);
    color: var(--color-success-600);
}
.detail-status--in_progress {
    background: var(--color-warning-100);
    color: var(--color-warning-600);
}
.detail-status--scheduled {
    background: var(--color-navy-100);
    color: var(--color-navy-600);
}
.detail-status--cancelled {
    background: var(--color-cream-200);
    color: var(--color-cream-700);
}
.detail-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}
.detail-metric-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: var(--color-cream-100);
    border-radius: var(--radius-md);
    text-align: center;
}
.detail-metric-card__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-cream-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-1);
}
.detail-metric-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-navy-900);
}
.detail-metric-card__value--success { color: var(--color-success-600); }
.detail-metric-card__value--warning { color: var(--color-warning-600); }
.detail-metric-card__value--danger { color: var(--color-danger-600); }
.detail-metric-card__period {
    font-size: 0.6875rem;
    color: var(--color-cream-500);
    margin-top: var(--space-1);
}
@media (max-width: 640px) {
    .detail-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   DASHBOARD: SLEP Personas (Área Personas)
   Used by dashboard/slep_personas.html and its
   partials (_dotacion_grid, _kpi_placeholder, etc.)
   Wireframe v2 — navy/cream language, editorial
   title, filtros horizontales cream-50, KPI strip
   con hero navy, cards densas con header navy
   underline, funnel proporcional y disclosures.
   ============================================ */
body .content:has(> .sp-dashboard) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.sp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    overflow-x: clip;
    zoom: 1.05;
}

/* ─── Header ──────────────────────────────────────────────────────── */
.sp-dashboard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.sp-dashboard__eyebrow {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-terra-700);
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.sp-dashboard__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
    margin: 0;
}
.sp-dashboard__subtitle {
    font-size: 0.68rem;
    color: var(--color-cream-700);
    margin-top: 0.15rem;
}
.sp-dashboard__period {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: 999px;
    color: var(--color-navy-800);
    font-size: 0.66rem;
    font-weight: 600;
}
.sp-dashboard__period strong {
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}

/* ─── Banners críticos ─────────────────────────────────────────────── */
.sp-banners {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sp-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.5rem 0.75rem 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    border-left-width: 4px;
    background: white;
    text-decoration: none;
    transition: background 150ms, border-color 150ms;
}
.sp-banner--critical {
    background: var(--color-danger-50);
    border-color: var(--color-danger-200);
    border-left-color: var(--color-danger-600);
}
.sp-banner--critical:hover { background: var(--color-danger-100); }
.sp-banner--warn {
    background: var(--color-warning-50);
    border-color: var(--color-warning-200);
    border-left-color: var(--color-warning-600);
}
.sp-banner--warn:hover { background: var(--color-warning-100); }
.sp-banner__text {
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--color-navy-900);
}
.sp-banner--critical .sp-banner__text strong { color: var(--color-danger-700); }
.sp-banner--warn .sp-banner__text strong { color: var(--color-warning-700); }
.sp-banner__detail { color: var(--color-cream-700); margin-left: 0.25rem; }
.sp-banner__cta {
    padding: 0.22rem 0.6rem;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.sp-banner--critical .sp-banner__cta { background: var(--color-danger-600); }
.sp-banner--warn .sp-banner__cta { background: var(--color-warning-600); }

/* ─── Link público Banco de Postulantes ────────────────────────────── */
.sp-public-link {
    border: 1px solid var(--color-navy-200, #c7d2dc);
    background: linear-gradient(135deg, var(--color-navy-50) 0%, #fff 100%);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}
.sp-public-link__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
@media (min-width: 768px) {
    .sp-public-link__body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
    }
}
.sp-public-link__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.sp-public-link__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-navy-700, #1e3a5f);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.sp-public-link__desc {
    font-size: 0.78rem;
    color: var(--color-cream-700);
    line-height: 1.4;
}
@media (min-width: 768px) {
    .sp-public-link__desc { white-space: nowrap; }
}
.sp-public-link__controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sp-public-link__btn,
.sp-public-link__open {
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.sp-public-link__btn {
    background: var(--color-navy-700, #1e3a5f);
    color: white;
}
.sp-public-link__btn:hover { background: var(--color-navy-800, #16294a); }
.sp-public-link__btn-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.sp-public-link__btn-label svg { flex-shrink: 0; }
.sp-public-link__open {
    background: white;
    border-color: var(--color-cream-300);
    color: var(--color-navy-700, #1e3a5f);
}
.sp-public-link__open:hover { border-color: var(--color-navy-400, #6f8aab); }

/* ─── Filtros horizontales (espejo de .atp-filters) ───────────────── */
.sp-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    position: relative;
}
.sp-filters::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-700), var(--color-navy-400) 60%, transparent);
    opacity: 0.6;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.sp-filter {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    flex: 1;
    min-width: 170px;
}
.sp-filter__label {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-cream-700);
    font-weight: 700;
}
.sp-filter__select {
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a365d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 9px 6px;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-sm);
    padding: 0.3rem 1.5rem 0.3rem 0.55rem;
    font-size: 0.74rem;
    color: var(--color-navy-900);
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;
}
.sp-filter__select:hover { border-color: var(--color-navy-400); }
.sp-filter__select:focus {
    outline: none;
    border-color: var(--color-navy-700);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-navy-500) 22%, transparent);
}
.sp-filter--active .sp-filter__select {
    border-color: var(--color-navy-700);
    background-color: var(--color-navy-50);
}
.sp-filters__clear {
    align-self: flex-end;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    background: white;
    border: 1px dashed var(--color-terra-500);
    color: var(--color-terra-700);
    font-size: 0.66rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    transition: background 150ms;
}
.sp-filters__clear:hover { background: var(--color-terra-50); }

/* ─── Section heads (editorial, sin card frame) ────────────────────── */
.sp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.35rem 0.1rem 0.05rem;
}
.sp-section-head__title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    line-height: 1.15;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
    margin: 0;
}
.sp-section-head__meta {
    font-size: 0.64rem;
    color: var(--color-cream-700);
    font-weight: 500;
}
.sp-section-head__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    color: var(--color-cream-700);
    cursor: pointer;
    user-select: none;
}
.sp-section-head__toggle input { accent-color: var(--color-navy-700); }

/* ─── KPI strip (hero + cards) ─────────────────────────────────────── */
.sp-kpis {
    display: grid;
    grid-template-columns: 1.35fr repeat(var(--sp-kpis-cols, 4), 1fr);
    gap: 0.45rem;
}
.sp-kpis--ops {
    grid-template-columns: repeat(4, 1fr);
}
.sp-kpi {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.6rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms, box-shadow 150ms, transform 150ms;
    min-height: 78px;
}
.sp-kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--kpi-accent, var(--color-navy-700));
    opacity: 0.85;
}
a.sp-kpi:hover {
    border-color: color-mix(in srgb, var(--kpi-accent, var(--color-navy-700)) 60%, var(--color-cream-300));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}
.sp-kpi__label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-cream-700);
    font-weight: 700;
    line-height: 1.2;
}
.sp-kpi__value {
    font-family: var(--font-display);
    font-size: 1.65rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: 0.2rem;
}
.sp-kpi__detail {
    font-size: 0.6rem;
    color: var(--color-cream-700);
    margin-top: auto;
    padding-top: 0.25rem;
    line-height: 1.3;
}
.sp-kpi--hero {
    background: linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
    border-color: var(--color-navy-900);
    color: white;
}
.sp-kpi--hero .sp-kpi__label { color: var(--color-navy-200); }
.sp-kpi--hero .sp-kpi__value { color: white; font-size: 1.95rem; }
.sp-kpi--hero .sp-kpi__detail { color: var(--color-navy-200); }
.sp-kpi--hero::before { background: white; opacity: 0.4; }

.sp-kpi--active {
    border-color: var(--color-navy-800);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-navy-700) 22%, transparent);
}
.sp-kpi--active .sp-kpi__detail strong { color: var(--color-navy-800); }

/* KPI accents semánticos */
.sp-kpi--danger { --kpi-accent: var(--color-danger-500); }
.sp-kpi--danger .sp-kpi__value { color: var(--color-danger-600); }
.sp-kpi--warn   { --kpi-accent: var(--color-warning-500); }
.sp-kpi--warn   .sp-kpi__value { color: var(--color-warning-600); }
.sp-kpi--ok     { --kpi-accent: var(--color-success-500); }
.sp-kpi--ok     .sp-kpi__value { color: var(--color-success-600); }
.sp-kpi--ghost  { opacity: 0.62; }
.sp-kpi--ghost .sp-kpi__value { color: var(--color-cream-500); }
.sp-kpi--ghost .sp-kpi__detail { font-style: italic; }

/* ─── Card genérica (espejo de .atp-dashboard .card) ──────────────── */
.sp-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sp-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-700), var(--color-navy-400) 60%, transparent);
    opacity: 0.6;
}
.sp-card__header {
    padding: 0.35rem 0.65rem;
    border-bottom: 1px solid var(--color-cream-200);
    background: transparent;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.sp-card__title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--color-navy-800);
    margin: 0;
}
.sp-card__hint {
    font-size: 0.6rem;
    color: var(--color-cream-700);
    font-weight: 500;
}
.sp-card__body { padding: 0.45rem 0.6rem; }
.sp-card__body--flush { padding: 0; }

/* ─── Funnel (cola por fase) — proporcional, clickable ─────────────── */
.sp-funnel-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem 0.75rem;
    position: relative;
    overflow: hidden;
}
.sp-funnel-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-800), var(--color-terra-500) 60%, transparent);
    opacity: 0.7;
}
.sp-funnel-bar {
    display: flex;
    height: 2.1rem;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.55rem;
    background: var(--color-cream-100);
    border: 1px solid var(--color-cream-200);
}
.sp-funnel-bar__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border: none;
    transition: filter 150ms, box-shadow 150ms, transform 150ms;
    position: relative;
}
.sp-funnel-bar__seg:hover { filter: brightness(0.96); }
.sp-funnel-bar__seg--active {
    box-shadow: inset 0 0 0 2px var(--color-navy-900);
    z-index: 1;
}
.sp-funnel-bar__seg + .sp-funnel-bar__seg { border-left: 1px solid rgba(255, 255, 255, 0.6); }

.sp-funnel-bar__seg--por_validar  { background: var(--color-cream-300); color: var(--color-cream-900); }
.sp-funnel-bar__seg--en_busqueda  { background: var(--color-cream-400); color: var(--color-cream-900); }
.sp-funnel-bar__seg--por_habilitar{ background: var(--color-navy-400); color: white; }
.sp-funnel-bar__seg--activos      { background: var(--color-success-500); color: white; }

.sp-funnel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}
.sp-funnel-step {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem;
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-200);
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    color: inherit;
    font: inherit;
}
.sp-funnel-step:hover {
    border-color: var(--color-navy-400);
    background: white;
}
.sp-funnel-step--active {
    border-color: var(--color-navy-800);
    background: white;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-navy-700) 18%, transparent);
}
.sp-funnel-step__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--color-cream-700);
    line-height: 1.2;
}
.sp-funnel-step__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--step-color, var(--color-navy-700));
    flex-shrink: 0;
}
.sp-funnel-step__count {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.sp-funnel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.1rem;
    border-radius: 6px;
    background: var(--color-cream-100);
    color: var(--color-cream-700);
    font-size: 0.74rem;
    margin-bottom: 0.55rem;
}

.sp-funnel-drill {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--color-cream-300);
}
.sp-funnel-drill__heading {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--color-navy-800);
    margin: 0 0 0.4rem;
}

/* ─── Tabs editorial (drilldown) ──────────────────────────────────── */
.sp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--color-cream-300);
}
.sp-tab {
    padding: 0.35rem 0.9rem;
    font-weight: 600;
    font-size: 0.76rem;
    color: var(--color-cream-700);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    transition: color 150ms, border-color 150ms;
}
.sp-tab:hover { color: var(--color-navy-700); }
.sp-tab--active {
    color: var(--color-navy-900);
    border-bottom-color: var(--color-navy-800);
}

/* ─── Tablas ──────────────────────────────────────────────────────── */
.sp-table-scroll {
    overflow: auto;
    width: 100%;
    max-width: 100%;
    max-height: 22rem;
}
.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}
.sp-table thead th {
    padding: 0.42rem 0.55rem;
    background: var(--color-cream-100);
    color: var(--color-navy-800);
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--color-cream-300);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: bottom;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.sp-table tbody td {
    padding: 0.4rem 0.55rem;
    color: var(--color-navy-900);
    border-bottom: 1px solid var(--color-cream-200);
    line-height: 1.35;
}
.sp-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--color-cream-50) 75%, transparent);
}
.sp-table tbody tr:hover td { background: var(--color-cream-100); }
.sp-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.sp-table__num a {
    color: var(--color-navy-700);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.sp-table__num a:hover {
    color: var(--color-navy-900);
    border-bottom-color: var(--color-navy-400);
}
.sp-table tfoot th, .sp-table tfoot td {
    padding: 0.4rem 0.55rem;
    background: var(--color-navy-800);
    color: white;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-top: 2px solid var(--color-navy-900);
}
.sp-table tfoot th { text-align: left; }
.sp-table tfoot td { text-align: right; }

.sp-empty {
    padding: 1.2rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.76rem;
    font-style: italic;
}

/* ─── Status chips ─────────────────────────────────────────────────── */
.sp-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.sp-chip--por_validar   { background: var(--color-cream-200); color: var(--color-cream-900); }
.sp-chip--en_busqueda   { background: var(--color-cream-300); color: var(--color-cream-900); }
.sp-chip--por_habilitar { background: var(--color-navy-100); color: var(--color-navy-800); }
.sp-chip--activos       { background: var(--color-success-100); color: var(--color-success-700); }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sp-kpis { grid-template-columns: 1fr 1fr 1fr; }
    .sp-kpis--ops { grid-template-columns: 1fr 1fr; }
    .sp-kpi__value { font-size: 1.45rem; }
    .sp-funnel-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .sp-kpis, .sp-kpis--ops { grid-template-columns: 1fr 1fr; }
    .sp-filter { min-width: 100%; }
    .sp-dashboard__head { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   DASHBOARD: ATP — Acompañamiento Técnico Pedagógico
   Used by dashboard/acompanamiento_tecnico.html and its
   partials (_atp_resumen, _atp_establecimientos, etc.)
   Lenguaje visual espejo de Resultados Educativos.
   ============================================ */
body .content:has(> .atp-dashboard) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.atp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    /* Clip cualquier overflow horizontal (ej. tabla ancha) para que la
       página no scrollee — el scroll vive dentro de .atp-table-scroll. */
    overflow-x: clip;
    /* Escala global del dashboard equivalente a zoom 110% del browser —
       compensa que el lenguaje visual base de ATP estaba calibrado para
       pantallas más densas. Afecta fuentes, paddings, gráficos y modal. */
    zoom: 1.1;
}

/* Header */
.atp-dashboard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.atp-dashboard__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
}
.atp-dashboard__subtitle {
    font-size: 0.66rem;
    color: var(--color-cream-700);
    margin-top: 0.1rem;
}
.atp-preview-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    background: var(--color-warning-100);
    border: 1px solid var(--color-warning-200);
    border-radius: 999px;
    color: var(--color-warning-700);
    font-size: 0.66rem;
    font-weight: 500;
}

/* Tabs — idéntico a .re-tabs */
.atp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--color-cream-300);
}
.atp-tab {
    padding: 0.3rem 0.85rem;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-cream-700);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
.atp-tab:hover { color: var(--color-navy-700); }
.atp-tab--active {
    color: var(--color-navy-900);
    border-bottom-color: var(--color-navy-800);
}

#atp-dashboard-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Form interno: grid de 1 columna con `minmax(0, 1fr)` — truco canónico
   para evitar que un hijo (tabla ancha) ensanche al padre por encima del
   viewport. Combinado con min-width: 0 + overflow-x: clip arriba, el
   scroll horizontal vive estrictamente dentro de .atp-table-scroll. */
.atp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
}
.atp-body > * {
    min-width: 0;
    max-width: 100%;
}

/* ─── Cards (override del .card global, espejo de .re-dashboard) ──── */
.atp-dashboard .card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: white;
}
.atp-dashboard .card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-700), var(--color-navy-400) 60%, transparent);
    opacity: 0.6;
}
.atp-dashboard .card__header {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--color-cream-200);
    flex-shrink: 0;
    background: transparent;
    display: block;
}
.atp-dashboard .card__title {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--color-navy-800);
    margin: 0;
}
.atp-dashboard .card__body {
    padding: 0.4rem 0.55rem;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* --flush: tablas anchas con scroll interno (display: block evita que el
   contenido de la tabla expanda el card via flex intrinsic sizing). */
.atp-dashboard .card__body--flush {
    padding: 0;
    display: block;
}

/* ─── Filtros horizontales — chips "al aire", espejo de .gdp__filters ── */
.atp-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.atp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 180px;
}
.atp-filter-label {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-cream-700);
    font-weight: 700;
}
/* ─── Chip "Periodo" — presets + rango custom (espejo de gdp__periodo-*) ── */
.atp-periodo-divider {
    height: 1px;
    background: var(--color-cream-200);
    margin: 0.35rem 0.5rem;
}
.atp-periodo-custom {
    padding: 0.6rem 0.7rem 0.7rem;
    border-top: 1px solid var(--color-cream-200);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.atp-periodo-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-cream-700);
}
.atp-periodo-field span {
    min-width: 3rem;
    font-weight: 600;
    color: var(--color-navy-900);
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
}
.atp-periodo-field input[type="date"] {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-navy-900);
    background: white;
    font-family: inherit;
}
.atp-periodo-field input[type="date"]:focus {
    outline: 2px solid var(--color-navy-400);
    outline-offset: -1px;
}
.atp-periodo-apply {
    align-self: flex-end;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--color-navy-800);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
}
.atp-periodo-apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.atp-periodo-apply:not(:disabled):hover {
    background: var(--color-navy-900);
}
/* ─── KPI strip horizontal (mismo lenguaje que .re-paes-kpis) ────── */
.atp-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}
.atp-kpi {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: border-color 150ms, box-shadow 150ms;
}
.atp-kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--kpi-accent, var(--color-navy-700));
    opacity: 0.85;
}
.atp-kpi__label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-cream-700);
    font-weight: 700;
    line-height: 1.2;
}
.atp-kpi__value {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.atp-kpi--hero {
    background: var(--color-navy-800);
    border-color: var(--color-navy-900);
}
.atp-kpi--hero .atp-kpi__label { color: var(--color-navy-100); }
.atp-kpi--hero .atp-kpi__value { color: white; }
.atp-kpi--hero::before { background: white; opacity: 0.5; }
.atp-kpi--active {
    border-color: var(--kpi-accent, var(--color-navy-800));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-accent, var(--color-navy-700)) 22%, transparent);
}

/* ─── Stage intro (descripción de la etapa actual) ───────────────── */
.atp-stage-intro {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-left: 4px solid var(--stage-accent, var(--color-navy-700));
    border-radius: var(--radius-md);
}
.atp-stage-intro__count {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.atp-stage-intro__text {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--color-cream-800, #44423d);
}
.atp-stage-intro__text strong {
    color: var(--color-navy-900);
    font-weight: 700;
}

/* ─── Tablas ──────────────────────────────────────────────────────── */
.atp-table-scroll {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}
/* Espejo de .gdp__ee-table — header cream-50 uppercase, sin stripes,
   cells con border-bottom cream-200, hover sutil. */
.atp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: auto;
}
.atp-table thead th {
    padding: 0.5rem 0.7rem;
    background: var(--color-cream-50);
    color: var(--color-cream-700);
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--color-cream-300);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: bottom;
    white-space: nowrap;
}
.atp-table tbody td {
    padding: 0.55rem 0.7rem;
    color: var(--color-navy-900);
    border-bottom: 1px solid var(--color-cream-200);
    vertical-align: middle;
    line-height: 1.4;
}
.atp-table tbody tr:last-child td { border-bottom: none; }
.atp-table tbody tr:hover td { background: var(--color-cream-50); }
.atp-table tbody td.atp-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.atp-table thead th.atp-table__num,
.atp-table tfoot td.atp-table__num { text-align: right; }
.atp-table tfoot th, .atp-table tfoot td {
    padding: 0.55rem 0.7rem;
    background: var(--color-cream-50);
    color: var(--color-navy-900);
    font-weight: 700;
    border-top: 1px solid var(--color-cream-300);
    font-variant-numeric: tabular-nums;
}
.atp-table tfoot th { text-align: left; }
.atp-table tfoot td { text-align: right; }

.atp-table__col-narrow { width: 90px; }
.atp-table__col-medium { width: 160px; }
.atp-table__col-wide   { min-width: 280px; }

/* Pills de estadio (Implementación Inicial → Satisfactoria) */
.atp-stage-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.atp-stage-pill--inicial       { background: var(--color-danger-100); color: var(--color-danger-700); }
.atp-stage-pill--emergente     { background: var(--color-warning-100); color: var(--color-warning-700); }
.atp-stage-pill--satisfactoria { background: var(--color-success-100); color: var(--color-success-700); }
.atp-stage-pill--avanzada      { background: var(--color-navy-100); color: var(--color-navy-700); }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .atp-kpis { grid-template-columns: repeat(3, 1fr); }
    .atp-kpi__value { font-size: 1.35rem; }
    .atp-filter-group { min-width: 160px; }
}
@media (max-width: 640px) {
    .atp-kpis { grid-template-columns: repeat(2, 1fr); }
    .atp-filters { padding: 0.35rem 0.45rem; }
    .atp-filter-group { min-width: 100%; }
}

/* ============================================
   DASHBOARD: Plan de Acompañamiento
   Used by dashboard/plan_acompanamiento.html.
   Comparte lenguaje visual con .atp-dashboard.
   Estructura: head + KPI strip + filtros + tabla.
   ============================================ */
body .content:has(> .pa-dashboard) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.pa-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    overflow-x: clip;
    zoom: 1.1;
}

.pa-dashboard #pa-frame,
.pa-dashboard #pa-tab-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* Head */
.pa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.pa-head__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
}
.pa-head__subtitle {
    font-size: 0.7rem;
    color: var(--color-cream-700);
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.pa-head__subtitle .pa-sep { color: var(--color-cream-300); margin: 0 0.35rem; }
.pa-preview-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    background: var(--color-warning-100);
    border: 1px solid var(--color-warning-200);
    border-radius: 999px;
    color: var(--color-warning-700);
    font-size: 0.66rem;
    font-weight: 500;
}

/* KPI cards (Pendientes / Vencidas / Completadas) */
.pa-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.pa-kpi {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.pa-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pa-kpi-accent, var(--color-navy-700));
}
.pa-kpi__value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.pa-kpi__label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-cream-700);
    font-weight: 700;
}
.pa-kpi--pendientes  { --pa-kpi-accent: var(--color-warning-600); }
.pa-kpi--vencidas    { --pa-kpi-accent: var(--color-danger-600); }
.pa-kpi--completadas { --pa-kpi-accent: var(--color-success-600); }

/* Filtros */
/* Tabla */
.pa-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.pa-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-800), var(--color-navy-400) 60%, transparent);
    opacity: 0.6;
}
.pa-table-scroll {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}
.pa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed;
}
.pa-table thead th {
    padding: 0.55rem 0.7rem;
    background: var(--color-cream-100);
    color: var(--color-navy-800);
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--color-cream-300);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.pa-table tbody td {
    padding: 0.65rem 0.7rem;
    color: var(--color-navy-900);
    border-bottom: 1px solid var(--color-cream-200);
    vertical-align: top;
    line-height: 1.45;
}
.pa-table tbody tr:last-child td { border-bottom: none; }
.pa-table tbody tr:hover td { background: var(--color-cream-50); }
.pa-table tbody tr[role="button"] { cursor: pointer; }
.pa-table tbody tr[role="button"]:focus-visible {
    outline: 2px solid var(--color-navy-700);
    outline-offset: -2px;
}

.pa-table__col-rbd     { width: 7%; }
.pa-table__col-ee      { width: 18%; }
.pa-table__col-plazo   { width: 10%; }
.pa-table__col-accion  { width: 11%; }
.pa-table__col-resp    { width: 17%; }
.pa-table__col-estado  { width: 10%; }
.pa-table__col-practica { width: 27%; }

/* Seguimiento: "Acción" es la columna clave, dale el mayor ancho */
.pa-table--seguimiento .pa-table__col-rbd    { width: 7%; }
.pa-table--seguimiento .pa-table__col-ee     { width: 18%; }
.pa-table--seguimiento .pa-table__col-accion { width: 35%; }
.pa-table--seguimiento .pa-table__col-resp   { width: 18%; }
.pa-table--seguimiento .pa-table__col-plazo  { width: 12%; }
.pa-table--seguimiento .pa-table__col-estado { width: 10%; }

.pa-table tbody td { overflow: hidden; }
.pa-table .atp-est-list__name { min-width: 0; }
.pa-table .atp-est-list__name-text { max-width: 100%; }

/* Práctica problemática: una sola línea con elipsis (tooltip muestra el texto completo) */
.pa-table__practica > span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-ee-link {
    color: var(--color-navy-700);
    font-weight: 600;
    text-decoration: none;
}
.pa-ee-link:hover { text-decoration: underline; }

.pa-plazo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-cream-800, #44423d);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.pa-plazo--vencida { color: var(--color-danger-700); }
.pa-plazo__warn {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

/* Pills de estado */
.pa-estado {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.pa-estado--pending     { background: var(--color-warning-100); color: var(--color-warning-700); }
.pa-estado--in-progress { background: var(--color-navy-100); color: var(--color-navy-700); }
.pa-estado--completed   { background: var(--color-success-100); color: var(--color-success-700); }
.pa-estado--critical    { background: var(--color-danger-100); color: var(--color-danger-700); }
.pa-estado--cancelled   { background: var(--color-cream-200); color: var(--color-cream-700); }

.pa-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.85rem;
}

@media (max-width: 1024px) {
    .pa-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .pa-kpis { grid-template-columns: 1fr; }
    .pa-table { table-layout: auto; font-size: 0.74rem; }
    .pa-table thead { display: none; }
    .pa-table tbody td { display: block; width: 100%; padding: 0.35rem 0.7rem; }
    .pa-table tbody tr {
        display: block;
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--color-cream-200);
    }
}

/* ============================================
   DASHBOARD: Reportes
   Used by dashboard/reports.html and its partials
   (_reportes_indicadores, _reportes_exportar).
   Tabs editorial + grid de tarjetas de exportación
   + toasts in-app + tabla de historial.
   ============================================ */
.reports-tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-cream-300);
    margin-bottom: var(--space-6);
}

.reports-tab {
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-cream-600);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

.reports-tab:hover {
    color: var(--color-navy-700);
}

.reports-tab--active {
    color: var(--color-navy-900);
    border-bottom-color: var(--color-navy-700);
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.report-card {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all var(--transition-fast);
}

.report-card:hover {
    border-color: var(--color-cream-400);
    box-shadow: var(--shadow-md);
}

.report-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.report-card__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-2);
}

.report-card__desc {
    font-size: 0.875rem;
    color: var(--color-cream-600);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}

.report-card__formats {
    display: flex;
    gap: var(--space-2);
}

.format-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-2);
    background: var(--color-cream-200);
    border-radius: var(--radius-sm);
    color: var(--color-cream-700);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.format-badge:hover {
    background: var(--color-cream-300);
}

.format-badge--active {
    background: var(--color-navy-100);
    color: var(--color-navy-700);
    border-color: var(--color-navy-400);
}

/* Toast notifications */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-3);
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
}

.toast--processing { border-left: 3px solid var(--color-terra-500); }
.toast--completed  { border-left: 3px solid var(--color-success-600); }
.toast--error      { border-left: 3px solid var(--color-danger-600); }

.toast__body {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

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

.toast__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-navy-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast__detail {
    font-size: 0.75rem;
    color: var(--color-cream-600);
}

.toast__icon { flex-shrink: 0; }
.toast__icon--success { color: var(--color-success-600); }
.toast__icon--error   { color: var(--color-danger-600); }

.toast__action {
    flex-shrink: 0;
    background: var(--color-navy-100);
    border: 1px solid var(--color-navy-300);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-navy-700);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
}

.toast__action:hover {
    background: var(--color-navy-200);
}

.toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.125rem;
    color: var(--color-cream-500);
    cursor: pointer;
    padding: 0 var(--space-1);
    line-height: 1;
}

.toast__close:hover { color: var(--color-cream-700); }

.toast__spinner {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--color-cream-300);
    border-top-color: var(--color-terra-500);
    border-radius: 50%;
    animation: toast-spin 0.7s linear infinite;
}

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

/* Transitions */
.toast-enter       { transition: all 0.3s ease; }
.toast-enter-start { opacity: 0; transform: translateX(40px); }
.toast-enter-end   { opacity: 1; transform: translateX(0); }
.toast-leave       { transition: all 0.2s ease; }
.toast-leave-start { opacity: 1; transform: translateX(0); }
.toast-leave-end   { opacity: 0; transform: translateX(40px); }

/* Reports table */
.reports-table {
    width: 100%;
    border-collapse: collapse;
}

.reports-table th,
.reports-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-cream-200);
}

.reports-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cream-600);
}

.report-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 500;
}

.status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge--success {
    background: var(--color-success-100);
    color: var(--color-success-600);
}

.status-badge--warning {
    background: var(--color-warning-100);
    color: var(--color-warning-600);
}

.status-badge--error {
    background: var(--color-danger-100);
    color: var(--color-danger-600);
}

/* ============================================
   DASHBOARD PARTIALS: ATP — _atp_resumen
   Hero KPI strip, meta strip, pendientes list,
   section heads, funnel del ciclo, chart cards,
   y disclosures de tablas (Resumen v2).
   ============================================ */

/* Hero indicators (Resumen v3): 4 KPIs con cap + valor + delta + sparkline
   + foot. Cards cream-50 sin top-bar; variante --alert resalta con borde
   superior terra para el indicador de riesgo. */
.atp-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
}
@media (max-width: 1024px) { .atp-hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .atp-hero { grid-template-columns: 1fr; } }

.atp-hero__card {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem 0.95rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 170px;
}
/* Variante compacta — sin sparkline (el chart "Visitas en el tiempo" de
   abajo ya muestra la serie temporal); conserva el foot para indicar el
   período/contexto de cada KPI. */
.atp-hero--compact .atp-hero__card {
    min-height: 0;
    padding: 0.75rem 1rem 0.85rem;
    gap: 0.25rem;
}
.atp-hero--compact .atp-hero__value {
    font-size: 1.95rem;
}
.atp-hero__card--alert {
    border-top: 2px solid var(--color-terra-600);
    padding-top: calc(1rem - 1px);
}

.atp-hero__cap {
    font-size: 0.62rem;
    color: var(--color-cream-700);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.atp-hero__card--alert .atp-hero__cap { color: var(--color-terra-700); }

.atp-hero__row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.15rem;
}
.atp-hero__value {
    font-family: var(--font-display);
    font-size: 2.65rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.atp-hero__unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-cream-700);
    line-height: 1;
}

.atp-hero__delta {
    font-size: 0.74rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--color-cream-700);
}
.atp-hero__delta--up   { color: var(--color-success-700); }
.atp-hero__delta--down { color: var(--color-danger-700); }
.atp-hero__delta--flat { color: var(--color-cream-700); }
.atp-hero__card--alert .atp-hero__delta--up   { color: var(--color-danger-700); }
.atp-hero__card--alert .atp-hero__delta--down { color: var(--color-success-700); }

.atp-hero__spark {
    width: 100%;
    height: 34px;
    margin-top: auto;
    display: block;
}
.atp-hero__spark--empty {
    height: 34px;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--color-cream-200),
            var(--color-cream-200) 5px,
            transparent 5px,
            transparent 10px
        );
    border-radius: 4px;
    opacity: 0.5;
}
.atp-hero__spark-fill { fill: rgba(45, 90, 143, 0.10); stroke: none; }
.atp-hero__spark-line { fill: none; stroke: var(--color-navy-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.atp-hero__spark--terra .atp-hero__spark-fill { fill: rgba(196, 90, 59, 0.12); }
.atp-hero__spark--terra .atp-hero__spark-line { stroke: var(--color-terra-600); }

.atp-hero__foot {
    font-size: 0.7rem;
    color: var(--color-cream-700);
    line-height: 1.3;
}

/* ─── Clusters secundarios ─────────────────────────────────────────── */
.atp-clusters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    align-items: start;
}
@media (max-width: 900px) { .atp-clusters { grid-template-columns: 1fr; } }

/* Columna derecha del bloque clusters — apila los charts secundarios del
   Reporte Diagnóstico (Identificación, Dimensiones, Priorización, Capacidad). */
.atp-clusters__col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.atp-cluster {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
}
.atp-cluster__title {
    margin: 0 0 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-navy-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.atp-cluster__title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-terra-500);
    display: inline-block;
}
.atp-cluster--foco .atp-cluster__title::before { background: var(--color-terra-400); }

.atp-cluster__row {
    display: grid;
    grid-template-columns: 1fr 80px auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-top: 1px solid var(--color-cream-200);
}
.atp-cluster__row:first-of-type { border-top: 0; }

.atp-cluster__label {
    font-size: 0.84rem;
    color: var(--color-cream-700);
    line-height: 1.3;
}
.atp-cluster__track {
    height: 6px;
    background: var(--color-cream-200);
    border-radius: 999px;
    overflow: hidden;
}
.atp-cluster__track > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-navy-700);
}
.atp-cluster__track--terra > i { background: var(--color-terra-600); }
.atp-cluster__track--success > i { background: var(--color-success-700); }

.atp-cluster__value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.atp-cluster__value small {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-cream-700);
    margin-left: 0.18rem;
}
.atp-cluster__value--muted { color: var(--color-cream-600); }

/* Subdimensiones movilizadas: cada dimensión es un grupo (header + barlist)
   apilado en el cluster. Permite leer las 13 subdimensiones agrupadas por
   familia con barras visualmente comparables. */
.atp-subdim__group + .atp-subdim__group {
    margin-top: 0.7rem;
    border-top: 1px solid var(--color-cream-200);
    padding-top: 0.7rem;
}
.atp-subdim__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.atp-subdim__group-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-navy-900);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.atp-subdim__group-total {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}

/* Featured-stat cluster — título a la izquierda + % grande a la derecha en la
   misma fila, con 3 chips de breakdown debajo. Usado por los charts
   "Identificación de la práctica problemática" y "Priorización de capacidad
   basal" donde el read principal es "qué tan cerca estamos del 100%". */
.atp-stat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}
.atp-cluster--stat .atp-cluster__title { margin: 0; flex: 1; min-width: 0; }
.atp-stat__hero {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.atp-stat__value {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
}
.atp-stat__unit {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-cream-700);
    line-height: 1;
}
.atp-stat__chips {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.atp-stat__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    background: var(--color-cream-100);
    border: 1px solid var(--color-cream-200);
    font-size: 0.78rem;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.atp-stat__chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-cream-500);
    flex-shrink: 0;
}
.atp-stat__chip-label { color: var(--color-cream-700); }
.atp-stat__chip-count { font-weight: 600; }
.atp-stat__chip--success .atp-stat__chip-dot { background: var(--color-success-600); }
.atp-stat__chip--navy    .atp-stat__chip-dot { background: var(--color-navy-700); }
.atp-stat__chip--muted   .atp-stat__chip-dot { background: var(--color-cream-400); }
.atp-stat__chip--off {
    opacity: 0.55;
}

/* Ranked list (Capacidad basal a movilizar) — index numerado + label + barra
   sutil de magnitud + count. Look "top-N" tipo Linear/Spotify, sin densidad
   de tabla. */
.atp-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.atp-rank__row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1.2fr) minmax(60px, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}
.atp-rank__index {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-cream-600);
    font-variant-numeric: tabular-nums;
}
.atp-rank__label {
    font-size: 0.85rem;
    color: var(--color-navy-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atp-rank__track {
    height: 4px;
    background: var(--color-cream-200);
    border-radius: 999px;
    overflow: hidden;
}
.atp-rank__track > i {
    display: block;
    height: 100%;
    background: var(--color-navy-700);
    border-radius: 999px;
}
.atp-rank__count {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}

/* ─── Bandeja personal (foot strip de compromisos) ─────────────────── */
.atp-bandeja {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: 0.7rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--color-cream-700);
}
.atp-bandeja__lead strong {
    color: var(--color-navy-900);
    font-weight: 600;
}
.atp-bandeja__sep {
    width: 1px;
    height: 16px;
    background: var(--color-cream-300);
}
.atp-bandeja__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--color-cream-300);
    color: var(--color-cream-700);
}
.atp-bandeja__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.atp-bandeja__chip--overdue { color: var(--color-danger-700); }
.atp-bandeja__chip--urgent  { color: var(--color-warning-700); }
.atp-bandeja__chip--ok      { color: var(--color-success-700); }
.atp-bandeja__link {
    margin-left: auto;
    font-size: 0.84rem;
    color: var(--color-terra-700);
    font-weight: 500;
    text-decoration: none;
}
.atp-bandeja__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .atp-bandeja__link { margin-left: 0; width: 100%; padding-top: 0.4rem; border-top: 1px solid var(--color-cream-200); }
}

/* ─── Card unificada — usada por la card del Recorrido del ciclo
   en el tab Resumen. Fondo cream-50 sin top-stripe para integrarse
   visualmente con hero/clusters/bandeja del mismo color. ─────────── */
.atp-card {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem 1.2rem;
    position: relative;
    overflow: hidden;
}

.atp-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.atp-card__head-text { min-width: 0; }
.atp-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
    margin: 0;
}
.atp-card__sub {
    font-size: 0.78rem;
    color: var(--color-cream-700);
    line-height: 1.4;
    margin: 0.18rem 0 0;
}
.atp-card__meta {
    font-size: 0.72rem;
    color: var(--color-cream-700);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.2rem;
}

/* Recorrido del ciclo (funnel horizontal proporcional) */
.atp-funnel__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
}
.atp-funnel__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 0.45rem;
}
.atp-funnel__step + .atp-funnel__step::before {
    content: "›";
    position: absolute;
    left: -0.55rem;
    top: 0.5rem;
    color: var(--color-cream-300);
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 300;
}
.atp-funnel__label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--color-cream-700);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.2;
    min-height: 1.8em;
}
.atp-funnel__dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--stage-color, var(--color-navy-700));
    flex-shrink: 0;
}
.atp-funnel__count {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.atp-funnel__bar {
    height: 6px;
    background: var(--color-cream-200);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.15rem;
}
.atp-funnel__bar-fill {
    height: 100%;
    background: var(--stage-color, var(--color-navy-700));
    border-radius: inherit;
    opacity: 0.85;
    transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.atp-funnel__share {
    font-size: 0.6rem;
    color: var(--color-cream-700);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .atp-funnel__grid { grid-template-columns: 1fr 1fr; }
    .atp-funnel__step + .atp-funnel__step::before { display: none; }
}

/* ─── Análisis (Resumen ATP): grilla 3-col de 5 charts ──────────────
   Fila 1: línea temporal (span 2) + Visitas por EE.
   Fila 2: Visitas por ATP + Temas frecuentes + Donut Estado EE.
   Reutiliza paleta navy/terra/cream + tonos semánticos solo en donut. */
.atp-analytics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}
@media (max-width: 1024px) { .atp-analytics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .atp-analytics { grid-template-columns: 1fr; } }

.atp-chart {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}
.atp-chart--wide { grid-column: span 2; }
@media (max-width: 640px) { .atp-chart--wide { grid-column: span 1; } }

.atp-chart__head { margin: 0; }
.atp-chart__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-navy-900);
    margin: 0;
    line-height: 1.2;
}
.atp-chart__sub {
    font-size: 0.72rem;
    color: var(--color-cream-700);
    margin: 0.18rem 0 0;
    line-height: 1.3;
}
.atp-chart__empty {
    font-size: 0.78rem;
    color: var(--color-cream-600);
    text-align: center;
    margin: 1rem 0 0.5rem;
}

/* Line chart "Visitas en el tiempo" */
.atp-chart__plot { display: flex; flex-direction: column; gap: 0.35rem; }
/* Variante con ejes: gutter Y a la izquierda + columna de plot */
.atp-chart__plot--axes { flex-direction: row; gap: 0.4rem; }
.atp-chart__plotcol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.atp-chart__yaxis {
    position: relative;
    width: 1.6rem;
    height: 130px;
    flex-shrink: 0;
    font-size: 0.62rem;
    color: var(--color-cream-600);
    font-variant-numeric: tabular-nums;
}
.atp-chart__ytick {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    line-height: 1;
}
.atp-chart__svg-wrap {
    position: relative;
    width: 100%;
    height: 130px;
}
.atp-chart__svg-line {
    width: 100%;
    height: 100%;
    display: block;
}
.atp-chart__gridline {
    stroke: var(--color-cream-300, rgba(35, 72, 118, 0.12));
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.atp-chart__line-fill { fill: rgba(35, 72, 118, 0.12); stroke: none; }
.atp-chart__line {
    fill: none;
    stroke: var(--color-navy-700);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
/* Línea horizontal de promedio */
.atp-chart__avg-line {
    stroke: var(--color-navy-400);
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}
.atp-chart__avg-label {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    margin-top: -0.55rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--color-navy-500);
    background: var(--color-cream-50);
    padding: 0 0.25rem;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
/* Overlay de puntos con hover (tooltip via [data-tooltip]) */
.atp-chart__points {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.atp-chart__point {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    outline: none;
    z-index: 2;
}
.atp-chart__point-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--color-cream-50);
    border: 2px solid var(--color-navy-700);
    box-shadow: 0 1px 3px rgba(15, 35, 66, 0.25);
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.atp-chart__point:hover .atp-chart__point-dot,
.atp-chart__point:focus-visible .atp-chart__point-dot {
    transform: scale(1.35);
    background: var(--color-terra-600);
    border-color: var(--color-terra-700);
}
/* Edge tooltips: keep first/last point's tooltip inside the plot area */
.atp-chart__point:first-child[data-tooltip]:hover::after,
.atp-chart__point:first-child[data-tooltip]:focus-visible::after,
.atp-chart__point:first-child[data-tooltip]:hover::before,
.atp-chart__point:first-child[data-tooltip]:focus-visible::before {
    left: 0;
    transform: translateX(0);
}
.atp-chart__point:last-child[data-tooltip]:hover::after,
.atp-chart__point:last-child[data-tooltip]:focus-visible::after,
.atp-chart__point:last-child[data-tooltip]:hover::before,
.atp-chart__point:last-child[data-tooltip]:focus-visible::before {
    left: auto;
    right: 0;
    transform: translateX(0);
}
.atp-chart__xlabels {
    position: relative;
    height: 0.9rem;
    margin: 0;
    padding: 0;
    font-size: 0.66rem;
    color: var(--color-cream-700);
    font-variant-numeric: tabular-nums;
}
/* Cada etiqueta se ancla al x_pct de su punto en la línea */
.atp-chart__xlabel {
    position: absolute;
    top: 0;
    white-space: nowrap;
    transform: translateX(-50%);
}
.atp-chart__xlabel--start { transform: translateX(0); }
.atp-chart__xlabel--end { transform: translateX(-100%); }

/* Barlist horizontal (Visitas por EE / ATP / Temas) */
.atp-barlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* Wrapper scrollable — usado por ATP y Temas para mostrar la lista completa
   sin reventar la altura de la fila. Borde inferior sutil sugiere que hay
   más contenido si la lista desborda. */
.atp-barlist__scroll {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-right: -0.35rem;
}
.atp-barlist__scroll::-webkit-scrollbar { width: 6px; }
.atp-barlist__scroll::-webkit-scrollbar-track { background: transparent; }
.atp-barlist__scroll::-webkit-scrollbar-thumb {
    background: var(--color-cream-300);
    border-radius: 999px;
}
.atp-barlist__scroll::-webkit-scrollbar-thumb:hover { background: var(--color-cream-400); }
.atp-barlist__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-cream-300) transparent;
}
.atp-barlist__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 32px;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
}
.atp-barlist__label {
    color: var(--color-navy-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.atp-barlist__track {
    height: 8px;
    background: var(--color-cream-200);
    border-radius: 999px;
    overflow: hidden;
}
.atp-barlist__track > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-navy-700);
}
.atp-barlist__value {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-navy-900);
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* Barra de cumplimiento: color por umbral (alto/medio/bajo). */
.atp-barlist__track--goal[data-pct="high"] > i { background: var(--color-success-600, #16a34a); }
.atp-barlist__track--goal[data-pct="mid"] > i { background: var(--color-warning-500, #d97706); }
.atp-barlist__track--goal[data-pct="low"] > i { background: var(--color-terra-600, #c2410c); }
/* Fila meta: más espacio al valor (X/Y · Z%) y nombre en dos líneas con hint. */
.atp-barlist__row--goal { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) auto; }
.atp-barlist__row--goal .atp-barlist__label { white-space: normal; overflow: visible; }
.atp-barlist__row--goal .atp-barlist__value { font-size: 0.82rem; white-space: nowrap; }
.atp-barlist__hint {
    display: block;
    font-size: 0.62rem;
    color: var(--color-cream-600);
    font-weight: 500;
    white-space: nowrap;
    margin-top: 1px;
}

/* Donut "Estado de Establecimientos" */
.atp-donut {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}
@media (max-width: 380px) {
    .atp-donut { grid-template-columns: 1fr; justify-items: center; }
}
.atp-donut__svg {
    width: 140px;
    height: 140px;
    display: block;
}
.atp-donut__track {
    fill: none;
    stroke: var(--color-cream-200);
    stroke-width: 13;
}
.atp-donut__seg {
    fill: none;
    stroke-width: 13;
    transition: opacity var(--transition-base);
}
.atp-donut__seg--success { stroke: var(--color-success-600); }
.atp-donut__seg--navy    { stroke: var(--color-navy-700); }
.atp-donut__seg--warning { stroke: var(--color-warning-600); }
.atp-donut__seg--danger  { stroke: var(--color-danger-600); }
.atp-donut__seg--muted   { stroke: var(--color-cream-400); }

.atp-donut__center {
    fill: var(--color-navy-900);
    font-family: var(--font-display);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
.atp-donut__center-lbl {
    fill: var(--color-cream-700);
    font-size: 7px;
    font-family: var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.atp-donut__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.76rem;
    color: var(--color-cream-700);
}
.atp-donut__legend li { display: flex; align-items: center; gap: 0.45rem; line-height: 1.25; }
.atp-donut__legend strong {
    color: var(--color-navy-900);
    font-weight: 600;
    margin-left: 0.15rem;
}
.atp-donut__legend-item--off { opacity: 0.55; }
.atp-donut__legend-item--off .atp-donut__dot { opacity: 0.55; }
.atp-donut__legend-item--off strong { color: var(--color-cream-700); }
.atp-donut__dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}
.atp-donut__dot--success { background: var(--color-success-600); }
.atp-donut__dot--navy    { background: var(--color-navy-700); }
.atp-donut__dot--warning { background: var(--color-warning-600); }
.atp-donut__dot--danger  { background: var(--color-danger-600); }
.atp-donut__dot--muted   { background: var(--color-cream-400); }

/* ============================================
   DASHBOARD PARTIALS: ATP stage body
   Stepper del ciclo formativo, prev/next nav,
   tabla sesiones por EE, cards de acompañamientos.
   ============================================ */

.stage-stepper-wrap {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.stage-stepper-wrap::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--active-stage-color, var(--color-navy-700));
    opacity: 0.9;
}

.stage-stepper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0.95rem 0.4rem 0.55rem;
}
.stage-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.18rem;
    padding: 0 0.35rem;
    text-decoration: none;
    color: inherit;
    --connector-color: var(--color-cream-300);
}
.stage-step--past { --connector-color: var(--stage-color); }

.stage-step__dot-row {
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.stage-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 23px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--connector-color);
    opacity: 0.55;
    z-index: 0;
}
.stage-step--current:not(:last-child)::after {
    left: calc(50% + 22px);
    background: linear-gradient(90deg, var(--stage-color) 0%, var(--color-cream-300) 90%);
    opacity: 0.7;
}

.stage-step__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--color-cream-300);
    color: var(--color-cream-700);
    font-family: var(--font-display);
    font-size: 0.78rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    transition: transform 200ms, box-shadow 200ms;
    flex-shrink: 0;
}
.stage-step--past .stage-step__dot {
    background: var(--stage-color);
    border-color: var(--stage-color);
    color: white;
}
.stage-step--current .stage-step__dot {
    background: var(--stage-color);
    border-color: var(--stage-color);
    color: white;
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage-color) 16%, transparent);
}
.stage-step:hover:not(.stage-step--current) .stage-step__dot {
    transform: translateY(-1px);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-navy-900) 18%, transparent);
}
.stage-step:focus-visible {
    outline: none;
}
.stage-step:focus-visible .stage-step__dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 35%, transparent);
}

.stage-step__label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-cream-700);
    line-height: 1.2;
    margin-top: 0.25rem;
    text-align: center;
    width: 100%;
}
.stage-step--current .stage-step__label { color: var(--color-navy-900); }
.stage-step__count {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    width: 100%;
}
.stage-step--current .stage-step__count { font-size: 1.15rem; }
.stage-step--future .stage-step__count { color: var(--color-cream-700); }

/* Active detail strip dentro del card del stepper */
.stage-detail {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.1rem;
    align-items: center;
    padding: 0.7rem 0.95rem 0.8rem;
    border-top: 1px dashed var(--color-cream-200);
    background: linear-gradient(0deg, var(--color-cream-50) 0%, transparent 100%);
}
.stage-detail__text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-cream-800);
    border-left: 4px solid var(--active-stage-color, var(--color-navy-700));
    padding-left: 0.7rem;
    margin: 0;
}
.stage-detail__text strong {
    color: var(--color-navy-900);
    font-weight: 700;
}
.stage-detail__chips {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.stage-detail__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: white;
    border: 1px solid var(--color-cream-200);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stage-detail__chip-value {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-navy-900);
    font-weight: 700;
    line-height: 1;
}
.stage-detail__chip-label {
    font-size: 0.68rem;
    color: var(--color-cream-700);
    font-weight: 600;
}

/* Prev / Next sutil */
.stage-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border-top: 1px solid var(--color-cream-200);
    background: var(--color-cream-50);
    font-size: 0.68rem;
}
.stage-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-navy-700);
    text-decoration: none;
    font-weight: 600;
    padding: 0.15rem 0.05rem;
    transition: color 150ms;
}
.stage-nav__link:hover { color: var(--color-navy-900); }
.stage-nav__link--disabled {
    color: var(--color-cream-700);
    cursor: default;
    opacity: 0.55;
    pointer-events: none;
}

@media (max-width: 720px) {
    .stage-stepper { padding: 0.7rem 0.2rem 0.4rem; }
    .stage-step { padding: 0 0.15rem; }
    .stage-step__dot-row { height: 42px; }
    .stage-step:not(:last-child)::after { top: 21px; }
    .stage-step__label { font-size: 0.56rem; }
    .stage-step__count { font-size: 0.85rem; }
    .stage-step--current .stage-step__count { font-size: 1rem; }
    .stage-detail { grid-template-columns: 1fr; gap: 0.55rem; }
    .stage-detail__chips { justify-content: flex-start; }
}

/* Section heading editorial (compartido con resumen) */
.atp-section-head-stage {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.2rem 0.1rem 0.05rem;
}
.atp-section-head-stage__title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    line-height: 1.15;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
    margin: 0;
}
.atp-section-head-stage__meta {
    font-size: 0.62rem;
    color: var(--color-cream-700);
    font-weight: 500;
}

/* Tabla sesiones por EE (queda como tabla, más sobria) */
.atp-stage-table-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.atp-stage-table-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-800), var(--color-navy-400) 60%, transparent);
    opacity: 0.45;
}

/* Tabla de acompañamientos (Foco y logro) — estilos puntuales */
.atp-acomp-table .atp-acomp-row__ee {
    font-weight: 700;
    color: var(--color-navy-900);
    line-height: 1.25;
}
.atp-acomp-table .atp-acomp-row__profesional {
    font-size: 0.66rem;
    color: var(--color-cream-700);
    margin-top: 0.1rem;
}
.atp-acomp-table .atp-acomp-row__periodicidad {
    display: inline-block;
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-navy-700);
    background: var(--color-cream-100);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}
.atp-acomp-table .atp-acomp-row__practica {
    color: var(--color-navy-900);
    line-height: 1.45;
    min-width: 220px;
}
.atp-acomp-table .atp-acomp-row__capacidad {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-navy-800);
    font-weight: 600;
    white-space: nowrap;
}
.atp-acomp-table .atp-acomp-row__capacidad-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--active-stage-color, var(--color-navy-700));
    flex-shrink: 0;
}

.atp-acomp-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.atp-acomp-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--active-stage-color, var(--color-navy-700));
    opacity: 0.7;
}

.atp-acomp-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.atp-acomp-card__head-text { min-width: 0; }
.atp-acomp-card__title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    line-height: 1.2;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
    margin: 0;
}
.atp-acomp-card__profesional {
    font-size: 0.66rem;
    color: var(--color-cream-700);
    margin-top: 0.1rem;
}
.atp-acomp-card__periodicidad {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-navy-700);
    background: var(--color-cream-100);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.atp-acomp-card__section-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-cream-700);
    font-weight: 700;
    margin-bottom: 0.18rem;
    display: block;
}
.atp-acomp-card__practica {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--color-navy-900);
    margin: 0;
}

.atp-acomp-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px dashed var(--color-cream-200);
    padding-top: 0.5rem;
    margin-top: auto;
}
.atp-acomp-card__capacidad {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--color-navy-800);
    font-weight: 600;
}
.atp-acomp-card__capacidad-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--active-stage-color, var(--color-navy-700));
}

.atp-acomp-empty {
    grid-column: 1 / -1;
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.8rem;
    background: var(--color-cream-50);
    border: 1px dashed var(--color-cream-300);
    border-radius: var(--radius-md);
}

/* Centro de celda colspan (footer "no hay sesiones") */
.atp-stage-empty-cell {
    text-align: center;
    padding: 1.2rem;
    color: var(--color-cream-700);
}

/* Centro de header de tabla, share with resumen */
.atp-th-center { text-align: center; }

/* ============================================
   DASHBOARD PARTIALS: ATP — _atp_establecimientos
   Filtros, summary, view toggle, grid de cards
   y lista densa de establecimientos.
   ============================================ */

.atp-est-search {
    width: 100%;
    padding: 0.45rem 0.95rem;
    font-size: 0.78rem;
    border: 1px solid var(--color-cream-300);
    border-radius: 999px;
    background: white;
    color: var(--color-navy-900);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.atp-est-search::placeholder { color: var(--color-cream-700); }
.atp-est-search:focus {
    outline: none;
    border-color: var(--color-terra-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-terra-500) 15%, transparent);
}

.atp-est-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.1rem;
}
.atp-est-summary__left {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.atp-est-summary__right { flex-shrink: 0; }
.atp-est-summary__total {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-navy-900);
    font-weight: 700;
}
.atp-est-summary__total-of {
    font-weight: 500;
    color: var(--color-cream-700);
    font-size: 0.78rem;
}
.atp-est-summary__breakdown {
    font-size: 0.72rem;
    color: var(--color-cream-700);
}
.atp-est-summary__sep { margin: 0 0.35rem; color: var(--color-cream-400); }
.atp-est-summary__count-support { color: var(--color-terra-700); }
.atp-est-summary__count-warn    { color: var(--color-warning-700); }
.atp-est-summary__count-ok      { color: var(--color-success-700); }

/* View toggle (cards / list) */
.atp-est-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-cream-300);
    border-radius: 0.4rem;
    overflow: hidden;
    background: white;
}
.atp-est-view-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.atp-est-view-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.7rem;
    color: var(--color-cream-700);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    user-select: none;
    line-height: 1;
}
.atp-est-view-toggle label svg { width: 13px; height: 13px; }
.atp-est-view-toggle label + label { border-left: 1px solid var(--color-cream-300); }
.atp-est-view-toggle label:hover { background: var(--color-cream-50); color: var(--color-navy-800); }
.atp-est-view-toggle input:checked + label,
.atp-est-view-toggle label.is-active {
    background: var(--color-navy-800);
    color: white;
}
.atp-est-view-toggle input:focus-visible + label {
    outline: 2px solid var(--color-navy-700);
    outline-offset: 2px;
}

/* Grid de cards de establecimientos */
.atp-est-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.6rem;
}
.atp-est-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.atp-est-card:focus-visible {
    outline: 2px solid var(--color-navy-700);
    outline-offset: 2px;
}
.atp-est-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--card-accent, var(--color-navy-700));
    opacity: 0.85;
}
.atp-est-card:hover {
    border-color: var(--color-navy-700);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-navy-900) 8%, transparent);
    transform: translateY(-1px);
}
.atp-est-card--support { --card-accent: var(--color-terra-600); }
.atp-est-card--warn    { --card-accent: var(--color-warning-600); }
.atp-est-card--ok      { --card-accent: var(--color-success-600); }

.atp-est-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.atp-est-card__title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    line-height: 1.2;
    color: var(--color-navy-900);
    font-weight: 700;
    min-width: 0;
}
.atp-est-card__title-icon {
    color: var(--color-navy-700);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.atp-est-card__title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atp-est-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.atp-est-pill--ok      { background: var(--color-success-100); color: var(--color-success-700); }
.atp-est-pill--warn    { background: var(--color-warning-100); color: var(--color-warning-700); }
.atp-est-pill--support { background: var(--color-terra-100); color: var(--color-terra-800); }

.atp-est-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    font-size: 0.72rem;
    color: var(--color-cream-800);
}
.atp-est-card__meta-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.3;
}
.atp-est-card__meta-row svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--color-cream-700);
}
.atp-est-card__meta-row--alerts { color: var(--color-navy-900); }
.atp-est-card__meta-row--alerts.has-alerts { color: var(--color-terra-800); font-weight: 600; }
.atp-est-card__meta-visit-date { color: var(--color-navy-900); font-weight: 600; }

.atp-est-card__footer {
    border-top: 1px dashed var(--color-cream-300);
    padding-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--color-cream-700);
}
.atp-est-card__footer strong {
    color: var(--color-navy-900);
    font-weight: 600;
}

.atp-est-empty {
    padding: 2rem 0.5rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.78rem;
    border: 1px dashed var(--color-cream-300);
    border-radius: var(--radius-md);
    background: var(--color-cream-50);
}

/* List view (tabla densa) */
.atp-est-list-scroll {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    background: white;
}
.atp-est-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}
.atp-est-list thead th {
    padding: 0.45rem 0.6rem;
    background: var(--color-cream-100);
    color: var(--color-navy-800);
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--color-cream-300);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.atp-est-list tbody td {
    padding: 0.45rem 0.6rem;
    color: var(--color-navy-900);
    border-bottom: 1px solid var(--color-cream-200);
    vertical-align: middle;
    line-height: 1.35;
}
.atp-est-list tbody tr {
    cursor: pointer;
    transition: background 120ms;
}
.atp-est-list tbody tr:hover td { background: var(--color-cream-50); }
.atp-est-list tbody tr:focus-visible {
    outline: 2px solid var(--color-navy-700);
    outline-offset: -2px;
}
.atp-est-list tbody tr:last-child td { border-bottom: none; }
.atp-est-list__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 220px;
}
.atp-est-list__name svg {
    width: 14px; height: 14px;
    color: var(--color-navy-700);
    flex-shrink: 0;
}
.atp-est-list__name-text {
    font-weight: 600;
    color: var(--color-navy-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.atp-est-list__rbd {
    font-variant-numeric: tabular-nums;
    color: var(--color-cream-700);
    font-size: 0.7rem;
}
.atp-est-list__num {
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}
.atp-est-list__num--alerts.has-alerts {
    color: var(--color-terra-800);
    font-weight: 700;
}
.atp-est-list__muted { color: var(--color-cream-700); }

/* ── Selección masiva ──────────────────────────────────────────────── */
.atp-est-check {
    width: 16px;
    height: 16px;
    accent-color: var(--color-navy-700);
    cursor: pointer;
}
.atp-est-check-cell {
    width: 2.5rem;
    text-align: center;
    padding: 0 var(--space-2);
}

.atp-est-bulkbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.4rem 0.9rem;
    background: var(--color-navy-900);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    flex-wrap: wrap;
}
.atp-est-bulkbar__count { font-size: 0.82rem; }
.atp-est-bulkbar__count strong { font-size: 0.95rem; }
.atp-est-bulkbar__hint { color: var(--color-cream-300); font-weight: 400; }
.atp-est-bulkbar__actions { display: flex; gap: var(--space-2); }
.atp-est-bulkbar .btn { padding-top: 0.3rem; padding-bottom: 0.3rem; }

/* Wrapper sobre el picker deshabilitado: ancla el tooltip explicativo. */
.atp-est-picker-blocked {
    display: block;
    cursor: not-allowed;
}

.atp-est-bulk-conflicts {
    font-size: 0.8rem;
    color: var(--color-navy-900);
    background: var(--color-warning-50, #fffbeb);
    border: 1px solid var(--color-warning-200, #fde68a);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}
.atp-est-bulk-conflicts__list {
    margin: var(--space-1) 0 0;
    padding-left: 1.1rem;
    max-height: 160px;
    overflow-y: auto;
    list-style: disc;
}
.atp-est-bulk-conflicts__list li { margin-bottom: 0.15rem; }

@media (max-width: 640px) {
    .atp-est-grid { grid-template-columns: 1fr; }
}

/* ============================================
   DASHBOARD PARTIALS: ATP establecimiento modal
   Backdrop, modal frame, KPIs, identification +
   gestión cards, definition lists, placeholder.
   ============================================ */

.atp-est-modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-navy-950) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(2px);
}
.atp-est-modal {
    background: var(--color-cream-50);
    border-radius: var(--radius-xl, 12px);
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px color-mix(in srgb, var(--color-navy-950) 35%, transparent);
    position: relative;
}
.atp-est-modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-navy-700), var(--color-navy-400) 60%, transparent);
    opacity: 0.85;
}

/* Head */
.atp-est-modal__head {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-shrink: 0;
}
.atp-est-modal__title-block { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.atp-est-modal__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--color-navy-900);
    letter-spacing: -0.005em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.atp-est-modal__title-icon { width: 18px; height: 18px; color: var(--color-navy-700); flex-shrink: 0; }
.atp-est-modal__subtitle {
    font-size: 0.72rem;
    color: var(--color-cream-700);
    margin: 0;
    line-height: 1.4;
}
.atp-est-modal__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.atp-est-modal__pill--ok      { background: var(--color-success-100); color: var(--color-success-700); }
.atp-est-modal__pill--warn    { background: var(--color-warning-100); color: var(--color-warning-700); }
.atp-est-modal__pill--support { background: var(--color-terra-100); color: var(--color-terra-800); }
.atp-est-modal__close {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 0.35rem;
    color: var(--color-cream-700);
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms, color 150ms;
    flex-shrink: 0;
}
.atp-est-modal__close:hover { background: var(--color-cream-200); color: var(--color-navy-800); }

/* Body scrolleable */
.atp-est-modal__body {
    padding: 0.7rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0; /* permite que flex achique el body para que overflow-y entre en acción */
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Los hijos directos del body NO deben achicarse: deben crecer a su altura
   natural para que el scroll del body sea el que entre en juego. Sin esto,
   los cards (que tienen overflow:hidden) clippean su propio contenido. */
.atp-est-modal__body > * {
    flex-shrink: 0;
}

/* KPIs */
.atp-est-modal__kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.atp-est-modal__kpi {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    overflow: hidden;
}
.atp-est-modal__kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--kpi-accent, var(--color-navy-700));
    opacity: 0.85;
}
.atp-est-modal__kpi-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-cream-700);
    font-weight: 700;
}
.atp-est-modal__kpi-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.atp-est-modal__kpi-value--muted { color: var(--color-cream-700); }
.atp-est-modal__kpi-value--small { font-size: 0.95rem; line-height: 1.2; }

/* Grid 2-col */
.atp-est-modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.atp-est-modal__card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.atp-est-modal__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-navy-700), var(--color-navy-400) 60%, transparent);
    opacity: 0.6;
}
.atp-est-modal__card-header {
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--color-cream-200);
}
.atp-est-modal__card-title {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--color-navy-800);
    margin: 0;
}
.atp-est-modal__card-body { padding: 0.55rem 0.7rem; }

/* Definition list */
.atp-est-modal__dl {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 0.4rem 0.7rem;
    font-size: 0.74rem;
    margin: 0;
}
.atp-est-modal__dl dt {
    color: var(--color-cream-700);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.atp-est-modal__dl dd { margin: 0; color: var(--color-navy-900); line-height: 1.4; }
.atp-est-modal__dl-muted { color: var(--color-cream-700); }
.atp-est-modal__dl dd a { color: var(--color-navy-700); text-decoration: underline; word-break: break-all; }

/* Modal: párrafo de prosa (hallazgos / dificultades / acuerdos) — mismo
   tamaño que los <dd> del dl para mantener consistencia visual. */
.pa-modal__prose {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 0.74rem;
    line-height: 1.4;
}

.atp-est-modal__placeholder-wrap { margin-top: 0.7rem; }
.atp-est-modal__placeholder-title { margin-bottom: 0.3rem; }
.atp-est-modal__placeholder {
    padding: 1.2rem 0.5rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.74rem;
    border: 1px dashed var(--color-cream-300);
    border-radius: var(--radius-md, 8px);
    background: var(--color-cream-50);
}
.atp-est-modal__placeholder small {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-cream-600);
    font-size: 0.66rem;
}

/* Plan de acompañamiento card — ancho completo bajo el grid de 2 cols */
.atp-est-modal__card--full {
    margin-top: 0.7rem;
}
.atp-est-modal__card--full .atp-est-modal__dl {
    grid-template-columns: minmax(180px, max-content) 1fr;
}
.atp-est-modal__card-meta {
    margin-left: 0.5rem;
    font-weight: 500;
    color: var(--color-cream-700);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.66rem;
}

/* Tabs por etapa dentro del modal */
.atp-plan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.7rem 0;
    border-bottom: 1px solid var(--color-cream-200);
    background: var(--color-cream-100);
}
.atp-plan-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.55rem 0.9rem;
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-cream-700);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.atp-plan-tab:hover {
    color: var(--color-navy-800);
    background: var(--color-cream-50);
}
.atp-plan-tab--active {
    color: var(--color-navy-900);
    background: white;
    border-bottom-color: var(--color-navy-700);
}
.atp-plan-tab--active:hover {
    background: white;
}
.atp-plan-tab--empty .atp-plan-tab__label {
    opacity: 0.7;
}
.atp-plan-tab__chip {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--color-cream-200);
    color: var(--color-cream-700);
    line-height: 1.3;
}
.atp-plan-tab--active .atp-plan-tab__chip {
    background: var(--color-cream-100);
}
.atp-plan-panel__meta {
    margin: 0 0 0.6rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-cream-700);
}
.atp-plan-panel__empty {
    padding: 1.5rem 0.5rem;
    color: var(--color-cream-700);
    font-size: 0.78rem;
    text-align: center;
    margin: 0;
    background: var(--color-cream-50);
    border: 1px dashed var(--color-cream-300);
    border-radius: 6px;
}

/* Fila clickeable en la tabla de etapa */
.atp-acomp-row--clickable {
    cursor: pointer;
    transition: background 0.12s ease;
}
.atp-acomp-row--clickable:hover {
    background: var(--color-cream-50);
}
.atp-acomp-row--clickable:focus-visible {
    outline: 2px solid var(--color-navy-700);
    outline-offset: -2px;
}

/* Footer */
.atp-est-modal__footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--color-cream-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    background: white;
}
.atp-est-modal__btn {
    padding: 0.35rem 0.85rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: 0.35rem;
    font-size: 0.74rem;
    color: var(--color-navy-800);
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}
.atp-est-modal__btn:hover { background: var(--color-cream-50); border-color: var(--color-navy-700); }

@media (max-width: 900px) {
    .atp-est-modal__kpis { grid-template-columns: repeat(2, 1fr); }
    .atp-est-modal__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .atp-est-modal { max-height: 95vh; }
    .atp-est-modal-backdrop { padding: 0.5rem; }
}

/* ============================================
   FICHA ESTABLECIMIENTO — página standalone
   Reemplaza el antiguo modal. Reutiliza las tarjetas
   .atp-est-modal__* como bloques de contenido y agrega
   el chrome de página (back link, topline, responsable).
   ============================================ */
.atp-est-detail {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.atp-est-detail__panel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
/* Fila de seguimiento cancelado: atenuada. */
.atp-est-detail__row--muted { opacity: 0.55; }
.atp-est-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: max-content;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-navy-700);
    text-decoration: none;
    transition: color 150ms;
}
.atp-est-detail__back:hover { color: var(--color-terra-700); }
.atp-est-detail__back svg { width: 16px; height: 16px; }

.atp-est-detail__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: -0.2rem;
}
.atp-est-detail__subtitle {
    font-size: 0.78rem;
    color: var(--color-cream-700);
    margin: 0;
    line-height: 1.4;
}

/* Responsable UATP (banner) */
.atp-est-resp {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--color-navy-50);
    border: 1px solid var(--color-navy-200);
    border-radius: var(--radius-md, 8px);
    padding: 0.7rem 0.9rem;
}
.atp-est-resp__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy-100);
    color: var(--color-navy-800);
    border-radius: 999px;
}
.atp-est-resp__icon svg { width: 20px; height: 20px; }
.atp-est-resp__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.atp-est-resp__label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-navy-600);
    font-weight: 700;
}
.atp-est-resp__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-navy-900);
}
.atp-est-resp__name--muted { color: var(--color-cream-700); font-weight: 500; }
.atp-est-resp__contact { font-size: 0.75rem; color: var(--color-cream-700); }
.atp-est-resp__action { margin-left: auto; flex-shrink: 0; }
.atp-est-resp__action svg { width: 15px; height: 15px; }
.atp-est-resp__current {
    font-size: 0.82rem;
    color: var(--color-cream-700);
    margin-bottom: var(--space-3);
}
.atp-est-resp__contact a { color: var(--color-navy-700); }
.atp-est-resp__rut { font-family: var(--font-mono); }

/* ============================================
   DASHBOARD PARTIALS: Personal tab (.pt-*)
   Lenguaje visual espejo de .io-dashboard:
   search bar, KPIs, secciones por comuna,
   cards de EE expandibles, equipo directivo.
   ============================================ */

.io-dashboard:has(.pt-wrap) { height: auto; }

.pt-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    padding-top: 0.5rem;
    zoom: 1.05;
}

/* Search bar */
.pt-search {
    position: relative;
    display: flex;
    align-items: center;
}
.pt-search__icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-cream-600);
    pointer-events: none;
    width: 0.95rem;
    height: 0.95rem;
}
.pt-search__input {
    width: 100%;
    padding: 0.5rem 2.1rem 0.5rem 2.35rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: 999px;
    color: var(--color-navy-900);
    font-size: 0.78rem;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pt-search__input::placeholder {
    color: var(--color-cream-600);
    font-style: italic;
}
.pt-search__input:focus {
    outline: none;
    border-color: var(--color-terra-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-terra-500) 15%, transparent);
}
.pt-search__clear {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    border: 0;
    background: var(--color-cream-200);
    color: var(--color-cream-700);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    font-size: 0.7rem;
    padding: 0;
}
.pt-search__clear:hover { background: var(--color-cream-300); color: var(--color-navy-800); }

.pt-no-results {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.72rem;
    border: 1px dashed var(--color-cream-300);
    border-radius: var(--radius-lg);
    background: var(--color-cream-50);
}
.pt-no-results b { color: var(--color-navy-900); }

/* KPI row */
.pt-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
.pt-kpis .io-kpi { min-height: 78px; }

/* Equipo SLEP card body */
.pt-team-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.pt-team-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem 0.18rem 0.2rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.1;
}
.pt-team-chip .nm {
    color: var(--color-navy-900);
    font-weight: 600;
}
.pt-team-chip .role {
    color: var(--color-cream-700);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

/* Comuna section heading */
.pt-comuna {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.2rem;
}
.pt-comuna__name {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--color-navy-800);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pt-comuna__name .io-card-accent {
    background: var(--color-terra-500);
}
.pt-comuna__count {
    font-size: 0.58rem;
    color: var(--color-cream-600);
    letter-spacing: 0.02em;
}
.pt-comuna__count b {
    color: var(--color-navy-900);
    font-feature-settings: "tnum" 1;
    font-weight: 700;
}
.pt-comuna__rule {
    flex: 1;
    height: 1px;
    background: var(--color-cream-300);
}

/* School cards (acordeón) */
.pt-cards {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.pt-card {
    background: transparent;
    position: relative;
    border-bottom: 1px solid var(--color-cream-200);
}
.pt-card:last-child { border-bottom: 0; }
.pt-card.is-open {
    background: var(--color-cream-50);
}
.pt-card.is-open::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: var(--color-navy-700);
}

.pt-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    user-select: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    transition: background 0.12s ease;
}
.pt-card__head:hover { background: var(--color-cream-100); }
.pt-card.is-open .pt-card__head {
    background: transparent;
    border-bottom: 1px dashed var(--color-cream-300);
}

.pt-card__icon {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy-100);
    color: var(--color-navy-800);
    border-radius: 0.25rem;
    border: 1px solid var(--color-navy-200);
}
.pt-card.is-open .pt-card__icon {
    background: var(--color-navy-800);
    color: white;
    border-color: var(--color-navy-800);
}
.pt-card__icon svg { width: 0.85rem; height: 0.85rem; }

.pt-card__name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-navy-900);
    line-height: 1.15;
    letter-spacing: -0.005em;
    display: block;
}
.pt-card__sub {
    font-size: 0.58rem;
    color: var(--color-cream-700);
    margin-top: 0.1rem;
    letter-spacing: 0.02em;
}

.pt-card__rbd {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    color: var(--color-navy-800);
    background: var(--color-navy-50);
    border: 1px solid var(--color-navy-200);
    padding: 0.12rem 0.4rem;
    border-radius: 0.2rem;
    white-space: nowrap;
}
.pt-card__count {
    font-size: 0.55rem;
    color: var(--color-cream-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    white-space: nowrap;
}
.pt-card__count b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: -0.02em;
}
.pt-card__chev {
    color: var(--color-cream-700);
    transition: transform 0.2s ease, color 0.12s ease;
    display: inline-flex;
}
.pt-card.is-open .pt-card__chev {
    transform: rotate(180deg);
    color: var(--color-navy-800);
}
.pt-card__chev svg { width: 0.85rem; height: 0.85rem; }

.pt-card__body { padding: 0.55rem 0.65rem 0.7rem; }

.pt-section-label {
    font-family: var(--font-body);
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-navy-800);
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}
.pt-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-cream-200);
}
.pt-section-label .num {
    color: var(--color-cream-600);
    font-family: 'Source Code Pro', ui-monospace, monospace;
    letter-spacing: 0;
    font-weight: 500;
}

/* Slots equipo directivo */
.pt-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem;
}
.pt-slot {
    display: grid;
    grid-template-columns: 1.85rem 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: 0.3rem;
    align-items: start;
    position: relative;
}
.pt-slot::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    border-radius: 2px 0 0 2px;
    background: var(--color-navy-600);
}
.pt-slot.is-empty {
    background: transparent;
    border-style: dashed;
}
.pt-slot.is-empty::before { background: var(--color-cream-300); }

.pt-slot__role {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-navy-700);
    font-weight: 700;
    margin-bottom: 0.1rem;
}
.pt-slot.is-empty .pt-slot__role { color: var(--color-cream-500); }
.pt-slot__name {
    font-family: var(--font-display);
    font-size: 0.78rem;
    color: var(--color-navy-900);
    line-height: 1.15;
    letter-spacing: -0.005em;
    overflow-wrap: break-word;
}
.pt-slot.is-empty .pt-slot__name { color: var(--color-cream-500); }
.pt-slot__contact {
    margin-top: 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.pt-slot__contact .em {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 0.55rem;
    color: var(--color-navy-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-slot__contact .ph {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 0.55rem;
    color: var(--color-cream-600);
}
.pt-slot__contact .none {
    font-size: 0.55rem;
    color: var(--color-cream-500);
}

/* Avatar */
.pt-av {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: var(--color-navy-100);
    color: var(--color-navy-800);
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-navy-200);
    overflow: hidden;
    letter-spacing: 0.02em;
}
.pt-av--sm {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.5rem;
    border-color: var(--color-cream-300);
    background: var(--color-cream-100);
}
.pt-av--photo {
    background: linear-gradient(135deg, var(--color-navy-600), var(--color-terra-500));
    color: white;
    border-color: transparent;
}
.pt-av--photo img { width: 100%; height: 100%; object-fit: cover; }
.pt-av--empty {
    color: var(--color-cream-500);
    background: transparent;
    border-style: dashed;
}

.pt-card__foot {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-cream-300);
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.pt-card__foot__stats {
    display: inline-flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    font-size: 0.6rem;
    color: var(--color-cream-700);
    letter-spacing: 0.02em;
}
.pt-card__foot__stats b {
    color: var(--color-navy-900);
    font-feature-settings: "tnum" 1;
    font-weight: 700;
}

/* Person row (Equipo SLEP) */
.pt-card__head--person {
    grid-template-columns: auto 1fr auto auto;
}
.pt-person__name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-navy-900);
    line-height: 1.15;
    letter-spacing: -0.005em;
    display: block;
}
.pt-person__role {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-navy-700);
    font-weight: 700;
    background: var(--color-navy-50);
    border: 1px solid var(--color-navy-200);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pt-person__details {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem 1.2rem;
}
@media (max-width: 640px) {
    .pt-person__details { grid-template-columns: 1fr; }
}
.pt-person__field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.pt-person__field-label {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cream-700);
    font-weight: 700;
}
.pt-person__field-value {
    font-family: 'Source Code Pro', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--color-navy-800);
    overflow-wrap: anywhere;
}
.pt-person__field-value.none {
    color: var(--color-cream-500);
    font-family: var(--font-body);
}

/* Empty state */
.pt-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-cream-700);
    font-size: 0.7rem;
    border: 1px dashed var(--color-cream-300);
    border-radius: var(--radius-lg);
    background: var(--color-cream-50);
}

@media (max-width: 880px) {
    .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-card__head {
        grid-template-columns: auto 1fr auto;
        row-gap: 0.3rem;
    }
    .pt-card__rbd, .pt-card__count { grid-column: span 1; }
}

/* ============================================
   DASHBOARD PARTIALS: capability_detail modal
   Modal de detalle de capacidad — hero con nivel,
   tendencia, score, gráfico, dimensiones,
   roadmap y acciones.
   ============================================ */

/* Backdrop específico del partial capdetail (color-mix navy-950 + blur). */
.capdetail-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-navy-950) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
    backdrop-filter: blur(2px);
}

.capdetail {
    background: var(--color-cream-50);
    border-radius: var(--radius-xl);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.capdetail__header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.capdetail__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-navy-900);
    margin: 0;
    line-height: 1.2;
}
.capdetail__subtitle {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-cream-600);
    line-height: 1.4;
}
.capdetail__close {
    width: 36px; height: 36px;
    border: none; background: transparent; cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-cream-600);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.capdetail__close:hover { background: var(--color-cream-200); color: var(--color-navy-800); }

.capdetail__body { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1; }

.capdetail__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-navy-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}
.capdetail__hero-level { display: flex; align-items: center; gap: var(--space-3); }

.capdetail__level-number {
    width: 52px; height: 52px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
}
.capdetail__level-number--0 { background: var(--color-cream-300); color: var(--color-cream-600); }
.capdetail__level-number--1 { background: var(--maturity-1); }
.capdetail__level-number--2 { background: var(--maturity-2); }
.capdetail__level-number--3 { background: var(--maturity-3); color: var(--color-navy-900); }
.capdetail__level-number--4 { background: var(--maturity-4); }
.capdetail__level-number--5 { background: var(--maturity-5); }

.capdetail__level-meta { display: flex; flex-direction: column; }
.capdetail__level-label { font-weight: 600; font-size: 0.9375rem; color: var(--color-navy-800); }
.capdetail__level-scale { font-size: 0.75rem; color: var(--color-cream-600); }

.capdetail__hero-indicators { display: flex; align-items: center; gap: var(--space-3); }

/* Trend chip */
.capdetail__trend {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 600;
}
.capdetail__trend--up { background: var(--color-success-100); color: var(--color-success-600); }
.capdetail__trend--down { background: var(--color-danger-100); color: var(--color-danger-600); }
.capdetail__trend--stable { background: var(--color-cream-200); color: var(--color-cream-600); }

/* Score chip */
.capdetail__score {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem; font-weight: 600;
}
.capdetail__score--1 { background: var(--color-danger-100); color: var(--color-danger-600); }
.capdetail__score--2 { background: var(--color-warning-100); color: var(--color-warning-600); }
.capdetail__score--3 { background: var(--color-success-100); color: var(--color-success-600); }
.capdetail__score-value { font-weight: 400; opacity: 0.7; }

/* Section */
.capdetail__section { margin-bottom: var(--space-5); }
.capdetail__section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
}
.capdetail__section-title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-navy-800);
    margin: 0 0 var(--space-3);
}
.capdetail__section-header .capdetail__section-title { margin-bottom: 0; }
.capdetail__section-title svg { color: var(--color-cream-600); }
.capdetail__section-right {
    display: flex; align-items: center; gap: var(--space-2);
}
.capdetail__action-count {
    font-size: 0.75rem;
    color: var(--color-cream-600);
    font-weight: 500;
}

/* Texto descriptivo de óptimo */
.capdetail__optimal-desc {
    font-size: 0.8125rem;
    color: var(--color-success-600);
}

/* Chart.js wrapper */
.capdetail__chart-wrap {
    background: var(--color-cream-100);
    border: 1px solid var(--color-cream-200);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

/* Dimensions */
.capdetail__dimensions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}
.capdetail__dim {
    padding: var(--space-3);
    background: var(--color-cream-100);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-cream-200);
}
.capdetail__dim-name { display: block; font-weight: 600; font-size: 0.8125rem; color: var(--color-navy-800); }
.capdetail__dim-desc { display: block; font-size: 0.75rem; color: var(--color-cream-600); margin-top: var(--space-1); }

/* Roadmap */
.capdetail__roadmap { margin-bottom: var(--space-3); }
.capdetail__roadmap-header { margin-bottom: var(--space-3); }
.capdetail__roadmap-badge {
    display: inline-flex;
    padding: var(--space-1) var(--space-2);
    background: var(--color-navy-100);
    color: var(--color-navy-800);
    font-size: 0.75rem; font-weight: 600;
    border-radius: var(--radius-sm);
}
.capdetail__roadmap-gap {
    font-size: 0.8125rem; color: var(--color-cream-600);
    margin: var(--space-2) 0 0;
    line-height: 1.4;
}

/* Action cards */
.capdetail__action {
    padding: var(--space-4);
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    transition: border-color var(--transition-fast);
}
.capdetail__action:hover { border-color: var(--color-cream-300); }
.capdetail__action-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.capdetail__action-top-left {
    display: flex; align-items: center; gap: var(--space-2);
    min-width: 0;
}
.capdetail__action-priority {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    flex-shrink: 0;
}
.capdetail__action-priority--high { background: var(--color-danger-100); color: var(--color-danger-600); }
.capdetail__action-priority--medium { background: var(--color-warning-100); color: var(--color-warning-600); }
.capdetail__action-priority--low { background: var(--color-cream-200); color: var(--color-cream-600); }
.capdetail__action-name { font-size: 0.875rem; color: var(--color-navy-900); }
.capdetail__action-desc {
    font-size: 0.8125rem; color: var(--color-cream-600);
    margin: 0; line-height: 1.5;
}

/* Action metadata chips */
.capdetail__action-meta {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-cream-200);
}
.capdetail__action-chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-cream-100);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem; color: var(--color-cream-600);
}
.capdetail__action-chip--success { color: var(--color-success-600); }

/* Optimal state */
.capdetail__optimal {
    display: flex; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-success-100);
    border: 1px solid var(--color-success-500);
    border-radius: var(--radius-md);
    color: var(--color-success-600);
}
.capdetail__optimal svg { flex-shrink: 0; margin-top: var(--space-1); }
.capdetail__optimal strong { display: block; color: var(--color-navy-900); font-size: 0.875rem; }
.capdetail__optimal p { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: var(--color-cream-600); }

/* Footer */
.capdetail__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-cream-200);
    display: flex; justify-content: flex-end;
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .capdetail { max-height: 95vh; }
    .capdetail__header, .capdetail__body, .capdetail__footer { padding-left: var(--space-4); padding-right: var(--space-4); }
    .capdetail__hero { flex-direction: column; align-items: flex-start; }
    .capdetail__dimensions { grid-template-columns: 1fr; }
}

/* ============================================
   CORE: Landing page
   SaaS marketing page (templates/core/landing.html).
   Standalone (no base.html). Premium-institutional SaaS within the
   navy/terra/cream system. All selectors scoped to .landing-page so
   the marketing layout never leaks into the app shell.
   ============================================ */

.landing-page {
    /* Local aliases → global design tokens (keep selectors short) */
    --navy-950: var(--color-navy-950); --navy-900: var(--color-navy-900);
    --navy-800: var(--color-navy-800); --navy-700: var(--color-navy-700);
    --navy-600: var(--color-navy-600); --navy-500: var(--color-navy-500);
    --navy-400: var(--color-navy-400); --navy-300: var(--color-navy-300);
    --navy-200: var(--color-navy-200); --navy-100: var(--color-navy-100);
    --navy-50:  var(--color-navy-50);
    --terra-900: var(--color-terra-900); --terra-800: var(--color-terra-800);
    --terra-700: var(--color-terra-700); --terra-600: var(--color-terra-600);
    --terra-500: var(--color-terra-500); --terra-400: var(--color-terra-400);
    --terra-300: var(--color-terra-300); --terra-200: var(--color-terra-200);
    --terra-100: var(--color-terra-100); --terra-50:  var(--color-terra-50);
    --cream-950: var(--color-cream-950); --cream-900: var(--color-cream-900);
    --cream-800: var(--color-cream-800); --cream-700: var(--color-cream-700);
    --cream-600: var(--color-cream-600); --cream-500: var(--color-cream-500);
    --cream-400: var(--color-cream-400); --cream-300: var(--color-cream-300);
    --cream-200: var(--color-cream-200); --cream-100: var(--color-cream-100);
    --cream-50:  var(--color-cream-50);
    --success-700: var(--color-success-700); --success-600: var(--color-success-600); --success-100: var(--color-success-100);
    --warning-700: var(--color-warning-700); --warning-600: var(--color-warning-600); --warning-100: var(--color-warning-100);
    --danger-700:  var(--color-danger-700);  --danger-600:  var(--color-danger-600);  --danger-100:  var(--color-danger-100);
    --gold: #d4c79a;
    --shadow-card: 0 1px 3px rgb(15 35 66 / .04), 0 12px 32px -12px rgb(15 35 66 / .12);
    --maxw: 78rem;

    margin: 0;
    font-family: var(--font-body);
    color: var(--navy-900);
    background: var(--cream-100);
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.landing-page a { color: inherit; text-decoration: none; }
.landing-page img { display: block; max-width: 100%; }
.landing-page :is(h1, h2, h3, h4, p) { margin: 0; }
.landing-page ::selection { background: var(--terra-200); color: var(--terra-900); }

/* ---------- shared layout ---------- */
.landing-page .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .landing-page .wrap { padding: 0 2.5rem; } }
@media (min-width: 1280px) { .landing-page .wrap { padding: 0 3rem; } }

.landing-page .eyebrow {
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em;
    font-size: .72rem; font-weight: 500; color: var(--terra-700);
    display: inline-flex; align-items: center; gap: .55rem;
}
.landing-page .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--terra-600); display: inline-block; }
.landing-page .eyebrow--center { justify-content: center; }
.landing-page .eyebrow--light { color: var(--gold); }
.landing-page .eyebrow--light::before { background: var(--gold); }

.landing-page .display { font-family: var(--font-display); font-weight: 400; line-height: 1.0; letter-spacing: -.022em; }
.landing-page .display em { font-style: italic; color: var(--terra-700); }
.landing-page h1.display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.landing-page h2.display { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; }
.landing-page h3.display { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.landing-page .lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--cream-700); }
.landing-page .tnum { font-variant-numeric: tabular-nums; }
.landing-page .mono { font-family: var(--font-mono); }

/* ---------- buttons ---------- */
.landing-page .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 600; font-size: .95rem;
    padding: .8rem 1.4rem; border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; white-space: nowrap;
}
.landing-page .btn svg { width: 1.05em; height: 1.05em; }
.landing-page .btn--primary {
    background: linear-gradient(180deg, var(--terra-600), var(--terra-700)); color: #fff;
    box-shadow: 0 1px 2px rgb(107 37 23 / .25), 0 8px 20px -8px rgb(166 61 40 / .5);
}
.landing-page .btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(107 37 23 / .3), 0 14px 28px -10px rgb(166 61 40 / .55);
    background: linear-gradient(180deg, var(--terra-700), var(--terra-800));
}
.landing-page .btn--outline { background: transparent; border-color: var(--cream-400); color: var(--navy-800); }
.landing-page .btn--outline:hover { background: var(--cream-50); border-color: var(--navy-300); }
.landing-page .btn--lg { padding: 1rem 1.8rem; font-size: 1.05rem; }

/* ---------- top nav ---------- */
.landing-page .accent-hair { height: 3px; background: var(--terra-600); }
.landing-page .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 248, 245, .82); backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--cream-300);
}
.landing-page .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1.5rem; }
.landing-page .lockup { display: flex; align-items: center; gap: .85rem; }
.landing-page .lockup img { height: 30px; width: auto; }
.landing-page .lockup .ec { filter: brightness(0); opacity: .9; }
.landing-page .lockup__x { font-family: var(--font-display); font-style: italic; color: var(--terra-600); font-size: 1.15rem; }
.landing-page .nav__links { display: none; gap: 2rem; align-items: center; }
.landing-page .nav__links a { font-size: .9rem; font-weight: 500; color: var(--cream-700); transition: color .2s; }
.landing-page .nav__links a:hover { color: var(--navy-900); }
.landing-page .nav__actions { display: flex; align-items: center; gap: 1rem; }
.landing-page .nav__login { font-size: .9rem; font-weight: 600; color: var(--navy-800); display: none; }
.landing-page .nav__login:hover { color: var(--terra-700); }
@media (min-width: 900px) { .landing-page .nav__links { display: flex; } .landing-page .nav__login { display: inline; } }

/* ---------- hero ---------- */
.landing-page .hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.landing-page .hero__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 50% at 85% 0%, rgba(196, 90, 59, .06), transparent 70%),
        radial-gradient(50% 40% at 0% 100%, rgba(45, 90, 143, .05), transparent 70%);
}
.landing-page .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .landing-page .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.landing-page .hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.landing-page .hero__trust { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--cream-300); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.4rem; }
.landing-page .hero__trust-logos { display: flex; align-items: center; gap: .7rem; }
.landing-page .hero__trust-logos img { height: 24px; width: auto; }
.landing-page .hero__trust-logos .ec { filter: brightness(0); opacity: .8; }
.landing-page .hero__trust-logos .x { font-family: var(--font-display); font-style: italic; color: var(--terra-600); }
.landing-page .hero__trust-txt { font-size: .85rem; color: var(--cream-700); }
.landing-page .hero__trust-txt b { color: var(--navy-800); font-weight: 600; }

/* ---------- dashboard mockup ---------- */
.landing-page .mock {
    position: relative; background: var(--cream-50); border: 1px solid var(--cream-300);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); overflow: visible;
    transform: perspective(1600px) rotateY(-3deg) rotateX(1.5deg); transition: transform .5s ease;
}
.landing-page .mock:hover { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }
.landing-page .mock__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--cream-300); background: var(--cream-100); }
.landing-page .mock__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cream-400); }
.landing-page .mock__title { margin-left: .5rem; font-size: .72rem; font-family: var(--font-mono); letter-spacing: .04em; color: var(--cream-600); text-transform: uppercase; }
.landing-page .mock__body { padding: 1.2rem; }
.landing-page .mock__hero-stat { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; margin-bottom: 1rem; }
.landing-page .mock__hero-stat .lbl { font-size: .72rem; letter-spacing: .04em; color: var(--navy-200); text-transform: uppercase; font-family: var(--font-mono); }
.landing-page .mock__hero-stat .val { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; margin-top: .25rem; }
.landing-page .mock__pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px; background: rgba(220, 38, 38, .18); color: #fecaca; }
.landing-page .mock__pill .blip { width: .5rem; height: .5rem; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 0 rgba(248, 113, 113, .6); animation: landing-blip 1.8s infinite; }
@keyframes landing-blip { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .5); } 70% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } }
.landing-page .mock__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.landing-page .mock__tile { border: 1px solid var(--cream-300); border-radius: var(--radius-md); padding: .7rem .75rem; background: var(--cream-50); }
.landing-page .mock__tile .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cream-600); font-family: var(--font-mono); }
.landing-page .mock__tile .v { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-900); line-height: 1.1; margin-top: .15rem; }
.landing-page .mock__tile .v small { font-size: .8rem; color: var(--cream-600); }
.landing-page .mock__rows { border: 1px solid var(--cream-300); border-radius: var(--radius-md); overflow: hidden; }
.landing-page .mock__row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .6rem .8rem; font-size: .8rem; border-bottom: 1px solid var(--cream-200); }
.landing-page .mock__row:last-child { border-bottom: none; }
.landing-page .mock__row .who { font-weight: 600; color: var(--navy-900); }
.landing-page .mock__row .sub { font-size: .68rem; color: var(--cream-600); font-family: var(--font-mono); }
.landing-page .chip { font-size: .66rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.landing-page .chip--war { background: var(--warning-100); color: var(--warning-700); }
.landing-page .chip--pos { background: var(--success-100); color: var(--success-700); }
.landing-page .chip--neu { background: var(--navy-100); color: var(--navy-700); }
.landing-page .mock__float {
    position: absolute; right: 16px; bottom: -34px; z-index: 2;
    background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: .7rem .9rem; display: flex; align-items: center; gap: .7rem;
    max-width: calc(100% - 32px);
}
.landing-page .mock__float .ic { width: 2rem; height: 2rem; border-radius: 8px; background: var(--success-100); color: var(--success-700); display: grid; place-items: center; }
.landing-page .mock__float .ic svg { width: 1.1rem; height: 1.1rem; }
.landing-page .mock__float .t { font-size: .68rem; color: var(--cream-600); }
.landing-page .mock__float .b { font-size: .85rem; font-weight: 700; color: var(--navy-900); }
@media (max-width: 1023px) { .landing-page .mock { transform: none; } .landing-page .mock:hover { transform: none; } }

/* ---------- purpose band (the "why") ---------- */
.landing-page .purpose { background: var(--cream-50); border-bottom: 1px solid var(--cream-300); text-align: center; padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
.landing-page .purpose__stmt {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.65rem, 3.4vw, 2.7rem); line-height: 1.22; letter-spacing: -.015em;
    max-width: 22em; margin: 1.3rem auto 0; color: var(--navy-900);
}
.landing-page .purpose__stmt em { font-style: italic; color: var(--terra-700); }
.landing-page .pillars { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 3rem auto 0; max-width: 58rem; }
@media (min-width: 768px) { .landing-page .pillars { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.landing-page .pillar { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 0 1rem; }
.landing-page .pillar__ic { width: 3rem; height: 3rem; border-radius: 999px; background: var(--terra-50); border: 1px solid var(--terra-200); color: var(--terra-700); display: grid; place-items: center; flex: none; }
.landing-page .pillar__ic svg { width: 1.4rem; height: 1.4rem; }
.landing-page .pillar__t { font-weight: 600; color: var(--navy-900); font-size: 1.05rem; }
.landing-page .pillar__d { font-size: .9rem; color: var(--cream-700); line-height: 1.5; max-width: 18em; }

/* ---------- stat band (dark) ---------- */
.landing-page .band-dark { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.landing-page .band-dark::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(50% 60% at 100% 0, rgba(196, 90, 59, .18), transparent 60%); }
.landing-page .band-dark .wrap { position: relative; z-index: 1; }
.landing-page .stat-band { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.landing-page .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin-top: 1.8rem; }
@media (min-width: 860px) { .landing-page .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.landing-page .stat { border-left: 2px solid var(--terra-600); padding-left: 1.1rem; }
.landing-page .stat__n { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: #fff; }
.landing-page .stat__n .u { color: var(--gold); }
.landing-page .stat__l { margin-top: .6rem; font-size: .9rem; color: var(--navy-200); line-height: 1.4; }
.landing-page .band-dark__head { max-width: 46rem; }
.landing-page .band-dark__head h2 { color: #fff; }
.landing-page .band-dark__head h2 em { color: var(--gold); }

/* ---------- generic section ---------- */
.landing-page .section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.landing-page .section--tint { background: var(--cream-200); border-top: 1px solid var(--cream-300); border-bottom: 1px solid var(--cream-300); }
.landing-page .section__head { max-width: 44rem; }
.landing-page .section__head--center { margin: 0 auto; text-align: center; }
.landing-page .section__head .lede { margin-top: 1.1rem; }

/* ---------- problem evidence ---------- */
.landing-page .evid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .landing-page .evid { grid-template-columns: repeat(3, 1fr); } }
.landing-page .evid__item { padding: 1.5rem; background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-lg); }
.landing-page .evid__n { font-family: var(--font-display); font-size: 2.4rem; color: var(--terra-700); line-height: 1; }
.landing-page .evid__t { margin-top: .6rem; font-size: .92rem; color: var(--cream-700); line-height: 1.45; }
.landing-page .evid__src { margin-top: 1.5rem; font-size: .78rem; color: var(--cream-600); font-style: italic; }

/* ---------- killer features ---------- */
.landing-page .feat { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; padding: clamp(2.5rem, 5vw, 4rem) 0; }
@media (min-width: 1024px) { .landing-page .feat { grid-template-columns: 1fr 1fr; gap: 4rem; } .landing-page .feat--rev .feat__visual { order: -1; } }
.landing-page .feat + .feat { border-top: 1px solid var(--cream-300); }
.landing-page .feat__num { font-family: var(--font-mono); font-size: .8rem; color: var(--terra-600); letter-spacing: .1em; }
.landing-page .feat__icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--terra-50); color: var(--terra-700); display: grid; place-items: center; margin-bottom: 1.2rem; border: 1px solid var(--terra-200); }
.landing-page .feat__icon svg { width: 1.5rem; height: 1.5rem; }
.landing-page .feat h3 { margin: .4rem 0 .8rem; color: var(--navy-900); }
.landing-page .feat__body { font-size: 1.02rem; color: var(--cream-700); line-height: 1.6; }
.landing-page .feat__list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; }
.landing-page .feat__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--navy-800); }
.landing-page .feat__list svg { width: 1.1rem; height: 1.1rem; color: var(--success-600); flex: none; margin-top: .15rem; }
.landing-page .feat__law { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--navy-700); background: var(--navy-50); border: 1px solid var(--navy-200); padding: .45rem .8rem; border-radius: 999px; }
.landing-page .feat__law svg { width: 1rem; height: 1rem; }

.landing-page .panel { background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.landing-page .panel__hd { padding: .8rem 1.1rem; border-bottom: 1px solid var(--cream-300); font-size: .78rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cream-600); background: var(--cream-100); display: flex; justify-content: space-between; align-items: center; }
.landing-page .panel__bd { padding: 1.2rem; }
.landing-page .steps { display: grid; gap: 0; }
.landing-page .step { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .55rem 0; }
.landing-page .step__dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.landing-page .step--done .step__dot { background: var(--success-600); color: #fff; }
.landing-page .step--now .step__dot { background: var(--terra-600); color: #fff; box-shadow: 0 0 0 4px var(--terra-100); }
.landing-page .step--wait .step__dot { background: var(--cream-300); color: var(--cream-600); }
.landing-page .step__t { font-size: .88rem; color: var(--navy-900); font-weight: 500; }
.landing-page .step--wait .step__t { color: var(--cream-600); font-weight: 400; }
.landing-page .step__time { font-size: .7rem; font-family: var(--font-mono); color: var(--cream-600); }
.landing-page .cmp { display: grid; gap: 1rem; }
.landing-page .cmp__row .cmp__lbl { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .35rem; color: var(--navy-800); }
.landing-page .cmp__lbl b { font-family: var(--font-display); font-weight: 400; }
.landing-page .cmp__track { height: .65rem; border-radius: 999px; background: var(--cream-200); overflow: hidden; }
.landing-page .cmp__fill { height: 100%; border-radius: 999px; }
.landing-page .cmp__fill--norm { background: var(--navy-600); }
.landing-page .cmp__fill--real { background: var(--terra-600); }
.landing-page .cmp__alert { margin-top: .4rem; display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--danger-700); font-weight: 600; }
.landing-page .cmp__alert svg { width: 1rem; height: 1rem; }
.landing-page .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.landing-page .cell { aspect-ratio: 1; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: .62rem; font-weight: 600; text-align: center; padding: .2rem; line-height: 1.1; }
.landing-page .cell--alto { background: var(--success-100); color: var(--success-700); }
.landing-page .cell--medio { background: var(--warning-100); color: var(--warning-700); }
.landing-page .cell--bajo { background: var(--danger-100); color: var(--danger-700); }
.landing-page .levels { display: flex; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.landing-page .level-pill { font-size: .7rem; font-family: var(--font-mono); padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--cream-300); color: var(--cream-700); }
.landing-page .level-pill--on { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* ---------- more modules grid ---------- */
.landing-page .mods { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .landing-page .mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .landing-page .mods { grid-template-columns: repeat(3, 1fr); } }
.landing-page .mod { background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-lg); padding: 1.3rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.landing-page .mod:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--cream-400); }
.landing-page .mod__ic { width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; margin-bottom: .9rem; }
.landing-page .mod__ic svg { width: 1.25rem; height: 1.25rem; }
.landing-page .mod h4 { font-size: 1rem; font-weight: 600; color: var(--navy-900); margin-bottom: .35rem; }
.landing-page .mod p { font-size: .88rem; color: var(--cream-700); line-height: 1.45; }

/* ---------- methodology ---------- */
.landing-page .method__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .landing-page .method__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.landing-page .caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 520px) { .landing-page .caps { grid-template-columns: repeat(4, 1fr); } }
.landing-page .cap { background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-md); padding: .8rem .7rem; text-align: center; font-size: .8rem; font-weight: 500; color: var(--navy-800); }
.landing-page .cap span { display: block; font-family: var(--font-mono); font-size: .62rem; color: var(--terra-600); margin-bottom: .35rem; }
.landing-page .instruments { display: grid; gap: .7rem; margin-top: 1.4rem; }
.landing-page .instr { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-md); }
.landing-page .instr__tag { font-family: var(--font-mono); font-size: .66rem; font-weight: 600; color: #fff; background: var(--navy-800); padding: .2rem .5rem; border-radius: 5px; white-space: nowrap; margin-top: .1rem; }
.landing-page .instr__t { font-size: .9rem; font-weight: 600; color: var(--navy-900); }
.landing-page .instr__d { font-size: .82rem; color: var(--cream-700); }

/* ---------- compliance strip ---------- */
.landing-page .comp { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 640px) { .landing-page .comp { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .landing-page .comp { grid-template-columns: repeat(3, 1fr); } }
.landing-page .comp__item { display: flex; gap: .85rem; align-items: flex-start; }
.landing-page .comp__ic { width: 2.2rem; height: 2.2rem; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(212, 199, 154, .16); color: var(--gold); }
.landing-page .comp__ic svg { width: 1.15rem; height: 1.15rem; }
.landing-page .comp__t { font-size: .92rem; font-weight: 600; color: #fff; }
.landing-page .comp__d { font-size: .82rem; color: var(--navy-200); line-height: 1.45; margin-top: .15rem; }

/* ---------- final CTA ---------- */
.landing-page .cta { text-align: center; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.landing-page .cta h2 { margin-bottom: 1.2rem; }
.landing-page .cta .btn { margin-top: 1.8rem; }
.landing-page .cta__sub { font-size: .9rem; color: var(--cream-700); margin-top: 1.2rem; }
.landing-page .cta__sub a { color: var(--terra-700); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ---------- footer ---------- */
.landing-page .foot { background: var(--navy-950); color: var(--navy-200); padding: 3rem 0 2.5rem; }
.landing-page .foot__top { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .landing-page .foot__top { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.landing-page .foot__logos { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }
.landing-page .foot__logos img { height: 28px; width: auto; }
.landing-page .foot__logos .ph { filter: brightness(0) invert(1); opacity: .92; }
.landing-page .foot__logos .ec { filter: brightness(0) invert(1); opacity: .92; }
.landing-page .foot__logos .x { font-family: var(--font-display); font-style: italic; color: var(--gold); }
.landing-page .foot__lbl { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-400); }
.landing-page .foot a.mail { color: #fff; font-weight: 600; border-bottom: 1px solid var(--terra-500); }
.landing-page .foot__rule { height: 1px; background: rgba(255, 255, 255, .1); margin: 2rem 0 1.2rem; }
.landing-page .foot__fine { font-size: .8rem; color: var(--navy-400); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ---------- reveal on load ---------- */
.landing-page .reveal { opacity: 0; transform: translateY(10px); animation: landing-rv .8s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes landing-rv { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .landing-page .reveal { animation: none; opacity: 1; transform: none; } .landing-page .mock { transform: none; } }

/* ============================================
   ERROR: 404 + 500
   Standalone error pages (templates/404.html, templates/500.html).
   Calm productivity treatment: cream background, navy ink, terra
   accent. No editorial fonts.
   ============================================ */

.error-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream-100);
    color: var(--color-navy-900);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    padding: var(--space-6);
}

.error-page *, .error-page *::before, .error-page *::after {
    box-sizing: border-box;
}

.error-page__card {
    text-align: center;
    background: white;
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-terra-700);
    box-shadow: 0 25px 50px -12px rgba(15, 35, 66, 0.18);
    max-width: 32rem;
    width: 100%;
}

.error-page__code {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 5rem;
    line-height: 1;
    color: var(--color-terra-700);
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.error-page__title {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-navy-900);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
}

.error-page__lede {
    color: var(--color-cream-700);
    margin: 0 0 var(--space-8);
    line-height: 1.6;
    font-size: 0.95rem;
}

.error-page__button {
    display: inline-block;
    background: var(--color-navy-900);
    color: var(--color-cream-100);
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 180ms ease, transform 180ms ease;
}
.error-page__button:hover {
    background: var(--color-navy-800);
    transform: translateY(-1px);
}