/* ═══════════════════════════════════════════════════════════════
   Honorax — Identidad de marca (teal + índigo)
   ═══════════════════════════════════════════════════════════════ */

:root {
    --hx-teal: #5de4c7;
    --hx-teal-mid: #2dd4bf;
    --hx-teal-deep: #0d9488;
    --hx-indigo: #7c9cff;
    --hx-indigo-deep: #4f46e5;

    --accent: #14b8a6;
    --accent-hover: #0d9488;
    --accent-deep: #0f766e;
    --accent-soft: #ecfdf5;
    --accent-glow: rgb(93 228 199 / 0.32);
    --border-focus: #5de4c7;
}

.btn-primary {
    color: #042f2e;
    border-color: rgb(45 212 191 / 0.45);
    background: linear-gradient(
        165deg,
        var(--hx-teal) 0%,
        var(--hx-teal-mid) 38%,
        var(--hx-indigo) 100%
    );
    box-shadow:
        0 1px 2px rgb(4 47 46 / 0.08),
        0 8px 22px -4px var(--accent-glow);
}

.btn-primary:hover:not(:disabled) {
    color: #022c22;
    background: linear-gradient(
        165deg,
        #6ee7d9 0%,
        var(--accent-hover) 42%,
        var(--hx-indigo-deep) 100%
    );
}

.nav-link.active::before {
    background: linear-gradient(180deg, var(--hx-teal), var(--hx-indigo));
}

.stat-card::before,
.kpi-mini::before {
    background: linear-gradient(90deg, var(--hx-teal), var(--hx-indigo));
}

.stat-card--accent::before {
    background: linear-gradient(90deg, var(--hx-teal-mid), var(--hx-indigo));
}

.pipeline-cobrar {
    background: linear-gradient(90deg, var(--hx-indigo-deep), var(--hx-indigo)) !important;
}

.pipeline-pagado {
    background: linear-gradient(90deg, var(--hx-teal-deep), var(--hx-teal)) !important;
}

.quick-chip--primary {
    background: linear-gradient(135deg, var(--hx-teal-mid), var(--hx-indigo));
    color: #042f2e;
}

.auth-btn {
    color: #042f2e;
    border-color: rgb(45 212 191 / 0.4);
    background: linear-gradient(165deg, var(--hx-teal) 0%, var(--hx-teal-mid) 40%, var(--hx-indigo) 100%);
}

.auth-btn:hover:not(:disabled) {
    color: #022c22;
}

.mobile-nav-link.active {
    color: var(--accent-deep);
}

/* Selector de tema */
.theme-appearance-card {
    max-width: 720px;
}

.theme-switch {
    display: flex;
    gap: 10px;
    padding: 4px 24px 24px;
    flex-wrap: wrap;
}

.theme-switch-btn {
    flex: 1 1 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    background: #fff;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition:
        background var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out),
        transform var(--t-fast) var(--ease-spring),
        box-shadow var(--t-fast);
}

.theme-switch-btn:hover {
    border-color: var(--hx-teal);
    transform: translateY(-1px);
}

.theme-switch-btn.is-active {
    background: var(--accent-soft);
    border-color: var(--hx-teal);
    color: var(--accent-deep);
    box-shadow: var(--btn-shadow);
}

.theme-switch-icon {
    font-size: 1.1rem;
    line-height: 1;
}