/* ============ Mis cuentas: maqueta de rediseño de cartera por organización ============ */
.ac{--ac-ink:#10233d;--ac-line:#e3ebf5;--ac-muted:#6f8097;--ac-brand:#2f72f5;--ac-brand-2:#1f5fe8;max-width:1510px;margin:0 auto;color:var(--ac-ink)}
.ac *{box-sizing:border-box}

/* Hero */
.ac .hero{position:relative;display:flex;gap:26px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.ac .hero::after{content:"";position:absolute;right:19%;top:-55px;width:280px;height:160px;background:radial-gradient(circle,rgba(82,141,255,.14),transparent 70%);pointer-events:none}
.ac .eyebrow{position:relative;margin:0 0 7px;color:#2563eb;text-transform:uppercase;letter-spacing:.15em;font-weight:900;font-size:11px}
.ac h1{font-size:clamp(28px,2.2vw,38px);line-height:1.08;letter-spacing:-.035em;margin:0;color:#0c2039}
.ac .subtitle{max-width:780px;margin:10px 0 0;color:#6c7f97;font-size:14px;line-height:1.55}
.ac .primary-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border-radius:13px;background:linear-gradient(135deg,#3076ff,#1f5fe8);color:#fff;font-weight:850;box-shadow:0 10px 22px rgba(37,99,235,.24);transition:.2s ease;white-space:nowrap}
.ac .primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,99,235,.3)}
.ac .primary-btn:active{transform:none}
.ac .primary-btn svg{width:17px;height:17px}

/* Indicadores de cartera */
.ac-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.ac-stat{position:relative;overflow:hidden;min-height:96px;padding:16px;border:1px solid var(--ac-line);border-radius:17px;background:rgba(255,255,255,.88);box-shadow:0 8px 22px rgba(24,62,104,.05)}
.ac-stat::after{content:"";position:absolute;right:-24px;bottom:-35px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(48,118,255,.11),transparent 70%)}
.ac-stat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ac-stat-label{color:#7a8ba0;font-size:11px;font-weight:800}
.ac-stat-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;background:#eef4ff;color:#2f72f5}
.ac-stat-icon svg{width:17px;height:17px}
.ac-stat>strong{position:relative;display:block;margin-top:7px;font-size:25px;letter-spacing:-.04em}
.ac-stat>strong small{color:#8b9bb0;font-size:12px;font-weight:750}
.ac-stat>small{position:relative;display:block;margin-top:2px;color:#8b9bb0;font-size:11px}
.ac-stat.levels ul{position:relative;list-style:none;margin:7px 0 0;padding:0;display:grid;gap:4px}
.ac-stat.levels li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.ac-stat.levels li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5b6b80;font-size:11px;font-weight:750}
.ac-stat.levels li strong{flex:none;font-size:19px;letter-spacing:-.04em}
.ac-stat.levels li strong small{color:#8b9bb0;font-size:10px;font-weight:750}
.ac-stat.levels>small{margin-top:7px}
.ac-stat.warn .ac-stat-icon{background:#fff3e6;color:#c2701a}
.ac-stat.warn::after{background:radial-gradient(circle,rgba(229,165,44,.14),transparent 70%)}

/* Barra de herramientas pegajosa */
.ac-toolbar{position:sticky;top:10px;z-index:15;display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px;border:1px solid var(--ac-line);border-radius:18px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(24,62,104,.05)}
.ac-search{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;height:44px;padding:0 13px;border:1px solid transparent;border-radius:13px;background:#f2f6fb;color:#8a9ab0;transition:.2s ease}
.ac-search:focus-within{background:#fff;border-color:#a7c4fb;box-shadow:0 0 0 4px rgba(47,114,245,.09)}
.ac-search svg{width:18px;height:18px;flex:none}
.ac-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ac-ink);font-size:13px}
.ac-search input::placeholder{color:#9aa9bd}
.ac-filter{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--ac-line);border-radius:13px;background:#fff;color:#516884;font-size:12px;font-weight:800;transition:.2s ease}
.ac-filter svg{width:17px;height:17px}
.ac-filter b{color:#1554c4}
.ac-filter:hover{border-color:#bed3ee;background:#f7fbff}
.ac-views{display:flex;gap:3px;padding:3px;border:1px solid var(--ac-line);border-radius:13px;background:#fff}
.ac-views button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:transparent;color:#93a3b8;transition:.18s ease}
.ac-views button svg{width:17px;height:17px}
.ac-views button:hover{background:#f4f7fc;color:#5d7390}
.ac-views button.active{background:#eef4ff;color:#1f61da}

/* Tarjeta de cuenta */
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ac-card{position:relative;overflow:hidden;padding:20px;border:1px solid var(--ac-line);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(23,57,95,.06);transition:.26s cubic-bezier(.2,.8,.2,1);animation:ac-rise .5s cubic-bezier(.2,.8,.2,1) both}
.ac-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ac-status,#c8d3e0)}
.ac-card:hover{transform:translateY(-4px);border-color:#d5e3f6;box-shadow:0 20px 48px rgba(23,57,95,.12)}
.ac-card[data-risk=ok],.ac-row[data-risk=ok]{--ac-status:var(--st-ok);--ac-status-bg:var(--st-ok-bg);--ac-status-ink:var(--st-ok-ink)}
.ac-card[data-risk=done],.ac-row[data-risk=done]{--ac-status:var(--st-done);--ac-status-bg:var(--st-done-bg);--ac-status-ink:var(--st-done-ink)}
.ac-card[data-risk=watch],.ac-row[data-risk=watch]{--ac-status:var(--st-watch);--ac-status-bg:var(--st-watch-bg);--ac-status-ink:var(--st-watch-ink)}
.ac-card[data-risk=stalled],.ac-row[data-risk=stalled]{--ac-status:var(--st-stalled);--ac-status-bg:var(--st-stalled-bg);--ac-status-ink:var(--st-stalled-ink)}
.ac-card[data-risk=idle],.ac-row[data-risk=idle]{--ac-status:var(--st-idle);--ac-status-bg:var(--st-idle-bg);--ac-status-ink:var(--st-idle-ink)}

.ac-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px}
.ac-logo{width:50px;height:50px;flex:none;display:grid;place-items:center;border:1px solid #dce9fb;border-radius:15px;background:linear-gradient(145deg,#eaf2ff,#f5f8ff);color:#2866c7;font-size:12px;font-style:normal;font-weight:900;letter-spacing:.04em}
.ac-title{min-width:0}
.ac-title h2{margin:0;font-size:17px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-title p{margin:3px 0 0;color:#8492a6;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-status{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--ac-status-bg,#f0f4f8);color:var(--ac-status-ink,#6f8097);font-size:11px;font-weight:850;white-space:nowrap}
.ac-status i{width:7px;height:7px;border-radius:50%;background:var(--ac-status,#c3cede)}

.ac-card-body{margin-top:20px;display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center}
.ac-progress{padding:16px;border:1px solid #ecf1f7;border-radius:17px;background:linear-gradient(145deg,#f8fafd,#f3f6fb)}
.ac-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ac-progress-top strong{font-size:30px;letter-spacing:-.04em}
.ac-progress-top span{color:#94a3b8;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ac-bar{display:block;height:8px;margin-top:10px;overflow:hidden;border-radius:999px;background:#e6ecf4}
.ac-bar i{display:block;height:100%;width:var(--progress,0%);border-radius:inherit;background:linear-gradient(90deg,var(--ac-brand),#2fb9a2);transform-origin:left;animation:ac-load .9s .15s cubic-bezier(.2,.8,.2,1) both}
.ac-progress small{display:block;margin-top:10px;color:#66798f;font-size:11px;line-height:1.4}
.ac-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ac-metric{min-height:66px;padding:11px 12px;border:1px solid #ecf1f7;border-radius:14px;background:#fff}
.ac-metric span{display:block;color:#8b97a9;font-size:10px;font-weight:750}
.ac-metric strong{display:block;margin-top:3px;font-size:16px;letter-spacing:-.02em}
.ac-metric strong small{color:#94a3b8;font-size:10px;font-weight:700}
.ac-metric strong.level{color:#1f61da}
.ac-metric.levels ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.ac-metric.levels li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.ac-metric.levels li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5b6b80;font-size:11px;font-weight:700}
.ac-metric.levels li strong{margin:0;flex:none;font-size:15px}
.ac-metric.levels li strong small{font-size:9px}

.ac-people-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:17px;padding-top:15px;border-top:1px solid #eef2f7}
.ac-people-info{display:flex;align-items:center;gap:10px;min-width:0}
.ac-avatars{display:flex;padding-left:4px}
.ac-person{width:31px;height:31px;margin-left:-4px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#e8f0ff;color:#2a62c3;font-size:9px;font-style:normal;font-weight:900}
.ac-person.more{background:#eef2f7;color:#6b7c91}
.ac-people-copy{min-width:0}
.ac-people-copy b{display:block;font-size:11px}
.ac-people-copy small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:10px}
.ac-last{color:#94a3b8;font-size:10px;white-space:nowrap}

.ac-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid #eef2f7}
.ac-action{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border:1px solid var(--ac-line);border-radius:14px;background:#fff;color:#39506b;font-size:12px;font-weight:800;transition:.2s cubic-bezier(.2,.8,.2,1)}
.ac-action svg{width:17px;height:17px;flex:none}
.ac-action:hover{transform:translateY(-2px);border-color:#bcd3f6;color:#1f61da;background:#f8fbff;box-shadow:0 8px 18px rgba(37,99,235,.08)}
.ac-action.primary{border-color:#cfe0fb;background:#f2f7ff;color:#1554c4}
.ac-action.primary:hover{border-color:#2f72f5;background:#2f72f5;color:#fff;box-shadow:0 10px 21px rgba(37,99,235,.22)}
.ac-count{min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#eef2f7;color:#64748b;font-size:9px}
.ac-action.primary .ac-count{background:#dfeaff;color:#1554c4}
.ac-action.primary:hover .ac-count{background:rgba(255,255,255,.2);color:#fff}

/* Vista de lista */
.ac-list{display:grid;gap:8px}
.ac-row{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(200px,1.5fr) minmax(150px,1fr) 112px minmax(120px,.8fr) 128px 20px;align-items:center;gap:14px;width:100%;padding:13px 16px 13px 18px;border:1px solid var(--ac-line);border-radius:16px;background:#fff;text-align:left;color:inherit;box-shadow:0 6px 18px rgba(23,57,95,.04);transition:.2s ease}
.ac-row::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ac-status,#c8d3e0)}
.ac-row:hover{transform:translateY(-1px);border-color:#d5e3f6;box-shadow:0 12px 28px rgba(23,57,95,.09)}
.ac-row-name{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;min-width:0}
.ac-row .ac-logo{width:38px;height:38px;border-radius:12px;font-size:10px}
.ac-row .ac-title b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ac-row .ac-title small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8492a6;font-size:10px}
.ac-row-progress{min-width:0}
.ac-row-progress .ac-bar{width:100%;margin-top:0}
.ac-row-progress small{display:block;margin-top:5px;color:#7a8ba0;font-size:10px}
.ac-row-score{display:grid;gap:3px;min-width:0;color:#1f61da;letter-spacing:-.02em}
.ac-row-score i{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;font-style:normal}
.ac-row-score em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:10px;font-style:normal;font-weight:750}
.ac-row-score b{flex:none;font-size:14px;font-weight:800}
.ac-row-people b{display:block;font-size:12px}
.ac-row-people small{display:block;margin-top:2px;color:#94a3b8;font-size:10px}
.ac-row-go{color:#b6c2d2;font-size:16px;text-align:right}
.ac-row .ac-status{justify-self:start}

.ac-empty{display:grid;place-items:center;align-content:center;gap:6px;min-height:210px;padding:40px 24px;border:1px dashed #d4dfec;border-radius:20px;background:rgba(255,255,255,.6);color:var(--ac-muted);text-align:center}
.ac-empty b{color:var(--ac-ink);font-size:14px}
.ac-empty span{font-size:12px}

@keyframes ac-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ac-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:1280px){
  .ac-grid{grid-template-columns:1fr}
  .ac-row{grid-template-columns:minmax(180px,1.5fr) minmax(130px,1fr) 104px 128px 20px}
  .ac-row-people{display:none}
}
@media(max-width:1100px){
  .ac-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .ac .hero{display:block}
  .ac .primary-btn{margin-top:16px;width:100%;justify-content:center}
  .ac-toolbar{flex-wrap:wrap}
  .ac-search{min-width:100%;order:1}
  .ac-filter{flex:1;order:2}
  .ac-views{order:2}
  .ac-card-body{grid-template-columns:1fr}
  .ac-progress{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  .ac-progress-top{grid-column:1}
  .ac-progress .ac-bar{grid-column:2;grid-row:1;margin:0}
  .ac-progress small{grid-column:1/-1}
  .ac-actions{grid-template-columns:1fr}
  .ac-action{justify-content:flex-start;padding:0 16px}
  .ac-row{grid-template-columns:minmax(0,1fr) 110px 20px}
  .ac-row-progress,.ac-row-score{display:none}
}
@media(max-width:560px){
  .ac-stats{gap:8px}
  .ac-stat{min-height:88px;padding:14px}
  .ac-stat>strong{font-size:21px}
  .ac-stat>small{display:none}
  .ac-card{padding:16px;border-radius:18px}
  .ac-card-head{grid-template-columns:auto minmax(0,1fr)}
  .ac-status{grid-column:1/-1;justify-self:start}
  .ac-title h2{font-size:15px}
  .ac-people-row{display:block}
  .ac-last{display:block;margin-top:8px}
  .ac-filter span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ac-card,.ac-bar i{animation:none}
}
/* Al teclear en el buscador la lista se repinta: sin re-animar cada tarjeta. */
#ac-panel.no-anim .ac-card,#ac-panel.no-anim .ac-bar i{animation:none}

/* --- Banco de preguntas agrupado por dimensión y su contexto reutilizable. --- */
.dim-actions{display:flex;align-items:center;gap:6px;justify-self:start;white-space:nowrap}
.dim-action{height:34px;border:1px solid #d7e1eb;background:#fff;color:#5a6d86;padding:0 11px;border-radius:9px;font-size:10px;font-weight:800;transition:.18s ease}
.dim-action:hover{border-color:#b7cdf0;color:#1d4ed8;box-shadow:0 5px 14px rgba(37,99,235,.1)}
.dim-action.primary{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 5px 14px rgba(37,99,235,.2)}
.dim-action.primary:hover{color:#fff;filter:brightness(1.05)}
.dim-ready{color:#0f8f7f;font-size:10px;font-weight:800;white-space:nowrap}

.qdim{border-bottom:1px solid #e8edf3;background:#fff}
.qdim:last-child{border-bottom:0}
.qdim-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:linear-gradient(#fbfcfe,#f7f9fc);border-bottom:1px solid transparent;transition:.18s ease}
.qdim.open .qdim-head{border-bottom-color:#e8edf3;background:linear-gradient(#f4f8ff,#fbfcfe)}
.qdim-toggle{display:flex;align-items:center;gap:9px;min-width:0;flex:1;background:transparent;color:#18324f;text-align:left;padding:4px 0}
.qdim-toggle i{width:16px;color:#7b8da4;font-style:normal;font-size:13px;line-height:1}
.qdim-toggle b{font-size:12.5px;letter-spacing:-.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qdim-toggle span{padding:3px 7px;border-radius:99px;background:#e9eef6;color:#5a6d86;font-size:9px;font-weight:800;white-space:nowrap}
.qdim-toggle small{color:#93a3b6;font-size:9.5px;white-space:nowrap}
.qdim-toggle:hover b{color:#1d4ed8}
.qdim-ctx{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.qdim-chip{padding:4px 9px;border-radius:99px;font-size:9px;font-weight:850;white-space:nowrap}
.qdim-chip.ok{background:#e4f7f2;color:#0d7f6f}
.qdim-chip.pending{background:#fdf0e3;color:#a2650d}
.qdim-chip.busy{background:#eaf1ff;color:#2158c9}
.qdim-btn{height:30px;border:1px solid #d7e1eb;background:#fff;color:#5a6d86;padding:0 10px;border-radius:8px;font-size:9.5px;font-weight:800;transition:.18s ease}
.qdim-btn:hover{border-color:#b7cdf0;color:#1d4ed8}
.qdim-btn.primary{border-color:#c7ddff;background:#eef5ff;color:#1d4ed8}
.qdim-btn.primary:hover{background:#2563eb;color:#fff}
.qdim-btn:disabled{opacity:.55;cursor:progress}
.qdim-rows .question-row:last-child{border-bottom:0}

.dim-panel-wrap{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end}
.dim-panel-scrim{flex:1;border:0;background:rgba(11,32,56,.34);backdrop-filter:blur(2px);animation:dimFade .2s ease}
.dim-panel{width:min(560px,100%);height:100%;display:flex;flex-direction:column;gap:14px;padding:20px;overflow-y:auto;background:#fff;box-shadow:-18px 0 46px rgba(15,32,58,.16);animation:dimSlide .24s cubic-bezier(.2,.8,.2,1)}
@keyframes dimFade{from{opacity:0}to{opacity:1}}
@keyframes dimSlide{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.dim-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dim-panel header h2{margin:0;font-size:19px;letter-spacing:-.4px}
.dim-panel .eyebrow{margin:0 0 5px}
.dim-panel-meta{margin:6px 0 0;color:#7b8da4;font-size:11px}
.dim-panel-x{width:30px;height:30px;border-radius:9px;background:#f1f5fa;color:#64778f;font-size:17px;line-height:1}
.dim-panel-x:hover{background:#e6edf6;color:#1d4ed8}
.dim-panel-note{display:flex;gap:10px;padding:11px 13px;border:1px solid #d6efe9;border-radius:11px;background:#f6fdfb}
.dim-panel-note>span{color:#0f8f7f;font-size:15px}
.dim-panel-note b{display:block;font-size:11.5px;color:#136e61}
.dim-panel-note small{display:block;margin-top:3px;color:#4b7a72;font-size:10.5px;line-height:1.45}
.dim-panel-field{display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;flex:1;min-height:0;font-size:11px;font-weight:800;color:#41597a}
.dim-panel-field textarea{width:100%;height:100%;min-height:280px;resize:vertical;border:1px solid #d7e1eb;border-radius:11px;padding:12px;color:#22364f;background:#fbfdff;font:inherit;font-weight:400;font-size:12.5px;line-height:1.6;outline:none}
.dim-panel-field textarea:focus{border-color:#6c9bf1;box-shadow:0 0 0 3px #e8f0ff;background:#fff}
.dim-panel-stamp{margin:0;color:#93a3b6;font-size:10px}
.dim-panel footer{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid #edf1f5}
.dim-panel footer .secondary,.dim-panel footer .primary{height:38px;padding:0 14px;border-radius:9px;font-size:11px;font-weight:800}
.dim-panel footer .primary{margin-left:auto;color:#fff;background:#2563eb}
.dim-panel footer .secondary{background:#eef3f8;color:#41597a}
.dim-panel footer button:disabled{opacity:.55;cursor:progress}
@media(max-width:900px){
  .dim-panel{width:100%;padding:16px}
  .dim-actions{justify-self:stretch}
  .qdim-head{flex-wrap:wrap}
  .qdim-ctx{width:100%;justify-content:flex-end}
}

/* --- Filtro de alcance del banco: un control gobierna indicadores, gráficas y tabla. --- */
.scope-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border:1px solid #e3eaf2;border-radius:14px;background:linear-gradient(#fff,#fbfcfe);box-shadow:0 6px 18px rgba(23,43,77,.04)}
.scope-bar>div{min-width:0}
.scope-bar small{display:block;color:#8496ac;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.scope-bar p{margin:4px 0 0;color:#64778f;font-size:11.5px;line-height:1.4}
.scope-filter{display:flex;gap:3px;flex:0 0 auto;padding:3px;border:1px solid #e4ebf4;border-radius:11px;background:#f4f7fb}
.scope-filter button{min-height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:9px;color:#657990;background:transparent;font-size:11px;font-weight:850;transition:.18s ease;white-space:nowrap}
.scope-filter button:hover{color:#225fd7}
.scope-filter button b{padding:2px 6px;border-radius:99px;color:#61748a;background:#e4eaf2;font-size:9px;font-weight:900}
.scope-filter button.active{color:#174ca9;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.scope-filter button.active b{color:#fff;background:#2563eb}
.dimension-bars .fill.split{display:flex;overflow:hidden}
.dimension-bars .fill.split u,.dimension-bars .fill.split s{display:block;height:100%;text-decoration:none}
.dimension-bars .fill.split u{background:#2563eb}
.dimension-bars .fill.split s{background:#2ed3ba}
.bars-legend{display:flex;gap:14px;margin:2px 0 0;color:#7b8da4;font-size:10px;font-weight:750}
/* El card de gráficas es una fila flex: el rótulo no debe partirse ni robarle ancho al título. */
.question-chart-card header>span{white-space:nowrap}
.question-chart-card header>div{min-width:0}
.bars-legend span{display:inline-flex;align-items:center;gap:6px}
.bars-legend i{width:12px;height:4px;border-radius:2px;display:inline-block}
.bars-legend .lg-tech{background:#2563eb}
.bars-legend .lg-biz{background:#2ed3ba}
@media(max-width:900px){
  .scope-bar{flex-direction:column;align-items:stretch}
  .scope-filter{overflow-x:auto}
}

/* ============================================================
   Capa responsive transversal.
   Va última a propósito: ajusta las vistas que se armaron para
   pantallas anchas (cartera, banco de preguntas, accesos, reporte)
   sin tocar sus reglas base. Objetivo: ningún ancho entre 320px y
   1920px debe producir scroll horizontal ni contenido recortado.
   ============================================================ */

/* --- Raíz del desborde: `main` se dimensionaba por su contenido (fit-content), así
   que cualquier bloque ancho estiraba la página entera y las áreas con scroll propio
   nunca llegaban a usarse. Atado a su columna, el excedente scrollea donde corresponde. --- */
.main{width:100%;min-width:0}

/* --- Cartera del Supervisor: la tabla suelta columnas en vez de desbordar --- */
.pf .table-wrap{overflow-x:auto}                 /* red de seguridad: nunca empuja la página */
@media(max-width:1600px){
  .pf .table-head,.pf .diagnostic-row{
    grid-template-columns:minmax(190px,1.3fr) minmax(120px,.85fr) minmax(130px,.85fr) 70px minmax(105px,.7fr) minmax(100px,.7fr) 30px;
    gap:10px;
  }
  .pf .cell-title small{gap:5px}
  .pf .activity small:last-child{display:none}   /* "por Supervisor 1" cabe en el detalle lateral */
}
@media(max-width:1400px){
  /* Sin "Quién responde" ni "Actividad": el panel de detalle los muestra completos. */
  .pf .table-head>*:nth-child(2),.pf .diagnostic-row>*:nth-child(2),
  .pf .table-head>*:nth-child(6),.pf .diagnostic-row>*:nth-child(6){display:none}
  .pf .table-head,.pf .diagnostic-row{
    grid-template-columns:minmax(180px,1.4fr) minmax(120px,.9fr) 68px minmax(100px,.75fr) 28px;
  }
}
@media(max-width:1150px){
  /* Tampoco "Evidencia": quedan avance y nivel. El seguimiento no se pierde en ningun
     corte, viaja en el riel de la fila. */
  .pf .table-head>*:nth-child(5),.pf .diagnostic-row>*:nth-child(5){display:none}
  .pf .table-head,.pf .diagnostic-row{grid-template-columns:minmax(160px,1.5fr) minmax(110px,.9fr) 64px 26px}
}
@media(max-width:560px){
  .pf .kpi-grid{grid-template-columns:1fr}
  .pf .kpi-label{gap:6px}
  .pf .card-grid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
  .pf .card-footer{flex-wrap:wrap;gap:8px}
  .pf .drawer-stats{grid-template-columns:1fr 1fr}
  .pf .drawer-actions{grid-template-columns:1fr}
  .pf h1{font-size:clamp(22px,7vw,28px)}
}

/* --- Banco de preguntas: cabecera de dimensión que se puede plegar --- */
@media(max-width:1050px){
  .qdim-toggle small{display:none}
  .qdim-chip{max-width:120px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:760px){
  .qdim-head{align-items:flex-start;flex-direction:column;gap:8px}
  .qdim-toggle{width:100%}
  .qdim-toggle b{white-space:normal}
  .qdim-ctx{width:100%;justify-content:space-between}
  .qdim-chip{max-width:none}
}

/* --- Accesos: la tabla de usuarios se desplaza dentro de su tarjeta --- */
@media(max-width:1320px){
  .access-user-table{overflow-x:auto}
  .access-user-row{min-width:700px}
}

/* --- Reporte de madurez: tablas anchas con desplazamiento propio --- */
.xr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.xr-tablewrap .xr-table{min-width:520px}
@media(max-width:680px){
  .xr-tablewrap .xr-table{font-size:11px}
  .xr-table th,.xr-table td{padding:7px 6px}
  .xr-table .xr-barcell{width:86px}
  .xr-table .xr-barcell .xr-mini{width:72px}
}

/* --- Cabeceras de la torre de control: los controles bajan en vez de salirse --- */
@media(max-width:760px){
  .supervisor-head-side{flex-wrap:wrap;flex-shrink:1;min-width:0}
  .supervisor-head-side>*{flex:1 1 auto;min-width:0}
  .supervisor-head{align-items:flex-start;flex-direction:column;gap:12px}
}

/* --- Ajustes generales de las vistas de escritorio en pantallas chicas --- */
@media(max-width:900px){
  .page-head.hero{align-items:flex-start;flex-direction:column}
  .page-head.hero h1{font-size:clamp(24px,6vw,32px)}
  .hero-actions{width:100%;flex-wrap:wrap}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
}
@media(max-width:560px){
  .main{padding:64px 13px 30px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
}

/* --- Analítica del banco: dos tarjetas anchas que se apilan antes de apretarse --- */
@media(max-width:1250px){
  .question-analytics{grid-template-columns:minmax(0,1fr)}
  .question-chart-card{min-height:0}
}
@media(max-width:1250px){
  .analytics .bar-row{grid-template-columns:minmax(110px,.6fr) minmax(110px,1fr) 30px;gap:10px}
}
@media(max-width:560px){
  .analytics .bar-row{grid-template-columns:minmax(0,1fr) minmax(66px,.85fr) 26px;gap:8px}
  /* El selector de alcance se desplaza dentro de su barra en vez de estirarla. */
  .scope-filter{flex:1 1 100%;width:100%;max-width:100%;min-width:0;overflow-x:auto}
  .scope-filter button{flex:0 0 auto}
  .question-chart-card{padding:16px 14px}
  .donut-area{gap:18px!important}
}

/* ============================================================
   Rail lateral en navy: la barra es territorio de marca.
   Va al final del archivo a proposito: refina el shell colapsable
   y necesita ganarle por orden, no por especificidad.
   Sobre fondo oscuro el logotipo se lee sin caja, y el verde de
   "maturity" pasa a ser el acento de toda la barra: activo, estado
   en vivo y firma. El azul se queda en el contenido, que es donde
   viven las acciones.
   ============================================================ */
.side,.client-app .side{background:linear-gradient(184deg,#10365f,#0b2137 78%);border-right:1px solid rgba(255,255,255,.06);backdrop-filter:none}

/* La marca ocupa dos lineas, asi que el boton de contraer se alinea arriba. */
.rail-head{align-items:flex-start;padding:2px 2px 16px}
.rail-toggle{margin-top:2px;background:rgba(255,255,255,.07);color:#a3bad2}
.rail-toggle:hover{background:rgba(255,255,255,.14);color:#fff}

/* Logotipo desnudo sobre el navy: sin fondo propio, el blanco ya contrasta. */
.rail-brand .rail-logo{display:block;max-width:100%;padding:0 2px;color:#fff;font-size:21px;font-weight:900;letter-spacing:-.9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-brand .rail-logo span{color:#54dbc1}
/* La firma de la casa: presente, sin competir con el nombre del producto. */
.rail-byline{padding-left:3px;color:#7d94ac;font-size:9.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.rail-byline b{color:#54dbc1;font-weight:800}
/* El logotipo entra donde estaba el nombre escrito, y se mide por alto: la firma acompana
   a una linea de texto de 9.5px, asi que lo que tiene que casar es la altura, no el ancho.
   El desplazamiento baja el arte a la linea base de "by", que la caja recortada del PNG no
   comparte con el texto. */
.rail-byline{display:flex;align-items:baseline;gap:5px}
.rail-byline .brand-mark{height:16px;width:auto;flex:0 0 auto;transform:translateY(4px)}
.rail-mark{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(84,219,193,.16);grid-auto-flow:column;gap:0;justify-content:center;align-content:center}

/* Organizacion: vidrio sobre el navy, no una tarjeta blanca recortada. */
.rail-org{gap:10px;padding:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.05)}
.rail-org>i{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:rgba(126,178,255,.14);color:#8fbcff;box-shadow:none}
.rail-org small{color:#87a0b9;letter-spacing:.1em}
.rail-org b{font-size:12.5px;color:#fff}

/* Navegacion: el item activo se enciende en el verde de la marca. */
.side-label{color:#748ca6;letter-spacing:.13em}
.nav{position:relative;gap:11px;min-width:0;padding:10px 11px;border-radius:11px;margin:2px 0;color:#a5bcd2}
.nav>i{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.06);color:#8fa8c0;transition:background .16s ease,color .16s ease}
.nav:hover{background:rgba(255,255,255,.06);color:#fff;transform:none}
.nav:hover>i{background:rgba(255,255,255,.12);color:#bfe9de}
.nav.active{color:#7fe9d1;background:rgba(84,219,193,.11);box-shadow:inset 0 0 0 1px rgba(84,219,193,.16)}
.nav.active>i{background:rgba(84,219,193,.18);color:#54dbc1;box-shadow:none}
.nav.active:before{left:-12px;border-radius:0 9px 9px 0;background:#54dbc1;box-shadow:0 0 14px rgba(84,219,193,.5)}

/* Iconos de trazo: un solo tamano en todo el rail. */
.rail-org>i svg,.nav>i svg,.logout>i svg{width:17px;height:17px;display:block}

/* Pie del rail: estado en vivo, identidad y salida. */
.side-bottom{gap:5px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.side-bottom .agent-status{gap:8px;padding:7px 9px;border-radius:9px;background:rgba(41,185,154,.12);border:1px solid rgba(84,219,193,.2)}
.side-bottom .agent-status>i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#54dbc1;animation:rail-pulse 2.4s ease-in-out infinite}
.side-bottom .agent-status b{font-size:10.5px;line-height:1.3;color:#8ce3d3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes rail-pulse{0%,100%{box-shadow:0 0 0 3px rgba(84,219,193,.22)}50%{box-shadow:0 0 0 6px rgba(84,219,193,.04)}}

/* La cuenta es una sola fila; perfil y salida viven en el menu que abre. */
.rail-account{position:relative;min-width:0}
.rail-profile{gap:8px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.rail-profile:hover,.rail-profile[aria-expanded="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.rail-profile>i{width:28px;height:28px;flex:0 0 28px;font-size:10px;background:rgba(126,178,255,.16);color:#bcd8fb}
.rail-profile b{font-size:11.5px;line-height:1.3;color:#fff}
.rail-profile small{font-size:9.5px;line-height:1.3;color:#87a0b9}
.rail-caret{display:grid;place-items:center;flex:0 0 14px;color:#7d94ac;transition:transform .18s ease}
.rail-caret svg{width:14px;height:14px;display:block}
.rail-profile[aria-expanded="true"] .rail-caret{transform:rotate(180deg)}

/* El menu sube desde el pie: abajo no queda sitio y el rail no recorta. */
.rail-menu{position:absolute;left:0;bottom:calc(100% + 6px);z-index:60;display:grid;gap:2px;min-width:100%;width:max-content;max-width:230px;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#12365d;box-shadow:0 18px 40px rgba(4,15,28,.5)}
.rail-menu[hidden]{display:none}
.rail-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:8px;background:transparent;color:#c3d5e7;text-align:left;font-weight:650;font-size:12px}
.rail-menu button>i{display:grid;place-items:center;flex:0 0 17px;font-style:normal}
.rail-menu button>i svg{width:17px;height:17px;display:block}
.rail-menu button:hover{background:rgba(255,255,255,.1);color:#fff}
.rail-menu button.danger:hover{background:rgba(255,120,130,.16);color:#ff9ba3}
@media(prefers-reduced-motion:reduce){.side-bottom .agent-status>i{animation:none}.rail-caret{transition:none}}

/* Contraido: solo queda el sello "dm", que ya trae el mismo verde. */
.app[data-rail="collapsed"] .rail-head{padding-bottom:12px}
.app[data-rail="collapsed"] .nav>i,.app[data-rail="collapsed"] .rail-org>i{flex:0 0 30px}
.app[data-rail="collapsed"] .nav.active:before{left:-10px}

/* El tema oscuro del cliente ya no tiene que oscurecer el rail: solo lo iguala. */
html[data-client-theme="dark"] .client-app .side{background:linear-gradient(184deg,#0d2a48,#081a2b 78%);border-color:rgba(255,255,255,.06)}
html[data-client-theme="dark"] .client-app .side-label,html[data-client-theme="dark"] .client-app .logout{color:#8fa8c0}
html[data-client-theme="dark"] .client-app .nav{color:#a5bcd2}
html[data-client-theme="dark"] .client-app .nav.active{color:#7fe9d1;background:rgba(84,219,193,.11)}

/* --- Administración de la plataforma: pestañas de consumo y registro --- */
.ops-tabs{display:flex;gap:4px;margin-bottom:22px;padding:4px;border:1px solid #e0e8f3;border-radius:14px;background:#f4f7fb;width:fit-content;max-width:100%;overflow-x:auto}
.ops-tab{flex:0 0 auto;padding:10px 18px;border-radius:10px;background:transparent;color:#6d8098;font-size:12.5px;font-weight:900;white-space:nowrap}
.ops-tab:hover{color:#225fd7}
.ops-tab.active{background:#fff;color:#143a80;box-shadow:0 2px 8px rgba(21,52,88,.1);cursor:default}
.ops-tab:focus-visible{outline:3px solid #389dc8;outline-offset:2px}

/* --- Consumo y costo del modelo (solo administración) --- */
.bill-ranges{display:flex;gap:4px;flex:0 0 auto;background:#f4f7fb;border:1px solid #e4ebf4;border-radius:12px;padding:3px}
.bill-range{background:transparent;color:#6d8098;border-radius:9px;padding:8px 13px;font-size:11.5px;font-weight:900}
.bill-range.active{background:#fff;color:#225fd7;box-shadow:0 2px 8px rgba(21,52,88,.09)}
.bill-metrics .metric-icon.amber{font-size:19px;font-weight:900}
.bill-total{color:#6c7f97;font-size:11.5px;font-weight:800;text-align:right}
.bill-headtools{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.bill-ranges.compact{padding:2px}
.bill-ranges.compact .bill-range{padding:6px 11px;font-size:10.5px}
/* El gráfico desborda a lo ancho cuando el rango es largo: se desplaza él, no la página. */
.bill-chartwrap{overflow-x:auto;overflow-y:visible;padding:14px 2px 2px}
.bill-chart{--plot:184px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;align-items:start}
/* Los importes del eje se centran en su línea guía: de ahí el desborde de media línea arriba y abajo. */
.bill-axis{grid-row:1;display:flex;flex-direction:column;justify-content:space-between;height:calc(var(--plot) + 12px);margin:-6px 0;text-align:right;color:#9aabc0;font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums}
.bill-axis span{line-height:12px}
.bill-plot{grid-row:1;position:relative;height:var(--plot);border-bottom:1px solid #dbe4ef;box-shadow:inset 0 1px 0 #eef2f7;background:repeating-linear-gradient(to top,#eef2f7 0 1px,transparent 1px 25%)}
.bill-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px}
.bill-col{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:7px 7px 0 0;outline:0}
.bill-col:hover,.bill-col:focus-visible{background:linear-gradient(180deg,rgba(45,109,234,.09),rgba(45,109,234,0))}
.bill-col i{--fill:linear-gradient(180deg,#5c95ff,#2d6dea 55%,#1f52bd);width:min(66%,var(--bar,20px));height:var(--h);min-height:3px;border-radius:6px 6px 2px 2px;background-image:var(--fill);box-shadow:0 2px 6px rgba(45,109,234,.22);transform-origin:bottom;animation:billRise .5s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--d,0ms)}
/* El pico es la cifra que se persigue: se distingue sin tener que buscarla en el eje. */
.bill-col.peak i{--fill:linear-gradient(180deg,#2ad0af,#12a48f 60%,#0c8574);box-shadow:0 2px 8px rgba(18,164,143,.28)}
.bill-col.zero i{--fill:linear-gradient(#e6ecf4,#e6ecf4);height:3px;box-shadow:none}
/* Un mes a medias no se lee como un mes barato: va rayado. */
.bill-col.partial i{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.34) 0 3px,rgba(255,255,255,0) 3px 7px),var(--fill)}
.bill-col:hover i,.bill-col:focus-visible i{filter:brightness(1.08)}
@keyframes billRise{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}
.bill-tip{position:absolute;left:50%;bottom:min(calc(var(--h) + 12px),calc(100% - 84px));z-index:3;min-width:154px;padding:8px 11px;border-radius:11px;background:#0f2744;color:#fff;box-shadow:0 12px 26px rgba(11,32,60,.3);opacity:0;pointer-events:none;transform:translate(-50%,5px);transition:opacity .15s,transform .15s}
.bill-col:hover .bill-tip,.bill-col:focus-visible .bill-tip{opacity:1;transform:translate(-50%,0)}
/* En los extremos el globo se apoya en el borde para no salirse de la tarjeta. */
.bill-col:nth-child(-n+2) .bill-tip{left:0;transform:translate(0,5px)}
.bill-col:nth-child(-n+2):hover .bill-tip,.bill-col:nth-child(-n+2):focus-visible .bill-tip{transform:translate(0,0)}
.bill-col:nth-last-child(-n+2) .bill-tip{left:auto;right:0;transform:translate(0,5px)}
.bill-col:nth-last-child(-n+2):hover .bill-tip,.bill-col:nth-last-child(-n+2):focus-visible .bill-tip{transform:translate(0,0)}
.bill-tip b{display:block;font-size:13.5px;font-weight:900;font-variant-numeric:tabular-nums}
.bill-tip em{display:block;font-style:normal;color:#a9c6ea;font-size:10px;font-weight:800}
/* «septiembre 2026» abre en mayúscula; «1 set.» no se toca, que capitalizar lo dejaba en «1 Set.». */
.bill-tip em::first-letter{text-transform:uppercase}
.bill-tip small{display:block;margin-top:5px;color:#d3e2f5;font-size:10px;font-weight:700}
.bill-tip u{display:block;margin-top:5px;text-decoration:none;color:#ffd08a;font-size:9.5px;font-weight:800}
.bill-marks{grid-row:2;grid-column:2;display:flex;gap:3px;margin-top:9px}
.bill-marks span{flex:1 1 0;min-width:0;overflow:visible;text-align:center;white-space:nowrap;color:#8496ac;font-size:9.5px;font-weight:800}
.bill-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.bill-chip{border:1px solid #e0e8f3;border-radius:99px;padding:5px 11px;background:#f7fafd;color:#3b5578;font-size:10.5px;font-weight:800}
.bill-chip.peak{border-color:#bfeade;background:#f0fbf8;color:#0c7d6d}
.bill-chip.muted{color:#7f92a8}
@media(prefers-reduced-motion:reduce){.bill-col i{animation:none}}
.bill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bill-card{margin-bottom:0}
.bill-rows{display:grid;gap:14px}
.bill-row{min-width:0}
.bill-rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bill-rowhead b{font-size:12.5px;color:#16304f;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill-price{flex:0 0 auto;font-style:normal;color:#8496ac;font-size:9.5px;font-weight:800;white-space:nowrap}
.bill-price.warn{color:#a96f11}
.bill-bar{height:9px;border-radius:99px;background:#e8eef6;overflow:hidden;margin:7px 0 5px}
.bill-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2d6dea,#12a48f)}
.bill-rowfoot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:#8496ac;font-size:10.5px}
.bill-rowfoot b{color:#16304f;font-size:12px;font-weight:900}
.bill-table{display:grid;overflow-x:auto}
.bill-tr{display:grid;grid-template-columns:130px minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1.1fr) 110px 78px 96px;gap:12px;align-items:center;min-height:52px;border-top:1px solid #edf1f5;font-size:11.5px;color:#2b4160}
.bill-tr.bill-th{border:0;min-height:34px;color:#8a99aa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.bill-tr>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bill-tr b{font-weight:800;color:#16304f}
.bill-tr small{display:block;color:#8fa0b4;font-size:9.5px;font-weight:700}
.bill-tr>span:nth-child(5),.bill-tr>span:nth-child(6),.bill-tr>span:nth-child(7){text-align:right;font-variant-numeric:tabular-nums}
/* Una llamada fallida igual se cobra: se marca para que no se lea como consumo sano. */
.bill-tr.failed{background:#fef7f6}
.bill-tr.failed b{color:#b7382f}
.bill-note{border:1px dashed #c9d8ee;background:#f6f9ff;border-radius:12px;padding:13px 15px;color:#3b5578;font-size:11.5px;line-height:1.55;margin-bottom:18px}
.bill-note b{color:#1c4fb8}
.bill-note>span{display:block;margin-top:7px;color:#6c7f97;font-size:10.5px}
.bill-note .warn{color:#a96f11}
@media(max-width:1100px){
  .bill-grid{grid-template-columns:1fr}
  .bill-tr{grid-template-columns:120px minmax(0,1.4fr) minmax(0,1fr) 100px 90px}
  .bill-tr>span:nth-child(4),.bill-tr>span:nth-child(6){display:none}
}