/* Sales Action Center - sistema visual (tomado del demo Sales_Action_Center_Demo v3, 18-oct-2026) */
:root{
  --navy:#0F1B3D; --ink:#111827; --ink2:#374151; --muted:#5B6475; --faint:#8A93A6; --line:#E3E7EF; --line2:#EEF1F6;
  --bg:#F5F7FB; --card:#FFFFFF; --soft:#F5F7FB; --blue:#2563EB; --blue-ink:#1D4ED8; --blue-t:#EAF1FE; --select:#F5F8FF;
  --green:#16A34A; --green-t:#DCFCE7; --green-ink:#166534; --amber:#D97706; --amber-t:#FEF3C7; --amber-ink:#92400E;
  --red:#DC2626; --red-t:#FEE2E2; --red-ink:#B91C1C; --purple:#7C3AED; --purple-t:#F1EBFE; --purple-ink:#6D28D9;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#E8ECF4; --ink2:#C9D2E6; --muted:#A3ADC2; --faint:#7F8BA8; --line:#2A3553; --line2:#223050; --bg:#0B1430; --card:#121E40; --soft:#16224A; --select:#1A2A5A; --blue-t:#1B2B5C; --green-t:#123A2A; --amber-t:#3A2E12; --red-t:#3B1A1F; --purple-t:#2A1F4D; --blue-ink:#93B4FF; --green-ink:#7FE0A6; --amber-ink:#F5C46B; --red-ink:#FF9A9A; --purple-ink:#C4B5FD; } }
:root[data-theme="dark"]{ --ink:#E8ECF4; --ink2:#C9D2E6; --muted:#A3ADC2; --faint:#7F8BA8; --line:#2A3553; --line2:#223050; --bg:#0B1430; --card:#121E40; --soft:#16224A; --select:#1A2A5A; --blue-t:#1B2B5C; --green-t:#123A2A; --amber-t:#3A2E12; --red-t:#3B1A1F; --purple-t:#2A1F4D; --blue-ink:#93B4FF; --green-ink:#7FE0A6; --amber-ink:#F5C46B; --red-ink:#FF9A9A; --purple-ink:#C4B5FD; }
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased}
button{font:inherit; cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #60A5FA; outline-offset:2px}
.app{display:grid; grid-template-columns:248px minmax(0,1fr); height:100%}
aside.side{background:var(--navy); color:#B8C3DB; padding:22px 16px; display:flex; flex-direction:column; gap:20px; overflow-y:auto}
.brand{display:flex; align-items:center; gap:10px; padding:0 6px}
.brand b{width:32px; height:32px; border-radius:9px; background:#2563EB; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800}
.brand span{display:flex; flex-direction:column; line-height:1.15}
.brand strong{color:#fff; font-size:13px; letter-spacing:.06em}
.brand small{font-size:11px; letter-spacing:.14em}
.roles{display:flex; flex-direction:column; gap:6px}
.roles p{margin:0 6px 2px; font-size:11px; color:#7F8BA8; font-weight:700}
.role{display:flex; align-items:center; gap:10px; width:100%; border:1px solid rgba(255,255,255,.12); background:transparent; color:#B8C3DB; padding:9px 10px; border-radius:11px; text-align:left; font-size:13px; font-weight:600}
.role[aria-pressed="true"]{background:#fff; color:#0F1B3D; border-color:#fff}
.role i{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; font-weight:800; color:#fff; flex-shrink:0}
.nav{display:flex; flex-direction:column; gap:3px; flex-grow:1}
.nav button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; color:#B8C3DB; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500}
.nav button::before{content:""; width:6px; height:6px; border-radius:50%; background:rgba(184,195,219,.5)}
.nav button[aria-current="page"]{background:rgba(255,255,255,.1); color:#fff; font-weight:700}
.nav button[aria-current="page"]::before{background:#fff}
.nav .badge{margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#DC2626; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center}
.reset{border:1px solid rgba(255,255,255,.15); background:transparent; color:#B8C3DB; border-radius:10px; padding:9px; font-size:12px; font-weight:600}
main{overflow-y:auto; min-width:0}
.page{padding:28px 36px 48px; display:flex; flex-direction:column; gap:20px; max-width:1360px}
.live{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--green-ink)}
.live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-t)}
h1{margin:0; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
h2{margin:0; font-size:17px; font-weight:800; color:var(--ink)}
.sub{margin:0; font-size:15px; color:var(--muted)}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px}
.pad{padding:18px 20px}
.row{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.lbl{font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--muted)}
.btn{height:44px; padding:0 18px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:14px; font-weight:700; white-space:nowrap}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff}
.btn.sm{height:34px; padding:0 12px; font-size:12px; border-radius:9px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.pill{height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink2); font-size:13px; font-weight:600}
.pill[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:3px}
.kpi b{font-size:26px; font-weight:800; letter-spacing:-.02em}
.kpi span{font-size:12px; color:var(--muted)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--ink); background:none; border:0; padding:0; text-align:left}
.check i{width:20px; height:20px; border-radius:6px; border:2px solid #C7CDD9; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; font-weight:800; color:#fff}
.check[aria-pressed="true"] i{background:var(--green); border-color:var(--green)}
.say{margin:0; font-size:17px; line-height:1.6; color:var(--ink)}
.hint{display:flex; gap:10px; background:var(--select); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.45; color:var(--ink2)}
.hint::before{content:"✦"; color:var(--blue-ink)}
.warn{background:var(--amber-t); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.warn .lbl{color:var(--amber-ink)}
textarea{font:inherit; font-size:14px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; resize:vertical; color:var(--ink); background:var(--card); width:100%}
.stepper{display:flex; gap:14px}
.st{flex:1 1 0; display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:3px solid var(--line); background:none; border-top:0; border-left:0; border-right:0; text-align:left; color:var(--faint)}
.st i{width:28px; height:28px; border-radius:50%; border:2px solid #D5DAE3; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:13px; flex-shrink:0}
.st b{font-size:15px; display:block}
.st small{font-size:12px; color:var(--faint)}
.st.done{border-color:var(--green); color:var(--ink)}
.st.done i{background:var(--green); border-color:var(--green); color:#fff}
.st.now{border-color:var(--navy); color:var(--ink)}
.st.now i{background:var(--navy); border-color:var(--navy); color:#fff}
.vst{display:flex; flex-direction:column; gap:4px}
.vs{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--faint)}
.vs i{width:18px; height:18px; border-radius:50%; border:2px solid #D5DAE3; flex-shrink:0; font-style:normal; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:800}
.vs.done{color:var(--muted)} .vs.done i{background:var(--green); border-color:var(--green)}
.vs.now{color:var(--ink); font-weight:800} .vs.now i{background:var(--navy); border-color:var(--navy); box-shadow:0 0 0 4px var(--line2)}
.vs.lost{color:var(--red-ink); font-weight:800} .vs.lost i{background:var(--red); border-color:var(--red)}
.vline{width:2px; height:14px; background:var(--line); margin-left:8px}
.tl{display:flex; gap:12px}
.tl .c{display:flex; flex-direction:column; align-items:center}
.tl .c i{width:9px; height:9px; border-radius:50%; margin-top:4px}
.tl .c span{flex-grow:1; width:2px; background:var(--line); margin-top:4px}
.tl .t{display:flex; flex-direction:column; gap:2px; padding-bottom:12px}
.tl .t small{font-size:12px; color:var(--faint)} .tl .t span{font-size:13px; color:var(--ink2); line-height:1.4}
.ref{display:flex; gap:10px; padding:11px 12px; border-radius:11px; border:1px solid var(--line); background:var(--card); text-decoration:none; color:var(--ink)}
.ref.on{border-color:var(--blue); background:var(--select)}
.ref b{font-size:13px; display:block} .ref small{font-size:12px; color:var(--muted)}
details{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card)}
details[open]{border-color:var(--blue); background:var(--select)}
summary{font-size:14px; font-weight:700; cursor:pointer; color:var(--ink)}
details p{margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--ink2)}
table{border-collapse:collapse; width:100%}
th{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--muted); text-align:left; padding:10px 8px; background:var(--soft); white-space:nowrap}
td{padding:12px 8px; border-top:1px solid var(--line2); font-size:14px; vertical-align:middle}
.bar{height:6px; border-radius:6px; background:var(--line2); overflow:hidden} .bar>div{height:6px; border-radius:6px}
.lock{color:#B8C0CE}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--navy); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:50; max-width:90vw}
.modal{position:fixed; inset:0; background:rgba(9,14,32,.55); display:flex; align-items:center; justify-content:center; z-index:40; padding:20px}
/* panel lateral: lo de adentro no se encoge para caber en la altura (se hace scroll) */
.modal > aside.card > *{flex-shrink:0}
.modal > .card{max-width:460px; width:100%; padding:22px; display:flex; flex-direction:column; gap:14px}
/* modales centrados: no pasan de la altura de la pantalla; si no cabe, scroll (el panel lateral ya ocupa toda la altura) */
.modal > div.card{max-height:calc(100vh - 40px); overflow-y:auto}
.modal > div.card > *{flex-shrink:0}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.mobile-bar{display:none}
@media (max-width: 1080px){ .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 860px){
  .app{grid-template-columns:minmax(0,1fr); height:auto}
  aside.side{position:sticky; top:0; z-index:20; flex-direction:row; flex-wrap:wrap; padding:10px 12px; gap:8px; align-items:center}
  .brand,.side .who,.reset,.roles p{display:none}
  .roles{flex-direction:row}
  .role{padding:6px 8px; font-size:12px}
  .role i{display:none}
  .nav{flex-direction:row; overflow-x:auto; flex-basis:100%}
  .nav button{white-space:nowrap; padding:8px 10px}
  .page{padding:18px 14px 40px}
  .stepper{gap:6px} .st small{display:none} .st b{font-size:12px}
  .grid3{grid-template-columns:minmax(0,1fr)}
  h1{font-size:24px}
}
@media (prefers-reduced-motion: no-preference){ .toast{animation:up .25s ease} @keyframes up{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}} }
@keyframes sacIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes sacOut{0%{background:#FEF3C7}100%{background:transparent}}
.sac-in{animation:sacIn .45s ease-out}
.sac-flash td{animation:sacOut 2.2s ease-out}
@media (prefers-reduced-motion: reduce){.sac-in,.sac-flash td{animation:none}}

/* ---------- menú único (comun/sac_menu.jspf): enlaces y secciones ---------- */
.nav a{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; color:#B8C3DB; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none}
.nav a::before{content:""; width:6px; height:6px; border-radius:50%; background:rgba(184,195,219,.5); flex-shrink:0}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a[aria-current="page"]{background:rgba(255,255,255,.1); color:#fff; font-weight:700}
.nav a[aria-current="page"]::before{background:#fff}
.nav a.sub{padding-left:28px; font-size:13px}
.nav .sec{margin:14px 6px 4px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7F8BA8}
.nav .sec:first-child{margin-top:0}
a.reset{display:block; text-align:center; text-decoration:none}
a.reset:hover{color:#fff; border-color:rgba(255,255,255,.35)}
@media (max-width: 860px){ .nav .sec{display:none} .nav a{white-space:nowrap; padding:8px 10px; width:auto} .nav a.sub{padding-left:10px} .side .who, .side a.reset{display:none} }

/* ---------- navegación sin parpadeo entre pantallas (View Transitions, Chrome/Edge 126+) ---------- */
@view-transition { navigation: auto; }
.side, .left-sidebar.sac-side { view-transition-name: sac-menu; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* select2 con el look del SAC; conserva el ancho que tenía el select nativo */
.select2-container{font:inherit; font-size:13px; vertical-align:middle}
.select2-container .select2-selection--single{height:36px; border:1px solid var(--line); border-radius:10px; background:var(--card); display:flex; align-items:center}
.select2-container .select2-selection--single .select2-selection__rendered{color:var(--ink); font-weight:600; line-height:34px; padding-left:12px; padding-right:28px}
.select2-container .select2-selection--single .select2-selection__arrow{height:34px; right:6px}
.select2-container--default.select2-container--disabled .select2-selection--single{background:var(--soft); cursor:not-allowed}
.select2-container--default.select2-container--disabled .select2-selection__rendered{color:var(--faint)}
.select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single{border-color:var(--blue)}
.select2-container.s2-plain .select2-selection--single{border:0; background:transparent; height:32px}
.select2-container.s2-plain .select2-selection__rendered{font-weight:700; line-height:32px; padding-left:0}
.select2-dropdown{border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); overflow:hidden; box-shadow:0 10px 30px rgba(15,27,61,.14); z-index:2000}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--blue); color:#fff}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--select); color:var(--ink)}
.select2-results__option{padding:8px 12px; font-size:13px}
.select2-search--dropdown .select2-search__field{border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--card); color:var(--ink)}
/* campos de texto, número y búsqueda con el look del SAC (en claro y oscuro) */
input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], input:not([type]){font:inherit; font-size:14px; height:42px; border:1px solid var(--line); border-radius:10px; padding:0 12px; background:var(--card); color:var(--ink)}
input[type="number"]:focus, input[type="text"]:focus, input[type="search"]:focus{outline:none; border-color:var(--blue)}