/*
 * Aldera - 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;
    /* Etiquetas largas (ej. "Acompañamiento Técnico Pedagógico") envuelven en
       dos líneas: line-height ajustado para que el bloque no se vea suelto. */
    line-height: 1.3;
    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) {
    .has-sidebar-collapsed .sidebar .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);
}

.has-sidebar-collapsed .sidebar__collapse-btn svg {
    transform: rotate(180deg);
}

/* El sidebar contraído se declara desde `body.has-sidebar-collapsed`, no con una
   clase en el propio `<aside>`.

   La razón es hx-boost: `<main>` está boosteado, así que navegar entre módulos
   reemplaza el innerHTML del <body> y el `<aside>` se destruye y se vuelve a
   crear. La clase la pone Alpine leyendo `localStorage`, no el servidor, así que
   el nodo nuevo se pinta UN frame expandido y después la transición de `width`
   lo anima de vuelta: 72px -> 240px -> 72px en 225 ms, en cada navegación con el
   menú contraído. El `<body>` sobrevive el swap (solo se reemplaza su
   contenido), y con él su clase, así que colgando el estado de ahí el primer
   paint ya sale contraído.

   Mismo motivo para el chevron del botón, más arriba: se rotaba con una clase
   que ponía Alpine sobre el <svg>, y ese <svg> también es un nodo nuevo. */

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

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

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

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

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

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

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

    .has-sidebar-collapsed .sidebar .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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Visual cue for the active group when collapsed */
    .has-sidebar-collapsed .sidebar .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. */
    .has-sidebar-collapsed .sidebar .sidebar__sublinks .sidebar__sublink {
        color: var(--color-cream-700);
    }
    .has-sidebar-collapsed .sidebar .sidebar__sublinks .sidebar__sublink:hover {
        background: var(--color-cream-100);
        color: var(--color-navy-900);
    }
    .has-sidebar-collapsed .sidebar .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.
       height/overflow !important neutralize x-collapse's inline styles, which would
       otherwise clip the flyout to 0 height when the group is collapsed. */
    .has-sidebar-collapsed .sidebar .sidebar__sublinks {
        display: flex !important;
        height: auto !important;
        overflow: visible !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 */
    .has-sidebar-collapsed .sidebar .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 */
    .has-sidebar-collapsed .sidebar .sidebar__group::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 100%;
        width: var(--space-2);
        pointer-events: none;
    }
    .has-sidebar-collapsed .sidebar .sidebar__group:hover::after {
        pointer-events: auto;
    }

    .has-sidebar-collapsed .sidebar .sidebar__group:hover .sidebar__sublinks,
    .has-sidebar-collapsed .sidebar .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 */
    .has-sidebar-collapsed .sidebar .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);
}

/* Tabla ancha dentro de una card: scrollea la card, no la página.
   main.css se carga después de tailwind.css, así que el `overflow: visible` de arriba le
   gana a la utilidad `overflow-x-auto` — de ahí que haga falta el modificador. */
.card--scroll-x { overflow-x: auto; }

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

/* Área con scroll propio dentro de una columna o tarjeta. La barra se deja siempre visible y con
   color: en macOS el scrollbar flotante aparece solo al scrollear, y una columna que
   corta contenido sin avisar se lee como una lista completa. */
.scroll-area {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cream-400) var(--color-cream-100);
}
.scroll-area::-webkit-scrollbar { width: 10px; }
.scroll-area::-webkit-scrollbar-track { background: var(--color-cream-100); }
.scroll-area::-webkit-scrollbar-thumb {
    background: var(--color-cream-400);
    border: 3px solid var(--color-cream-100);
    border-radius: var(--radius-full);
}
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-cream-500); }

/* ============================================
   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);
}
/* `.card` no recorta (`overflow: visible`, por los menús que se abren dentro): el pie
   al final redondea él mismo sus esquinas, o su fondo se sale del borde redondeado. */
.card > .card__footer:last-child {
    border-bottom-left-radius: calc(var(--radius-xl) - 1px);
    border-bottom-right-radius: calc(var(--radius-xl) - 1px);
}

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

/* Un solo chip no necesita una banda: sin fondo, sin borde y sin padding, para
   poder sentarlo dentro de otra fila (ver `.tabbar__picker`). El `.filter-bar`
   sigue aportando el flex y el gap, que es lo único que hace falta ahí. */
.filter-bar--bare {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}

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

/* ============================================
   VF LISTBOX (dropdown custom — regla del proyecto: nunca <select> nativo)
   ============================================ */

.vf-listbox { position: relative; }

.vf-listbox__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 1px solid var(--color-cream-400);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-navy-900);
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.vf-listbox__btn:hover { border-color: var(--color-navy-400); }

.vf-listbox__btn[aria-expanded="true"] {
    border-color: var(--color-navy-600);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.vf-listbox__btn--error { border-color: #dc2626; }

.vf-listbox__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-listbox__caret {
    flex-shrink: 0;
    margin-left: var(--space-2);
    color: var(--color-cream-600);
}

.vf-listbox__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    padding: 4px 0;
    list-style: none;
    margin: 0;
}

.vf-listbox__options { list-style: none; margin: 0; padding: 0; }

.vf-listbox__option {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-navy-900);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.vf-listbox__option:hover { background: var(--color-cream-100); }

.vf-listbox__option--active { background: var(--color-navy-50); font-weight: 600; }

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

/* Deshabilitado, en cualquier variante: atenuado, sin sombra ni el salto del hover. */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.btn--primary:disabled:hover {
    background: linear-gradient(135deg, var(--color-terra-600) 0%, var(--color-terra-700) 100%);
    box-shadow: none;
    transform: none;
}
.btn--outline:disabled:hover {
    background: transparent;
    border-color: var(--color-cream-400);
}

/* ============================================
   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
   Opt-in por atributo: el indicador aplica solo a elementos que declaran una
   request htmx explícita. htmx marca con .htmx-request al elemento que originó
   la request, y en una navegación boosteada ese elemento es el propio <a> del
   sidebar / <main> / breadcrumb — que solo tiene href. Un catch-all sobre
   .htmx-request le dibujaba un spinner de 24px centrado sobre su propio label y
   lo dejaba en opacity 0.7 mientras cargaba la página.
   `no-htmx-indicator` sigue siendo el escape para acciones in-page que ya tienen
   su propio feedback (paginadores, headers ordenables). */
.htmx-request:is([hx-get], [hx-post], [hx-put], [hx-patch], [hx-delete]):not(.no-htmx-indicator) {
    opacity: 0.7;
    pointer-events: none;
}

.htmx-request:is([hx-get], [hx-post], [hx-put], [hx-patch], [hx-delete]):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; }
/* Al mostrarse, el elemento se eleva sobre hermanos posteriores (ej. filas de tabla)
   para que el tooltip no quede tapado por contenido pintado después. */
[data-tooltip]:hover,
[data-tooltip]:focus-visible { z-index: 30; }
[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;
    /* No heredar uppercase de elementos como el badge de ventana fija. */
    text-transform: none;
    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.
   `^=` y no `=`: la mitad vertical (top/bottom) y la horizontal (centrado,
   -start, -end) son independientes, y `tooltip-placement.js` las combina para
   dar vuelta el cartel hacia donde hay espacio. Con `=` exacto, `bottom-start`
   no era ninguna de las dos y caía al default de arriba y centrado. */
[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);
}

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

/* Alineado al borde IZQUIERDO del disparador, creciendo hacia la derecha: para
   cuando el cartel centrado se saldría por la izquierda. Sirve a `top-start` y a
   `bottom-start`, y lo elige `tooltip-placement.js` midiendo el espacio real; en una
   plantilla se puede seguir escribiendo a mano como punto de partida. */
[data-tooltip][data-tooltip-position$="-start"]:hover::after,
[data-tooltip][data-tooltip-position$="-start"]:focus-visible::after {
    left: 0;
    right: auto;
    transform: none;
}
[data-tooltip][data-tooltip-position$="-start"]:hover::before,
[data-tooltip][data-tooltip-position$="-start"]:focus-visible::before {
    left: 10px;
    right: auto;
    transform: none;
}

/* Alineado al borde DERECHO del disparador, creciendo hacia la izquierda: para
   botones pegados al borde derecho (ej. la columna de acciones de una tabla con
   overflow). Sirve a `top-end` y a `bottom-end`. */
[data-tooltip][data-tooltip-position$="-end"]:hover::after,
[data-tooltip][data-tooltip-position$="-end"]:focus-visible::after {
    left: auto;
    right: 0;
    transform: none;
}
[data-tooltip][data-tooltip-position$="-end"]:hover::before,
[data-tooltip][data-tooltip-position$="-end"]:focus-visible::before {
    left: auto;
    right: 10px;
    transform: none;
}

/* Wrap variant — para tooltips explicativos largos, que con el `nowrap` del default se
   saldrían de la pantalla. El `min()` acota el ancho al viewport en pantallas angostas,
   sea que el tooltip vaya centrado o anclado a un borde. */
[data-tooltip][data-tooltip-wrap]:hover::after,
[data-tooltip][data-tooltip-wrap]:focus-visible::after {
    white-space: normal;
    /* Del ancho de su texto, hasta 15rem: con un ancho fijo, una ayuda corta
       quedaba en una caja casi vacía. */
    width: max-content;
    max-width: min(15rem, calc(100vw - 2rem));
    text-align: left;
}

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

/* ---------------------------------------------------------------------------
   .stat-row — fila de KPIs sin tarjeta: cifras separadas por una regla vertical.

   Alternativa a `.stat-strip` para KPIs de solo lectura. Usa el mismo markup
   (`.kpi-card` + __label/__value/__detail), pero apaga la caja y la barra de
   acento: el tono lo sigue diciendo el valor vía `.kpi-card--danger|warn|ok`.
   No se aplicó a `.kpi-card` a secas porque `.kpi-card--button` (los KPIs que
   filtran en visitas y vinculación) necesita la caja como afordancia de clic.

   La grilla vive acá y no en clases de Tailwind del template: el `nth-child`
   que apaga la regla del primero de cada fila solo es correcto si el contenedor
   es dueño de sus propios breakpoints.
   --------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-5);
}
@media (min-width: 1280px) {
  .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat-row .kpi-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 var(--space-6);
  border-left: 1px solid var(--color-cream-400);
}
.stat-row .kpi-card:first-child,
.stat-row .kpi-card:nth-child(2n + 1) {
  border-left: 0;
  padding-left: 0;
}
@media (min-width: 1280px) {
  .stat-row .kpi-card:nth-child(2n + 1) {
    border-left: 1px solid var(--color-cream-400);
    padding-left: var(--space-6);
  }
  .stat-row .kpi-card:first-child { border-left: 0; padding-left: 0; }
}
.stat-row .kpi-card__label {
  margin-top: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-cream-600);
}
.stat-row .kpi-card__value { margin-top: 0.15rem; }
.stat-row .kpi-card__detail { font-size: 0.74rem; color: var(--color-cream-600); }

/* Tarjeta KPI — mismo estilo que .gdp__hero-card de Gestión de Personas:
   fondo blanco, barra superior navy, valor grande en serif ARRIBA, etiqueta
   + narración debajo. El tono colorea la barra superior (no el cuerpo). */
.kpi-card {
  position: relative;
  /* Barra superior pintada como background-gradient (no ::before) para que
     respete el border-radius y nunca sobresalga de las esquinas. */
  background-color: white;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--kpi-bar, var(--color-navy-700)) 55%, transparent),
    color-mix(in srgb, var(--kpi-bar-fade, var(--color-navy-400)) 55%, transparent) 60%,
    transparent);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: top center;
  border: 1px solid var(--color-cream-300);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
}

/* Variantes de tono — colorean SOLO la barra superior; el cuerpo queda blanco
   como en gdp. En danger/warn/ok el valor también toma el color semántico. */
.kpi-card--navy   { --kpi-bar: var(--color-navy-700);    --kpi-bar-fade: var(--color-navy-400);   }
.kpi-card--terra  { --kpi-bar: var(--color-terra-600);   --kpi-bar-fade: var(--color-terra-500);  }
.kpi-card--ok     { --kpi-bar: var(--color-success-600); --kpi-bar-fade: var(--color-success-500); }
.kpi-card--warn   { --kpi-bar: var(--color-warning-600); --kpi-bar-fade: var(--color-warning-500); }
.kpi-card--danger { --kpi-bar: var(--color-danger-600);  --kpi-bar-fade: var(--color-danger-500);  }

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

/* Valor primero (arriba), etiqueta debajo. */
.kpi-card__value {
  font-family: var(--font-display);
  font-size: 2.35rem;
  line-height: 1;
  color: var(--color-navy-900);
  font-variant-numeric: tabular-nums;
}
/* Valores que son palabra y no número (ej. "Atrasado"): el tamaño de cifra
   grande los hace gritar, así que bajan a escala de titular chico. */
/* El line-height iguala la caja de línea de la cifra (2.35rem × 1) para que el
   detalle de abajo quede a la misma altura que en las cards numéricas. */
.kpi-card__value--text {
  font-size: 1.45rem;
  line-height: 2.35rem;
}
.kpi-card__value-suffix {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-cream-700);
  font-weight: 400;
  margin-left: 0.2rem;
}
.kpi-card__label {
  font-size: 0.8rem;
  color: var(--color-navy-900);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.5rem;
}
.kpi-card__detail {
  font-size: 0.72rem;
  color: var(--color-cream-700);
  margin-top: 0.3rem;
  line-height: 1.4;
}
/* Nota secundaria — metadato bajo el valor (ventana temporal, periodo). */
.kpi-card__note {
  font-size: 0.68rem;
  color: var(--color-cream-700);
  margin-top: 0.3rem;
  line-height: 1.35;
}
.kpi-card__bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.kpi-card__bar > span {
  display: block;
  height: 100%;
  background: var(--color-navy-800);
}

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

/* Variante interactiva — la KPI actúa como filtro clicable (botón o enlace
   HTMX). Resetea el chrome de botón/enlace; hover y estado activo como el
   enlace de .gdp__hero-card. El anillo activo toma el color de la barra. */
.kpi-card--button {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, box-shadow 120ms, transform 120ms;
}
.kpi-card--button:hover {
  border-color: var(--color-navy-400);
  background-color: var(--color-cream-50);
  transform: translateY(-1px);
}
.kpi-card--button:focus-visible {
  outline: 2px solid var(--color-navy-600);
  outline-offset: 2px;
}
/* Filtro activo: barra a opacidad plena + anillo en el color de la barra. */
.kpi-card--button.is-active {
  border-color: var(--kpi-bar, var(--color-navy-700));
  box-shadow: inset 0 0 0 1px var(--kpi-bar, var(--color-navy-700));
  background-color: var(--color-cream-50);
  background-image: linear-gradient(90deg,
    var(--kpi-bar, var(--color-navy-700)),
    var(--kpi-bar-fade, var(--color-navy-400)) 60%,
    transparent);
}

/* ============================================
   DATA TABLE — chrome canónico de tablas de datos:
   encabezado navy en mayúsculas, filas cream con hover
   y foco visible. Las vistas añaden sus propias clases
   de layout (anchos de columna, variantes, transformación
   móvil). Mismo lenguaje visual que .atp-est-list / .pa-table.
   ============================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.data-table thead th {
    padding: 0.55rem 0.7rem;
    background: var(--color-cream-100);
    color: var(--color-navy-800);
    font-weight: 700;
    font-size: 0.62rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-cream-300);
}
.data-table tbody td {
    padding: 0.65rem 0.7rem;
    font-size: 0.78rem;
    color: var(--color-navy-900);
    border-bottom: 1px solid var(--color-cream-200);
    vertical-align: middle;
    line-height: 1.45;
}
.data-table tbody tr { transition: background 120ms; }
.data-table tbody tr:hover td { background: var(--color-cream-50); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr[role="button"],
.data-table tbody tr[role="link"],
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr:focus-visible {
    outline: 2px solid var(--color-navy-700);
    outline-offset: -2px;
}

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

/* Insignia de urgencia del ritmo: aparte del chip de estado y con texto propio,
   para que "vence pronto" no se confunda con "en riesgo", que usa el mismo color. */
.conv-vence {
    /* `flex` y no `inline-flex`: al lado del chip de estado la celda pedía el ancho de los
       dos juntos y empujaba la tabla fuera de su contenedor. Debajo, además, se lee como
       lo que es: un dato aparte del estado, no una variante suya. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-warning-700);
    background: var(--color-warning-100);
}

/* 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--ok,
.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--pending,
.status-chip--warn,
.status-chip--partialsuccess        { background: #fef9c3; color: #854d0e; border-color: #fde68a; }

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

.status-chip--solicitada,
.status-chip--entrevista,
.status-chip--top_1_propuesto,
.status-chip--psicolaboral,
.status-chip--ventana_veto,
.status-chip--por_validar,
.status-chip--habilitacion_pendiente,
.status-chip--por_habilitar,
.status-chip--validating,
.status-chip--committing,
.status-chip--in-progress,
.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);
}

/* ============================================
   SELECTOR DE NIVEL DE ACCESO (AL-105)
   `components/access_level_picker.html`: Sin acceso / Lectura / Modificación.
   Tres estados que se distinguen también en escala de grises; los colores de cada uno
   salen solo de las variables de `.nivel-selector`:
   - elegido: píldora blanca con sombra suave y borde cream fino; el texto va igual que
     el nombre del acceso a la izquierda (navy-800, medium), sin borde navy;
   - disponible: texto normal sobre la pista gris, con hover que oscurece la pista;
   - deshabilitado (supera tu acceso, bajo lo heredado o todo el grupo en solo lectura):
     texto apagado, sin hover. Elegido y deshabilitado (solo lectura) sigue leyéndose como
     el valor: la misma píldora blanca, plana (sin sombra) porque no se toca.
   Ancho fijo desde sm: para que una lista de selectores quede en columna.
   ============================================ */
.nivel-selector {
    --nivel-pista: var(--color-cream-200);
    --nivel-disponible: var(--color-cream-800);
    --nivel-hover: var(--color-cream-300);
    --nivel-elegido: var(--color-navy-800);
    --nivel-elegido-fondo: #fff;
    --nivel-elegido-borde: var(--color-cream-300);
    --nivel-apagado: var(--color-cream-400);
    --nivel-selector-ancho: 22rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    padding: 2px;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    background: var(--nivel-pista);
}
.nivel-opcion {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: calc(var(--radius-md) - 3px);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--nivel-disponible);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
@media (min-width: 640px) {
    .nivel-selector { width: var(--nivel-selector-ancho); }
    .nivel-opcion {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        padding: 0.375rem 0.625rem;
    }
}
.nivel-selector__radio:not(:disabled):not(:checked) + .nivel-opcion:hover {
    background: var(--nivel-hover);
    color: var(--nivel-elegido);
}
.nivel-selector__radio:checked + .nivel-opcion {
    background: var(--nivel-elegido-fondo);
    color: var(--nivel-elegido);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--nivel-elegido-borde);
}
.nivel-selector__radio:disabled + .nivel-opcion {
    color: var(--nivel-apagado);
    background: transparent;
    cursor: not-allowed;
}
.nivel-selector__radio:checked:disabled + .nivel-opcion {
    color: var(--nivel-elegido);
    background: var(--nivel-elegido-fondo);
    box-shadow: 0 0 0 1px var(--nivel-elegido-borde);
    cursor: default;
}
.nivel-selector__radio:focus-visible + .nivel-opcion {
    outline: 2px solid var(--color-terra-500);
    outline-offset: 1px;
}

/* Lista colapsable de un aviso (`components/lock_notice.html`): las primeras viñetas a la
   vista y el resto tras un botón al final, con el mismo disparador que el desglose de
   conflictos (`.aviso-jer__desglose`): subrayado, chevron que rota, foco visible. El
   chevron sigue a `aria-expanded` y no a una clase: Alpine rehace ese atributo al volver
   desde el historial de htmx, pero no quita una clase que quedó en la copia guardada. */
.lista-colapsable__boton {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 1.25rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    border-radius: var(--radius-sm);
}
.lista-colapsable__boton:focus-visible { outline: 2px solid var(--color-navy-400); outline-offset: 2px; }
.lista-colapsable__boton svg { width: 0.85rem; height: 0.85rem; transition: transform 150ms; }
.lista-colapsable__boton[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .lista-colapsable__boton svg { transition: none; }
}

/* 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;
}
/* Paso cumplido al que se puede volver. Solo se distingue al pasar por encima:
   el stepper informa dónde vas, y marcar de entrada cuáles son links compite
   con eso.

   Lo clickeable es el círculo. El padding agranda esa zona a 32px —16 es un
   objetivo muy chico para el dedo— y el margen negativo la devuelve al layout,
   para que el punto no se corra ni se desalinee de la línea que une los pasos.
   `position: relative` ya se lo pone `[data-tooltip]`; el z-index es para
   quedar sobre esa línea, como el punto suelto. */
.stepper__dot-link {
  display: block;
  padding: 8px;
  margin: -8px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}
.stepper__dot-link:hover .stepper__dot { box-shadow: 0 0 0 4px rgba(196, 90, 59, 0.18); }
.stepper__dot-link:hover + .stepper__label { text-decoration: underline; }
.stepper__dot-link:focus-visible {
  outline: 2px solid var(--color-terra-600);
  outline-offset: -2px;
}

/* ============================================
   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. */
/* `max-width` para que una opción larga (el nombre completo de un convenio) recorte con
   elipsis en vez de empujar la página a scroll horizontal en móvil. */
.filter-chip--custom { position: relative; padding: 0; max-width: 100%; min-width: 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;
  overflow-x: hidden;
}
.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);
  /* La opción larga se envuelve en vez de scrollear el menú a lo ancho. Envuelta y no
     recortada con puntos suspensivos porque lo que distingue una opción de otra suele ir
     al final —"Convenio de Desempeño Individual · Gestión de Personas · Cristián Soto"—,
     así que cortarla esconde justo la parte que se viene a leer. */
  white-space: normal;
  overflow-wrap: break-word;
  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;
  /* Un nombre largo sin espacios (un perfil, un archivo) se corta en vez de desbordar a 360 px. */
  overflow-wrap: anywhere;
}
.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;
}
/* Ítem cuyo valor viene resumido —un «+2», una cuenta— y guarda el detalle en su tooltip.
   El punteado bajo el valor avisa que hay algo más sin agregar una palabra a la línea. */
.page-header__meta--detalle { cursor: help; }
.page-header__meta--detalle strong {
  text-decoration: underline dotted var(--color-cream-400);
  text-underline-offset: 3px;
}
.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; }

/* Fracción de medios de verificación: encabeza el listado del bloque de MDV, así que se
   alinea a la izquierda con él y la barra no se estira más allá de la columna de texto —
   una barra a todo el ancho competiría con la de logro, que mide otra cosa.

   Barra y cifra en una línea: el bloque ya crece con el listado, y apilarlas le sumaba una
   fila de puro aire. `wrap` para que en pantallas angostas la cifra baje en vez de apretar
   la barra hasta dejarla ilegible. */
.conv-mdv-frac {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: var(--space-1) 0 var(--space-2);
}
.conv-mdv-frac__v {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-navy-800);
}
/* Sin nada programado no hay dato que destacar: la raya se lee como ausencia, no como cero.
   Es el único caso con tooltip, así que la afordancia de ayuda vive acá y no en la cifra. */
.conv-mdv-frac__v--na {
    font-weight: 500;
    color: var(--color-cream-500);
    cursor: help;
    border-bottom: 1px dotted var(--color-cream-400);
}
.conv-mdv-frac__meter {
    flex: 1 1 6rem;
    margin-top: 0;
    height: 4px;
    max-width: 12rem;
}

/* 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);
    /* Un tono por debajo de la card que la contiene, no por encima: es contenido citado
       dentro de un contenedor, y el contenedor no puede pesar más que lo que muestra. */
    background: var(--color-cream-100);
    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-notas-list {
    /* `list-style: decimal` explícito: el preflight de Tailwind deja los `ol` sin
       marcador, y acá el numeral es parte del contenido del convenio. */
    list-style: decimal;
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.conv-notas-list li {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--color-cream-900);
    padding-left: var(--space-1);
}
.conv-notas-list li::marker {
    color: var(--color-cream-500);
    font-weight: 600;
}
/* Variante para los medios de verificación, que en la ficha van con el tono `.meta`. */
.conv-notas-list--meta li {
    font-family: var(--font-mono);
    color: var(--color-cream-600);
}
.conv-notas-texto {
    margin: var(--space-2) 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--color-cream-900);
}
.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);
}
/* Sin el clip no hay scroll interno: el modal crece con su contenido (un aviso
   largo en celular) y el que scrollea es el fondo. `margin-block: auto` lo centra
   cuando cabe, sin cortarle el borde de arriba cuando no. */
.modal-backdrop:has(> .modal--overflow-visible) { align-items: flex-start; overflow-y: auto; }
.modal.modal--overflow-visible { max-height: none; margin-block: auto; }
.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;
}
/* Un form con `.modal__body` y `.modal__footer` propios: el padding va en el
   cuerpo, para que el pie llegue a los bordes del modal en vez de quedar como una
   franja gris metida dentro del padding del form. */
.modal form:has(> .modal__body) { padding: 0; }
.modal form > .modal__body { padding: var(--space-4) var(--space-5); }
/* Un `.modal__body` directo del modal (sin form) lleva el mismo padding: sin esto el
   texto de los modales de revisión y de borrar quedaba pegado al borde. */
.modal > .modal__body { 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;
    /* Sin zoom: el área Técnico-Pedagógica usa la escala 1.0 estándar para
       que título, KPIs y tablas coincidan con Resultados y Vinculación. */
}

/* El encabezado de página usa components/page_header.html (.page-header). */
.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;
}

/* Fila de tabs + botón de filtros a la derecha (mismo target HTMX que el
   cuerpo, ver dashboard/partials/_atp_tabs.html). El borde inferior vive en
   la fila para que cruce todo el ancho; los tabs lo "pisan" con margin -1px. */
.atp-tabs-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-cream-300);
    margin-bottom: 0.5rem;
}
.atp-tabs-row .atp-tabs {
    border-bottom: none;
    flex: 1 1 auto;
}
.atp-tabs-row .atp-tab {
    margin-bottom: -1px;
}
.atp-tabs-row .filter-panel {
    /* Eleva el botón sobre la línea de los tabs para darle aire vertical
       (espejo del layout de Plan de Acompañamiento). */
    margin-bottom: 0.4rem;
    flex: 0 0 auto;
}

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

.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;
}
/* Tarjetas KPI de Seguimiento — mismo lenguaje visual que las tarjetas hero
   de gestión-personas y las de tipo de visita (barra superior con degradé +
   número en fuente display), conservando el color semántico por estado. */
.pa-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    padding: 0.85rem 0.95rem;
}
.pa-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pa-kpi-accent, var(--color-navy-700)), transparent 85%);
    opacity: 0.7;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pa-kpi__value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.pa-kpi__label {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-navy-900);
}
.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); }

/* Tarjetas KPI por tipo de visita — clic para filtrar la tabla por ese tipo.
   Mismo lenguaje visual que las tarjetas hero de gestión-personas (.gdp__hero):
   barra superior con degradé, número en fuente display y etiqueta sobria.
   Grid auto-fit para acomodar las 6 tarjetas (Todas + 5 tipos). */
/* Los KPIs por tipo usan .stat-strip + .kpi-card.kpi-card--button (filtro
   clicable con estado .is-active). Ver static/css/main.css → .kpi-card. */

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

/* Badge de cumplimiento Ley de Lobby (tab Eventos) — clic para filtrar. */
.pa-lobby-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-warning-300, var(--color-warning-700));
    background: var(--color-warning-100);
    color: var(--color-warning-700);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.pa-lobby-badge:hover { background: var(--color-warning-200, var(--color-warning-100)); }
.pa-lobby-badge--active {
    box-shadow: 0 0 0 2px var(--color-warning-700);
}
.pa-lobby-badge__icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.pa-lobby-badge strong { font-weight: 800; }

/* Toggle "Solo audiencias de lobby" en la barra de filtros. */
.pa-lobby-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--color-navy-200, var(--color-cream-300));
    background: var(--color-white, #fff);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-navy-800, var(--color-navy-700));
    cursor: pointer;
    white-space: nowrap;
}
.pa-lobby-toggle input { accent-color: var(--color-navy-700); cursor: pointer; }

/* Iconos de documentos adjuntos en la celda del título (tab Eventos). */
.pa-doc-icon {
    display: inline-flex;
    align-items: center;
    color: var(--color-navy-600, var(--color-navy-700));
    margin-left: 0.3rem;
}
.pa-doc-icon:hover { color: var(--color-navy-900); }
.pa-doc-icon i { width: 0.85rem; height: 0.85rem; }

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

.pa-empty-cell { color: var(--color-cream-500); }

/* Toggle column for expandable rows */
.pa-table__col-toggle { width: 2rem; text-align: center; color: var(--color-cream-500); }

/* Clickable rows for Alpine expand */
.atp-row--clickable { cursor: pointer; }
.atp-row--clickable:focus-visible { outline: 2px solid var(--color-navy-500); outline-offset: -2px; }

/* Sub-row that expands below a red row */
.pa-subrow td { padding: 0 !important; border-bottom: 1px solid var(--color-cream-200); }
.pa-subrow__cell { padding: 0.75rem 1rem !important; background: var(--color-cream-50); }

/* Red sessions — vertical timeline (sessions are a numbered sequence) */
.pa-timeline {
    list-style: none;
    margin: 0;
    padding: 0.85rem 1.1rem;
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
}
.pa-timeline__item {
    position: relative;
    padding: 0 0 1rem 1.5rem;
}
.pa-timeline__item:last-child { padding-bottom: 0; }
/* connecting thread between session dots */
.pa-timeline__item::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.55rem;
    bottom: -0.15rem;
    width: 2px;
    background: var(--color-cream-300);
}
.pa-timeline__item:last-child::before { display: none; }
.pa-timeline__dot {
    position: absolute;
    left: 0;
    top: 0.34rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-navy-400);
    box-shadow: 0 0 0 3px white;
}
.pa-timeline__head {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.2rem;
}
.pa-timeline__num {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-navy-700);
    background: var(--color-cream-200);
    padding: 0.08rem 0.45rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.pa-timeline__date {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-cream-600);
    font-variant-numeric: tabular-nums;
}
.pa-timeline__tema {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-navy-900);
    line-height: 1.35;
}
.pa-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.4rem;
    margin-top: 0.35rem;
}
.pa-timeline__meta-item {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.76rem;
    color: var(--color-navy-800);
    line-height: 1.3;
}
.pa-timeline__meta-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cream-600);
}
/* "Ver todas las sesiones" — link below the capped timeline */
.pa-timeline__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-navy-700);
    text-decoration: none;
    transition: color 150ms, gap 150ms;
}
.pa-timeline__more:hover { color: var(--color-terra-700); gap: 0.5rem; }
.pa-timeline__more span { transition: transform 150ms; }
.pa-timeline__more:hover span { transform: translateX(2px); }

/* ── Redes table: column widths + wrapping name ─────────────────────── */
.pa-table--redes .pa-table__col-red-nombre   { width: 24%; }
.pa-table--redes .pa-table__col-red-tipo     { width: 11%; }
.pa-table--redes .pa-table__col-red-coord    { width: 16%; }
.pa-table--redes .pa-table__col-red-ee       { width: 6%; }
.pa-table--redes .pa-table__col-red-period   { width: 12%; }
.pa-table--redes .pa-table__col-red-sesiones { width: 9%; }
.pa-table--redes .pa-table__col-red-ultima   { width: 13%; }
/* Action column must not clip its tooltip (cells default to overflow:hidden) */
.pa-table--redes .pa-table__col-red-action   { width: 3rem; text-align: center; overflow: visible; }

/* Row action — eye button linking to the red's detail page */
.pa-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--radius-sm);
    color: var(--color-cream-600);
    transition: color 150ms, background 150ms;
}
.pa-row-action:hover,
.pa-row-action:focus-visible {
    color: var(--color-navy-700);
    background: var(--color-cream-200);
}
.pa-row-action svg { width: 16px; height: 16px; }

/* Red name wraps onto a second line instead of clipping mid-word */
.pa-red-name {
    display: block;
    font-weight: 600;
    color: var(--color-navy-900);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* Caret stays aligned and rotates smoothly */
.pa-toggle-caret {
    display: inline-block;
    font-size: 0.7rem;
    transition: color 0.12s ease;
}

/* Expanded parent row: highlight + seamless join with its sub-row */
.pa-table--redes tbody tr.pa-row--expanded > td {
    background: var(--color-cream-100);
    border-bottom-color: transparent;
}
.pa-table--redes tbody tr.pa-row--expanded:hover > td { background: var(--color-cream-100); }
.pa-table--redes tbody tr.pa-row--expanded .pa-toggle-caret { color: var(--color-navy-700); }

/* Expanded sessions render as an inset timeline, indented under "Nombre" */
.pa-table--redes .pa-subrow__cell {
    padding: 0.2rem 1rem 0.85rem 2.5rem !important;
    background: var(--color-cream-100);
    border-left: 2px solid var(--color-navy-400);
}
/* The "Sin sesiones" message keeps the indent but needs no card */
.pa-table--redes .pa-subrow__cell > .pa-empty {
    padding: 0.85rem 0;
    text-align: left;
}


/* ── Red detail page (ficha de red — todas las sesiones) ──────────── */
.pa-red-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 64rem;
}
.pa-red-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    padding: 0.85rem 1.1rem;
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
}
.pa-red-detail__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy-900);
}
.pa-red-detail__meta-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cream-600);
}
.pa-red-detail__section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy-900);
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pa-red-detail__count {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-navy-700);
    background: var(--color-cream-200);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}
.pa-red-detail__proposito p {
    margin: 0;
    color: var(--color-navy-800);
    line-height: 1.5;
}
.pa-red-detail__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pa-red-detail__chip {
    font-size: 0.78rem;
    color: var(--color-navy-800);
    background: var(--color-cream-100);
    border: 1px solid var(--color-cream-300);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
}
.pa-red-detail__sessions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Rich session card — canonical record of one session */
.pa-session-card {
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
}
.pa-session-card:last-child { margin-bottom: 0; }
.pa-session-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}
.pa-session-card__num {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--color-navy-600);
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-sm);
}
.pa-session-card__date {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-cream-700);
    font-variant-numeric: tabular-nums;
}
.pa-session-card__opcion {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-navy-700);
    background: var(--color-cream-200);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}
.pa-session-card__tema {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy-900);
    line-height: 1.35;
}
.pa-session-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.6rem;
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    color: var(--color-navy-800);
}
.pa-session-card__meta-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cream-600);
    margin-right: 0.15rem;
}
.pa-session-card__detalle {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.1rem;
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--color-cream-200);
}
.pa-session-card__detalle dt {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-cream-600);
    padding-top: 0.1rem;
}
.pa-session-card__detalle dd {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-navy-800);
    line-height: 1.45;
}

@media (max-width: 640px) {
    .pa-session-card__detalle { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .pa-session-card__detalle dd { margin-bottom: 0.5rem; }
}

@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).
   ============================================ */

/* Los KPIs del Resumen usan .stat-strip + .kpi-card (ver definición del
   componente más arriba en este archivo). El strip antiguo .atp-hero* fue
   retirado en la unificación visual del área Técnico-Pedagógica. */

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

/* Separador de marco dentro de Subdimensiones movilizadas: agrupa las
   dimensiones del MBD (Escuelas y Liceos) vs el modelo de calidad parvularia
   (Jardines Infantiles), con el total de EE distintos del marco a la derecha. */
.atp-subdim__marco {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-navy-700);
}
.atp-subdim__marco:first-of-type { margin-top: 0.2rem; }
.atp-subdim__marco-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-navy-900);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.atp-subdim__marco-total {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
/* Tras un separador de marco, el primer grupo no necesita su borde superior. */
.atp-subdim__marco + .atp-subdim__group { margin-top: 0; border-top: 0; padding-top: 0; }

/* 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;
}
/* Etiqueta-enlace: nombre del EE que lleva a su ficha (Visitas por establecimiento). */
.atp-barlist__label--link {
    color: var(--color-navy-700);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.12s;
}
.atp-barlist__label--link:hover { color: var(--color-navy-900); text-decoration: underline; }
.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__hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem 0;
    font-size: 0.68rem;
    color: var(--color-cream-700);
}
.stage-stepper__hint svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    color: var(--active-stage-color, var(--color-navy-700));
}

.stage-stepper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0.55rem 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; }

/* Accionables list (modal) */
.pa-accionables-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pa-accionable {
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.6rem;
    background: white;
}
.pa-accionable__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; }
.pa-accionable__role,
.pa-accionable__prio,
.pa-accionable__status {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}
.pa-accionable__role--responsable { background: var(--color-navy-100); color: var(--color-navy-800); }
.pa-accionable__role--informar    { background: var(--color-cream-200); color: var(--color-cream-800); }
.pa-accionable__prio--baja  { background: var(--color-success-100); color: var(--color-success-700); }
.pa-accionable__prio--media { background: var(--color-warning-100); color: var(--color-warning-700); }
.pa-accionable__prio--alta  { background: var(--color-terra-100); color: var(--color-terra-800); }
.pa-accionable__status { background: var(--color-cream-100); color: var(--color-cream-700); margin-left: auto; }
.pa-accionable__desc { margin: 0 0 0.25rem; font-size: 0.78rem; color: var(--color-navy-900); line-height: 1.4; }
.pa-accionable__meta { font-size: 0.68rem; color: var(--color-cream-700); display: flex; gap: 0.3rem; flex-wrap: wrap; }

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

/* La línea genérica bajo el motivo de la 403: más chica y pegada al lede. */
.error-page__lede:has(+ .error-page__hint) {
    margin-bottom: var(--space-3);
}

.error-page__hint {
    color: var(--color-cream-600);
    margin: 0 0 var(--space-8);
    line-height: 1.5;
    font-size: 0.85rem;
}

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

/* ─── Panel de filtros compacto y global (components/filter_panel.html) ───
   Un botón "Filtros (N)" + chips activos removibles; el detalle vive en un
   popover (desktop) o drawer lateral (móvil). Reusa los chips Alpine de
   .filter-chip dentro del panel. */
.filter-panel {
    position: relative;
    margin-bottom: 0.5rem;
}
.filter-panel__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-panel__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-cream-400);
    border-radius: var(--radius-full);
    background: white;
    color: var(--color-navy-900);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.filter-panel__trigger:hover { border-color: var(--color-navy-300); }
.filter-panel__trigger--active,
.filter-panel__trigger--open {
    border-color: var(--color-navy-800);
    background: var(--color-navy-50);
}
.filter-panel__trigger:focus-visible {
    outline: none;
    border-color: var(--color-navy-500);
    box-shadow: 0 0 0 2px var(--color-navy-100);
}
.filter-panel__trigger-icon {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-cream-700);
    flex: 0 0 auto;
}
.filter-panel__trigger--active .filter-panel__trigger-icon,
.filter-panel__trigger--open .filter-panel__trigger-icon {
    color: var(--color-navy-600);
}
.filter-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: var(--color-navy-800);
    color: var(--color-cream-50);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

/* Chips activos (espejo de filtro modificado) */
.filter-panel__chips {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}
.filter-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.3rem 0.28rem 0.6rem;
    border: 1px solid var(--color-navy-200);
    border-radius: var(--radius-full);
    background: var(--color-navy-50);
    font-size: 0.76rem;
    max-width: 18rem;
}
.filter-panel__chip-key {
    color: var(--color-navy-600);
    font-weight: 600;
    white-space: nowrap;
}
.filter-panel__chip-val {
    color: var(--color-navy-900);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-panel__chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-navy-100);
    color: var(--color-navy-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.filter-panel__chip-x:hover { background: var(--color-navy-200); }
.filter-panel__chip-x svg { width: 0.55rem; height: 0.55rem; }
.filter-panel__clear-link {
    border: 0;
    background: none;
    padding: 0.2rem 0.35rem;
    color: var(--color-terra-600);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.filter-panel__clear-link:hover { color: var(--color-terra-700); text-decoration: underline; }

/* Popover (desktop) — el detalle de filtros */
.filter-panel__backdrop { display: none; }
.filter-panel__sheet {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: min(36rem, calc(100vw - 2rem));
    background: white;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(15, 35, 66, 0.18);
    display: flex;
    flex-direction: column;
    overflow: visible;
}
/* Botón "Filtros" a la derecha de la fila: alinea el popover a su borde derecho
   para que abra hacia la izquierda y no se salga de la pantalla. */
.filter-panel--align-right .filter-panel__sheet {
    left: auto;
    right: 0;
}
/* Popover que se ajusta a su contenido (pocos filtros) en vez de ocupar siempre
   los 36rem fijos. Mantiene el tope de ancho y la grilla de 2 columnas cuando
   sobran filtros; solo en desktop (en móvil el sheet es un drawer fijo). */
@media (min-width: 769px) {
    .filter-panel--auto .filter-panel__sheet {
        width: max-content;
        min-width: 18rem;
        max-width: min(36rem, calc(100vw - 2rem));
    }
    /* Una sola columna que se ajusta al contenido: las pistas `1fr` se expanden
       al contenedor y rompen el `max-content` del popover. */
    .filter-panel--auto .filter-panel__sheet-body {
        grid-template-columns: minmax(0, max-content);
    }
}
.filter-panel__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-cream-200);
}
.filter-panel__sheet-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-cream-700);
    font-weight: 700;
}
.filter-panel__sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-cream-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.filter-panel__sheet-close:hover { background: var(--color-cream-200); }
.filter-panel__sheet-close svg { width: 0.8rem; height: 0.8rem; }
.filter-panel__sheet-body {
    padding: 0.9rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.8rem;
}
/* Dentro del panel los chips se leen como filas tipo formulario: caja con
   esquinas suaves (no píldora), label + valor juntos a la izquierda y el
   chevron pegado al borde derecho (como un select). */
.filter-panel__sheet-body .filter-chip {
    width: 100%;
    border-radius: var(--radius-md);
}
.filter-panel__sheet-body .filter-chip__button {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
}
.filter-panel__sheet-body .filter-chip__label { flex: 0 0 auto; }
.filter-panel__sheet-body .filter-chip__value-text { flex: 0 1 auto; }
.filter-panel__sheet-body .filter-chip__caret { margin-left: auto; flex: 0 0 auto; }
.filter-panel__sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--color-cream-200);
}
.filter-panel__foot-clear {
    border: 0;
    background: none;
    color: var(--color-cream-700);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.filter-panel__foot-clear:hover:not(:disabled) { color: var(--color-terra-600); }
.filter-panel__foot-clear:disabled { opacity: 0.45; cursor: not-allowed; }
.filter-panel__foot-done {
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-navy-900);
    color: var(--color-cream-50);
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.filter-panel__foot-done:hover { background: var(--color-navy-800); }

/* Drawer lateral en móvil */
@media (max-width: 768px) {
    .filter-panel__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 59;
        background: rgba(10, 22, 40, 0.45);
    }
    .filter-panel__sheet {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        z-index: 60;
        width: min(88vw, 22rem);
        height: 100dvh;
        border-radius: 0;
        border: 0;
        border-left: 1px solid var(--color-cream-300);
        overflow-y: auto;
    }
    .filter-panel__sheet-head {
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
    }
    .filter-panel__sheet-body { grid-template-columns: 1fr; }
    .filter-panel__sheet-foot {
        position: sticky;
        bottom: 0;
        background: white;
    }
    .filter-panel__chip { max-width: 12rem; }
}

/* ============================================================
   Formulación de convenios — matriz de metas
   Un solo cuadro indicador × meta para todo el instrumento.
   Las columnas las decide selectors.formulacion_matriz.
   ============================================================ */

/* Resumen del instrumento (conteos, ponderación, etiquetado) */
.conv-sum { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.conv-sum--grow { flex: 1 1 12rem; min-width: 11rem; }
.conv-sum__k {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-sum__v {
    font-size: 1rem;
    font-weight: 620;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.conv-sum__v small {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-cream-600);
}

.conv-meter {
    height: 6px;
    margin-top: 0.35rem;
    border-radius: var(--radius-full);
    background: var(--color-cream-300);
    overflow: hidden;
}
.conv-meter__fill {
    /* Explicito porque la matriz lo pinta como <span>: inline ignora width y height, y la
       barra queda siempre vacia. El resto del proyecto usa <div> y no lo notaba. */
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-terra-600);
    transition: width var(--transition-base);
}
.conv-meter__fill--ok { background: var(--color-success-500); }

.conv-tri__k {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-cream-600);
}
.conv-tri__v {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 620;
    color: var(--color-navy-900);
}


/* El código del indicador, en monoespaciada, donde una lista lo lleva por delante. */
.conv-alertas__code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-cream-600);
}

/* ---------------------------------------------------------------------------
   Resumen del convenio — sub-pestañas, tarjetas y barras segmentadas

   El resumen responde tres preguntas distintas (cuánto falta, dónde está la falta, qué
   hay que entregar) y en una sola página competían. Cada una es una sub-pestaña, y dentro
   las tarjetas van de a dos: dos lecturas caben lado a lado sin que ninguna se lea como
   la principal.
   --------------------------------------------------------------------------- */
.conv-subtabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-cream-300);
    flex-wrap: wrap;
}
.conv-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-bottom: -1px;
    font-size: 0.875rem;
    color: var(--color-cream-600);
    background: transparent;
    cursor: pointer;
}
.conv-subtab:hover { color: var(--color-navy-900); }
.conv-subtab.is-active {
    background: var(--color-cream-50);
    border-color: var(--color-cream-300);
    font-weight: 500;
    color: var(--color-navy-900);
}
.conv-subtab__n {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-full);
    background: var(--color-cream-200);
    color: var(--color-cream-700);
    font-variant-numeric: tabular-nums;
}
.conv-subtab__n--neg { background: #fef2f2; color: #991b1b; }

.conv-cards { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
/* `grid-auto-rows: 1fr` iguala el alto de las filas para que al reordenar las tarjetas solo
   cambien de lugar: con filas al alto de su contenido, además se encogían y estiraban todas
   a la vez y el cambio se leía como un parpadeo. Solo desde dos columnas: en una sola no hay
   nada que emparejar y estira cada tarjeta al alto de la más larga, con el aire muerto abajo. */
@media (min-width: 900px) {
    .conv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
/* El orden por brecha es CSS y no un re-render: el rango ya viene calculado por fila. */
.conv-cards--brecha .conv-ocard { order: var(--orden-brecha); }

.conv-card { display: flex; flex-direction: column; gap: 0.75rem; }
.conv-card__t {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-card__lead { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.conv-card__big { font-size: 2.4rem; }
.conv-card__big small { font-size: 1.1rem; color: var(--color-cream-600); }
.conv-card__aside {
    flex: 1 1 10rem;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-cream-600);
}
.conv-card__pie { font-size: 0.75rem; line-height: 1.45; color: var(--color-cream-600); margin-top: auto; }
.conv-card__vacio { font-size: 0.85rem; color: var(--color-cream-600); }

/* Barra del cumplimiento ponderado del convenio. Sin marcas de umbral: el 70% del
   semáforo es de cada indicador contra su meta, no del ponderado global. */
.conv-track {
    position: relative;
    height: 0.85rem;
    border-radius: var(--radius-full);
    background: var(--color-cream-300);
    overflow: hidden;
}
.conv-track__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-terra-600);
}
.conv-track__scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--color-cream-600);
    font-variant-numeric: tabular-nums;
}
/* Barra segmentada: el reparto completo en una sola línea, cada tramo con su cifra. */
.conv-seg { display: flex; height: 1.5rem; border-radius: var(--radius-md); overflow: hidden; gap: 2px; }
/* La barra escalada puede quedar muy corta (una fila de 1 contra una de 14). El piso es de
   la barra entera, no de cada tramo: con `min-width` por tramo los tres sumaban más que su
   caja y la cifra salía cortada por la mitad. */
.conv-seg--sm { height: 1.1rem; min-width: 3.25rem; }
.conv-seg--sm .conv-seg__s { min-width: 0; }
/* La pista es el ancho comparable entre filas; la barra ocupa dentro la fracción que le
   toca contra la fila mayor, para que una fila de 1 no se vea igual que una de 14. */
.conv-seg__pista { flex: 1 1 0; min-width: 0; display: flex; }
.conv-seg__s {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Los tramos usan el par pálido de los chips de estado y no los tonos 500 del semáforo:
   son los mismos estados de la misma pantalla, y con el relleno saturado el rojo de una
   fila cualquiera pesaba más que el número que la fila viene a contar. El relleno es el
   borde del chip y la cifra su color de texto —ver `.status-chip--pos` y las que siguen—.
   El fondo del chip no sirve acá: es casi blanco y los tres tramos dejan de distinguirse
   entre sí y del riel. */
.conv-seg__s--pos { background: #bbf7d0; color: #14532d; }
.conv-seg__s--war { background: #fde68a; color: #854d0e; }
.conv-seg__s--neg { background: #fecaca; color: #991b1b; }
.conv-seg__s--mut { background: var(--color-cream-300); color: var(--color-cream-700); }

.conv-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
    color: var(--color-cream-700);
}
.conv-leyenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
/* El aro es lo que salva a la marca: los rellenos pálidos de los tramos son legibles con
   una cifra encima, pero un cuadrito de 0.6rem sin nada dentro casi desaparece contra el
   cream de la tarjeta. Neutro a propósito, para no meter un cuarto tono por estado. */
.conv-leyenda__i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.conv-leyenda__i--pos { background: #bbf7d0; }
.conv-leyenda__i--war { background: #fde68a; }
.conv-leyenda__i--neg { background: #fecaca; }
.conv-leyenda__i--mut { background: var(--color-cream-300); }

/* Salida de la lista cuando se corta: el resto se atiende en Ejecución. */
.conv-lista__mas {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-terra-700);
}
.conv-lista__mas:hover { text-decoration: underline; }

/* Lista de cosas que hay que trabajar: código, nombre y la cifra que dice cuánto falta. */
.conv-lista__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0;
    color: var(--color-cream-900);
}
.conv-lista li + li .conv-lista__item { border-top: 1px solid var(--color-cream-200); }
.conv-lista__item:hover { color: var(--color-terra-700); }
.conv-lista__nombre {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--color-navy-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-lista__cifra {
    font-size: 0.76rem;
    color: var(--color-cream-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.conv-orden { display: flex; align-items: center; gap: 0.4rem; }
.conv-orden__b {
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-cream-300);
    background: var(--color-cream-50);
    font-size: 0.78rem;
    color: var(--color-cream-700);
    cursor: pointer;
}
.conv-orden__b:hover { color: var(--color-navy-900); }
.conv-orden__b.is-active {
    background: var(--color-navy-50);
    border-color: var(--color-navy-200);
    color: var(--color-navy-900);
    font-weight: 500;
}

/* Tarjeta de objetivo: el % grande, los puntos que aporta y lo que le falta. */
.conv-ocard { display: flex; flex-direction: column; gap: 0.7rem; }
.conv-ocard__h { display: flex; align-items: flex-start; gap: 0.5rem; }
.conv-ocard__t {
    font-family: var(--font-body);
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-navy-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.conv-ocard__nums { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.conv-ocard__pct { font-size: 1.7rem; }
.conv-ocard__pct small { font-size: 0.85rem; color: var(--color-cream-600); }
.conv-ocard__pts { font-size: 0.76rem; color: var(--color-cream-600); font-variant-numeric: tabular-nums; }
.conv-ocard__gap {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-success-700);
    font-variant-numeric: tabular-nums;
}
.conv-ocard__gap--neg { color: var(--color-danger-700); }
.conv-ocard__inds { display: flex; flex-direction: column; }
.conv-ocard__inds li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-top: 1px solid var(--color-cream-200);
}
.conv-ocard__f { margin-top: auto; font-size: 0.75rem; color: var(--color-cream-600); }

/* Las tarjetas de la pestaña de medios tienen el alto de su dato y no hay forma de igualarlas:
   tres cortes al lado de siete áreas deja un hueco en la mitad de la fila, y la lista de
   vencidos a lo ancho queda con metros de nada entre el nombre y el plazo. En columnas el
   navegador reparte las tres por alto y la que termina antes recoge la tarjeta siguiente.
   Grilla no sirve acá: reparte por celda y el hueco es justamente la celda que sobra. */
@media (min-width: 900px) {
    .conv-masonry { columns: 2; column-gap: 1rem; }
}
.conv-masonry > * {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* Franja de avance del año: el total y su reparto en una sola línea a lo ancho, arriba de
   las dos tarjetas de la pestaña. No es una tarjeta propia porque la barra dice exactamente
   lo mismo que la leyenda que ocupaba este lugar, y una tarjeta con un número y una barra al
   lado de una lista de diez cortes quedaba con el alto de la lista y el aire muerto abajo. */
.conv-franja { display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; }
.conv-franja__n { flex: 0 0 auto; }
.conv-franja__n .h-stat { font-size: 1.9rem; }
.conv-franja__n small { font-size: 0.95rem; color: var(--color-cream-600); }
/* El tope en rem parte la etiqueta en dos líneas contra el número en vez de estirar la fila
   y empujar la barra a la línea de abajo antes de que haga falta. */
.conv-franja__l { flex: 0 1 auto; max-width: 11rem; font-size: 0.8rem; line-height: 1.4; color: var(--color-cream-600); }
/* El piso en rem es para que la barra se vaya a su propia línea antes de quedar tan angosta
   que los tramos de una cifra se corten, no para reservarle ancho en la fila. */
.conv-franja__b { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }

/* Cortes de entrega y reparto por área: misma fila de tres partes. */
.conv-cortes__row,
.conv-areas__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
}
.conv-cortes__row + .conv-cortes__row,
.conv-areas__row + .conv-areas__row { border-top: 1px solid var(--color-cream-200); }
.conv-cortes__f {
    flex: 0 0 5.6rem;
    font-size: 0.78rem;
    color: var(--color-cream-700);
    font-variant-numeric: tabular-nums;
}
.conv-areas__k {
    flex: 0 0 10.5rem;
    font-size: 0.78rem;
    color: var(--color-cream-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-cortes__n {
    flex: 0 0 1.8rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .conv-card__big { font-size: 2rem; }
    /* El nombre del área toma su propia línea: comprimido al costado de la barra, los
       tramos de una o dos unidades quedaban tan angostos que cortaban su propia cifra. */
    .conv-areas__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 1.8rem;
        gap: 0.35rem 0.7rem;
    }
    .conv-areas__k { grid-column: 1 / -1; flex-basis: auto; }
}

/* Avance temporal: el rango programado contra el que se lee la barra de logro.
   El valor de logro y el avance temporal comparten línea, cada uno pegado a su extremo:
   el temporal queda alineado con el borde derecho de la barra que va debajo. */
.conv-det__logro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.conv-det__tiempo {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-cream-600);
    cursor: help;
    border-bottom: 1px dotted var(--color-cream-400);
}

/* Punto de estado del etiquetado contra el PEL */
.conv-flag {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-cream-200);
    border: 1px solid var(--color-cream-500);
    flex-shrink: 0;
}
.conv-flag--set {
    background: var(--color-navy-600);
    border-color: var(--color-navy-600);
}

.conv-flagbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.conv-flagbtn:hover { background: var(--color-cream-200); }
.conv-flagbtn:hover .conv-flag { border-color: var(--color-terra-500); }

.conv-flagpop { position: relative; display: inline-flex; }
.conv-flagpop__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 15rem;
    max-width: 20rem;
    padding: var(--space-2);
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    background: var(--color-cream-50);
    box-shadow: var(--shadow-lg);
    text-align: left;
}
.conv-flagpop__k {
    padding: 0 0.3rem 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-flagpop__opt {
    display: block;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 0.82rem;
    text-align: left;
    color: var(--color-navy-900);
    cursor: pointer;
}
.conv-flagpop__opt:hover { background: var(--color-navy-50); }
.conv-flagpop__opt[aria-current="true"] {
    background: var(--color-navy-100);
    font-weight: 600;
}
.conv-flagpop__opt--none {
    margin-top: 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-cream-300);
    border-radius: 0;
    color: var(--color-cream-600);
}

/* La tabla */
.conv-matriz-wrap { padding-bottom: var(--space-2); }
.conv-matriz-scroll { overflow-x: auto; }
.conv-matriz {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}
.conv-matriz th,
.conv-matriz td { padding: 0.45rem 0.55rem; vertical-align: middle; }

.conv-matriz thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-cream-50);
    border-bottom: 1px solid var(--color-cream-300);
    font-size: 0.635rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cream-600);
    text-align: left;
    white-space: nowrap;
}
.conv-matriz thead th.conv-matriz__num { text-align: center; }
.conv-matriz thead th.conv-matriz__flagcol,
.conv-matriz thead th.conv-matriz__acts { text-align: center; }
.conv-matriz thead th.conv-matriz__name { z-index: 4; }

/* El nombre absorbe el ancho que sobra; el resto se encoge a su contenido.
   `width:100%` + `max-width:0` es lo que permite elipsis en una tabla de
   layout automático: sin el max-width el navegador ensancha la columna para
   que quepa el texto y nunca trunca. Con un solo año de meta el nombre queda
   con más del doble de ancho que con seis, sin ningún caso especial. */
.conv-matriz .conv-matriz__name {
    width: 100%;
    max-width: 0;
    /* Subio de 12.5rem cuando la columna de estado paso a apilar el chip y el aviso de
       urgencia: ese ancho liberado va al nombre, que es lo que se lee primero. */
    min-width: 17rem;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-cream-50);
    box-shadow: 1px 0 0 var(--color-cream-300);
}
.conv-matriz td:not(.conv-matriz__name),
.conv-matriz thead th:not(.conv-matriz__name) {
    width: 1%;
    white-space: nowrap;
}

.conv-matriz__id { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.conv-matriz__code {
    flex-shrink: 0;
    min-width: 2.2rem;
    font-family: var(--font-mono);
    font-size: 0.735rem;
    color: var(--color-cream-700);
}
.conv-matriz__trunc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-navy-800);
    font-weight: 540;
    text-decoration: none;
}
a.conv-matriz__trunc:hover { text-decoration: underline; }

/* Banda de agrupador: objetivo o centro de responsabilidad */
.conv-matriz__band th,
.conv-matriz__band td {
    background: var(--color-navy-900);
    color: var(--color-cream-50);
    font-size: 0.79rem;
    font-weight: 600;
    text-align: left;
}
.conv-matriz__band > th {
    background: var(--color-navy-900);
    box-shadow: none;
    white-space: normal;
}
/* La banda es una sola celda a lo ancho de la tabla: el titulo toma el espacio que
   necesita y la metadata se va al extremo derecho. Antes el titulo vivia en la columna
   del nombre, que lleva `max-width: 0` para poder truncar los nombres de indicador, y
   se partia en cuatro lineas mientras el resto de la banda quedaba vacio. */
.conv-matriz__bandcell {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
}
/* `1 1 0` y no `1 1 auto`: con base `auto` el titulo pide el ancho de su linea completa
   y empuja la metadata fuera de la tabla. Con base 0 envuelve en dos o tres lineas y la
   fila queda del ancho de la tabla, que es como se ve en produccion. */
.conv-matriz__bandtitle { flex: 1 1 0; min-width: 0; }

.conv-matriz__bandmeta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    justify-content: flex-end;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-navy-200);
}
.conv-matriz__bandacts { display: inline-flex; gap: 0.15rem; margin-left: 0.35rem; }
.conv-matriz__bandacts .btn--icon { color: var(--color-cream-50); }
.conv-matriz__bandacts .btn--icon:hover { background: rgba(253, 252, 251, 0.14); }

/* Filas */
.conv-matriz__row td { border-bottom: 1px solid var(--color-cream-200); }
.conv-matriz__row--sub .conv-matriz__id { padding-left: 1.1rem; }
.conv-matriz__row--sub .conv-matriz__code { color: var(--color-cream-500); }
.conv-matriz__row--sub .conv-matriz__trunc {
    font-weight: 460;
    color: var(--color-cream-700);
}
.conv-matriz__row--mdv td { background: var(--color-cream-100); }
.conv-matriz__row--mdv .conv-matriz__name { background: var(--color-cream-100); }
.conv-matriz__row--mdv .conv-matriz__id { padding-left: 1.1rem; }
.conv-matriz__mdvmeta {
    font-size: 0.75rem;
    color: var(--color-cream-600);
    white-space: nowrap;
}

.conv-matriz__num {
    text-align: center;
    min-width: 4rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.775rem;
    color: var(--color-navy-900);
}
.conv-matriz__na { color: var(--color-cream-500); }
.conv-matriz__flagcol { text-align: center; }
.conv-matriz__attr { text-align: left; }
.conv-matriz__acts { text-align: right; }
.conv-matriz__empty {
    padding: 0.7rem 0.55rem;
    font-size: 0.82rem;
    color: var(--color-cream-600);
}

/* Año en curso: se marca con borde, no solo con fondo */
.conv-matriz thead th.conv-matriz__now {
    color: var(--color-navy-800);
    box-shadow: inset 0 -2px 0 var(--color-navy-400);
}
.conv-matriz td.conv-matriz__now { background: var(--color-navy-50); }

.conv-matriz__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding: 0.7rem 0.55rem 0;
    font-size: 0.735rem;
    color: var(--color-cream-600);
}
.conv-matriz__legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.conv-legend-now {
    display: inline-block;
    width: 14px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-navy-50);
    box-shadow: inset 0 -2px 0 var(--color-navy-400);
}

/* Volver atrás: migas + botón, arriba del encabezado del instrumento */
.conv-navback {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--space-4);
}
.conv-backbtn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-md);
    background: var(--color-cream-50);
    font-size: 0.815rem;
    font-weight: 560;
    color: var(--color-navy-800);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.conv-backbtn:hover {
    border-color: var(--color-navy-400);
    transform: translateY(-1px);
}
.conv-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.775rem;
    color: var(--color-cream-600);
}
.conv-crumbs a { color: var(--color-navy-600); text-decoration: none; }
.conv-crumbs a:hover { text-decoration: underline; }
.conv-crumbs__sep { color: var(--color-cream-500); }
.conv-crumbs__now { color: var(--color-cream-700); font-weight: 560; }

/* Móvil: el nombre baja a un piso que deja ver dos columnas de meta;
   las numéricas no se comprimen, el resto se alcanza desplazando. */
@media (max-width: 760px) {
    .conv-matriz .conv-matriz__name { min-width: 9.4rem; }
    .conv-matriz__num { min-width: 3.6rem; }
    .conv-matriz__code { min-width: 0; }
    .conv-matriz__bandcell { flex-direction: column; align-items: stretch; gap: 0.25rem; }
    .conv-matriz__bandmeta { justify-content: flex-start; }
}

/* El tooltip base usa `white-space: nowrap`, pensado para etiquetas cortas.
   Un nombre de indicador ronda los 65-80 caracteres y se saldría de pantalla,
   así que en la matriz envuelve y se ancla a la izquierda de la celda. */
.conv-matriz__trunc[data-tooltip]:hover::after,
.conv-matriz__trunc[data-tooltip]:focus-visible::after {
    left: 0;
    transform: none;
    width: max-content;
    max-width: 22rem;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}
.conv-matriz__trunc[data-tooltip]:hover::before,
.conv-matriz__trunc[data-tooltip]:focus-visible::before { left: 1rem; }

@media (max-width: 760px) {
    .conv-matriz__trunc[data-tooltip]:hover::after,
    .conv-matriz__trunc[data-tooltip]:focus-visible::after { max-width: 14rem; }
}

/* ============================================================
   Tab Ejecución — plan de trabajo y matriz de ejecución
   El plan es el modo "cola de trabajo": a la izquierda lo que
   necesita atención, a la derecha donde se trabaja.
   ============================================================ */

.conv-plan {
    display: grid;
    grid-template-columns: minmax(0, 21.5rem) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

/* Filtros: el conteo de cada uno es la agenda del año */
.conv-focos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; }
.conv-foco {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-full);
    background: var(--color-cream-50);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-cream-700);
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.conv-foco:hover { border-color: var(--color-navy-400); }
.conv-foco b { font-family: var(--font-mono); font-weight: 700; }
.conv-foco--on {
    background: var(--color-navy-900);
    border-color: var(--color-navy-900);
    color: var(--color-cream-50);
}

/* La cola */
.conv-cola { display: flex; flex-direction: column; max-height: 34rem; overflow-y: auto; }
.conv-cola__grupo {
    padding: 0.6rem 0.1rem 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-cola__fila {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.5rem;
    border: none;
    border-bottom: 1px solid var(--color-cream-200);
    border-radius: var(--radius-md);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.conv-cola__fila:hover { background: var(--color-cream-100); }
.conv-cola__fila[aria-current="true"] {
    background: var(--color-navy-50);
    box-shadow: inset 0 0 0 1px var(--color-navy-200);
}
/* El estado se codifica con el color de la franja y además con el chip de la derecha:
   nunca solo con color. */
.conv-cola__stripe {
    width: 3px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--color-cream-400);
}
.conv-cola__stripe--pos { background: var(--color-success-500); }
.conv-cola__stripe--war { background: var(--color-warning-500); }
.conv-cola__stripe--neg { background: var(--color-danger-500); }
.conv-cola__stripe--mut { background: var(--color-cream-500); }

.conv-cola__main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.conv-cola__t { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.conv-cola__code {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.71rem;
    color: var(--color-cream-600);
}
.conv-cola__nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.81rem;
    font-weight: 560;
    color: var(--color-navy-800);
}
.conv-cola__sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-cream-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-cola__sub em { font-style: normal; font-weight: 600; color: var(--color-terra-700); }
.conv-cola__end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.conv-cola__pct {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 620;
    color: var(--color-navy-900);
    font-variant-numeric: tabular-nums;
}
.conv-cola__pie {
    padding: 0.6rem 0.1rem 0;
    font-size: 0.72rem;
    color: var(--color-cream-600);
}

/* Panel de detalle */
.conv-plan__panel { min-width: 0; }
.conv-det__head { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-4); }
.conv-det__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-cream-600);
}
/* El `h1..h6` base pone DM Serif Display, que el sistema reserva para `.h-stat` y
   `.eyebrow--editorial`. Los títulos del panel son estructura, no acento editorial. */
.conv-det__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 620;
    line-height: 1.3;
    color: var(--color-navy-900);
    letter-spacing: -0.01em;
}
.conv-det__kpis {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3) var(--space-6);
}
.conv-det__resp { font-size: 0.84rem; font-weight: 560; }
.conv-det__sep { height: 1px; background: var(--color-cream-300); margin: var(--space-4) 0; }
.conv-det__block { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.conv-det__h {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-det__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4) var(--space-6);
}
.conv-det__empty { margin: 0; font-size: 0.8rem; color: var(--color-cream-600); }
.conv-det__reporte { margin: 0; font-size: 0.8rem; color: var(--color-cream-700); }
.conv-det__reporte span { display: block; margin-top: 0.15rem; color: var(--color-cream-600); }

/* Acciones del año */
.conv-acc-list { display: flex; flex-direction: column; gap: 0.4rem; }
.conv-acc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    background: var(--color-cream-50);
}
.conv-acc--late { border-color: #fecaca; background: #fef2f2; }
.conv-acc__n {
    width: 1.3rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-cream-600);
}
.conv-acc__body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.conv-acc__body b { font-size: 0.82rem; font-weight: 570; color: var(--color-cream-900); }
.conv-acc__body span {
    font-family: var(--font-mono);
    font-size: 0.71rem;
    color: var(--color-cream-600);
}
.conv-acc__late { color: var(--color-terra-700); font-weight: 600; }
.conv-acc__desc { font-family: var(--font-body) !important; }
.conv-acc__side { display: flex; align-items: center; gap: 0.25rem; }

/* "Sin plan" no es una ausencia: es la próxima tarea */
.conv-noplan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--color-terra-500);
    border-radius: var(--radius-lg);
    background: var(--color-terra-50);
    font-size: 0.82rem;
    color: var(--color-terra-700);
}
.conv-noplan strong { font-weight: 650; }

.conv-mdv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.conv-mdv-list li { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.81rem; min-width: 0; }
.conv-mdv-list__d {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-cream-900);
}
.conv-mdv-list__m {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-cream-600);
}

/* Celdas propias de la matriz de ejecución */
.conv-avance { display: inline-flex; flex-direction: column; gap: 0.18rem; min-width: 4.6rem; }
.conv-avance b { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 620; }
.conv-avance .conv-meter { height: 4px; margin-top: 0; }
.conv-avance i {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-cream-600);
}

/* Estado y tiempo son dos preguntas distintas —qué está pasando y para cuándo— así que
   se apilan en vez de competir en una línea. Comparten el borde izquierdo para que la
   columna se lea como una sola cosa, y el tiempo nunca envuelve: partido en dos líneas
   dejaba un "· 115 días" huérfano que no significa nada solo. */
.conv-matriz__estado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    white-space: normal;
}
/* Un punto mas chico que `--sm`, y solo aca: en la matriz el chip compite por ancho con
   el nombre del indicador, que es lo que se lee primero. Fuera de la tabla el chip
   estandar sigue igual. */
.conv-matriz__estado .status-chip { font-size: 0.66rem; padding: 0.12rem 0.5rem; }
.conv-matriz__estado .conv-matriz__hint {
    display: block;
    margin-top: 0;
    white-space: nowrap;
}
.conv-matriz__estado .conv-vence { margin-top: 0; }

.conv-matriz__hint {
    display: inline-block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-cream-600);
    white-space: nowrap;
    /* Los cuatro usos llevan `data-tooltip`, y sin señal nadie lo busca: el ritmo esperado
       no se explica solo, se explica en el tooltip. Misma convención que `.conv-det__tiempo`,
       pero como decoración de texto: un `border-bottom` sobre un bloque dibuja una raya de
       lado a lado que se lee como separador de fila, no como afordancia. */
    cursor: help;
    text-decoration: underline dotted var(--color-cream-400);
    text-underline-offset: 3px;
}

.conv-plan-pill { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-navy-800); }
.conv-plan-pill em { font-style: normal; font-weight: 600; color: var(--color-terra-700); }
.conv-plan-pill--none { color: var(--color-terra-700); font-weight: 600; }

.conv-matriz__reportbtn {
    padding: 0;
    border: none;
    background: none;
    font-size: 0.74rem;
    color: var(--color-cream-700);
    cursor: pointer;
}
.conv-matriz__reportbtn:hover { text-decoration: underline; color: var(--color-navy-800); }
.conv-matriz__reportbtn--none { color: var(--color-terra-600); font-weight: 600; }

/* Sub-filas de acción: mismo tratamiento que las de MDV en Formulación */
.conv-matriz__row--acc td { background: var(--color-cream-100); }
.conv-matriz__row--acc .conv-matriz__name { background: var(--color-cream-100); }
.conv-matriz__row--acc .conv-matriz__id { padding-left: 1.1rem; }
.conv-matriz__row--acc .conv-matriz__trunc { font-weight: 460; color: var(--color-cream-700); }
.conv-matriz__accmeta {
    font-size: 0.75rem;
    color: var(--color-cream-600);
    white-space: nowrap;
}
.conv-matriz__accmeta > * { margin-right: 0.35rem; }
.conv-matriz__late { color: var(--color-terra-700); font-weight: 600; }

/* Móvil y tablet: el panel se apila bajo la cola, que deja de tener scroll propio
   para no anidar dos áreas desplazables. */
@media (max-width: 1100px) {
    .conv-plan { grid-template-columns: minmax(0, 1fr); }
    .conv-cola { max-height: none; }
}

/* ── Drawer de evidencia (medios de verificación) ──
   Cargar la evidencia es un acto de ejecución; declarar qué evidencia exige el
   convenio es estructura firmada. Por eso acá nunca se edita el plazo. */
.conv-ev-list {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.conv-ev {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    background: var(--color-cream-50);
}
.conv-ev--ok { border-color: #bbf7d0; background: #f6fefb; }
.conv-ev__top { display: flex; align-items: flex-start; gap: 0.45rem; }
.conv-ev__d {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 540;
    color: var(--color-cream-900);
    line-height: 1.35;
}
.conv-ev__m {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.71rem;
    color: var(--color-cream-600);
}
.conv-ev__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.conv-ev__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.conv-ev__form .form-file { max-width: 13rem; }

.conv-ev-add {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-cream-300);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* `font-body` explícito: el `h1..h6` base pone DM Serif Display. */
.conv-ev-add__h {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-ev-add__hint { margin: 0; font-size: 0.78rem; color: var(--color-cream-600); line-height: 1.45; }

/* ── Buscador de personas (form_person_search) ──
   Reemplaza al listbox cuando la lista es una nómina completa: 2.200 personas
   renderizadas como opciones eran ~900 KB de HTML por modal. */
.conv-persona-trigger { display: flex; align-items: stretch; gap: 0.3rem; }
.conv-persona-trigger .form-input { flex: 1; min-width: 0; }
.conv-persona-clear { flex-shrink: 0; align-self: center; color: var(--color-cream-600); }
.conv-persona-clear:hover { background: var(--color-cream-200); color: var(--color-terra-700); }

.conv-persona-list { margin: 0; padding: 0; list-style: none; }
.conv-persona {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
}
.conv-persona:hover { background: var(--color-navy-50); }
.conv-persona__n { font-size: 0.84rem; font-weight: 540; color: var(--color-navy-900); }
/* El RUT (o el correo, para quien no lo tenga) desambigua homónimos; se trunca con
   elipsis en vez de cortar el chip. */
.conv-persona__h {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-cream-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-persona-mas {
    margin: 0;
    padding: 0.45rem 0.65rem;
    font-size: 0.74rem;
    color: var(--color-cream-600);
}

/* Chips del selector abierto (form_person_picker): son la lectura de lo ya elegido y,
   en multi-selección, la única forma de sacar a alguien sin recargar la lista. */
.conv-persona-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.2rem 0.12rem 0.45rem;
    border: 1px solid var(--color-cream-300);
    border-radius: 999px;
    background: var(--color-cream-100);
    font-size: 0.74rem;
    color: var(--color-navy-900);
}
.conv-persona-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-cream-600);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}
.conv-persona-chip__x:hover { background: var(--color-cream-300); color: var(--color-terra-700); }

/* ── Carga de acciones (convenios/acciones_form.html) ──
   Filas de formset que se minimizan a un renglón: cerrada la fila dice N°, título y un
   resumen, y ocho acciones cargadas siguen cabiendo en una pantalla. */
.conv-acc-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: var(--space-4);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-navy-600);
    text-decoration: none;
}
.conv-acc-back:hover { text-decoration: underline; }

.conv-acc-ctx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--space-5);
    padding: 0.7rem var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-navy-50);
    border: 1px solid var(--color-navy-200);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--color-navy-800);
}
.conv-acc-ctx b { color: var(--color-navy-900); }
.conv-acc-ctx__k {
    margin-right: 0.35rem;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-navy-600);
}

.conv-acc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 0.55rem;
}
.conv-acc-bar__k {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
}
.conv-acc-bar__toggle {
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-navy-600);
    cursor: pointer;
}
.conv-acc-bar__toggle:hover { background: var(--color-navy-50); text-decoration: underline; }

.conv-acc-rows { display: flex; flex-direction: column; gap: 0.6rem; }

/* Sin `overflow: hidden`, aunque las esquinas redondeadas lo pidan: los desplegables del
   buscador de personas y del listbox de indicador son `absolute` y tienen que poder salirse
   de la fila. Recortarlos dejaba media opción visible y el resto tapado. Mismo criterio que
   `.card`, que fija `overflow: visible` por esta razón. El borde superior del cuerpo cae
   lejos de las esquinas, así que no se nota el recorte que falta. */
.acc-row {
    border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg);
    background: #fff;
}
.acc-row--error { border-color: var(--color-danger-200); }

.acc-row__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.6rem 0.75rem 0.6rem 0.5rem;
}
.acc-row__toggle {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}
.acc-row__toggle:hover { background: var(--color-cream-100); }
.acc-row__chev {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-cream-600);
    transition: transform var(--transition-fast);
}
.acc-row[data-open="true"] .acc-row__chev { transform: rotate(90deg); }
.acc-row__n {
    flex-shrink: 0;
    min-width: 1.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-navy-800);
    font-variant-numeric: tabular-nums;
}
.acc-row--error .acc-row__n { color: var(--color-terra-700); }
.acc-row__t {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-navy-900);
}
.acc-row__t--empty { font-weight: 500; font-style: italic; color: var(--color-cream-500); }
/* El resumen cede espacio antes que el título: reconocer la fila importa más que el detalle. */
.acc-row__meta {
    flex-shrink: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--color-cream-600);
}
@media (max-width: 720px) { .acc-row__meta { display: none; } }

.acc-row__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-cream-500);
    cursor: pointer;
}
.acc-row__remove:hover { background: var(--color-cream-200); color: var(--color-terra-700); }

.acc-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.1rem;
    padding: var(--space-1) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-cream-200);
}
@media (max-width: 640px) { .acc-row__body { padding: var(--space-1) 0.85rem 0.85rem; } }

.conv-acc-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.7rem;
    border: 1px dashed var(--color-cream-400);
    border-radius: var(--radius-lg);
    background: none;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-navy-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.conv-acc-add:hover {
    background: var(--color-navy-50);
    border-color: var(--color-navy-400);
    color: var(--color-navy-800);
}

.conv-acc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-cream-300);
}
.conv-acc-foot__hint {
    margin: 0 0 0 auto;
    font-size: 0.78rem;
    color: var(--color-cream-600);
}
@media (max-width: 640px) { .conv-acc-foot__hint { margin-left: 0; } }

/* ============================================
   ASESORÍA: componentes compartidos (Encuesta Modelo de Gestión)
   Portado desde el mockup aprobado (.superpowers/sdd/2026-08-10-asesoria-modelo-gestion/
   reference/mockup.css). Valores sin cambiar; solo se tradujeron los custom
   properties del mockup a los tokens globales ya definidos arriba en este archivo:
   var(--navy-*), var(--terra-*), var(--cream-*) -> var(--color-navy-*), var(--color-terra-*),
   var(--color-cream-*); var(--r-sm), var(--r-md), var(--r-lg), var(--r-full) -> var(--radius-sm),
   var(--radius-md), var(--radius-lg), var(--radius-full). --font-mono y --font-display ya son
   globales con el mismo nombre, no se tocaron. (Ojo al editar este comentario: un literal
   "*" seguido de "/" cierra el comentario CSS antes de tiempo — evitar esa secuencia.)

   NOTA: el mockup también define `.bridge` (SVG del puente de 7 palancas, usado en
   la futura pestaña "Cómo leer"). Esa clase colisiona con `.bridge` ya existente en
   la sección "DASHBOARD: BRIDGE VISUALIZATION" (usada por level_dep.html /
   level_slep.html, con una implementación totalmente distinta). No se portó acá.
   Nombre DECIDIDO para cuando se construya esa pestaña (Task 7): `.mg-bridge`
   ("mg" = Modelo de Gestión, el mismo prefijo usado abajo para `.mg-panel`).

   Namespace `.mg-*`: el mockup también define un `.panel` genérico que colisiona
   con `.landing-page .panel` (templates/core/landing.html) — esa regla scoped no
   declara padding, así que un `.panel` de nivel raíz le agrega padding sin querer.
   Portado acá como `.mg-panel`/`.mg-panels` en vez de `.panel`/`.panels`.
   ============================================ */
:root {
    /* Colores de la barra Likert 1-5, desfavorable -> favorable. Validados para
       daltonismo (ΔE 17,5 en el par adyacente más difícil) — no reemplazar por
       navy/terra sueltos. */
    --lk1: #a63d28;
    --lk2: #e0865f;
    --lk3: #d6d3d1;
    --lk4: #4b7fb5;
    --lk5: #132c4f;

    /* Rampa de la matriz de calor: la misma familia de color de la barra Likert,
       interpolada en 16 pasos con el gris de --lk3 anclado en el 3,0 de la
       escala. Está acá y no junto a `.heat` porque nace de --lk1..--lk5: si esos
       cinco cambian, estos dieciséis se recalculan, no se retocan a ojo.

       Divergente y no secuencial por medición, no por gusto: la rampa navy de un
       solo tono no separa bandas contiguas ni estirada a 20 pasos (ΔE Oklab medio
       0,039, bajo el umbral en que dos celdas vecinas se distinguen), mientras
       esta llega a 0,054 con el mismo largo. Con la escala secuencial de 6 pasos
       que había antes, el 92% de las celdas caía en dos tonos y la matriz se leía
       monocroma: el ojo no encontraba la celda mala, que es lo único que se le
       pide a un mapa de calor.

       16 pasos y no 20 por dónde cae el cambio de color del texto. Con 20, el
       cruce de #fff a navy queda en 3,80, que es justo la zona donde se apilan
       los promedios reales, y dos valores prácticamente iguales (3,81 y 3,83)
       terminaban con el número de colores opuestos: parecían categorías
       distintas cuando la diferencia es ruido. Con 16 el cruce se corre fuera de
       esa zona.

       La escala es ABSOLUTA sobre 1 a 5, no relativa a los datos de la tabla: la
       misma nota tiene el mismo color en todos los informes y entre mediciones de
       un mismo SLEP. Normalizar por mínimo y máximo de cada matriz haría que un
       3,4 se pintara distinto según con quién le tocó salir en la tabla. */
    --heat-0: #ad462f;
    --heat-1: #bc593c;
    --heat-2: #cf6f4e;
    --heat-3: #d97d58;
    --heat-4: #e0906e;
    --heat-5: #dfa48b;
    --heat-6: #dcb7a7;
    --heat-7: #d9cac3;
    --heat-8: #c5c9ce;
    --heat-9: #a2b4c8;
    --heat-10: #809fc1;
    --heat-11: #608dbc;
    --heat-12: #4374a8;
    --heat-13: #355e8d;
    --heat-14: #274a74;
    --heat-15: #19365b;
}

/* ── Barra Likert apilada ──────────────────────────────────────── */
/* .lk-wrap existe solo para posicionar la llave de favorables: es el contenedor
   relativo sobre el que .lk-brace se ubica en absoluto. Sin llave no agrega
   nada, por eso no lleva alto ni fondo propios. */
.lk-wrap { position: relative; width: 100%; min-width: 0; }
.lk { display: flex; gap: 2px; height: 22px; width: 100%; min-width: 0; }
.lk--slim { height: 14px; }
.lk--tall { height: 30px; }
/* Sin `overflow: hidden` en el segmento: recortaba el ::after de [data-tooltip],
   que se dibuja fuera de la caja, y el hover quedaba sin información. El recorte
   del número vive en .lk__seg-val, que no es el elemento posicionado. */
.lk__seg {
    border-radius: 3px; min-width: 0; display: grid; place-items: center;
    font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    transition: filter .12s ease;
}
.lk__seg-val { max-width: 100%; overflow: hidden; }
.lk__seg:hover { filter: brightness(1.12); }
.lk__seg--1 { background: var(--lk1); color: #fff; }
.lk__seg--2 { background: var(--lk2); color: var(--color-terra-900); }
.lk__seg--3 { background: var(--lk3); color: var(--color-cream-800); }
.lk__seg--4 { background: var(--lk4); color: #fff; }
.lk__seg--5 { background: var(--lk5); color: #fff; }

/* Llave que agrupa los dos segmentos favorables y rotula su suma. El trazo va
   abajo y las patitas suben hacia la barra (border-bottom + laterales, sin
   border-top), para que se lea como "estos dos segmentos, juntos, son esto". */
.lk-brace { position: absolute; top: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.lk-brace__tick {
    display: block; width: 100%; height: 4px; margin-top: 2px;
    border: 1.5px solid var(--color-cream-400); border-top: none;
    border-radius: 0 0 3px 3px;
}
.lk-brace__label {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .02em;
    color: var(--color-cream-700); white-space: nowrap; margin-top: .1rem;
    font-variant-numeric: tabular-nums;
}
/* La llave se dibuja fuera del alto de .lk, así que el contenedor tiene que
   reservar ese espacio o el texto siguiente se le monta encima. */
.lk-wrap:has(.lk-brace) { margin-bottom: 1.25rem; }

/* ── Medidor de promedio 1-5 ───────────────────────────────────── */
.mean { display: flex; align-items: center; gap: .5rem; }
.mean__val {
    font-family: var(--font-display); font-size: 1.15rem; color: var(--color-navy-900);
    font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right;
}
.mean__val--sm { font-size: 1rem; }
.gauge { position: relative; width: 74px; height: 6px; background: var(--color-cream-300); border-radius: var(--radius-full); flex-shrink: 0; }
.gauge__fill { position: absolute; inset: 0 auto 0 0; background: var(--color-navy-600); border-radius: var(--radius-full); }
.gauge__ref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-terra-600); border-radius: 1px; }
.delta { font-family: var(--font-mono); font-size: .7rem; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.delta--pos { color: var(--color-navy-600); }
.delta--neg { color: var(--color-terra-700); }
.delta--flat { color: var(--color-cream-500); }

/* ── Nivel de análisis ─────────────────────────────────────────── */
.lvlbar {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    background: var(--color-navy-50); border: 1px solid var(--color-navy-200); border-radius: var(--radius-md);
    padding: .45rem .75rem; margin: 0 0 .9rem;
}
.lvlbar__steps { display: flex; gap: 3px; flex: none; }
.lvlbar__steps i { display: block; width: 16px; height: 6px; border-radius: 2px; background: var(--color-navy-200); }
.lvlbar__steps i.on { background: var(--color-navy-700); }
/* Sin nivel: mismo medidor, otro tono y sin escalera. Es lo que separa un
   escalón del drill-down (navy, con pasos) de un indicador que no está en esa
   escalera -- la recomendación, o las afirmaciones destacadas, que cruzan todas
   las palancas.

   Antes esto se intentó dibujando la escalera igual con los tres pasos vacíos, y
   una escalera vacía es un acertijo: se lee como un nivel que no cargó. El tono
   lo dice sin pedir interpretación, y la anatomía no cambia (mismo alto, mismo
   radio, mismo nombre en versalitas, misma base a la derecha), así que los dos
   medidores siguen siendo la misma familia. */
.lvlbar--plain { background: var(--color-cream-100); border-color: var(--color-cream-300); }
/* La escala pesa menos que la unidad de agregación: el nombre es de qué se está
   viendo el promedio y la escala es una precisión sobre el número. */
.lvlbar__scale { font-weight: 500; color: var(--color-cream-700); letter-spacing: .08em; }
.lvlbar__name {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .11em; color: var(--color-navy-900);
}
.lvlbar__base { font-size: .79rem; color: var(--color-cream-700); margin-left: auto; text-align: right; }
.lvlbar__base b { color: var(--color-navy-900); font-weight: 600; }
@media (max-width: 760px) { .lvlbar__base { margin-left: 0; text-align: left; width: 100%; } }

/* ── Separador de nivel ────────────────────────────────────────── */
.rule { display: flex; align-items: baseline; gap: .75rem; margin: .5rem 0 -.25rem; }
.rule__label {
    font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--color-navy-800); font-weight: 500; white-space: nowrap;
}
.rule__hint { font-size: .76rem; color: var(--color-cream-600); }
.rule__line { flex: 1; height: 1px; background: var(--color-cream-300); align-self: center; }
/* Bloque de un indicador dentro de la tarjeta de Síntesis. Reemplazó a la
   variante `.rule--in-card` del separador: el encabezado de cada bloque es su
   propio `.lvlbar` (ver `level_bar`), así que lo único que hacía falta acá era
   separar un bloque del siguiente. La raya entre bloques va como border-top del
   segundo y no como un `.rule` con etiqueta, porque la etiqueta la dice el
   medidor -- dos rótulos seguidos con el mismo texto era el problema original. */
.synth-block + .synth-block {
    margin-top: 1.6rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--color-cream-200);
}
/* Aire entre el subtítulo de la tarjeta y el primer medidor: el `.card__head`
   cierra pegado y el medidor es una banda con fondo, no texto suelto. */
.synth-block:first-of-type { margin-top: 1.1rem; }

/* Clave de lectura dentro de una tarjeta: tres elementos rendereados de verdad
   (barra, % favorable, nota) con su glosa al lado. Es un `<details>` cerrado:
   ayuda de primera vez, que quien ya sabe leer la fila salta en vez de leer de
   nuevo en cada palanca. El fondo crema lo separa de las filas de datos que
   explica sin agregar otro borde a la página. */
.readkey {
  background: var(--color-cream-100);
  border-radius: var(--radius-md);
  margin: .7rem 0 .55rem;
}
/* El triángulo nativo se reemplaza por un chevron propio para que el resumen se
   lea como el resto de los encabezados chicos de la sección y no como un widget
   del navegador. `list-style` cubre Firefox y `::-webkit-details-marker` Safari. */
.readkey__summary {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem;
  font-size: .78rem; font-weight: 600; color: var(--color-navy-800);
  cursor: pointer; list-style: none; border-radius: var(--radius-md);
}
.readkey__summary::-webkit-details-marker { display: none; }
.readkey__summary::before {
  content: ""; flex: none; width: .42rem; height: .42rem;
  border-right: 1.5px solid var(--color-cream-600); border-bottom: 1.5px solid var(--color-cream-600);
  transform: rotate(-45deg); transition: transform var(--transition-fast);
}
.readkey[open] > .readkey__summary::before { transform: rotate(45deg); }
.readkey__summary:hover { color: var(--color-terra-700); }
.readkey__summary:focus-visible { outline: 2px solid var(--color-terra-600); outline-offset: 2px; }
.readkey__body { padding: 0 .9rem .8rem; }
/* Qué fila es el ejemplo. Sin esta línea el ejemplo se confunde con los otros
   dos lugares de la pestaña donde aparecen los mismos tres elementos: el
   listado de palancas y la tarjeta grande de la palanca. */
.readkey__src {
  font-family: var(--font-mono); font-size: .68rem; color: var(--color-cream-600);
  margin: 0 0 .55rem;
}
.readkey__grid {
  display: grid;
  /* 200px y no 230: son tres glosas y con 230 no cabían las tres en el ancho de
     la columna derecha del `.split`, así que la tercera caía sola a una segunda
     fila y dejaba dos tercios del recuadro en blanco. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .8rem 1.2rem;
}
.readkey__item { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.readkey__item p { font-size: .78rem; line-height: 1.45; color: var(--color-cream-700); margin: 0; }
.readkey__item b { color: var(--color-navy-900); font-weight: 600; }
/* El demo alinea a la izquierda y no estira: la barra tiene que verse del mismo
   porte que en las filas, no del ancho de la columna de la glosa. */
.readkey__demo { display: flex; align-items: center; gap: .5rem; min-height: 22px; }
.readkey__demo .lk-wrap { flex: 1; }

/* ── Cobertura ─────────────────────────────────────────────────── */
/* Una sola forma y un solo corte a la vez, elegido en el selector de
   agrupación. Antes la tarjeta mostraba los seis cortes juntos en una grilla de
   dos columnas y con dos tipos de gráfico distintos -- columnas para los cortes
   de pocas categorías, barras horizontales rankeadas para los de etiquetas
   largas -- y el SLEP pidió lo contrario: que sea siempre el mismo gráfico y que
   se cargue un corte por vez. Quedó el histograma de columnas para los seis,
   validado en un prototipo con los datos reales. De ahí que se hayan ido
   la grilla de dos columnas con su media query y todo el layout
   rankeado dentro de esta tarjeta; las `.rb` siguen vivas, pero solo para la
   pestaña Abiertas. */
/* Sin relleno de fondo. El corte vivía sobre un panel crema, que tenía sentido
   cuando eran seis paneles en una grilla: el fondo era lo que decía dónde
   empezaba y terminaba cada uno. Con un corte a la vez no hay nada de qué
   separarlo -- es el único contenido de la tarjeta -- y el rectángulo crema
   pasaba a ser el elemento más grande y más llamativo del gráfico, compitiendo
   con las columnas justamente en el aire que la escala fija deja arriba. El
   encabezado del bloque y su línea inferior ya alcanzan para delimitarlo.

   Queda el padding lateral, que no es decorativo: alinea el gráfico con el
   encabezado de la tarjeta y le deja aire a la primera y la última columna. */
.cov-block { padding: .7rem .85rem .6rem; }
.cov-block h4 {
    display: flex; align-items: baseline; gap: .5rem;
    font-family: var(--font-mono); font-size: .63rem; text-transform: uppercase; letter-spacing: .11em;
    color: var(--color-cream-600); font-weight: 500; margin-bottom: .45rem; padding-bottom: .25rem; border-bottom: 1px solid var(--color-cream-300);
}
/* El "n respuestas" no va en el encabezado del bloque: arriba está el KPI y es
   el mismo número para cualquier corte. Solo se declara la excepción -- quién
   no contestó, que sí cambia de un corte a otro. */
.cov-block__miss { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--color-cream-500); }

/* Reparto: una sola barra 100% apilada + llave. */
/* Sin `overflow: hidden` para redondear las puntas: recortaría el tooltip del
   propio segmento. El radio va en el primer y el último segmento. */
/* Cualquiera de los seis cortes, siempre con la misma forma: histograma de
   columnas. Los ordinales (edad, antigüedad) van en el orden del cuestionario y
   los nominales por frecuencia; la única diferencia de estilo es el label del
   eje, más abajo.
   El `padding-top` reserva justo el alto de la cifra que va arriba de la
   columna (`.cov-hist__n`): el `.cov-hist__slot` mide solo la zona de barra
   -- así el 100% es exacto y las alturas siguen siendo proporcionales -- y la
   cifra de la columna más alta se sale de ese alto hacia arriba. Bajó de 1rem a
   .85rem: con la barra más ancha y el slot más alto, 1rem dejaba un hueco de
   más entre el título del panel y la punta de la columna más alta. */
/* Sin `gap` entre columnas a propósito: así los border-top de los labels se
   juntan en un solo eje horizontal continuo. La separación entre barras la da
   el ancho de la barra (78% de su carril), no un hueco en la grilla. */
.cov-hist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: .85rem; }
/* Sin estado de hover: la tarjeta de cobertura no tiene tooltips ni nada que
   hoverear (ver el comentario de la grilla en `_tab_resumen.html`), y un fondo
   que reacciona al cursor promete una interacción que no existe. */
.cov-hist__col { display: flex; flex-direction: column; gap: .3rem; }
.cov-block__scale {
    margin-left: auto; font-family: var(--font-mono); font-size: .6rem; font-weight: 400;
    color: var(--color-cream-500); letter-spacing: 0; text-transform: none; flex: none;
}
/* El slot es el 100% de quienes respondieron -- la escala es fija de 0 a 100%,
   la columna más alta llega a su porcentaje y no al tope de la caja -- así que
   es este alto el que gobierna cuántos píxeles mide un punto porcentual. Venía
   de 108px y con eso los cortes de cola larga no se leían: medido con los datos
   reales del corte por área, una categoría de 1,3% daba 1px, una de 3,9% daba
   4px y una de 11,7% daba 13px, y las tres se leían como "casi nada", sin
   diferencia entre ellas. Con 220px miden 3px, 9px y 26px, y ahí dos columnas
   chicas vuelven a distinguirse una de la otra. El slot puede darse este alto
   porque ahora se carga un corte a la vez: no hay seis gráficos repartiéndose
   el alto de la tarjeta. */
/* El rótulo de la escala va al final de la cabecera del panel, no sobre el
   gráfico: es el que explica por qué sobra aire arriba de las barras. */
.cov-hist__slot { height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }
/* "15 · 16%" en una sola línea: si se parte, la cifra deja de leerse como una
   sola unidad y además desalinea el tope de las columnas vecinas. */
.cov-hist__n {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600; color: var(--color-navy-900);
    text-align: center; line-height: 1; flex-shrink: 0; margin-bottom: .2rem; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* La barra no llena su carril. Con un corte a la vez el gráfico se lleva el
   ancho entero de la tarjeta (~1239px medidos) y ese ancho se reparte entre las
   categorías del corte: con dos categorías cada barra dispone de la mitad, con
   ocho de un octavo. El 78% es lo que deja el aire entre una barra y la
   siguiente -- la grilla no tiene gap, la separación sale de acá.
   El techo de 300px es para el otro extremo del reparto: sin él, un corte de
   dos categorías dibujaba dos lozas de ~480px que dejan de leerse como barras.
   Y el `max-width: 62px` que había antes era de cuando el gráfico vivía en media
   tarjeta: con el ancho completo quedaban dos palitos perdidos en dos carriles
   de 600px. Verificado en el prototipo: con 8 categorías la barra sale de 111px
   y con 2 se queda en el techo. */
.cov-hist__bar { width: 78%; max-width: 300px; margin: 0 auto; background: var(--color-navy-200); border-radius: 3px 3px 0 0; min-height: 2px; flex-shrink: 0; }

/* El `min-height` reserva DOS líneas de etiqueta, siempre, aunque la etiqueta
   ocupe una. Es lo que termina de dejar quieto el alto de la tarjeta: el slot y
   el ancho ya no dependen del corte, pero la etiqueta sí envolvía o no según el
   largo del texto y las categorías que se reparten el ancho, y eso movía la
   tarjeta 13px entre un corte y otro (medido: 505px en grupo, género, edad y
   antigüedad, contra 518px en área y rol). Trece píxeles no son los 165px de la
   grilla anterior, pero se ven igual: la tarjeta de abajo salta.

   Dos y no tres: dos es el máximo medido en los seis cortes con las categorías
   reales del instrumento, incluido el peor caso -- ocho columnas de 115px con
   "Planificación y control de gestión" y "Infraestructura y mantenimiento". Se
   reserva en vez de recortar porque la etiqueta nominal no se puede abreviar a
   ojo: "Coordinador/a o Encargado/a de Unidad/Área" es un rol real y
   "Coordinado…" no dice cuál. Si algún día entra una categoría que necesite una
   tercera línea, la tarjeta vuelve a cambiar de alto en ese corte: subir el
   reserve a 3, no truncar. */
.cov-hist__x {
    font-family: var(--font-mono); font-size: .66rem; color: var(--color-cream-600); text-align: center; line-height: 1.2;
    padding-top: .25rem; border-top: 1px solid var(--color-cream-300);
    /* El +1px es el `border-top`: con `border-box`, el `min-height` lo incluye,
       así que sin él la reserva se queda un píxel corta y el corte de dos líneas
       vuelve a ser un píxel más alto que los demás. */
    min-height: calc(2 * 1.2em + .25rem + 1px);
}
/* Las etiquetas nominales se dejan envolver y se alinean arriba, para que el eje
   siga siendo una sola línea horizontal independiente de cuánto ocupe cada
   etiqueta. Los ordinales no lo necesitan: `_compact()` ya los deja en "30–34" o
   "<1". Ahora que el corte se carga solo hay ancho para envolver: los cortes de
   muchas categorías (área, rol) tienen el ancho entero de la tarjeta repartido
   entre sus columnas, que es lo que antes obligaba a mandarlos a barras
   rankeadas para que "Establecimientos Educacionales" no se partiera bajo una
   columna de 60px. */
.cov-hist--nominal { column-gap: .25rem; }
/* Sin `hyphens: auto`: en una columna angosta partía a mitad de palabra
   ("Estable-cimientos Educacio-nales", "Pedagógi-co") y se leía peor que
   truncado. `overflow-wrap: break-word` queda solo como último recurso, para una
   palabra que no quepa ni sola. */
.cov-hist--nominal .cov-hist__x { white-space: normal; overflow-wrap: break-word; align-self: stretch; }

/* ── Definiciones ──────────────────────────────────────────────── */
/* Cada palanca es su propio contenedor. Con una hairline de border-top y .55rem
   de padding, las siete definiciones se leian como un bloque continuo dentro de
   la columna: no se veia donde termina una palanca y empieza la siguiente. Mismo
   tratamiento que .mg-panel, que ya vive en esta pestaña. */
/* Grid y no columns: con multi-columna el orden de lectura baja por columna
   (1-2 / 3-4 / 5-6-7) y los numeros saltan al leer de izquierda a derecha. */
.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.def-item {
    background: var(--color-cream-100); border: 1px solid var(--color-cream-300);
    border-radius: var(--radius-lg); padding: .8rem .9rem;
    display: grid; grid-template-columns: auto 1fr; gap: .55rem;
}
/* La meta se ancla abajo para que la fila quede pareja aunque las
   definiciones tengan largos muy distintos. */
.def-item > div { display: flex; flex-direction: column; }
.def-item h4 { font-size: .88rem; color: var(--color-navy-900); margin-bottom: .15rem; }
.def-item p { font-size: .8rem; color: var(--color-cream-700); line-height: 1.45; }
.def-item .rank__meta { margin-top: auto; padding-top: .5rem; }

/* ── Audiencias ────────────────────────────────────────────────── */
.aud-chip {
    display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .6rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .1rem .4rem; border-radius: 3px; white-space: nowrap;
}
.aud-chip--slep { background: var(--color-navy-100); color: var(--color-navy-800); }
.aud-chip--dir { background: var(--color-terra-100); color: var(--color-terra-800); }
.aud-chip--all { background: var(--color-cream-200); color: var(--color-cream-700); }

.pl-fav { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--color-navy-900); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }

/* ── Barras agrupadas por palanca ──────────────────────────────── */
/* Un grupo por palanca, dos barras (equipo SLEP / directores/as) sobre un mismo
   eje 0-100%. El eje se rotula una sola vez arriba y se repite como grilla
   dentro de cada .gb-track, así que .gb-axis y .gb-bar comparten exactamente la
   misma grilla de columnas: cambiar una sin la otra descalza los ticks. */
.gb-axis__row, .gb-bar { display: grid; grid-template-columns: 96px 1fr 4.5ch; gap: .5rem; align-items: center; }
/* El eje se dibuja una vez arriba, fuera de .gb-group, así que tiene que
   reconstruir las dos grillas anidadas de una fila (columna de la palanca +
   columna de barras) para caer justo sobre los rieles: la de afuera repite
   grid-template-columns y padding lateral de .gb-group, y .gb-axis__row repite
   el padding y el borde transparente de .gb-bar. */
.gb-axis { display: grid; grid-template-columns: minmax(200px,1fr) minmax(280px,2.5fr); gap: .9rem; padding: 0 .5rem .4rem; }
.gb-axis__row { padding: .2rem .3rem; border: 1px solid transparent; }
.gb-axis__scale { position: relative; height: .8rem; }
.gb-axis__scale span {
    position: absolute; top: 0; transform: translateX(-50%);
    font-family: var(--font-mono); font-size: .62rem; color: var(--color-cream-600); font-variant-numeric: tabular-nums;
}
.gb-axis__scale span:nth-child(1) { left: 0; transform: none; }
.gb-axis__scale span:nth-child(2) { left: 25%; }
.gb-axis__scale span:nth-child(3) { left: 50%; }
.gb-axis__scale span:nth-child(4) { left: 75%; }
.gb-axis__scale span:nth-child(5) { left: auto; right: 0; transform: none; }

.gb-group { display: grid; grid-template-columns: minmax(200px,1fr) minmax(280px,2.5fr); gap: .9rem; padding: .7rem .5rem; align-items: center; }
.gb-group + .gb-group { border-top: 1px solid var(--color-cream-200); }
/* Mismo motivo que el resto de los grids de esta sección: los dos `minmax(…)`
   fuerzan ~500px de ancho mínimo y más angosto que eso la fila se corta. */
@media (max-width: 760px) {
  .gb-group { grid-template-columns: 1fr; gap: .5rem; }
}
.gb-label { display: flex; gap: .45rem; align-items: flex-start; }
.gb-label b { font-size: .9rem; color: var(--color-navy-900); }
.gb-bars { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.gb-bar { padding: .2rem .3rem; border-radius: var(--radius-sm); border: 1px solid transparent; }
.gb-bar:hover { background: var(--color-navy-50); border-color: var(--color-navy-200); }
/* El riel es el eje completo (0-100%), no el dato: sin él las dos barras de un
   grupo no se pueden comparar contra la escala, solo entre sí. */
.gb-track {
    position: relative; height: 14px; min-width: 0; border-radius: 4px;
    background:
      repeating-linear-gradient(to right,
        transparent 0, transparent calc(25% - 1px),
        var(--color-cream-300) calc(25% - 1px), var(--color-cream-300) 25%),
      var(--color-cream-200);
}
.gb-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; min-width: 3px; }
.gb-fill--slep { background: var(--color-navy-600); }
.gb-fill--dir { background: var(--color-terra-600); }
.gb-val { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--color-navy-900); font-variant-numeric: tabular-nums; text-align: right; }
.gb-gap { font-family: var(--font-mono); font-size: .66rem; color: var(--color-cream-600); padding-left: calc(96px + .5rem + .3rem); }
@media (max-width: 760px) {
  .gb-axis { grid-template-columns: 1fr; }
  .gb-axis__pad { display: none; }
  .gb-axis__row, .gb-bar { grid-template-columns: 88px 1fr 4.5ch; }
  .gb-gap { padding-left: 0; }
}
.legend__sw--slep { background: var(--color-navy-600); }
.legend__sw--dir { background: var(--color-terra-600); }

.grp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1rem; align-items: start; }
.grp { border: 1px solid var(--color-cream-300); border-radius: var(--radius-lg); padding: .9rem 1rem; background: var(--color-cream-100); }
.grp__nums { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .5rem 0 .7rem; }
.grp__num b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-navy-900); line-height: 1.1; font-variant-numeric: tabular-nums; }
.grp__num span { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; color: var(--color-cream-600); }
.grp__rechead { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-top: .7rem; }

/* ── Heatmap ───────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Aire ARRIBA del contenido, para que el tooltip de un encabezado se pueda pintar
   hacia arriba. `overflow-x: auto` fuerza el eje Y a `auto` (la spec no deja
   mezclar un eje recortado con el otro visible), así que el contenedor recorta
   también por arriba, y ahí el `::after` de un `<th>` -- que tiene 3px de margen
   sobre sí -- no entra: `tooltip-placement.js` lo daba vuelta hacia abajo, sobre
   la primera fila de datos.

   El `padding` abre la zona pintable dentro del recorte y el `margin` negativo se
   la devuelve al layout, así que la tabla queda donde estaba y no aparece un
   agujero blanco sobre cada matriz. Lo que sí queda es una franja invisible del
   contenedor por encima de la tabla, y por eso el `pointer-events: none`: sin él
   esa franja se come los clicks de lo que está arriba (el selector de corte y el
   desplegable de componente). Los recupera la tabla, que es donde vive todo lo
   que necesita mouse acá.

   Lo que el `pointer-events` sí cuesta: el navegador no hace hit-test sobre la
   barra de scroll de un elemento que no recibe puntero, así que en pantalla
   angosta esa barra deja de arrastrarse. La rueda y el gesto táctil sobre la
   tabla siguen scrolleando, que es como se recorre esto en la práctica.

   Los 88px son el alto del tooltip de "Brecha" (~66px con el ancho del
   `data-tooltip-wrap`) más los 8 de separación y los 6 de holgura que pide
   `tooltip-placement.js`. Si ese texto crece y deja de entrar, no se rompe nada:
   el script vuelve a dar vuelta el cartel hacia abajo, que es el comportamiento
   que había antes de esta regla. */
.table-scroll--headroom { padding-top: 88px; margin-top: -88px; pointer-events: none; }
.table-scroll--headroom > table { pointer-events: auto; }
.heat { border-collapse: separate; border-spacing: 3px; font-size: .8rem; width: auto; margin-inline: auto; }
.heat th { font-weight: 600; color: var(--color-cream-700); font-size: .74rem; text-align: center; vertical-align: bottom; padding: .2rem .3rem; line-height: 1.25; }
.heat th.rowhead { text-align: left; font-weight: 600; color: var(--color-navy-900); font-size: .83rem; white-space: nowrap; padding-right: .6rem; min-width: 190px; }
/* La esquina superior izquierda: hereda de .rowhead el ancho y la alineación
   (encabeza una columna alineada a la izquierda), pero el color y el cuerpo de
   un encabezado de columna. Es lo que es: el rótulo de la primera columna, no
   el nombre de una fila ni el título de la tabla. */
.heat th.rowhead--corner { color: var(--color-cream-700); font-size: .74rem; }
/* Variante para la matriz de afirmaciones: la etiqueta de fila es el enunciado
   completo, no un nombre de palanca, así que envuelve en varias líneas y pesa
   menos que un encabezado de sección. El tope de ancho es lo que evita que un
   enunciado largo empuje las columnas de promedios fuera de la pantalla. */
.heat--wrap th.rowhead {
  white-space: normal;
  min-width: 260px;
  max-width: 380px;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  vertical-align: middle;
  padding-block: .3rem;
}
/* En un teléfono, 260px de enunciado se comen dos tercios de la pantalla y las
   columnas de promedios quedan fuera del scroll horizontal de `.table-scroll`.
   El enunciado usa más líneas y a cambio se ven dos o tres columnas de una. */
@media (max-width: 640px) {
  .heat--wrap th.rowhead { min-width: 170px; max-width: 210px; font-size: .74rem; }
}
.heat th small { display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--color-cream-500); font-weight: 400; }
.heat td {
    text-align: center; padding: .45rem .3rem; border-radius: var(--radius-sm); width: 118px;
    font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem;
}
.heat tr.total th.rowhead, .heat tr.total td { font-weight: 700; }
/* Encabezado de grupo dentro de la matriz de palancas: separa las siete
   palancas del modelo de los dos bloques que la pauta abre aparte. Es una fila
   de la misma tabla y no dos tablas, para que las columnas del corte queden
   alineadas entre los dos grupos.

   `min-width` en `auto` a propósito: la celda del encabezado hace `colspan` de
   toda la fila, y el `min-width: 190px` que `.rowhead` necesita para las filas
   normales acá no aplica a nada y solo empujaría el ancho de la tabla. */
.heat tr.heat__group th.rowhead {
    min-width: auto; padding: .8rem .6rem .25rem 0;
    font-family: var(--font-mono); font-size: .63rem; font-weight: 500;
    letter-spacing: .03em; color: var(--color-cream-500);
}
.heat tr.heat__group:first-child th.rowhead { padding-top: .2rem; }
.heat td.supp {
    background: repeating-linear-gradient(45deg, var(--color-cream-200), var(--color-cream-200) 4px, var(--color-cream-100) 4px, var(--color-cream-100) 8px);
    color: var(--color-cream-500); font-family: var(--font-mono); font-size: .63rem; font-weight: 500;
}
/* La Brecha no lleva separador. Tuvo un `border-left` por celda, que con
   `border-collapse: separate` + `border-spacing` salía cortado en trozos de 1px
   con huecos entre medio -- se veía como si cada celda tuviera su propio borde.
   No se reemplazó por una línea entera: la columna ya se distingue sola, sin
   relleno y en mono, igual que el encabezado de fila del otro extremo. */
.heat td.gap-col { background: transparent; color: var(--color-cream-700); font-family: var(--font-mono); font-size: .75rem; }

/* Aro interior en las celdas cuyo relleno casi no se distingue del crema de la
   tarjeta. Sin él el número queda flotando sin celda y la grilla se deshace en
   parte de la matriz. Va como `box-shadow` y no como `border`, para no cambiar
   el ancho de la celda -- `border-collapse: separate` con `border-spacing` ya
   reparte el aire.

   El corte es por luminancia contra el fondo de la tarjeta, con el 3:1 de
   contraste no textual: de s3 a s10 el relleno queda entre 2,92:1 y 2,68:1
   contra el crema y necesita el aro; s2 y s11 ya llegan a 3,40:1 y de ahí a los
   extremos sobra. Con la rampa divergente esas celdas son las del MEDIO, no las
   del principio: los dos extremos son los tonos oscuros (ladrillo abajo, navy
   arriba) y en ellos el aro sería una línea clara por dentro, que se lee como un
   borde mal hecho.

   El aro es cream-400 y no navy-200: los rellenos que lo necesitan van del
   salmón al gris azulado tibio, y sobre ellos el azul claro caía en 1,05:1 --
   invisible, y además metía un tono frío en la mitad cálida de la rampa.
   cream-400 tiene la misma luminancia que navy-200 (0,63 contra 0,64: el aro
   pesa igual contra la tarjeta) pero es neutro, así que no desafina de ningún
   lado de la escala.

   `.supp` va en la misma lista aunque no sea una banda: su rayado de crema es
   más claro todavía que el centro de la rampa y antes se apoyaba en el aro que
   cubría toda la matriz. `.nodata` no lo necesita, tiene su propio punteado. */
.heat td.band-s3, .heat td.band-s4, .heat td.band-s5, .heat td.band-s6,
.heat td.band-s7, .heat td.band-s8, .heat td.band-s9, .heat td.band-s10,
.heat td.supp {
    box-shadow: inset 0 0 0 1px var(--color-cream-400);
}

/* ── Filas de comparación por corte ────────────────────────────── */
.seg-row { display: grid; grid-template-columns: minmax(150px,220px) 1fr auto; gap: .9rem; align-items: center; padding: .5rem .2rem; }
.seg-row + .seg-row { border-top: 1px solid var(--color-cream-200); }
.seg-name { font-size: .84rem; font-weight: 600; color: var(--color-navy-900); }
.seg-n { font-family: var(--font-mono); font-size: .64rem; color: var(--color-cream-500); font-weight: 400; }
.seg-row--supp { opacity: .62; }
.supp-note { font-family: var(--font-mono); font-size: .68rem; color: var(--color-cream-600); background: var(--color-cream-200); border-radius: var(--radius-sm); padding: .25rem .5rem; text-align: center; }
@media (max-width: 760px) { .seg-row { grid-template-columns: 1fr; gap: .35rem; } }

/* ── Barras rankeadas (multi-selección) ────────────────────────── */
.rb { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.rb__item { display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; align-items: center; }
.rb__label { font-size: .82rem; color: var(--color-cream-900); line-height: 1.3; }
.rb__val { font-family: var(--font-mono); font-size: .75rem; color: var(--color-cream-700); font-variant-numeric: tabular-nums; }
.rb__track { display: block; grid-column: 1/-1; height: 9px; background: var(--color-cream-200); border-radius: 3px; overflow: hidden; }
.rb__fill { display: block; height: 100%; border-radius: 3px; min-width: 3px; }
.rb--cool .rb__fill { background: var(--color-navy-500); }
.rb--warm .rb__fill { background: var(--color-terra-600); }

/* ── Citas ─────────────────────────────────────────────────────── */
.gate { display: flex; gap: .6rem; align-items: flex-start; background: var(--color-cream-100); border: 1px dashed var(--color-cream-400); border-radius: var(--radius-md); padding: .7rem .85rem; color: var(--color-cream-700); }
.gate p { font-size: .82rem; max-width: 70ch; }
.gate svg { flex-shrink: 0; margin-top: 2px; color: var(--color-cream-600); }
/* Lista de lectura, no rejilla: los textuales van de una línea a treinta y en
   tres columnas quedaban tarjetas de alturas dispares con huecos entremedio.
   Una fila por cita, la audiencia en una columna fija a la izquierda y el
   contenedor con su propio scroll, para que abrir los textuales no empuje el
   resto de la página varias pantallas hacia abajo. */
.quotes {
    display: grid; gap: 0; align-items: start;
    max-height: min(60vh, 34rem); overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid var(--color-cream-300);
    border-bottom: 1px solid var(--color-cream-300);
}
.quote {
    display: grid; grid-template-columns: 168px 1fr; gap: .2rem .9rem;
    padding: .7rem .2rem;
}
.quote + .quote { border-top: 1px solid var(--color-cream-200); }
.quote__text { grid-column: 2; font-size: .83rem; line-height: 1.5; color: var(--color-cream-800); }
.quote__meta { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
/* Fila del "Mostrar N más": ocupa el ancho completo, sin columna de audiencia. */
.quote--more { grid-template-columns: 1fr; justify-items: center; }
@media (max-width: 760px) {
    .quote { grid-template-columns: 1fr; }
    .quote__text, .quote__meta { grid-column: 1; }
    .quote__meta { grid-row: 2; margin-top: .4rem; flex-direction: row; flex-wrap: wrap; }
}
.tag { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; background: var(--color-cream-200); color: var(--color-cream-700); padding: .1rem .4rem; border-radius: 3px; }

/* ── Paneles compactos ─────────────────────────────────────────── */
/* Namespaced `.mg-*` (no `.panel`/`.panels` a secas): colisiona con
   `.landing-page .panel` en templates/core/landing.html — ver nota arriba. */
.mg-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px,1fr)); gap: 1rem; align-items: start; }
.mg-panel { background: var(--color-cream-100); border: 1px solid var(--color-cream-300); border-radius: var(--radius-lg); padding: .85rem .95rem; }
.mg-panel h4 { font-size: .88rem; margin-bottom: .35rem; }
.mg-panel p { font-size: .8rem; color: var(--color-cream-700); line-height: 1.45; }
/* Las listas de "Cómo leer" (los tres indicadores por palanca, los tres tramos
   del NPS). Heredan el cuerpo de .mg-panel p; el marcador va por dentro para
   que la sangría no se salga del panel. */
.mg-panel .leer-list { font-size: .8rem; color: var(--color-cream-700); line-height: 1.45; list-style: disc; padding-left: 1.1rem; margin: .3rem 0; }
.mg-panel .leer-list li { margin-bottom: .3rem; }
.mg-panel .leer-list li:last-child { margin-bottom: 0; }

/* Pestaña "Cómo leer": los paneles tienen largos muy dispares, y a cuatro
   columnas el de afirmaciones invertidas se volvía una torre mientras los otros
   quedaban en tres líneas. Dos columnas anchas para los cuatro paneles
   explicativos y la ficha técnica a todo el ancho abajo.

   La colocación es explícita por posición, así que agregar o sacar un panel del
   template obliga a tocar estas reglas: sin una regla propia, el panel nuevo se
   auto-coloca y se superpone con el que ya ocupaba esa celda. Los dos largos
   (interpretación e invertidas) van arriba, uno por columna, y los dos cortos
   (quién respondió, NPS) abajo. */
@media (min-width: 900px) {
    .mg-panels--leer { grid-template-columns: 1fr 1fr; }
    .mg-panels--leer > .mg-panel:nth-child(1) { grid-column: 1; grid-row: 1; }
    .mg-panels--leer > .mg-panel:nth-child(2) { grid-column: 2; grid-row: 1; }
    .mg-panels--leer > .mg-panel:nth-child(3) { grid-column: 1; grid-row: 2; }
    .mg-panels--leer > .mg-panel:nth-child(4) { grid-column: 2; grid-row: 2; }
    .mg-panels--leer > .mg-panel--wide { grid-column: 1 / -1; grid-row: 3; }
    /* Dos pares dt/dd por fila; Privacidad, que es el dd largo, toma la suya. */
    .mg-panel--wide .dl { grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); }
    .mg-panel--wide .dl dd:last-of-type { grid-column: 2 / -1; }
}

/* ============================================
   ASESORÍA (cont.): pestañas "Cómo leer" y "Resumen" (Task 7)
   Igual criterio que el bloque de arriba: valores del mockup sin cambiar,
   tokens traducidos a los globales del proyecto. Componentes que SÍ tienen
   un equivalente de producción (encabezado de página, tarjetas KPI, tarjeta
   base, tabla de filtros) NO se portan acá — la plantilla reutiliza
   `page_header.html`, `.kpi-card`/`.stat-strip` y `.card`/`.card--padded` en
   su lugar. Ver task-7-report.md para el detalle de esa decisión.
   ============================================ */

/* ── Pills de pestañas ─────────────────────────────────────────── */
/* Fila de pestañas + selector de medición, pegada bajo el `.header` global.
   El borde inferior y el margen que antes vivían en `.pills` son de la fila
   entera: el selector se sienta a la derecha sobre la misma línea. */
.tabbar {
    position: sticky;
    /* El `.header` global también es sticky en `top: 0` con `z-index: 50`, así
       que esta fila se cuelga justo debajo y se queda por debajo de él. */
    top: var(--header-height);
    z-index: 40;
    display: flex; align-items: flex-end; gap: 1rem;
    background: var(--color-cream-100);
    border-bottom: 1px solid var(--color-cream-300);
    margin-bottom: .9rem;
    /* La banda sale del padding horizontal de `.content` y llega de la sidebar
       al borde derecho, igual que el `.header` global con el que se apila.
       Adentro se vuelve a meter el mismo padding, así que las pills y el chip
       siguen alineados con las tarjetas de abajo: lo que se ensancha es el
       fondo y la línea, no el contenido. `--tabbar-bleed` tiene que valer lo
       mismo que el padding lateral de `.content`, en los dos breakpoints. */
    --tabbar-bleed: var(--space-8);
    margin-left: calc(var(--tabbar-bleed) * -1);
    margin-right: calc(var(--tabbar-bleed) * -1);
    padding-left: var(--tabbar-bleed);
    padding-right: var(--tabbar-bleed);
}
/* Canaleta opaca bajo la línea. El `margin-bottom` de un elemento `sticky` se
   queda en el flujo y se va con el scroll, así que sin esto el contenido pasaba
   pegado al borde inferior de la barra. Del mismo alto que el margen, para que
   al tope de la página no se note.

   La canaleta NO es parte del header, aunque sea opaca: el borde de abajo de la
   barra es la línea de las solapas, y ahí es donde se apoya el subrayado de la
   pestaña activa. Por eso la sombra del estado pegado va como un degradado que
   arranca en la línea y se apaga hacia abajo, en vez de un `box-shadow` al final
   de la canaleta -- con la sombra abajo, los 20px de crema se leían como parte
   del header y el subrayado quedaba flotando 20px por encima del borde. */
.tabbar::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 100%; height: .9rem;
    background-color: var(--color-cream-100);
    pointer-events: none;
}
.tabbar .pills { border-bottom: 0; margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.tabbar__sentinel { height: 1px; }
/* El aire de arriba es CONSTANTE, no solo cuando está pegada. Pegada, las pills
   quedarían tocando la raya del `.header` global, así que el aire hace falta;
   suelta no molesta, es separación antes de la fila de solapas.

   Y sobre todo: la barra NO puede cambiar de alto según el estado. Está en el
   flujo, así que cualquier cambio de su alto mueve todo lo de abajo. Con el aire
   condicional, cada cambio de medición la recreaba sin el estado pegado y la
   barra se animaba de 40px a 48px, lo que empujaba el contenido y hacía que el
   navegador corrigiera el scroll 8px: eso era el rebote. Alto fijo, cero
   reflow, y el estado se nota solo por color.

   NO se centra con `align-items: center`: la fila se apoya en la línea de abajo
   a propósito, porque el subrayado de la pill activa (su `::after`, en
   `bottom: -1px`) tiene que caer justo sobre esa línea, y es lo que marca en qué
   pestaña estás. Centrar despega el subrayado de la línea y la solapa deja de
   leerse como solapa.

   Lo único que marca el `data-stuck` del IntersectionObserver (ver
   `base_resultados.html`; CSS todavía no puede preguntar solo si un `sticky`
   está pegado) es la sombra: pegada, la barra y el `.header` forman un solo
   bloque fijo de ~112px separado del contenido por una raya de 1px, y la sombra
   dice dónde termina lo fijo. Va en el `::after` y no en la barra, porque el
   `::after` es la canaleta opaca que tapa el contenido bajo la línea y una
   sombra en la barra quedaría debajo de él. Es puramente cosmética: sin
   IntersectionObserver la barra se pega igual. */
@media (min-width: 769px) {
    .tabbar { padding-top: .5rem; }
    .tabbar::after { transition: background-image var(--transition-fast); }
    .tabbar[data-stuck="true"]::after {
        background-image: linear-gradient(to bottom, rgb(15 35 66 / .10), rgb(15 35 66 / 0) 10px);
    }
}
.tabbar__picker { margin-left: auto; padding-bottom: .4rem; flex: 0 0 auto; }
/* En pantallas chicas no se pega: las pills envuelven a dos o tres filas y el
   selector cae abajo, así que la banda fija se comía media pantalla justo donde
   menos sobra. */
@media (max-width: 768px) {
    /* `.content` baja a `--space-4` en este breakpoint y la sangría lo sigue. */
    .tabbar { position: static; flex-wrap: wrap; align-items: stretch; gap: .5rem; --tabbar-bleed: var(--space-4); }
    .tabbar::after { display: none; }
    .tabbar__picker { margin-left: 0; padding-bottom: .5rem; }
}
.pills { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-cream-300); margin-bottom: 1.25rem; padding-bottom: 0; }
.pill {
    position: relative; padding: .55rem .85rem; font-size: .85rem; font-weight: 600; color: var(--color-cream-600);
    border-radius: var(--radius-md) var(--radius-md) 0 0; transition: color .15s ease, background .15s ease;
}
.pill:hover { color: var(--color-navy-800); background: var(--color-cream-200); }
.pill[aria-selected="true"] { color: var(--color-navy-900); background: var(--color-cream-50); }
.pill[aria-selected="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; background: var(--color-terra-600); border-radius: 2px; }

/* ── Encabezado y nota de tarjeta (complementa `.card`/`.card__header` de producción,
   que asume un patrón con borde inferior; acá el head vive DENTRO del padding de la
   tarjeta, sin borde, como en el mockup) ─────────────────────────────────────────── */
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
/* Sin tope de ancho: en una card ancha, 62ch dejaba el parrafo cortado a un
   tercio y el resto en blanco. El texto ocupa el ancho de su contenedor y son
   las cards, no la nota, las que definen la medida de lectura. */
.card__note { font-size: .78rem; color: var(--color-cream-600); }

/* ── Nota inline con ícono (barra de contexto, cabeceras de tarjeta) ───────────── */
.hint { font-size: .75rem; color: var(--color-cream-600); display: inline-flex; align-items: center; gap: .3rem; }

/* ── Figura del modelo (diagrama del puente) ───────────────────────────────────── */
.figwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .2rem 0 .1rem; }
.figscroll { display: none; font-size: .72rem; color: var(--color-cream-600); font-family: var(--font-mono); margin-bottom: .3rem; }
@media (max-width: 760px) { .figscroll { display: block; } }
/* Nombre decidido en Task 6 para evitar la colisión con el `.bridge` ya existente
   (dashboard de brechas, implementación no relacionada). No renombrar. */
/* min-width escala con el viewBox: los 620px eran para un viewBox de 1000. Al
   ensancharlo a 1240 (9 palancas), 620px dejaba los rótulos a la mitad de
   tamaño -- 1240/1000 * 620 ≈ 770 mantiene el texto del mismo porte y el
   .figwrap sigue haciendo scroll horizontal en pantallas angostas. */
.mg-bridge { display: block; min-width: 770px; width: 100%; height: auto; color: var(--color-navy-800); }
.figwrap figure { margin: 0; }
/* El markup real es figure > .figwrap + figcaption, así que el descendiente
   `.figwrap figcaption` nunca matcheaba y el pie de figura salía sin estilo ni
   font del sistema de diseño. font-family explícita: es el único texto de
   cuerpo que cuelga de un <figure>. */
/* Sin max-width: el 78ch heredado del mockup dejaba el pie en una columna de
   ~40 % del ancho de la card, con saltos de línea que se leían como recorte. */
figure > figcaption,
.figwrap figcaption {
    font-family: var(--font-body); font-size: .78rem;
    color: var(--color-cream-600); line-height: 1.45; margin-top: .4rem;
}

/* ── Glosario / definiciones en dos columnas ───────────────────────────────────── */
.deflist { display: grid; gap: .5rem; margin-top: .9rem; }
.deflist > div { display: grid; grid-template-columns: 172px 1fr; gap: .8rem; align-items: baseline; }
@media (max-width: 640px) { .deflist > div { grid-template-columns: 1fr; gap: .15rem; } }
.deflist dt { font-size: .83rem; font-weight: 600; color: var(--color-navy-900); white-space: nowrap; }
.deflist dd { margin: 0; font-size: .82rem; color: var(--color-cream-700); max-width: 74ch; }

/* ── Lista de definiciones compacta (ficha técnica) ────────────────────────────── */
.dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .83rem; }
.dl dt { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-cream-600); padding-top: .15rem; }
.dl dd { margin: 0; color: var(--color-cream-900); }
.dl--tight { gap: .28rem .9rem; font-size: .82rem; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

/* ── Nota plegable ──────────────────────────────────────────────────────────────── */
.note { background: var(--color-navy-50); border: 1px solid var(--color-navy-200); border-radius: var(--radius-lg); padding: .9rem 1rem; }
.note h4 { font-size: .9rem; margin-bottom: .35rem; }
.note p, .note li { font-size: .83rem; color: var(--color-cream-800); }
.note ul { margin: .4rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }

/* ── Demo de escala 1-5 ─────────────────────────────────────────────────────────── */
.scale-demo { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 3px; margin: .55rem 0 .3rem; }
.scale-demo div { padding: .4rem .2rem; text-align: center; border-radius: 4px; font-family: var(--font-mono); font-size: .9rem; font-weight: 700; }
/* Colores por posición: mismos tokens --lk1..5 que la barra Likert. El mockup los
   pinta con `style` inline por venir de datos en JS; acá son siempre los mismos 5
   valores fijos, así que van en CSS y no en un atributo `style`. */
.scale-demo div:nth-child(1) { background: var(--lk1); color: #fff; }
.scale-demo div:nth-child(2) { background: var(--lk2); color: var(--color-terra-900); }
.scale-demo div:nth-child(3) { background: var(--lk3); color: var(--color-cream-800); }
.scale-demo div:nth-child(4) { background: var(--lk4); color: #fff; }
.scale-demo div:nth-child(5) { background: var(--lk5); color: #fff; }
.scale-ends { display: flex; justify-content: space-between; gap: .5rem; font-size: .7rem; color: var(--color-cream-600); margin-bottom: .55rem; }

/* ── Callout (contenido pendiente) ─────────────────────────────────────────────── */
.callout { border: 1px dashed var(--color-terra-300); background: var(--color-terra-50); border-radius: var(--radius-lg); padding: .9rem 1rem; }
.callout__tag { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-terra-700); font-weight: 700; margin-bottom: .35rem; }
.callout p { font-size: .84rem; color: var(--color-cream-800); max-width: 70ch; }

/* ── Compuerta de publicación del informe (solo administrador) ─────── */
/* Borrador en terracota (el informe está retenido: es un estado que pide
   acción), publicado en navy (estado normal, sin urgencia). Nunca semáforo:
   despublicado no es un error. */
.mg-pub {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--color-terra-300); background: var(--color-terra-50);
    border-radius: var(--radius-lg); padding: .7rem .9rem; margin-bottom: 1.1rem;
}
.mg-pub--live { border-color: var(--color-navy-200); background: var(--color-navy-50); }
.mg-pub__body { flex: 1 1 20rem; min-width: 0; }
.mg-pub__tag {
    display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono);
    font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-terra-700); font-weight: 700; margin-bottom: .2rem;
}
.mg-pub--live .mg-pub__tag { color: var(--color-navy-700); }
.mg-pub__text { font-size: .8rem; color: var(--color-cream-800); max-width: 80ch; }
.mg-pub form { margin: 0; }
@media (max-width: 640px) {
    .mg-pub { align-items: stretch; }
    .mg-pub form, .mg-pub .btn { width: 100%; }
}

/* ── Afirmaciones destacadas (fortalezas / áreas de crecimiento) ───────────────── */
.tb-item { display: flex; gap: .7rem; padding: .6rem 0; align-items: flex-start; }
.tb-item + .tb-item { border-top: 1px solid var(--color-cream-200); }
.tb-rank { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-cream-400); width: 1.4ch; flex-shrink: 0; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tb-body { flex: 1; min-width: 0; }
.tb-q { font-size: .82rem; line-height: 1.35; margin-bottom: .35rem; }
.tb-foot { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; }
/* El % que iba a la izquierda de cada fila (`.tb-fav`, y antes `.tb-rank`) se
   quitó: el número solo no decía de dónde salía. Ahora lo dice la llave de
   favorables debajo de la barra (.lk-brace), en el lugar donde se lee. */

/* ── Misceláneos reutilizados en varias tarjetas ───────────────────────────────── */
.qcode { font-family: var(--font-mono); font-size: .63rem; color: var(--color-cream-500); letter-spacing: .03em; }
.rank__pos { font-family: var(--font-mono); font-size: .68rem; color: var(--color-cream-500); width: 1.6ch; }
/* Sin regla propia en el mockup: heredaba 1rem y line-height 1.6 de body, así que
   la meta se veía más grande que el texto que acompaña. Mismo caso que .tb-fav. */
.rank__meta { display: block; font-size: .72rem; line-height: 1.35; color: var(--color-cream-600); }
.rev-flag {
    display: inline-flex; align-items: center; gap: .25rem; font-family: var(--font-mono); font-size: .58rem;
    text-transform: uppercase; letter-spacing: .07em; background: var(--color-terra-100); color: var(--color-terra-800);
    padding: 0 .3rem; border-radius: 3px; vertical-align: middle;
}
/* Glosa visible de las afirmaciones invertidas. El chip .rev-flag por si solo no
   basta: en un ranking de "Principales fortalezas" un enunciado en negativo con un
   porcentaje alto se lee al reves. La direccion tiene que estar en el texto, no
   escondida en un tooltip, porque un tooltip no existe al imprimir, ni al compartir
   una captura, ni en un telefono. */
.rev-gloss {
    display: block; font-size: .72rem; line-height: 1.35; color: var(--color-terra-700);
    margin-top: .15rem;
}

.legend { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; font-size: .75rem; color: var(--color-cream-700); }
.legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.legend__sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend__sw--1 { background: var(--lk1); }
.legend__sw--2 { background: var(--lk2); }
.legend__sw--3 { background: var(--lk3); }
.legend__sw--4 { background: var(--lk4); }
.legend__sw--5 { background: var(--lk5); }
.legend__arrow { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-cream-500); }

/* ============================================
   ASESORÍA (cont.): pestañas de detalle por grupo, Equipo SLEP / Directores/as
   (Task 8). Mismo criterio que los bloques anteriores: valores del mockup sin
   cambiar, tokens traducidos a los globales del proyecto. `.split`/`.comp-list`/
   `.comp-item*` y `.qrow*` no se habían portado todavía porque ningún partial de
   las Tasks 6-7 los usaba (Resumen usa `.pl-row`, no el selector de palanca de
   `renderDetalle()` del mockup) — quedan documentados acá, no en el bloque de
   arriba, para que quien revise sepa en qué Task se agregó cada uno.
   ============================================ */

/* ── Selector de palanca (lista + detalle) ──────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(230px,300px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.comp-list { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1100px) { .comp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: .4rem; } }
.comp-item {
    display: grid; grid-template-columns: 1fr auto; gap: .5rem .6rem; align-items: center;
    padding: .55rem .7rem; border-radius: var(--radius-md); text-align: left; width: 100%;
    border: 1px solid transparent; transition: background .15s ease;
}
.comp-item:hover { background: var(--color-navy-50); }
.comp-item[aria-current="true"] { background: var(--color-navy-50); border-color: var(--color-navy-200); box-shadow: inset 2px 0 0 var(--color-terra-600); }
.comp-item__name { font-size: .86rem; font-weight: 600; color: var(--color-navy-900); }
.comp-item__bar { grid-column: 1/-1; }

/* ── Filas de afirmación (detalle de una palanca) ───────────────────────────── */
.qrow { display: grid; grid-template-columns: 1fr minmax(180px,320px) auto; gap: 1rem; align-items: center; padding: .7rem .2rem; }
.qrow + .qrow { border-top: 1px solid var(--color-cream-200); }
.qrow__text { font-size: .86rem; color: var(--color-cream-900); line-height: 1.4; }
/* Encabezado del cuestionario del que cuelga la afirmación (ej. Q39-Q44). Va
   arriba y en gris: contextualiza, no compite con el enunciado. */
.q-stem { display: block; font-size: .72rem; line-height: 1.3; color: var(--color-cream-500); font-weight: 400; margin-bottom: .15rem; }
@media (max-width: 760px) { .qrow { grid-template-columns: 1fr; gap: .45rem; } }

/* ============================================
   ASESORÍA (cont.): pestaña Comparativo (Task 9). Mismo criterio que los
   bloques anteriores: valores del mockup sin cambiar, tokens traducidos a los
   globales del proyecto. `.heat`/`.seg-row`/`.legend` ya estaban portados
   (Tasks 7-8 los incluyeron por adelantado). Acá se agregan el control
   segmentado, el listbox de afirmaciones (agrupado por palanca, nunca un
   `<select>`) y los estados que el mockup no distinguía: celda/fila "sin
   datos" (nadie respondió) vs. "suprimido" (privacidad, n<MIN_N) -- ver
   task-9-report.md, sección de supresión.
   ============================================ */

/* ── Control segmentado (elegir el corte) — enlaces, no <button> con JS: el
   swap lo hace HTMX, igual que `.pill`/`.comp-item` en el resto de la sección. */
.segmented { display: inline-flex; background: var(--color-cream-200); border: 1px solid var(--color-cream-300); border-radius: var(--radius-md); padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmented__btn { padding: .3rem .7rem; font-size: .79rem; font-weight: 600; color: var(--color-cream-700); border-radius: calc(var(--radius-md) - 2px); }
.segmented__btn[aria-current="true"] { background: var(--color-cream-50); color: var(--color-navy-900); box-shadow: var(--shadow-sm); }

/* ── Listbox de afirmaciones, agrupado por palanca ─────────────────────────── */
/* Ancho FIJO, no `min-width` a secas: el botón lleva el nombre del componente
   elegido y los nueve nombres miden distinto ("Procesos" contra "Estructura y
   Responsabilidades"), así que con ancho por contenido el control cambiaba de
   tamaño al cambiar de componente y corría los dos selectores de al lado. El
   valor es el que necesita el nombre más largo; los tres controles de la
   `.filter-bar` entran juntos en una fila en pantalla de laptop, y en móvil
   `flex-wrap` los apila igual. */
.lb { position: relative; min-width: min(100%, 255px); max-width: min(100%, 255px); }
.lb__btn {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
    background: var(--color-cream-50); border: 1px solid var(--color-cream-300); border-radius: var(--radius-md);
    padding: .45rem .7rem; font-size: .84rem; text-align: left; color: var(--color-navy-900); font-weight: 500;
}
.lb__btn:hover { border-color: var(--color-navy-300); }
.lb__chev { flex-shrink: 0; color: var(--color-cream-500); transition: transform .15s ease; }
.lb[data-open="true"] .lb__chev { transform: rotate(180deg); }
/* z-index 35, y el valor está encajado entre dos vecinos, no elegido al voleo:
   - por ENCIMA de 30, que es lo que `[data-tooltip]:hover` le pone al disparador
     para que su cartel escape de las filas que se pintan después. Con 30 en los
     dos desempataba el orden del documento, y como la tabla va después del
     desplegable, el tooltip de un encabezado de columna se dibujaba ENCIMA de la
     lista abierta. Un menú abierto es la capa de arriba mientras está abierto.
   - por DEBAJO de 40, que es el `.tabbar` sticky. Con 40 volvía a empatar, y esta
     vez ganaba la lista: abierta cerca del borde superior, sus 340px tapaban la
     fila de pestañas pegada arriba. Lo que scrollea pasa por debajo del chrome
     que se queda. */
.lb__list {
    position: absolute; z-index: 35; top: calc(100% + 4px); left: 0; right: 0; max-height: 340px; overflow-y: auto;
    background: var(--color-cream-50); border: 1px solid var(--color-cream-300); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: .25rem;
}
.lb[data-open="false"] .lb__list { display: none; }
/* `color` explícito: en el mockup `.lb__opt` es un <button> (hereda texto normal);
   acá es un <a> (para navegar vía HTMX como el resto de la sección), y el `a{color}`
   global del sistema de diseño es terracota -- sin esto, las opciones se verían como
   links en vez de opciones de lista. */
.lb__opt { display: block; width: 100%; text-align: left; padding: .4rem .55rem; border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.35; color: var(--color-cream-900); }
.lb__opt:hover { background: var(--color-navy-50); }
.lb__opt[aria-current="true"] { background: var(--color-navy-100); font-weight: 600; }
.lb__optcode { font-family: var(--font-mono); font-size: .62rem; color: var(--color-cream-500); margin-right: .4rem; }
/* Rótulo de grupo en el listbox de palancas. Mismo tratamiento que el `.qcode`
   del selector del detalle de grupo, para que el corte se lea igual en las dos
   pestañas. El aire de arriba solo entre grupos: el primero se apoya en el
   padding de la lista. */
.lb__group {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .03em;
    color: var(--color-cream-500); padding: .35rem .55rem .2rem;
}
/* El aire de arriba solo entre grupos, y anclado a la lista: un
   `[role="group"] + [role="group"]` suelto matchea cualquier par de grupos
   adyacentes del sitio entero. */
.lb__opts + .lb__group { margin-top: .35rem; }
.lb__opts { list-style: none; margin: 0; padding: 0; }

/* ── Escala de la matriz de brechas ─────────────────────────────
   Los 16 pasos van de rojo ladrillo (1,0) a navy (5,0) pasando por el gris del
   3,0; el detalle de por qué son divergentes y por qué son 16 está en el bloque
   de --heat-0..15. Los asigna `_scale_heat_bands()` en
   instruments/views/asesoria.py.

   El color del número no acompaña al tono sino a la luminancia del fondo, que en
   una rampa divergente no es monótona: sube hacia el gris del centro y baja
   hacia los dos extremos. De ahí que el texto claro aparezca dos veces, en las
   dos puntas oscuras, y no una sola vez de un lado. */
.heat td.band-s0  { background: var(--heat-0); color: #fff; }
.heat td.band-s1  { background: var(--heat-1); color: #fff; }
.heat td.band-s2  { background: var(--heat-2); color: var(--color-navy-900); }
.heat td.band-s3  { background: var(--heat-3); color: var(--color-navy-900); }
.heat td.band-s4  { background: var(--heat-4); color: var(--color-navy-900); }
.heat td.band-s5  { background: var(--heat-5); color: var(--color-navy-900); }
.heat td.band-s6  { background: var(--heat-6); color: var(--color-navy-900); }
.heat td.band-s7  { background: var(--heat-7); color: var(--color-navy-900); }
.heat td.band-s8  { background: var(--heat-8); color: var(--color-navy-900); }
.heat td.band-s9  { background: var(--heat-9); color: var(--color-navy-900); }
.heat td.band-s10 { background: var(--heat-10); color: var(--color-navy-900); }
.heat td.band-s11 { background: var(--heat-11); color: var(--color-navy-900); }
.heat td.band-s12 { background: var(--heat-12); color: #fff; }
.heat td.band-s13 { background: var(--heat-13); color: #fff; }
.heat td.band-s14 { background: var(--heat-14); color: #fff; }
.heat td.band-s15 { background: var(--heat-15); color: #fff; }

/* Leyenda de esa escala: los 16 pasos en fila. Con la rampa divergente la
   leyenda dejó de ser decorativa: es lo que dice dónde queda el gris del 3,0, y
   sin ese ancla un rojo y un azul son dos colores cualquiera. */
.legend--ramp { margin-top: .8rem; justify-content: center; gap: .5rem; }
.heat-ramp { display: inline-flex; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--color-cream-300); }
.heat-ramp__sw { width: 1.5rem; height: .6rem; }
.heat-ramp__end { font-family: var(--font-mono); font-size: .68rem; color: var(--color-cream-700); }
/* El rótulo del neutro va entre las dos mitades de la rampa y pesa más que los
   extremos: es la bisagra de una escala divergente -- abajo el color dice "en
   desacuerdo", arriba "de acuerdo" -- y si se ve igual que un extremo, la rampa
   se lee como una secuencial de dos colores. */
.heat-ramp__end--mid { color: var(--color-navy-900); font-weight: 600; }
.heat-ramp__sw--s0  { background: var(--heat-0); }
.heat-ramp__sw--s1  { background: var(--heat-1); }
.heat-ramp__sw--s2  { background: var(--heat-2); }
.heat-ramp__sw--s3  { background: var(--heat-3); }
.heat-ramp__sw--s4  { background: var(--heat-4); }
.heat-ramp__sw--s5  { background: var(--heat-5); }
.heat-ramp__sw--s6  { background: var(--heat-6); }
.heat-ramp__sw--s7  { background: var(--heat-7); }
.heat-ramp__sw--s8  { background: var(--heat-8); }
.heat-ramp__sw--s9  { background: var(--heat-9); }
.heat-ramp__sw--s10 { background: var(--heat-10); }
.heat-ramp__sw--s11 { background: var(--heat-11); }
.heat-ramp__sw--s12 { background: var(--heat-12); }
.heat-ramp__sw--s13 { background: var(--heat-13); }
.heat-ramp__sw--s14 { background: var(--heat-14); }
.heat-ramp__sw--s15 { background: var(--heat-15); }

/* ── Celda "sin datos": nadie de esa categoría respondió esta fila. A propósito
   distinta de `.heat td.supp` (rayado diagonal, protección por privacidad):
   acá no hay nada que proteger, no hay respuestas que promediar. */
.heat td.nodata { background: var(--color-cream-50); color: var(--color-cream-500); font-family: var(--font-mono); font-size: .63rem; font-weight: 500; border: 1px dashed var(--color-cream-300); }

/* ── Fila "sin datos" del detalle por afirmación. Mismo criterio que `.heat
   td.nodata`: no confundir con `.seg-row--supp` (esa sí protege datos reales).
   Sin la opacidad de `.seg-row--supp` y con un recuadro punteado en vez de
   sólido, para que ambos estados se vean distintos, no solo se lean distinto. */
.seg-row--nodata .seg-name { color: var(--color-cream-700); }
.supp-note--nodata { background: transparent; border: 1px dashed var(--color-cream-400); color: var(--color-cream-500); font-style: italic; }

/* ══ Ficha de indicador (convenios/indicador_detail.html) ══════════════════════
   Todo lo nuevo de AL-69 vive en este bloque contiguo y nada más: el archivo lo
   están apilando dos features a la vez y así el roce es una sola hunk.

   Casi nada acá es lenguaje nuevo. El tramo del año reusa `.stat-row`/`.kpi-card`
   (la convención del panel de área), las barras reusan `.kpi-card__bar`, el
   separador `.conv-det__sep`, las dos columnas `.conv-det__cols`, los vacíos
   `.conv-det__empty` y el botón de volver `.conv-acc-back`. Lo que sigue es el
   pegamento: anchos que el contenido pide, y una tabla que antes no existía.

   Ningún contenedor se estira más de lo que su contenido necesita:
       medidor de respaldo   12rem  (ya existe en .conv-mdv-frac__meter)
       tarjeta de mediciones 33rem  (la pide la tabla; ver .ind-par)
       tarjeta de respaldo   18rem   (mínimo para que la descripción del medio no se trunque)
       tabla de mediciones   su ancho intrínseco
       título de la ficha    46ch
   ────────────────────────────────────────────────────────────────────────────── */

/* El breadcrumb que pide el ticket tiene cuatro niveles («Inicio / Convenios / Objetivo 1
   / 1.1») y en 375px no cabe: `.header__left` no encogía, así que empujaba las acciones de
   la derecha 94px fuera del viewport y la página entera quedaba con scroll horizontal.
   Ahora el riel de migas se encoge y desplaza dentro de sí mismo, sin barra visible, y las
   acciones de la derecha no ceden espacio. Ningún nivel se pierde: el botón «Volver» de la
   ficha cubre igual la vuelta atrás. Afecta a cualquier página con breadcrumb largo, que es
   donde el mismo desborde estaba latente. */
@media (max-width: 900px) {
    .header__left {
        flex: 1 1 auto;
        min-width: 0;
    }
    .header__right { flex: 0 0 auto; }
    .header__breadcrumb {
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .header__breadcrumb::-webkit-scrollbar { display: none; }
    .header__breadcrumb > * { flex: 0 0 auto; }
}

/* El riel de la ficha nunca colapsó en móvil: `1fr 280px` no cabe en 375px y el aside
   arrastraba la página ~94px a la derecha, con scroll horizontal en todo el documento.
   `min-width: 0` además evita que un hijo ancho —una tabla, una fórmula— vuelva a
   estirar la columna por su tamaño mínimo automático. Va acá y no junto a la regla
   original para dejar todo AL-69 en un bloque contiguo. */
.conv-detalle-main,
.conv-detalle-side {
    min-width: 0;
}
@media (max-width: 900px) {
    .conv-detalle-rail { grid-template-columns: minmax(0, 1fr); }
}

/* El nombre del indicador es una frase larga: sin tope se estira a todo el ancho y
   deja renglones de 120 caracteres. `balance` reparte las líneas parejas. */
.ind-head .page-header__title {
    max-width: 46ch;
    text-wrap: balance;
}

/* El selector de año va pegado a su rótulo, no contra el borde opuesto: es el control
   que cambia lo que el tramo muestra, y suelto al otro extremo queda flotando. */
/* `var(--space-2)` arriba y no `--space-6`: `.page-header` ya cierra con 24px de padding
   inferior, así que 24 más dejaban 48px de nada entre la línea de metadatos y la primera
   cifra del año —el tramo es lo primero que hay que leer y quedaba flotando lejos—. */
.ind-anio {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-2) 0 var(--space-3);
}
.ind-anio .conv-det__h { margin: 0; }
.ind-tramo { margin-bottom: var(--space-5); }

/* Las barras de las cuatro lecturas terminan a la misma altura. Cada tarjeta tiene un
   número distinto de líneas —Logro no lleva detalle desde que salió el mes en curso, y
   Respaldo sí—, así que la barra caía a distinta altura en cada una y la fila se veía
   irregular. Pegada al fondo de la tarjeta, la comparación entre barras vuelve a ser
   horizontal, que es como se leen. El `padding-top` es el respiro mínimo cuando la
   tarjeta es la más alta y `margin-top: auto` no deja hueco. */
.ind-tramo .kpi-card {
    display: flex;
    flex-direction: column;
}
.ind-tramo .kpi-card__bar { margin-top: auto; }
/* El respiro sobre la barra va como margen inferior del bloque de arriba y no como padding
   de la barra: la barra dibuja su canal con `background`, así que un padding le subiría el
   borde superior, y la marca del ritmo se posiciona contra la caja de padding —quedaría
   flotando sobre la barra en vez de cruzarla—. */
.ind-tramo .kpi-card__detail,
.ind-tramo .ind-veredicto { margin-bottom: var(--space-2); }

/* Una raya o una palabra en vez de un 0: el dato ausente no puede parecer medido. */
.ind-na { color: var(--color-cream-500); }

/* El margen de `.kpi-card__value-suffix` (0.2rem) está calibrado para un signo pegado a la
   cifra —«85%»—. Cuando el sufijo es una palabra («3 de 3») esos 3px se leen como si no
   hubiera espacio. */
.ind-sufijo-palabra { margin-left: 0.4rem; }

/* Título de card y su acción en la misma línea: la acción pertenece al bloque. */
.ind-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.ind-cardhead .h-card { margin: 0; }

/* ── Mediciones año por año ── */
/* El contenedor que consulta `.ind-par`. Va en el riel y no en la fila porque un elemento
   no puede consultar su propio tamaño, y lo que hay que decidir es la fila misma. */
.conv-detalle-main { container-type: inline-size; }

/* El veredicto del año: el chip y, cuando hay programación, el nombre de la marca de la
   barra. Va bajo la cifra —al lado de un número de 2.35rem el chip no tiene con qué
   alinearse— y sobre la barra, que es lo que glosa. */
.ind-veredicto {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 0.45rem;
}
/* El trazo delante del texto es el mismo que cruza la barra: sin él, «esperado 50%» y la
   raya de color son dos cosas sueltas que el lector tiene que atar solo.

   Va en un elemento propio y no en `::before` porque este span es disparador de tooltip, y
   el tooltip global pinta su flecha en el `::before` del disparador: al hacer hover se
   quedaba con el pseudo-elemento, el trazo saltaba a la punta del globo y el texto se
   corría. El punteado de glosa cuelga del texto y no del contenedor, para que no subraye
   también el trazo. */
.ind-esperado {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--color-cream-700);
    cursor: help;
}
.ind-esperado__marca {
    flex: none;
    width: 2px;
    height: 0.72rem;
    border-radius: 1px;
    background: var(--color-terra-600);
}
.ind-esperado__txt {
    text-decoration: underline dotted var(--color-cream-400);
    text-underline-offset: 3px;
}

/* Etiqueta con glosa: el punteado avisa que hay una definición debajo sin gritarla, y
   `help` confirma en el cursor. Quien ya sabe qué es la lee como una etiqueta más. */
.ind-glosa {
    cursor: help;
    text-decoration: underline dotted var(--color-cream-400);
    text-underline-offset: 3px;
    width: fit-content;
}

/* Barra del logro con la marca del ritmo comprometido.

   El relleno es el logro y la marca es lo esperado a la fecha, así que la comparación que
   la matriz escribe («30% de la meta · esperado 50%») acá se ve sin leer: si el relleno
   pasó la marca, va al día.

   La marca sobresale 3px por arriba y por abajo de una barra de 4px para que se distinga
   del relleno sin engordar la barra, y por eso `overflow: visible` —`.kpi-card__bar` la
   recorta— y `position: relative`, que el componente base no declara. Va en terracota, el
   acento del sistema para indicadores activos, que contrasta contra el relleno navy y
   contra el canal vacío: sobre cualquiera de los dos se ve. */
.ind-barra {
    position: relative;
    overflow: visible;
}
.ind-barra--ritmo::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--ritmo);
    width: 2px;
    margin-left: -1px;
    background: var(--color-terra-600);
    border-radius: 1px;
}

.ind-tabla-wrap { overflow-x: auto; }
.ind-metas {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}
/* Con el respaldo al lado la tabla no se estira: estirada, repartía el sobrante entre
   cuatro columnas de números y quedaban separadas por aire. Apilada sí, porque ahí el
   sobrante es el hueco del que se queja el ticket. */
@container (min-width: 53rem) {
    .ind-metas { width: max-content; max-width: 100%; }
}
.ind-metas th {
    text-align: left;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-cream-600);
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-cream-300);
}
.ind-metas td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--color-cream-200);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Reparto del ancho cuando la tabla se estira a la tarjeta.

   Fueron tres intentos y los dos primeros fallan por lo mismo, el sobrante junto en un solo
   lugar: una columna de relleno al final dejaba la fila pegada al borde izquierdo con un
   tercio de la tarjeta en blanco, y dárselo entero a Estado abría un hueco entre Logro y el
   chip. Repartido en porcentajes, cada columna crece un poco y ninguna se despega de su
   etiqueta. Suman 100 y son proporcionales a lo que cada una pide: «Medido» lleva la fecha
   debajo y necesita más que «Meta», que es una cifra corta.

   Estado se queda a la derecha —es el borde opuesto al año, y es donde se lee un estado en
   una tabla—. El selector nombra el tipo porque `.ind-metas th` le gana en especificidad al
   selector de una sola clase. */
.ind-metas th:nth-child(1) { width: 22%; }
.ind-metas th:nth-child(2) { width: 15%; }
.ind-metas th:nth-child(3) { width: 20%; }
.ind-metas th:nth-child(4) { width: 15%; }
.ind-metas th.ind-metas__estado,
.ind-metas td.ind-metas__estado {
    width: 28%;
    text-align: right;
}

.ind-metas__now { background: var(--color-navy-50); }
.ind-metas__now td:first-child { font-weight: 600; }
/* La fecha va debajo del valor y no al lado: al lado sumaba ~80px al ancho de la tabla,
   y ese ancho es lo que decide si el respaldo cabe a su costado o cae debajo. */
.ind-metas__fecha {
    display: block;
    font-size: 0.72rem;
    color: var(--color-cream-600);
}

/* El año, en dos tarjetas que se leen juntas: el resultado medido y el respaldo que lo
   acredita. Apiladas dejaban 285px muertos al lado de la tabla y una tarjeta de respaldo
   de 162px —la más baja de la ficha— ocupando un ancho que no usaba.

   La primera columna se acota al ancho de lectura de la tabla y no a una fracción del
   riel: así la geometría no cambia entre un convenio de un año y uno de seis, que es lo
   que haría un `1fr 1fr`. El respaldo toma el resto, que es donde sus descripciones
   necesitan el espacio.

   Las 26rem las fija la tabla: la más ancha de los convenios cargados pide 363px y el
   padding de la tarjeta se come 48. Por debajo de eso la tabla scrollea dentro de su
   envoltorio en escritorio, que es un fallback pensado para móvil y no para acá. */
/* Se decide por el ancho del riel y no por el del viewport: el riel ya le cede 280px al
   costado, así que el mismo viewport deja anchos distintos según lo que tenga al lado. Un
   `@media` tenía que adivinarlo y en 1280px dejaba la tarjeta de respaldo en 161px,
   ilegible.

   Las dos formas no son la misma con más o menos aire, son dos layouts:
     - lado a lado: la tabla se queda en su ancho intrínseco, porque el respaldo ocupa lo
       que sobra y no hay hueco que rellenar.
     - apiladas: la tarjeta toma el riel completo como cualquier otra —capada quedaba
       angosta al lado de la de respaldo, y desparejo— y la tabla se estira a ocuparla,
       que es lo que evita que el hueco vuelva.
   Las 53rem son 33 de tabla + 18 de respaldo + el gap. Eran 46 (26 + 18) mientras la tabla
   tenía cuatro columnas; la columna de Estado pide 133px más y con 26rem la tabla desbordaba
   111px dentro de su envoltorio, que en escritorio es justo lo que esta ficha no quiere.

   Las 18 del respaldo no se tocan, y por eso el umbral sube en vez de repartir: probado a
   51rem (respaldo en 16,5) para que 1440px cayera del lado de las dos columnas, la tarjeta
   de respaldo quedó en 273px y ahí las descripciones de los medios se truncan a «Informe
   de…» y el estado «desactualizado» se corta contra el borde. Es el mismo fallo de 161px
   que esta fila vino a arreglar, más leve. Entre apilar en 1440 —que es un layout que esta
   ficha ya tiene resuelto, con la tabla estirada y 26px de hueco— y dejar el respaldo
   ilegible, apila. */
.ind-par {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

@container (min-width: 53rem) {
    .ind-par { grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); }
}

/* Lo firmado se consulta, no se gestiona, pero eso no lo pinta distinto: la card va
   blanca como todas las demás. Teñirla la dejaba más oscura que la caja de la fórmula que
   vive adentro —el contenedor más marcado que su contenido—, y además rompía la
   homogeneidad del riel. La jerarquía la da el orden (va al final) y el tono del texto. */
.ind-convenio__notas { margin-top: var(--space-4); }

.ind-reportes__resto { margin-top: var(--space-2); }

/* ── Drawer de medición ── */
.ind-drawer__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ind-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ind-field__static {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-cream-700);
}
.ind-field__hint {
    font-size: 0.76rem;
    color: var(--color-cream-700);
}
.ind-drawer__foot {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

@media (max-width: 640px) {
    /* 1.85rem (el tamaño móvil global) sobre una frase de 90 caracteres da cuatro
       renglones y empuja el tramo fuera del primer pantallazo. */
    .ind-head .page-header__title { font-size: 1.375rem; }
}

/* ============================================
   ORGANIGRAMA (AL-103) — conteos de cada área y arrastre del editor
   ============================================ */

/* Conteos junto al nombre del área: un color fijo por tipo en todo el árbol, para
   leerlos sin palabras. Personas en terracota (el acento cálido) y áreas
   dependientes en navy (estructura). Tintes suaves: son metadatos, no acciones, y
   no pueden competir con el botón primario. Llevan ícono, así el color no es la
   única señal. */
.org-count {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 1.75rem;
    justify-content: center;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25rem;
    border: 1px solid transparent;
}
.org-count--personas {
    background: color-mix(in srgb, var(--color-terra-600) 10%, white);
    color: var(--color-terra-700);
    border-color: color-mix(in srgb, var(--color-terra-600) 22%, white);
}
/* «directo / total» (AL-165): el total, más suave, para que el directo mande. */
.org-count__total {
    font-weight: 500;
    opacity: 0.7;
}
/* En el cargo, el conteo de personas despliega quiénes son. El ícono va relleno:
   mismo color y misma figura que el del área —es la misma medida—, pero se lee
   como botón y no como dato. */
.org-count--boton {
    cursor: pointer;
    font-family: inherit;
}
.org-count--boton svg.lucide-users {
    fill: currentColor;
}
.org-count--boton:hover {
    border-color: var(--color-terra-500);
}
.org-count--boton:focus-visible {
    outline: 2px solid var(--color-terra-600);
    outline-offset: 1px;
}
.org-count--areas {
    background: color-mix(in srgb, var(--color-navy-600) 10%, white);
    color: var(--color-navy-700);
    border-color: color-mix(in srgb, var(--color-navy-600) 22%, white);
}

/* Dónde va a caer el área: el hueco que deja Sortable se dibuja como una franja
   punteada, sin el contenido, que ya viaja con el cursor. */
.organigrama-ghost {
    height: 2.25rem;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-navy-50);
    outline: 1px dashed var(--color-navy-400);
    outline-offset: -1px;
}
.organigrama-ghost > * {
    visibility: hidden;
}

/* El área arrastrada: una copia que sigue al cursor con su contenido. Se recorta
   a su encabezado para que un área con mucho debajo no tape el árbol. */
.organigrama-drag {
    max-height: 2.75rem;
    overflow: hidden;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-cream-50);
    box-shadow: var(--shadow-lg);
    outline: 1px solid var(--color-navy-200);
    opacity: 1 !important; /* Sortable le pone opacidad inline al clon */
    cursor: grabbing;
}

/* La rama que recibe el área: su línea guía se tiñe mientras el área pasa por ella. */
.organigrama-rama--destino {
    border-color: var(--color-navy-400);
}

/* Un área o un cargo con un cambio sin guardar (AL-166): una barra navy-600 a la izquierda,
   el tono de `.pendiente-marca`. Navy y no amarillo: el amarillo es del aviso «Te afecta» y
   de los conflictos de jerarquía. La sombra interior no ocupa lugar y el margen negativo
   devuelve el aire que suma el padding, así que las columnas de las filas no se corren.
   Sin radio a la izquierda: el `summary` del área es `rounded-lg` y la barra se curvaba. */
.org-cambio {
    box-shadow: inset 2px 0 0 var(--color-navy-600);
    margin-left: -0.5rem;
    padding-left: 0.5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ── Aviso de jerarquía del organigrama (AL-104) ──
   El detalle del aviso amarillo: la ruta de hoy y después (solo el modal de mover),
   la tabla por acceso y el desglose de un área superior con varios cargos. Usa el
   ancho entero del aviso, no la columna del texto, y va centrado: cada pieza mide lo
   que su contenido y no se estira de borde a borde. El contenedor es la referencia
   de los cortes: el mismo detalle cae en un modal de 720 px, en uno de 540 px y bajo
   una fila del árbol con sangría. */
.aviso-jer {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    font-weight: 400;
}
.aviso-jer > * { max-width: 100%; }

/* Área: negrita navy, sin ícono (en el árbol real solo lleva el chevron). Cargo: su ícono. */
.aviso-jer__area { font-weight: 600; color: var(--color-navy-900); }
.aviso-jer__cargo { display: inline-flex; align-items: flex-start; gap: 0.3rem; color: var(--color-cream-900); min-width: 0; }
.aviso-jer__cargo > svg,
.aviso-jer__cargo > i { width: 0.95em; height: 0.95em; margin-top: 0.2em; flex-shrink: 0; color: var(--color-cream-500); }
/* Dos renglones como mucho; el segundo con sangría colgante en las áreas (los
   cargos ya la tienen: el ícono queda en su columna). El `title` lo pone el JS del
   aviso solo si el nombre no cupo. */
.aviso-jer__nom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: anywhere;
}
.aviso-jer__area > .aviso-jer__nom { padding-left: 0.75em; text-indent: -0.75em; }

/* Tabla por acceso: mide su contenido más un respiro entre columnas, y la línea de
   los encabezados, lo mismo que la tabla. */
/* Sin `overflow`: recortaría el tooltip del (?) de «Superior». En angosto las celdas
   se parten, así que la tabla cabe sin scroll. */
.aviso-jer__tabla { max-width: 100%; }
.aviso-jer__cmp { width: auto; border-collapse: collapse; font-size: 0.75rem; text-align: left; }
.aviso-jer__cmp th,
.aviso-jer__cmp td { padding: 0.375rem 1.5rem 0.375rem 0; vertical-align: top; }
.aviso-jer__cmp th:last-child,
.aviso-jer__cmp td:last-child { padding-right: 0; }
.aviso-jer__cmp thead th { font-weight: 600; vertical-align: bottom; border-bottom: 1px solid rgb(0 0 0 / 0.1); }
.aviso-jer__cmp tbody th { font-weight: 500; }
.aviso-jer__cmp tr.aviso-jer__grupo th { padding-top: 0.625rem; font-weight: 600; }
.aviso-jer__cmp tbody + tbody tr.aviso-jer__grupo th { border-top: 1px solid rgb(0 0 0 / 0.1); }
.aviso-jer__cmp thead .aviso-jer__cargo { color: inherit; }
.aviso-jer__cmp thead .aviso-jer__cargo > svg,
.aviso-jer__cmp thead .aviso-jer__cargo > i,
.aviso-jer__cmp .aviso-jer__grupo .aviso-jer__cargo > svg,
.aviso-jer__cmp .aviso-jer__grupo .aviso-jer__cargo > i { color: inherit; opacity: 0.7; }
/* Grupo plegable: el botón ocupa la fila entera. */
.aviso-jer__toggle { display: flex; align-items: flex-start; gap: 0.3rem; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.aviso-jer__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--radius-sm); }
.aviso-jer__chev { display: inline-flex; margin-top: 0.2em; flex-shrink: 0; transition: transform 150ms; }
.aviso-jer__chev > i, .aviso-jer__chev > svg { width: 0.95em; height: 0.95em; }
.aviso-jer__chev.is-open { transform: rotate(90deg); }
.aviso-jer__cuenta { margin-left: auto; padding-left: 0.5rem; flex-shrink: 0; font-weight: 400; opacity: 0.75; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .aviso-jer__chev { transition: none; } }
.aviso-jer__sub { display: block; font-weight: 400; opacity: 0.75; }
.aviso-jer__caption { caption-side: top; text-align: left; padding-bottom: 0.375rem; }
.aviso-jer__caption > .aviso-jer__cargo { display: inline-flex; vertical-align: top; color: inherit; font-weight: 600; }

/* Nivel: texto más dos marcas (0, 1 o 2 llenas), para no depender del color. */
.aviso-jer__nivel { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.aviso-jer__marcas { display: inline-flex; gap: 2px; }
.aviso-jer__marcas > i { width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 2px; }
.aviso-jer__marcas > i.is-on { background: currentColor; }
.aviso-jer__nivel--alto { font-weight: 600; color: #713f12; }
.aviso-jer__nivel--bajo { opacity: 0.62; }

/* «Ver los N cargos de X»: el desglose del mayor acceso del área superior. */
.aviso-jer__desglose { font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; }
.aviso-jer__desglose > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgb(133 77 14 / 0.35);
    text-underline-offset: 2px;
    border-radius: var(--radius-sm);
}
.aviso-jer__desglose > summary::-webkit-details-marker { display: none; }
.aviso-jer__desglose > summary:focus-visible { outline: 2px solid var(--color-navy-400); outline-offset: 2px; }
.aviso-jer__desglose > summary > svg,
.aviso-jer__desglose > summary > i { width: 0.85rem; height: 0.85rem; transition: transform 150ms; }
.aviso-jer__desglose[open] > summary > svg,
.aviso-jer__desglose[open] > summary > i { transform: rotate(180deg); }
.aviso-jer__desglose .aviso-jer__tabla { margin-top: 0.375rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.6); }
/* Quién da el máximo: el nombre largo se corta en 2 renglones y no ensancha la tabla. */
.aviso-jer__desglose .aviso-jer__cmp tbody th { font-weight: 400; }
.aviso-jer__desglose .aviso-jer__cmp .aviso-jer__nom { max-width: min(14rem, 60cqw); }
@media (prefers-reduced-motion: reduce) {
    .aviso-jer__desglose > summary > svg,
    .aviso-jer__desglose > summary > i { transition: none; }
}

/* Angosto (celular, o bajo una fila del árbol): menos aire entre columnas y sin las
   marcas del nivel, que queda en texto. Al final para ganarle a las reglas de arriba. */
@container (max-width: 400px) {
    .aviso-jer__cmp th,
    .aviso-jer__cmp td { padding-right: 0.75rem; }
    .aviso-jer__marcas { display: none; }
}

/* ── Cambios pendientes (AL-105) ─────────────────────────────────────────────
   `static/js/cambios_pendientes.js` marca cada `[data-pending-field]` que cambió con
   `.is-changed` y un punto navy-600 en su hueco (`.pendiente-slot`), al final de la
   etiqueta o, en una fila de acceso, a la derecha de sus íconos. El hueco tiene ancho
   fijo aunque esté vacío, así que la marca aparece sin mover nada. El punto lleva el
   valor original en `data-tooltip` («Antes: Lectura») y en `sr-only`; se lee también en
   gris, y el pie lo dice en texto («N cambios sin guardar»). */
.pendiente-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    /* `middle` y no la línea base: un inline-flex vacío y uno con el punto tienen línea
       base distinta, y el hueco saltaba al aparecer la marca. */
    vertical-align: middle;
    flex-shrink: 0;
}
.pendiente-marca {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background: var(--color-navy-600);
    vertical-align: 0.125em;
}
.pendiente-slot > .pendiente-marca { display: block; cursor: help; }
.pendiente-marca--barra { margin-right: 0.5rem; }

/* El pie de la vista, que es también la barra de cambios sin guardar: al final del form.
   Sin cambios es un pie normal, en su lugar. Con cambios (`.has-changes`) pasa a `sticky`,
   12px sobre el borde de la pantalla, y cuando su lugar no se ve (`.is-floating`) es la
   tarjeta flotante de siempre: fondo, borde navy-200, esquinas redondeadas y sombra, con la
   página pasando por detrás. El fondo de cada estado lo dibuja un `::before` sobre la misma
   caja, así que acoplar o soltar no cambia ni el alto ni dónde quedan los botones. */
/* z-index 25, encajado en la escala: sobre el contenido (10-20) que pasa por detrás, y
   bajo lo que se abre DENTRO del form: los tooltips en hover/foco (30, `[data-tooltip]`) y
   los desplegables (`.vf-listbox__menu` 30, `.lb__list` 35). Con 40, como el `.tabbar`, el
   menú del rol en la ficha del usuario se abría por debajo del pie flotante. El header (50)
   y los modales (1000) siguen encima. */
.pendientes-bar {
    position: relative;
    z-index: 25;
}
.pendientes-bar.has-changes {
    position: sticky;
    bottom: var(--space-3);
}
.pendientes-bar [hidden] { display: none; }
.pendientes-bar__inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2) var(--space-3);
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
}
.pendientes-bar__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.pendientes-bar.has-changes.is-floating .pendientes-bar__inner::before {
    background: var(--color-cream-50);
    border-color: var(--color-navy-200);
    box-shadow: var(--shadow-lg);
}
.pendientes-bar__texto {
    margin: 0 auto 0 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-navy-800);
}
.pendientes-bar__acciones { display: flex; gap: var(--space-2); flex-shrink: 0; }
.pendientes-bar__centinela { height: 0; }
/* Dentro de una tarjeta: acoplado es su `.card__footer`; flotando, la misma tarjeta
   flotante, metida 12px desde los bordes de la card. */
.pendientes-bar--tarjeta .pendientes-bar__inner {
    margin: 0;
    padding: var(--space-4) var(--space-6);
}
.pendientes-bar--tarjeta .pendientes-bar__inner::before {
    background: var(--color-cream-100);
    border-color: var(--color-cream-200) transparent transparent;
    border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
}
.pendientes-bar--tarjeta.has-changes.is-floating .pendientes-bar__inner::before {
    inset: 0 var(--space-3);
    border-radius: var(--radius-lg);
}
@media (max-width: 639px) {
    /* Los botones, alineados con el contenido (`.content` + el `px-4` de la vista); la
       tarjeta flotante, a 8px de los bordes de la pantalla. */
    .pendientes-bar__inner { margin: 0 -1.5rem; padding: var(--space-3) 1.5rem; }
    .pendientes-bar--tarjeta .pendientes-bar__inner { margin: 0; padding: var(--space-3) var(--space-4); }
    .pendientes-bar--tarjeta.has-changes.is-floating .pendientes-bar__inner::before { inset: 0 calc(-1 * var(--space-2)); }
    .pendientes-bar__texto { flex-basis: 100%; }
    .pendientes-bar:not(.has-changes) .pendientes-bar__texto { display: none; }
    .pendientes-bar__acciones { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .pendientes-bar.has-changes [data-pending-submit] { grid-column: 1 / -1; }
    /* Sin «Cancelar» (el organigrama, AL-166), «Descartar» va a lo ancho. */
    .pendientes-bar__acciones > [data-pending-action="descartar"]:first-child { grid-column: 1 / -1; }
}

/* Los modales del kit (salida y revisión) se abren con `hidden`, no con Alpine. */
.modal-backdrop[hidden] { display: none; }
/* Los botones y textos del otro modo del modal de salida (AL-166): `.btn` fija su `display`. */
#pendientes-salida [hidden] { display: none; }
/* Tres botones (Descartar / Seguir editando / el principal) en una fila desde `sm:`, con
   Descartar a la izquierda; en celular, apilados a lo ancho con el principal al final,
   como en el pie de la vista. Los modales que los llevan van en `.modal--lg`. */
.pendientes-modal__acciones { flex-wrap: nowrap; justify-content: flex-end; gap: var(--space-2); }
.pendientes-modal__acciones > :first-child { margin-right: auto; }
@media (max-width: 639px) {
    .pendientes-modal__acciones { display: grid; grid-template-columns: 1fr; }
    .pendientes-modal__acciones > :first-child { margin-right: 0; }
}
.pendientes-revision { margin: 0; padding: 0; list-style: none; }
.pendientes-revision__item {
    display: grid;
    gap: 0.125rem;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-cream-200);
    font-size: 0.875rem;
}
.pendientes-revision__item:first-child { border-top: 0; }
.pendientes-revision__campo { font-weight: 500; color: var(--color-navy-800); }
.pendientes-revision__valores { color: var(--color-cream-700); overflow-wrap: anywhere; }
.pendientes-revision__valores .aviso-jer__nivel { color: var(--color-navy-800); }
.pendientes-revision__valores .aviso-jer__nivel--bajo { color: var(--color-cream-700); opacity: 1; }
.pendientes-revision__nota { font-size: 0.75rem; color: var(--color-cream-600); }