/* v221 — Courtside product skin: landing visual language inside the application. */
#app-shell{
  --court-ink:#061724;--court-deep:#030d15;--court-panel:#0a1d2d;--court-blue:#2f7df4;
  --court-blue-soft:#e9f2ff;--court-lime:#c6f36b;--court-orange:#ff6b35;
  --court-bg:#edf2f5;--court-sheet:#fff;--court-line:#d3dde4;--court-muted:#657988;
  background:var(--court-bg);color:var(--court-ink);font-family:Inter,"Segoe UI",Arial,sans-serif;
}

/* Product chrome */
#app-shell .app-sidebar{background:linear-gradient(180deg,#030d15,#071a28 70%,#0a2030);border-right:1px solid rgba(255,255,255,.09)}
#app-shell .sidebar-brand{background:transparent;border-bottom:1px solid rgba(255,255,255,.09)}
#app-shell .sidebar-brand .brand-mark{background:none;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
#app-shell .brand-name{color:#fff;font-weight:850;letter-spacing:-.025em}
#app-shell .nav-section-label{color:#6d8798;font-size:9px;letter-spacing:.18em}
#app-shell .app-nav button{position:relative;color:#a8bbc8;border:1px solid transparent;border-radius:12px;font-weight:700;transition:.18s ease}
#app-shell .app-nav button:hover{color:#fff;background:rgba(255,255,255,.055)}
#app-shell .app-nav button.active{color:#fff;background:linear-gradient(110deg,rgba(47,125,244,.24),rgba(47,125,244,.08));border-color:rgba(111,166,255,.24);box-shadow:inset 3px 0 0 var(--court-blue)}
#app-shell .app-nav button.active svg{color:#80b0ff}
#app-shell .app-header{height:72px;padding-inline:28px;background:rgba(6,23,36,.97);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 12px 35px rgba(3,13,21,.16);backdrop-filter:blur(16px)}
#app-shell .app-header .ah-title-wrap h1,#app-shell .app-header .ah-title-wrap strong{color:#fff!important}
#app-shell .app-header .ah-title-wrap .sub{color:#91a8b7;background:rgba(255,255,255,.07)}
#app-shell .app-header button,#app-shell .app-header select{color:#d7e3ea;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);border-radius:10px}
#app-shell .app-header button:hover{color:#fff;background:rgba(255,255,255,.1)}
#app-shell .mobile-nav-toggle{color:#fff!important}

/* Main canvas and common geometry */
#app-shell .app-main{background:
  radial-gradient(circle at 92% 2%,rgba(47,125,244,.095),transparent 25%),
  linear-gradient(180deg,#eaf0f4,#f4f6f7 500px);}
#app-shell .tab-panel{max-width:1600px;margin-inline:auto;padding:30px 34px 56px!important}
#app-shell .tab-panel>.panel-header,
#app-shell .tab-panel>.fr-hero,#app-shell .tab-panel>.isak-hero,#app-shell .tab-panel>.perfiles-hero,
#app-shell .tab-panel>.load-hero,#app-shell .tab-panel>.module-hero,#app-shell .tab-panel>.page-hero{
  position:relative;margin:0 0 24px!important;padding:25px 28px!important;min-height:104px!important;
  color:#fff;background:linear-gradient(115deg,#0b263a,#061724 72%);border:1px solid #173a52!important;border-radius:20px!important;
  box-shadow:0 20px 48px rgba(6,23,36,.14)!important;overflow:hidden!important;
}
#app-shell .tab-panel>.panel-header:before,
#app-shell .tab-panel>.fr-hero:before,#app-shell .tab-panel>.isak-hero:before,#app-shell .tab-panel>.perfiles-hero:before,
#app-shell .tab-panel>.load-hero:before,#app-shell .tab-panel>.module-hero:before,#app-shell .tab-panel>.page-hero:before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(#65a0ff,#2f7df4 55%,#c6f36b);
}
#app-shell .tab-panel>.panel-header h2,#app-shell .tab-panel>.panel-header .panel-title,
#app-shell .tab-panel>.fr-hero h2,#app-shell .tab-panel>.isak-hero h2,#app-shell .tab-panel>.perfiles-hero h2,
#app-shell .tab-panel>.load-hero h2,#app-shell .tab-panel>.module-hero h2,#app-shell .tab-panel>.page-hero h2{
  margin:0 0 7px!important;color:#fff!important;font-size:clamp(25px,2.4vw,38px)!important;line-height:1;letter-spacing:-.045em;
}
#app-shell .tab-panel>.panel-header p,#app-shell .tab-panel>.panel-header .muted,
#app-shell .tab-panel>.fr-hero p,#app-shell .tab-panel>.isak-hero p,#app-shell .tab-panel>.perfiles-hero p,
#app-shell .tab-panel>.load-hero p,#app-shell .tab-panel>.module-hero p,#app-shell .tab-panel>.page-hero p{color:#a9bdca!important}

/* Cards and KPIs */
#app-shell .card,#app-shell [class*="-card"]{border-color:var(--court-line);border-radius:18px;box-shadow:0 12px 34px rgba(6,23,36,.065)}
#app-shell .card{padding:20px;background:rgba(255,255,255,.94)}
#app-shell .card-title{color:var(--court-ink);font-size:13px;font-weight:850;letter-spacing:-.012em}
#app-shell .kpi-grid{gap:12px}
#app-shell .kpi-grid>div,#app-shell .kpi-card,#app-shell .stat-card,#app-shell [class*="kpi-card"]{
  position:relative;background:#fff;border:1px solid var(--court-line);border-radius:15px;box-shadow:0 10px 28px rgba(6,23,36,.055);overflow:hidden;
}
#app-shell .kpi-grid>div:before,#app-shell .kpi-card:before,#app-shell .stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--court-blue)}
#app-shell .kpi-grid strong,#app-shell .kpi-value,#app-shell .stat-value{color:var(--court-ink);font-weight:900;letter-spacing:-.035em}

/* Subnavigation — same pill grammar on every module */
#app-shell .cargas-mode-toggle,#app-shell .plan-v38-tabs,#app-shell .fr-tabs,#app-shell .isak-tabs,
#app-shell .pm-pro-tabs,#app-shell .salud-tabs,#app-shell .subtabs,#app-shell [class*="-tabs"]{
  gap:5px;padding:5px!important;margin-bottom:18px;background:#dfe7ec!important;border:1px solid #c9d5dd!important;border-radius:14px!important;box-shadow:none!important;
}
#app-shell .cargas-mode-toggle button,#app-shell .plan-v38-tabs button,#app-shell .fr-tabs button,#app-shell .isak-tabs button,
#app-shell .pm-pro-tabs button,#app-shell .salud-tabs button,#app-shell .subtabs button,#app-shell [class*="-tabs"] button{
  min-height:40px;padding:9px 16px!important;color:#526b7c;background:transparent!important;border:0!important;border-radius:10px!important;font-weight:800!important;box-shadow:none!important;
}
#app-shell .cargas-mode-toggle button.active,#app-shell .plan-v38-tabs button.active,#app-shell .fr-tabs button.active,
#app-shell .isak-tabs button.active,#app-shell .pm-pro-tabs button.active,#app-shell .salud-tabs button.active,
#app-shell .subtabs button.active,#app-shell [class*="-tabs"] button.active{
  color:#fff!important;background:#071b2c!important;box-shadow:0 8px 20px rgba(6,23,36,.15)!important;
}

/* Controls */
#app-shell input,#app-shell select,#app-shell textarea{min-height:42px;color:#10293b;background:#fff;border:1px solid #c8d4dc;border-radius:10px;box-shadow:0 1px 0 rgba(6,23,36,.025)}
#app-shell input:focus,#app-shell select:focus,#app-shell textarea:focus{outline:0;border-color:#4d91ff;box-shadow:0 0 0 3px rgba(47,125,244,.14)}
#app-shell .btn,#app-shell button.btn{min-height:40px;border-radius:10px;font-weight:800;transition:.16s ease}
#app-shell .btn-primary,#app-shell .btn.btn-primary{color:#fff;background:linear-gradient(135deg,#347ff1,#1859bd);border-color:#3e86f2;box-shadow:0 9px 22px rgba(47,125,244,.2)}
#app-shell .btn-primary:hover,#app-shell .btn.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* Tables: scouting-board density and hierarchy */
#app-shell .table-wrap{border:1px solid var(--court-line)!important;border-radius:14px;background:#fff;overflow:auto}
#app-shell table{background:#fff;border-collapse:separate;border-spacing:0}
#app-shell table thead th{padding:12px 14px;color:#607789;background:#edf2f5;border-bottom:1px solid #cbd7de;font-size:9px;font-weight:900;letter-spacing:.095em;text-transform:uppercase;white-space:nowrap}
#app-shell table tbody td{padding:13px 14px;color:#173044;border-bottom:1px solid #e1e8ec}
#app-shell table tbody tr:hover td{background:#f3f7fa}
#app-shell table tbody tr:last-child td{border-bottom:0}

/* Guidance, alerts and status surfaces */
#app-shell .help-block,#app-shell .info-banner,#app-shell [class*="-notice"],#app-shell [class*="-guide"]{
  border-color:#c6d7e7;border-radius:13px;background:#edf5ff;color:#25435a;
}
#app-shell .badge,#app-shell [class*="status-badge"],#app-shell [class*="-pill"]{border-radius:99px;font-weight:800}

/* Modals keep the same dark header + white work surface. */
#app-shell .modal-overlay{background:rgba(2,9,15,.76);backdrop-filter:blur(7px)}
#app-shell .modal,#app-shell .modal-content,#app-shell [class*="modal-card"]{border:1px solid rgba(176,205,224,.3);border-radius:22px;box-shadow:0 35px 100px rgba(0,0,0,.38)}
#app-shell .modal-header,#app-shell [class*="modal-head"]{color:#fff;background:#071b2c;border-color:#17384e}
#app-shell .modal-header h2,#app-shell .modal-header h3,#app-shell [class*="modal-head"] h2,#app-shell [class*="modal-head"] h3{color:#fff}

/* Scrollbars and focus */
#app-shell *{scrollbar-width:thin;scrollbar-color:#8ba0ae transparent}
#app-shell :focus-visible{outline:2px solid #4d91ff;outline-offset:2px}

/* The current horizontal shell uses the former sidebar as its primary top bar. */
#app-shell>.app-sidebar{background:#061724!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
#app-shell>.app-header{background:#fffefa!important;color:#102432!important;border-bottom:1px solid #d6dee3!important;box-shadow:0 8px 24px rgba(6,23,36,.055)!important}
#app-shell>.app-header .ah-title-wrap h1,#app-shell>.app-header .ah-title-wrap strong{color:#102432!important}
#app-shell>.app-header .ah-title-wrap .sub{color:#657988!important;background:#edf2f5!important}
#app-shell>.app-header button,#app-shell>.app-header select{color:#173044!important;background:#fff!important;border-color:#ccd7de!important}
#app-shell>main{background:radial-gradient(circle at 92% 0,rgba(47,125,244,.1),transparent 25%),linear-gradient(180deg,#eaf0f4,#f4f6f7 520px)!important}

/* Dashboard / Resumen uses a purpose-built command-centre composition. */
#app-shell #inicio-wrap{max-width:1600px;margin:0 auto;padding:30px 34px 58px!important}
#app-shell #inicio-wrap .command-home__masthead{position:relative;padding:28px 30px!important;margin-bottom:18px!important;color:#fff!important;background:linear-gradient(112deg,#0c2b42,#061724 68%)!important;border:1px solid #173b54!important;border-radius:20px!important;box-shadow:0 22px 50px rgba(6,23,36,.15)!important;overflow:hidden}
#app-shell #inicio-wrap .command-home__masthead:after{content:"";position:absolute;width:280px;height:280px;right:-120px;top:-145px;border:55px solid rgba(77,145,255,.1);border-radius:50%}
#app-shell #inicio-wrap .command-home__masthead h2{color:#fff!important;font-size:clamp(30px,3vw,46px)!important;letter-spacing:-.05em!important}
#app-shell #inicio-wrap .command-home__masthead>div:first-child>div,#app-shell #inicio-wrap .command-home__masthead p{color:#9fb5c3!important}
#app-shell #inicio-wrap .command-home__scorestrip{gap:12px!important;margin-bottom:18px!important}
#app-shell #inicio-wrap .command-home__scorestrip>.kpi-card,
#app-shell #inicio-wrap .kpi-card{padding:20px 20px 18px!important;background:#fff!important;border:1px solid #d1dce3!important;border-radius:16px!important;box-shadow:0 12px 30px rgba(6,23,36,.065)!important;overflow:hidden!important}
#app-shell #inicio-wrap .kpi-card:before{content:""!important;display:block!important;position:absolute!important;inset:0 auto 0 0!important;width:4px!important;background:#2f7df4!important}
#app-shell #inicio-wrap .kpi-card:nth-child(2):before{background:#22a97a!important}
#app-shell #inicio-wrap .kpi-card:nth-child(3):before{background:#ff6b35!important}
#app-shell #inicio-wrap .kpi-card:nth-child(4):before{background:#7867e9!important}
#app-shell #inicio-wrap .kpi-card .kpi-label{color:#657b8b!important;font-size:10px!important;letter-spacing:.1em!important}
#app-shell #inicio-wrap .kpi-card .kpi-value{color:#071724!important;font-weight:900!important}
#app-shell #inicio-wrap .dashboard-grid>*,#app-shell #inicio-wrap .command-home__main>*,#app-shell #inicio-wrap .command-home__priority{
  background:#fff!important;border:1px solid #d1dce3!important;border-radius:18px!important;box-shadow:0 14px 36px rgba(6,23,36,.065)!important;
}

/* Important legacy geometry is deliberately overridden here. */
#app-shell .card,#app-shell [class*="-card"]{border-radius:18px!important;box-shadow:0 12px 34px rgba(6,23,36,.065)!important}
#app-shell .kpi-grid>div,#app-shell .kpi-card,#app-shell .stat-card,#app-shell [class*="kpi-card"]{border-radius:15px!important;border-color:#d1dce3!important;background:#fff!important}
#app-shell .table-wrap{border-radius:14px!important}

@media(max-width:900px){
  #app-shell .tab-panel{padding:20px 20px 44px!important}
  #app-shell .app-header{padding-inline:16px}
}
@media(max-width:760px){
  #app-shell .app-sidebar{box-shadow:22px 0 55px rgba(0,0,0,.35)}
  #app-shell .tab-panel{padding:14px 12px 92px!important}
  #app-shell .tab-panel>.panel-header,#app-shell .tab-panel>.fr-hero,#app-shell .tab-panel>.isak-hero,
  #app-shell .tab-panel>.perfiles-hero,#app-shell .tab-panel>.load-hero,#app-shell .tab-panel>.module-hero,#app-shell .tab-panel>.page-hero{
    padding:20px 18px 20px 23px!important;margin-bottom:14px!important;border-radius:16px!important;
  }
  #app-shell .tab-panel>.panel-header h2,#app-shell .tab-panel>.panel-header .panel-title{font-size:27px!important}
  #app-shell .card{padding:15px;border-radius:14px}
  #app-shell .kpi-grid{gap:8px}
  #app-shell .cargas-mode-toggle,#app-shell .plan-v38-tabs,#app-shell .fr-tabs,#app-shell .isak-tabs,
  #app-shell .pm-pro-tabs,#app-shell .salud-tabs,#app-shell .subtabs,#app-shell [class*="-tabs"]{border-radius:12px!important}
  #app-shell table thead th,#app-shell table tbody td{padding:10px 11px}
  #app-shell #inicio-wrap{padding:14px 12px 92px!important}
  #app-shell #inicio-wrap .command-home__masthead{padding:21px 19px!important;border-radius:16px!important}
  #app-shell #inicio-wrap .command-home__masthead h2{font-size:31px!important}
  #app-shell #inicio-wrap .command-home__scorestrip{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #app-shell #inicio-wrap .command-home__scorestrip>.kpi-card{min-width:0!important;padding:16px 14px!important;border-radius:13px!important}
}