/* =========================================================
   CONTROL DE CARGA — V4 PRODUCT UI
   Original design inspired by modern sports-management SaaS:
   compact navigation, card-based data, strong hierarchy and dense tables.
   ========================================================= */
:root{
 --ui-bg:#f3f5f9; --ui-surface:#fff; --ui-surface2:#f8f9fc; --ui-border:#e4e7ee;
 --ui-text:#111827; --ui-muted:#737b8d; --ui-nav:#111827; --ui-nav2:#182236;
 --ui-accent:#6c5ce7; --ui-accent2:#8c7cf5; --ui-cyan:#22c7d6; --ui-green:#18b77a;
 --ui-warn:#f59e0b; --ui-red:#ee5c69; --ui-radius:14px;
 --ui-shadow:0 1px 2px rgba(16,24,40,.03),0 8px 28px rgba(16,24,40,.055);
}
html,body{background:var(--ui-bg)!important;color:var(--ui-text)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
body{font-size:13px;letter-spacing:-.004em}
button,input,select,textarea{font-family:inherit!important}
/* Shell / sidebar */
#app-shell{background:var(--ui-bg)!important}
aside.app-sidebar{width:252px!important;background:linear-gradient(180deg,var(--ui-nav) 0%,#0d1420 100%)!important;color:#fff!important;border-right:1px solid rgba(255,255,255,.05)!important;box-shadow:12px 0 32px rgba(13,20,32,.08)!important}
.app-sidebar .sidebar-brand{height:72px!important;padding:0 18px!important;display:flex!important;align-items:center!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,var(--ui-accent),#4c3bcf)!important;box-shadow:0 8px 22px rgba(108,92,231,.3)!important;font-weight:850!important}
.app-sidebar .brand-name{color:#fff!important;font-size:15px!important;font-weight:850!important;letter-spacing:-.035em!important}
.app-sidebar .brand-sub{color:rgba(255,255,255,.42)!important;font-size:9.5px!important;margin-top:3px!important}
.sidebar-context{margin:14px 12px 8px!important;padding:11px 12px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:12px!important}
.sidebar-context-label{font-size:8px!important;letter-spacing:.14em!important;color:rgba(255,255,255,.34)!important;font-weight:800!important;margin-bottom:7px!important}
.sidebar-context-row{font-size:12px!important;color:#fff!important;gap:8px!important}
.sidebar-context-chevron{margin-left:auto;color:rgba(255,255,255,.35);font-size:14px}
.sidebar-team-dot{background:var(--ui-cyan)!important;box-shadow:0 0 0 4px rgba(34,199,214,.1)!important}
.app-sidebar .sidebar-scroll{padding:8px 10px 12px!important}
.nav-section-label{padding:15px 10px 7px!important;color:rgba(255,255,255,.27)!important;font-size:8px!important;font-weight:800!important;letter-spacing:.15em!important}
.app-nav{gap:3px!important}
.app-nav .nav-main,.app-nav .nav-group-toggle{height:41px!important;border:1px solid transparent!important;border-radius:10px!important;padding:0 11px!important;color:rgba(255,255,255,.62)!important;background:transparent!important;gap:10px!important;transition:.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(108,92,231,.22),rgba(108,92,231,.07))!important;border-color:rgba(140,124,245,.18)!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--ui-accent)!important}
.app-nav .tab-icon{width:17px!important;height:17px!important}
.app-nav .active .tab-icon,.app-nav .nav-group.active .tab-icon{color:#a99dff!important}
.app-nav .tab-label{font-size:12px!important;font-weight:620!important;flex:1;text-align:left}
.app-nav .nav-count{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.5)!important;border-radius:999px!important}
.app-nav .nav-group-items{padding:4px 0 5px 29px!important}
.app-nav .nav-group-items button{height:34px!important;border-radius:8px!important;color:rgba(255,255,255,.46)!important}
.app-nav .nav-group-items button:hover{background:rgba(255,255,255,.04)!important;color:#fff!important}
.app-nav .nav-group-items button.active{background:rgba(108,92,231,.12)!important;color:#fff!important}
.app-nav .nav-group-items button.active .dot{background:#a99dff!important;box-shadow:0 0 0 3px rgba(169,157,255,.1)!important}
.app-sidebar .sidebar-footer{padding:11px!important;border-top:1px solid rgba(255,255,255,.07)!important}
.sidebar-plan-card{padding:11px!important;border-radius:12px!important;background:linear-gradient(135deg,rgba(108,92,231,.16),rgba(34,199,214,.04))!important;border:1px solid rgba(140,124,245,.16)!important}
.sidebar-plan-dot{background:#a99dff!important}
.sidebar-plan-top{font-size:11px!important;font-weight:750!important}
.sidebar-plan-sub{font-size:9.5px!important;color:rgba(255,255,255,.42)!important}
/* App topbar */
.app-header{height:70px!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--ui-border)!important;backdrop-filter:blur(16px)!important;display:flex!important;align-items:center!important;padding:0 22px!important;box-shadow:0 1px 0 rgba(16,24,40,.02)!important;position:sticky!important;top:0!important;z-index:40!important}
.app-header .ah-search{height:40px!important;background:#f8f9fc!important;border:1px solid var(--ui-border)!important;border-radius:11px!important}
.app-header .ah-search:focus-within{border-color:rgba(108,92,231,.5)!important;box-shadow:0 0 0 3px rgba(108,92,231,.09)!important}
.ah-icon-btn,.header-actions button,.header-equipo-gestionar{border:1px solid var(--ui-border)!important;background:#fff!important;color:var(--ui-text)!important;border-radius:10px!important}
.header-actions button.primary{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#fff!important;box-shadow:0 6px 16px rgba(108,92,231,.18)!important}
.header-equipo{margin-left:auto!important}
.header-equipo-select{height:40px!important;border:1px solid var(--ui-border)!important;border-radius:10px!important;background:#fff!important;color:var(--ui-text)!important;font-weight:650!important}
#user-menu.open{display:block!important}
/* Main / cards */
main{background:var(--ui-bg)!important}
.tab-panel{max-width:1440px!important;margin:0 auto!important;padding:26px 30px 48px!important}
.card,.panel,.table-wrap,.inicio-card,.inicio-quick-card,.inicio-hero,.kpi-card,.modal-content{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important}
.card{padding:18px!important}
.card-title,.panel-header h2{color:var(--ui-text)!important;font-weight:800!important;letter-spacing:-.025em!important}
.panel-header{margin-bottom:18px!important}
.muted{color:var(--ui-muted)!important}
.btn{min-height:36px!important;border:1px solid var(--ui-border)!important;background:#fff!important;color:var(--ui-text)!important;border-radius:9px!important;font-weight:650!important;transition:.15s ease!important}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(16,24,40,.07)!important}
.btn-primary{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#fff!important}
.btn-success{background:var(--ui-green)!important;border-color:var(--ui-green)!important;color:#fff!important}
.btn-warn{background:var(--ui-warn)!important;border-color:var(--ui-warn)!important;color:#fff!important}
input,select,textarea{border-color:var(--ui-border)!important;border-radius:9px!important;background:#fff!important;color:var(--ui-text)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:rgba(108,92,231,.65)!important;box-shadow:0 0 0 3px rgba(108,92,231,.09)!important}
th{background:#f8f9fc!important;color:#747b8d!important;border-bottom:1px solid var(--ui-border)!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.07em!important}
td{border-bottom:1px solid #eef0f4!important}
tr:hover td{background:#fafbff!important}
.badge,.pill,.status-badge{border-radius:999px!important;font-weight:750!important}
/* Dashboard hero */
.inicio-hero{background:linear-gradient(135deg,#171e2e 0%,#202943 60%,#343d70 100%)!important;color:#fff!important;border:0!important;box-shadow:0 16px 38px rgba(17,24,39,.18)!important}
.inicio-hero *{color:inherit}
.inicio-kpi,.inicio-quick-card{background:#fff!important;border:1px solid var(--ui-border)!important}
.inicio-kpi-value,.kpi-value{font-weight:850!important;letter-spacing:-.05em!important;color:var(--ui-text)!important}
/* Landing */
.landing{background:#f5f6fa!important;color:var(--ui-text)!important}
.landing-nav{background:rgba(245,246,250,.9)!important;border-bottom:1px solid var(--ui-border)!important;backdrop-filter:blur(16px)!important}
.ln-mark{background:linear-gradient(135deg,var(--ui-accent),#4c3bcf)!important;border-radius:10px!important}
.ln-brand{font-weight:850!important;letter-spacing:-.035em!important}
.landing-hero{background:radial-gradient(circle at 70% 8%,rgba(108,92,231,.12),transparent 30%),#f5f6fa!important}
.lh-badge{border-color:rgba(108,92,231,.18)!important;background:rgba(108,92,231,.06)!important;color:#5648cc!important}
.hl-primary{color:var(--ui-accent)!important}
.btn-landing.btn-primary{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;box-shadow:0 10px 24px rgba(108,92,231,.18)!important}
.price-card{border:1px solid var(--ui-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--ui-shadow)!important}
.price-card.featured{border-color:rgba(108,92,231,.45)!important;box-shadow:0 18px 42px rgba(108,92,231,.12)!important}
/* Modal / overlay */
.modal{background:rgba(15,23,42,.46)!important;backdrop-filter:blur(8px)!important}
.modal-content{box-shadow:0 24px 80px rgba(15,23,42,.22)!important}
/* Dark mode */
[data-theme="dark"]{--ui-bg:#0b1020;--ui-surface:#111827;--ui-surface2:#151e2f;--ui-border:#273247;--ui-text:#f3f4f6;--ui-muted:#9aa4b5}
[data-theme="dark"] main{background:var(--ui-bg)!important}
[data-theme="dark"] .app-header{background:rgba(15,23,42,.92)!important;border-bottom-color:#273247!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:#111827!important;color:#f3f4f6!important;border-color:#273247!important}
[data-theme="dark"] th{background:#151e2f!important;color:#9aa4b5!important}
[data-theme="dark"] td{border-bottom-color:#202b3d!important}
[data-theme="dark"] tr:hover td{background:#151e2f!important}
/* Mobile */
@media(max-width:900px){
 aside.app-sidebar{width:270px!important}
 .tab-panel{padding:18px 14px 38px!important}
 .app-header{padding:0 12px!important}
 .app-header .ah-search{max-width:230px!important}
}
@media(max-width:640px){
 .app-header .ah-search{display:none!important}
 .header-actions button:not(.primary){display:none!important}
 .header-equipo-label,.header-equipo-gestionar{display:none!important}
 .header-equipo-select{max-width:155px!important}
 .tab-panel{padding:14px 10px 30px!important}
}
/* Legacy duplicate placeholders are intentionally hidden in the source; keep them safe. */
[id$="-legacy"],[id$="-legacy2"]{display:none!important}