:root {
    --color-primary: #143A66;
    --color-primary-dark: #0b2545;
    --color-secondary: #FFC300;
    --color-bg: #F4F7FA;
    --color-card: #FFFFFF;
    --color-text: #0F172A;
    --color-muted: #64748B;
    --color-border: #E2E8F0;
    --color-success: #22C55E;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --radius-lg: 22px;
    --radius-md: 14px;
    --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

a {
    text-decoration: none;
}

/* =========================
   LAYOUT GENERAL
========================= */

.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--color-bg);
}

.app-sidebar {
    width: 280px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    background: linear-gradient( 180deg, var(--color-primary-dark), var(--color-primary) );
    color: white;
    padding: 22px 12px 0 18px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    transform: translateX(0);
    z-index: 40;
}

.app-main {
    margin-left: 280px;
    width: calc(100% - 280px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-area {
    padding: 30px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* =========================
   SIDEBAR
========================= */

.brand-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 22px 8px;
    margin-right: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.brand-title {
    font-size: 18px;
    font-weight: 800;
}

.brand-subtitle {
    font-size: 13px;
    opacity: .75;
}

.side-menu {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 16px;
    padding-right: 6px;
    padding-bottom: 36px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .30) transparent;
    -webkit-overflow-scrolling: touch;
}

    /* Evita que los elementos del menú se compriman para caber. */
    .side-menu > * {
        flex: 0 0 auto;
    }

    /* Scrollbar para Chrome, Edge y Safari. */
    .side-menu::-webkit-scrollbar {
        width: 7px;
    }

    .side-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .side-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .24);
        border-radius: 999px;
    }

        .side-menu::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, .42);
        }

.side-link {
    color: rgba(255,255,255,.85);
    padding: 13px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 650;
    transition: all .18s ease;
}

    .side-link:hover {
        background: rgba(255,255,255,.12);
        color: white;
        transform: translateX(4px);
    }

.side-group {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.side-parent {
    cursor: pointer;
}

.side-text {
    flex: 1;
}

.side-arrow {
    margin-left: auto;
    opacity: .75;
}

.side-submenu {
    margin: 5px 0 9px 34px;
    padding-left: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.side-sublink {
    color: rgba(255, 255, 255, .76);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

    .side-sublink:hover {
        color: white;
        background: rgba(255, 255, 255, .10);
        transform: translateX(3px);
    }

/* =========================
   AYUDA SIDEBAR
========================= */

.sidebar-help {
    margin-top: auto;
    padding: 16px 4px 6px 4px;
}

.sidebar-help-btn {
    width: 100%;
    border: none;
    border-radius: 18px;
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    padding: 14px 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(255, 195, 0, .65);
    animation: helpPulse 1.8s infinite;
}

    .sidebar-help-btn:hover {
        transform: translateY(-3px);
    }

@keyframes helpPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 195, 0, .65);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(255, 195, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 195, 0, 0);
    }
}

/* =========================
   TOPBAR
========================= */

.topbar {
    height: 86px;
    background: white;
    border-bottom: 1px solid var(--color-border);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-title {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.3px;
    color: #14213d;
}

.topbar-subtitle {
    margin: 4px 0 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-btn {
    border: 1px solid var(--color-border);
    background: white;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 18px;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--color-border);
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: #fff;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.user-pill strong {
    display: block;
    font-size: 13px;
}

.user-pill small {
    display: block;
    font-size: 12px;
    color: var(--color-muted);
}

/* =========================
   TITULOS
========================= */

.page-title {
    font-size: 26px;
    margin: 0 0 6px 0;
    font-weight: 750;
    letter-spacing: -0.4px;
    color: #14213d;
}

.page-subtitle {
    margin: 0 0 24px 0;
    color: #6b7280;
    font-size: 15px;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-card);
}

.metric-label {
    color: var(--color-muted);
    font-weight: 650;
    font-size: 13px;
}

.metric-value {
    font-size: 32px;
    font-weight: 750;
    margin-top: 10px;
    letter-spacing: -0.5px;
}

.metric-note {
    color: var(--color-muted);
    font-size: 12px;
    margin-top: 8px;
}

.panel {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

/* =========================
   BOTONES
========================= */

.btn-primary,
.btn-secondary {
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 750;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

    .btn-primary:hover {
        background: var(--color-primary-dark);
    }

.btn-secondary {
    background: #E2E8F0;
    color: var(--color-text);
}

/* =========================
   LOGIN
========================= */


/* =========================
   FORMULARIOS
========================= */

.form-panel {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-card);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.form-group {
    margin-bottom: 18px;
}

    .form-group label {
        display: block;
        font-weight: 650;
        margin-bottom: 6px;
    }

.form-control {
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
    background: white;
}

    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(20, 58, 102, .14);
    }

.textarea-lg {
    min-height: 150px;
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* =========================
   ALERTAS
========================= */

.alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 18px;
    font-weight: 700;
}

.alert-success {
    background: #DCFCE7;
    color: #166534;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 18px;
    font-weight: 700;
}

/* =========================
   FOOTER
========================= */

.app-footer {
    margin-top: auto;
    padding: 18px 22px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

    .app-footer strong {
        color: var(--color-primary);
    }

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

.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: none;
    border-radius: 13px;
    background: var(--color-primary);
    color: white;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    place-items: center;
}

/* Escritorio: el menú siempre debe estar visible. */
@media (min-width: 901px) {
    .app-sidebar {
        transform: translateX(0);
        z-index: 40;
    }

    .app-main {
        margin-left: 280px;
        width: calc(100% - 280px);
    }
}

/* Tablet y teléfono. */
@media (max-width: 900px) {
    .app-sidebar {
        width: min(310px, 88vw);
        height: 100vh;
        height: 100dvh;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 22px 0 55px rgba(15, 23, 42, .28);
        z-index: 100;
    }

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

    .app-main {
        margin-left: 0;
        width: 100%;
    }

    .mobile-menu-btn {
        display: inline-grid;
        margin-right: 10px;
    }

    .topbar {
        padding: 0 14px;
    }

        .topbar > div:first-of-type {
            display: flex;
            align-items: center;
            min-width: 0;
        }

    .topbar-title {
        margin: 0;
        font-size: 18px;
        white-space: nowrap;
    }

    .topbar-subtitle {
        display: none;
    }

    .topbar-actions {
        gap: 8px;
    }

    .side-menu {
        padding-bottom: max( 36px, calc(env(safe-area-inset-bottom) + 24px) );
    }

    .brand-box > div:not(.brand-logo) {
        display: block;
    }

    .side-link {
        justify-content: flex-start;
        font-size: 15px;
    }

        .side-link span {
            font-size: 18px;
        }

    .side-arrow,
    .side-submenu {
        display: flex;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .form-actions {
        justify-content: stretch;
    }

        .form-actions .btn-primary {
            width: 100%;
        }

    .user-pill div {
        display: none;
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .content-area {
        padding: 22px 16px;
    }

    .topbar {
        min-height: 76px;
        height: auto;
        gap: 8px;
    }

    .topbar-title {
        font-size: 16px;
    }

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

    .user-pill {
        padding: 6px;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
    }

    .app-footer {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

    .table-toolbar h3 {
        margin: 0;
        font-weight: 700;
        color: #14213d;
    }

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .app-table th {
        text-align: left;
        color: var(--color-muted);
        font-weight: 700;
        border-bottom: 1px solid var(--color-border);
        padding: 14px 12px;
        white-space: nowrap;
    }

    .app-table td {
        border-bottom: 1px solid var(--color-border);
        padding: 14px 12px;
        vertical-align: top;
    }

    .app-table tbody tr:hover {
        background: #f8fafc;
    }

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-muted);
}

    .empty-state h3 {
        margin: 0 0 8px 0;
        color: #14213d;
    }


.input-help {
    display: block;
    margin-top: 7px;
    color: var(--color-muted);
    font-size: 13px;
}

.attachment-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.attachment-item {
    border: 1px solid var(--color-border);
    background: #f8fafc;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

    .attachment-item span {
        font-weight: 650;
    }

    .attachment-item small {
        color: var(--color-muted);
    }

.ticket-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
}

.ticket-main,
.ticket-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

    .ticket-header h2 {
        margin: 8px 0 0 0;
        font-size: 24px;
        font-weight: 750;
        color: #14213d;
    }

.ticket-code {
    display: inline-flex;
    background: #eef2ff;
    color: #1e3a8a;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 750;
    font-size: 13px;
}

.ticket-description {
    margin-top: 18px;
    color: #334155;
    line-height: 1.6;
}

.ticket-meta-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
    color: #334155;
}

.message-card {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-top: 12px;
    background: #fff;
}

.message-internal {
    background: #fffbeb;
    border-color: #fde68a;
}

.message-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #14213d;
}

    .message-head small {
        color: var(--color-muted);
    }

.message-card p {
    margin: 10px 0 0 0;
    color: #334155;
    line-height: 1.5;
}

.muted {
    color: var(--color-muted);
}

.btn-table {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .ticket-detail-grid {
        grid-template-columns: 1fr;
    }
}

.reply-box {
    margin-top: 24px;
    border-top: 1px solid var(--color-border);
    padding-top: 22px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 18px 0;
    color: #334155;
    font-weight: 650;
}

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
    padding-left: 10px;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 30px;
        top: 12px;
        bottom: 12px;
        width: 2px;
        background: linear-gradient(180deg, #143A66, #cbd5e1);
    }

.timeline-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    position: relative;
}

.timeline-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #eef2ff;
    color: #143A66;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    font-weight: 900;
    z-index: 2;
    border: 4px solid white;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

    .timeline-icon::before {
        content: "•";
        font-size: 30px;
        line-height: 1;
    }

.timeline-content {
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.timeline-clickable {
    cursor: pointer;
}

    .timeline-clickable:hover {
        border-color: var(--color-primary);
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
        transform: translateY(-1px);
    }

.timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

    .timeline-head strong {
        color: #14213d;
        font-weight: 750;
    }

    .timeline-head small {
        color: var(--color-muted);
        white-space: nowrap;
    }

.timeline-content p {
    margin: 10px 0;
    color: #334155;
    line-height: 1.45;
}

.timeline-user {
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 650;
}


.ticket-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.ticket-work-main {
    min-width: 0;
}

.ticket-hero {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

    .ticket-hero h1 {
        margin: 10px 0 8px 0;
        font-size: 26px;
        font-weight: 750;
        color: #14213d;
        letter-spacing: -0.4px;
    }

    .ticket-hero p {
        margin: 0;
        color: #475569;
        line-height: 1.55;
    }

.ticket-hero-actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ticket-tabs {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 8px;
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.ticket-tab {
    border: none;
    background: transparent;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 750;
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
}

    .ticket-tab.active {
        background: var(--color-primary);
        color: white;
    }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.summary-card {
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 16px;
    background: #f8fafc;
}

    .summary-card span {
        display: block;
        color: var(--color-muted);
        font-size: 13px;
        font-weight: 650;
        margin-bottom: 8px;
    }

    .summary-card strong {
        color: #14213d;
        font-size: 18px;
    }

.ticket-side-panel {
    position: sticky;
    top: 108px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.side-panel-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

    .side-panel-card h3 {
        margin: 0 0 14px 0;
        color: #14213d;
        font-weight: 750;
    }

.side-info-row {
    border-bottom: 1px solid var(--color-border);
    padding: 11px 0;
}

    .side-info-row:last-child {
        border-bottom: none;
    }

    .side-info-row span {
        display: block;
        color: var(--color-muted);
        font-size: 12px;
        font-weight: 650;
    }

    .side-info-row strong {
        display: block;
        color: #14213d;
        margin-top: 4px;
        font-size: 14px;
    }

.ai-card {
    background: linear-gradient(135deg, #eef2ff, #ffffff);
}

    .ai-card p {
        margin: 0;
        color: #475569;
        line-height: 1.5;
    }

@media (max-width: 1200px) {
    .ticket-workspace {
        grid-template-columns: 1fr;
    }

    .ticket-side-panel {
        position: static;
    }
}

@media (max-width: 700px) {
    .ticket-hero {
        flex-direction: column;
    }

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

.timeline-clickable {
    cursor: pointer;
}

    .timeline-clickable:hover {
        border-color: var(--color-primary);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.modal-card {
    width: min(720px, 100%);
    background: white;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    overflow: hidden;
}

.modal-header {
    padding: 22px 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

    .modal-header h2 {
        margin: 10px 0 0 0;
        font-size: 24px;
        font-weight: 750;
        color: #14213d;
    }

.modal-close {
    border: none;
    background: #f1f5f9;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 24px;
    cursor: pointer;
}

.modal-body {
    padding: 24px;
}

.detail-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

    .detail-row span {
        color: var(--color-muted);
        font-weight: 650;
    }

.detail-box {
    margin-top: 18px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    color: #334155;
    line-height: 1.6;
    white-space: pre-wrap;
}

.modal-action-link {
    display: inline-flex;
    margin-top: 18px;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}


.full-btn {
    width: 100%;
}

.action-space {
    margin-top: 18px;
}

.mini-alert {
    background: #e0f2fe;
    color: #075985;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 13px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.history-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
}

.history-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #143A66;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-content {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: white;
    padding: 14px 16px;
}

.history-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

    .history-head strong {
        color: #14213d;
        font-weight: 750;
    }

    .history-head small {
        color: var(--color-muted);
    }

.history-change {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #334155;
}

.history-user {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 650;
}

.sla-dates {
    margin-top: 22px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    overflow: hidden;
}

    .sla-dates div {
        display: grid;
        grid-template-columns: 190px 1fr;
        gap: 14px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-border);
    }

        .sla-dates div:last-child {
            border-bottom: none;
        }

    .sla-dates span {
        color: var(--color-muted);
        font-weight: 650;
    }

    .sla-dates strong {
        color: #14213d;
    }

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

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

.sidebar-overlay {
    display: none;
}

@media (max-width: 900px) {
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 90;
    }

    .app-sidebar {
        z-index: 100;
    }
}

.metric-button,
.metric-card-active {
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--color-border);
}

.metric-button {
    background: var(--color-card);
}

.metric-card-active {
    background: linear-gradient(135deg, #143A66, #0b2545);
    color: white;
}

    .metric-card-active .metric-label,
    .metric-card-active .metric-note {
        color: rgba(255,255,255,.75);
    }

    .metric-card-active .metric-value {
        color: white;
    }

.notification-box {
    position: relative;
}

.notification-btn {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-danger);
    color: white;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.notification-dropdown {
    position: absolute;
    right: 0;
    top: 54px;
    width: 360px;
    max-height: 460px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    z-index: 300;
}

.notification-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .notification-header strong {
        color: #14213d;
    }

    .notification-header small {
        color: var(--color-muted);
    }

.notification-empty {
    padding: 22px;
    color: var(--color-muted);
    text-align: center;
}

.notification-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

    .notification-item:hover {
        background: #f8fafc;
    }

    .notification-item.unread {
        background: #eff6ff;
    }

    .notification-item strong {
        display: block;
        color: #14213d;
        font-size: 14px;
    }

    .notification-item p {
        margin: 6px 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.4;
    }

    .notification-item small {
        color: var(--color-muted);
        font-size: 12px;
    }

@media (max-width: 600px) {
    .notification-dropdown {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 76px;
        width: auto;
    }
}

.app-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(360px, calc(100% - 32px));
    background: white;
    border: 1px solid var(--color-border);
    border-left: 6px solid var(--color-secondary);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
    z-index: 500;
    animation: toastIn .25s ease;
}

    .app-toast strong {
        display: block;
        color: #14213d;
        font-weight: 800;
        margin-bottom: 4px;
    }

    .app-toast span {
        display: block;
        color: #475569;
        font-size: 14px;
    }

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

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

.notification-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.notification-content {
    flex: 1;
}

.notification-remove {
    border: none;
    background: #e2e8f0;
    color: #475569;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

    .notification-remove:hover {
        background: #fee2e2;
        color: #991b1b;
    }


.readonly-banner {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .readonly-banner strong {
        font-weight: 900;
    }

    .readonly-banner span {
        font-size: .86rem;
    }


.btn-danger-mini {
    border: none;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    padding: .45rem .65rem;
    font-weight: 900;
    cursor: pointer;
}

    .btn-danger-mini:hover {
        background: #fecaca;
    }


.btn-danger-mini {
    border: none;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    padding: .45rem .65rem;
    font-weight: 900;
    cursor: pointer;
    margin-left: .35rem;
}

    .btn-danger-mini:hover {
        background: #fecaca;
    }

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: .85rem 1rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.mail-actions-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.btn-secondary {
    border: none;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 14px;
    padding: .75rem 1rem;
    font-weight: 900;
    cursor: pointer;
}

    .btn-secondary:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

.mini-alert {
    background: #eef4ff;
    color: #153e75;
    border: 1px solid #dbe4ff;
    border-radius: 14px;
    padding: .75rem 1rem;
    font-weight: 800;
    margin-bottom: .85rem;
}

.mail-status-message {
    border-radius: 14px;
    padding: .75rem 1rem;
    font-weight: 900;
    font-size: .88rem;
    min-width: 260px;
    max-width: 420px;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

    .mail-status-message.success {
        background: #dcfce7;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .mail-status-message.warning {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        color: #9a3412;
    }

    .mail-status-message.error {
        background: #fee2e2;
        border: 1px solid #fecaca;
        color: #991b1b;
    }

.ticket-action-buttons {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: nowrap;
}

.btn-danger-mini {
    border: none;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    padding: .55rem .75rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-danger-mini:hover {
        background: #fecaca;
    }

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: .85rem 1rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.confirm-close-modal {
    width: min(460px, 100%);
    background: white;
    border-radius: 24px;
    padding: 1.4rem;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
    border: 1px solid #e7eaf0;
    text-align: center;
}

.confirm-close-icon {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    margin: 0 auto .85rem;
}

.confirm-close-modal h3 {
    margin: 0;
    color: #101828;
    font-weight: 900;
}

.confirm-close-modal p {
    color: #475467;
    line-height: 1.45;
    margin: .75rem 0 1rem;
}

.confirm-close-actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
}

.btn-danger-main {
    border: none;
    background: #dc2626;
    color: white;
    border-radius: 14px;
    padding: .75rem 1rem;
    font-weight: 900;
    cursor: pointer;
}

    .btn-danger-main:hover {
        background: #b91c1c;
    }

    .btn-danger-main:disabled,
    .btn-secondary:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

@media (max-width: 700px) {
    .ticket-action-buttons {
        flex-direction: column;
        align-items: stretch;
    }

        .ticket-action-buttons button {
            width: 100%;
        }

    .confirm-close-actions {
        flex-direction: column;
    }

        .confirm-close-actions button {
            width: 100%;
        }
}

.mail-status-message {
    border-radius: 14px;
    padding: .75rem 1rem;
    font-weight: 900;
    font-size: .88rem;
    min-width: 260px;
    max-width: 460px;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

    .mail-status-message.success {
        background: #dcfce7;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .mail-status-message.warning {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        color: #9a3412;
    }

    .mail-status-message.error {
        background: #fee2e2;
        border: 1px solid #fecaca;
        color: #991b1b;
    }


/* Chat global: estilos globales porque la conversación usa RenderTreeBuilder */

.global-chat-box {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.global-chat-current-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e7eaf0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #fff;
}

    .global-chat-current-head > div:first-child {
        min-width: 0;
    }

    .global-chat-current-head strong {
        display: block;
        color: #101828;
        font-size: 1rem;
        font-weight: 950;
    }

    .global-chat-current-head span {
        display: block;
        margin-top: .2rem;
        color: #667085;
        font-size: .8rem;
        font-weight: 800;
    }

.global-chat-head-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.global-chat-take,
.global-chat-convert,
.global-chat-open-ticket {
    border: 0;
    border-radius: 999px;
    padding: .55rem .85rem;
    font-size: .8rem;
    font-weight: 950;
    cursor: pointer;
    white-space: nowrap;
}

.global-chat-take {
    background: #f59e0b;
    color: #101828;
}

.global-chat-convert {
    background: #153e75;
    color: #fff;
}

.global-chat-open-ticket {
    background: #16a34a;
    color: #fff;
}

    .global-chat-take:hover,
    .global-chat-convert:hover,
    .global-chat-open-ticket:hover {
        filter: brightness(.96);
    }

.global-chat-convert:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.global-chat-messages {
    flex: 1;
    min-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.global-chat-message {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: fit-content;
    max-width: 78%;
}

    .global-chat-message.mine {
        margin-left: auto;
        flex-direction: row-reverse;
    }

    .global-chat-message.system {
        margin: 0 auto;
        width: auto;
        max-width: 90%;
    }

.global-chat-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #153e75;
    color: #fff;
    font-size: .8rem;
    font-weight: 950;
}

.global-chat-message.mine .global-chat-avatar {
    background: #facc15;
    color: #101828;
}

.global-chat-message.system .global-chat-avatar {
    display: none;
}

.global-chat-bubble {
    min-width: 120px;
    padding: .75rem .85rem;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 6px 18px 18px 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.global-chat-message.mine .global-chat-bubble {
    background: #eaf0ff;
    border-color: #c7d2fe;
    border-radius: 18px 6px 18px 18px;
}

.global-chat-message.system .global-chat-bubble {
    background: #fffbeb;
    border-color: #fde68a;
    border-radius: 14px;
    text-align: center;
}

.global-chat-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .35rem;
}

    .global-chat-msg-head strong {
        color: #101828;
        font-size: .8rem;
        font-weight: 950;
    }

    .global-chat-msg-head small {
        color: #98a2b3;
        font-size: .7rem;
        font-weight: 750;
        white-space: nowrap;
    }

.global-chat-bubble p {
    margin: 0;
    color: #344054;
    font-size: .9rem;
    line-height: 1.45;
    font-weight: 700;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.global-chat-compose {
    padding: .85rem;
    border-top: 1px solid #e7eaf0;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .65rem;
}

.global-chat-input {
    width: 100%;
    min-height: 64px;
    max-height: 160px;
    resize: vertical;
    padding: .75rem .85rem;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    color: #101828;
    font-family: inherit;
    font-size: .9rem;
    outline: none;
}

    .global-chat-input:focus {
        border-color: #153e75;
        box-shadow: 0 0 0 4px rgba(21, 62, 117, .1);
    }

.global-chat-send {
    min-width: 90px;
    border: 0;
    border-radius: 15px;
    padding: 0 1rem;
    background: #153e75;
    color: #fff;
    font-weight: 950;
    cursor: pointer;
}

    .global-chat-send:hover {
        background: #102f5a;
    }

@media (max-width: 700px) {
    .global-chat-current-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .global-chat-head-actions {
        justify-content: flex-start;
    }

    .global-chat-message,
    .global-chat-message.system {
        max-width: 100%;
    }

    .global-chat-compose {
        grid-template-columns: 1fr;
    }

    .global-chat-send {
        min-height: 44px;
    }
}

/* =========================================
   IDENTIDAD EMPRESARIAL
========================================= */

.brand-logo {
    position: relative;
    overflow: visible;
}

.brand-status-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 13px;
    height: 13px;
    border: 3px solid #0b2545;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}

.brand-copy {
    min-width: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-brand-copy {
    min-width: 0;
}

.enterprise-footer {
    align-items: center;
    gap: 1rem;
    padding: 18px 22px;
}

.footer-product {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.footer-product-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient( 135deg, #0b2545, #143a66 );
    color: white;
    font-size: .72rem;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(11, 37, 69, .18);
}

.footer-product strong {
    display: block;
    color: #14213d;
    font-size: .82rem;
    font-weight: 900;
}

.footer-product small {
    display: block;
    margin-top: .1rem;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 700;
}

.footer-developer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
    text-align: right;
}

    .footer-developer span {
        color: #94a3b8;
        font-size: .72rem;
        font-weight: 750;
    }

    .footer-developer strong {
        color: #143a66;
        font-size: .78rem;
        font-weight: 950;
    }

    .footer-developer small {
        width: 100%;
        color: #94a3b8;
        font-size: .68rem;
        font-weight: 700;
    }

@media (max-width: 700px) {
    .enterprise-footer {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .footer-developer {
        justify-content: center;
        text-align: center;
    }

    .topbar-brand-copy {
        max-width: 145px;
    }

    .topbar-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* KPI de BandejaGeneral se construyen con RenderTreeBuilder; estilos globales */
.bandeja-page .kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .8rem;
}

/* =========================================================
   CONTRASTE OPERATIVO 2026-08-14
   Kanban, Portal Tecnico y Centro de ayuda en tema oscuro.
   ========================================================= */

.enterprise-shell.theme-dark .kanban-page :is(
    .kanban-hero,
    .panel,
    .kanban-column,
    .kanban-column-head,
    .kanban-card,
    .kanban-empty
) {
    color: #e8eef8 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .kanban-page .kanban-column {
    background: #0f1929 !important;
}

.enterprise-shell.theme-dark .kanban-page .kanban-column-head {
    background: #172338 !important;
}

.enterprise-shell.theme-dark .kanban-page .kanban-card {
    background: #131f33 !important;
    box-shadow: 0 12px 26px rgba(2, 8, 23, .28) !important;
}

.enterprise-shell.theme-dark .kanban-page :is(
    .kanban-hero h1,
    .kanban-column-head h3,
    .kanban-card h4
) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .kanban-page :is(
    .kanban-hero p,
    .kanban-column-head span,
    .kanban-meta,
    .kanban-meta strong,
    .kanban-ai small,
    .kanban-card-footer small
) {
    color: #aebdd1 !important;
}

.enterprise-shell.theme-dark .kanban-page .kanban-search {
    color: #f8fafc !important;
    background: #0b1423 !important;
    border-color: #40516a !important;
}

.enterprise-shell.theme-dark .kanban-page .kanban-search::placeholder {
    color: #91a4be !important;
    opacity: 1;
}

.enterprise-shell.theme-dark .kanban-page .kanban-empty {
    color: #b8c5d8 !important;
    background: #131f33 !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page :is(
    .outlook-list-panel,
    .outlook-detail-panel,
    .quick-detail,
    .quick-info-item,
    .detail-empty,
    .workflow-box,
    .workflow-empty,
    .closed-toggle,
    .kanban-column,
    .kanban-card,
    .kanban-summary
) {
    color: #e8eef8 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page :is(
    .outlook-panel-title h3,
    .quick-detail-header h2,
    .quick-info-item strong,
    .detail-empty h3,
    .workflow-box-header h4,
    .closed-toggle,
    .kanban-summary
) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page :is(
    .outlook-panel-title span,
    .quick-info-item span,
    .detail-empty,
    .workflow-box-header span
) {
    color: #aebdd1 !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page .quick-score-card.attention-critical {
    color: #fecaca !important;
    background: #3b1820 !important;
    border: 1px solid #7f2634 !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page .quick-score-card.attention-high {
    color: #fed7aa !important;
    background: #3a2413 !important;
    border: 1px solid #854d1b !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page .quick-score-card.attention-medium {
    color: #fef08a !important;
    background: #352d12 !important;
    border: 1px solid #786617 !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page .quick-score-card.attention-normal {
    color: #c7d2fe !important;
    background: #19234a !important;
    border: 1px solid #394b9a !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page .portal-tab:not(.active) {
    color: #b8c5d8 !important;
}

.enterprise-shell.theme-dark .help-page {
    background: #0b1220 !important;
}

.enterprise-shell.theme-dark .help-page :is(.category-panel, .articles-panel, .article-card) {
    color: #e8eef8 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .help-page :is(
    .category-panel h2,
    .articles-heading h2,
    .article-card h3,
    .empty-help strong
) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .help-page :is(
    .articles-heading span,
    .article-card p,
    .article-card-foot span,
    .empty-help
) {
    color: #aebdd1 !important;
}

.enterprise-shell.theme-dark .help-page .hero-search {
    background: #0d1727 !important;
    border: 1px solid #40516a !important;
}

.enterprise-shell.theme-dark .help-page .hero-search input {
    color: #f8fafc !important;
    background: transparent !important;
}

.enterprise-shell.theme-dark .help-page .hero-search input::placeholder {
    color: #9fb0c7 !important;
    opacity: 1;
}

@media (max-width: 900px) {
    .enterprise-shell .kanban-page,
    .enterprise-shell .portal-tecnico-page,
    .enterprise-shell .help-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}
.bandeja-page .kpi-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    text-align: left;
    color: inherit;
    background: #fff;
    border: 1px solid #e4eaf2;
    border-radius: 17px;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(15,35,65,.045);
}
.bandeja-page .kpi-card.active {
    border-color: #315ad8;
    box-shadow: 0 0 0 3px rgba(49,90,216,.11), 0 10px 25px rgba(15,35,65,.08);
}
.bandeja-page .kpi-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    background: #f0f4fb;
    border-radius: 13px;
}
.bandeja-page .kpi-content { display: grid; min-width: 0; gap: .14rem; }
.bandeja-page .kpi-label { color: #667085; font-size: .76rem; font-weight: 750; }
.bandeja-page .kpi-value { color: #101828; font-size: 1.55rem; line-height: 1; font-weight: 900; }
.bandeja-page .kpi-content small { color: #98a2b3; font-size: .69rem; line-height: 1.25; }
@media (max-width: 1450px) { .bandeja-page .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px) { .bandeja-page .kpi-grid { grid-template-columns: 1fr; } }


/* =========================
   SSDE DARK THEME
========================= */
.app-shell.theme-dark {
    --color-bg: #0b1220;
    --color-card: #111b2e;
    --color-text: #e7edf7;
    --color-muted: #94a3b8;
    --color-border: #273449;
    color-scheme: dark;
    background: var(--color-bg);
    color: var(--color-text);
}

.app-shell.theme-dark .app-main,
.app-shell.theme-dark .content-area {
    background: #0b1220 !important;
    color: #e7edf7 !important;
}

.app-shell.theme-dark .topbar {
    background: #0f1929 !important;
    border-color: #273449 !important;
}

.app-shell.theme-dark .topbar-title,
.app-shell.theme-dark .page-title,
.app-shell.theme-dark h1,
.app-shell.theme-dark h2,
.app-shell.theme-dark h3,
.app-shell.theme-dark h4,
.app-shell.theme-dark strong {
    color: #f1f5f9;
}

.app-shell.theme-dark .topbar-subtitle,
.app-shell.theme-dark .page-subtitle,
.app-shell.theme-dark small,
.app-shell.theme-dark p {
    color: #94a3b8;
}

.app-shell.theme-dark .icon-btn,
.app-shell.theme-dark .user-pill {
    background: #152238 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.app-shell.theme-dark .notification-dropdown,
.app-shell.theme-dark .help-chat-dropdown,
.app-shell.theme-dark .user-dropdown,
.app-shell.theme-dark .online-tech-dropdown {
    background: #111b2e !important;
    border-color: #334155 !important;
    color: #e7edf7 !important;
}

.app-shell.theme-dark input,
.app-shell.theme-dark select,
.app-shell.theme-dark textarea {
    background: #0f1929 !important;
    color: #e7edf7 !important;
    border-color: #334155 !important;
}

.app-shell.theme-dark input::placeholder,
.app-shell.theme-dark textarea::placeholder {
    color: #718096 !important;
}

.app-shell.theme-dark table,
.app-shell.theme-dark thead,
.app-shell.theme-dark tbody,
.app-shell.theme-dark tr,
.app-shell.theme-dark td,
.app-shell.theme-dark th {
    border-color: #273449 !important;
}

.app-shell.theme-dark thead,
.app-shell.theme-dark .enterprise-table thead {
    background: #101a2b !important;
}

.app-shell.theme-dark .workspace-panel,
.app-shell.theme-dark .filter-panel,
.app-shell.theme-dark .kpi-card,
.app-shell.theme-dark .detail-pane,
.app-shell.theme-dark .master-ticket-card,
.app-shell.theme-dark .technician-group,
.app-shell.theme-dark .portal-card,
.app-shell.theme-dark .ticket-card,
.app-shell.theme-dark .content-card,
.app-shell.theme-dark .info-card {
    background-color: #111b2e !important;
    color: #e7edf7 !important;
    border-color: #273449 !important;
}

.app-shell.theme-dark .filter-check,
.app-shell.theme-dark .detail-field,
.app-shell.theme-dark .master-pane,
.app-shell.theme-dark .technician-view,
.app-shell.theme-dark .table-responsive {
    background: #0f1929 !important;
    border-color: #273449 !important;
}

.app-shell.theme-dark .enterprise-table tbody tr:hover,
.app-shell.theme-dark .online-tech-row:hover,
.app-shell.theme-dark .notification-item:hover {
    background: #162238 !important;
}

.app-shell.theme-dark .app-footer {
    border-color: #273449 !important;
    color: #94a3b8 !important;
}

/* Mantiene controles superiores en una sola capa visual. */
.topbar-actions {
    position: relative;
    z-index: 200;
}

@media (max-width: 980px) {
    .topbar-actions {
        gap: 8px;
    }

    .theme-toggle-btn,
    .online-tech-btn,
    .icon-btn {
        flex: 0 0 auto;
    }
}


/* =========================================================
   SSDE TOPBAR HOTFIX 2026-08-10
   Mantiene los controles alineados y evita que los dropdowns
   hereden white-space: nowrap del contenedor superior.
   ========================================================= */
.ssde-topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .65rem !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.ssde-topbar-actions > .notification-box,
.ssde-topbar-actions > .help-chat-box,
.ssde-topbar-actions > .topbar-tech-host,
.ssde-topbar-actions > .user-menu-wrap {
    flex: 0 0 auto !important;
    width: auto !important;
}

.notification-dropdown,
.help-chat-dropdown,
.user-dropdown,
.online-tech-dropdown,
.presence-menu {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.notification-dropdown {
    width: min(380px, calc(100vw - 32px)) !important;
    overflow-x: hidden !important;
}

.notification-content,
.notification-item,
.notification-item p,
.notification-item strong {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.help-chat-dropdown {
    width: 280px !important;
    overflow: visible !important;
}

.help-chat-dropdown .global-chat-widget,
.help-chat-dropdown .global-chat-menu-item {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 920px) {
    .ssde-topbar-actions { gap: .4rem !important; }
    .user-pill > div { display: none; }
}

/* =========================================================
   SERVICE DESK ENTERPRISE UI 2026
   Lenguaje visual inspirado en suites operativas modernas:
   mayor densidad, jerarquía clara y superficies contenidas.
   ========================================================= */
.enterprise-shell {
    --enterprise-sidebar-width: 260px;
    --enterprise-topbar-height: 72px;
    --enterprise-surface: #ffffff;
    --enterprise-surface-soft: #f8fafc;
    --enterprise-canvas: #f3f6fa;
    --enterprise-border: #e2e8f0;
    --enterprise-text: #172033;
    --enterprise-muted: #667085;
    --enterprise-primary: var(--brand-primary, #143a66);
    --enterprise-primary-strong: #0b2a50;
    --enterprise-sidebar: var(--brand-sidebar, #18233f);
    --enterprise-radius: 12px;
    --enterprise-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .045);
    --color-bg: var(--enterprise-canvas);
    --color-card: var(--enterprise-surface);
    --color-text: var(--enterprise-text);
    --color-muted: var(--enterprise-muted);
    --color-border: var(--enterprise-border);
    --radius-lg: 12px;
    --radius-md: 9px;
    --shadow-card: var(--enterprise-shadow);
    background: var(--enterprise-canvas);
}

.enterprise-shell .app-sidebar {
    width: var(--enterprise-sidebar-width);
    padding: 0 12px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--enterprise-sidebar) 92%, #111827), var(--enterprise-sidebar));
    border-right: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 8px 0 28px rgba(15, 23, 42, .08);
}

.enterprise-shell .app-main {
    margin-left: var(--enterprise-sidebar-width);
    width: calc(100% - var(--enterprise-sidebar-width));
    background: var(--enterprise-canvas);
}

.enterprise-shell .brand-box {
    min-height: var(--enterprise-topbar-height);
    padding: 11px 10px;
    margin: 0 0 8px;
}

.enterprise-shell .brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .13);
}

.enterprise-shell .brand-logo img {
    max-width: 27px;
    max-height: 27px;
}

.enterprise-shell .brand-title {
    font-size: .92rem;
    letter-spacing: -.01em;
}

.enterprise-shell .brand-subtitle {
    max-width: 155px;
    overflow: hidden;
    font-size: .69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-shell .side-menu-label {
    padding: 10px 14px 6px;
    color: rgba(255, 255, 255, .43);
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.enterprise-shell .side-menu {
    gap: 3px;
    padding: 3px 3px 18px;
}

.enterprise-shell .side-link,
.enterprise-shell .side-sublink {
    min-height: 40px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 650;
}

.enterprise-shell .side-link {
    padding: 9px 11px;
}

.enterprise-shell .side-link:hover,
.enterprise-shell .side-sublink:hover {
    transform: none;
    background: rgba(255, 255, 255, .09);
}

.enterprise-shell .side-link.active,
.enterprise-shell .side-sublink.active {
    color: #fff;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 3px 0 0 var(--brand-secondary, #ffc300);
}

.enterprise-shell .side-submenu {
    gap: 2px;
    margin: 3px 0 6px 31px;
}

.enterprise-shell .side-sublink {
    min-height: 35px;
    padding: 7px 10px;
    font-size: .77rem;
}

.enterprise-shell .side-subtext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-shell .sidebar-system-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 8px 3px 0;
    padding: 10px 11px;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
}

.enterprise-shell .sidebar-system-status > div {
    min-width: 0;
}

.enterprise-shell .sidebar-system-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #35d07f;
    box-shadow: 0 0 0 4px rgba(53, 208, 127, .12);
}

.enterprise-shell .sidebar-system-status strong,
.enterprise-shell .sidebar-system-status small,
.enterprise-shell .sidebar-system-status > div > span {
    display: block;
}

.enterprise-shell .sidebar-system-status strong {
    max-width: 175px;
    overflow: hidden;
    color: #fff;
    font-size: .68rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-shell .sidebar-system-status small {
    color: rgba(255, 255, 255, .5);
    font-size: .58rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.enterprise-shell .sidebar-system-status > div > span {
    margin-top: 2px;
    color: rgba(255, 255, 255, .48);
    font-size: .58rem;
}

.enterprise-shell .sidebar-developer-mark {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: #12233d;
    background: var(--brand-secondary, #ffc300);
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 900;
}

.enterprise-shell .topbar {
    height: var(--enterprise-topbar-height);
    min-height: var(--enterprise-topbar-height);
    padding: 0 24px;
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--enterprise-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
    backdrop-filter: blur(14px);
}

.enterprise-shell .topbar-title {
    color: var(--enterprise-text);
    font-size: 1rem;
    font-weight: 780;
}

.enterprise-shell .topbar-subtitle {
    margin-top: 2px;
    font-size: .7rem;
}

.enterprise-shell .ssde-topbar-actions {
    gap: .48rem !important;
}

.enterprise-shell .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1rem;
    color: #475467;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.enterprise-shell .icon-btn:hover {
    color: var(--enterprise-primary);
    background: #f8fafc;
    border-color: #cbd5e1;
}

.enterprise-shell .user-pill {
    min-height: 42px;
    padding: 4px 11px 4px 5px;
    border-radius: 11px;
}

.enterprise-shell .user-avatar {
    width: 32px;
    height: 32px;
    font-size: .78rem;
}

.enterprise-shell .user-pill strong {
    max-width: 180px;
    overflow: hidden;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-shell .user-pill small {
    margin-top: 1px;
    font-size: .65rem;
}

.enterprise-shell .content-area {
    padding: 22px 24px;
}

.enterprise-shell .notification-dropdown,
.enterprise-shell .help-chat-dropdown,
.enterprise-shell .user-dropdown,
.enterprise-shell .online-tech-dropdown {
    border-radius: var(--enterprise-radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .15);
}

.enterprise-shell .app-footer {
    margin-top: 24px;
    padding-top: 18px;
    font-size: .72rem;
}

.enterprise-shell .panel,
.enterprise-shell .form-panel,
.enterprise-shell .ticket-hero,
.enterprise-shell .ticket-tabs,
.enterprise-shell .side-panel-card {
    border-color: var(--enterprise-border);
    border-radius: var(--enterprise-radius);
    box-shadow: var(--enterprise-shadow);
}

.enterprise-shell .panel,
.enterprise-shell .form-panel,
.enterprise-shell .ticket-hero,
.enterprise-shell .side-panel-card {
    padding: 18px;
}

.enterprise-shell .ticket-workspace {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
}

.enterprise-shell .ticket-hero {
    margin-bottom: 12px;
}

.enterprise-shell .ticket-hero h1 {
    margin: 7px 0 5px;
    font-size: 1.35rem;
    font-weight: 820;
}

.enterprise-shell .ticket-hero p {
    font-size: .82rem;
}

.enterprise-shell .ticket-tabs {
    gap: 3px;
    margin-bottom: 12px;
    padding: 5px;
}

.enterprise-shell .ticket-tab {
    padding: 8px 11px;
    border-radius: 8px;
    font-size: .76rem;
}

.enterprise-shell .ticket-tab.active {
    box-shadow: 0 4px 10px rgba(20, 58, 102, .14);
}

.enterprise-shell .ticket-side-panel {
    top: calc(var(--enterprise-topbar-height) + 12px);
    gap: 12px;
}

.enterprise-shell .side-panel-card h3 {
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 820;
}

.enterprise-shell .side-info-row {
    padding: 8px 0;
}

.enterprise-shell .summary-grid {
    gap: 10px;
}

.enterprise-shell .summary-card {
    padding: 13px;
    border-radius: 9px;
}

.enterprise-shell .btn-primary,
.enterprise-shell .btn-secondary {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: .78rem;
}

.enterprise-shell .form-control,
.enterprise-shell .form-select {
    min-height: 40px;
    border-radius: 8px;
    font-size: .82rem;
}

.enterprise-shell .my-tickets-page,
.enterprise-shell .ticket-wizard-page {
    gap: .9rem;
}

.enterprise-shell .my-tickets-hero,
.enterprise-shell .wizard-hero {
    margin-bottom: .9rem;
}

.enterprise-shell .my-tickets-hero h1,
.enterprise-shell .wizard-hero h1 {
    font-size: 1.65rem;
    font-weight: 820;
    letter-spacing: -.035em;
}

.enterprise-shell .ticket-kpi-grid,
.enterprise-shell .wizard-steps {
    gap: .6rem;
}

.enterprise-shell .ticket-kpi,
.enterprise-shell .tickets-filter-card,
.enterprise-shell .ticket-card,
.enterprise-shell .wizard-card,
.enterprise-shell .wizard-step {
    border-color: var(--enterprise-border);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 6px 16px rgba(15, 23, 42, .025);
}

.enterprise-shell .ticket-kpi {
    min-height: 76px;
    padding: .72rem .8rem;
}

.enterprise-shell .tickets-filter-card,
.enterprise-shell .wizard-card {
    padding: 1rem;
}

.enterprise-shell.theme-dark {
    --enterprise-surface: #111b2e;
    --enterprise-surface-soft: #0f1929;
    --enterprise-canvas: #0b1220;
    --enterprise-border: #273449;
    --enterprise-text: #f1f5f9;
    --enterprise-muted: #94a3b8;
}

.enterprise-shell.theme-dark .topbar {
    background: rgba(15, 25, 41, .96) !important;
}

.enterprise-shell.theme-dark .panel,
.enterprise-shell.theme-dark .form-panel,
.enterprise-shell.theme-dark .ticket-hero,
.enterprise-shell.theme-dark .ticket-tabs,
.enterprise-shell.theme-dark .side-panel-card,
.enterprise-shell.theme-dark .tickets-filter-card,
.enterprise-shell.theme-dark .ticket-card,
.enterprise-shell.theme-dark .wizard-card,
.enterprise-shell.theme-dark .wizard-step,
.enterprise-shell.theme-dark .ticket-kpi {
    color: #e7edf7;
    background: #111b2e;
    border-color: #273449;
}

.enterprise-shell.theme-dark .summary-card {
    background: #0f1929;
    border-color: #273449;
}

@media (min-width: 901px) {
    .enterprise-shell .app-sidebar {
        transform: translateX(0);
    }
}

@media (max-width: 900px) {
    .enterprise-shell .app-main {
        width: 100%;
        margin-left: 0;
    }

    .enterprise-shell .content-area {
        padding: 18px;
    }

    .enterprise-shell .sidebar-system-status {
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {
    .enterprise-shell .topbar {
        padding: 0 12px;
    }

    .enterprise-shell .content-area {
        padding: 12px;
    }

    .enterprise-shell .topbar-brand-copy {
        display: none;
    }
}

/* =========================================================
   CONTRAST + WORKSPACE FOLLOW-UP 2026-08-11
   Ajustes puntuales basados en las vistas reales de operación.
   ========================================================= */

/* Portal técnico y Kanban */
.enterprise-shell.theme-dark :is(
    .portal-tecnico-page .kpi-card,
    .portal-tecnico-page .portal-tabs,
    .portal-tecnico-page .ticket-work-panel,
    .portal-tecnico-page .kanban-workspace,
    .portal-tecnico-page .loading-card,
    .portal-tecnico-page .empty-state
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .portal-header h1,
    .portal-tecnico-page .kpi-card strong:not(.danger):not(.warning):not(.info),
    .portal-tecnico-page .kanban-header h3,
    .portal-tecnico-page .kanban-column-header h4,
    .portal-tecnico-page .kanban-card h5,
    .portal-tecnico-page .ticket-card h3
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark :is(
    .portal-header p,
    .portal-tecnico-page .kpi-label,
    .portal-tecnico-page .kanban-header span,
    .portal-tecnico-page .kanban-column-header span,
    .portal-tecnico-page .kanban-card-meta,
    .portal-tecnico-page .kanban-card-footer,
    .portal-tecnico-page .ticket-meta,
    .portal-tecnico-page .ticket-small
) {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark .portal-tecnico-page :is(.search-box, .filter-select) {
    color: #f1f5f9 !important;
    background: #0d1727 !important;
    border-color: #3a4a61 !important;
}

.enterprise-shell .portal-tecnico-page .kanban-workspace,
.enterprise-shell .portal-tecnico-page .kanban-board {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.enterprise-shell .portal-tecnico-page .kanban-workspace {
    overflow: hidden;
}

/* Correo POP3, bandeja y SMTP */
.enterprise-shell.theme-dark :is(
    .mail-in-card,
    .mail-box-hero,
    .mail-box-filters,
    .mail-list-card,
    .mail-detail-card,
    .smtp-config-hero,
    .smtp-config-card,
    .smtp-loading-card
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .mail-in-card h1,
    .mail-box-hero h1,
    .mail-detail-head h2,
    .mail-row-top strong,
    .mail-subject,
    .smtp-config-hero h1,
    .smtp-config-card h3
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark :is(
    .mail-in-card p,
    .mail-box-hero p,
    .mail-detail-head p,
    .mail-row-meta,
    .smtp-config-hero p,
    .smtp-config-card p,
    .smtp-config-page .help-text
) {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark .mail-box-page .mail-row {
    color: #cbd5e1 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .mail-box-page .mail-row:hover,
.enterprise-shell.theme-dark .mail-box-page .mail-row.active {
    background: #172844 !important;
    border-color: #5578a6 !important;
}

.enterprise-shell.theme-dark .mail-detail-grid > div {
    color: #cbd5e1 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell .mail-box-page :is(.mail-box-hero, .mail-actions-top, .mail-box-filters, .mail-box-layout) {
    max-width: 100%;
    min-width: 0;
}

.enterprise-shell .mail-box-page .mail-actions-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

/* Automatizaciones */
.enterprise-shell.theme-dark :is(
    .auto-page .auto-hero,
    .auto-page .tabs
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .auto-page .auto-hero h1,
    .auto-page .panel h2,
    .auto-page .rule-card h3,
    .auto-page .kpi-card strong,
    .auto-page .auto-table td
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark :is(
    .auto-page .auto-hero p,
    .auto-page .panel-title p,
    .auto-page .kpi-card span,
    .auto-page .kpi-card small,
    .auto-page .field small,
    .auto-page .switch-card small,
    .auto-page .auto-table small,
    .auto-page .auto-table th
) {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark .auto-page .auto-table th {
    background: #162238 !important;
}

/* Identidad comercial: los estados claros mantienen texto oscuro legible. */
.enterprise-shell.theme-dark .license-status.ok,
.enterprise-shell.theme-dark .license-status.ok :is(h2, p, span, strong) {
    color: #065f46 !important;
}

.enterprise-shell.theme-dark .license-status.warning,
.enterprise-shell.theme-dark .license-status.warning :is(h2, p, span, strong) {
    color: #92400e !important;
}

.enterprise-shell.theme-dark .license-status.danger,
.enterprise-shell.theme-dark .license-status.danger :is(h2, p, span, strong) {
    color: #991b1b !important;
}

.enterprise-shell.theme-dark .license-counts > div {
    background: rgba(255, 255, 255, .74) !important;
}

/* Detalle de ticket y asignación inteligente. */
.enterprise-shell.theme-dark .auto-assign-card {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .auto-assign-head h3,
    .auto-assign-grid strong
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark :is(
    .auto-assign-label,
    .auto-assign-grid span
) {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark .auto-assign-motive {
    color: #bfdbfe !important;
    background: #172844 !important;
    border-color: #315b8d !important;
}

/* Con sidebar, un viewport de laptop necesita una sola columna antes. */
@media (max-width: 1450px) {
    .enterprise-shell .ticket-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .enterprise-shell .ticket-work-main {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    .enterprise-shell .ticket-side-panel {
        position: static;
        order: 2;
        width: 100%;
        min-width: 0;
    }

    .enterprise-shell .mail-box-hero,
    .enterprise-shell .kb-hero {
        flex-wrap: wrap;
    }
}

@media (max-width: 1100px) {
    .enterprise-shell .mail-box-page .mail-box-layout,
    .enterprise-shell .smtp-config-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .enterprise-shell .smtp-config-card.wide {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .enterprise-shell .ticket-workspace,
    .enterprise-shell .ticket-work-main,
    .enterprise-shell .ticket-side-panel,
    .enterprise-shell .ticket-hero,
    .enterprise-shell .ticket-tabs,
    .enterprise-shell .side-panel-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .enterprise-shell .ticket-hero h1 {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none;
    }

    .enterprise-shell .ticket-hero-actions,
    .enterprise-shell .mail-actions-top,
    .enterprise-shell .smtp-config-actions,
    .enterprise-shell .hero-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .enterprise-shell .mail-box-filters {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .enterprise-shell .portal-tecnico-page {
        padding: 0;
    }

    .enterprise-shell .portal-tecnico-page .kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Dashboard y superficies operativas */
.enterprise-shell .bandeja-page {
    gap: .9rem;
}

.enterprise-shell .bandeja-page .page-heading h1 {
    margin: .1rem 0 .18rem;
    font-size: clamp(1.55rem, 2vw, 1.85rem);
    font-weight: 820;
    letter-spacing: -.035em;
}

.enterprise-shell .bandeja-page .page-heading p {
    font-size: .84rem;
}

.enterprise-shell .bandeja-page .btn-refresh,
.enterprise-shell .bandeja-page .btn-new-ticket,
.enterprise-shell .bandeja-page .btn-open-detail {
    min-height: 40px;
    padding: .58rem .82rem;
    border-radius: 9px;
    font-size: .78rem;
    box-shadow: none;
}

.enterprise-shell .bandeja-page .kpi-grid {
    gap: .6rem;
}

.enterprise-shell .bandeja-page .kpi-card {
    min-height: 78px;
    gap: .65rem;
    padding: .72rem .78rem;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 6px 16px rgba(15, 23, 42, .025);
}

.enterprise-shell .bandeja-page .kpi-card:hover {
    border-color: #a9b9cd;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
    transform: none;
}

.enterprise-shell .bandeja-page .kpi-card.active {
    border-color: #5b7da8;
    box-shadow: inset 0 0 0 1px #5b7da8;
}

.enterprise-shell .bandeja-page .kpi-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 9px;
    font-size: .95rem;
}

.enterprise-shell .bandeja-page .kpi-value {
    font-size: 1.35rem;
    font-weight: 850;
}

.enterprise-shell .bandeja-page .filter-panel,
.enterprise-shell .bandeja-page .workspace-panel {
    border-color: #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 8px 20px rgba(15, 23, 42, .035);
}

.enterprise-shell .bandeja-page .filter-panel {
    top: calc(var(--enterprise-topbar-height) + 8px);
    padding: .9rem;
}

.enterprise-shell .bandeja-page .filter-panel-header {
    margin-bottom: .75rem;
}

.enterprise-shell .bandeja-page .filter-panel-header h2 {
    font-size: .96rem;
}

.enterprise-shell .bandeja-page .filter-panel-header p {
    font-size: .75rem;
}

.enterprise-shell .bandeja-page .filter-result-count strong {
    font-size: 1.25rem;
}

.enterprise-shell .bandeja-page .filter-grid {
    gap: .6rem;
}

.enterprise-shell .bandeja-page .filter-field {
    gap: .28rem;
}

.enterprise-shell .bandeja-page .filter-control {
    min-height: 38px;
    padding: .52rem .66rem;
    border-radius: 8px;
    font-size: .78rem;
}

.enterprise-shell .bandeja-page .filter-control.with-icon {
    padding-left: 2.1rem;
}

.enterprise-shell .bandeja-page .filter-options {
    gap: .5rem;
    margin-top: .7rem;
    padding-top: .7rem;
}

.enterprise-shell .bandeja-page .filter-check {
    min-height: 42px;
    padding: .52rem .62rem;
    border-radius: 8px;
}

.enterprise-shell .bandeja-page .filter-check small {
    display: none;
}

.enterprise-shell .bandeja-page .workspace-header {
    padding: .85rem 1rem;
}

.enterprise-shell .bandeja-page .view-switcher {
    padding: 3px;
    border-radius: 9px;
}

.enterprise-shell .bandeja-page .view-btn {
    min-height: 34px;
    padding: .42rem .66rem;
    border-radius: 7px;
    font-size: .73rem;
}

.enterprise-shell .bandeja-page .enterprise-table th {
    padding: .68rem .8rem;
    font-size: .64rem;
}

.enterprise-shell .bandeja-page .enterprise-table td {
    padding: .72rem .8rem;
    font-size: .75rem;
}

.enterprise-shell .bandeja-page .btn-row-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.enterprise-shell.theme-dark .home-kpi-card,
.enterprise-shell.theme-dark .home-section-card,
.enterprise-shell.theme-dark .home-ticket-card,
.enterprise-shell.theme-dark .home-ticket-side,
.enterprise-shell.theme-dark .user-action-card,
.enterprise-shell.theme-dark .home-loading,
.enterprise-shell.theme-dark .home-empty {
    color: #e7edf7;
    background: #111b2e;
    border-color: #273449;
}

.enterprise-shell.theme-dark .home-ticket-card:hover,
.enterprise-shell.theme-dark .user-action-card:hover {
    background: #162238;
    border-color: #48617f;
}

.enterprise-shell.theme-dark .home-ticket-meta span,
.enterprise-shell.theme-dark .home-ticket-side {
    background: #0f1929;
    border-color: #273449;
}

.enterprise-shell.theme-dark .home-eyebrow,
.enterprise-shell.theme-dark .home-ticket-code {
    color: #8fb4e5;
}

.enterprise-shell.theme-dark .home-kpi-card span,
.enterprise-shell.theme-dark .home-kpi-card small,
.enterprise-shell.theme-dark .home-section-header span,
.enterprise-shell.theme-dark .home-ticket-meta span,
.enterprise-shell.theme-dark .user-action-card span {
    color: #94a3b8;
}

.enterprise-shell.theme-dark .bandeja-page .filter-panel,
.enterprise-shell.theme-dark .bandeja-page .workspace-panel,
.enterprise-shell.theme-dark .bandeja-page .kpi-card {
    background: #111b2e;
    border-color: #273449;
}

.enterprise-shell.theme-dark .bandeja-page .filter-check,
.enterprise-shell.theme-dark .bandeja-page .view-switcher {
    background: #0f1929;
    border-color: #273449;
}

@media (max-width: 1450px) {
    .enterprise-shell .bandeja-page .filter-grid {
        grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(135px, 1fr));
    }
}

@media (max-width: 1050px) {
    .enterprise-shell .bandeja-page .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .enterprise-shell .bandeja-page .filter-panel {
        position: static;
    }

    .enterprise-shell .bandeja-page .filter-grid {
        grid-template-columns: 1fr;
    }

    .enterprise-shell .bandeja-page .filter-check small {
        display: block;
    }
}

/* =========================================================
   DARK THEME CONTRAST AUDIT 2026-08-11
   Superficies aisladas que originalmente estaban fijadas a blanco.
   ========================================================= */
.enterprise-shell.theme-dark .presence-btn,
.enterprise-shell.theme-dark .online-tech-btn {
    color: #e7edf7 !important;
    background: #152238 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .presence-menu,
.enterprise-shell.theme-dark .online-tech-dropdown {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .presence-menu button,
.enterprise-shell.theme-dark .online-tech-row strong,
.enterprise-shell.theme-dark .online-tech-header strong {
    color: #e7edf7 !important;
}

.enterprise-shell.theme-dark .presence-connection-row,
.enterprise-shell.theme-dark .online-tech-row small,
.enterprise-shell.theme-dark .online-tech-empty {
    color: #94a3b8 !important;
    border-color: #273449 !important;
}

.enterprise-shell.theme-dark .presence-menu button:hover,
.enterprise-shell.theme-dark .online-tech-row:hover {
    background: #162238 !important;
}

.enterprise-shell.theme-dark :is(
    .dashboard-filter-card,
    .dashboard-kpi-card,
    .dashboard-loading,
    .critical-card,
    .performance-card,
    .performance-mobile-card,
    .serie-card,
    .chart-card,
    .assign-follow-header,
    .assign-follow-filters,
    .assign-follow-panel,
    .assign-follow-kpis,
    .users-toolbar,
    .users-list-card,
    .user-form-card,
    .profile-card,
    .password-card,
    .permission-loading,
    .permission-denied,
    .rule-modal,
    .kb-ticket-modal
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #273449 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

.enterprise-shell.theme-dark :is(
    .critical-row,
    .critical-empty,
    .performance-empty,
    .performance-table tbody tr,
    .performance-mobile-grid > div,
    .serie-empty,
    .chart-empty,
    .assign-follow-kpis > div,
    .reason-row td,
    .empty-state,
    .user-row,
    .users-empty,
    .password-rule-pending
) {
    color: #cbd5e1 !important;
    background: #0f1929 !important;
    border-color: #273449 !important;
}

.enterprise-shell.theme-dark .user-row:hover,
.enterprise-shell.theme-dark .user-row.active {
    background: #172844 !important;
    border-color: #5578a6 !important;
}

.enterprise-shell.theme-dark :is(
    .dashboard-header h1,
    .dashboard-kpi-card strong,
    .critical-head h3,
    .critical-main strong,
    .performance-header h3,
    .performance-table td,
    .performance-mobile-header strong,
    .performance-mobile-grid strong,
    .serie-card-header h3,
    .serie-line strong,
    .chart-card-header h3,
    .assign-follow-header h1,
    .assign-follow-kpis strong,
    .ticket-cell strong,
    .users-header h1,
    .users-list-header h3,
    .user-form-header h3,
    .user-row-main strong,
    .rule-modal-header h3
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark :is(
    .dashboard-header p,
    .filter-item label,
    .dashboard-kpi-card span,
    .critical-head span,
    .critical-main small,
    .performance-header span,
    .performance-table th,
    .performance-mobile-header span,
    .performance-mobile-grid span,
    .tech-cell span,
    .serie-card-header span,
    .serie-line span,
    .chart-card-header span,
    .assign-follow-header p,
    .assign-follow-kpis span,
    .assign-follow-table th,
    .ticket-cell small,
    .users-header p,
    .users-list-header span,
    .user-form-header span,
    .user-row-main span,
    .user-row-main small,
    .form-group label
) {
    color: #94a3b8 !important;
}

.enterprise-shell.theme-dark :is(
    .filter-item input,
    .dashboard-select,
    .users-toolbar input,
    .form-group input,
    .form-group select,
    .form-group textarea
) {
    color: #e7edf7 !important;
    background: #0d1727 !important;
    border-color: #3a4a61 !important;
}

.enterprise-shell.theme-dark :is(
    .filter-item input,
    .dashboard-select,
    .users-toolbar input,
    .form-group input,
    .form-group select,
    .form-group textarea
):focus {
    color: #fff !important;
    background: #101c2f !important;
    border-color: #6f94c4 !important;
    box-shadow: 0 0 0 3px rgba(111, 148, 196, .14) !important;
}

.enterprise-shell.theme-dark .assign-follow-table td {
    color: #cbd5e1 !important;
    border-color: #273449 !important;
}

.enterprise-shell.theme-dark .assign-follow-table th,
.enterprise-shell.theme-dark .assign-follow-table td,
.enterprise-shell.theme-dark .performance-table th,
.enterprise-shell.theme-dark .performance-table td {
    border-color: #273449 !important;
}

.enterprise-shell.theme-dark .sla-progress-text,
.enterprise-shell.theme-dark .check-row,
.enterprise-shell.theme-dark .users-check,
.enterprise-shell.theme-dark .form-checks {
    color: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .apexcharts-text,
.enterprise-shell.theme-dark .apexcharts-text tspan,
.enterprise-shell.theme-dark .apexcharts-legend-text,
.enterprise-shell.theme-dark .apexcharts-datalabel-label,
.enterprise-shell.theme-dark .apexcharts-datalabel-value {
    color: #cbd5e1 !important;
    fill: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .apexcharts-gridline,
.enterprise-shell.theme-dark .apexcharts-xaxis line,
.enterprise-shell.theme-dark .apexcharts-yaxis line {
    stroke: #334155 !important;
}

/* Conversación, adjuntos y editor del ticket */
.enterprise-shell.theme-dark :is(
    .portal-message-bubble,
    .message-attachment,
    .reply-start,
    .reply-box,
    .reply-selected-files,
    .user-info-card,
    .sla-user-info,
    .user-tech-card,
    .user-reopen-form,
    .user-reopen-message,
    .user-rating-form,
    .user-rating-saved,
    .rating-user-btn,
    .auto-assign-grid > div,
    .chat-empty,
    .chat-bubble,
    .chat-team-pill,
    .tech-presence-card,
    .attachment-enterprise-card,
    .reply-email-options
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .portal-message-support .portal-message-bubble,
.enterprise-shell.theme-dark .portal-message-internal .portal-message-bubble {
    background: #162238 !important;
}

.enterprise-shell.theme-dark .portal-message-mine .portal-message-bubble,
.enterprise-shell.theme-dark .ticket-chat-message.mine .chat-bubble {
    background: #17345c !important;
    border-color: #315b8d !important;
}

.enterprise-shell.theme-dark .ticket-message-body,
.enterprise-shell.theme-dark .ticket-message-body :is(p, div, span, section, article, td, th, li),
.enterprise-shell.theme-dark .portal-message-bubble :is(p, div, span, section, article, td, th, li) {
    color: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .ticket-message-body a,
.enterprise-shell.theme-dark .portal-message-bubble a {
    color: #8fbff5 !important;
}

.enterprise-shell.theme-dark .rich-editor-wrapper,
.enterprise-shell.theme-dark .rich-editor-wrapper .ql-toolbar,
.enterprise-shell.theme-dark .rich-editor-wrapper .ql-container,
.enterprise-shell.theme-dark .rich-editor-wrapper .ql-editor {
    color: #e7edf7 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .rich-editor-wrapper .ql-stroke {
    stroke: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .rich-editor-wrapper .ql-fill {
    fill: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .rich-editor-wrapper .ql-picker,
.enterprise-shell.theme-dark .rich-editor-wrapper .ql-picker-label {
    color: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .attachment-card-visual,
.enterprise-shell.theme-dark .attachment-card-visual img {
    background: #0b1422 !important;
}

.enterprise-shell.theme-dark .password-help-box {
    color: #c7d7f2 !important;
    background: #172844 !important;
    border-color: #355983 !important;
}

/* Resto de módulos: Kanban, correo, conocimiento, catálogos y reportes. */
.enterprise-shell.theme-dark :is(
    .kanban-column,
    .kanban-summary,
    .kanban-column-head,
    .smtp-config-card,
    .smtp-loading-card,
    .mail-in-card,
    .mail-config-card,
    .mail-preview-modal,
    .mail-config-hero,
    .mail-detail-card,
    .articles-panel,
    .hero-search,
    .article-detail,
    .assign-panel,
    .rag-panel,
    .kb-loading,
    .permissions-card,
    .permissions-toolbar,
    .services-loading,
    .tech-skill-form-card,
    .service-detail-card,
    .service-summary-card,
    .rules-form-card,
    .reports-kpi,
    .reports-loading,
    .satisfaction-kpi,
    .satisfaction-alert,
    .metric-card,
    .global-chat-modal,
    .global-chat-session-tabs,
    .global-chat-compose,
    .global-chat-form-card,
    .global-chat-toast
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #273449 !important;
}

.enterprise-shell.theme-dark :is(
    .kanban-card,
    .kanban-empty,
    .workflow-empty,
    .mail-row,
    .mail-attachment-card,
    .embedded-resource-item,
    .mail-body-preview,
    .article-card,
    .catalog-list button,
    .ticket-links a,
    .version-row,
    .rule-card,
    .global-chat-session,
    .global-chat-empty,
    .global-chat-help-item,
    .global-chat-file
) {
    color: #cbd5e1 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .global-chat-bubble,
    .global-chat-image-link
) {
    color: #e7edf7 !important;
    background: #162238 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .global-chat-message.mine .global-chat-bubble {
    background: #17345c !important;
    border-color: #315b8d !important;
}

.enterprise-shell.theme-dark :is(
    .kanban-card,
    .mail-row,
    .article-card,
    .catalog-list button,
    .version-row,
    .rule-card
):hover {
    background: #162238 !important;
}

.enterprise-shell.theme-dark :is(
    .mail-preview-body iframe,
    .attachment-preview-pdf
) {
    background: #fff !important;
}

/* =========================================================
   SECURITY + RESPONSIVE AUDIT 2026-08-11
   Normaliza los módulos administrativos que usan CSS aislado
   y contiene cualquier ancho de escritorio dentro del viewport.
   ========================================================= */
html,
body,
#app,
.app-shell,
.app-main,
.content-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

html,
body {
    overflow-x: hidden;
}

.app-shell {
    overflow-x: clip;
}

.app-main,
.content-area,
.content-area > *,
.content-area :is(section, article, form, fieldset, header, footer, nav, div) {
    min-width: 0;
}

.content-area > * {
    max-width: 100%;
}

.content-area img,
.content-area video,
.content-area canvas,
.content-area svg,
.content-area iframe {
    max-width: 100%;
}

.content-area :is(.table-responsive, .table-wrap, .audit-table-wrap, .permissions-table-wrap) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.enterprise-shell.theme-dark :is(
    .mail-config-page,
    .rules-page,
    .tech-skill-page,
    .sla-page,
    .kb-page,
    .assign-config-page,
    .services-page,
    .audit-page,
    .auto-page,
    .brand-admin,
    .permissions-page,
    .users-page
) {
    color: #e7edf7 !important;
}

/* Superficies principales de Seguridad y configuración de correo. */
.enterprise-shell.theme-dark :is(
    .mail-config-hero,
    .mail-config-card,
    .rules-hero,
    .rules-list-card,
    .rules-form-card,
    .tech-skill-hero,
    .tech-skill-list-card,
    .tech-skill-form-card,
    .sla-hero,
    .sla-page .panel,
    .sla-page .kpi-card,
    .sla-page .tabs,
    .kb-hero,
    .kb-page .kpi-card,
    .kb-tabs,
    .kb-list-panel,
    .kb-editor-panel,
    .kb-page .panel,
    .catalog-editor,
    .catalog-list-card,
    .rag-panel,
    .assign-config-header,
    .assign-panel,
    .services-header,
    .service-summary-card,
    .service-detail-card,
    .audit-kpis article,
    .audit-security-config,
    .audit-filters,
    .audit-card,
    .audit-loading,
    .audit-modal,
    .auto-page .panel,
    .auto-page .kpi-card,
    .brand-card,
    .brand-loading,
    .permissions-toolbar,
    .permissions-card,
    .users-toolbar,
    .users-list-card,
    .user-form-card,
    .presence-current-grid + *,
    .presence-metrics + .panel,
    .presence-metrics + .panel + .panel
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #2b3a51 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14) !important;
}

/* Tarjetas y controles secundarios dentro de esas superficies. */
.enterprise-shell.theme-dark :is(
    .rule-row,
    .rule-card,
    .rules-page .check-row,
    .skill-row,
    .tech-skill-page .check-row,
    .mode-card,
    .switch-row,
    .switch-card,
    .behavior-box,
    .flow-step,
    .subsection-card,
    .article-item,
    .catalog-list button,
    .version-row,
    .service-info-grid > div,
    .service-message-box,
    .sla-page .rule-times > div,
    .sla-page .schedule-row,
    .sla-page .holiday-row,
    .audit-table tbody tr,
    .audit-modal .detail-grid > div,
    .auto-page .rule-card,
    .auto-page .switch-card,
    .permissions-table tbody tr,
    .presence-card,
    .app-table tbody tr
) {
    color: #cbd5e1 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .skill-row.active,
    .mode-card.active,
    .article-item.active,
    .catalog-list button.active,
    .sla-page .tab.active,
    .permissions-table tbody tr:hover,
    .audit-table tbody tr:hover,
    .app-table tbody tr:hover
) {
    color: #f8fafc !important;
    background: #172844 !important;
    border-color: #5578a6 !important;
}

.enterprise-shell.theme-dark :is(
    .mail-config-page,
    .rules-page,
    .tech-skill-page,
    .sla-page,
    .kb-page,
    .assign-config-page,
    .services-page,
    .audit-page,
    .auto-page,
    .brand-admin,
    .permissions-page,
    .users-page
) :is(h1, h2, h3, h4, legend),
.enterprise-shell.theme-dark :is(
    .skill-row strong,
    .mode-card strong,
    .switch-row strong,
    .article-item strong,
    .service-main-value,
    .audit-kpis strong,
    .audit-table td,
    .permissions-table td,
    .app-table td
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark :is(
    .mail-config-page,
    .rules-page,
    .tech-skill-page,
    .sla-page,
    .kb-page,
    .assign-config-page,
    .services-page,
    .audit-page,
    .auto-page,
    .brand-admin,
    .permissions-page,
    .users-page
) :is(p, label, small, .help-text, .panel-title span),
.enterprise-shell.theme-dark :is(
    .skill-row span,
    .skill-row small,
    .mode-card small,
    .switch-row small,
    .audit-kpis span,
    .audit-card header span,
    .audit-table th,
    .permissions-table th,
    .app-table th,
    .presence-card small
) {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark :is(
    .mail-config-page,
    .rules-page,
    .tech-skill-page,
    .sla-page,
    .kb-page,
    .assign-config-page,
    .services-page,
    .audit-page,
    .auto-page,
    .brand-admin,
    .permissions-page,
    .users-page,
    .panel
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea),
.enterprise-shell.theme-dark .form-control {
    color: #f1f5f9 !important;
    background-color: #0d1727 !important;
    border-color: #3a4a61 !important;
}

.enterprise-shell.theme-dark :is(input, select, textarea)::placeholder {
    color: #70849f !important;
    opacity: 1;
}

.enterprise-shell.theme-dark :is(
    .audit-table th,
    .permissions-table th,
    .app-table th
) {
    background: #162238 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .audit-table td,
    .permissions-table td,
    .app-table td
) {
    border-color: #2b3a51 !important;
}

/* Permisos de menú: las celdas tienen fondo propio en su CSS aislado.
   Se sincronizan aquí para evitar texto claro sobre una fila blanca. */
.enterprise-shell.theme-dark .permissions-table tbody td {
    color: #e7edf7 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .permissions-table .menu-parent-row td {
    color: #f8fafc !important;
    background: #172844 !important;
    border-color: #45658d !important;
}

.enterprise-shell.theme-dark .permissions-table .menu-name,
.enterprise-shell.theme-dark .permissions-table .menu-name strong {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark .permissions-table .menu-name > span {
    color: #dbeafe !important;
    background: #203757 !important;
    border: 1px solid #36577f;
}

.enterprise-shell.theme-dark .permissions-table .menu-url {
    color: #a9bad0 !important;
}

/* Los estados conservan su semántica y contraste sobre fondos oscuros. */
.enterprise-shell.theme-dark :is(.skill-tip, .rules-tip, .rule-example, .service-help-box) {
    color: #fed7aa !important;
    background: #3a2414 !important;
    border-color: #9a5b24 !important;
}

.enterprise-shell.theme-dark :is(.skill-tip strong, .skill-tip span, .rules-tip strong, .rules-tip span, .rule-example strong, .rule-example span) {
    color: #fed7aa !important;
}

@media (max-width: 900px) {
    .enterprise-shell,
    .enterprise-shell .app-main,
    .enterprise-shell .content-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    .enterprise-shell .app-sidebar {
        width: min(300px, 88vw) !important;
    }

    .enterprise-shell .topbar {
        width: 100%;
        min-width: 0;
    }

    .enterprise-shell .ssde-topbar-actions {
        min-width: 0 !important;
        gap: 5px !important;
    }

    .enterprise-shell .content-area {
        padding: 14px;
    }

    .enterprise-shell :is(
        .audit-page,
        .auto-page,
        .brand-admin,
        .kb-page,
        .sla-page
    ) {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .enterprise-shell :is(
        .rules-layout,
        .tech-skill-layout,
        .assign-grid,
        .services-detail-grid,
        .kb-workspace,
        .users-layout,
        .brand-grid.two-columns,
        .brand-grid.resources-grid,
        .preview-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .enterprise-shell .topbar {
        min-height: 60px;
        height: 60px;
        padding: 0 8px;
        gap: 5px;
    }

    .enterprise-shell .mobile-menu-btn,
    .enterprise-shell .icon-btn,
    .enterprise-shell .online-tech-btn,
    .enterprise-shell .presence-btn,
    .enterprise-shell .user-pill {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 9px !important;
    }

    .enterprise-shell .mobile-menu-btn {
        margin-right: 3px;
        font-size: 18px;
    }

    .enterprise-shell .presence-btn {
        display: grid;
        place-items: center;
    }

    .enterprise-shell .presence-btn strong,
    .enterprise-shell .presence-btn .presence-link-state,
    .enterprise-shell .user-menu-wrap .user-pill > div {
        display: none !important;
    }

    .enterprise-shell .user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .enterprise-shell .content-area {
        padding: 10px;
    }

    .enterprise-shell :is(
        .assign-config-header,
        .assign-panel,
        .tech-skill-hero,
        .tech-skill-list-card,
        .tech-skill-form-card,
        .mail-config-hero,
        .mail-config-card,
        .rules-hero,
        .rules-list-card,
        .rules-form-card,
        .sla-hero,
        .sla-page .panel,
        .kb-hero,
        .kb-list-panel,
        .kb-editor-panel,
        .services-header,
        .service-summary-card,
        .service-detail-card,
        .audit-hero,
        .audit-security-config,
        .audit-filters,
        .audit-card,
        .brand-card,
        .permissions-toolbar,
        .permissions-card,
        .users-toolbar,
        .users-list-card,
        .user-form-card,
        .panel
    ) {
        max-width: 100%;
        padding: .85rem;
        border-radius: 12px;
    }

    .enterprise-shell :is(
        .form-grid,
        .form-grid-2,
        .number-grid,
        .mode-grid,
        .skill-checks,
        .switch-grid,
        .config-grid,
        .health-grid,
        .service-info-grid,
        .audit-kpis,
        .audit-security-config,
        .audit-filters
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .enterprise-shell :is(.audit-hero, .services-header, .mail-config-hero, .rules-hero, .tech-skill-hero) {
        flex-direction: column;
        align-items: stretch;
    }

    .enterprise-shell :is(.online-tech-dropdown, .presence-menu, .notification-dropdown, .help-chat-dropdown, .user-dropdown) {
        position: fixed !important;
        top: 64px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

    .enterprise-shell h1,
    .enterprise-shell .page-title {
        font-size: clamp(1.4rem, 8vw, 1.8rem) !important;
        overflow-wrap: anywhere;
    }
}

/* Base de conocimiento: cierre visual de la pestaña IA y RAG. */
.enterprise-shell.theme-dark .kb-page {
    --kb-text: #f1f5f9;
    --kb-muted: #9fb0c7;
    --kb-border: #334155;
    --kb-surface: #111b2e;
    --kb-bg: #0b1220;
    color: #e7edf7 !important;
    background: #0b1220 !important;
}

.enterprise-shell.theme-dark .kb-tabs button {
    color: #b6c4d8 !important;
}

.enterprise-shell.theme-dark .kb-tabs button:hover {
    color: #f8fafc !important;
    background: #172844 !important;
}

.enterprise-shell.theme-dark .kb-tabs button.active {
    color: #fff !important;
    background: #24558d !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}

.enterprise-shell.theme-dark :is(
    .kb-page .kpi-card span,
    .kb-page .kpi-card small,
    .rag-intro p,
    .rag-panel .form-group label,
    .rag-panel .switch-card small
) {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark :is(
    .rag-intro h2,
    .rag-panel .switch-card strong,
    .rag-panel .form-group label
) {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark .rag-panel .switch-card {
    color: #e7edf7 !important;
    background: #0f1929 !important;
    border-color: #3a4a61 !important;
}

.enterprise-shell.theme-dark .rag-note {
    color: #fde68a !important;
    background: #302711 !important;
    border-color: #d6a800 !important;
}

.enterprise-shell.theme-dark .rag-note p {
    color: #e7d798 !important;
}

@media (max-width: 680px) {
    .enterprise-shell .kb-page {
        padding: 0 !important;
    }

    .enterprise-shell .kb-page :is(.rag-grid, .rag-values, .kpi-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .enterprise-shell .kb-tabs {
        width: 100%;
        overflow-x: auto;
    }
}

/* Cierre visual: Mis tickets, Nuevo ticket y Centro de ayuda. */
.enterprise-shell.theme-dark :is(
    .my-tickets-hero,
    .ticket-kpi,
    .empty-tickets,
    .tickets-loading,
    .wizard-hero,
    .wizard-step,
    .wizard-card,
    .wizard-tip,
    .priority-option,
    .upload-box,
    .wizard-attachment,
    .confirm-grid > div,
    .confirm-description
) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .my-tickets-hero h1,
    .ticket-kpi strong,
    .empty-tickets h3,
    .wizard-hero h1,
    .wizard-section h2,
    .wizard-step strong,
    .priority-option strong,
    .wizard-attachment span,
    .confirm-grid strong,
    .confirm-description p
) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark :is(
    .my-tickets-hero p,
    .ticket-kpi span,
    .empty-tickets,
    .tickets-loading,
    .wizard-hero p,
    .wizard-section p,
    .priority-option small,
    .upload-box small,
    .wizard-attachment small,
    .confirm-grid span,
    .confirm-description span
) {
    color: #a9b8cd !important;
}

.enterprise-shell.theme-dark .ticket-kpi.active,
.enterprise-shell.theme-dark .wizard-step.active,
.enterprise-shell.theme-dark .priority-option.active {
    color: #ffffff !important;
    background: #17345c !important;
    border-color: #5f8fca !important;
    box-shadow: inset 3px 0 0 #60a5fa, 0 10px 24px rgba(2, 8, 23, .2) !important;
}

.enterprise-shell.theme-dark .wizard-step span {
    color: #dbe7f8 !important;
    background: #26364d !important;
}

.enterprise-shell.theme-dark .wizard-step.active span {
    color: #ffffff !important;
    background: #2563eb !important;
}

.enterprise-shell.theme-dark .wizard-step.completed span {
    color: #dcfce7 !important;
    background: #166534 !important;
}

.enterprise-shell.theme-dark .wizard-tip {
    background: #132b49 !important;
    border-color: #315a84 !important;
}

.enterprise-shell.theme-dark .wizard-tip strong {
    color: #dbeafe !important;
}

.enterprise-shell.theme-dark .wizard-tip span {
    color: #b8c9df !important;
}

.enterprise-shell.theme-dark .help-page {
    color: #e7edf7 !important;
    background: #0b1220 !important;
}

.enterprise-shell.theme-dark .help-body {
    background: transparent !important;
}

.enterprise-shell.theme-dark :is(.category-panel, .articles-panel, .article-card, .article-detail) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark :is(
    .category-panel h2,
    .articles-heading h2,
    .article-card h3,
    .empty-help strong,
    .article-detail h2,
    .article-detail section h3
) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark :is(
    .articles-heading span,
    .article-card p,
    .article-card-foot span,
    .empty-help,
    .preformatted,
    .useful-box span
) {
    color: #a9b8cd !important;
}

.enterprise-shell.theme-dark .category-panel button {
    color: #cbd5e1 !important;
}

.enterprise-shell.theme-dark .category-panel button:hover,
.enterprise-shell.theme-dark .category-panel button.active {
    color: #ffffff !important;
    background: #17345c !important;
}

.enterprise-shell.theme-dark .category-panel button strong {
    color: #dbeafe !important;
    background: #263b59 !important;
}

.enterprise-shell.theme-dark .empty-help a,
.enterprise-shell.theme-dark .article-card-head span,
.enterprise-shell.theme-dark .article-card-foot strong,
.enterprise-shell.theme-dark .detail-footer a {
    color: #7db7ff !important;
}

.enterprise-shell.theme-dark :is(.preformatted.steps, .useful-box) {
    color: #dbe7f8 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

/* Regreso al listado: control compacto, reconocible y consistente en ambos temas. */
.enterprise-shell .ticket-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding: .38rem .76rem .38rem .42rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #173a69;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .09);
    font: inherit;
    font-size: .8rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.enterprise-shell .ticket-back-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #174b87;
    background: #eaf2fc;
    font-size: 1rem;
    line-height: 1;
    transition: transform .16s ease;
}

.enterprise-shell .ticket-back-btn:hover {
    border-color: #85a8d2;
    background: #f8fbff;
    box-shadow: 0 9px 22px rgba(23, 58, 105, .14);
    transform: translateY(-1px);
}

.enterprise-shell .ticket-back-btn:hover .ticket-back-icon {
    transform: translateX(-2px);
}

.enterprise-shell .ticket-back-btn:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .35);
    outline-offset: 2px;
}

.enterprise-shell.theme-dark .ticket-back-btn {
    color: #e6f0ff;
    background: #172844;
    border-color: #46658b;
    box-shadow: 0 7px 18px rgba(2, 8, 23, .25);
}

.enterprise-shell.theme-dark .ticket-back-icon {
    color: #dbeafe;
    background: #24558d;
}

.enterprise-shell.theme-dark .ticket-back-btn:hover {
    color: #ffffff;
    background: #1c3558;
    border-color: #73a6df;
}

/* El contenido largo del ticket no puede expulsar las acciones del encabezado. */
.enterprise-shell .ticket-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.enterprise-shell .ticket-hero > div:first-child {
    min-width: 0;
}

.enterprise-shell .ticket-hero :is(h1, p) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.enterprise-shell .ticket-hero-actions {
    flex: none;
    min-width: max-content;
    justify-self: end;
    align-items: center;
}

@media (max-width: 760px) {
    .enterprise-shell .ticket-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .enterprise-shell .ticket-hero-actions {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        justify-content: space-between;
    }
}

/* Detalle de ticket: conversación, relaciones, historial y presencia del chat. */
.enterprise-shell.theme-dark :is(
    .portal-message-bubble,
    .timeline-content,
    .history-content,
    .chat-team-panel,
    .ticket-chat-list,
    .chat-empty,
    .chat-bubble
) {
    color: #e7edf7 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .portal-message-mine .portal-message-bubble {
    background: #102a26 !important;
    border-color: #276052 !important;
}

.enterprise-shell.theme-dark .portal-message-support .portal-message-bubble {
    background: #12233d !important;
    border-color: #31547f !important;
}

.enterprise-shell.theme-dark .portal-message-internal .portal-message-bubble {
    background: #302619 !important;
    border-color: #76522a !important;
}

.enterprise-shell.theme-dark :is(
    .portal-message-head strong,
    .timeline-head strong,
    .history-head strong,
    .ticket-chat-head h3,
    .chat-team-header strong,
    .tech-presence-info strong,
    .chat-message-head strong
) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark :is(
    .portal-message-head span,
    .portal-message-head small,
    .timeline-head small,
    .timeline-user,
    .history-head small,
    .history-user,
    .ticket-chat-head p,
    .chat-team-header span,
    .tech-presence-info span,
    .chat-message-head small
) {
    color: #a9b8cd !important;
}

.enterprise-shell.theme-dark .ticket-message-body,
.enterprise-shell.theme-dark .ticket-message-body :is(p, div, span, font, td, th, strong, em, b, i) {
    color: #e7edf7 !important;
}

.enterprise-shell.theme-dark .ticket-message-body a {
    color: #7db7ff !important;
}

.enterprise-shell.theme-dark .timeline-content p,
.enterprise-shell.theme-dark .history-change,
.enterprise-shell.theme-dark .history-change span,
.enterprise-shell.theme-dark .history-change strong,
.enterprise-shell.theme-dark .chat-bubble p {
    color: #d7e2f0 !important;
}

.enterprise-shell.theme-dark :is(.timeline-icon, .history-icon, .portal-message-avatar) {
    color: #dbeafe !important;
    background: #19375d !important;
    border-color: #416893 !important;
}

.enterprise-shell.theme-dark .timeline::before {
    background: linear-gradient(180deg, #60a5fa, #334155) !important;
}

.enterprise-shell.theme-dark .timeline-clickable:hover {
    background: #162842 !important;
    border-color: #5f8fca !important;
}

.enterprise-shell.theme-dark .chat-team-panel {
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, .08) !important;
}

.enterprise-shell.theme-dark .chat-team-pill {
    color: #dbeafe !important;
    background: #17345c !important;
    border-color: #466b98 !important;
}

.enterprise-shell.theme-dark .tech-presence-card,
.enterprise-shell.theme-dark .tech-presence-card.online,
.enterprise-shell.theme-dark .tech-presence-card.busy,
.enterprise-shell.theme-dark .tech-presence-card.away,
.enterprise-shell.theme-dark .tech-presence-card.offline {
    color: #e7edf7 !important;
    background: #162238 !important;
    border-color: #334155 !important;
    opacity: 1 !important;
    box-shadow: 0 8px 18px rgba(2, 8, 23, .18) !important;
}

.enterprise-shell.theme-dark .tech-presence-card.online {
    background: linear-gradient(135deg, #122b2a, #162238) !important;
    border-color: #27745a !important;
}

.enterprise-shell.theme-dark .tech-presence-card.busy {
    background: linear-gradient(135deg, #352026, #162238) !important;
    border-color: #87414c !important;
}

.enterprise-shell.theme-dark .tech-presence-card.away {
    background: linear-gradient(135deg, #342b19, #162238) !important;
    border-color: #8b6925 !important;
}

.enterprise-shell.theme-dark .tech-presence-card.offline {
    background: #111b2e !important;
    border-color: #3a4658 !important;
}

.enterprise-shell.theme-dark .tech-presence-card.assigned {
    border-color: #73a6df !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .18), 0 10px 22px rgba(2, 8, 23, .22) !important;
}

.enterprise-shell.theme-dark .chat-empty {
    color: #cbd5e1 !important;
    border-style: dashed !important;
}

@media (max-width: 760px) {
    .enterprise-shell .timeline-item,
    .enterprise-shell .history-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .enterprise-shell :is(.timeline-icon, .history-icon) {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .enterprise-shell :is(.timeline-head, .history-head) {
        flex-direction: column;
        gap: .25rem;
    }

    .enterprise-shell :is(.timeline-content, .history-content) {
        padding: .85rem;
    }
}

/* Notificaciones y alertas: contraste semántico completo en modo oscuro. */
.enterprise-shell.theme-dark .notification-dropdown {
    color: #e7edf7 !important;
    background: #0f1929 !important;
    border-color: #3a4a61 !important;
}

.enterprise-shell.theme-dark .notification-header {
    background: #111d31 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .notification-header strong {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .notification-header small,
.enterprise-shell.theme-dark .notification-empty {
    color: #a9b8cd !important;
}

.enterprise-shell.theme-dark .notification-item,
.enterprise-shell.theme-dark .notification-item.unread {
    color: #dbe7f8 !important;
    background: #0f1929 !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .notification-item.unread {
    background: #172844 !important;
    box-shadow: inset 3px 0 0 #60a5fa;
}

.enterprise-shell.theme-dark .notification-item:hover,
.enterprise-shell.theme-dark .notification-item.unread:hover {
    background: #1b3150 !important;
}

.enterprise-shell.theme-dark .notification-item strong {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .notification-item p {
    color: #c2d0e2 !important;
}

.enterprise-shell.theme-dark .notification-item small {
    color: #91a6c0 !important;
}

.enterprise-shell.theme-dark .notification-remove {
    color: #cbd5e1 !important;
    background: #26364d !important;
}

.enterprise-shell.theme-dark .notification-remove:hover {
    color: #fecaca !important;
    background: #582631 !important;
}

.enterprise-shell.theme-dark .app-toast {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
    border-left-color: #f6bd00 !important;
}

.enterprise-shell.theme-dark .app-toast strong {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .app-toast span {
    color: #c2d0e2 !important;
}

.enterprise-shell.theme-dark .alert-error {
    color: #fecaca !important;
    background: #451a22 !important;
    border: 1px solid #8f3948 !important;
}

.enterprise-shell.theme-dark .alert-success {
    color: #bbf7d0 !important;
    background: #123326 !important;
    border: 1px solid #277455 !important;
}

.enterprise-shell.theme-dark .mini-alert {
    color: #bfdbfe !important;
    background: #172844 !important;
    border: 1px solid #315b8d !important;
}

/* Modal de Relaciones: misma superficie oscura y texto siempre legible. */
.enterprise-shell.theme-dark :is(.modal-card, .modal-header, .modal-body) {
    color: #e7edf7 !important;
    background: #111b2e !important;
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .modal-header h2 {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .modal-close {
    color: #dbe7f8 !important;
    background: #26364d !important;
    border: 1px solid #3f526d !important;
}

.enterprise-shell.theme-dark .modal-close:hover {
    color: #ffffff !important;
    background: #334b6c !important;
}

.enterprise-shell.theme-dark .detail-row {
    border-color: #334155 !important;
}

.enterprise-shell.theme-dark .detail-row span {
    color: #9fb0c7 !important;
}

.enterprise-shell.theme-dark .detail-row strong {
    color: #f1f5f9 !important;
}

.enterprise-shell.theme-dark .detail-box {
    color: #dbe7f8 !important;
    background: #0b1422 !important;
    border-color: #3a4a61 !important;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Estado de servicios: contraste de valores y selectores por buzón. */
.enterprise-shell.theme-dark .services-page :is(
    .services-header h1,
    .service-summary-card h3,
    .service-main-value,
    .service-detail-header h2,
    .service-info-grid strong) {
    color: #f8fafc !important;
}

.enterprise-shell.theme-dark .services-page :is(
    .services-header p,
    .service-summary-card p,
    .service-detail-header span:first-child,
    .service-info-grid small,
    .service-config-selector span) {
    color: #aebdd1 !important;
}

.enterprise-shell.theme-dark .services-page :is(
    .service-summary-card,
    .service-detail-card) {
    background: #111c2e !important;
    border-color: #2b3a50 !important;
}

.enterprise-shell.theme-dark .services-page :is(
    .service-info-grid > div,
    .service-config-selector,
    .service-help-box) {
    background: #0d1728 !important;
    border-color: #304158 !important;
}

.enterprise-shell.theme-dark .services-page .service-config-selector select {
    color: #f8fafc !important;
    background: #0b1525 !important;
    border-color: #3a4d67 !important;
}