/* ═══════════════════════════════════════════════════════════════════
   KORA UI · estilos compartidos de las pantallas rediseñadas
   - Clases kx-*: página, encabezado, botones, tarjetas, KPIs, tabla y formulario compactos.
   - .kx-dense: compacta los controles de MudBlazor que estén dentro (textos, selects, tablas, botones).
   Va en Ticketing.Web/wwwroot/css/kora-ui.css y se enlaza en App.razor después del CSS de MudBlazor.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --kx-ink: #1E1033;
    --kx-ink-2: #5B4F6E;
    --kx-ink-3: #6B5E80;
    --kx-line: #ECE6F5;
    --kx-line-2: #DCD3EA;
    --kx-bg: #F7F5FB;
    --kx-soft: #F3EFFA;
    --kx-pri: #6D28D9;
    --kx-pri-2: #5B21B6;
    --kx-pri-soft: #F1EAFD;
    --kx-acc: #F97316;
    --kx-ok: #16A34A;
    --kx-ok-soft: #DCFCE7;
    --kx-warn: #D97706;
    --kx-warn-soft: #FEF3C7;
    --kx-bad: #DC2626;
    --kx-bad-soft: #FEE2E2;
    --kx-radius: 12px;
    --kx-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ── Página ─────────────────────────────────────────────────────── */
.kx-page {
    container-type: inline-size;     /* los cortes responden al ancho del contenido, no de la ventana (el menú lateral resta) */
    container-name: kxpage;
    padding: 22px 24px 96px;         /* abajo deja libre el botón flotante del asistente */
    font-family: var(--kx-font);
    font-size: 13.5px;
    color: var(--kx-ink);
    background: var(--kx-bg);
    min-height: 100%;
    box-sizing: border-box;
}

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

.kx-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.kx-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--kx-ink);
}

.kx-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--kx-ink-3);
}

.kx-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kx-ink-3);
    cursor: pointer;
}

    .kx-crumb:hover {
        color: var(--kx-pri);
    }

.kx-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Botones ────────────────────────────────────────────────────── */
.kx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--kx-line-2);
    background: #fff;
    color: var(--kx-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .kx-btn:hover {
        background: var(--kx-soft);
    }

    .kx-btn:focus-visible {
        outline: 2px solid var(--kx-pri);
        outline-offset: 2px;
    }

    .kx-btn:disabled {
        opacity: .55;
        cursor: default;
    }

    .kx-btn svg {
        flex-shrink: 0;
    }

.kx-btn-pri {
    border-color: transparent;
    background: linear-gradient(90deg, #6D28D9, #7C3AED);
    color: #fff;
    box-shadow: 0 6px 16px rgba(109,40,217,.22);
}

    .kx-btn-pri:hover {
        background: var(--kx-pri-2);
    }

.kx-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--kx-ink-2);
}

.kx-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 0;
    background: var(--kx-pri-soft);
    color: var(--kx-pri);
    cursor: pointer;
}

    .kx-icon-btn:hover {
        background: #E6DAFB;
    }

/* ── Tarjetas y KPIs ────────────────────────────────────────────── */
.kx-card {
    background: #fff;
    border: 1px solid var(--kx-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(30,16,51,.04);
}

.kx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kx-line);
}

.kx-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.kx-card-body {
    padding: 18px;
}

.kx-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.kx-kpi {
    padding: 14px 16px;
}

.kx-kpi-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--kx-ink-2);
}

.kx-kpi-value {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

    .kx-kpi-value small {
        font-size: 13px;
        font-weight: 500;
        color: var(--kx-ink-3);
    }

.kx-kpi-foot {
    margin-top: 6px;
    font-size: 12px;
    color: var(--kx-ink-3);
}

.kx-bar {
    margin-top: 10px;
    height: 6px;
    border-radius: 999px;
    background: #EEE9F6;
    overflow: hidden;
}

    .kx-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--kx-ok);
    }

.kx-ok { color: var(--kx-ok); }
.kx-warn { color: var(--kx-warn); }
.kx-bad { color: var(--kx-bad); }
.kx-pri { color: var(--kx-pri); }

/* ── Aviso ──────────────────────────────────────────────────────── */
.kx-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid #FED7AA;
    background: #FFF7ED;
    color: #9A3412;
    font-size: 13px;
}

.kx-alert-info {
    border-color: #E4D8FB;
    background: var(--kx-pri-soft);
    color: #4C1D95;
}

/* ── Buscador / filtros ─────────────────────────────────────────── */
.kx-search {
    position: relative;
    width: 260px;
    max-width: 100%;
}

    .kx-search svg {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--kx-ink-3);
        pointer-events: none;
    }

    .kx-search .kx-input {
        padding-left: 34px;
    }

/* ── Tabla ──────────────────────────────────────────────────────── */
.kx-table-wrap {
    overflow-x: auto;
}

.kx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .kx-table th {
        padding: 10px 16px;
        background: #FAF8FD;
        border-bottom: 1px solid var(--kx-line);
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--kx-ink-3);
        white-space: nowrap;
    }

    .kx-table td {
        padding: 10px 16px;
        border-bottom: 1px solid #F2EEF8;
        vertical-align: middle;
        white-space: nowrap;
    }

    .kx-table tbody tr:hover td {
        background: #FBF9FE;
    }

    .kx-table tbody tr.kx-row-link {
        cursor: pointer;
    }

.kx-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--kx-ink-3);
}

.kx-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    font-size: 12.5px;
    color: var(--kx-ink-3);
}

.kx-pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .kx-pager button {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--kx-ink-2);
        font: inherit;
        font-size: 12.5px;
        cursor: pointer;
    }

        .kx-pager button:hover:not(:disabled) {
            background: var(--kx-soft);
        }

        .kx-pager button.kx-on {
            background: var(--kx-pri);
            color: #fff;
            font-weight: 700;
        }

        .kx-pager button:disabled {
            opacity: .4;
            cursor: default;
        }

/* ── Persona (avatar + nombre) ──────────────────────────────────── */
.kx-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kx-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.kx-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 19px;
}

.kx-person-name {
    font-weight: 600;
    color: var(--kx-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-person-meta {
    font-size: 11.5px;
    color: var(--kx-ink-3);
}

/* ── Chips de estatus ───────────────────────────────────────────── */
.kx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--kx-soft);
    color: var(--kx-ink-2);
}

    .kx-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.kx-chip-ok { background: var(--kx-ok-soft); color: #15803D; }
.kx-chip-warn { background: var(--kx-warn-soft); color: #B45309; }
.kx-chip-bad { background: var(--kx-bad-soft); color: #B91C1C; }
.kx-chip-pri { background: var(--kx-pri-soft); color: var(--kx-pri); }

/* ── Formulario compacto ────────────────────────────────────────── */
.kx-section {
    container-type: inline-size;
    container-name: kxsec;
    min-width: 0;
}

.kx-section + .kx-section {
    margin-top: 16px;
}

.kx-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
}

.kx-section-sub {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--kx-ink-3);
}

.kx-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 14px;
}

.kx-c3 { grid-column: span 3; }
.kx-c4 { grid-column: span 4; }
.kx-c6 { grid-column: span 6; }
.kx-c8 { grid-column: span 8; }
.kx-c9 { grid-column: span 9; }
.kx-c12 { grid-column: span 12; }

@container kxsec (max-width: 720px) {
    .kx-c3, .kx-c4 { grid-column: span 6; }
    .kx-c6, .kx-c8, .kx-c9 { grid-column: span 12; }
}

@container kxsec (max-width: 460px) {
    .kx-c3, .kx-c4 { grid-column: span 12; }
}

.kx-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.kx-label {
    font-size: 12px;
    font-weight: 600;
    color: #3B2F52;
}

    .kx-label em {
        font-style: normal;
        color: var(--kx-bad);
    }

    .kx-label span {
        font-weight: 400;
        color: var(--kx-ink-3);
    }

.kx-input,
.kx-select {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--kx-line-2);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    color: var(--kx-ink);
    transition: border-color .12s, box-shadow .12s;
}

    .kx-input::placeholder {
        color: #A79CB8;
    }

    .kx-input:hover,
    .kx-select:hover {
        border-color: #C9BCDF;
    }

    .kx-input:focus,
    .kx-select:focus {
        outline: none;
        border-color: var(--kx-pri);
        box-shadow: 0 0 0 3px rgba(109,40,217,.12);
    }

    .kx-input.kx-invalid,
    .kx-select.kx-invalid {
        border-color: var(--kx-bad);
    }

.kx-select {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5E80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.kx-input-wrap {
    position: relative;
}

    .kx-input-wrap .kx-input {
        padding-right: 40px;
    }

.kx-input-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--kx-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .kx-input-btn:hover {
        background: var(--kx-soft);
        color: var(--kx-pri);
    }

.kx-help {
    font-size: 11.5px;
    color: var(--kx-ink-3);
}

.kx-error {
    font-size: 11.5px;
    color: var(--kx-bad);
}

.kx-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--kx-pri);
    cursor: pointer;
}

    .kx-link:hover {
        text-decoration: underline;
    }

/* Grupo segmentado (p. ej. Mujer / Hombre) */
.kx-seg {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--kx-line-2);
    border-radius: 10px;
    background: #fff;
    height: 36px;
}

    .kx-seg button {
        flex: 1;
        padding: 0 14px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--kx-ink-2);
        white-space: nowrap;
        cursor: pointer;
    }

        .kx-seg button.kx-on {
            background: var(--kx-pri);
            color: #fff;
        }

/* Días de la semana */
.kx-days {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .kx-days button {
        width: 38px;
        height: 36px;
        border-radius: 9px;
        border: 1px solid var(--kx-line-2);
        background: #fff;
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--kx-ink-3);
        cursor: pointer;
    }

        .kx-days button.kx-on {
            border-color: var(--kx-pri);
            background: var(--kx-pri-soft);
            color: var(--kx-pri);
        }

/* Interruptor */
.kx-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--kx-ink-2);
    cursor: pointer;
    user-select: none;
}

    .kx-switch input {
        appearance: none;
        width: 32px;
        height: 18px;
        margin: 0;
        border-radius: 999px;
        background: #D9D0E8;
        position: relative;
        cursor: pointer;
        transition: background .15s;
    }

        .kx-switch input::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #fff;
            transition: transform .15s;
        }

        .kx-switch input:checked {
            background: var(--kx-pri);
        }

            .kx-switch input:checked::after {
                transform: translateX(14px);
            }

/* Layout de forma + resumen lateral */
.kx-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

@container kxpage (max-width: 1000px) {
    .kx-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kx-sticky {
    position: sticky;
    top: 0;
}

.kx-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    margin: 0;
    font-size: 12.5px;
}

    .kx-dl dt {
        color: var(--kx-ink-3);
    }

    .kx-dl dd {
        margin: 0;
        text-align: right;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ═══ .kx-dense: MudBlazor compacto (para pantallas que sigan usando Mud*) ═══ */
.kx-dense,
.kx-dense .mud-typography,
.kx-dense .mud-input,
.kx-dense .mud-table {
    font-family: var(--kx-font);
}

    .kx-dense .mud-input {
        font-size: 13.5px;
    }

    .kx-dense .mud-input-label {
        font-size: 13px;
    }

    .kx-dense .mud-input-helper-text {
        font-size: 11.5px;
        margin-top: 2px;
    }

    .kx-dense .mud-input-outlined-border {
        border-radius: 9px !important;
        border-color: var(--kx-line-2) !important;
    }

    .kx-dense .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
        border-color: var(--kx-pri) !important;
    }

    .kx-dense .mud-button-root {
        text-transform: none;
        font-weight: 600;
        border-radius: 9px;
        box-shadow: none;
        letter-spacing: 0;
    }

    .kx-dense .mud-table-cell {
        padding: 8px 12px;
        font-size: 13px;
    }

    .kx-dense .mud-table-head .mud-table-cell {
        background: #FAF8FD;
        color: var(--kx-ink-3) !important;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .kx-dense .mud-paper {
        border-radius: 12px;
    }

/* ═══ Selectores KORA de hora y fecha (KxHora / KxFecha) ═══ */
.kx-pick {
    position: relative;
}

    .kx-pick .kx-input {
        padding-right: 34px;
        font-variant-numeric: tabular-nums;
    }

.kx-pick-ico {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kx-ink-3);
    pointer-events: none;
}

.kx-pop {
    position: absolute;
    z-index: 1400;
    top: calc(100% + 6px);
    left: 0;
    padding: 10px;
    border: 1px solid var(--kx-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(30,16,51,.16);
    font-family: var(--kx-font);
}

.kx-pop-cap {
    margin: 2px 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kx-ink-3);
}

    .kx-pop-cap + .kx-hgrid,
    .kx-pop-cap + .kx-mgrid {
        margin-bottom: 8px;
    }

.kx-hgrid {
    display: grid;
    grid-template-columns: repeat(6, 36px);
    gap: 4px;
}

.kx-mgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

    .kx-hgrid button,
    .kx-mgrid button,
    .kx-cal button,
    .kx-cal-head button {
        height: 30px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--kx-ink);
        cursor: pointer;
        font-variant-numeric: tabular-nums;
    }

    .kx-mgrid button {
        background: var(--kx-soft);
    }

        .kx-hgrid button:hover,
        .kx-mgrid button:hover,
        .kx-cal button:hover:not(:disabled),
        .kx-cal-head button:hover {
            background: var(--kx-pri-soft);
            color: var(--kx-pri);
        }

        .kx-hgrid button.kx-on,
        .kx-mgrid button.kx-on,
        .kx-cal button.kx-on {
            background: var(--kx-pri);
            color: #fff;
        }

.kx-pop-fecha {
    width: 268px;
}

.kx-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
}

    .kx-cal-head button {
        width: 30px;
        font-size: 16px;
        color: var(--kx-ink-2);
    }

.kx-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.kx-cal-dow {
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--kx-ink-3);
}

.kx-cal button.kx-cal-out {
    color: #B9AFC9;
    font-weight: 500;
}

.kx-cal button.kx-cal-hoy:not(.kx-on) {
    box-shadow: inset 0 0 0 1.5px var(--kx-pri);
}

.kx-cal button:disabled {
    color: #D5CEE0;
    cursor: default;
}

/* ═══ Lista de verificación (cumplimiento) ═══ */
.kx-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .kx-checks li {
        display: grid;
        grid-template-columns: 20px 1fr;
        gap: 10px;
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--kx-ink-2);
    }

    .kx-checks strong {
        display: block;
        font-size: 13px;
        color: var(--kx-ink);
    }

.kx-check-ico {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.kx-check-ok { background: var(--kx-ok-soft); color: var(--kx-ok); }
.kx-check-warn { background: var(--kx-warn-soft); color: var(--kx-warn); }
.kx-check-info { background: var(--kx-pri-soft); color: var(--kx-pri); }

.kx-foot-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--kx-line);
    font-size: 11.5px;
    color: var(--kx-ink-3);
}

.kx-pend {
    align-self: flex-start;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kx-warn-soft);
    color: #B45309;
    font-size: 11px;
    font-weight: 600;
}

.kx-inline-add {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-end;
    padding: 12px;
    border: 1px dashed var(--kx-line-2);
    border-radius: 12px;
    background: #FCFBFE;
}

    .kx-inline-add > .kx-field { flex: 0 0 auto; }
    .kx-inline-add > .kx-f-fecha { width: 150px; }
    .kx-inline-add > .kx-f-hora { width: 108px; }
    .kx-inline-add > .kx-f-motivo { flex: 1 1 180px; min-width: 160px; }
    .kx-inline-add > .kx-btn { flex: 0 0 auto; }

.kx-aside-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ═══ Inicio (administrador y colaborador) ═══ */
.kx-home {
    width: 100%;          /* alineado a la izquierda con las pestañas; ocupa todo el ancho */
}

.kx-home-col {
    max-width: 920px;
    margin: 0 auto;
}

.kx-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kx-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #1A0B2E;
    padding: 26px 28px;
    color: #fff;
}

    .kx-hero::before,
    .kx-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .kx-hero::before {
        width: 440px;
        height: 440px;
        right: -90px;
        top: -170px;
        background: radial-gradient(circle, rgba(168,85,247,.35) 0%, rgba(26,11,46,0) 68%);
    }

    .kx-hero::after {
        width: 320px;
        height: 320px;
        left: 140px;
        bottom: -200px;
        background: radial-gradient(circle, rgba(249,115,22,.18) 0%, rgba(26,11,46,0) 70%);
    }

    .kx-hero > * {
        position: relative;
    }

.kx-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.kx-hero-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 14px 34px rgba(124,58,237,.45);
}

.kx-hero-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #FDBA74;
}

.kx-hero-title {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.kx-hero-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: #D9CCF2;
}

.kx-hero-clock {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kx-btn-glass {
    height: 40px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: #fff;
}

    .kx-btn-glass:hover {
        background: rgba(255,255,255,.16);
    }

.kx-btn-acc {
    height: 40px;
    border-color: transparent;
    background: #F97316;
    color: #1A0B2E;
    font-weight: 700;
}

    .kx-btn-acc:hover {
        background: #FB923C;
    }

.kx-btn-xl {
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(249,115,22,.35);
}

.kx-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@container kxpage (max-width: 560px) {
    .kx-hero-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kx-hero-stat {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
}

    .kx-hero-stat span {
        display: block;
        font-size: 12px;
        color: #B8A6DA;
    }

    .kx-hero-stat strong {
        display: block;
        margin-top: 4px;
        font-size: 20px;
        font-weight: 800;
        color: #fff;
    }

    .kx-hero-stat small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        color: #D9CCF2;
    }

        .kx-hero-stat small.kx-acc {
            color: #FDBA74;
        }

.kx-hero-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #D9CCF2;
}

.kx-two {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

    .kx-two > .kx-main {
        flex: 999 1 520px;
        min-width: 0;
    }

    .kx-two > .kx-side {
        flex: 1 1 300px;
        min-width: 280px;
    }

/* Gráfica de barras apiladas por día */
.kx-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    height: 220px;
    padding: 18px 18px 14px;
}

.kx-chart-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.kx-chart-pct {
    font-size: 11.5px;
    font-weight: 700;
}

.kx-chart-bar {
    width: 100%;
    max-width: 46px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .kx-chart-bar span {
        display: block;
        border-radius: 3px;
    }

        .kx-chart-bar span:first-child {
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }

        .kx-chart-bar span:last-child {
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
        }

.kx-chart-dia {
    font-size: 12px;
    color: var(--kx-ink-3);
}

    .kx-chart-dia.kx-hoy {
        color: var(--kx-pri);
        font-weight: 700;
    }

.kx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--kx-ink-2);
}

    .kx-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .kx-legend i {
        width: 10px;
        height: 10px;
        border-radius: 3px;
        box-sizing: border-box;
    }

.kx-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kx-ok);
    box-shadow: 0 0 0 4px var(--kx-ok-soft);
}

/* Anillo de porcentaje */
.kx-ring {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .kx-ring span {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
        letter-spacing: -.02em;
    }

/* Lista de pendientes y accesos */
.kx-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kx-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: #FAF8FD;
    font: inherit;
    font-size: 13px;
    color: var(--kx-ink);
    text-align: left;
    cursor: pointer;
}

    .kx-list-item:hover {
        background: var(--kx-soft);
    }

.kx-count {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

.kx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.kx-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--kx-line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kx-ink);
    text-align: left;
    cursor: pointer;
}

    .kx-tile:hover {
        border-color: #D8C8F5;
        background: #FCFAFF;
    }

.kx-tile-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--kx-pri-soft);
    color: var(--kx-pri);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Semana del colaborador */
.kx-week {
    display: flex;
    gap: 6px;
}

    .kx-week span {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        box-sizing: border-box;
    }

.kx-w-ok { background: var(--kx-pri); color: #fff; }
.kx-w-ret { background: #FB923C; color: #1A0B2E; }
.kx-w-falta { background: var(--kx-bad-soft); color: #B91C1C; }
.kx-w-hoy { background: #fff; color: var(--kx-pri); border: 2px solid var(--kx-pri); }
.kx-w-des { background: #EEE9F6; color: var(--kx-ink-3); }
.kx-w-fut { background: #fff; color: var(--kx-ink-3); border: 1px dashed var(--kx-line-2); }

/* Horario semanal (Inicio del colaborador) */
.kx-sched {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .kx-sched li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 10px;
        border-radius: 9px;
        font-size: 13px;
        color: var(--kx-ink-2);
    }

        .kx-sched li.kx-on {
            background: var(--kx-pri-soft);
            color: var(--kx-pri);
            font-weight: 600;
        }

    .kx-sched strong {
        font-weight: 600;
        color: var(--kx-ink);
        font-variant-numeric: tabular-nums;
    }

        .kx-sched strong.kx-sched-off {
            font-weight: 500;
            color: var(--kx-ink-3);
        }

/* Sub-bloque dentro de una sección (comida, tolerancia) */
.kx-subblock {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--kx-line);
}

.kx-subblock-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kx-subblock-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kx-ink);
}

/* Gráfica semanal del colaborador */
.kx-wchart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;                             /* sin huecos: la línea base queda continua */
    padding: 16px 18px 14px;
}

.kx-wchart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.kx-wchart-val {
    height: 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--kx-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kx-wchart-track {
    position: relative;
    width: 100%;
    height: 120px;
    border-bottom: 2px solid #ECE6F5;   /* línea base común a todos los días */
}

.kx-wchart-meta,
.kx-wchart-bar,
.kx-wchart-off {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(52px, 70%);
    transform: translateX(-50%);
    box-sizing: border-box;
}

/* Meta del día: contorno punteado con relleno muy tenue, pegado a la línea base */
.kx-wchart-meta {
    border: 1.5px dashed #C9BCDF;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #FAF8FD;
}

/* Horas trabajadas: misma base y mismo ancho que la meta */
.kx-wchart-bar {
    border-radius: 8px 8px 0 0;
}

/* Día de descanso: solo una marca baja */
.kx-wchart-off {
    height: 6px;
    border-radius: 4px 4px 0 0;
    background: #EEE9F6;
}

.kx-b-ok { background: linear-gradient(180deg, #8B5CF6, #6D28D9); }
.kx-b-ret { background: linear-gradient(180deg, #FDBA74, #F97316); }

.kx-wchart-dia {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kx-ink-2);
}

    .kx-wchart-dia small {
        font-size: 11px;
        font-weight: 500;
        color: var(--kx-ink-3);
    }

    .kx-wchart-dia.kx-hoy {
        color: var(--kx-pri);
    }

.kx-wchart-est {
    height: 14px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.kx-muted { color: var(--kx-ink-3); }

@container kxpage (max-width: 620px) {
    .kx-hero-stats[style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.kx-wchart-col.kx-miss .kx-wchart-meta {
    border-color: #FCA5A5;
    background: #FEF2F2;
}

/* Columnas de igual alto: la última tarjeta de cada columna crece hasta empatar el fondo */
.kx-two.kx-eq {
    align-items: stretch;
}

    .kx-two.kx-eq > .kx-main,
    .kx-two.kx-eq > .kx-side {
        display: flex;
        flex-direction: column;
    }

.kx-grow {
    flex: 1 1 auto;
}

.kx-col {
    display: flex;
    flex-direction: column;
}

    .kx-col > .kx-wchart {
        flex: 1 1 auto;
        align-content: end;   /* si la tarjeta crece, la gráfica se queda abajo, pegada a su línea base */
    }

/* ═══ Tablero del administrador: una sola rejilla de 5 columnas ═══
   Los KPIs ocupan una columna cada uno; abajo, el contenido principal ocupa 4 y la columna lateral 1,
   así los bordes de la columna lateral coinciden exactamente con el último KPI. */
.kx-dash {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.kx-dash-full {
    grid-column: 1 / -1;
}

.kx-dash-main,
.kx-dash-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.kx-dash-main {
    grid-column: span 4;
}

.kx-dash-side {
    grid-column: span 1;
}

@container kxpage (max-width: 1180px) {
    .kx-dash {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kx-dash-main,
    .kx-dash-side {
        grid-column: 1 / -1;
    }
}