/* ============================================================
   KIMBERLY — Hoja de Estilos Principal
   Versión: 1.0
   Compatibilidad: Bootstrap 5 + Radzen (Free) + Blazor Server
   Autor: Diseño Kimberly
   ============================================================ */

/* ─── 1. IMPORTAR FUENTE INTER ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── 2. VARIABLES / DESIGN TOKENS ─────────────────────────── */
:root {
    /* Paleta de marca */
    --cs-primary: #1C91CA; /* Azul primario */
    --cs-primary-dark: #16719E; /* Azul primario oscuro (hover) */
    --cs-primary-light: #6BB8DD; /* Azul primario claro */
    --cs-primary-50: #EAF6FB; /* Azul muy claro (fondos) */
    --cs-primary-100: #C6E7F3; /* Azul claro (bordes, tags) */
    --cs-secondary: #5B5C60; /* Gris secundario */
    --cs-secondary-dark: #444548; /* Gris secundario oscuro (hover) */
    --cs-secondary-light: #949598; /* Gris secundario claro */
    --cs-secondary-50: #F2F2F2; /* Gris muy claro (fondos) */
    --cs-secondary-100: #DEDEDF; /* Gris claro (bordes, tags) */
    --cs-danger: #C0272D; /* Rojo — solo estados de error/peligro */
    --cs-danger-dark: #9B1E23; /* Rojo oscuro (hover) */
    --cs-danger-light: #E8404A; /* Rojo claro */
    --cs-danger-50: #FDECEA; /* Rojo muy claro (fondos alert) */
    /* Grises de interfaz */
    --cs-bg: #F1F4F8; /* Fondo general de la app */
    --cs-surface: #FFFFFF; /* Fondo de tarjetas, paneles */
    --cs-border: #DDE3EE; /* Bordes suaves */
    --cs-border-dark: #C4CEDF; /* Bordes más pronunciados */
    --cs-muted: #F8FAFD; /* Fondo alterno (rows, headers) */
    /* Texto */
    --cs-text-primary: #1E2A3B; /* Texto principal */
    --cs-text-secondary: #5A6880; /* Texto secundario / labels */
    --cs-text-muted: #8A97A8; /* Texto desactivado / placeholders */
    --cs-text-on-primary: #FFFFFF; /* Texto sobre fondo primario */
    /* Estados semánticos */
    --cs-success: #1E8C5A;
    --cs-success-light: #E8F7F1;
    --cs-warning: #D97706;
    --cs-warning-light: #FEF3C7;
    --cs-info: #0891B2;
    --cs-info-light: #E0F5F9;
    /* Tipografía */
    --cs-font: 'Inter', system-ui, -apple-system, sans-serif;
    --cs-font-size: 14px;
    --cs-line-height: 1.55;
    /* Espaciado y formas */
    --cs-radius-sm: 4px;
    --cs-radius: 8px;
    --cs-radius-lg: 12px;
    --cs-radius-xl: 16px;
    --cs-shadow-sm: 0 1px 3px rgba(28, 145, 202, 0.08);
    --cs-shadow: 0 2px 8px rgba(28, 145, 202, 0.10);
    --cs-shadow-md: 0 4px 16px rgba(28, 145, 202, 0.12);
    --cs-shadow-lg: 0 8px 32px rgba(28, 145, 202, 0.15);
    /* Navbar */
    --cs-navbar-height: 60px;
    --cs-navbar-bg: #1C91CA;
    /* Banner de ambiente (QA/DEV) — altura fija; el offset se activa cuando
       MainLayout envuelve el contenido con .cs-env-active. En Prod ambos
       quedan en 0 y el navbar/main-content se comportan como siempre. */
    --cs-env-banner-height: 26px;
    --cs-env-offset: 0px;
    /* Transiciones */
    --cs-transition: all 0.18s ease;
}

/* ─── 3. RESET Y BASE ───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: var(--cs-font-size);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--cs-font);
    font-size: var(--cs-font-size);
    line-height: var(--cs-line-height);
    color: var(--cs-text-primary);
    background-color: var(--cs-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Sin esto, cualquier elemento que se desborde (ej. una tabla ancha
       con scroll horizontal propio, §13.1) hace scrollable la PÁGINA
       completa en móvil — y el navbar fixed (top:0) queda desplazado
       fuera de la vista inicial hasta deslizar a la derecha. El scroll
       horizontal debe quedar contenido SIEMPRE dentro del elemento que
       lo necesita (.rz-data-grid-data ya tiene su propio overflow-x),
       nunca propagarse al body. */
    overflow-x: hidden;
}

/* ─── 4. TIPOGRAFÍA ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cs-font);
    font-weight: 600;
    color: var(--cs-text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.05rem;
}

h5 {
    font-size: 0.95rem;
}

h6 {
    font-size: 0.875rem;
}

p {
    margin-bottom: 0.75rem;
    color: var(--cs-text-secondary);
}

a {
    color: var(--cs-primary);
    text-decoration: none;
    transition: var(--cs-transition);
}

    a:hover {
        color: var(--cs-primary-light);
        text-decoration: underline;
    }

small, .small {
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
}

/* Encabezado de página */
.page-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cs-primary);
    margin-bottom: 0;
}

.page-subtitle {
    font-size: 0.825rem;
    color: var(--cs-text-muted);
    margin-bottom: 0;
}

/* ─── 5. SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--cs-border-dark);
    border-radius: 99px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--cs-primary-100);
    }

/* ─── 6. LAYOUT GENERAL ─────────────────────────────────────── */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding: 1.5rem;
    margin-top: calc(var(--cs-navbar-height) + var(--cs-env-offset));
    max-width: 100%;
}

.content-container {
    max-width: 1440px;
    margin: 0 auto;
}

/* Encabezado de sección */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-header-left {
    display: flex;
    flex-direction: column;
}

/* ─── 7. NAVBAR SUPERIOR ─────────────────────────────────────── */
.navbar,
nav.navbar {
    background-color: var(--cs-navbar-bg) !important;
    height: var(--cs-navbar-height);
    padding: 0 1.25rem;
    box-shadow: 0 2px 12px rgba(28, 145, 202, 0.25);
    position: fixed;
    top: var(--cs-env-offset);
    left: 0;
    right: 0;
    z-index: 1030;
    border-bottom: 3px solid var(--cs-secondary);
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

    .navbar-brand img {
        height: 34px;
        width: auto;
        object-fit: contain;
    }

    .navbar-brand span {
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.02em;
    }

/* Links del navbar */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem !important;
    border-radius: var(--cs-radius-sm);
    transition: var(--cs-transition);
    white-space: nowrap;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.12);
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-item.active .nav-link {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.18);
        font-weight: 600;
    }

/* Dropdown del navbar */
.navbar .dropdown-menu {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-md);
    padding: 0.35rem;
    margin-top: 0.5rem;
    min-width: 200px;
    animation: dropIn 0.15s ease;
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar .dropdown-item {
    font-size: 0.85rem;
    color: var(--cs-text-primary);
    padding: 0.45rem 0.85rem;
    border-radius: var(--cs-radius-sm);
    transition: var(--cs-transition);
}

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background-color: var(--cs-primary-50);
        color: var(--cs-primary);
    }

    .navbar .dropdown-item.active,
    .navbar .dropdown-item:active {
        background-color: var(--cs-primary);
        color: #fff;
    }

.navbar .dropdown-divider {
    border-color: var(--cs-border);
    margin: 0.3rem 0;
}

/* Avatar / usuario en navbar */
.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--cs-radius);
    transition: var(--cs-transition);
}

    .navbar-user:hover {
        background-color: rgba(255,255,255,0.12);
    }

.navbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--cs-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3);
}

.navbar-user-name {
    font-size: 0.825rem;
    font-weight: 500;
    line-height: 1.2;
}

.navbar-user-role {
    font-size: 0.7rem;
    opacity: 0.7;
    line-height: 1.2;
}

/* Toggler móvil */
.navbar-toggler {
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.3rem 0.6rem;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* ─── 7.1 NAVBAR — MENÚ HAMBURGUESA (mobile/tablet < 992px) ──────
 *
 * En breakpoint navbar-expand-lg el .navbar-collapse se renderiza como
 * dropdown vertical bajo el navbar fijo. Por defecto Bootstrap lo deja
 * transparente y los .nav-link conservan su color blanco (línea ~240)
 * — sobre el fondo claro del <main> el texto queda invisible.
 *
 * Aquí pintamos el .navbar-collapse con el mismo primario del navbar para
 * mantener consistencia visual y garantizar contraste del texto blanco.
 * También damos padding touch-friendly a los items y estilo a los
 * dropdowns anidados.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* El collapse expandido se posiciona absoluto bajo el navbar fijo
       (que tiene height: var(--cs-navbar-height) y position: fixed). */
    .navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--cs-navbar-bg);
        padding: 0.5rem 1.25rem 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        border-bottom: 3px solid var(--cs-secondary);
        max-height: calc(100vh - var(--cs-navbar-height));
        overflow-y: auto;
    }

    /* Padding vertical generoso en mobile (target táctil ≥44px). */
    .navbar .navbar-collapse .nav-link {
        padding: 0.75rem 0.85rem !important;
        border-radius: var(--cs-radius-sm);
    }

    /* Submenús anidados: fondo ligeramente más claro para distinguir
       jerarquía sobre el primario del padre, sin sombra (el padre ya tiene). */
    .navbar .navbar-collapse .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.06);
        border: none;
        box-shadow: none;
        margin: 0.25rem 0 0.5rem;
        padding: 0.25rem 0 0.25rem 1rem;
        animation: none;
    }

    /* Items del submenú anidado: heredan el contexto oscuro del navbar.
       Override de la regla de §7 que asume fondo claro/blanco. */
    .navbar .navbar-collapse .dropdown-item {
        color: rgba(255, 255, 255, 0.85);
        padding: 0.5rem 0.75rem;
    }

    .navbar .navbar-collapse .dropdown-item:hover,
    .navbar .navbar-collapse .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .navbar .navbar-collapse .dropdown-item.active,
    .navbar .navbar-collapse .dropdown-item:active {
        background-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
}

/* ─── 8. BREADCRUMBS ─────────────────────────────────────────── */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
}

.breadcrumb-item a {
    color: var(--cs-primary-light);
    font-weight: 500;
}

    .breadcrumb-item a:hover {
        color: var(--cs-primary);
        text-decoration: none;
    }

.breadcrumb-item.active {
    color: var(--cs-text-muted);
    font-weight: 400;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--cs-text-muted);
    content: "›";
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

/* ─── 9. TARJETAS / CARDS ────────────────────────────────────── */
.card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    transition: var(--cs-transition);
    overflow: hidden;
}

    .card:hover {
        box-shadow: var(--cs-shadow);
    }

.card-header {
    background: var(--cs-surface);
    border-bottom: 1px solid var(--cs-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cs-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

    .card-header .card-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--cs-primary);
        margin: 0;
    }

.card-header-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--cs-radius-sm);
    background-color: var(--cs-primary-50);
    color: var(--cs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-right: 0.6rem;
    flex-shrink: 0;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: var(--cs-muted);
    border-top: 1px solid var(--cs-border);
    padding: 0.75rem 1.25rem;
    font-size: 0.8rem;
    color: var(--cs-text-secondary);
}

/* Tarjeta de KPI / estadísticas */
.stat-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: var(--cs-shadow-sm);
    transition: var(--cs-transition);
    position: relative;
    overflow: hidden;
}

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--cs-primary);
        border-radius: 4px 0 0 4px;
    }

    .stat-card:hover {
        box-shadow: var(--cs-shadow);
        transform: translateY(-1px);
    }

    .stat-card.accent-red::before {
        background: var(--cs-danger);
    }

    .stat-card.accent-green::before {
        background: var(--cs-success);
    }

    .stat-card.accent-amber::before {
        background: var(--cs-warning);
    }

    .stat-card.accent-info::before {
        background: var(--cs-info);
    }

.stat-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--cs-radius);
    background-color: var(--cs-primary-50);
    color: var(--cs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-card.accent-red .stat-card-icon {
    background: var(--cs-danger-50);
    color: var(--cs-danger);
}

.stat-card.accent-green .stat-card-icon {
    background: var(--cs-success-light);
    color: var(--cs-success);
}

.stat-card.accent-amber .stat-card-icon {
    background: var(--cs-warning-light);
    color: var(--cs-warning);
}

.stat-card.accent-info .stat-card-icon {
    background: var(--cs-info-light);
    color: var(--cs-info);
}

.stat-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cs-text-primary);
    line-height: 1.1;
    margin-bottom: 0.15rem;
}

.stat-card-label {
    font-size: 0.78rem;
    color: var(--cs-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-card-change {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

    .stat-card-change.positive {
        color: var(--cs-success);
    }

    .stat-card-change.negative {
        color: var(--cs-danger);
    }

/* ─── 10. BOTONES ────────────────────────────────────────────── */
.btn {
    font-family: var(--cs-font);
    font-size: 0.845rem;
    font-weight: 500;
    border-radius: var(--cs-radius);
    padding: 0.45rem 1.1rem;
    transition: var(--cs-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-width: 1px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

    .btn:focus, .btn:focus-visible {
        outline: 3px solid var(--cs-primary-100);
        outline-offset: 2px;
        box-shadow: none;
    }

/* Primario — azul */
.btn-primary {
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--cs-primary-dark);
        border-color: var(--cs-primary-dark);
        color: #fff;
    }

    .btn-primary:active {
        background-color: #0F506F;
        border-color: #0F506F;
    }

/* Peligro / acento — rojo */
.btn-danger {
    background-color: var(--cs-danger);
    border-color: var(--cs-danger);
    color: #fff;
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: var(--cs-danger-dark);
        border-color: var(--cs-danger-dark);
        color: #fff;
    }

/* Outline primario */
.btn-outline-primary {
    border-color: var(--cs-primary);
    color: var(--cs-primary);
    background: transparent;
}

    .btn-outline-primary:hover, .btn-outline-primary:focus {
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
        color: #fff;
    }

/* Ghost / neutro */
.btn-secondary {
    background-color: var(--cs-muted);
    border-color: var(--cs-border);
    color: var(--cs-text-primary);
}

    .btn-secondary:hover, .btn-secondary:focus {
        background-color: var(--cs-border);
        border-color: var(--cs-border-dark);
        color: var(--cs-text-primary);
    }

/* Light */
.btn-light {
    background-color: #fff;
    border-color: var(--cs-border);
    color: var(--cs-text-primary);
    box-shadow: var(--cs-shadow-sm);
}

    .btn-light:hover {
        background-color: var(--cs-muted);
        border-color: var(--cs-border-dark);
    }

/* Tamaños */
.btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--cs-radius-sm);
}

.btn-lg {
    font-size: 0.95rem;
    padding: 0.6rem 1.4rem;
    border-radius: var(--cs-radius-lg);
}

/* Estado desactivado */
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botón con ícono solo */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--cs-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

    .btn-icon.btn-sm {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

/* ─── 11. FORMULARIOS — BOOTSTRAP ────────────────────────────── */
.form-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cs-text-secondary);
    margin-bottom: 0.35rem;
}

.form-control {
    font-family: var(--cs-font);
    font-size: 0.875rem;
    color: var(--cs-text-primary);
    background-color: #fff;
    border: 1px solid var(--cs-border-dark);
    border-radius: var(--cs-radius);
    padding: 0.45rem 0.85rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: auto;
}

    .form-control::placeholder {
        color: var(--cs-text-muted);
        font-size: 0.85rem;
    }

    .form-control:focus {
        border-color: var(--cs-primary);
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15);
        outline: none;
        background-color: #fff;
        color: var(--cs-text-primary);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--cs-muted);
        border-color: var(--cs-border);
        color: var(--cs-text-muted);
        cursor: not-allowed;
    }

    .form-control.is-invalid {
        border-color: var(--cs-danger);
        background-image: none;
    }

        .form-control.is-invalid:focus {
            box-shadow: 0 0 0 3px rgba(192, 39, 45, 0.15);
        }

    .form-control.is-valid {
        border-color: var(--cs-success);
        background-image: none;
    }

        .form-control.is-valid:focus {
            box-shadow: 0 0 0 3px rgba(30, 140, 90, 0.15);
        }

.form-select {
    font-family: var(--cs-font);
    font-size: 0.875rem;
    color: var(--cs-text-primary);
    background-color: #fff;
    border: 1px solid var(--cs-border-dark);
    border-radius: var(--cs-radius);
    padding: 0.45rem 2.25rem 0.45rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

    .form-select:focus {
        border-color: var(--cs-primary);
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15);
        outline: none;
    }

.form-text {
    font-size: 0.775rem;
    color: var(--cs-text-muted);
    margin-top: 0.25rem;
}

.invalid-feedback {
    font-size: 0.775rem;
    color: var(--cs-danger);
}

.valid-feedback {
    font-size: 0.775rem;
    color: var(--cs-success);
}

/* Checkbox y Radio */
.form-check-input {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--cs-border-dark);
    border-radius: 3px;
    cursor: pointer;
    transition: var(--cs-transition);
}

    .form-check-input:checked {
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15);
        border-color: var(--cs-primary);
        outline: none;
    }

    .form-check-input[type="radio"] {
        border-radius: 50%;
    }

.form-check-label {
    font-size: 0.875rem;
    color: var(--cs-text-primary);
    cursor: pointer;
}

/* Switch toggle */
.form-switch .form-check-input {
    width: 2.2rem;
    height: 1.1rem;
    border-radius: 99px;
}

    .form-switch .form-check-input:checked {
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
    }

/* Input group */
.input-group .input-group-text {
    background-color: var(--cs-muted);
    border-color: var(--cs-border-dark);
    color: var(--cs-text-secondary);
    font-size: 0.85rem;
}

.input-group .form-control:focus {
    z-index: 3;
}

/* ─── 12. RADZEN — CONTROLES WEB ─────────────────────────────── */

/* Base para todos los controles Radzen */
.rz-textbox,
.rz-autocomplete-input,
.rz-spinner-input,
input.rz-inputtext {
    font-family: var(--cs-font) !important;
    font-size: 0.875rem !important;
    color: var(--cs-text-primary) !important;
    background-color: #fff !important;
    border: 1px solid var(--cs-border-dark) !important;
    border-radius: var(--cs-radius) !important;
    padding: 0.45rem 0.85rem !important;
    height: auto !important;
    line-height: 1.5 !important;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

    .rz-textbox:focus,
    .rz-autocomplete-input:focus,
    .rz-spinner-input:focus,
    input.rz-inputtext:focus {
        border-color: var(--cs-primary) !important;
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15) !important;
        outline: none !important;
    }

    .rz-textbox::placeholder,
    .rz-autocomplete-input::placeholder,
    input.rz-inputtext::placeholder {
        color: var(--cs-text-muted) !important;
        font-size: 0.85rem !important;
    }

    .rz-textbox:disabled,
    input.rz-inputtext:disabled {
        background-color: var(--cs-muted) !important;
        color: var(--cs-text-muted) !important;
        cursor: not-allowed !important;
    }

    /* Estado inválido en Radzen */
    .rz-textbox.rz-state-error,
    input.rz-inputtext.rz-state-error {
        border-color: var(--cs-danger) !important;
        box-shadow: 0 0 0 3px rgba(192, 39, 45, 0.12) !important;
    }

/* Dropdown / ComboBox Radzen */
.rz-dropdown,
.rz-multiselect {
    font-family: var(--cs-font) !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--cs-border-dark) !important;
    border-radius: var(--cs-radius) !important;
    background-color: #fff !important;
    min-height: 36px !important;
    height: auto !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

    .rz-dropdown:hover,
    .rz-multiselect:hover {
        border-color: var(--cs-primary-100) !important;
    }

    .rz-dropdown.rz-state-focused,
    .rz-multiselect.rz-state-focused,
    .rz-dropdown.rz-focus,
    .rz-multiselect.rz-focus {
        border-color: var(--cs-primary) !important;
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15) !important;
        outline: none !important;
    }

    .rz-dropdown .rz-dropdown-label,
    .rz-multiselect .rz-multiselect-label {
        font-family: var(--cs-font) !important;
        font-size: 0.875rem !important;
        color: var(--cs-text-primary) !important;
        padding: 0.45rem 0.85rem !important;
        line-height: 1.5 !important;
    }

    .rz-dropdown .rz-dropdown-trigger,
    .rz-multiselect .rz-multiselect-trigger {
        color: var(--cs-text-secondary) !important;
        background: transparent !important;
        border-left: 1px solid var(--cs-border) !important;
        width: 2rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

/* Panel de opciones del dropdown */
.rz-dropdown-panel,
.rz-multiselect-panel {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
    box-shadow: var(--cs-shadow-md) !important;
    background: #fff !important;
    margin-top: 4px !important;
/*    overflow: hidden !important;*/
    overflow: auto !important;
    /*animation: dropIn 0.15s ease !important;*/
}

.rz-dropdown-items-wrapper,
.rz-multiselect-items-wrapper {
    max-height: 260px !important;
    overflow-y: auto !important;
}

.rz-dropdown-item,
.rz-multiselect-item {
    font-family: var(--cs-font) !important;
    font-size: 0.875rem !important;
    color: var(--cs-text-primary) !important;
    padding: 0.45rem 0.85rem !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

    .rz-dropdown-item:hover,
    .rz-multiselect-item:hover {
        background-color: var(--cs-primary-50) !important;
        color: var(--cs-primary) !important;
    }

    .rz-dropdown-item.rz-state-highlight,
    .rz-multiselect-item.rz-state-highlight {
        background-color: var(--cs-primary) !important;
        color: #fff !important;
    }
/* 🔹 ALTURA UNIFICADA ENTRE INPUTS Y DROPDOWNS */
:root {
    --cs-input-height: 36px;
}

/* TextBox */
.rz-textbox,
input.rz-inputtext {
    height: var(--cs-input-height) !important;
    min-height: var(--cs-input-height) !important;
    display: flex;
    align-items: center;
}

/* DropDown */
.rz-dropdown {
    height: var(--cs-input-height) !important;
    min-height: var(--cs-input-height) !important;
    display: flex;
    align-items: center;
}

    /* Texto dentro del dropdown */
    .rz-dropdown .rz-dropdown-label {
        height: var(--cs-input-height) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 0.85rem !important;
    }

    /* Botón del dropdown (flechita) */
    .rz-dropdown .rz-dropdown-trigger {
        height: var(--cs-input-height) !important;
        display: flex !important;
        align-items: center !important;
    }
.rz-autocomplete,
.rz-datepicker,
.rz-numeric {
    height: var(--cs-input-height) !important;
}

/* RadzenNumeric duplica el borde: el wrapper .rz-numeric YA trae borde nativo de Radzen
   (var(--rz-input-border)) y el override global de arriba (input.rz-inputtext) le pone
   OTRO borde al input interno — dos líneas casi encimadas ("Camiones iniciales"/"Personal
   turno" en Registro de Unidades, reportado por el usuario 2026-08-20). Misma causa raíz
   que el fix ya aplicado más abajo para .rz-timespanpicker-panel — el borde debe vivir
   SOLO en el wrapper, el input interno va sin borde propio. */
.rz-numeric {
    border: 1px solid var(--cs-border-dark) !important;
    border-radius: var(--cs-radius) !important;
    background-color: #fff !important;
}

    .rz-numeric input.rz-inputtext {
        border: none !important;
        background-color: transparent !important;
    }

    .rz-numeric:focus-within {
        border-color: var(--cs-primary) !important;
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15) !important;
    }

/* El popup del TimeSpanPicker (Días/Horas/Minutos/Segundos, RadzenTimeSpanPicker — usado en
   Turnos para Entrada/Salida/Comida) queda con el diseño nativo de Radzen. Los overrides
   globales de arriba (.rz-numeric / input.rz-inputtext / .rz-button — pensados para inputs y
   botones normales de la app) se filtraban a los mini-spinners y flechitas de este panel,
   forzándolos al tamaño de un control completo — de ahí el look "saturado". El input real
   dentro de cada mini-spinner es <input class="rz-numeric-input rz-inputtext">, NO
   .rz-spinner-input (esa clase no existe aquí — corregido, el primer intento apuntaba mal).
   Valores de padding/tamaño tomados de la demo oficial de Radzen (tema Default, sin overrides)
   para reproducir el diseño nativo exacto: https://blazor.radzen.com (página TimeSpanPicker). */
.rz-timespanpicker-panel .rz-numeric {
    height: auto !important;
    border: 1px solid var(--cs-border-dark) !important;
    border-radius: 4px !important;
}
.rz-timespanpicker-panel input.rz-inputtext {
    padding: 7px 20px 7px 15px !important;
    border: none !important;
    height: 100% !important;
}
.rz-timespanpicker-panel .rz-numeric-button.rz-button {
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

/* "Días" no aplica — Kimberly solo usa este picker para horas del día (Turnos), nunca
   duraciones de varios días. Radzen no expone una forma de ocultarlo vía props (FieldPrecision
   solo recorta el extremo fino: Segundos/Milisegundos/Microsegundos, no el extremo grueso).
   Se oculta por su clase específica, confirmada en el DOM real de Radzen. */
.rz-timespanpicker-days {
    display: none !important;
}

/* Selector de signo (+/-) tampoco aplica — una hora del día nunca es negativa. Existe para el
   caso de uso real de Radzen (duraciones que sí pueden restarse), no para Turnos. */
.rz-timespanpicker-signpicker {
    display: none !important;
}

.rz-label {
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
    color: var(--cs-text-secondary);
}

/* DatePicker / DateTimePicker */
.rz-calendar,
.rz-datepicker {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
    box-shadow: var(--cs-shadow-md) !important;
    font-family: var(--cs-font) !important;
    overflow: hidden !important;
}

.rz-datepicker-header,
.rz-calendar-header {
    background-color: var(--cs-primary) !important;
    color: #fff !important;
    padding: 0.6rem 0.75rem !important;
}

.rz-datepicker-title .rz-datepicker-decade,
.rz-datepicker-title .rz-datepicker-month,
.rz-datepicker-title .rz-datepicker-year {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Flechas prev/next: fondo circular siempre visible (no solo en :hover) — el
   texto/ícono gris del variant "secondary" de Radzen se pierde sobre el fondo
   primario del header si solo se recolorea el ícono. */
.rz-datepicker-header .rz-datepicker-prev,
.rz-datepicker-header .rz-datepicker-next,
.rz-datepicker-header .rz-calendar-prev,
.rz-datepicker-header .rz-calendar-next,
.rz-calendar-header .rz-datepicker-prev,
.rz-calendar-header .rz-datepicker-next,
.rz-calendar-header .rz-calendar-prev,
.rz-calendar-header .rz-calendar-next {
    color: #fff !important;
    opacity: 1 !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

    .rz-datepicker-header .rz-datepicker-prev:hover,
    .rz-datepicker-header .rz-datepicker-next:hover,
    .rz-datepicker-header .rz-calendar-prev:hover,
    .rz-datepicker-header .rz-calendar-next:hover,
    .rz-calendar-header .rz-datepicker-prev:hover,
    .rz-calendar-header .rz-datepicker-next:hover,
    .rz-calendar-header .rz-calendar-prev:hover,
    .rz-calendar-header .rz-calendar-next:hover {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.32) !important;
    }

.rz-datepicker-prev-icon,
.rz-datepicker-next-icon,
.rz-calendar-prev-icon,
.rz-calendar-next-icon {
    color: #fff !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-datepicker td a,
.rz-calendar td a {
    font-size: 0.82rem !important;
    border-radius: var(--cs-radius-sm) !important;
    padding: 0.25rem !important;
    transition: var(--cs-transition) !important;
}

    .rz-datepicker td a:hover,
    .rz-calendar td a:hover {
        background-color: var(--cs-primary-50) !important;
        color: var(--cs-primary) !important;
    }

.rz-datepicker td.rz-datepicker-today a,
.rz-calendar td.rz-datepicker-today a {
    background-color: var(--cs-primary-100) !important;
    color: var(--cs-primary) !important;
    font-weight: 600 !important;
}

.rz-datepicker td.rz-state-active a,
.rz-calendar td.rz-state-active a,
.rz-datepicker td a.rz-state-active {
    background-color: var(--cs-primary) !important;
    color: #fff !important;
}

/* Radzen Buttons */
.rz-button {
    font-family: var(--cs-font) !important;
    font-size: 0.845rem !important;
    font-weight: 500 !important;
    border-radius: var(--cs-radius) !important;
    padding: 0.45rem 1.1rem !important;
    transition: var(--cs-transition) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    line-height: 1.4 !important;
}

    .rz-button.rz-button-primary,
    .rz-button[class*="rz-primary"] {
        background-color: var(--cs-primary) !important;
        border-color: var(--cs-primary) !important;
        color: #fff !important;
    }

        .rz-button.rz-button-primary:hover {
            background-color: var(--cs-primary-dark) !important;
            border-color: var(--cs-primary-dark) !important;
        }

    .rz-button.rz-button-danger,
    .rz-button[class*="rz-danger"] {
        background-color: var(--cs-danger) !important;
        border-color: var(--cs-danger) !important;
        color: #fff !important;
    }

        .rz-button.rz-button-danger:hover {
            background-color: var(--cs-danger-dark) !important;
            border-color: var(--cs-danger-dark) !important;
        }

    .rz-button.rz-button-secondary {
        background-color: var(--cs-muted) !important;
        border: 1px solid var(--cs-border) !important;
        color: var(--cs-text-primary) !important;
    }

        .rz-button.rz-button-secondary:hover {
            background-color: var(--cs-border) !important;
        }

/* Radzen Notification / Toast */
.rz-notification {
    font-family: var(--cs-font) !important;
    border-radius: var(--cs-radius-lg) !important;
    box-shadow: var(--cs-shadow-lg) !important;
    font-size: 0.875rem !important;
    padding: 1rem 1.25rem !important;
}

/* Radzen Dialog */
.rz-dialog {
    border-radius: var(--cs-radius-xl) !important;
    box-shadow: var(--cs-shadow-lg) !important;
    font-family: var(--cs-font) !important;
    overflow: hidden !important;
}

.rz-dialog-titlebar {
    background-color: var(--cs-primary) !important;
    color: #fff !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-bottom: 3px solid var(--cs-secondary) !important;
}

.rz-dialog-titlebar .rz-dialog-title {
    color: #fff !important;
}

    .rz-dialog-titlebar .rz-dialog-titlebar-close {
        color: rgba(255,255,255,0.8) !important;
        transition: var(--cs-transition) !important;
    }

        .rz-dialog-titlebar .rz-dialog-titlebar-close:hover {
            color: #fff !important;
        }

.rz-dialog-content {
    padding: 1.25rem !important;
    font-size: 0.875rem !important;
}

.rz-dialog-footer {
    padding: 0.75rem 1.25rem !important;
    border-top: 1px solid var(--cs-border) !important;
    background: var(--cs-muted) !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
}

/* Radzen Overlay / Mask — solo atenuado, SIN desenfoque.
   (Se quitó backdrop-filter: blur — hacía que el contenido del modal se viera
   borroso / "detrás", sobre todo en el modal de facturación.) */
.rz-dialog-mask,
.ui-widget-overlay {
    background-color: rgba(68, 69, 72, 0.55) !important;
}

/* ─── 13. RADZEN DATAGRID ────────────────────────────────────── */
.rz-data-grid,
.rz-grid-table {
    font-family: var(--cs-font) !important;
    font-size: 0.855rem !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--cs-shadow-sm) !important;
    width: 100% !important;
}

    /* Encabezado de columnas */
    .rz-data-grid .rz-column-header,
    .rz-grid-table .rz-column-header,
    .rz-data-grid th {
        background-color: var(--cs-primary) !important;
        color: #fff !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        padding: 0.7rem 0.85rem !important;
        border-bottom: 2px solid var(--cs-primary-dark) !important;
        border-right: 1px solid rgba(255,255,255,0.1) !important;
        white-space: nowrap !important;
        user-select: none !important;
    }
        /* 🔹 Forzar texto blanco en encabezados Radzen.
           Acotado a "th" — .rz-column-title también se reutiliza como
           etiqueta de campo dentro de las celdas (td) cuando un grid usa
           Responsive="true" (modo .rz-datatable-reflow de Radzen). Ese
           modo se evaluó y se descartó en favor de §13.1 (tabla real +
           columna congelada), pero se deja el scope como defensa: sin él,
           si algún grid futuro reactivara Responsive, la etiqueta
           quedaría en blanco sobre fondo blanco/zebra e ilegible. */
        .rz-data-grid th .rz-column-title,
        .rz-data-grid th .rz-column-header-content,
        .rz-data-grid .rz-sortable-column .rz-column-title,
        .rz-data-grid th span,
        .rz-data-grid th div {
            color: #fff !important;
        }
    /* 🔹 Iconos de sort en blanco */
    .rz-data-grid .rz-sort-icon {
        color: #fff !important;
    }

        .rz-data-grid .rz-column-header:last-child,
        .rz-data-grid th:last-child {
            border-right: none !important;
        }

    /* Ícono de ordenamiento */
    .rz-data-grid .rz-sortable-column-header .rz-column-header-content {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
    }

    /* Filas del grid */
    .rz-data-grid .rz-data-row td,
    .rz-data-grid .rz-row td,
    .rz-grid-table td {
        padding: 0.6rem 0.85rem !important;
        border-bottom: 1px solid var(--cs-border) !important;
        border-right: 1px solid var(--cs-border) !important;
        color: var(--cs-text-primary) !important;
        font-size: 0.855rem !important;
        vertical-align: middle !important;
    }

        .rz-data-grid .rz-data-row td:last-child,
        .rz-grid-table td:last-child {
            border-right: none !important;
        }

    /* Filas alternas (zebra) */
    .rz-data-grid .rz-data-row:nth-child(even) td,
    .rz-data-grid tbody tr:nth-child(even) td {
        background-color: var(--cs-muted) !important;
    }

    .rz-data-grid .rz-data-row:nth-child(odd) td,
    .rz-data-grid tbody tr:nth-child(odd) td {
        background-color: #fff !important;
    }

    /* Hover en filas */
    .rz-data-grid .rz-data-row:hover td,
    .rz-data-grid tbody tr:hover td {
        background-color: var(--cs-primary-50) !important;
        cursor: default !important;
    }

    /* Fila seleccionada */
    .rz-data-grid .rz-state-highlight td,
    .rz-data-grid .rz-selected td,
    .rz-data-grid tr.rz-state-highlight td {
        background-color: var(--cs-primary-100) !important;
        color: var(--cs-primary) !important;
    }

    /* Fila de filtro */
    .rz-data-grid .rz-filter-row td,
    .rz-data-grid .rz-column-filter td {
        background-color: var(--cs-muted) !important;
        border-bottom: 2px solid var(--cs-border-dark) !important;
        padding: 0.4rem 0.6rem !important;
    }

    .rz-data-grid .rz-filter-row input,
    .rz-data-grid .rz-column-filter input {
        font-size: 0.8rem !important;
        border: 1px solid var(--cs-border-dark) !important;
        border-radius: var(--cs-radius-sm) !important;
        padding: 0.3rem 0.6rem !important;
        width: 100% !important;
    }

    /* Paginador del grid */
    .rz-paginator,
    .rz-data-grid .rz-paginator {
        background-color: var(--cs-muted) !important;
        border-top: 1px solid var(--cs-border) !important;
        padding: 0.5rem 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 0.825rem !important;
        color: var(--cs-text-secondary) !important;
    }

        .rz-paginator .rz-paginator-element,
        .rz-paginator button {
            font-family: var(--cs-font) !important;
            font-size: 0.82rem !important;
            border: 1px solid var(--cs-border) !important;
            background: #fff !important;
            color: var(--cs-text-primary) !important;
            border-radius: var(--cs-radius-sm) !important;
            padding: 0.3rem 0.6rem !important;
            min-width: 30px !important;
            margin: 0 1px !important;
            cursor: pointer !important;
            transition: var(--cs-transition) !important;
        }

            .rz-paginator .rz-paginator-element:hover,
            .rz-paginator button:hover {
                background-color: var(--cs-primary-50) !important;
                border-color: var(--cs-primary-100) !important;
                color: var(--cs-primary) !important;
            }

            .rz-paginator .rz-state-active,
            .rz-paginator button.rz-state-active {
                background-color: var(--cs-primary) !important;
                border-color: var(--cs-primary) !important;
                color: #fff !important;
                font-weight: 600 !important;
            }

/* ─── 13.1 RADZEN DATAGRID — TABLA CON SCROLL HORIZONTAL REAL
   (COLUMNA CONGELADA) ─────────────────────────────────────────
   Patrón elegido para los listados en móvil (todos usan Frozen="true"
   en la columna clickeable, ver CustomerList.razor — "Nombre comercial").
   Se descartó la alternativa "responsive apilado" (Responsive="true" +
   .rz-datatable-reflow de Radzen, cards con label:valor) a favor de
   mantener la apariencia de tabla real con scroll horizontal.
   Sin este override, `.rz-grid-table` queda forzado a width:100% (regla
   de §13 arriba) y con table-layout:fixed (que Radzen agrega junto con
   cualquier columna Frozen) eso comprime las columnas sin Width
   explícito en vez de dejar que la tabla haga scroll horizontal.
   Requisito para que esta variante funcione bien: TODAS las columnas
   del grid deben tener Width explícito (si no, siguen comprimiéndose
   dentro del ancho fijo en vez de desbordar). */
@media (max-width: 991.98px) {
    .rz-grid-table {
        width: auto !important;
        min-width: 100% !important;
    }
}

/* ─── 14. TABLAS BOOTSTRAP ───────────────────────────────────── */
.table {
    font-size: 0.855rem;
    color: var(--cs-text-primary);
    --bs-table-striped-bg: var(--cs-muted);
    --bs-table-hover-bg: var(--cs-primary-50);
    --bs-border-color: var(--cs-border);
}

    .table thead th {
        background-color: var(--cs-primary);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.7rem 0.85rem;
        border-bottom: 2px solid var(--cs-primary-dark);
        border-color: rgba(255,255,255,0.15);
        white-space: nowrap;
    }

    .table tbody td {
        padding: 0.6rem 0.85rem;
        border-color: var(--cs-border);
        vertical-align: middle;
    }

    .table tbody tr:hover td {
        background-color: var(--cs-primary-50);
    }

.table-bordered {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
}

.table-sm th,
.table-sm td {
    padding: 0.4rem 0.7rem;
}

/* Wrapper para tablas con scroll horizontal */
.table-responsive {
    border-radius: var(--cs-radius-lg);
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-sm);
    overflow-x: auto;
}

    .table-responsive .table {
        margin-bottom: 0;
    }

/* ─── 15. BADGES Y ETIQUETAS DE ESTADO ───────────────────────── */
.badge {
    font-family: var(--cs-font);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: 99px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    line-height: 1.4;
}

    .badge.bg-primary {
        background-color: var(--cs-primary) !important;
    }

    .badge.bg-danger {
        background-color: var(--cs-danger) !important;
    }

    .badge.bg-success {
        background-color: var(--cs-success) !important;
    }

    .badge.bg-warning {
        background-color: var(--cs-warning) !important;
        color: #fff;
    }

    .badge.bg-info {
        background-color: var(--cs-info) !important;
    }

/* Badges suaves (texto de color, fondo tenue) */
.badge-soft-primary {
    background-color: var(--cs-primary-50);
    color: var(--cs-primary);
    border: 1px solid var(--cs-primary-100);
}

.badge-soft-danger {
    background-color: var(--cs-danger-50);
    color: var(--cs-danger);
    border: 1px solid #f5c6c8;
}

.badge-soft-success {
    background-color: var(--cs-success-light);
    color: var(--cs-success);
    border: 1px solid #b2e3cc;
}

.badge-soft-warning {
    background-color: var(--cs-warning-light);
    color: var(--cs-warning);
    border: 1px solid #fcd88a;
}

.badge-soft-info {
    background-color: var(--cs-info-light);
    color: var(--cs-info);
    border: 1px solid #a5def0;
}

.badge-soft-secondary {
    background-color: var(--cs-bg);
    color: var(--cs-text-secondary);
    border: 1px solid var(--cs-border);
}

/* Puntos de estado */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.active {
        background-color: var(--cs-success);
        box-shadow: 0 0 0 2px rgba(30,140,90,0.2);
    }

    .status-dot.inactive {
        background-color: var(--cs-text-muted);
    }

    .status-dot.warning {
        background-color: var(--cs-warning);
        box-shadow: 0 0 0 2px rgba(217,119,6,0.2);
    }

    .status-dot.danger {
        background-color: var(--cs-danger);
        box-shadow: 0 0 0 2px rgba(192,39,45,0.2);
    }

/* ─── 16. ALERTAS ────────────────────────────────────────────── */
.alert {
    font-size: 0.875rem;
    border-radius: var(--cs-radius);
    border-left-width: 4px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.alert-primary {
    background-color: var(--cs-primary-50);
    border-color: var(--cs-primary);
    color: var(--cs-primary);
}

.alert-danger {
    background-color: var(--cs-danger-50);
    border-color: var(--cs-danger);
    color: var(--cs-danger-dark);
}

.alert-success {
    background-color: var(--cs-success-light);
    border-color: var(--cs-success);
    color: #14603d;
}

.alert-warning {
    background-color: var(--cs-warning-light);
    border-color: var(--cs-warning);
    color: #92400e;
}

.alert-info {
    background-color: var(--cs-info-light);
    border-color: var(--cs-info);
    color: #065f73;
}

.alert-heading {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

/* ─── 17. MODALES BOOTSTRAP ──────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--cs-radius-xl);
    box-shadow: var(--cs-shadow-lg);
    overflow: hidden;
}

.modal-header {
    background-color: var(--cs-primary);
    color: #fff;
    border-bottom: 3px solid var(--cs-secondary);
    padding: 1rem 1.25rem;
}

.modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

    .modal-header .btn-close:hover {
        opacity: 1;
    }

.modal-body {
    padding: 1.25rem;
    font-size: 0.875rem;
}

.modal-footer {
    border-top: 1px solid var(--cs-border);
    background-color: var(--cs-muted);
    padding: 0.75rem 1.25rem;
    gap: 0.5rem;
}

.modal-backdrop {
    background-color: rgba(68, 69, 72, 0.6);
}

    .modal-backdrop.show {
        opacity: 1;
        backdrop-filter: blur(3px);
    }

/* ─── 18. PAGINACIÓN BOOTSTRAP ───────────────────────────────── */
.pagination {
    gap: 2px;
    margin-bottom: 0;
}

.page-item .page-link {
    font-family: var(--cs-font);
    font-size: 0.82rem;
    color: var(--cs-primary);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm) !important;
    padding: 0.35rem 0.65rem;
    transition: var(--cs-transition);
    background-color: #fff;
}

    .page-item .page-link:hover {
        background-color: var(--cs-primary-50);
        border-color: var(--cs-primary-100);
        color: var(--cs-primary);
    }

.page-item.active .page-link {
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
    font-weight: 600;
}

.page-item.disabled .page-link {
    color: var(--cs-text-muted);
    background-color: var(--cs-muted);
    border-color: var(--cs-border);
}

/* ─── 19. TABS / PESTAÑAS ────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--cs-border);
    gap: 2px;
}

    .nav-tabs .nav-link {
        font-size: 0.855rem;
        font-weight: 500;
        color: var(--cs-text-secondary);
        border: none;
        border-radius: var(--cs-radius) var(--cs-radius) 0 0;
        padding: 0.55rem 1rem;
        transition: var(--cs-transition);
        position: relative;
    }

        .nav-tabs .nav-link:hover {
            color: var(--cs-primary);
            background-color: var(--cs-primary-50);
        }

        .nav-tabs .nav-link.active {
            color: var(--cs-primary);
            font-weight: 600;
            background-color: #fff;
            border-bottom: 2px solid var(--cs-primary);
            margin-bottom: -2px;
        }

.nav-pills .nav-link {
    font-size: 0.855rem;
    color: var(--cs-text-secondary);
    border-radius: var(--cs-radius);
    padding: 0.45rem 0.9rem;
    transition: var(--cs-transition);
}

    .nav-pills .nav-link:hover {
        background-color: var(--cs-primary-50);
        color: var(--cs-primary);
    }

    .nav-pills .nav-link.active {
        background-color: var(--cs-primary);
        color: #fff;
        font-weight: 600;
    }

.tab-content {
    padding-top: 1rem;
}

/* ─── 20. ACCORDION ──────────────────────────────────────────── */
.accordion-item {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius) !important;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.accordion-button {
    font-family: var(--cs-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cs-text-primary);
    background-color: var(--cs-muted);
    padding: 0.85rem 1rem;
}

    .accordion-button:not(.collapsed) {
        background-color: var(--cs-primary-50);
        color: var(--cs-primary);
        box-shadow: none;
    }

    .accordion-button::after {
        filter: none;
        color: var(--cs-primary);
    }

    .accordion-button:not(.collapsed)::after {
        filter: none;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.15);
        border-color: var(--cs-primary-100);
    }

.accordion-body {
    font-size: 0.875rem;
    padding: 0.85rem 1rem;
    background-color: #fff;
    color: var(--cs-text-secondary);
}

/* ─── 21. TOOLTIP Y POPOVER ──────────────────────────────────── */
.tooltip-inner {
    font-family: var(--cs-font);
    font-size: 0.775rem;
    background-color: var(--cs-primary-dark);
    border-radius: var(--cs-radius-sm);
    padding: 0.3rem 0.65rem;
    max-width: 220px;
}

.popover {
    font-family: var(--cs-font);
    font-size: 0.855rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-md);
}

.popover-header {
    background-color: var(--cs-primary-50);
    color: var(--cs-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--cs-border);
}

/* ─── 22. SPINNER / CARGA ────────────────────────────────────── */
.spinner-border,
.spinner-grow {
    color: var(--cs-primary);
}

/* Capa de carga de página */
.page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: var(--cs-text-muted);
    font-size: 0.875rem;
}

/* Blazor progress bar */
#blazor-error-ui {
    background-color: var(--cs-danger-50);
    border-top: 3px solid var(--cs-danger);
    color: var(--cs-text-primary);
    font-family: var(--cs-font);
    font-size: 0.855rem;
    padding: 0.75rem 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: none;
}

    #blazor-error-ui a {
        color: var(--cs-danger);
        font-weight: 600;
    }

/* ─── 23. UTILIDADES EXTRA ───────────────────────────────────── */

/* Divisor con texto */
.divider-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cs-text-muted);
    font-size: 0.775rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1rem 0;
}

    .divider-text::before,
    .divider-text::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--cs-border);
    }

/* Etiqueta requerida */
.required::after {
    content: ' *';
    color: var(--cs-danger);
    font-weight: 700;
}

/* Truncar texto */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Colores de texto utilitarios */
.text-primary {
    color: var(--cs-primary) !important;
}

.text-danger {
    color: var(--cs-danger) !important;
}

.text-muted {
    color: var(--cs-text-muted) !important;
}

.text-secondary {
    color: var(--cs-text-secondary) !important;
}

/* Fondos utilitarios */
.bg-primary {
    background-color: var(--cs-primary) !important;
    color: #fff;
}

.bg-primary-soft {
    background-color: var(--cs-primary-50) !important;
}

.bg-secondary {
    background-color: var(--cs-secondary) !important;
    color: #fff;
}

.bg-secondary-soft {
    background-color: var(--cs-secondary-50) !important;
}

.bg-danger-soft {
    background-color: var(--cs-danger-50) !important;
}

.bg-surface {
    background-color: var(--cs-surface) !important;
}

.bg-app {
    background-color: var(--cs-bg) !important;
}

/* Bordes */
.border-primary {
    border-color: var(--cs-primary) !important;
}

.border-secondary {
    border-color: var(--cs-secondary) !important;
}

.border-danger {
    border-color: var(--cs-danger) !important;
}

/* Sombras */
.shadow-cs-sm {
    box-shadow: var(--cs-shadow-sm) !important;
}

.shadow-cs {
    box-shadow: var(--cs-shadow) !important;
}

.shadow-cs-md {
    box-shadow: var(--cs-shadow-md) !important;
}

/* ─── 24. ANIMACIONES ────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-fade-in {
    animation: fadeIn 0.25s ease both;
}

.animate-slide-up {
    animation: slideUp 0.3s ease both;
}

.animate-pulse {
    animation: pulse 1.8s ease infinite;
}

/* ─── 24.b BANNER DE AMBIENTE (QA / DEV) ───────────────────────
   Franja superior fija visible solo en ambientes no productivos. En Prod,
   appsettings deja EnvironmentLabel vacío y MainLayout no renderiza ni el
   banner ni el wrapper .cs-env-active → todo se comporta como sin banner.
   Cuando hay etiqueta, .cs-env-active activa --cs-env-offset y el
   navbar/main-content se desplazan hacia abajo automáticamente.            */
.cs-env-active {
    --cs-env-offset: var(--cs-env-banner-height);
    /* Tinte del navbar en ambientes no productivos. Se reutiliza el token de
       marca --cs-primary-light (#6BB8DD): misma familia que el primario base
       (#1C91CA) pero notoriamente más claro. El navbar siempre queda más
       "fuerte" (saturado) que el banner superior — gradiente intencional de
       Prod (primary) → navbar QA/DEV (primary-light) → banner QA/DEV (cream).
       El border-bottom gris (identidad Kimberly) se conserva intacto.        */
    --cs-navbar-bg: var(--cs-primary-light);
}

/* El diálogo por encima del navbar (1030) y del banner (1100); sin esto los modales
   altos (editor de plantillas, facturación) quedan detrás del menú. El mask queda por
   DEBAJO del navbar para que el atenuado no cubra el menú.

   IMPORTANTE: Radzen aplica `z-index: var(--rz-dialog-zindex)` TANTO al wrapper como
   al CUADRO `.rz-dialog`. Antes solo subíamos el wrapper y el mask (1029), pero el
   cuadro se quedaba en 1001 → el mask (1029) lo cubría y se veía todo semioscuro.
   Se fija vía las variables de Radzen (wrapper + cuadro = 1200) + override explícito
   del cuadro, así el diálogo SIEMPRE queda por encima del mask sin importar la
   estructura del DOM entre versiones. */
:root {
    --rz-dialog-zindex: 1200;
    --rz-dialog-mask-zindex: 1029;
}

.rz-dialog-wrapper,
.rz-dialog {
    z-index: 1200 !important;
}

.rz-dialog-mask {
    z-index: 1029 !important;
}

/* Cuerpo del modal opaco (sin transparencias que dejen ver el fondo). */
.rz-dialog.cmt-template-dialog,
.rz-dialog.cmt-template-dialog .rz-dialog-content {
    background-color: #fff !important;
}

.cs-env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cs-env-banner-height);
    z-index: 1100; /* sobre el navbar (1030) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ECC980;
    /* Sobre fondo crema #ECC980 (luminancia ≈ 0.62), texto blanco daría sólo
       1.56:1 y el azul primario (más saturado que el tono anterior) tampoco
       alcanza AA. Se usa --cs-secondary-dark para contraste ~6.6:1 (AA). El
       dot y su halo también pasan a secondary-dark para no perderse en el
       cream.                                                                 */
    color: var(--cs-secondary-dark);
    font-family: var(--cs-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none; /* no intercepta clics */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.cs-env-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cs-secondary-dark);
    box-shadow: 0 0 0 3px rgba(68, 69, 72, 0.25);
    animation: pulse 1.8s ease infinite;
}

/* ─── 25. RESPONSIVIDAD ──────────────────────────────────────── */
@media (max-width: 991.98px) {
    .main-content {
        padding: 1rem;
    }

    .navbar-nav {
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255,255,255,0.15);
        margin-top: 0.5rem;
    }

        .navbar-nav .nav-link {
            padding: 0.5rem 0.75rem !important;
        }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --cs-navbar-height: 56px;
    }

    .main-content {
        padding: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card-value {
        font-size: 1.3rem;
    }

    .btn {
        font-size: 0.82rem;
        padding: 0.4rem 0.9rem;
    }

    .table {
        font-size: 0.8rem;
    }

    /* Barras de búsqueda de los listados (patrón `d-flex gap-2 mb-3` con
       RadzenTextBox Style="width:300px" fijo — ver CustomerList.razor y
       equivalentes). Sin wrap, 2 textbox de 300px + botones desbordan
       cualquier viewport de celular; con overflow-x:hidden en body (ver
       §3) ese desborde simplemente se recortaba y ocultaba el botón
       Buscar/Limpiar. Aquí se envuelve en vez de recortar. */
    .d-flex.gap-2.mb-3 {
        flex-wrap: wrap;
    }

        .d-flex.gap-2.mb-3 .rz-textbox {
            width: 100% !important;
        }

    /* Grupo de botones de acción dentro de un header de card (patrón `d-flex
       align-items-center gap-2` con 2+ RadzenButton — ver UnitMovementList,
       DepartmentList, RoleList y demás listados). Mismo problema que el bloque de
       arriba: sin wrap se desborda del ancho del card y, con overflow-x:hidden en
       body/.card, el botón sobrante queda recortado e inalcanzable en vez de
       acomodarse en otra línea. */
    .card-header .d-flex.align-items-center.gap-2,
    .dash-card-header .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
    }

    /* Pie de acciones de TODOS los formularios de administración/captura
       (Regresar/Cancelar/Editar/Guardar/Nuevo — 15+ pantallas usan esta misma
       clase). Mismo problema: sin wrap, 4+ botones o etiquetas largas se
       recortan en vez de acomodarse en otra línea. justify-content:flex-end ya
       alinea a la derecha, así que cada línea envuelta se sigue viendo bien. */
    .cs-admin-actions {
        flex-wrap: wrap;
    }
}

/* ─── 26. MODO IMPRESIÓN ─────────────────────────────────────── */
@media print {
    .navbar,
    .btn,
    .rz-paginator,
    .pagination,
    .cs-env-banner {
        display: none !important;
    }

    .cs-env-active {
        --cs-env-offset: 0px;
    }

    .main-content {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt !important;
    }
}

/* ─── 27. ADMIN / LIST COMPONENTS (sprint UI-standard) ─────────────────────
 *
 * Clases canónicas para los componentes `{Entity}Admin.razor` y
 * `{Entity}List.razor`. Reglas completas en
 * `ia-config-erp/context/admin-list-standard.md` §2.2, §2.6.1, §2.8, §2.9 y §2.10.
 *
 * Naming: prefijo `cs-admin-`, `cs-list-`, `cs-page-`, `cs-busy-`
 *         para evitar colisión con clases legacy (`.page-loading` de §22).
 * ────────────────────────────────────────────────────────────────────────── */

/* §2.9 — Bloque de carga centrado. Usado en Admin (mode Update/Read y Create
 *        con catálogos) y List durante la carga inicial. Render-after-load. */
.cs-page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 240px;
    padding: 40px 0;
}

.cs-page-loading p {
    color: var(--cs-text-secondary);
    margin: 0;
    font-size: 0.9rem;
    font-family: var(--cs-font);
}

/* §2.2 — Espaciado bajo el título de página. Aplica al RadzenText H3 raíz. */
.cs-page-title {
    margin-bottom: 16px;
}

/* §2.6.1 + §2.8 — Botonera única del pie del Admin.
 *                 Regresar (izquierda) + acción primaria (derecha). */
.cs-admin-actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

/* Variante opcional sticky para formularios largos */
.cs-admin-actions--sticky {
    position: sticky;
    bottom: 0;
    background: var(--cs-surface);
    padding: 10px 0;
    border-top: 1px solid var(--cs-border);
    z-index: 5;
}

/* §3.4 — Celda de la columna "Acciones" del grid.
 * Centra los botones y agranda un poco los iconos. El ancho fijo de la
 * columna (Width) reserva espacio para 4 botones; >4 la columna crece. */
.cs-grid-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.cs-grid-actions .rz-button .rzi,
.cs-grid-actions .rz-button i,
.cs-grid-actions i.material-icons {
    font-size: 20px;
    line-height: 1;
}

/* Hallazgo #4: con 4 botones de Acciones los iconos se veían desalineados
 * (Material Icons distinto line-height entre cada uno). Forzamos centrado
 * interno del botón + ancho/alto consistente para que los 4 iconos queden
 * en cuadrícula perfecta sin importar cuál esté presente. */
.cs-grid-actions .rz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
}

/* Icono dentro de un botón CON texto (Buscar/Limpiar) — alineado con el texto.
 * Se usa cuando el botón tiene contenido hijo (spinner) y Radzen ignora Icon=. */
.cs-btn-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
    line-height: 1;
}

/* Espaciado vertical uniforme entre RadzenFieldset consecutivos. */
.cs-fieldset-stack > .rz-fieldset:not(:last-child) {
    margin-bottom: 16px;
}

/* Celda clickeable de la primera columna de los List (doble-click → Read).
 * Solo aplica al span de la primera columna para que el resto de la fila
 * NO dispare el doble-click — limita la acción al texto del item. */
.cs-list-clickable {
    cursor: pointer;
    display: inline-block;
    width: 100%;
    user-select: none;
}
.cs-list-clickable:hover {
    color: var(--cs-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* §2.10 — Spinner inline CSS puro (16 px) para botones y celdas.
 *         Más liviano que invocar Radzen para un ícono pequeño. */
.cs-busy-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--cs-border);
    border-top-color: var(--cs-primary);
    border-radius: 50%;
    animation: cs-spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* Variante para fondo oscuro (botones Primary con fondo primario). */
.cs-busy-spinner--light {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

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

/* §2.10b — Overlay full-screen para operaciones que bloquean el form
 *          (lectura de CSF, etc.). Cubre todo el viewport con un
 *          backdrop translúcido + spinner grande + mensaje — imposible
 *          que el usuario lo pierda de vista. Todos los colores son
 *          tokens --cs-*; 0 hex hardcodeados. */
.cs-form-busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cs-overlay-fade 0.15s ease-out;
}
@keyframes cs-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cs-form-busy-overlay__panel {
    background: var(--cs-surface, #fff);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 280px;
}

.cs-form-busy-overlay__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--cs-border);
    border-top-color: var(--cs-primary);
    border-radius: 50%;
    animation: cs-spin 0.8s linear infinite;
}

.cs-form-busy-overlay__title {
    margin: 0;
    font-family: var(--cs-font);
    font-weight: 600;
    color: var(--cs-primary);
    font-size: 1rem;
}

.cs-form-busy-overlay__subtitle {
    margin: 0;
    color: var(--cs-text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
 * §X — Members panels (US-CG-04)
 *
 * Clases para los paneles "Empresas asignadas" / "Clientes asignados" del
 * {Entity}Admin. El refactor estético posterior cambió el layout a un
 * RadzenTabs con DataGrid denso por pestaña — `cs-members-tabs` envuelve
 * el bloque; `cs-member-card*` permanece disponible para futuros admins
 * que prefieran el layout de cards en vertical.
 *
 * `cs-empty-state` es el empty state compartido — se reusa en cada tab
 * cuando una lista de miembros viene vacía.
 *
 * Naming: prefijo `cs-member-`, `cs-members-` y `cs-empty-`.
 *
 * Todos los valores derivan de tokens --cs-* — 0 hex hardcodeados.
 * ────────────────────────────────────────────────────────────────────────── */

/* Wrapper del bloque de tabs (Empresas/Clientes) dentro del Admin. */
.cs-members-tabs {
    margin-top: 1rem;
}

/* Card individual para un miembro del grupo (empresa o cliente).
 * Layout flex: nombre a la izquierda, badge a la derecha. */
.cs-member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.55rem 0.85rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    margin-bottom: 6px;
    transition: var(--cs-transition);
}

.cs-member-card:hover {
    border-color: var(--cs-border-dark);
    background: var(--cs-muted);
}

.cs-member-card__name {
    color: var(--cs-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

/* Empty state genérico para paneles sin datos (no es el "Cargando..." del
 * page-loading). Centrado vertical y horizontal, con icono Material grande
 * en muted y texto descriptivo. */
.cs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 12px;
    color: var(--cs-text-muted);
    text-align: center;
}

.cs-empty-state .material-icons {
    font-size: 2.25rem;
    color: var(--cs-text-muted);
    opacity: 0.7;
}

.cs-empty-state p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cs-text-secondary);
    font-family: var(--cs-font);
}

/* ──────────────────────────────────────────────────────────────────────────
 * §X — Chips inline para celdas de grid (US-CG-06)
 *
 * Chips compactos usados en columnas de listado para mostrar miembros
 * (Empresas / Clientes en CompanyGroupList) como etiquetas inline. El patrón
 * canónico es: hasta 3 chips visibles + un chip `+N` (modificador --more)
 * con tooltip nativo via atributo `title`.
 *
 * `cs-empty-cell` es el placeholder gris medio para celdas sin valor (—).
 * Naming: prefijo `cs-chip*` y `cs-empty-cell` reutilizables en cualquier
 * grid que necesite chips read-only.
 *
 * Todos los valores derivan de tokens --cs-* — 0 hex hardcodeados.
 * ────────────────────────────────────────────────────────────────────────── */

/* Contenedor flex para los chips dentro de una celda del grid. */
.cs-chip-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* Chip individual: pill compacto con truncado para nombres largos. */
.cs-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: var(--cs-radius-sm);
    background: var(--cs-muted);
    color: var(--cs-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variante "+N" para el chip de overflow. Más sutil — borde en vez de fill
 * — para diferenciarlo visualmente de los chips con nombre. */
.cs-chip--more {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    color: var(--cs-text-muted);
    cursor: help;
}

/* Placeholder para celdas vacías (—) en grids. */
.cs-empty-cell {
    color: var(--cs-text-muted);
    font-size: 0.85rem;
}

/* ── Duplicate-field highlight (US-CUS-V04) ───────────────────────────────────
 * Aplicado a textboxes cuando el backend devuelve 409 con `extensions.code`
 * tipificado (CUSTOMER_RFC_DUPLICATE / _NAME_ / _BUSINESSNAME_). Se desactiva
 * automáticamente cuando el usuario edita el campo culpable. Solo tokens
 * --cs-*; sin hex hardcoded. */
.cs-input-error,
.cs-input-error input,
.cs-input-error .rz-textbox {
    border-color: var(--cs-danger);
}

.cs-input-error-text {
    color: var(--cs-danger);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ─── 28. LOADING SCREEN (CsLoadingScreen component) ─────────────────────
 *
 * Pantalla de carga reusable con branding Kimberly. Dos variantes:
 *   .cs-loading--fullpage  → cubre todo el viewport (fixed + backdrop)
 *   .cs-loading--inline    → ocupa el contenedor padre (sin backdrop fijo)
 *
 * Spinner de doble anillo concéntrico con rotación opuesta + brand-mark "K"
 * pulsante en el centro. Solo tokens --cs-*. Respeta prefers-reduced-motion.
 * ────────────────────────────────────────────────────────────────────────── */

.cs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cs-font);
    color: var(--cs-text-primary);
}

.cs-loading--fullpage {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(241, 244, 248, 0.96) 0%,
        rgba(235, 240, 250, 0.96) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9990;
    animation: cs-loading-fade 0.2s ease-out;
}

.cs-loading--inline {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: 40px 16px;
}

@keyframes cs-loading-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Panel central con la marca */
.cs-loading__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 40px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--cs-border);
    box-shadow:
        0 10px 30px -10px rgba(28, 145, 202, 0.15),
        0 4px 12px -4px rgba(28, 145, 202, 0.08);
    min-width: 280px;
    max-width: 420px;
}

/* Wrapper de los anillos (relative para apilar) */
.cs-loading__rings {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anillos concéntricos */
.cs-loading__ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
}

.cs-loading__ring--outer {
    width: 72px;
    height: 72px;
    border-width: 3px;
    border-color: var(--cs-primary-100) var(--cs-primary-100) var(--cs-primary-100) var(--cs-primary);
    animation: cs-loading-spin 1.4s linear infinite;
}

.cs-loading__ring--inner {
    width: 48px;
    height: 48px;
    border-width: 3px;
    border-color: var(--cs-primary-light) transparent transparent transparent;
    animation: cs-loading-spin-reverse 1s linear infinite;
}

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

@keyframes cs-loading-spin-reverse {
    to { transform: rotate(-360deg); }
}

/* Marca "K" pulsante en el centro */
.cs-loading__brand-mark {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cs-primary);
    background: var(--cs-primary-50);
    border-radius: 50%;
    animation: cs-loading-pulse 1.6s ease-in-out infinite;
    letter-spacing: -0.5px;
}

@keyframes cs-loading-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.12); opacity: 0.7; }
}

/* Texto principal */
.cs-loading__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cs-primary);
    text-align: center;
    letter-spacing: 0.1px;
}

/* Texto secundario */
.cs-loading__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cs-text-secondary);
    text-align: center;
    line-height: 1.45;
    max-width: 320px;
}

/* Tres puntos animados (refuerzan la sensación de actividad) */
.cs-loading__dots {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.cs-loading__dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--cs-primary);
    opacity: 0.3;
    animation: cs-loading-dot 1.4s ease-in-out infinite;
}

.cs-loading__dots span:nth-child(2) { animation-delay: 0.18s; }
.cs-loading__dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes cs-loading-dot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1);   }
}

/* Accesibilidad — respeta usuarios que pidieron menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .cs-loading__ring--outer,
    .cs-loading__ring--inner,
    .cs-loading__brand-mark,
    .cs-loading__dots span {
        animation-duration: 3s;
    }
}

/* ── Rol semanal de turnos (brief staff-rotation §7.2) ────────────────────────────────
   El color de cada turno viene de Shift.Color y se inyecta como --cs-shift-color en el
   contenedor; si el turno no tiene color, se usa la paleta de respaldo. El color nunca es
   la única señal: el chip siempre muestra el código. */
:root {
    --cs-shift-fallback-1: #1F5FA8;
    --cs-shift-fallback-2: #B26A00;
    --cs-shift-fallback-3: #4B2E83;
    --cs-shift-fallback-4: #2E7D32;
    --cs-shift-fallback-5: #AD1457;
    --cs-shift-fallback-6: #00838F;
    --cs-roster-rest: #595959;
    --cs-roster-rest-text: #FFFFFF;
    --cs-roster-vacation: #C6EFCE;
    --cs-roster-vacation-text: #006100;
}

.cs-shift-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.45rem;
    padding: 0 .4rem;
    border-radius: .35rem;
    background: var(--cs-shift-color, var(--cs-secondary-light));
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cs-shift-code--empty {
    background: var(--cs-secondary-50);
    color: var(--cs-secondary-light);
    border: 1px dashed var(--cs-secondary-100);
}

/* ── Rol semanal: pantallas (RosterWeekList / RosterWeekAdmin / RosterDayView) ─────────────────────
   Todo color de turno sale de --cs-shift-color (inyectado por bloque). Tintes con color-mix para no
   escribir colores de turno en el CSS. El color nunca va solo: cada celda muestra su letra/código. */

.cs-roster-code--rest     { background: var(--cs-roster-rest); }
.cs-roster-code--vacation { background: var(--cs-roster-vacation); color: var(--cs-roster-vacation-text); }
.cs-roster-tag {
    display: inline-block; padding: 0 .35rem; border-radius: var(--cs-radius-sm);
    font-size: .68rem; font-weight: 700; margin-left: .3rem;
}
.cs-roster-id--noclock { background: #FFC7CE; color: #9C0006; font-weight: 700; }

/* Lista de semanas */
.cs-roster-week-list { display: flex; flex-direction: column; gap: .6rem; padding-top: .75rem; }
.cs-roster-week-card {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface);
    padding-right: .5rem; transition: var(--cs-transition);
}
.cs-roster-week-card:hover { box-shadow: var(--cs-shadow); }
.cs-roster-week-card--current { border-left: 4px solid var(--cs-primary); }
.cs-roster-week-card__main {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem;
    padding: .8rem 1rem; background: none; border: none; text-align: left; font-family: var(--cs-font); cursor: pointer;
}
.cs-roster-week-card__period { display: flex; align-items: baseline; gap: .5rem; }
.cs-roster-week-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cs-roster-week-card__actions { display: flex; gap: .25rem; }

/* Diálogo "Nueva semana" */
.cs-roster-mode-list { display: flex; flex-direction: column; gap: .5rem; }
.cs-roster-mode {
    display: flex; gap: .6rem; align-items: flex-start; margin: 0; cursor: pointer;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: .6rem .75rem;
}
.cs-roster-mode input { margin-top: .2rem; }
.cs-roster-mode span { display: flex; flex-direction: column; }
.cs-roster-mode small { color: var(--cs-text-secondary); }
.cs-roster-mode--on { border-color: var(--cs-primary); background: var(--cs-primary-50); }
.cs-roster-mode--disabled { opacity: .5; cursor: not-allowed; }

/* Encabezado del editor */
.cs-roster-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .5rem 0; }
.cs-roster-header__title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cs-roster-header__actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Layout: revisión a la derecha en escritorio, abajo en tableta/móvil */
.cs-roster-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1200px) {
    .cs-roster-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
    .cs-roster-review { position: sticky; top: calc(var(--cs-navbar-height) + var(--cs-env-offset) + .75rem); }
}
.cs-roster-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

.cs-roster-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .75rem; color: var(--cs-text-secondary); }
.cs-roster-legend > span { display: inline-flex; align-items: center; gap: .3rem; }
.cs-roster-legend__swatch {
    display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.1rem;
    border-radius: 3px; font-size: .65rem; font-weight: 700; border: 1px solid var(--cs-border);
}
.cs-roster-legend__swatch.cs-roster-cell--work { background: var(--cs-primary-50); }
.cs-roster-legend__swatch--cover { background: var(--cs-secondary-100); }

/* Agregar personas */
.cs-roster-add { border: 1px solid var(--cs-border); background: var(--cs-surface); border-radius: var(--cs-radius); padding: .6rem .75rem; display: flex; flex-direction: column; gap: .5rem; }
.cs-roster-add__head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.cs-roster-add__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cs-roster-add__select { flex: 1 1 320px; min-width: 0; }
.cs-roster-add__options { display: flex; align-items: center; gap: .4rem; font-size: .82rem; }
.cs-roster-add__hint { font-size: .8rem; color: var(--cs-text-secondary); background: var(--cs-warning-light); border-radius: var(--cs-radius); padding: .4rem .6rem; }

/* Barra de búsqueda + leyenda en Semana / Por persona */
.cs-roster-view-toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-bottom: .6rem; }
.cs-roster-view-toolbar__search { flex: 0 1 320px; min-width: 200px; }

/* Buscador de semanas (lista del rol) */
.cs-week-picker { position: relative; display: inline-block; }
.cs-week-picker__trigger {
    display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; font-size: .9rem; cursor: pointer;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); color: var(--cs-text-primary);
}
.cs-week-picker__trigger:hover { border-color: var(--cs-primary); }
.cs-week-picker__trigger--on { border-color: var(--cs-primary); background: var(--cs-primary-50); }
.cs-week-picker__icon { font-size: 1.15rem; color: var(--cs-primary); }
.cs-week-picker__caret { font-size: 1.1rem; color: var(--cs-text-secondary); }
.cs-week-picker__num { font-weight: 700; color: var(--cs-primary); }
.cs-week-picker__backdrop { position: fixed; inset: 0; z-index: 1040; }
.cs-week-picker__panel {
    /* position:fixed SIN top/left = "posición estática": queda justo debajo del botón, pero fuera del flujo, así que
       ningún contenedor con overflow (pestañas de Radzen, body/main en páginas cortas) lo recorta (reporte 2026-10-26).
       max-height + scroll propio por si la pantalla es baja. */
    position: fixed; z-index: 1050; margin-top: 4px; width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 2rem); overflow-y: auto;
    background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15); padding: .5rem;
}
/* Celular: hoja inferior a todo lo ancho (debajo del botón podría salirse de la pantalla). */
@media (max-width: 575.98px) {
    .cs-week-picker__backdrop { background: rgba(15, 23, 42, .25); }
    .cs-week-picker__panel { left: 16px; right: 16px; bottom: 16px; width: auto; margin-top: 0; max-height: 75vh; }
}
.cs-week-picker__head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .2rem .5rem; border-bottom: 1px solid var(--cs-border); }
.cs-week-picker__head strong { font-size: 1rem; }
.cs-week-picker__nav { border: none; background: none; cursor: pointer; border-radius: 50%; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-primary); }
.cs-week-picker__nav:hover { background: var(--cs-primary-50); }
.cs-week-picker__cols, .cs-week-picker__row { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: .5rem; }
.cs-week-picker__cols { padding: .4rem .5rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cs-text-secondary); }
.cs-week-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-week-picker__row {
    width: 100%; text-align: left; border: 1px solid transparent; background: none; cursor: pointer;
    border-radius: var(--cs-radius); padding: .45rem .5rem; color: var(--cs-text-primary); font-size: .88rem;
}
.cs-week-picker__row:hover { background: var(--cs-primary-50); }
.cs-week-picker__row--today { border-color: var(--cs-primary-100, var(--cs-border)); }
.cs-week-picker__row--on { background: var(--cs-primary); color: #fff; }
.cs-week-picker__row--on:hover { background: var(--cs-primary); }
.cs-week-picker__week {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 1.8rem; border-radius: 6px;
    font-weight: 700; background: var(--cs-primary-50); color: var(--cs-primary);
}
.cs-week-picker__row--on .cs-week-picker__week { background: rgba(255, 255, 255, .2); color: #fff; }
.cs-week-picker__today { display: block; font-size: .7rem; color: var(--cs-primary); }
.cs-week-picker__row--on .cs-week-picker__today { color: #fff; }
.cs-week-picker__status { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.cs-week-picker__status--none  { color: var(--cs-text-secondary); }
.cs-week-picker__status--draft { background: #FEF3C7; color: #92400E; }
.cs-week-picker__status--pub   { background: #DCFCE7; color: #166534; }
.cs-week-picker__foot { display: flex; justify-content: space-between; padding: .5rem .3rem .1rem; border-top: 1px solid var(--cs-border); margin-top: .4rem; }
.cs-week-picker__link { border: none; background: none; color: var(--cs-primary); cursor: pointer; font-size: .85rem; padding: .2rem; }
.cs-week-picker__link:hover { text-decoration: underline; }
/* RadzenTabs pone overflow:auto en los paneles y recortaba el panel flotante del buscador de semanas (solo se veía
   una semana, el resto quedaba dentro de un scroll). En la lista de roles el contenido no necesita ese scroll. */
.cs-roster-list-tabs .rz-tabview-panels { overflow: visible; }
.cs-roster-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding-top: .75rem; }

/* Pestañas del editor */
.cs-roster-tabs .rz-tabview-panels { padding: .75rem 0 0; }

/* Asignar personal: tabla con una opción por turno */
.cs-roster-assign__toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .6rem; }
.cs-roster-assign__search { flex: 1 1 260px; min-width: 0; }
.cs-roster-assign__check { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; }
.cs-roster-assign__summary { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-left: auto; }
.cs-roster-assign__table .cs-roster-col-name { min-width: 220px; }
.cs-roster-assign__table .cs-roster-assign__role { font-size: .78rem; color: var(--cs-text-secondary); white-space: nowrap; text-align: left; }
.cs-roster-assign__opt { width: 4.5rem; text-align: center; padding: 0 !important; }
.cs-roster-assign__opt--head { background: var(--cs-shift-color) !important; color: #fff !important; line-height: 1.1; padding: .35rem .25rem !important; }
.cs-roster-assign__opt--head span { display: block; font-weight: 700; }
.cs-roster-assign__opt--head small { display: block; font-size: .65rem; opacity: .9; }
.cs-roster-assign__opt--none { width: 5.5rem; color: var(--cs-text-secondary); font-size: .78rem; }
td.cs-roster-assign__opt:not(.cs-roster-assign__opt--none) { background: color-mix(in srgb, var(--cs-shift-color) 6%, transparent); }
.cs-roster-assign__radio { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.1rem; margin: 0; cursor: pointer; }
.cs-roster-assign__radio input { width: 1.05rem; height: 1.05rem; cursor: pointer; accent-color: var(--cs-shift-color, var(--cs-primary)); }
.cs-roster-assign__radio input:disabled { cursor: not-allowed; }
.cs-roster-assign__row--none td.cs-roster-col-name { color: var(--cs-text-secondary); }
.cs-roster-tag--muted { margin-left: .4rem; font-size: .65rem; background: var(--cs-border); color: var(--cs-text-secondary); padding: 0 .35rem; border-radius: 3px; }

/* Personal sin bloque */
.cs-roster-unassigned { border: 1px dashed var(--cs-warning); background: var(--cs-warning-light); border-radius: var(--cs-radius); padding: .6rem .75rem; }
.cs-roster-unassigned__head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin-bottom: .4rem; }
.cs-roster-unassigned__list { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-roster-unassigned__item {
    display: inline-flex; align-items: center; gap: .5rem; background: var(--cs-surface);
    border: 1px solid var(--cs-border); border-radius: 999px; padding: .2rem .3rem .2rem .7rem; font-size: .82rem;
}
.cs-roster-unassigned__buttons { display: inline-flex; gap: .2rem; }
.cs-roster-assign-btn { border: none; cursor: pointer; min-width: 1.9rem; }
.cs-roster-assign-btn:disabled { opacity: .5; cursor: wait; }

/* Bloques lado a lado (como el Excel) cuando caben; apilados en pantallas angostas */
.cs-roster-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 1rem; }
.cs-roster-block { border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); overflow: hidden; }
.cs-roster-block__head { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; background: var(--cs-shift-color); color: #fff; }
.cs-roster-block__code { font-weight: 800; font-size: 1.05rem; }
.cs-roster-block__title { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; }
.cs-roster-block__title small { opacity: .85; }
.cs-roster-block__count { background: rgba(255,255,255,.22); border-radius: 999px; padding: .1rem .6rem; font-weight: 700; }

.cs-roster-table-wrap { overflow-x: auto; }
.cs-roster-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.cs-roster-table th, .cs-roster-table td { border: 1px solid var(--cs-border); padding: 0; text-align: center; white-space: nowrap; }
.cs-roster-table thead th {
    background: color-mix(in srgb, var(--cs-shift-color, var(--cs-secondary)) 85%, white); color: #fff;
    font-weight: 700; font-size: .7rem; padding: .25rem .2rem;
}
.cs-roster-table--counts thead th { background: #404040; }
.cs-roster-col-day span, .cs-roster-col-day small { display: block; line-height: 1.15; }
.cs-roster-table thead th small, .cs-roster-block__title small { color: inherit; opacity: .9; font-size: .68rem; }
.cs-roster-block__title small { font-size: .75rem; }
.cs-roster-col-day--weekend { background: color-mix(in srgb, var(--cs-shift-color, #404040) 75%, black) !important; }
.cs-roster-col-day--hl { outline: 3px solid var(--cs-danger); outline-offset: -3px; }
.cs-roster-col-id { width: 3.2rem; color: var(--cs-text-muted); font-size: .7rem; }
.cs-roster-col-name {
    text-align: left !important; padding: .3rem .5rem !important; min-width: 9rem;
    position: sticky; left: 0; background: var(--cs-surface); z-index: 1;
}
thead .cs-roster-col-name { background: inherit; }
.cs-roster-col-actions { width: 2rem; }
.cs-roster-empty-row { color: var(--cs-text-muted); padding: .6rem !important; font-style: italic; }

.cs-roster-name--rest     { background: #FFD8A8 !important; color: #7A3E00; }
.cs-roster-name--inactive { background: #F4B6B6 !important; color: #9C0006; text-decoration: line-through; }
.cs-roster-row--hl > td, .cs-roster-row--hl.cs-roster-person-card { box-shadow: inset 0 0 0 9999px rgba(192, 39, 45, .08); }
.cs-roster-row--hl .cs-roster-col-name { font-weight: 700; }

/* Celdas de día */
.cs-roster-cell { width: 2.6rem; height: 1.9rem; font-weight: 700; }
.cs-roster-cell--work     { background: color-mix(in srgb, var(--cs-shift-color, var(--cs-primary)) 14%, white); }
.cs-roster-cell--weekend.cs-roster-cell--work { background: color-mix(in srgb, var(--cs-shift-color, var(--cs-primary)) 24%, white); }
.cs-roster-cell--rest     { background: var(--cs-roster-rest); color: var(--cs-roster-rest-text); }
.cs-roster-cell--vacation { background: var(--cs-roster-vacation); color: var(--cs-roster-vacation-text); }
.cs-roster-cell--cover    { background: color-mix(in srgb, var(--cs-shift-color) 55%, white); color: #000; }
.cs-roster-cell__btn {
    width: 100%; height: 100%; min-height: 1.9rem; border: none; background: transparent; color: inherit;
    font-weight: inherit; cursor: pointer; padding: 0;
}
.cs-roster-cell__btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--cs-primary); }
.cs-roster-cell__btn:disabled { cursor: wait; }
.cs-roster-row-menu { border: none; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .2rem .4rem; color: var(--cs-text-secondary); }

/* Cuántos hay cada día */
.cs-roster-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 .4rem; }
.cs-roster-table--counts td { padding: .3rem .2rem; }
.cs-roster-counts__shift td:first-child { border-left: 4px solid var(--cs-shift-color); }
.cs-roster-counts__shift td:not(:first-child) { background: color-mix(in srgb, var(--cs-shift-color) 14%, white); }
.cs-roster-counts__total td { font-weight: 700; background: var(--cs-secondary-50); }
.cs-roster-count--low { background: #FFC7CE !important; color: #9C0006; font-weight: 700; }

/* Revisión */
.cs-roster-review__box { border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); padding: .6rem .75rem; }
.cs-roster-review__summary { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; cursor: pointer; list-style: none; }
.cs-roster-review__summary::-webkit-details-marker { display: none; }
.cs-roster-review__list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cs-roster-review__row {
    width: 100%; display: flex; align-items: center; gap: .5rem; border: none; background: none;
    text-align: left; padding: .25rem 0; font-family: var(--cs-font); font-size: .82rem; cursor: pointer;
}
.cs-roster-review__row:disabled { cursor: default; }
.cs-roster-review__count { min-width: 1.9rem; text-align: center; border-radius: var(--cs-radius-sm); font-weight: 700; padding: .05rem .3rem; }
.cs-roster-review--error   .cs-roster-review__count { background: #FFC7CE; color: #9C0006; }
.cs-roster-review--warning .cs-roster-review__count { background: #FFE8B0; color: #7A3E00; }
.cs-roster-review--info    .cs-roster-review__count { background: var(--cs-info-light); color: var(--cs-info); }
.cs-roster-review--ok      .cs-roster-review__count { background: #C6EFCE; color: #006100; }
.cs-roster-review__details { margin: .2rem 0 .4rem 2.4rem; padding: 0; font-size: .76rem; color: var(--cs-text-secondary); }

/* Vista por día ("¿Quién viene?") */
.cs-roster-day-picker { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; }
.cs-roster-day-pill {
    display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; padding: .3rem .4rem;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); cursor: pointer; font-family: var(--cs-font);
}
.cs-roster-day-pill span { font-weight: 700; font-size: .75rem; }
.cs-roster-day-pill small { font-size: .7rem; color: var(--cs-text-muted); }
.cs-roster-day-pill--weekend { background: var(--cs-secondary-50); }
.cs-roster-day-pill--on { border-color: var(--cs-primary); background: var(--cs-primary); }
.cs-roster-day-pill--on span, .cs-roster-day-pill--on small { color: #fff; }

.cs-roster-day { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.cs-roster-day-card { border: 1px solid var(--cs-border); border-top: 4px solid var(--cs-shift-color, var(--cs-secondary)); border-radius: var(--cs-radius); background: var(--cs-surface); padding: .6rem .75rem; }
.cs-roster-day-card--rest     { border-top-color: var(--cs-roster-rest); }
.cs-roster-day-card--vacation { border-top-color: var(--cs-roster-vacation-text); }
.cs-roster-day-card__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.cs-roster-day-card__title { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; }
.cs-roster-day-card__title small { color: var(--cs-text-muted); }
.cs-roster-day-card__count { font-weight: 800; font-size: 1.1rem; }
.cs-roster-day-card__count--low { color: #9C0006; }
.cs-roster-day-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .84rem; }
.cs-roster-day-card__list li { display: flex; align-items: center; gap: .4rem; }
.cs-roster-day-card__id { min-width: 2.6rem; font-size: .7rem; color: var(--cs-text-muted); text-align: center; border-radius: 3px; }
.cs-roster-day-card__name { flex: 1 1 auto; }
.cs-roster-day-card__empty { color: var(--cs-text-muted); font-style: italic; font-size: .82rem; }
.cs-roster-day-card__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cs-roster-chip { background: var(--cs-secondary-50); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; }

/* Vista por persona (móvil) */
.cs-roster-person-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .6rem; }
.cs-roster-person-card { border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-shift-color); border-radius: var(--cs-radius); background: var(--cs-surface); padding: .5rem .6rem; }
.cs-roster-person-card__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.cs-roster-person-card__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.cs-roster-chip-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: 2.6rem;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); cursor: pointer; padding: 0; font-family: var(--cs-font);
}
.cs-roster-chip-day small { font-size: .6rem; font-weight: 600; opacity: .8; }
.cs-roster-chip-day:disabled { cursor: default; }

/* ===================================================================

   Unidades — "Datos del movimiento": 70 % datos del turno · 30 % personal que operó el turno
   (2026-10-21). La lista de personal reusa la tarjeta de "¿Quién viene?" (cs-roster-day-card).
   ========================================================================== */
.cs-unit-data-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 992px) {
    .cs-unit-data-grid { grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); align-items: start; }
}
.cs-unit-staff { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cs-unit-staff__hint { font-size: .78rem; }
.cs-unit-staff__card { margin-top: .35rem; }
.cs-unit-staff__icon { font-size: 1.35rem; color: var(--cs-primary); }
.cs-unit-staff__search { margin-bottom: .5rem; }
.cs-unit-staff__groups { max-height: 460px; overflow-y: auto; padding-right: .15rem; }
.cs-unit-staff__group-title {
    display: flex; justify-content: space-between; align-items: center; margin: .5rem 0 .25rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-text-secondary);
    border-bottom: 1px solid var(--cs-border); padding-bottom: .15rem;
}
.cs-unit-staff__group-title:first-child { margin-top: 0; }
.cs-unit-staff__group-title span { font-weight: 800; color: var(--cs-text-primary); }
.cs-unit-staff__list { gap: 2px; }
.cs-unit-staff__row { flex-wrap: nowrap; border-radius: 6px; padding: .2rem .3rem; }
.cs-unit-staff__row .cs-roster-day-card__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.cs-unit-staff__row:hover { background: var(--cs-primary-50); }
.cs-unit-staff__row--on { background: color-mix(in srgb, var(--cs-primary) 7%, transparent); }
.cs-unit-staff__check { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
.cs-unit-staff__check input { width: 1rem; height: 1rem; accent-color: var(--cs-primary); cursor: pointer; flex: 0 0 auto; }
.cs-unit-staff__check input:disabled { cursor: default; }
.cs-unit-staff__row .badge { font-size: .66rem; flex: 0 0 auto; }
.cs-unit-staff__card { --cs-shift-color: var(--cs-primary); }
.cs-unit-nooperation { flex-wrap: wrap; row-gap: .15rem; }
@media (max-width: 575.98px) { .cs-unit-nooperation small { margin-left: 0 !important; flex-basis: 100%; } }

/* ==========================================================================
   Empleados — varias sucursales con una principal (★) (2026-10-23)
   ========================================================================== */
.cs-emp-subsidiaries { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.cs-emp-subsidiary {
    display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem .15rem .35rem;
    border: 1px solid var(--cs-border); border-radius: 999px; background: var(--cs-surface);
    font-size: .8rem; color: var(--cs-text-primary); cursor: pointer;
}
.cs-emp-subsidiary .material-icons { font-size: 1rem; color: var(--cs-text-muted); }
.cs-emp-subsidiary:hover:not(:disabled) { border-color: var(--cs-primary); }
.cs-emp-subsidiary--principal { border-color: var(--cs-primary); background: var(--cs-primary-50); font-weight: 600; }
.cs-emp-subsidiary--principal .material-icons { color: #E0A800; }
.cs-emp-subsidiary:disabled { cursor: default; }
.cs-emp-subsidiaries__hint { font-size: .75rem; margin-top: .25rem; }
/* Administrar catálogos desde el formulario de empleado (2026-10-13).
 * El botón de engrane queda al lado del combo, a la misma altura (38px); y la página de lista, al
 * mostrarse dentro de un diálogo, ya no necesita su título <h1> (el diálogo ya lo trae). */
.cs-catalog-field {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.cs-catalog-field > .rz-dropdown { flex: 1 1 auto; min-width: 0; }
.cs-catalog-admin-btn { flex: 0 0 auto; width: 38px; min-height: 38px; padding: 0 !important; }
.cs-catalog-dialog .cs-page-title { display: none; }
/* Engrane centrado: el botón es un flex centrado y el icono sin line-height/margen heredados. */
.cs-catalog-field .cs-catalog-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cs-catalog-admin-btn .rz-button-box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cs-catalog-admin-btn .rzi,
.cs-catalog-admin-btn i {
    margin: 0 !important;
    font-size: 20px;
    line-height: 1;
}