À//* Fecha: 2026-06-06 */
/* Proyecto: TelHarbor UCaaS */
/* Archivo: /opt/telharbor/ucaas/public/assets/css/ucaas.css */

:root {
    --th-bg: #eef6fb;
    --th-panel: #ffffff;
    --th-sidebar: #071827;
    --th-sidebar-2: #0b2538;
    --th-text: #102033;
    --th-muted: #6b7b8f;
    --th-border: #d9e7f1;
    --th-primary: #2b8fd8;
    --th-primary-dark: #176ca8;
    --th-danger: #d94b4b;
    --th-ok: #168a56;
    --th-warning: #c47a11;
    --th-shadow: 0 18px 45px rgba(10, 35, 55, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--th-bg);
    color: var(--th-text);
}

a {
    text-decoration: none;
}

.th-shell {
    display: flex;
    min-height: 100vh;
}

.th-sidebar {
    width: 270px;
    background: linear-gradient(180deg, var(--th-sidebar), var(--th-sidebar-2));
    color: #fff;
    padding: 22px;
}

.th-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 34px;
}

.th-brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #dff3ff;
    color: #06304b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

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

.th-brand-subtitle {
    font-size: 12px;
    color: #b8d8ea;
}

.th-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.th-menu a {
    color: #d8edf8;
    padding: 12px 14px;
    border-radius: 12px;
}

.th-menu a:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
}

.th-main {
    flex: 1;
    min-width: 0;
}

.th-header {
    min-height: 86px;
    background: rgba(255,255,255,0.82);
    border-bottom: 1px solid var(--th-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    backdrop-filter: blur(10px);
}

.th-header h1 {
    margin: 0;
    font-size: 24px;
}

.th-header p {
    margin: 5px 0 0;
    color: var(--th-muted);
}

.th-userbar {
    display: flex;
    align-items: center;
    gap: 14px;
}

.th-user-info {
    text-align: right;
}

.th-user-info strong {
    display: block;
}

.th-user-info span {
    display: block;
    color: var(--th-muted);
    font-size: 12px;
}

.th-ws-status {
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--th-border);
    background: #fff;
    color: var(--th-warning);
    padding: 8px 10px;
    border-radius: 999px;
}

.th-ws-status.is-online {
    color: var(--th-ok);
}

.th-ws-status.is-offline {
    color: var(--th-danger);
}

.th-content {
    padding: 28px;
}

.th-grid {
    display: grid;
    gap: 18px;
}

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

.th-card {
    background: var(--th-panel);
    border: 1px solid var(--th-border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--th-shadow);
}

.th-mt {
    margin-top: 18px;
}

.th-kpi-label {
    display: block;
    color: var(--th-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.th-kpi-value {
    display: block;
    font-size: 34px;
    margin-bottom: 5px;
}

.th-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 11px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 700;
}

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

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

.th-btn-ghost {
    border-color: var(--th-border);
    color: var(--th-text);
    background: #fff;
}

.th-btn-full {
    width: 100%;
}

.th-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.th-event {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
}

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

.th-login-body {
    min-height: 100vh;
    background: radial-gradient(circle at top left, #dff3ff, #eef6fb 38%, #d8eaf5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.th-login-card {
    width: 420px;
    background: #fff;
    border: 1px solid var(--th-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--th-shadow);
}

.th-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.th-login-brand h1 {
    margin: 0;
    font-size: 24px;
}

.th-login-brand p {
    margin: 4px 0 0;
    color: var(--th-muted);
}

label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 700;
}

input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--th-border);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 15px;
}

form button {
    margin-top: 18px;
}

.th-alert {
    background: #fff2f2;
    border: 1px solid #ffd0d0;
    color: var(--th-danger);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 14px;
}

@media (max-width: 980px) {
    .th-sidebar {
        width: 220px;
    }

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

@media (max-width: 720px) {
    .th-shell {
        flex-direction: column;
    }

    .th-sidebar {
        width: 100%;
    }

    .th-header {
        height: auto;
        padding: 18px;
        align-items: flex-start;
        gap: 14px;
        flex-direction: column;
    }

    .th-userbar {
        flex-wrap: wrap;
    }

    .th-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Menu admin */
.th-menu-section {
	color: #8fb9d1;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 18px 10px 6px;
	}

/* Admin links */
.th-admin-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.th-admin-link {
    display: block;
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 16px;
    padding: 18px;
    color: var(--th-text);
}

.th-admin-link strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}

.th-admin-link span {
    display: block;
    color: var(--th-muted);
    font-size: 13px;
    line-height: 1.4;
}

.th-admin-link:hover {
    border-color: var(--th-primary);
}

.th-table-wrap {
    overflow-x: auto;
}

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

.th-table th,
.th-table td {
    border-bottom: 1px solid var(--th-border);
    padding: 12px 10px;
    text-align: left;
    font-size: 14px;
}

.th-table th {
    color: var(--th-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.th-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #eef6fb;
    color: var(--th-text);
}

.th-badge-active {
    background: #e7f8ef;
    color: var(--th-ok);
}

.th-badge-inactive {
    background: #f3f4f6;
    color: var(--th-muted);
}

.th-badge-blocked {
    background: #fff2f2;
    color: var(--th-danger);
}

@media (max-width: 980px) {
    .th-admin-links {
        grid-template-columns: 1fr;
    }
}


/* Fase 02 - CRUD clientes */
.th-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.th-card-head h2 {
    margin-top: 0;
}

.th-card-head p {
    margin-bottom: 0;
    color: var(--th-muted);
}

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

.th-btn-small {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.th-btn-danger {
    background: var(--th-danger);
    color: #fff;
}

.th-btn-danger:hover {
    filter: brightness(0.95);
}

.th-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(7, 24, 39, 0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.th-modal-backdrop[hidden] {
    display: none;
}

.th-modal {
    width: min(680px, 100%);
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--th-border);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
    padding: 22px;
}

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

.th-modal-head h3 {
    margin: 0;
    font-size: 22px;
}

.th-modal-head p {
    margin: 6px 0 0;
    color: var(--th-muted);
}

.th-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--th-border);
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

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

.th-form-group {
    display: flex;
    flex-direction: column;
}

.th-form-group select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--th-border);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 15px;
    background: #fff;
}

.th-form-error {
    margin-top: 14px;
    background: #fff2f2;
    border: 1px solid #ffd0d0;
    color: var(--th-danger);
    padding: 12px;
    border-radius: 12px;
}

.th-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .th-card-head {
        flex-direction: column;
    }

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

/* Fase 02 - CRUD usuarios */
.th-form-group-full {
    grid-column: 1 / -1;
}

.th-form-group small {
    display: block;
    margin-top: 6px;
    color: var(--th-muted);
    font-size: 12px;
}

.th-badge-role {
    background: #eef6fb;
    color: var(--th-text);
}

.th-badge-role-admin {
    background: #e8f1ff;
    color: #1456a0;
}

.th-badge-role-supervisor {
    background: #fff8e8;
    color: #a46409;
}

.th-badge-role-user {
    background: #edf8f1;
    color: #168a56;
}


/* Fase 02 - CRUD numeros */
.th-check-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.th-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--th-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8fcff;
    font-weight: 700;
}

.th-check input {
    width: auto;
    height: auto;
}

.th-cap {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #f3f4f6;
    color: var(--th-muted);
}

.th-cap-on {
    background: #e7f8ef;
    color: var(--th-ok);
}

.th-cap-off {
    background: #f3f4f6;
    color: var(--th-muted);
}

/* Fase 02 - Auditoria Web */
.th-filter-panel {
    margin-top: 18px;
}

.th-form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}

.th-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.th-pagination span {
    font-size: 13px;
    color: var(--th-muted);
    font-weight: 700;
}

.th-table-compact th,
.th-table-compact td {
    font-size: 12px;
    padding: 9px 8px;
    vertical-align: top;
}

.th-level {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.th-level-info {
    background: #eef6fb;
    color: #176ca8;
}

.th-level-warning {
    background: #fff8e8;
    color: #a46409;
}

.th-level-error {
    background: #fff2f2;
    color: var(--th-danger);
}

.th-level-security {
    background: #f0eaff;
    color: #673ab7;
}

.th-btn-link {
    border: 0;
    background: transparent;
    color: var(--th-primary);
    font-weight: 800;
    cursor: pointer;
    padding: 0;
}

.th-modal-wide {
    width: min(1100px, 100%);
}

.th-audit-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.th-audit-detail-grid div {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 10px;
}

.th-audit-detail-grid strong {
    display: block;
    font-size: 11px;
    color: var(--th-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.th-audit-detail-grid span {
    display: block;
    font-size: 13px;
    word-break: break-word;
}

.th-json-box {
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--th-border);
    background: #071827;
    color: #dff3ff;
    border-radius: 14px;
    padding: 14px;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .th-form-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .th-audit-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .th-form-grid-4 {
        grid-template-columns: 1fr;
    }

    .th-filter-actions,
    .th-pagination {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Fase 02 - Control de sesion */
.th-session-warning {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2000;
    width: min(420px, calc(100% - 44px));
    background: #fff8e8;
    border: 1px solid #f3cc7a;
    color: #5f3b04;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(10, 35, 55, 0.22);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.th-session-warning[hidden] {
    display: none;
}

.th-session-warning strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.th-session-warning span {
    display: block;
    font-size: 13px;
}

/* Fase 02 - Proveedores */
.th-form-group textarea {
    width: 100%;
    border: 1px solid var(--th-border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    background: #fff;
    resize: vertical;
    font-family: monospace;
}

.th-secret-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.th-secret-chip {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: #f3f4f6;
    color: var(--th-muted);
}

.th-secret-chip.is-set {
    background: #e7f8ef;
    color: var(--th-ok);
}

/* Fase 03 - SMS */
.th-grid-2 {
    grid-template-columns: 1.2fr 0.8fr;
}

.th-form-ok {
    margin-top: 14px;
    background: #e7f8ef;
    border: 1px solid #bde8cf;
    color: var(--th-ok);
    padding: 12px;
    border-radius: 12px;
}

.th-info-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.th-info-list div {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 12px;
}

.th-info-list strong {
    display: block;
    font-size: 12px;
    color: var(--th-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.th-info-list span {
    display: block;
    font-size: 14px;
}

.th-sms-body {
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 980px) {
    .th-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Fase 03 Parte 4 - SMS avanzado */
.th-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.th-kpi-grid-sms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-status-badge,
.th-direction-badge,
.th-provider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.th-status-queued {
    background: #fff7d6;
    color: #8a6400;
    border: 1px solid #f2d36b;
}

.th-status-sent {
    background: #e8f4ff;
    color: #075985;
    border: 1px solid #a7d8ff;
}

.th-status-delivered {
    background: #e8f8ee;
    color: #166534;
    border: 1px solid #a7e0b8;
}

.th-status-failed {
    background: #ffecec;
    color: #991b1b;
    border: 1px solid #f5b5b5;
}

.th-status-default {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.th-direction-inbound {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.th-direction-outbound {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.th-provider-telnyx {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.th-provider-twilio {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.th-provider-unknown {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.th-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.th-btn-mini {
    border: 1px solid var(--th-border);
    background: #ffffff;
    color: var(--th-text);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
}

.th-btn-mini:hover {
    background: #f5fbff;
    border-color: var(--th-primary);
}

.th-sms-table th,
.th-sms-table td {
    vertical-align: top;
}

.th-sms-error {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.th-detail-grid div {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 10px;
}

.th-detail-grid strong {
    display: block;
    color: var(--th-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.th-detail-grid span {
    display: block;
    word-break: break-word;
}

.th-detail-full {
    grid-column: 1 / -1;
}

.th-detail-title {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 16px;
}

.th-json-box {
    background: #0b1220;
    color: #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    overflow: auto;
    max-height: 420px;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .th-kpi-grid-sms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

/* Fase 03 Parte 4 - Correccion visual SMS */

.th-kpi-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.th-kpi-grid-sms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-kpi {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 14px;
    padding: 14px;
    min-height: 82px;
}

.th-kpi span {
    display: block;
    color: var(--th-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.th-kpi strong {
    display: block;
    color: var(--th-text);
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
}

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

.th-sms-table {
    min-width: 1450px;
}

.th-sms-table th,
.th-sms-table td {
    vertical-align: top;
    white-space: nowrap;
}

.th-sms-table td:nth-child(8) {
    white-space: normal;
    min-width: 260px;
    max-width: 360px;
}

.th-sms-table td:nth-child(10) {
    white-space: normal;
    min-width: 220px;
    max-width: 320px;
}

.th-sms-body {
    max-width: 360px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-sms-error {
    max-width: 320px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.th-btn-mini {
    border: 1px solid var(--th-border);
    background: #ffffff;
    color: var(--th-text);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.th-btn-mini:hover {
    background: #f5fbff;
    border-color: var(--th-primary);
}

.th-status-badge,
.th-direction-badge,
.th-provider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.th-status-queued {
    background: #fff7d6;
    color: #8a6400;
    border: 1px solid #f2d36b;
}

.th-status-sent {
    background: #e8f4ff;
    color: #075985;
    border: 1px solid #a7d8ff;
}

.th-status-delivered {
    background: #e8f8ee;
    color: #166534;
    border: 1px solid #a7e0b8;
}

.th-status-failed {
    background: #ffecec;
    color: #991b1b;
    border: 1px solid #f5b5b5;
}

.th-status-default {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.th-direction-inbound {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.th-direction-outbound {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.th-provider-telnyx {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.th-provider-twilio {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.th-provider-unknown {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

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

.th-detail-grid div {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 10px;
}

.th-detail-grid strong {
    display: block;
    color: var(--th-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.th-detail-grid span {
    display: block;
    word-break: break-word;
}

.th-detail-full {
    grid-column: 1 / -1;
}

.th-detail-title {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 16px;
}

.th-json-box {
    background: #0b1220;
    color: #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    overflow: auto;
    max-height: 420px;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .th-kpi-grid-sms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

/* ============================================================
   TelHarbor UCaaS - CSS Recovery
   Fecha: 2026-06-08
   Descripcion: Recupera colores, layout, sidebar, cards y SMS UI
   ============================================================ */

:root {
    --th-bg: #eaf4fb;
    --th-surface: #ffffff;
    --th-sidebar: #061b2b;
    --th-sidebar-2: #08243a;
    --th-text: #0f1f33;
    --th-muted: #5b708d;
    --th-border: #cfe2f1;
    --th-primary: #2f93d8;
    --th-primary-dark: #1976b8;
    --th-primary-soft: #e8f5ff;
    --th-ok: #087f4f;
    --th-warning: #8a6400;
    --th-danger: #b42318;
    --th-radius: 18px;
    --th-shadow: 0 10px 30px rgba(15, 31, 51, 0.08);
}

/* Base */
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--th-bg);
    color: var(--th-text);
}

body {
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Layout principal */
.th-app {
    min-height: 100vh;
    display: flex;
    background: var(--th-bg);
}

.th-main {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
    background: var(--th-bg);
}

.th-content {
    padding: 30px;
}

/* Sidebar */
.th-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: linear-gradient(180deg, var(--th-sidebar), var(--th-sidebar-2));
    color: #eaf7ff;
    z-index: 50;
    overflow-y: auto;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
}

.th-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 18px;
}

.th-brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #dff3ff;
    color: #06304c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.th-brand-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
}

.th-brand-subtitle {
    font-size: 12px;
    color: #b9d8ea;
}

.th-menu {
    display: grid;
    gap: 4px;
    padding: 10px 14px 30px;
}

.th-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: #d8edf8;
    font-size: 15px;
    font-weight: 600;
}

.th-menu a:hover,
.th-menu a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.th-menu-section {
    margin: 18px 8px 6px;
    color: #88bcd7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Header */
.th-header {
    min-height: 72px;
    background: #ffffff;
    border-bottom: 1px solid var(--th-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 2px 18px rgba(15, 31, 51, 0.04);
}

.th-header h1,
.th-page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: var(--th-text);
}

.th-header p,
.th-page-subtitle {
    margin: 4px 0 0;
    color: var(--th-muted);
    font-size: 15px;
}

.th-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.th-ws-status,
#thWsStatus {
    display: inline-flex;
    align-items: center;
    border: 1px solid #bfe8d0;
    background: #f0fff6;
    color: #067647;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
}

.th-user-box {
    text-align: right;
}

.th-user-name {
    font-weight: 800;
    color: var(--th-text);
}

.th-user-meta {
    color: var(--th-muted);
    font-size: 12px;
}

.th-logout,
.th-btn-logout {
    border: 1px solid var(--th-border);
    background: #ffffff;
    color: var(--th-text);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
}

/* Cards */
.th-card {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow);
    padding: 24px;
}

.th-card h2 {
    margin: 0 0 10px;
    font-size: 24px;
    color: var(--th-text);
}

.th-card p {
    color: var(--th-muted);
}

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

.th-grid {
    display: grid;
    gap: 20px;
}

.th-grid-2 {
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
}

.th-mt {
    margin-top: 20px;
}

/* Forms */
.th-form-grid {
    display: grid;
    gap: 18px;
}

.th-form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-form-group {
    display: grid;
    gap: 8px;
}

.th-form-group-full {
    grid-column: 1 / -1;
}

.th-form-group label {
    color: var(--th-text);
    font-weight: 800;
    font-size: 14px;
}

.th-form-group small {
    color: var(--th-muted);
}

.th-form-group input,
.th-form-group select,
.th-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--th-border);
    background: #ffffff;
    color: var(--th-text);
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 15px;
    outline: none;
}

.th-form-group textarea {
    resize: vertical;
    min-height: 110px;
}

.th-form-group input:focus,
.th-form-group select:focus,
.th-form-group textarea:focus {
    border-color: var(--th-primary);
    box-shadow: 0 0 0 3px rgba(47, 147, 216, 0.15);
}

.th-filter-panel {
    background: #ffffff;
    border: 1px solid var(--th-border);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
}

/* Buttons */
.th-btn,
.th-btn-primary,
.th-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.th-btn-primary {
    background: var(--th-primary);
    color: #ffffff;
    border-color: var(--th-primary);
}

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

.th-btn-ghost {
    background: #ffffff;
    color: var(--th-text);
    border-color: var(--th-border);
}

.th-btn-ghost:hover {
    border-color: var(--th-primary);
    background: var(--th-primary-soft);
}

.th-actions,
.th-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.th-form-error {
    margin-top: 14px;
    background: #fff0f0;
    border: 1px solid #ffc7c7;
    color: var(--th-danger);
    padding: 12px;
    border-radius: 12px;
}

.th-form-ok {
    margin-top: 14px;
    background: #e7f8ef;
    border: 1px solid #bde8cf;
    color: var(--th-ok);
    padding: 12px;
    border-radius: 12px;
}

/* KPI */
.th-kpi-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.th-kpi-grid-sms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-kpi {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 14px;
    padding: 14px;
    min-height: 78px;
}

.th-kpi span {
    display: block;
    color: var(--th-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.th-kpi strong {
    display: block;
    color: var(--th-text);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

/* Info */
.th-info-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.th-info-list div {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 12px;
}

.th-info-list strong {
    display: block;
    font-size: 12px;
    color: var(--th-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.th-info-list span {
    display: block;
    font-size: 14px;
}

/* Tables */
.th-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
}

.th-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.th-table th {
    text-align: left;
    color: #66768d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 12px 10px;
    border-bottom: 1px solid var(--th-border);
}

.th-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--th-border);
    font-size: 13px;
    color: var(--th-text);
}

.th-table tr:hover td {
    background: #f8fcff;
}

.th-table-compact th,
.th-table-compact td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.th-sms-table {
    min-width: 1450px;
}

.th-sms-table th,
.th-sms-table td {
    vertical-align: top;
    white-space: nowrap;
}

.th-sms-table td:nth-child(8) {
    white-space: normal;
    min-width: 260px;
    max-width: 360px;
}

.th-sms-table td:nth-child(10) {
    white-space: normal;
    min-width: 220px;
    max-width: 320px;
}

.th-sms-body {
    max-width: 360px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-sms-error {
    max-width: 320px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges */
.th-status-badge,
.th-direction-badge,
.th-provider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.th-status-queued {
    background: #fff7d6;
    color: #8a6400;
    border: 1px solid #f2d36b;
}

.th-status-sent {
    background: #e8f4ff;
    color: #075985;
    border: 1px solid #a7d8ff;
}

.th-status-delivered {
    background: #e8f8ee;
    color: #166534;
    border: 1px solid #a7e0b8;
}

.th-status-failed {
    background: #ffecec;
    color: #991b1b;
    border: 1px solid #f5b5b5;
}

.th-status-default {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.th-direction-inbound {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.th-direction-outbound {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.th-provider-telnyx {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.th-provider-twilio {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.th-provider-unknown {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* Row actions */
.th-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.th-btn-mini {
    border: 1px solid var(--th-border);
    background: #ffffff;
    color: var(--th-text);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.th-btn-mini:hover {
    background: #f5fbff;
    border-color: var(--th-primary);
}

/* Pagination */
.th-pagination {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.th-pagination span {
    color: var(--th-muted);
    font-weight: 800;
}

/* Modal */
.th-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 27, 43, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.th-modal-backdrop[hidden] {
    display: none !important;
}

.th-modal {
    width: 680px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    padding: 22px;
}

.th-modal-wide {
    width: 980px;
}

.th-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.th-modal-head h2 {
    margin: 0;
}

.th-modal-head p {
    margin: 4px 0 0;
    color: var(--th-muted);
}

.th-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--th-border);
    background: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

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

.th-detail-grid div {
    border: 1px solid var(--th-border);
    background: #f8fcff;
    border-radius: 12px;
    padding: 10px;
}

.th-detail-grid strong {
    display: block;
    color: var(--th-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.th-detail-grid span {
    display: block;
    word-break: break-word;
}

.th-detail-full {
    grid-column: 1 / -1;
}

.th-detail-title {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 16px;
}

.th-json-box {
    background: #0b1220;
    color: #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    overflow: auto;
    max-height: 420px;
    font-size: 12px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1100px) {
    .th-grid-2,
    .th-form-grid-4 {
        grid-template-columns: 1fr;
    }

    .th-main {
        margin-left: 0;
    }

    .th-sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
    }

    .th-app {
        display: block;
    }

    .th-header {
        padding: 18px;
        align-items: flex-start;
        gap: 12px;
    }

    .th-content {
        padding: 18px;
    }

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

    .th-detail-grid {
        grid-template-columns: 1fr;
    }
}
/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - WhatsApp layout fix */

.wa-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wa-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.75fr);
    gap: 20px;
    align-items: stretch;
}

.wa-send-card,
.wa-summary-card,
.wa-inbox-card {
    overflow: hidden;
}

.wa-send-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wa-form-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 0.9fr) minmax(160px, 0.45fr);
    gap: 14px;
    align-items: start;
}

.wa-message-box textarea {
    min-height: 110px;
    resize: vertical;
}

.wa-template-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.35fr);
    gap: 14px;
}

.wa-template-grid .th-form-group-full {
    grid-column: 1 / -1;
}

.wa-send-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.wa-form-messages {
    min-height: 42px;
}

.wa-summary-card {
    display: flex;
    flex-direction: column;
}

.wa-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.wa-kpi-card {
    border: 1px solid rgba(130, 180, 210, 0.35);
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
    box-shadow: 0 8px 18px rgba(10, 45, 70, 0.05);
}

.wa-kpi-card span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #60758d;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wa-kpi-card strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: #102238;
}

.wa-kpi-danger strong {
    color: #b42318;
}

.wa-provider-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.wa-provider-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(130, 180, 210, 0.35);
    border-radius: 14px;
    padding: 12px 14px;
    background: #ffffff;
}

.wa-provider-list strong {
    color: #102238;
    font-size: 13px;
}

.wa-provider-list span {
    color: #60758d;
    font-size: 12px;
    font-weight: 700;
}

.wa-summary-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

.wa-summary-actions .th-btn {
    flex: 1;
}

.wa-inbox-head {
    margin-bottom: 10px;
}

.wa-filter-bar {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.7fr)
        minmax(120px, 0.7fr)
        minmax(120px, 0.7fr)
        minmax(145px, 0.75fr)
        minmax(145px, 0.75fr)
        minmax(220px, 1.25fr)
        auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(130, 180, 210, 0.35);
    border-radius: 18px;
    background: #f7fbff;
}

.wa-filter-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}

.wa-filter-actions .th-btn {
    min-height: 42px;
}

.wa-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    color: #60758d;
    font-size: 13px;
    font-weight: 800;
}

.wa-table-actions {
    display: flex;
    gap: 8px;
}

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

.wa-table {
    min-width: 1180px;
    table-layout: auto;
}

.wa-table th,
.wa-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.wa-table th:nth-child(8),
.wa-table td:nth-child(8) {
    width: 32%;
    white-space: normal;
}

.wa-body-cell {
    max-width: 460px;
    white-space: normal;
    line-height: 1.35;
    color: #26384d;
}

.wa-error-cell {
    max-width: 220px;
    white-space: normal;
    color: #b42318;
    font-size: 12px;
}

.wa-date-cell {
    min-width: 135px;
}

.wa-number-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.th-provider-badge,
.th-direction-badge,
.th-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.th-provider-badge {
    background: #eef6ff;
    color: #155eef;
    border: 1px solid #c9ddff;
}

.th-provider-meta {
    background: #eaf3ff;
    color: #175cd3;
    border-color: #b8d4ff;
}

.th-provider-twilio {
    background: #fff1f3;
    color: #c01048;
    border-color: #ffd0da;
}

.th-provider-telnyx {
    background: #ecfdf3;
    color: #067647;
    border-color: #b7ebc6;
}

.th-direction-inbound {
    background: #e7f8ef;
    color: #067647;
    border: 1px solid #b7ebc6;
}

.th-direction-outbound {
    background: #edf4ff;
    color: #175cd3;
    border: 1px solid #c9ddff;
}

.th-status-queued {
    background: #fff7e6;
    color: #b54708;
    border: 1px solid #fedf89;
}

.th-status-sent {
    background: #edf4ff;
    color: #175cd3;
    border: 1px solid #c9ddff;
}

.th-status-delivered {
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #b7ebc6;
}

.th-status-failed {
    background: #fff1f3;
    color: #b42318;
    border: 1px solid #fecdca;
}

.th-status-default {
    background: #f2f4f7;
    color: #344054;
    border: 1px solid #d0d5dd;
}

@media (max-width: 1400px) {
    .wa-top-grid {
        grid-template-columns: 1fr;
    }

    .wa-summary-actions .th-btn {
        flex: initial;
    }

    .wa-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wa-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .wa-form-row,
    .wa-template-grid,
    .wa-send-footer,
    .wa-filter-bar {
        grid-template-columns: 1fr;
    }

    .wa-kpi-grid {
        grid-template-columns: 1fr;
    }

    .wa-summary-actions,
    .wa-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Unified SMS/WhatsApp visual system */

:root {
    --th-navy: #061f33;
    --th-navy-2: #092b44;
    --th-blue: #2f9be6;
    --th-blue-2: #41b6ff;
    --th-ice: #eaf6ff;
    --th-ice-2: #f7fcff;
    --th-border: #cfe4f5;
    --th-text: #102238;
    --th-muted: #5f7590;
    --th-success: #067647;
    --th-danger: #b42318;
    --th-warning: #b54708;
}

.th-app-main,
.th-main,
body {
    background:
        radial-gradient(circle at top left, rgba(47, 155, 230, 0.16), transparent 32%),
        linear-gradient(180deg, #eaf6ff 0%, #f7fcff 42%, #edf8ff 100%) !important;
}

.th-card {
    border: 1px solid rgba(157, 203, 232, 0.75) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 253, 255, 0.96) 100%) !important;
    box-shadow:
        0 18px 42px rgba(6, 31, 51, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.th-card-head h2,
.th-page-title,
h1,
h2 {
    color: var(--th-text) !important;
}

.th-card-head p,
.th-page-subtitle,
.th-card p {
    color: var(--th-muted) !important;
}

.th-btn {
    border-radius: 12px !important;
    font-weight: 900 !important;
    transition: all 0.18s ease !important;
}

.th-btn-primary {
    border: 1px solid rgba(47, 155, 230, 0.75) !important;
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--th-blue) 0%, var(--th-blue-2) 100%) !important;
    box-shadow:
        0 10px 22px rgba(47, 155, 230, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.th-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(47, 155, 230, 0.38),
        0 0 0 4px rgba(47, 155, 230, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.th-btn-ghost {
    border: 1px solid var(--th-border) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f3faff 100%) !important;
    color: var(--th-text) !important;
    box-shadow: 0 8px 18px rgba(6, 31, 51, 0.05) !important;
}

.th-btn-ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 155, 230, 0.65) !important;
    box-shadow:
        0 12px 24px rgba(47, 155, 230, 0.14),
        0 0 0 4px rgba(47, 155, 230, 0.08) !important;
}

.th-btn-glow {
    position: relative;
}

.th-btn-glow::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(65, 182, 255, 0.45), rgba(47, 155, 230, 0));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.18s ease;
}

.th-btn-glow:hover::after {
    opacity: 1;
}

.th-btn-block {
    width: 100%;
}

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

.th-form-group input,
.th-form-group select,
.th-form-group textarea {
    border: 1px solid var(--th-border) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: var(--th-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.th-form-group input:focus,
.th-form-group select:focus,
.th-form-group textarea:focus {
    border-color: var(--th-blue) !important;
    box-shadow:
        0 0 0 4px rgba(47, 155, 230, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    outline: none !important;
}

.th-grid-2,
.th-wa-top-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

.th-wa-summary-card {
    display: flex !important;
    flex-direction: column !important;
}

.th-wa-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 8px !important;
}

.th-kpi,
.th-kpi-glow {
    border: 1px solid rgba(157, 203, 232, 0.82) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f4fbff 100%) !important;
    box-shadow:
        0 10px 22px rgba(6, 31, 51, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.th-kpi span {
    display: block !important;
    color: var(--th-muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 8px !important;
}

.th-kpi strong {
    display: block !important;
    color: var(--th-text) !important;
    font-size: 30px !important;
    line-height: 1 !important;
}

.th-kpi-danger strong {
    color: var(--th-danger) !important;
}

.th-info-stack {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.th-info-box {
    border: 1px solid rgba(157, 203, 232, 0.82);
    border-radius: 16px;
    padding: 14px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    box-shadow: 0 8px 18px rgba(6, 31, 51, 0.04);
}

.th-info-box strong {
    display: block;
    color: var(--th-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.th-info-box span {
    display: block;
    color: var(--th-text);
    font-size: 13px;
    font-weight: 700;
}

.th-filter-panel,
.th-wa-filter-panel {
    border: 1px solid rgba(157, 203, 232, 0.82) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    margin-bottom: 18px !important;
    background:
        linear-gradient(180deg, #f8fdff 0%, #f2faff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.th-form-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: end !important;
}

.th-table-wrap {
    border-radius: 16px !important;
    overflow-x: auto !important;
}

.th-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.th-table thead th {
    background: linear-gradient(180deg, #f6fbff 0%, #eef8ff 100%) !important;
    color: var(--th-muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-bottom: 1px solid var(--th-border) !important;
}

.th-table tbody tr {
    transition: background 0.15s ease;
}

.th-table tbody tr:hover {
    background: rgba(234, 246, 255, 0.72) !important;
}

.th-wa-table {
    min-width: 1280px;
}

.th-wa-table th,
.th-wa-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.th-wa-table th:nth-child(8),
.th-wa-table td:nth-child(8) {
    white-space: normal;
    min-width: 280px;
}

.th-message-cell {
    max-width: 520px;
    white-space: normal;
    color: #26384d;
    line-height: 1.35;
}

.th-error-cell {
    max-width: 240px;
    white-space: normal;
    color: var(--th-danger);
    font-size: 12px;
}

.th-number-cell,
.th-date-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.th-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.th-pagination span {
    color: var(--th-muted);
    font-size: 13px;
    font-weight: 900;
}

.th-status-badge,
.th-provider-badge,
.th-direction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.th-provider-badge {
    background: #eef6ff;
    color: #155eef;
    border: 1px solid #c9ddff;
}

.th-provider-meta {
    background: #eaf3ff;
    color: #175cd3;
    border-color: #b8d4ff;
}

.th-provider-twilio {
    background: #fff1f3;
    color: #c01048;
    border-color: #ffd0da;
}

.th-provider-telnyx {
    background: #ecfdf3;
    color: #067647;
    border-color: #b7ebc6;
}

.th-direction-inbound {
    background: #e7f8ef;
    color: #067647;
    border: 1px solid #b7ebc6;
}

.th-direction-outbound {
    background: #edf4ff;
    color: #175cd3;
    border: 1px solid #c9ddff;
}

.th-status-queued {
    background: #fff7e6;
    color: #b54708;
    border: 1px solid #fedf89;
}

.th-status-sent {
    background: #edf4ff;
    color: #175cd3;
    border: 1px solid #c9ddff;
}

.th-status-delivered {
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #b7ebc6;
}

.th-status-failed {
    background: #fff1f3;
    color: #b42318;
    border: 1px solid #fecdca;
}

.th-status-default {
    background: #f2f4f7;
    color: #344054;
    border: 1px solid #d0d5dd;
}

@media (max-width: 1400px) {
    .th-grid-2,
    .th-wa-top-grid {
        grid-template-columns: 1fr !important;
    }

    .th-form-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .th-form-grid-4 {
        grid-template-columns: 1fr !important;
    }

    .th-wa-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .th-pagination {
        justify-content: stretch !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}


/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Tema corporativo azul oscuro con degradado */

/* Variables TelHarbor */
:root {
    --th-dark-900: #020817;
    --th-dark-850: #061225;
    --th-dark-800: #071b31;
    --th-dark-750: #0a2440;
    --th-dark-700: #0d3154;

    --th-blue-500: #2f9be6;
    --th-blue-400: #41b6ff;
    --th-blue-300: #7ccfff;
    --th-cyan-400: #46e4ff;

    --th-ice-100: #eaf6ff;
    --th-ice-50: #f7fcff;

    --th-green-500: #16c784;
    --th-red-500: #ef5b73;

    --th-border-blue: rgba(65, 182, 255, 0.26);
    --th-glow-blue: rgba(47, 155, 230, 0.42);
    --th-glow-cyan: rgba(70, 228, 255, 0.32);
}

/* Fondo general */
body,
.th-app-main,
.th-main,
.th-content {
    background:
        radial-gradient(circle at 18% 0%, rgba(47, 155, 230, 0.18), transparent 32%),
        radial-gradient(circle at 82% 8%, rgba(70, 228, 255, 0.10), transparent 28%),
        linear-gradient(180deg, #eaf6ff 0%, #f7fcff 44%, #edf8ff 100%) !important;
}

/* Sidebar principal */
.th-sidebar,
.sidebar,
aside {
    background:
        radial-gradient(circle at 15% 4%, rgba(65, 182, 255, 0.28), transparent 18%),
        linear-gradient(180deg, #071b31 0%, #061225 45%, #020817 100%) !important;
    border-right: 1px solid rgba(65, 182, 255, 0.20) !important;
    box-shadow:
        18px 0 42px rgba(2, 8, 23, 0.18),
        inset -1px 0 0 rgba(255, 255, 255, 0.04) !important;
}

/* Logo / marca sidebar */
.th-sidebar-brand,
.sidebar-brand,
.th-brand {
    color: #ffffff !important;
}

.th-sidebar-brand strong,
.sidebar-brand strong,
.th-brand strong {
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(65, 182, 255, 0.38) !important;
}

.th-sidebar-brand span,
.sidebar-brand span,
.th-brand span {
    color: rgba(234, 246, 255, 0.72) !important;
}

/* Avatar TH */
.th-logo,
.th-brand-logo,
.sidebar-logo,
.th-avatar,
.th-user-avatar {
    background:
        radial-gradient(circle at 35% 30%, #9de1ff 0%, #2f9be6 42%, #163f86 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(124, 207, 255, 0.72) !important;
    box-shadow:
        0 0 0 3px rgba(65, 182, 255, 0.14),
        0 0 24px rgba(65, 182, 255, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

/* Titulos de seccion sidebar */
.th-sidebar-section,
.sidebar-section,
.th-menu-title {
    color: rgba(124, 207, 255, 0.72) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Links sidebar */
.th-sidebar a,
.sidebar a,
.th-menu a,
.th-nav a {
    color: rgba(234, 246, 255, 0.84) !important;
    border-radius: 14px !important;
    transition: all 0.18s ease !important;
}

.th-sidebar a:hover,
.sidebar a:hover,
.th-menu a:hover,
.th-nav a:hover {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(47, 155, 230, 0.24), rgba(65, 182, 255, 0.10)) !important;
    box-shadow:
        0 0 0 1px rgba(65, 182, 255, 0.18),
        0 10px 24px rgba(47, 155, 230, 0.12) !important;
    transform: translateX(2px);
}

/* Link activo */
.th-sidebar a.active,
.sidebar a.active,
.th-menu a.active,
.th-nav a.active,
.th-sidebar .active > a,
.sidebar .active > a {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(47, 155, 230, 0.42), rgba(65, 182, 255, 0.18)) !important;
    border: 1px solid rgba(124, 207, 255, 0.32) !important;
    box-shadow:
        0 0 24px rgba(47, 155, 230, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Iconos sidebar */
.th-sidebar svg,
.sidebar svg,
.th-menu svg,
.th-nav svg,
.th-sidebar i,
.sidebar i {
    color: #7ccfff !important;
    filter: drop-shadow(0 0 6px rgba(65, 182, 255, 0.25));
}

/* Header superior */
.th-header,
.header,
.topbar,
.th-topbar {
    background:
        radial-gradient(circle at 15% 0%, rgba(65, 182, 255, 0.22), transparent 28%),
        linear-gradient(90deg, #071b31 0%, #0d3154 52%, #071b31 100%) !important;
    border-bottom: 1px solid rgba(65, 182, 255, 0.24) !important;
    box-shadow:
        0 14px 36px rgba(2, 8, 23, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Titulos header */
.th-header h1,
.header h1,
.topbar h1,
.th-topbar h1,
.th-page-head h1,
.th-page-title {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(65, 182, 255, 0.28) !important;
}

.th-header p,
.header p,
.topbar p,
.th-topbar p,
.th-page-head p,
.th-page-subtitle {
    color: rgba(234, 246, 255, 0.76) !important;
}

/* Estado WS */
.th-ws-status,
.ws-status,
#wsStatus,
.th-status-online {
    background:
        linear-gradient(135deg, rgba(22, 199, 132, 0.22), rgba(22, 199, 132, 0.08)) !important;
    color: #b7ffdb !important;
    border: 1px solid rgba(22, 199, 132, 0.42) !important;
    box-shadow:
        0 0 22px rgba(22, 199, 132, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Usuario header */
.th-user-pill,
.user-pill,
.th-header-user {
    background:
        linear-gradient(135deg, rgba(47, 155, 230, 0.26), rgba(255, 255, 255, 0.06)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(124, 207, 255, 0.38) !important;
    box-shadow:
        0 0 22px rgba(47, 155, 230, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Boton salir */
.th-logout,
.logout,
a[href*="logout"],
button[id*="logout"],
button[class*="logout"] {
    background:
        linear-gradient(135deg, rgba(239, 91, 115, 0.16), rgba(239, 91, 115, 0.05)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(239, 91, 115, 0.48) !important;
    box-shadow:
        0 0 22px rgba(239, 91, 115, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.th-logout:hover,
.logout:hover,
a[href*="logout"]:hover,
button[id*="logout"]:hover,
button[class*="logout"]:hover {
    box-shadow:
        0 0 28px rgba(239, 91, 115, 0.28),
        0 0 0 4px rgba(239, 91, 115, 0.10) !important;
}

/* Cards con iluminacion TelHarbor */
.th-card {
    border: 1px solid rgba(157, 203, 232, 0.78) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 253, 255, 0.96) 100%) !important;
    box-shadow:
        0 18px 42px rgba(6, 31, 51, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Botones globales */
.th-btn,
button,
input[type="submit"] {
    border-radius: 13px !important;
    font-weight: 900 !important;
    transition: all 0.18s ease !important;
}

.th-btn-primary,
button[type="submit"],
input[type="submit"] {
    background:
        linear-gradient(135deg, #2f9be6 0%, #41b6ff 100%) !important;
    border: 1px solid rgba(124, 207, 255, 0.68) !important;
    color: #ffffff !important;
    box-shadow:
        0 10px 24px rgba(47, 155, 230, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.th-btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 34px rgba(47, 155, 230, 0.42),
        0 0 0 4px rgba(47, 155, 230, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* Botones secundarios */
.th-btn-ghost,
button.th-btn-ghost {
    background:
        linear-gradient(180deg, #ffffff 0%, #f3faff 100%) !important;
    color: #102238 !important;
    border: 1px solid #cfe4f5 !important;
    box-shadow: 0 8px 18px rgba(6, 31, 51, 0.05) !important;
}

.th-btn-ghost:hover,
button.th-btn-ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 155, 230, 0.65) !important;
    box-shadow:
        0 12px 24px rgba(47, 155, 230, 0.14),
        0 0 0 4px rgba(47, 155, 230, 0.08) !important;
}

/* Compatibilidad con nombres de layout no estandar */
.app-sidebar,
.layout-sidebar {
    background:
        radial-gradient(circle at 15% 4%, rgba(65, 182, 255, 0.28), transparent 18%),
        linear-gradient(180deg, #071b31 0%, #061225 45%, #020817 100%) !important;
}

.app-header,
.layout-header {
    background:
        radial-gradient(circle at 15% 0%, rgba(65, 182, 255, 0.22), transparent 28%),
        linear-gradient(90deg, #071b31 0%, #0d3154 52%, #071b31 100%) !important;
}


/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Ajuste azul corporativo y texto header */

/* Azul mas visible, menos negro */
:root {
    --th-sidebar-blue-1: #0b3a63;
    --th-sidebar-blue-2: #082f52;
    --th-sidebar-blue-3: #062844;
    --th-sidebar-blue-4: #041f36;

    --th-header-blue-1: #0d3f6b;
    --th-header-blue-2: #0b3458;
    --th-header-blue-3: #082b49;

    --th-header-text: #f4fbff;
    --th-header-muted: #b8d8ef;
    --th-header-border: rgba(90, 190, 255, 0.32);
}

/* Sidebar mas azul */
.th-sidebar,
.sidebar,
.app-sidebar,
.layout-sidebar,
aside {
    background:
        radial-gradient(circle at 18% 5%, rgba(82, 184, 255, 0.34), transparent 22%),
        linear-gradient(180deg,
            var(--th-sidebar-blue-1) 0%,
            var(--th-sidebar-blue-2) 34%,
            var(--th-sidebar-blue-3) 68%,
            var(--th-sidebar-blue-4) 100%
        ) !important;
    border-right: 1px solid rgba(124, 207, 255, 0.28) !important;
    box-shadow:
        18px 0 42px rgba(8, 47, 82, 0.20),
        inset -1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* Header mas azul */
.th-header,
.header,
.topbar,
.th-topbar,
.app-header,
.layout-header {
    background:
        radial-gradient(circle at 20% 0%, rgba(82, 184, 255, 0.28), transparent 32%),
        linear-gradient(90deg,
            var(--th-header-blue-1) 0%,
            var(--th-header-blue-2) 52%,
            var(--th-header-blue-3) 100%
        ) !important;
    border-bottom: 1px solid var(--th-header-border) !important;
    box-shadow:
        0 14px 32px rgba(8, 47, 82, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Titulos del header */
.th-header h1,
.header h1,
.topbar h1,
.th-topbar h1,
.app-header h1,
.layout-header h1,
.th-page-title {
    color: var(--th-header-text) !important;
    text-shadow: 0 0 18px rgba(82, 184, 255, 0.35) !important;
}

.th-header p,
.header p,
.topbar p,
.th-topbar p,
.app-header p,
.layout-header p,
.th-page-subtitle {
    color: var(--th-header-muted) !important;
}

/* Usuario del header: corregir texto negro */
.th-user-pill,
.user-pill,
.th-header-user,
.header-user,
.th-current-user,
.th-user-menu,
.th-header .user,
.header .user,
.topbar .user,
.th-topbar .user {
    background:
        linear-gradient(135deg, rgba(82, 184, 255, 0.26), rgba(255, 255, 255, 0.08)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(124, 207, 255, 0.48) !important;
    border-radius: 999px !important;
    box-shadow:
        0 0 22px rgba(65, 182, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Forzar todos los textos dentro del usuario */
.th-user-pill *,
.user-pill *,
.th-header-user *,
.header-user *,
.th-current-user *,
.th-user-menu *,
.th-header .user *,
.header .user *,
.topbar .user *,
.th-topbar .user * {
    color: #ffffff !important;
}

/* Subtexto admin | TelHarbor */
.th-user-pill small,
.user-pill small,
.th-header-user small,
.header-user small,
.th-current-user small,
.th-user-menu small,
.th-header .user small,
.header .user small,
.topbar .user small,
.th-topbar .user small {
    color: #b8d8ef !important;
}

/* En caso de que el texto sea un enlace */
.th-user-pill a,
.user-pill a,
.th-header-user a,
.header-user a,
.th-current-user a,
.th-user-menu a,
.th-header .user a,
.header .user a,
.topbar .user a,
.th-topbar .user a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Avatar TH del header/sidebar */
.th-avatar,
.th-user-avatar,
.th-logo,
.th-brand-logo,
.sidebar-logo {
    background:
        radial-gradient(circle at 35% 28%, #bcecff 0%, #41b6ff 36%, #1769b3 72%, #0b3a63 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(188, 236, 255, 0.78) !important;
    box-shadow:
        0 0 0 3px rgba(65, 182, 255, 0.16),
        0 0 26px rgba(65, 182, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* Boton salir con texto visible */
.th-logout,
.logout,
a[href*="logout"],
button[id*="logout"],
button[class*="logout"] {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(239, 91, 115, 0.26), rgba(239, 91, 115, 0.08)) !important;
    border: 1px solid rgba(239, 91, 115, 0.58) !important;
    box-shadow:
        0 0 24px rgba(239, 91, 115, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Links del sidebar mas claros */
.th-sidebar a,
.sidebar a,
.app-sidebar a,
.layout-sidebar a,
aside a {
    color: #eaf6ff !important;
}

.th-sidebar a:hover,
.sidebar a:hover,
.app-sidebar a:hover,
.layout-sidebar a:hover,
aside a:hover {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(65, 182, 255, 0.30), rgba(65, 182, 255, 0.12)) !important;
}

/* Secciones del sidebar */
.th-sidebar-section,
.sidebar-section,
.th-menu-title,
.app-sidebar .section-title,
.layout-sidebar .section-title {
    color: #8fd8ff !important;
}

/* Estado WS mas legible */
.th-ws-status,
.ws-status,
#wsStatus,
.th-status-online {
    color: #d9ffe9 !important;
    background:
        linear-gradient(135deg, rgba(22, 199, 132, 0.28), rgba(22, 199, 132, 0.10)) !important;
    border: 1px solid rgba(22, 199, 132, 0.55) !important;
    box-shadow:
        0 0 22px rgba(22, 199, 132, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}


/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Header/sidebar final corporate fix */

/* Header: forzar texto visible */
.th-header,
.th-header *,
.header,
.header *,
.topbar,
.topbar *,
.th-topbar,
.th-topbar *,
.app-header,
.app-header *,
.layout-header,
.layout-header * {
    color: #f4fbff !important;
}

/* Subtextos del header */
.th-header small,
.header small,
.topbar small,
.th-topbar small,
.app-header small,
.layout-header small,
.th-header .muted,
.header .muted,
.topbar .muted,
.th-topbar .muted {
    color: #b8d8ef !important;
}

/* Usuario header */
.th-user-pill,
.user-pill,
.th-header-user,
.header-user,
.th-current-user,
.th-user-menu,
.th-header [class*="user"],
.header [class*="user"],
.topbar [class*="user"],
.th-topbar [class*="user"] {
    background:
        linear-gradient(135deg, rgba(65, 134, 230, 0.58), rgba(14, 54, 98, 0.72)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(124, 207, 255, 0.72) !important;
    border-radius: 999px !important;
    box-shadow:
        0 0 22px rgba(65, 182, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Forzar nombre administrador en blanco */
.th-user-pill *,
.user-pill *,
.th-header-user *,
.header-user *,
.th-current-user *,
.th-user-menu *,
.th-header [class*="user"] *,
.header [class*="user"] *,
.topbar [class*="user"] *,
.th-topbar [class*="user"] * {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(65, 182, 255, 0.35) !important;
}

/* Subtexto admin | TelHarbor */
.th-user-pill small,
.user-pill small,
.th-header-user small,
.header-user small,
.th-current-user small,
.th-user-menu small,
.th-header [class*="user"] small,
.header [class*="user"] small,
.topbar [class*="user"] small,
.th-topbar [class*="user"] small {
    color: #c7def2 !important;
    text-shadow: none !important;
}

/* Boton hora como panel TelHarbor */
.th-clock,
.th-system-time,
#thClock,
#systemClock,
#headerClock,
.th-header-clock,
.th-time-pill,
.th-header [class*="clock"],
.th-header [class*="time"],
.header [class*="clock"],
.header [class*="time"],
.topbar [class*="clock"],
.topbar [class*="time"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 22px !important;
    border-radius: 13px !important;
    background:
        linear-gradient(135deg, #17d991 0%, #07c982 52%, #08b675 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid rgba(105, 255, 190, 0.55) !important;
    box-shadow:
        0 0 24px rgba(23, 217, 145, 0.45),
        0 10px 26px rgba(7, 201, 130, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16) !important;
    white-space: nowrap !important;
}

/* Si el reloj tiene span interno */
.th-clock *,
.th-system-time *,
#thClock *,
#systemClock *,
#headerClock *,
.th-header-clock *,
.th-time-pill * {
    color: #ffffff !important;
}

/* Header mas azul */
.th-header,
.header,
.topbar,
.th-topbar,
.app-header,
.layout-header {
    background:
        radial-gradient(circle at 12% 0%, rgba(82, 184, 255, 0.34), transparent 34%),
        linear-gradient(90deg, #0d4070 0%, #0a345d 48%, #082b4f 100%) !important;
    border-bottom: 1px solid rgba(124, 207, 255, 0.35) !important;
    box-shadow:
        0 16px 38px rgba(7, 31, 56, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar mas azul, menos negro */
.th-sidebar,
.sidebar,
.app-sidebar,
.layout-sidebar,
aside {
    background:
        radial-gradient(circle at 15% 5%, rgba(82, 184, 255, 0.36), transparent 24%),
        linear-gradient(180deg, #0d3d69 0%, #0a3459 34%, #072b4a 68%, #05233c 100%) !important;
    border-right: 1px solid rgba(124, 207, 255, 0.30) !important;
    box-shadow:
        18px 0 44px rgba(7, 31, 56, 0.22),
        inset -1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* Links sidebar */
.th-sidebar a,
.sidebar a,
.app-sidebar a,
.layout-sidebar a,
aside a {
    position: relative !important;
    color: #eaf6ff !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    transition: all 0.18s ease !important;
}

/* Hover lateral */
.th-sidebar a:hover,
.sidebar a:hover,
.app-sidebar a:hover,
.layout-sidebar a:hover,
aside a:hover {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(65, 182, 255, 0.30), rgba(65, 182, 255, 0.10)) !important;
    border-color: rgba(124, 207, 255, 0.32) !important;
    box-shadow:
        0 0 0 1px rgba(65, 182, 255, 0.10),
        0 0 22px rgba(65, 182, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    transform: translateX(2px);
}

/* Activo fijo lateral */
.th-sidebar a.active,
.sidebar a.active,
.app-sidebar a.active,
.layout-sidebar a.active,
aside a.active,
.th-sidebar li.active > a,
.sidebar li.active > a,
.app-sidebar li.active > a,
.layout-sidebar li.active > a,
aside li.active > a,
.th-sidebar a[aria-current="page"],
.sidebar a[aria-current="page"],
.app-sidebar a[aria-current="page"],
.layout-sidebar a[aria-current="page"],
aside a[aria-current="page"] {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(64, 128, 255, 0.48), rgba(65, 182, 255, 0.16)) !important;
    border: 1px solid rgba(124, 207, 255, 0.62) !important;
    box-shadow:
        0 0 0 1px rgba(65, 182, 255, 0.12),
        0 0 28px rgba(65, 182, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Barra luminosa del activo */
.th-sidebar a.active::before,
.sidebar a.active::before,
.app-sidebar a.active::before,
.layout-sidebar a.active::before,
aside a.active::before,
.th-sidebar a[aria-current="page"]::before,
.sidebar a[aria-current="page"]::before,
.app-sidebar a[aria-current="page"]::before,
.layout-sidebar a[aria-current="page"]::before,
aside a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7ccfff, #2f9be6);
    box-shadow: 0 0 16px rgba(65, 182, 255, 0.72);
}

/* Boton salir */
.th-logout,
.logout,
a[href*="logout"],
button[id*="logout"],
button[class*="logout"] {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(239, 91, 115, 0.26), rgba(239, 91, 115, 0.08)) !important;
    border: 1px solid rgba(239, 91, 115, 0.62) !important;
    border-radius: 999px !important;
    box-shadow:
        0 0 24px rgba(239, 91, 115, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.th-logout *,
.logout *,
a[href*="logout"] *,
button[id*="logout"] *,
button[class*="logout"] * {
    color: #ffffff !important;
}



/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Header right spacing fix */

/* Contenedor derecho del header */
.th-header-right,
.header-right,
.topbar-right,
.th-topbar-right,
.app-header-right,
.layout-header-right,
.th-header .th-actions,
.header .th-actions,
.topbar .th-actions,
.th-topbar .th-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    min-width: max-content !important;
}

/* Header general: separar titulo de acciones */
.th-header,
.header,
.topbar,
.th-topbar,
.app-header,
.layout-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 72px !important;
    padding: 0 22px !important;
}

/* Zona de titulo */
.th-header-left,
.header-left,
.topbar-left,
.th-topbar-left,
.app-header-left,
.layout-header-left,
.th-page-head {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* WS conectado */
.th-ws-status,
.ws-status,
#wsStatus,
.th-status-online {
    flex: 0 0 auto !important;
    min-width: 126px !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: 13px !important;
}

/* Usuario header */
.th-user-pill,
.user-pill,
.th-header-user,
.header-user,
.th-current-user,
.th-user-menu,
.th-header [class*="user"],
.header [class*="user"],
.topbar [class*="user"],
.th-topbar [class*="user"] {
    flex: 0 0 auto !important;
    min-width: 245px !important;
    max-width: 285px !important;
    height: 44px !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    overflow: hidden !important;
}

/* Nombre usuario */
.th-user-pill strong,
.user-pill strong,
.th-header-user strong,
.header-user strong,
.th-current-user strong,
.th-user-menu strong,
.th-header [class*="user"] strong,
.header [class*="user"] strong,
.topbar [class*="user"] strong,
.th-topbar [class*="user"] strong {
    display: block !important;
    max-width: 205px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
}

/* Subtexto admin | TelHarbor */
.th-user-pill small,
.user-pill small,
.th-header-user small,
.header-user small,
.th-current-user small,
.th-user-menu small,
.th-header [class*="user"] small,
.header [class*="user"] small,
.topbar [class*="user"] small,
.th-topbar [class*="user"] small {
    display: block !important;
    max-width: 205px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    color: #c7def2 !important;
}

/* Avatar dentro del usuario */
.th-user-pill .th-avatar,
.user-pill .th-avatar,
.th-header-user .th-avatar,
.header-user .th-avatar,
.th-current-user .th-avatar,
.th-user-menu .th-avatar,
.th-user-pill .th-user-avatar,
.user-pill .th-user-avatar,
.th-header-user .th-user-avatar,
.header-user .th-user-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
}

/* Boton salir separado */
.th-logout,
.logout,
a[href*="logout"],
button[id*="logout"],
button[class*="logout"] {
    flex: 0 0 auto !important;
    min-width: 82px !important;
    height: 42px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Si el header esta muy angosto */
@media (max-width: 1100px) {
    .th-header,
    .header,
    .topbar,
    .th-topbar,
    .app-header,
    .layout-header {
        gap: 12px !important;
        padding: 0 14px !important;
    }

    .th-ws-status,
    .ws-status,
    #wsStatus,
    .th-status-online {
        min-width: 110px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    .th-user-pill,
    .user-pill,
    .th-header-user,
    .header-user,
    .th-current-user,
    .th-user-menu,
    .th-header [class*="user"],
    .header [class*="user"],
    .topbar [class*="user"],
    .th-topbar [class*="user"] {
        min-width: 205px !important;
        max-width: 220px !important;
    }

    .th-user-pill strong,
    .user-pill strong,
    .th-header-user strong,
    .header-user strong,
    .th-current-user strong,
    .th-user-menu strong {
        max-width: 150px !important;
    }
}



/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Header spacing fix seguro */

/* Header general */
.th-header,
.header,
.topbar,
.th-topbar,
.app-header,
.layout-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 72px !important;
    padding: 0 24px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(82, 184, 255, 0.34), transparent 34%),
        linear-gradient(90deg, #0d4070 0%, #0a345d 48%, #082b4f 100%) !important;
    border-bottom: 1px solid rgba(124, 207, 255, 0.35) !important;
}

/* Lado izquierdo del header */
.th-header-left,
.header-left,
.topbar-left,
.th-topbar-left,
.app-header-left,
.layout-header-left,
.th-page-head {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Lado derecho del header */
.th-header-right,
.header-right,
.topbar-right,
.th-topbar-right,
.app-header-right,
.layout-header-right,
.th-header-actions,
.header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* WS conectado */
.th-ws-status,
.ws-status,
#wsStatus,
.th-status-online {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 38px !important;
    min-width: 126px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #d9ffe9 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, rgba(22, 199, 132, 0.28), rgba(22, 199, 132, 0.10)) !important;
    border: 1px solid rgba(22, 199, 132, 0.55) !important;
    box-shadow: 0 0 22px rgba(22, 199, 132, 0.26) !important;
}

/* Usuario, solo clases concretas */
.th-user-pill,
.user-pill,
.th-header-user,
.header-user,
.th-current-user,
.th-user-menu {
    display: inline-grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    flex: 0 0 auto !important;
    width: 255px !important;
    height: 44px !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(65, 134, 230, 0.58), rgba(14, 54, 98, 0.72)) !important;
    border: 1px solid rgba(124, 207, 255, 0.72) !important;
    box-shadow: 0 0 22px rgba(65, 182, 255, 0.28) !important;
}

.th-user-pill *,
.user-pill *,
.th-header-user *,
.header-user *,
.th-current-user *,
.th-user-menu * {
    color: #ffffff !important;
}

.th-user-pill strong,
.user-pill strong,
.th-header-user strong,
.header-user strong,
.th-current-user strong,
.th-user-menu strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
}

.th-user-pill small,
.user-pill small,
.th-header-user small,
.header-user small,
.th-current-user small,
.th-user-menu small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    color: #c7def2 !important;
}

/* Avatar usuario */
.th-user-pill .th-avatar,
.user-pill .th-avatar,
.th-header-user .th-avatar,
.header-user .th-avatar,
.th-current-user .th-avatar,
.th-user-menu .th-avatar,
.th-user-pill .th-user-avatar,
.user-pill .th-user-avatar,
.th-header-user .th-user-avatar,
.header-user .th-user-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
}

/* Boton salir */
.th-logout,
.logout,
a[href*="logout"],
button[id*="logout"],
button[class*="logout"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 86px !important;
    height: 42px !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(239, 91, 115, 0.26), rgba(239, 91, 115, 0.08)) !important;
    border: 1px solid rgba(239, 91, 115, 0.62) !important;
    box-shadow: 0 0 24px rgba(239, 91, 115, 0.26) !important;
}

/* Boton hora verde */
.th-clock,
.th-system-time,
#thClock,
#systemClock,
#headerClock,
.th-header-clock,
.th-time-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 210px !important;
    height: 42px !important;
    padding: 0 22px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #17d991 0%, #07c982 52%, #08b675 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: 1px solid rgba(105, 255, 190, 0.55) !important;
    box-shadow:
        0 0 24px rgba(23, 217, 145, 0.45),
        0 10px 26px rgba(7, 201, 130, 0.22) !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .th-user-pill,
    .user-pill,
    .th-header-user,
    .header-user,
    .th-current-user,
    .th-user-menu {
        width: 220px !important;
    }

    .th-clock,
    .th-system-time,
    #thClock,
    #systemClock,
    #headerClock,
    .th-header-clock,
    .th-time-pill {
        min-width: 170px !important;
        font-size: 13px !important;
    }
}

/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Header real fix th-userbar/th-user-info */

.th-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 76px !important;
    padding: 0 24px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(82, 184, 255, 0.34), transparent 34%),
        linear-gradient(90deg, #0d4070 0%, #0a345d 48%, #082b4f 100%) !important;
    border-bottom: 1px solid rgba(124, 207, 255, 0.35) !important;
    box-shadow:
        0 16px 38px rgba(7, 31, 56, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

.th-header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.th-header-left h1 {
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(82, 184, 255, 0.35) !important;
}

.th-header-left p {
    color: #b8d8ef !important;
}

.th-userbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.th-system-time {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-width: 218px !important;
    padding: 0 22px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #17d991 0%, #07c982 52%, #08b675 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: 1px solid rgba(105, 255, 190, 0.55) !important;
    box-shadow:
        0 0 24px rgba(23, 217, 145, 0.45),
        0 10px 26px rgba(7, 201, 130, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16) !important;
}

.th-ws-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-width: 126px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #d9ffe9 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, rgba(22, 199, 132, 0.28), rgba(22, 199, 132, 0.10)) !important;
    border: 1px solid rgba(22, 199, 132, 0.55) !important;
    box-shadow: 0 0 22px rgba(22, 199, 132, 0.26) !important;
}

.th-user-info {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 280px !important;
    height: 44px !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(65, 134, 230, 0.58), rgba(14, 54, 98, 0.72)) !important;
    border: 1px solid rgba(124, 207, 255, 0.72) !important;
    box-shadow:
        0 0 22px rgba(65, 182, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.th-user-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    background:
        radial-gradient(circle at 35% 28%, #bcecff 0%, #41b6ff 36%, #1769b3 72%, #0b3a63 100%) !important;
    border: 1px solid rgba(188, 236, 255, 0.78) !important;
    box-shadow:
        0 0 0 3px rgba(65, 182, 255, 0.16),
        0 0 18px rgba(65, 182, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.th-user-text {
    min-width: 0 !important;
    overflow: hidden !important;
}

.th-user-text strong,
.th-user-info strong {
    display: block !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 12px rgba(65, 182, 255, 0.35) !important;
}

.th-user-text span,
.th-user-info span {
    display: block !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #c7def2 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.th-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 86px !important;
    height: 42px !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(239, 91, 115, 0.26), rgba(239, 91, 115, 0.08)) !important;
    border: 1px solid rgba(239, 91, 115, 0.62) !important;
    box-shadow:
        0 0 24px rgba(239, 91, 115, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.th-logout:hover {
    color: #ffffff !important;
    box-shadow:
        0 0 30px rgba(239, 91, 115, 0.34),
        0 0 0 4px rgba(239, 91, 115, 0.10) !important;
}

@media (max-width: 1380px) {
    .th-system-time {
        min-width: 180px !important;
        font-size: 13px !important;
        padding: 0 14px !important;
    }

    .th-user-info {
        width: 230px !important;
    }

    .th-user-text strong,
    .th-user-info strong,
    .th-user-text span,
    .th-user-info span {
        max-width: 165px !important;
    }
}

@media (max-width: 1100px) {
    .th-userbar {
        gap: 8px !important;
    }

    .th-system-time {
        display: none !important;
    }

    .th-user-info {
        width: 205px !important;
    }

    .th-user-text strong,
    .th-user-info strong,
    .th-user-text span,
    .th-user-info span {
        max-width: 140px !important;
    }
}


/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - FIX definitivo th-userbar overlap */

/* Reset fuerte del contenedor real del header */
.th-header > .th-userbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    white-space: nowrap !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    grid-template-columns: none !important;
    column-gap: 14px !important;
}

/* Evitar que reglas [class*="user"] afecten al contenedor */
.th-header > .th-userbar::before,
.th-header > .th-userbar::after {
    display: none !important;
    content: none !important;
}

/* Reloj como boton independiente */
.th-header > .th-userbar > .th-system-time {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 235px !important;
    max-width: none !important;
    height: 42px !important;

    padding: 0 22px !important;
    margin: 0 !important;

    overflow: visible !important;
    white-space: nowrap !important;

    border-radius: 13px !important;
    background: linear-gradient(135deg, #17d991 0%, #07c982 52%, #08b675 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(105, 255, 190, 0.55) !important;
    box-shadow:
        0 0 24px rgba(23, 217, 145, 0.45),
        0 10px 26px rgba(7, 201, 130, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16) !important;

    position: static !important;
    transform: none !important;
}

/* WS como boton independiente */
.th-header > .th-userbar > .th-ws-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 128px !important;
    max-width: none !important;
    height: 38px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    overflow: visible !important;
    white-space: nowrap !important;

    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(22, 199, 132, 0.28), rgba(22, 199, 132, 0.10)) !important;
    color: #d9ffe9 !important;
    border: 1px solid rgba(22, 199, 132, 0.55) !important;
    box-shadow: 0 0 22px rgba(22, 199, 132, 0.26) !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;

    position: static !important;
    transform: none !important;
}

/* Usuario como capsula independiente */
.th-header > .th-userbar > .th-user-info {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;

    flex: 0 0 auto !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 44px !important;

    padding: 0 14px !important;
    margin: 0 !important;

    overflow: hidden !important;
    white-space: nowrap !important;

    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(65, 134, 230, 0.58), rgba(14, 54, 98, 0.72)) !important;
    border: 1px solid rgba(124, 207, 255, 0.72) !important;
    box-shadow:
        0 0 22px rgba(65, 182, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    position: static !important;
    transform: none !important;
}

.th-header > .th-userbar > .th-user-info strong {
    color: #ffffff !important;
    display: block !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.th-header > .th-userbar > .th-user-info span {
    color: #c7def2 !important;
    display: block !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* Salir como boton independiente */
.th-header > .th-userbar > .th-logout,
.th-header > .th-userbar > a[href="/logout.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 42px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;

    color: #ffffff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(239, 91, 115, 0.26), rgba(239, 91, 115, 0.08)) !important;
    border: 1px solid rgba(239, 91, 115, 0.62) !important;
    box-shadow:
        0 0 24px rgba(239, 91, 115, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

    position: static !important;
    transform: none !important;
}

/* Header no debe cortar los botones */
.th-header {
    overflow: visible !important;
}

/* Responsive */
@media (max-width: 1450px) {
    .th-header > .th-userbar > .th-system-time {
        min-width: 190px !important;
        font-size: 13px !important;
        padding: 0 14px !important;
    }

    .th-header > .th-userbar > .th-user-info {
        width: 235px !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }

    .th-header > .th-userbar > .th-user-info strong,
    .th-header > .th-userbar > .th-user-info span {
        max-width: 165px !important;
    }
}

/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Fix final usuario header */

/* Hacer mas ancho el bloque de usuario */
.th-header > .th-userbar > .th-user-info {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
}

/* Permitir texto completo */
.th-header > .th-userbar > .th-user-info strong {
    max-width: 270px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.th-header > .th-userbar > .th-user-info span {
    max-width: 270px !important;
    color: #d5eaff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Asegurar avatar TH separado y no encima del texto */
.th-header > .th-userbar > .th-user-info .th-user-avatar {
    grid-column: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
}

/* Asegurar texto en columna 2 */
.th-header > .th-userbar > .th-user-info .th-user-text {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Ajuste responsive */
@media (max-width: 1500px) {
    .th-header > .th-userbar > .th-user-info {
        width: 310px !important;
        min-width: 310px !important;
        max-width: 310px !important;
    }

    .th-header > .th-userbar > .th-user-info strong,
    .th-header > .th-userbar > .th-user-info span {
        max-width: 240px !important;
    }
}


/* Fecha: 2026-06-08 */
/* TelHarbor UCaaS - Header account pill final clean */

.th-header > .th-header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.th-header > .th-header-actions > .th-account-pill {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 11px !important;

    flex: 0 0 auto !important;
    width: 345px !important;
    min-width: 345px !important;
    max-width: 345px !important;
    height: 46px !important;

    padding: 0 15px !important;
    margin: 0 !important;

    overflow: hidden !important;
    white-space: nowrap !important;

    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(65, 134, 230, 0.62), rgba(14, 54, 98, 0.76)) !important;
    border: 1px solid rgba(124, 207, 255, 0.75) !important;
    box-shadow:
        0 0 22px rgba(65, 182, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.th-header > .th-header-actions > .th-account-pill > .th-account-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;

    background:
        radial-gradient(circle at 35% 28%, #bcecff 0%, #41b6ff 36%, #1769b3 72%, #0b3a63 100%) !important;
    border: 1px solid rgba(188, 236, 255, 0.78) !important;
    box-shadow:
        0 0 0 3px rgba(65, 182, 255, 0.16),
        0 0 18px rgba(65, 182, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.th-header > .th-header-actions > .th-account-pill > .th-account-text {
    min-width: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

.th-header > .th-header-actions > .th-account-pill > .th-account-text strong {
    display: block !important;
    width: 100% !important;
    max-width: 270px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-shadow: 0 0 12px rgba(65, 182, 255, 0.35) !important;
}

.th-header > .th-header-actions > .th-account-pill > .th-account-text span {
    display: block !important;
    width: 100% !important;
    max-width: 270px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #d5eaff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Mantener los otros elementos separados */
.th-header > .th-header-actions > .th-system-time,
.th-header > .th-header-actions > .th-ws-status,
.th-header > .th-header-actions > .th-logout {
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
}

/* Responsive */
@media (max-width: 1500px) {
    .th-header > .th-header-actions > .th-account-pill {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
    }

    .th-header > .th-header-actions > .th-account-pill > .th-account-text strong,
    .th-header > .th-header-actions > .th-account-pill > .th-account-text span {
        max-width: 245px !important;
    }
}


/* Fecha: 2026-06-09 */
/* TelHarbor UCaaS - Dashboard KPI dynamic counters */

.th-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.th-kpi-grid-main {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.th-kpi p {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    color: #26384d !important;
    font-weight: 800 !important;
}

.th-ws-events {
    display: grid;
    gap: 8px;
}

.th-ws-event {
    border: 1px solid rgba(157, 203, 232, 0.78);
    border-radius: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    color: #26384d;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .th-kpi-grid-main {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .th-kpi-grid-main {
        grid-template-columns: 1fr !important;
    }
}