:root {
    --bg: #170506;
    --surface: #fffaf3;
    --ink: #35121c;
    --muted: #78606a;
    --brand: #7d1724;
    --brand2: #9c2634;
    --gold: #d3a642;
    --line: #dbc18c;
    --shadow: 0 18px 50px #21030e26;
    --chance-backdrop: url('/branding/el-chance-costa-rica-v2.png');
}
body { isolation: isolate; background: var(--bg); }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg,rgba(35,3,9,.12),rgba(23,5,6,.52)),var(--chance-backdrop);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.topbar { background: linear-gradient(110deg,#430a13f5,#77131cf5); border-bottom: 1px solid #d7ad4566; }
.sidebar { background: #3b0d15ed; border-right: 1px solid #d7ad4533; }
.sidebar a:hover,.sidebar a:focus,.sidebar .nav-link--active { background: linear-gradient(110deg,#80602938,#681928); }
.sidebar a,.sidebar .nav-group summary,.sidebar__intro { color: #f5deb0; }
.sidebar .nav-link--active { box-shadow: inset 3px 0 #efca73; }
.sidebar .pending-nav,.sidebar .alert-nav { color: #fff; }
.brand span { color: #f5deb0; }
.topbar .brand { display: flex; flex: 0 0 auto; }
.brand__mark { display: block; object-fit: cover; border: 1px solid #d7ad4580; border-radius: 12px; margin: 0; }
.content { width: calc(100% - 44px); margin: 22px; padding: 28px; border: 1px solid #d7ad4580; border-top: 3px solid var(--gold); border-radius: 24px; background: #fffaf3f5; }
.login-shell { background: transparent; }
.login-card { border-color: #e8c987; background: #fffaf3f5; box-shadow: 0 24px 80px #21030e80; }
.login-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 26px; color: #711b29; text-decoration: none; font-size: 24px; }
.login-brand img { border: 1px solid #d7ad4580; border-radius: 16px; object-fit: cover; }
.primary,.primary-link,.button.primary,button.primary { background: linear-gradient(170deg,#a52937,#701321); border-color: #bd913b; box-shadow: inset 0 1px #fff0bf44,0 8px 18px #7d172426; }
.primary:hover,.button.primary:hover,button.primary:hover { background: #5c111b; }
.sidebar { scrollbar-color: #a16f53 transparent; }
.sidebar .nav-link--active { border-color: #efca7366; }
.sidebar-backdrop { background: #21030e99; }
.brand__copy small { color: #ead1c1; }
.panel,.card { border-color: var(--line); }
.panel > h2:first-child,.card > h2:first-child { color: #7a5718; }
.social-result-card { background: linear-gradient(145deg,#691624,#260b11); }
.form-grid label,.field-label { color: #35121c; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.inline-form input:focus,.inline-form select:focus,.inline-form textarea:focus { border-color: #b98636; box-shadow: 0 0 0 3px #b9863626; }
.empty-state { background: #fbf1e7; border-color: var(--line); }
.page-heading h1,.page-header h1,.section-heading h2 { color: #7a5718; }
.content a:not(.button):not(.primary-link):not(.quick-action):not(.whatsapp-action) { color: #7d1724; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.toolbar a { padding: 9px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: #fffaf3; }
.toolbar a:hover,.toolbar a:focus-visible { border-color: #b98636; background: #f7e8d3; }
.client-manage-button { color: #fff1da; background: linear-gradient(170deg,#a52937,#701321); }
.whatsapp-action { background: #7d1724; border-color: #b98636; color: #fff1da; }
.section-title h2,.section-title h3,.form-subheading,.quick-action,.template-card h3,.template-editor > summary { color: #7a5718; }
.quick-action,.template-card,.info-strip > div,.message-guide article,.responsive-table,.responsive-table tr,.toggle-field { border-color: var(--line); }
.quick-action { background: linear-gradient(135deg,#fffdf8,#fff0cd); }
.quick-action:hover,.quick-action:focus-visible { border-color: #b98636; }
.info-strip > div > span,.message-guide__icon { color: #7a5718; background: #f5e5ba; }
.template-card__preview,.template-editor .form-grid,.template-editor[open] > summary { background: #fbf1e7; }
.template-card__preview,.template-card__preview small,.template-card__meta,.info-strip small,.message-guide small,.quick-action small { color: #78606a; }
.promo-builder { border-top-color: #b98636; }
.promo-table progress::-webkit-progress-value,.promo-table progress::-moz-progress-bar { background: #9c2634; }
input:focus,select:focus,textarea:focus { outline-color: #b98636; border-color: #b98636; }
@media (max-width: 900px) {
    .content { width: calc(100% - 28px); margin: 14px; padding: 22px; }
}
@media (max-width: 768px) {
    :root { --chance-backdrop: url('/branding/el-chance-costa-rica-movil-v2.png'); }
}
@media (max-width: 480px) {
    .content { width: calc(100% - 16px); margin: 10px 8px; padding: 18px 12px; border-radius: 18px; }
    .login-brand { gap: 12px; font-size: 22px; }
    .login-brand img { width: 52px; height: 52px; }
    .topbar__start { gap: 7px; }
}
@media print {
    body::before { display: none; }
    body,.content { background: #fff; }
    .content { width: 100%; margin: 0; border: 0; box-shadow: none; }
}