/* =========================================================
   CONTROL DE CARGA — UNIFIED BLUE PRODUCT THEME
   Visual-only layer. Do not alter module logic or semantic
   workout/status colors used by planning and analytics.
   ========================================================= */
:root{
  --cc-bg:#f4f7fb;
  --cc-surface:#ffffff;
  --cc-surface-2:#f8fafc;
  --cc-border:#dfe7f1;
  --cc-border-strong:#c8d6e8;
  --cc-text:#0f172a;
  --cc-text-2:#334155;
  --cc-muted:#64748b;
  --cc-primary:#2563eb;
  --cc-primary-2:#1d4ed8;
  --cc-primary-soft:#eff6ff;
  --cc-navy:#0b1f3a;
  --cc-navy-2:#102a4c;
  --cc-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.055);
  --cc-shadow-lg:0 18px 48px rgba(15,23,42,.14);
  --cc-radius:12px;
  --cc-radius-sm:9px;
}

html,body{background:var(--cc-bg)!important;color:var(--cc-text)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
body{font-size:13px;line-height:1.5;letter-spacing:0}
h1,h2,h3,h4,h5,h6{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;color:var(--cc-text)!important;letter-spacing:-.025em!important}
button,input,select,textarea{font-family:inherit!important}

/* ===== APP SHELL ===== */
#app-shell{background:var(--cc-bg)!important}
aside.app-sidebar{width:248px!important;background:linear-gradient(180deg,var(--cc-navy) 0%,#0a1a30 100%)!important;color:#fff!important;border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:10px 0 28px rgba(8,26,48,.08)!important}
.app-sidebar .sidebar-brand{height:72px!important;padding:0 18px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
.app-sidebar .brand-mark{width:40px!important;height:40px!important;border-radius:12px!important;background:linear-gradient(135deg,#3b82f6,#1d4ed8)!important;box-shadow:0 8px 22px rgba(37,99,235,.28)!important;font-weight:800!important}
.app-sidebar .brand-name{font-size:15px!important;font-weight:800!important;letter-spacing:-.03em!important;color:#fff!important}
.app-sidebar .brand-sub{font-size:9.5px!important;letter-spacing:.04em!important;color:rgba(255,255,255,.46)!important}
.sidebar-context{margin:14px 12px 10px!important;padding:12px!important;border-radius:12px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.08)!important}
.sidebar-context-label{font-size:8px!important;letter-spacing:.13em!important;color:rgba(255,255,255,.42)!important;font-weight:800!important}
.sidebar-context-row{font-size:12px!important;color:#fff!important}
.sidebar-team-dot{background:#60a5fa!important;box-shadow:0 0 0 4px rgba(96,165,250,.12)!important}
.app-nav{gap:4px!important}
.nav-section-label{padding:14px 10px 7px!important;font-size:8px!important;letter-spacing:.14em!important;color:rgba(255,255,255,.30)!important}
.app-nav .nav-main,.app-nav .nav-group-toggle{height:40px!important;border-radius:10px!important;color:rgba(255,255,255,.68)!important;background:transparent!important;border:1px solid transparent!important;transition:background .15s ease,color .15s ease,border-color .15s ease!important}
.app-nav .nav-main:hover,.app-nav .nav-group-toggle:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}
.app-nav .nav-main.active,.app-nav .nav-group.active>.nav-group-toggle,.app-nav .nav-group.open>.nav-group-toggle{background:linear-gradient(90deg,rgba(37,99,235,.22),rgba(37,99,235,.07))!important;border-color:rgba(96,165,250,.18)!important;color:#fff!important;box-shadow:inset 3px 0 0 #3b82f6!important}
.app-nav .active .tab-icon,.app-nav .nav-group.active .tab-icon{color:#60a5fa!important}
.app-nav .nav-group-items button.active{background:rgba(37,99,235,.13)!important;color:#fff!important}
.app-nav .nav-group-items button.active .dot{background:#60a5fa!important;box-shadow:0 0 0 3px rgba(96,165,250,.10)!important}
.sidebar-plan-card{border-radius:12px!important;background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(96,165,250,.035))!important;border:1px solid rgba(96,165,250,.16)!important}
.sidebar-plan-dot{background:#60a5fa!important}

/* ===== TOP BAR ===== */
.app-header{height:68px!important;background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--cc-border)!important;box-shadow:0 1px 0 rgba(15,23,42,.02)!important;backdrop-filter:blur(16px)!important;padding:0 22px!important}
.app-header .ah-search{height:40px!important;background:#f8fafc!important;border:1px solid var(--cc-border)!important;border-radius:10px!important}
.app-header .ah-search:focus-within{border-color:#93b4e8!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}
.ah-icon-btn,.header-actions button,.header-equipo-gestionar{border:1px solid var(--cc-border)!important;background:#fff!important;color:var(--cc-text-2)!important;border-radius:10px!important}
.header-actions button.primary,.btn-primary{background:var(--cc-primary)!important;border-color:var(--cc-primary)!important;color:#fff!important;box-shadow:0 6px 16px rgba(37,99,235,.16)!important}
.header-actions button.primary:hover,.btn-primary:hover{background:var(--cc-primary-2)!important;border-color:var(--cc-primary-2)!important}
.header-equipo-select{height:40px!important;border:1px solid var(--cc-border)!important;border-radius:10px!important;background:#fff!important;color:var(--cc-text)!important}

/* ===== MAIN SURFACE ===== */
main{background:var(--cc-bg)!important}
.tab-panel{max-width:1480px!important;margin:0 auto!important;padding:28px 30px 50px!important}
.panel-header{margin-bottom:20px!important;padding-bottom:2px!important}
.panel-header h2,.card-title,.section-title{font-weight:800!important;color:var(--cc-text)!important}
.panel-header h2{font-size:24px!important;letter-spacing:-.04em!important}
.panel-header p,.muted,.page-subtitle{color:var(--cc-muted)!important}

/* ===== CARDS / CONTAINERS ===== */
.card,.panel,.table-wrap,.section-card,.kpi-card,.chart-card,.inicio-card,.inicio-quick-card,.inicio-hero,.profile-card,.task-card,.wellness-question,.modal-content,.settings-card{background:var(--cc-surface)!important;border:1px solid var(--cc-border)!important;border-radius:var(--cc-radius)!important;box-shadow:var(--cc-shadow)!important}
.card,.panel,.section-card,.settings-card{padding:18px!important}
.card:hover,.kpi-card:hover,.task-card:hover{border-color:var(--cc-border-strong)!important}

/* ===== KPIs ===== */
.kpi,.kpi-card,.inicio-kpi,.fr-kpi,.salud-kpi,.v8-kpi{background:linear-gradient(145deg,#fff,#fbfdff)!important;border:1px solid var(--cc-border)!important;border-radius:12px!important;box-shadow:var(--cc-shadow)!important}
.kpi .label,.kpi-label,.fr-kpi-label,.salud-kpi-label{color:var(--cc-muted)!important;font-weight:750!important;letter-spacing:.07em!important;text-transform:uppercase!important}
.kpi .value,.kpi-value,.inicio-kpi-value,.fr-kpi-value,.salud-kpi-value{color:#0f2c5c!important;font-weight:850!important;letter-spacing:-.045em!important}

/* ===== BUTTONS ===== */
.btn,.button,.btn-ghost,.btn-secondary,.btn-outline{min-height:36px!important;padding:0 13px!important;border-radius:10px!important;border:1px solid var(--cc-border)!important;background:#fff!important;color:var(--cc-text-2)!important;font-weight:700!important;box-shadow:none!important;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease!important}
.btn:hover,.button:hover,.btn-ghost:hover,.btn-secondary:hover,.btn-outline:hover{background:#f8fbff!important;border-color:#b8cbe3!important;box-shadow:0 5px 14px rgba(15,23,42,.06)!important;transform:translateY(-1px)!important}
.btn-primary,.button-primary,.btn.btn-primary{background:var(--cc-primary)!important;border-color:var(--cc-primary)!important;color:#fff!important;box-shadow:0 6px 16px rgba(37,99,235,.16)!important}
.btn-primary:hover,.button-primary:hover,.btn.btn-primary:hover{background:var(--cc-primary-2)!important;border-color:var(--cc-primary-2)!important}
.btn-icon{width:36px!important;min-width:36px!important;padding:0!important}

/* ===== FORM CONTROLS ===== */
input,select,textarea{border:1px solid var(--cc-border)!important;border-radius:10px!important;background:#fff!important;color:var(--cc-text)!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:#7aa5e8!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}
input::placeholder,textarea::placeholder{color:#94a3b8!important}

/* ===== TABLES ===== */
.table-wrap{overflow:auto!important}
th{background:#f7f9fc!important;color:#64748b!important;border-bottom:1px solid var(--cc-border)!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.065em!important}
td{border-bottom:1px solid #edf2f7!important;color:var(--cc-text-2)!important}
tbody tr:hover td{background:#f8fbff!important}

/* ===== TOGGLES / PILLS ===== */
.cargas-mode-toggle{background:#eef4fb!important;border:1px solid var(--cc-border)!important;border-radius:10px!important;padding:4px!important}
.cargas-mode-btn{border-radius:8px!important;color:var(--cc-muted)!important}
.cargas-mode-btn.active{background:#fff!important;color:var(--cc-primary)!important;box-shadow:0 2px 6px rgba(15,23,42,.08)!important}
.badge,.pill,.status-badge,.semaforo,.fr-badge{border-radius:999px!important;font-weight:750!important}

/* ===== MODALS ===== */
.modal{background:rgba(15,23,42,.48)!important;backdrop-filter:blur(8px)!important}
.modal-content{box-shadow:var(--cc-shadow-lg)!important;overflow:hidden!important}
.modal-header{padding:18px 20px!important;border-bottom:1px solid var(--cc-border)!important;background:#fff!important}
.modal-header h2,.modal-header h3{font-weight:800!important;color:var(--cc-text)!important}
.modal-body{padding:20px!important}
.modal-actions{padding-top:16px!important;border-top:1px solid var(--cc-border)!important;display:flex!important;justify-content:flex-end!important;gap:8px!important}

/* ===== DASHBOARD HERO ===== */
.inicio-hero{background:linear-gradient(135deg,#0e2a52 0%,#143d78 60%,#2059b4 100%)!important;color:#fff!important;border:0!important;box-shadow:0 18px 40px rgba(15,54,105,.18)!important}
.inicio-hero *{color:inherit}

/* ===== LINKS / HEADINGS ===== */
a{color:var(--cc-primary)}
a:hover{color:var(--cc-primary-2)}

/* ===== LANDING: same blue identity, still distinct from app shell ===== */
.btn-landing.btn-primary{background:var(--cc-primary)!important;border-color:var(--cc-primary)!important;box-shadow:0 10px 24px rgba(37,99,235,.16)!important}

/* ===== PRESERVE SEMANTIC DATA COLORS =====
   Planning session colors / status colors are intentionally not overwritten.
   The theme color applies to the application chrome, not to data encoding. */

/* ===== DARK MODE ===== */
[data-theme="dark"]{
  --cc-bg:#0b1220;--cc-surface:#111a2b;--cc-surface-2:#152236;--cc-border:#263650;--cc-border-strong:#385075;--cc-text:#f4f7fb;--cc-text-2:#d2dceb;--cc-muted:#8fa0b9;
}
[data-theme="dark"] .app-header{background:rgba(11,18,32,.92)!important;border-bottom-color:var(--cc-border)!important}
[data-theme="dark"] .app-header .ah-search,[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .btn,[data-theme="dark"] .header-actions button,[data-theme="dark"] .header-equipo-select{background:#111a2b!important;color:#f4f7fb!important;border-color:var(--cc-border)!important}
[data-theme="dark"] .card,[data-theme="dark"] .panel,[data-theme="dark"] .table-wrap,[data-theme="dark"] .section-card,[data-theme="dark"] .kpi-card,[data-theme="dark"] .chart-card,[data-theme="dark"] .modal-content{background:var(--cc-surface)!important;border-color:var(--cc-border)!important}
[data-theme="dark"] th{background:#152236!important;color:#8fa0b9!important}
[data-theme="dark"] td{border-bottom-color:#20304a!important;color:#d2dceb!important}
[data-theme="dark"] tbody tr:hover td{background:#152236!important}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .tab-panel{padding:20px 16px 40px!important}
  .app-header{padding:0 14px!important}
}
@media(max-width:640px){
  .tab-panel{padding:16px 12px 32px!important}
  .panel-header h2{font-size:21px!important}
}