/* ═══════════════════════════════════════════════════════════════════════════
   HELPDESK2001 · Estilos CSS personalizados
   Prefijo: hd2001 (kebab-case)
   Versión: 2.0 · 2026-04-25 · Refactor a unidades fluidas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── VARIABLES ────────────────────────────── */
:root {
    /* ── Colores primarios (Fluent) ─── */
    --hd2001-primary: #106ebe;
    --hd2001-primary-dark: #0e5fa8;
    --hd2001-primary-light: #deecf9;
    --hd2001-secondary: #8a8886;
    --hd2001-link: #106ebe;
    --hd2001-card-header-bg: #faf9f8;
    --hd2001-card-header-color: #201f1e;
    --hd2001-card-table-title-color: #605e5c;
    /* ── Texto ─── */
    --hd2001-text: #201f1e;
    --hd2001-text-muted: #605e5c;
    --hd2001-text-subtle: #a19f9d;
    /* ── Estados ─── */
    --hd2001-success: #107c10;
    --hd2001-success-bg: #dff6dd;
    --hd2001-danger: #a4262c;
    --hd2001-danger-bg: #fed9cc;
    --hd2001-warning: #835b00;
    --hd2001-warning-bg: #fff4ce;
    /* ── Grises / superficie ─── */
    --hd2001-border: #edebe9;
    --hd2001-divider: #f3f2f1;
    --hd2001-bg-light: #faf9f8;
    /*--hd2001-bg-page: #f3f2f1;*/
    --hd2001-bg-page: #f7f4f2d8;
    --hd2001-border-dark: #8a8886;
    /* ── Espaciación fluida (se reduce con la ventana) ─── */
    --hd2001-spacing-xs: clamp(0.2rem, 0.1rem + 0.2vw, 0.25rem);
    --hd2001-spacing-sm: clamp(0.35rem, 0.2rem + 0.4vw, 0.5rem);
    --hd2001-spacing-md: clamp(0.65rem, 0.3rem + 0.8vw, 1rem);
    --hd2001-spacing-lg: clamp(0.85rem, 0.4rem + 1vw, 1.25rem);
    --hd2001-spacing-xl: clamp(1rem, 0.5rem + 1.2vw, 1.5rem);
    /* ── Bordes ─── */
    --hd2001-border-width: 1px;
    --hd2001-border-radius-sm: 2px;
    --hd2001-border-radius-md: 4px;
    /* ── Sombras ─── */
    --hd2001-shadow-sm: none;
    --hd2001-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --hd2001-shadow-lg: -4px 0 24px rgba(0, 0, 0, 0.15);
    --hd2001-shadow-drawer: -4px 0 16px rgba(0, 0, 0, 0.08);
    /* ── Z-index ─── */
    --hd2001-z-overlay: 1040;
    --hd2001-z-dropdown: 1050;
    /* ── Tipografía ─── */
    --hd2001-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ───────────────────────────────── GLOBAL ────────────────────────────────── */

/*
 * Tipografía fluida (base para todo el escalado):
 *   - Mínimo : 16px → ventanas ≤ 768 px
 *   - Máximo : 20px → ventanas ≥ 1920 px
 *
 *   Todas las dimensiones del diseño están expresadas en rem,
 *   por lo que escalan automáticamente al cambiar el tamaño de
 *   la ventana o al maximizar/restaurar.
 *
 *   Se mantienen en px:
 *     · Bordes (1px), separadores y border-radius pequeños (decoración).
 *     · Sombras (offsets/desenfoques).
 *     · Breakpoints de media queries (referencian viewport real).
 */
html {
    font-size: clamp(9px, 10.67px + 0.347vw, 22px);
}

/* Forzar que Bootstrap respete la base fluida del html */
:root {
    --bs-body-font-size: 1rem;
}

html, body {
    font-family: var(--hd2001-font-family);
    background-color: var(--hd2001-bg-page);
    color: var(--hd2001-text);
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

a, .btn-link {
    color: var(--hd2001-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--hd2001-primary);
    border-color: var(--hd2001-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--hd2001-primary-light);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ───────────────────────────────── VALIDACIÓN ────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: var(--hd2001-border-width) solid var(--hd2001-success);
}

.invalid {
    outline: var(--hd2001-border-width) solid var(--hd2001-danger);
}

.validation-message {
    color: var(--hd2001-danger);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--hd2001-border-dark);
}

/* ───────────────────────────────── ERROR BOUNDARY ────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: var(--hd2001-spacing-md) var(--hd2001-spacing-md) var(--hd2001-spacing-md) 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* ───────────────────────────────── CABECERA DE TARJETA DE SECCIÓN ─────────── */
.hd2001-card-section-header {
    background-color: var(--hd2001-card-header-bg);
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hd2001-card-section-header-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hd2001-card-header-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ───────────────────────────────── TABLAS ──────────────────────────────────── */
.hd2001-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .hd2001-table th,
    .hd2001-table td {
        padding: 0.35rem 0.75rem;
        vertical-align: middle;
        border-bottom: var(--hd2001-border-width) solid var(--hd2001-divider);
    }

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

.hd2001-table-header {
    background-color: var(--hd2001-bg-light);
    color: var(--hd2001-card-table-title-color);
    font-size: 0.90rem;
    font-weight: 100;
    letter-spacing: 0.04em;
}

    .hd2001-table-header th {
        border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
        padding: 0.4rem 0.75rem;
        white-space: nowrap;
    }

/* ───────────────────────────────── COMPONENTES BOOTSTRAP ───────────────────── */
.btn-xs {
    padding: 0.1rem 0.35rem;
    font-size: 0.72rem;
    border-radius: var(--hd2001-border-radius-sm);
    line-height: 1.4;
}

.fs-7 {
    font-size: 0.8rem !important;
}

/* ───────────────────────────────── AVATAR ────────────────────────────────── */
.hd2001-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--hd2001-border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.hd2001-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    border-radius: 50%;
}

.hd2001-avatar-lg {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.35rem;
    border-radius: var(--hd2001-border-radius-md);
}



/* ───────────────────────────────── CONTACTO ────────────────────────────────── */
.hd2001-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--hd2001-spacing-sm);
    padding: 0.3rem 0;
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-divider);
    font-size: 0.875rem;
    line-height: 1.35;
}

    .hd2001-contact-item:last-of-type {
        border-bottom: none;
    }

.hd2001-dot {
    font-size: 0.55rem;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.hd2001-dot-primary {
    color: var(--hd2001-primary);
}

.hd2001-dot-secondary {
    color: var(--hd2001-secondary);
}



/* ───────────────────────────────── DRAWER (tipo hd-drawer) ───────────────────── */
.hd2001-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--hd2001-z-overlay);
}

.hd2001-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(45rem, 96vw);
    background: #fff;
    box-shadow: var(--hd2001-shadow-lg);
    z-index: var(--hd2001-z-dropdown);
    display: flex;
    flex-direction: column;
}

.hd2001-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem var(--hd2001-spacing-lg);
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
    flex-shrink: 0;
    background: var(--hd2001-bg-light);
}

.hd2001-drawer-body {
    padding: var(--hd2001-spacing-lg);
    overflow-y: auto;
    flex: 1;
}



/* ───────────────────────────────── DRAWER (SectionDrawer moderno) ──────────── */
.hd2001-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(50rem, 96vw);
    background: #fff;
    z-index: var(--hd2001-z-dropdown);
    display: flex;
    flex-direction: column;
    border-left: var(--hd2001-border-width) solid var(--hd2001-border);
    box-shadow: var(--hd2001-shadow-drawer);
}

.hd2001-drawer-panel-header {
    padding: var(--hd2001-spacing-md) var(--hd2001-spacing-lg);
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.hd2001-drawer-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--hd2001-spacing-lg);
}

.hd2001-drawer-panel-footer {
    padding: 0.75rem var(--hd2001-spacing-lg);
    border-top: var(--hd2001-border-width) solid var(--hd2001-border);
    flex-shrink: 0;
    display: flex;
    gap: var(--hd2001-spacing-sm);
    justify-content: flex-end;
}

.hd2001-drawer-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--hd2001-z-overlay);
}



/* ───────────────────────────────── ACTIVIDAD ────────────────────────────── */
.hd2001-activity-item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--hd2001-spacing-sm);
    padding: 0.4rem 0;
    font-size: 0.82rem;
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-divider);
}

    .hd2001-activity-item:last-child {
        border-bottom: none;
    }



.hd2001-card {
    background: #fff;
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    box-shadow: var(--hd2001-shadow-sm);
    overflow: hidden;
}

.hd2001-card-add-edit {
    background: #E0FFFF;
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    box-shadow: var(--hd2001-shadow-sm);
    overflow: hidden;
}

/* ── Bootstrap card override → Fluent ──── */
.card {
    border-color: var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    box-shadow: none;
}

/* ───────────────────────────────── FLUENT DESIGN SYSTEM ───────────────────── */

/* Página de fondo */
.hd2001-page-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hd2001-text);
}

.hd2001-page-subtitle {
    font-size: 0.78rem;
    color: var(--hd2001-text-muted);
    margin-top: 0.125rem;
}

/* ─── Command bar ─────────────────────────────────────────────────────────── */
.hd2001-command-bar {
    background: #fff;
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
    height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0 var(--hd2001-spacing-xl);
    gap: 0.25rem;
    flex-shrink: 0;
}

.hd2001-cmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0 0.625rem;
    border: none;
    background: transparent;
    border-radius: var(--hd2001-border-radius-md);
    font-size: 0.82rem;
    color: var(--hd2001-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s;
    font-family: var(--hd2001-font-family);
}

    .hd2001-cmd-btn:hover {
        background: var(--hd2001-bg-page);
        color: var(--hd2001-text);
        text-decoration: none;
    }

    .hd2001-cmd-btn:active {
        background: var(--hd2001-border);
    }

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

        .hd2001-cmd-btn.primary:hover {
            background: var(--hd2001-primary-dark);
            color: #fff;
        }

    .hd2001-cmd-btn.danger {
        color: var(--hd2001-danger);
    }

        .hd2001-cmd-btn.danger:hover {
            background: var(--hd2001-danger-bg);
            color: var(--hd2001-danger);
        }

.hd2001-cmd-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--hd2001-border);
    margin: 0 0.375rem;
    flex-shrink: 0;
}

.hd2001-cmd-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* KPI strip */
.hd2001-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.hd2001-kpi-card {
    background: #fff;
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    padding: 0.875rem 1rem;
    border-left: 4px solid;
}

    .hd2001-kpi-card.blue {
        border-left-color: var(--hd2001-primary);
    }

    .hd2001-kpi-card.green {
        border-left-color: var(--hd2001-success);
    }

    .hd2001-kpi-card.amber {
        border-left-color: #f7c948;
    }

    .hd2001-kpi-card.red {
        border-left-color: var(--hd2001-danger);
    }

.hd2001-kpi-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--hd2001-text);
    line-height: 1;
}

.hd2001-kpi-label {
    font-size: 0.75rem;
    color: var(--hd2001-text-muted);
    margin-top: 0.25rem;
}

/* Filtros Fluent */
.hd2001-fl-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.hd2001-fl-search {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border: var(--hd2001-border-width) solid var(--hd2001-border-dark);
    border-radius: var(--hd2001-border-radius-sm);
    padding: 0.3rem 0.625rem;
    background: #fff;
    flex: 1;
    max-width: 23.75rem;
}

    .hd2001-fl-search:focus-within {
        border-color: var(--hd2001-primary);
        box-shadow: 0 0 0 1px var(--hd2001-primary);
    }

    .hd2001-fl-search input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.85rem;
        color: var(--hd2001-text);
        flex: 1;
        font-family: inherit;
    }

.hd2001-fl-select {
    padding: 0.375rem 0.625rem;
    border: var(--hd2001-border-width) solid var(--hd2001-border-dark);
    border-radius: var(--hd2001-border-radius-sm);
    font-size: 0.85rem;
    background: #fff;
    color: var(--hd2001-text);
    font-family: inherit;
    outline: none;
}

    .hd2001-fl-select:focus {
        border-color: var(--hd2001-primary);
        box-shadow: 0 0 0 1px var(--hd2001-primary);
    }

/* Tabla principal de lista */
.hd2001-fl-table-wrap {
    background: #fff;
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    overflow: hidden;
}

.hd2001-fl-table {
    width: 100%;
    border-collapse: collapse;
}

    .hd2001-fl-table thead th {
        padding: 0.625rem 1rem;
        text-align: left;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--hd2001-text-muted);
        border-bottom: 2px solid var(--hd2001-border);
        background: #fff;
        white-space: nowrap;
        user-select: none;
    }

        .hd2001-fl-table thead th:hover {
            background: var(--hd2001-divider);
        }

    .hd2001-fl-table tbody tr {
        border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
        cursor: pointer;
        transition: background 0.1s;
    }

        .hd2001-fl-table tbody tr:last-child {
            border-bottom: none;
        }

        .hd2001-fl-table tbody tr:hover td {
            background: var(--hd2001-divider);
        }

    .hd2001-fl-table td {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
        vertical-align: middle;
        color: var(--hd2001-text);
    }

/* Persona (avatar + name stack) */
.hd2001-persona {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.hd2001-persona-name {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--hd2001-text);
}

.hd2001-persona-sub {
    font-size: 0.73rem;
    color: var(--hd2001-text-subtle);
}

/* Code monospace chip */
.hd2001-code-mono {
    font-family: 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.78rem;
    color: var(--hd2001-text-muted);
    background: var(--hd2001-divider);
    padding: 0.125rem 0.375rem;
    border-radius: var(--hd2001-border-radius-sm);
}

/* Badges Fluent */
.hd2001-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--hd2001-border-radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

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

    .hd2001-badge.neutral {
        background: var(--hd2001-divider);
        color: var(--hd2001-text-muted);
    }

    .hd2001-badge.info {
        background: var(--hd2001-primary-light);
        color: var(--hd2001-primary);
    }

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

    .hd2001-badge.error {
        background: var(--hd2001-danger-bg);
        color: var(--hd2001-danger);
    }

    .hd2001-badge.vip {
        background: #fff4ce;
        color: #835b00;
        border: var(--hd2001-border-width) solid #f7c948;
    }

/* Status dot */
.hd2001-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

    .hd2001-status-dot.on {
        background: var(--hd2001-success);
    }

    .hd2001-status-dot.off {
        background: var(--hd2001-text-subtle);
    }

/* Botón pequeño Fluent */
.hd2001-fl-btn {
    padding: 0.25rem 0.625rem;
    border-radius: var(--hd2001-border-radius-sm);
    border: var(--hd2001-border-width) solid var(--hd2001-border-dark);
    background: #fff;
    font-size: 0.78rem;
    color: var(--hd2001-text);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
    line-height: 1.4;
}

    .hd2001-fl-btn:hover {
        background: var(--hd2001-divider);
    }

/* Tabla interna de tarjetas */
.hd2001-fl-inner-table {
    width: 100%;
    border-collapse: collapse;
}

    .hd2001-fl-inner-table th {
        padding: 0.375rem 1rem;
        text-align: left;
        font-size: 0.72rem;
        color: var(--hd2001-text-muted);
        border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
        background: var(--hd2001-bg-light);
        font-weight: 600;
        white-space: nowrap;
    }

    .hd2001-fl-inner-table td {
        padding: 0.5rem 1rem;
        border-bottom: var(--hd2001-border-width) solid var(--hd2001-divider);
        font-size: 0.83rem;
        color: var(--hd2001-text);
        vertical-align: middle;
    }

    .hd2001-fl-inner-table tbody tr:last-child td {
        border-bottom: none;
    }

    .hd2001-fl-inner-table tbody tr:hover td {
        background: var(--hd2001-divider);
    }

/* Hero detalle cliente */
.hd2001-detail-hero {
    background: #fff;
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.hd2001-detail-hero-top {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
}

.hd2001-hero-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hd2001-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hd2001-hero-trade {
    font-size: 0.8rem;
    color: var(--hd2001-text-muted);
    margin-top: 0.125rem;
}

.hd2001-hero-meta-strip {
    display: inline-flex;
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    overflow: hidden;
    margin-top: 0.625rem;
}

.hd2001-meta-cell {
    padding: 0.5rem 1rem;
    border-right: var(--hd2001-border-width) solid var(--hd2001-border);
}

    .hd2001-meta-cell:last-child {
        border-right: none;
    }

.hd2001-meta-lbl {
    font-size: 0.68rem;
    color: var(--hd2001-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

.hd2001-meta-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hd2001-text);
}

    .hd2001-meta-val a {
        color: var(--hd2001-link);
        text-decoration: none;
    }

        .hd2001-meta-val a:hover {
            text-decoration: underline;
        }

.hd2001-hero-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Pivot tabs detalle */
.hd2001-detail-pivots {
    display: flex;
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-border);
    background: var(--hd2001-bg-light);
    padding: 0 1.25rem;
    overflow-x: auto;
}

.hd2001-dp-tab {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
    color: var(--hd2001-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
    user-select: none;
}

    .hd2001-dp-tab:hover {
        color: var(--hd2001-text);
    }

    .hd2001-dp-tab.active {
        color: var(--hd2001-primary);
        border-bottom-color: var(--hd2001-primary);
        font-weight: 600;
    }

/* Obs strip (nota de aviso en detalle) */
.hd2001-obs-strip {
    background: #fffbcc;
    border: var(--hd2001-border-width) solid #f7c948;
    border-radius: var(--hd2001-border-radius-md);
    padding: 0.5rem 0.875rem;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: #201f1e;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Grid layouts detalle */
.hd2001-detail-grid-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hd2001-detail-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Direcciones Fluent */
.hd2001-addr-grid {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

.hd2001-addr-block {
    border: var(--hd2001-border-width) solid var(--hd2001-border);
    border-radius: var(--hd2001-border-radius-md);
    padding: 0.75rem 0.875rem;
    background: var(--hd2001-bg-light);
    min-width: 12.5rem;
    flex: 1;
}

.hd2001-addr-type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hd2001-primary);
    margin-bottom: 0.375rem;
}

.hd2001-addr-text {
    font-size: 0.82rem;
    color: var(--hd2001-text);
    line-height: 1.7;
}

/* Software pills Fluent */
.hd2001-sw-cloud {
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.hd2001-sw-pill {
    padding: 0.25rem 0.625rem;
    border-radius: var(--hd2001-border-radius-sm);
    background: var(--hd2001-primary-light);
    color: var(--hd2001-primary);
    font-size: 0.76rem;
    font-weight: 600;
    border: var(--hd2001-border-width) solid #c7e0f4;
}

/* Notas Fluent */
.hd2001-note-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-bottom: var(--hd2001-border-width) solid var(--hd2001-divider);
}

    .hd2001-note-row:last-child {
        border-bottom: none;
    }

.hd2001-note-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--hd2001-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.hd2001-note-text {
    font-size: 0.83rem;
    color: var(--hd2001-text);
    line-height: 1.5;
    white-space: pre-wrap;
}

.hd2001-note-meta {
    font-size: 0.72rem;
    color: var(--hd2001-text-subtle);
    margin-top: 0.25rem;
}

/* Link Fluent */
.hd2001-fl-link {
    color: var(--hd2001-link);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
}

    .hd2001-fl-link:hover {
        text-decoration: underline;
    }


/* ───────────────────────────────── HERO CARD ────────────────────────────── */
.hd2001-hero-top {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: var(--hd2001-border-width) solid #f0f2f5;
}

.hd2001-hero-obs {
    border-left: var(--hd2001-border-width) solid #f0f2f5;
    padding: 0.75rem 1rem;
    flex-shrink: 0;
    width: 40%;
}

.hd2001-hero-obs-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #adb5bd;
    margin-bottom: 0.3rem;
}

/* ───────────────────────────────── STATS BAR ────────────────────────────── */
.hd2001-stats-bar {
    display: flex;
}

.hd2001-stat-item {
    flex: 1;
    padding: 0.6rem 0.5rem;
    text-align: center;
    border-right: var(--hd2001-border-width) solid #f0f2f5;
    cursor: default;
}

    .hd2001-stat-item:last-child {
        border-right: none;
    }

.hd2001-stat-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d6efd;
    line-height: 1;
}

    .hd2001-stat-num.zero {
        color: #ced4da;
    }

.hd2001-stat-lbl {
    font-size: 0.65rem;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

/* ───────────────────────────────── TIMELINE DE NOTAS ───────────────────── */
.hd2001-timeline-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: var(--hd2001-border-width) solid #f0f2f5;
}

    .hd2001-timeline-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.hd2001-timeline-gutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 1rem;
    padding-top: 0.1875rem;
}

.hd2001-timeline-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #0d6efd;
    flex-shrink: 0;
}

    .hd2001-timeline-dot.highlight {
        background: #f59e0b;
    }

.hd2001-timeline-line {
    flex: 1;
    width: 1px;
    background: #dee2e6;
    margin-top: 0.25rem;
    min-height: 0.75rem;
}

/* ──────────────────────── NOTIFICATION BELL (Fase 4) ──────────────────────── */
.notification-badge {
    position: absolute;
    top: -0.125rem;
    right: -0.25rem;
    font-size: 0.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.1875rem;
    line-height: 1.1rem;
    border-radius: 1rem;
}

.notification-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    width: 20rem;
    max-height: 25rem;
    overflow-y: auto;
    z-index: var(--hd2001-z-dropdown);
}

.notification-list {
    max-height: 20rem;
    overflow-y: auto;
}

.notification-item:hover {
    background-color: var(--hd2001-bg-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE · breakpoints de layout
   Los valores rem ya escalan solos con html{font-size:clamp(...)}.
   Aquí solo se reorganizan los grids cuando el espacio no es suficiente.
   Los breakpoints van en px porque referencian el viewport real, no el texto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1280 px: KPI de 4 col → 2 col, grids detalle se comprimen ── */
@media (max-width: 1280px) {
    .hd2001-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd2001-detail-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .hd2001-hero-meta-strip {
        flex-wrap: wrap;
    }

    .hd2001-meta-cell {
        padding: 0.375rem 0.75rem;
    }
}

/* ── 900 px: grids de detalle a 1 col, hero en columna ── */
@media (max-width: 900px) {
    .hd2001-detail-grid-2,
    .hd2001-detail-grid-3 {
        grid-template-columns: 1fr;
    }

    .hd2001-detail-hero-top {
        flex-wrap: wrap;
    }

    .hd2001-hero-actions {
        margin-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .hd2001-hero-obs {
        width: 100%;
        border-left: none;
        border-top: var(--hd2001-border-width) solid #f0f2f5;
    }

    .hd2001-fl-search {
        max-width: 100%;
    }
}

/* ── 640 px: KPI a 1 col, stats en 2 col, ocultar columnas secundarias tabla ── */
@media (max-width: 640px) {
    .hd2001-kpi-row {
        grid-template-columns: 1fr;
    }

    .hd2001-stats-bar {
        flex-wrap: wrap;
    }

    .hd2001-stat-item {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: var(--hd2001-border-width) solid #f0f2f5;
    }

    .hd2001-command-bar {
        padding: 0 var(--hd2001-spacing-md);
        overflow-x: auto;
    }

    .hd2001-fl-filters {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ───────────────────────────── TIMELINE ────────────────────────────────── */
.hd2001-timeline {
    position: relative;
    padding-left: 2.5rem;
}

.hd2001-timeline::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--hd2001-border-color, #dee2e6);
}

.hd2001-timeline-item {
    position: relative;
    margin-bottom: 0.75rem;
}

.hd2001-timeline-icon {
    position: absolute;
    left: -2.05rem;
    top: 0.35rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
    z-index: 1;
}

.hd2001-tl-default    { background: var(--bs-secondary); }
.hd2001-tl-status     { background: var(--bs-primary); }
.hd2001-tl-escalation { background: var(--bs-danger); }
.hd2001-tl-internal   { background: var(--bs-warning); color: #212529 !important; }

.hd2001-timeline-body {
    background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES DE FORMULARIO  ·  hd2001-form-section
   Reutilizable en páginas de alta (--create) y edición (--edit).
   ═══════════════════════════════════════════════════════════════════════════

   ESTRUCTURA DE USO:
   <div class="hd2001-form-section hd2001-form-section--create">
     <div class="hd2001-form-section-header">Título de sección</div>
     <div class="hd2001-form-section-body">
       <div class="hd2001-form-cols hd2001-form-cols--40-60">
         <div class="hd2001-form-col">...</div>
         <div class="hd2001-form-col hd2001-form-col--stretch">...</div>
       </div>
     </div>
   </div>
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIOS · Sistema de secciones reutilizable
   Prefijo: hd2001-form-*
   Soporta modificadores --create (azul) y --edit (ámbar)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de página de formulario ──────────────────────────────────── */
.hd2001-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--hd2001-primary-light);
}

.hd2001-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--hd2001-primary-dark);
    background: var(--hd2001-primary-light);
    border: 1px solid #c7dff5;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}

.hd2001-page-header__back:hover {
    background: #c7dff5;
    border-color: #a8c8e8;
    color: var(--hd2001-primary-dark);
    text-decoration: none;
}

.hd2001-page-header__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hd2001-text);
    letter-spacing: -0.01em;
}

/* ── Contenedor de sección ──────────────────────────────────────────────── */
.hd2001-form-section {
    border: 1px solid #e1dfdd;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s ease;
}

.hd2001-form-section:focus-within {
    box-shadow: 0 4px 14px rgba(16,110,190,0.11), 0 1px 3px rgba(0,0,0,0.05);
}

/* ── Cabecera de sección ────────────────────────────────────────────────── */
.hd2001-form-section-header {
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid #e8e6e3;
    border-top: 4px solid transparent;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Modificador CREAR: acento azul + degradado de cabecera */
.hd2001-form-section--create > .hd2001-form-section-header {
    border-top-color: var(--hd2001-primary);
    background: linear-gradient(to right, #e4f0fb, #f5f9fe);
    color: var(--hd2001-primary-dark);
}

/* Modificador EDITAR: acento ámbar + degradado cálido */
.hd2001-form-section--edit > .hd2001-form-section-header {
    border-top-color: #d57c00;
    background: linear-gradient(to right, #fef3e2, #fef9f3);
    color: #7a4800;
}

/* ── Cuerpo de sección ──────────────────────────────────────────────────── */
.hd2001-form-section-body {
    padding: 1.25rem 1.5rem;
}

/* ── Campo individual (label + control apilados) ────────────────────────── */
.hd2001-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Labels dentro de secciones: más compactos y en tono muted */
.hd2001-form-section .form-label {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--hd2001-text-muted);
    letter-spacing: 0.01em;
    margin-bottom: 0.2rem;
}

/* Focus ring azul en todos los controles dentro de sección */
.hd2001-form-section .form-control:focus,
.hd2001-form-section .form-select:focus {
    border-color: var(--hd2001-primary);
    box-shadow: 0 0 0 3px rgba(16,110,190,0.13);
    outline: none;
}

/* ── Divisores de columna ───────────────────────────────────────────────── */

/* Divisor vertical explícito (elemento col-auto entre columnas) */
.hd2001-form-col-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #d8d6d4 20%, #d8d6d4 80%, transparent);
}

/* Borde izquierdo en columnas intermedias */
.hd2001-form-col-bordered {
    border-left: 1px solid #e8e6e3;
    padding-left: 1.25rem !important;
}

@media (max-width: 767px) {
    .hd2001-form-col-bordered {
        border-left: none;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
}

/* ── Barra de acciones del formulario ───────────────────────────────────── */
.hd2001-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border: 1px solid #e1dfdd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ─────────────────────── COLUMNAS DE FORMULARIO ────────────────────────── */
/*
 * Reemplazan combinaciones verbose de Bootstrap dentro de .row.
 * Siempre se usan dentro de un contenedor con class="row g-3".
 *
 * hd2001-form-col          → col-12 col-md-4  d-flex flex-column gap-3  (⅓ en md+)
 * hd2001-form-col--narrow  → col-12 col-md-3  d-flex flex-column gap-3  (¼ en md+)
 * hd2001-form-col--wide    → col-12 col-md-5  d-flex flex-column gap-3  (⅖ en md+)
 * hd2001-form-col--fill    → col-12 col-md    d-flex flex-column gap-3  (ocupa resto)
 * hd2001-form-col--auto    → col-12 col-md-auto d-none d-md-block        (separador)
 */

.hd2001-form-col,
.hd2001-form-col--narrow,
.hd2001-form-col--wide,
.hd2001-form-col--fill {
    display: flex;
    flex-direction: column;
    gap: var(--bs-gutter-y, 1rem); /* respeta el gap del .row g-* */
}

/* Anchos en mobile: siempre columna completa */
.hd2001-form-col,
.hd2001-form-col--narrow,
.hd2001-form-col--wide,
.hd2001-form-col--fill,
.hd2001-form-col--auto {
    width: 100%;
    box-sizing: border-box;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* Anchos en md+ */
@media (min-width: 768px) {
    .hd2001-form-col {
        flex: 0 0 auto;
        width: 33.33333%;
    }

    .hd2001-form-col--narrow {
        flex: 0 0 auto;
        width: 25%;
    }

    .hd2001-form-col--wide {
        flex: 0 0 auto;
        width: 41.66667%;
    }

    .hd2001-form-col--fill {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .hd2001-form-col--auto {
        flex: 0 0 auto;
        width: auto;
        display: block;
    }
    /* En mobile, --auto se oculta (es solo el separador vertical) */
    @media (max-width: 767px) {
        .hd2001-form-col--auto {
            display: none;
        }
    }
}