/* TalkConnect brand layer for the shared Razor shell. The WhatsApp chat uses its own layout. */
:root,
[data-bs-theme="light"] {
    --tc-brand: #465fff;
    --tc-brand-strong: #3346c8;
    --tc-navy: #14243a;
    --tc-navy-light: #1b3554;
    --tc-teal: #18a999;
    --tc-page: #f5f7fb;
    --tc-border: #e2e8f0;
    --phoenix-blue: var(--tc-brand);
    --phoenix-primary: var(--tc-brand-strong);
    --phoenix-primary-rgb: 51, 70, 200;
    --phoenix-primary-text-emphasis: #2838a5;
    --phoenix-primary-bg-subtle: #eef1ff;
    --phoenix-primary-border-subtle: #c8d0ff;
    --phoenix-primary-light: var(--tc-brand);
    --phoenix-primary-dark: var(--tc-brand-strong);
    --phoenix-primary-darker: #2636a8;
    --phoenix-link-color: var(--tc-brand-strong);
    --phoenix-link-color-rgb: 51, 70, 200;
    --phoenix-link-hover-color: #2636a8;
    --phoenix-body-bg: var(--tc-page);
    --phoenix-body-bg-rgb: 245, 247, 251;
    --phoenix-border-color: var(--tc-border);
}

[data-bs-theme="dark"] {
    --phoenix-primary: #a5b3ff;
    --phoenix-primary-rgb: 165, 179, 255;
    --phoenix-primary-text-emphasis: #c8d0ff;
    --phoenix-primary-bg-subtle: #222d59;
    --phoenix-primary-border-subtle: #3e4e9d;
    --phoenix-primary-light: #8497ff;
    --phoenix-primary-dark: #a5b3ff;
    --phoenix-primary-darker: #c8d0ff;
    --phoenix-link-color: #a5b3ff;
    --phoenix-link-color-rgb: 165, 179, 255;
    --phoenix-link-hover-color: #d2d9ff;
    --phoenix-border-color: #2d3b52;
}

body {
    background-color: var(--tc-page);
}

[data-bs-theme="dark"] body {
    background-color: #101a2b;
}

/* Primary action colors are set on the component variables by Phoenix itself. */
.btn-primary,
.tox .tox-dialog__footer .tox-button:last-child,
.tox .tox-button {
    --phoenix-btn-bg: var(--tc-brand-strong);
    --phoenix-btn-hover-bg: #293ba9;
    --phoenix-btn-active-bg: #2636a0;
    --phoenix-btn-disabled-bg: var(--tc-brand-strong);
}

.btn-phoenix-primary {
    --phoenix-btn-color: var(--tc-brand-strong);
    --phoenix-btn-hover-color: #293ba9;
    --phoenix-btn-active-color: #2636a0;
    --phoenix-btn-focus-shadow-rgb: 70, 95, 255;
}

[data-bs-theme="dark"] .btn-phoenix-primary {
    --phoenix-btn-color: #a5b3ff;
    --phoenix-btn-hover-color: #d2d9ff;
    --phoenix-btn-active-color: #d2d9ff;
}

.btn-outline-primary {
    --phoenix-btn-color: var(--tc-brand-strong);
    --phoenix-btn-border-color: var(--tc-brand-strong);
    --phoenix-btn-hover-bg: var(--tc-brand-strong);
    --phoenix-btn-hover-border-color: var(--tc-brand-strong);
    --phoenix-btn-active-bg: #293ba9;
    --phoenix-btn-active-border-color: #293ba9;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --phoenix-btn-color: #a5b3ff;
    --phoenix-btn-border-color: #6576d5;
    --phoenix-btn-hover-color: #fff;
    --phoenix-btn-hover-bg: #3346c8;
    --phoenix-btn-hover-border-color: #465fff;
    --phoenix-btn-active-color: #fff;
    --phoenix-btn-active-bg: #293ba9;
    --phoenix-btn-active-border-color: #465fff;
}

.form-control:focus,
.form-select:focus,
.choices.is-focused .choices__inner {
    border-color: var(--tc-brand);
    box-shadow: 0 0 0 .2rem rgba(70, 95, 255, .16);
}

/* Shared Razor top bar and navigation. */
#navbarTopSlim {
    background: linear-gradient(110deg, var(--tc-navy), var(--tc-navy-light)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 8px 28px rgba(20, 36, 58, .18);
}

#navbarTopSlim .tc-wordmark {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #fff !important;
    font-size: 1.05rem;
    letter-spacing: -.025em;
}

.tc-brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: .65rem;
    background: linear-gradient(145deg, var(--tc-brand), var(--tc-teal));
    box-shadow: 0 5px 12px rgba(8, 18, 43, .2);
    color: #fff;
    font-size: .95rem;
}

.tc-wordmark-text {
    color: var(--tc-navy);
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -.045em;
}

.tc-wordmark-text span { color: var(--tc-brand-strong); }
#navbarTopSlim .tc-wordmark-text { color: #fff; }
#navbarTopSlim .tc-wordmark-text span { color: #b7c3ff; }

#navbarTopSlim .navbar-nav-top .nav-link {
    border-radius: .55rem;
    color: rgba(255, 255, 255, .78) !important;
    font-weight: 550;
    transition: background-color .18s ease, color .18s ease;
}

#navbarTopSlim .navbar-nav-top .nav-link:hover,
#navbarTopSlim .navbar-nav-top .nav-link:focus-visible,
#navbarTopSlim .navbar-nav-top .nav-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
}

#navbarTopSlim .navbar-nav-icons .nav-link,
#navbarTopSlim .theme-control-toggle-label {
    color: rgba(255, 255, 255, .86) !important;
}

#navbarTopSlim .navbar-nav-icons .nav-link:hover,
#navbarTopSlim .theme-control-toggle-label:hover {
    color: #fff !important;
}

#navbarTopSlim .theme-control-toggle-label {
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 .2rem !important;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .06);
}

#navbarTopSlim .dropdown-menu {
    border: 1px solid var(--tc-border);
    border-radius: .8rem;
    box-shadow: 0 16px 38px rgba(20, 36, 58, .16);
}

#navbarTopSlim .dropdown-item:hover,
#navbarTopSlim .dropdown-item:focus {
    color: var(--tc-brand-strong);
    background: #eef1ff;
}

[data-bs-theme="dark"] #navbarTopSlim .dropdown-item:hover,
[data-bs-theme="dark"] #navbarTopSlim .dropdown-item:focus {
    color: #c8d0ff;
    background: #243253;
}

#navbarTopSlim .navbar-toggler { color: rgba(255, 255, 255, .9); }

.content { background: var(--tc-page); }
[data-bs-theme="dark"] .content { background: #101a2b; }
.tc-user-trigger-icon { display: none; }
.tc-home-main { padding-top: 5.25rem !important; }

.footer.position-absolute {
    border-top: 1px solid var(--tc-border);
    background: var(--tc-page) !important;
}

[data-bs-theme="dark"] .footer.position-absolute {
    border-color: #2d3b52;
    background: #101a2b !important;
}

/* Authentication pages use the same wordmark and palette as the application shell. */
.tc-auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(70, 95, 255, .1), transparent 28rem),
        radial-gradient(circle at 90% 82%, rgba(24, 169, 153, .09), transparent 26rem),
        #f5f7fb;
}

[data-bs-theme="dark"] .tc-auth-body {
    background:
        radial-gradient(circle at 12% 12%, rgba(70, 95, 255, .16), transparent 28rem),
        radial-gradient(circle at 90% 82%, rgba(24, 169, 153, .1), transparent 26rem),
        #101a2b;
}

.tc-auth-main {
    display: flex;
    min-height: 100vh;
    align-items: center;
    padding-block: 2rem;
}

.tc-auth-card {
    max-width: 500px;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 70px rgba(20, 36, 58, .12);
}

.tc-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-inline: auto;
}

.tc-brand-mark--large {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    font-size: 1.55rem;
}

.tc-auth-heading { margin-top: 2rem; }
.tc-auth-heading h1 { margin: .45rem 0 .5rem; font-size: clamp(1.55rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: -.035em; }
.tc-auth-eyebrow { color: var(--tc-brand-strong); font-size: .68rem; font-weight: 750; letter-spacing: .13em; }
.tc-auth-card .form-label { color: #344054; font-weight: 600; }
.tc-auth-card .form-control { min-height: 3rem; border-radius: .7rem; }
.tc-auth-card .btn-primary { min-height: 3rem; border-radius: .7rem; font-weight: 650; box-shadow: 0 7px 16px rgba(51, 70, 200, .18); }
.tc-auth-card .form-check-input:checked { background-color: var(--tc-brand-strong); border-color: var(--tc-brand-strong); }
[data-bs-theme="dark"] .tc-auth-card { border-color: #2d3b52; background: rgba(20, 36, 58, .97); color: #e8edf6; }
[data-bs-theme="dark"] .tc-auth-card .form-label { color: #e8edf6; }

@media (max-width: 575.98px) {
    .tc-auth-main { padding: 1rem .65rem; }
    .tc-auth-card { padding: 1.35rem; border-radius: 1.15rem; }
    #navbarTopSlim { padding-inline: .65rem; }
    #navbarTopSlim .navbar-logo { flex: 0 0 auto; }
    #navbarTopSlim .navbar-brand { margin-inline-end: .25rem; }
    #navbarTopSlim .tc-wordmark { gap: .45rem; font-size: .98rem; }
    #navbarTopSlim .tc-brand-mark { width: 1.8rem; height: 1.8rem; }
    #navbarTopSlim .navbar-nav-icons { width: auto !important; flex: 1 1 auto; justify-content: flex-end !important; gap: .2rem; margin-inline-start: auto; }
    #navbarTopSlim .navbar-nav-icons > .nav-item { margin-inline: 0 !important; }
    #navbarTopSlim #status_chat,
    #navbarTopSlim #navbarDropdownUser {
        display: inline-flex;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        padding: .45rem;
        border-radius: .65rem;
    }
    #navbarTopSlim #status_chat { font-size: 0; }
    #navbarTopSlim #status_chat .fa-circle { margin: 0 !important; font-size: .6rem; }
    #navbarTopSlim #navbarDropdownUser #nombre_nav,
    #navbarTopSlim #navbarDropdownUser .fa-chevron-down { display: none; }
    #navbarTopSlim .tc-user-trigger-icon { display: inline-grid; place-items: center; font-size: 1rem; }
    #navbarTopSlim .theme-control-toggle-label { width: 2.35rem; height: 2.35rem; padding: 0 !important; margin: 0 !important; }
    .tc-home-main { padding-top: 5.5rem !important; }
}