:root {
    --brand-amber: #fbbd00;
    --brand-navy: #062d5b;
    --brand-red: #c40000;
}

.app-accent-text {
    color: var(--brand-amber);
}

html[data-theme='light'] .app-accent-text {
    color: var(--brand-navy);
}

.theme-icon-toggle {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 5px 16px rgb(15 23 42 / .06);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.theme-icon-toggle:hover,
.app-icon-button:hover {
    background: var(--app-hover);
}

.theme-icon-toggle:hover {
    transform: translateY(-1px);
}

.theme-icon-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

html[data-theme='dark'] .theme-icon-toggle {
    background: #111827;
}

/* Marca completa: símbolo alineado al top de la R y de altura visual similar. */
.brand-lockup {
    display: flex;
    align-items: flex-start;
    gap: .12rem;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.brand-lockup__symbol,
.brand-lockup__wordmark {
    display: block;
    object-fit: contain;
}

.brand-lockup__symbol {
    flex: 0 0 auto;
}

.brand-lockup__wordmark {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.brand-lockup--login {
    width: 100%;
    max-width: 18.9rem;
    padding: .5rem .6rem;
    overflow: hidden;
    border-radius: .9rem;
}

.brand-lockup--login .brand-lockup__symbol {
    width: 2.55rem;
    height: 2.55rem;
    margin-top: .08rem;
}

.brand-lockup--login .brand-lockup__wordmark {
    width: auto;
    height: auto;
    max-height: 4rem;
}

.brand-lockup--sidebar {
    width: 100%;
    max-width: 15.5rem;
    padding: .35rem .45rem;
    border-radius: .75rem;
}

.brand-lockup--sidebar .brand-lockup__symbol {
    width: 1.85rem;
    height: 1.85rem;
    margin-top: .05rem;
}

.brand-lockup--sidebar .brand-lockup__wordmark {
    width: auto;
    height: auto;
    max-height: 2.7rem;
}

html[data-theme='dark'] .brand-lockup {
    background: #ffffff;
    box-shadow: 0 5px 18px rgb(0 0 0 / .18);
}

html[data-theme='light'] .brand-lockup {
    background: transparent;
}

.auth-card {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 24px 55px rgb(15 23 42 / .18);
}

html[data-theme='dark'] .auth-card {
    box-shadow: 0 24px 55px rgb(0 0 0 / .32);
}

.auth-card-header,
.app-modal-header,
.app-modal-footer,
.app-footer {
    border-color: var(--app-border);
}

.app-input {
    border-color: var(--app-border);
    background: var(--app-input);
    color: var(--app-text);
}

.app-input::placeholder {
    color: var(--app-muted);
}

.app-error-box {
    border-color: rgb(239 68 68 / .28);
    background: rgb(239 68 68 / .10);
    color: #b91c1c;
}

html[data-theme='dark'] .app-error-box {
    color: #fecaca;
}

.dashboard-hero {
    border-color: var(--app-border);
    background: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-2) 100%);
    color: var(--app-text);
}

html[data-theme='dark'] .dashboard-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.dashboard-hero-copy {
    color: var(--app-muted);
}

.dashboard-module-card {
    border-color: var(--app-border);
    background: var(--app-card);
    color: var(--app-text);
    box-shadow: 0 6px 18px rgb(15 23 42 / .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-module-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-navy) 32%, var(--app-border));
    box-shadow: 0 12px 28px rgb(15 23 42 / .08);
}

html[data-theme='dark'] .dashboard-module-card {
    box-shadow: none;
}

html[data-theme='dark'] .dashboard-module-card:hover {
    border-color: color-mix(in srgb, var(--brand-amber) 45%, var(--app-border));
}

html[data-theme='light'] .app-sidebar {
    background: #ffffff;
}

html[data-theme='light'] .app-header {
    box-shadow: 0 1px 0 rgb(15 23 42 / .04);
}

html[data-theme='light'] .app-nav-active {
    background: #eef2f7;
    color: #0f172a;
}

html[data-theme='dark'] .app-nav-active {
    color: #f8fafc;
}

.user-menu__toggle {
    display: inline-flex;
    min-height: 2.7rem;
    align-items: center;
    gap: .55rem;
    max-width: 15rem;
    padding: .3rem .55rem .3rem .35rem;
    border: 1px solid var(--app-border);
    border-radius: .85rem;
    background: var(--app-surface);
    color: var(--app-text);
    transition: background .18s ease, border-color .18s ease;
}

.user-menu__toggle:hover {
    background: var(--app-hover);
}

.user-avatar {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: var(--brand-navy);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}

html[data-theme='dark'] .user-avatar {
    background: var(--brand-amber);
    color: #0f172a;
}

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 60;
    width: 12rem;
    padding: .4rem;
    border: 1px solid var(--app-border);
    border-radius: .9rem;
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 18px 45px rgb(15 23 42 / .14);
}

html[data-theme='dark'] .user-menu__dropdown {
    box-shadow: 0 18px 45px rgb(0 0 0 / .35);
}

.user-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .65rem;
    padding: .7rem .75rem;
    border-radius: .7rem;
    text-align: left;
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text);
    transition: background .15s ease, color .15s ease;
}

.user-menu__item:hover {
    background: var(--app-hover);
}

.user-menu__item svg {
    width: 1.05rem;
    height: 1.05rem;
}

.user-menu__item--danger {
    color: #dc2626;
}

html[data-theme='dark'] .user-menu__item--danger {
    color: #fca5a5;
}

.app-modal-backdrop {
    background: rgb(2 6 23 / .78);
}

.app-modal-panel {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

.app-icon-button,
.app-secondary-button {
    border-color: var(--app-border);
    color: var(--app-text);
}

.app-secondary-button:hover {
    background: var(--app-hover);
}

.profile-password-option {
    border-color: var(--app-border);
    background: var(--app-surface-2);
}

.app-footer {
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    color: var(--app-muted);
}

.cubyweb-credit {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
}

.cubyweb-credit:hover {
    color: var(--app-text);
}

.cubyweb-credit img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

.cubyweb-credit strong {
    color: var(--brand-navy);
}

html[data-theme='dark'] .cubyweb-credit strong {
    color: var(--brand-amber);
}

@media (max-width: 520px) {
    .brand-lockup--login {
        max-width: 100%;
        padding: .45rem .5rem;
    }

    .brand-lockup--login .brand-lockup__symbol {
        width: 2.25rem;
        height: 2.25rem;
    }

    .brand-lockup--login .brand-lockup__wordmark {
        width: auto;
        max-width: calc(100% - 2.37rem);
    }
}


/* === RACO UI POLISH V2: authoritative visual overrides === */
:root {
    --brand-navy: #062d5b;
    --brand-amber: #fbbd00;
    --brand-orange: #f15a24;
}

/* Full brand: mascot must visually match the R cap-height and sit close to it. */
.brand-lockup {
    align-items: flex-start;
    gap: .18rem;
}
.brand-lockup--sidebar {
    max-width: 15.75rem;
    padding: .28rem .35rem;
}
.brand-lockup--sidebar .brand-lockup__symbol {
    width: 2.65rem;
    height: 2.65rem;
    margin-top: .02rem;
    object-fit: contain;
}
.brand-lockup--sidebar .brand-lockup__wordmark {
    flex: 0 1 auto;
    width: 8.9rem;
    max-width: calc(100% - 2.83rem);
    max-height: none;
    height: auto;
}
.brand-lockup--login {
    max-width: 22rem;
    padding: .55rem .65rem;
}
.brand-lockup--login .brand-lockup__symbol {
    width: 4.6rem;
    height: 4.6rem;
    margin-top: .05rem;
    object-fit: contain;
}
.brand-lockup--login .brand-lockup__wordmark {
    flex: 0 1 auto;
    width: 15.2rem;
    max-width: calc(100% - 4.78rem);
    max-height: none;
    height: auto;
}

/* Light mode: navy/yellow are the primary visual anchors. */
html[data-theme='light'] .app-accent-text { color: var(--brand-navy); }
html[data-theme='light'] .app-header { border-bottom-color: #dbe5f0; }
html[data-theme='light'] .app-nav-active {
    position: relative;
    overflow: hidden;
    background: #edf4fb;
    color: var(--brand-navy);
    box-shadow: inset 0 0 0 1px rgb(6 45 91 / .04);
}
html[data-theme='light'] .app-nav-active::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand-amber);
}

html[data-theme='light'] .dashboard-hero {
    position: relative;
    overflow: hidden;
    border-color: #0b3b70;
    background: linear-gradient(135deg, #062d5b 0%, #0b477f 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgb(6 45 91 / .13);
}
html[data-theme='light'] .dashboard-hero::after {
    content: '';
    position: absolute;
    right: -3rem;
    top: -4.5rem;
    width: 13rem;
    height: 13rem;
    border-radius: 999px;
    border: 2rem solid rgb(251 189 0 / .08);
}
html[data-theme='light'] .dashboard-hero .app-accent-text { color: var(--brand-amber); }
html[data-theme='light'] .dashboard-hero-copy { color: #dbe7f4; }

.dashboard-module-card { position: relative; overflow: hidden; }
.dashboard-module-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--brand-amber);
}
html[data-theme='light'] .dashboard-module-card { border-color: #d8e3ef; }
html[data-theme='light'] .dashboard-module-card:hover {
    border-color: rgb(6 45 91 / .38);
    box-shadow: 0 14px 30px rgb(6 45 91 / .09);
}
html[data-theme='dark'] .dashboard-module-card::before { background: var(--brand-amber); }

/* Inputs must always follow the active theme, including password component inputs. */
html[data-theme='light'] .app-modal-panel input:not([type='checkbox']):not([type='radio']),
html[data-theme='light'] .app-modal-panel textarea,
html[data-theme='light'] .app-modal-panel select,
html[data-theme='light'] [data-password-change-fields] input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #d6e0eb !important;
    color-scheme: light;
}
html[data-theme='light'] .app-modal-panel input:focus,
html[data-theme='light'] [data-password-change-fields] input:focus {
    border-color: var(--brand-navy) !important;
    box-shadow: 0 0 0 3px rgb(6 45 91 / .12) !important;
}
html[data-theme='light'] [data-password-toggle] { color: #64748b !important; }
html[data-theme='light'] [data-password-toggle]:hover { color: var(--brand-navy) !important; }

.profile-password-option { transition: border-color .18s ease, background .18s ease; }
html[data-theme='light'] .profile-password-option {
    border-color: #d8e3ef;
    background: #f4f8fc;
}
html[data-theme='light'] .profile-password-option:hover { border-color: rgb(6 45 91 / .32); }

/* Auth gets a subtle brand treatment without becoming busy. */
.auth-card { position: relative; }
.auth-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-navy) 0 72%, var(--brand-amber) 72% 100%);
    z-index: 1;
}
html[data-theme='dark'] .auth-card::before {
    background: linear-gradient(90deg, var(--brand-amber) 0 28%, var(--brand-navy) 28% 100%);
}
html[data-theme='light'] .auth-card-header { background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }
html[data-theme='light'] .auth-card a { color: var(--brand-navy); }
html[data-theme='light'] .auth-card a:hover { color: #0b477f; }

/* Footer: brand line + official CubyWeb orange wordmark treatment. */
.app-footer { position: sticky; }
.app-footer::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-amber));
}
.cubyweb-credit strong,
html[data-theme='dark'] .cubyweb-credit strong { color: var(--brand-orange); }
.cubyweb-credit:hover strong { color: #d94c1d; }

@media (max-width: 520px) {
    .brand-lockup--login .brand-lockup__symbol {
        width: 4rem;
        height: 4rem;
    }
    .brand-lockup--login .brand-lockup__wordmark {
        width: 13.2rem;
        max-width: calc(100% - 4.18rem);
    }
}
/* RACO SIDEBAR MODULES V1 */
.sidebar-nav{
    display:grid;
    gap:1.45rem;
}
.sidebar-dashboard-link,
.sidebar-module-link{
    position:relative;
    display:flex;
    min-height:46px;
    align-items:center;
    gap:.75rem;
    border-radius:.85rem;
    padding:.72rem .85rem;
    color:var(--app-muted);
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
    transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.sidebar-dashboard-link{
    padding:.8rem .9rem;
}
.sidebar-dashboard-link:hover,
.sidebar-module-link:hover{
    background:var(--app-hover);
    color:var(--app-text);
}
.sidebar-dashboard-link:active,
.sidebar-module-link:active{
    transform:translateY(1px);
}
.sidebar-nav-icon{
    width:1.2rem;
    height:1.2rem;
    flex:0 0 auto;
}
.sidebar-module{
    display:grid;
    gap:.55rem;
}
.sidebar-module-title{
    margin:0;
    padding:0 .35rem;
    color:var(--app-muted);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.14em;
    line-height:1.2;
    text-transform:uppercase;
}
.sidebar-module-card{
    display:grid;
    gap:.22rem;
    padding:.42rem;
    border:1px solid var(--app-border);
    border-radius:1rem;
    background:var(--app-surface-2);
    box-shadow:0 8px 24px rgb(15 23 42 / .035);
}
.sidebar-dashboard-link.app-nav-active,
.sidebar-module-link.app-nav-active{
    position:relative;
    overflow:hidden;
    background:#edf4fb;
    color:var(--brand-navy);
    box-shadow:inset 0 0 0 1px rgb(6 45 91 / .05);
}
.sidebar-dashboard-link.app-nav-active::before,
.sidebar-module-link.app-nav-active::before{
    content:'';
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:var(--brand-amber);
}
.sidebar-dashboard-link.app-nav-active .sidebar-nav-icon,
.sidebar-module-link.app-nav-active .sidebar-nav-icon{
    color:var(--brand-navy);
}
html[data-theme='dark'] .sidebar-module-card{
    background:color-mix(in srgb,var(--app-surface-2) 84%,#000 16%);
    border-color:color-mix(in srgb,var(--app-border) 82%,#fff 18%);
    box-shadow:none;
}
html[data-theme='dark'] .sidebar-module-title{
    color:#94a3b8;
}
html[data-theme='dark'] .sidebar-dashboard-link,
html[data-theme='dark'] .sidebar-module-link{
    color:#a8b3c5;
}
html[data-theme='dark'] .sidebar-dashboard-link:hover,
html[data-theme='dark'] .sidebar-module-link:hover{
    background:rgb(255 255 255 / .055);
    color:#f8fafc;
}
html[data-theme='dark'] .sidebar-dashboard-link.app-nav-active,
html[data-theme='dark'] .sidebar-module-link.app-nav-active{
    background:linear-gradient(135deg,rgb(251 189 0 / .14),rgb(255 255 255 / .035));
    color:#f8fafc;
    box-shadow:inset 0 0 0 1px rgb(251 189 0 / .13);
}
html[data-theme='dark'] .sidebar-dashboard-link.app-nav-active .sidebar-nav-icon,
html[data-theme='dark'] .sidebar-module-link.app-nav-active .sidebar-nav-icon{
    color:var(--brand-amber);
}
@media (max-width:1023px){
    .sidebar-nav{
        gap:1.25rem;
        padding-bottom:1.5rem;
    }
    .sidebar-module-card{
        border-radius:.9rem;
    }
}

/* v2.2.0 - Master impersonation banner */
.raco-impersonation-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:.65rem max(.75rem,env(safe-area-inset-right)) max(.65rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));pointer-events:none}
.raco-impersonation-banner__content{width:min(100%,72rem);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(251,189,0,.55);border-radius:1rem;background:rgba(6,45,91,.96);box-shadow:0 18px 50px rgba(2,8,23,.28);padding:.72rem .85rem;color:#fff;backdrop-filter:blur(16px);pointer-events:auto}
.raco-impersonation-banner__identity{display:flex;align-items:center;gap:.7rem;min-width:0}
.raco-impersonation-banner__identity>svg{width:1.25rem;height:1.25rem;min-width:1.25rem;max-width:1.25rem;color:#fbbd00}
.raco-impersonation-banner__identity>div{display:grid;gap:.05rem;min-width:0}
.raco-impersonation-banner__identity strong{font-size:.76rem;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:#fbbd00}
.raco-impersonation-banner__identity span{font-size:.84rem;line-height:1.35;color:#fff}
.raco-impersonation-banner__return{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:40px;border:1px solid rgba(255,255,255,.24);border-radius:.75rem;background:#fbbd00;padding:.55rem .8rem;color:#062d5b;font-size:.78rem;font-weight:850;white-space:nowrap;cursor:pointer}
.raco-impersonation-banner__return:hover{filter:brightness(1.04)}
.raco-impersonation-banner__return svg{width:1rem;height:1rem;min-width:1rem;max-width:1rem}
@media(max-width:640px){.raco-impersonation-banner__content{align-items:stretch;flex-direction:column;gap:.65rem}.raco-impersonation-banner__return{width:100%}}

/* v2.2.1 - Global modal action button normalization */
.app-modal-panel .app-secondary-button,.app-modal-panel [data-modal-close]:not(.app-icon-button){display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--app-border);border-radius:.75rem;background:var(--app-surface-2);color:var(--app-text);padding:.65rem .9rem;font-size:.875rem;font-weight:750;line-height:1.2;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease,opacity .15s ease}
.app-modal-panel .app-secondary-button:hover,.app-modal-panel [data-modal-close]:not(.app-icon-button):hover{background:var(--app-hover);border-color:color-mix(in srgb,var(--brand-navy,#062d5b) 40%,var(--app-border))}
.app-modal-panel .app-secondary-button:focus-visible,.app-modal-panel [data-modal-close]:not(.app-icon-button):focus-visible{outline:2px solid #fbbd00;outline-offset:2px}
.app-modal-panel .app-secondary-button:disabled,.app-modal-panel [data-modal-close]:not(.app-icon-button):disabled{opacity:.55;cursor:not-allowed;transform:none}
.app-modal-panel form button[type="submit"][data-loading-button]{min-height:44px;border-radius:.75rem}
.app-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap}