/* ============================================================
   SOFTOP · COMISIONES Y METAS (SCRUM-2676) · hoja de estilos

   Son las reglas de la maqueta (softop-v5-front: css/app.css y
   css/tokens.css), portadas. El spec declara la maqueta
   «referencia de comportamiento», y eso incluye cómo se ve: las
   pantallas escritas con Bootstrap a secas no se parecían a lo
   que estaba aprobado.

   TODO va acotado bajo `.cm`, el envoltorio que llevan las cuatro
   pantallas, por dos razones:

     - los tokens (--brand, --ink, --sp-*) no se filtran al resto
       del ERP, que tiene su propio tema (Dore);
     - `.card`, `.card-body`, `.btn` y `.tag` existen también en
       Bootstrap, y acotarlas aquí les gana en especificidad sin
       tocar ninguna otra pantalla del sistema.

   Si la maqueta cambia, este archivo se vuelve a portar desde
   css/app.css; no se edita regla por regla a mano.
   ============================================================ */

.cm{
  /* marca */
  --brand:#0079B8; --brand-strong:#005E92; --brand-soft:#F5FAFE; --brand-line:#CFE7F5;
  --sobre-acento:#FFFFFF;
  /* tinta y superficie */
  --ink:#0F1B26; --ink-2:#47586A; --ink-3:#64717E;
  --surface:#FFFFFF; --surface-2:#F8FAFC; --line:#E3E9EF; --line-2:#F0F4F7;
  /* estado: los únicos tres colores con significado */
  --ok:#0F7B4F; --ok-soft:#E7F5EE;
  --warn:#9A6400; --warn-soft:#FDF3E2;
  --danger:#C0392F; --danger-soft:#FCEDEB;
  /* espacio, radio, sombra */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-1:10px; --r-2:16px; --r-3:22px; --r-full:999px;
  --sh-1:0 1px 2px rgba(15,27,38,.04);
  --sh-2:0 18px 48px rgba(15,27,38,.16);
  /* tipografía */
  --t-1:12.5px; --t-2:13.5px; --t-3:14.5px; --t-4:26px; --t-5:25px; --t-6:32px;

  color:var(--ink);
  font-size:var(--t-2);
  line-height:1.45;
}

/* ---------------- base ---------------- */
.cm *, .cm *::before, .cm *::after{box-sizing:border-box}
.cm h1, .cm h2, .cm h3{color:var(--ink); font-weight:600; letter-spacing:-.012em; line-height:1.2; margin:0}
.cm h1{font-size:var(--t-4)}
.cm h2{font-size:20px}
.cm h3{font-size:var(--t-3)}
.cm p{margin:0}
.cm a{color:var(--brand)}
.cm table{width:100%; border-collapse:collapse}
.cm ul{margin:0; padding-left:18px}

/* ---------------- lo genérico que las reglas de abajo dan por hecho ---------------- */
.cm .num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cm .row-between{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
.cm .head{margin-bottom:var(--sp-5)}
.cm .head p{color:var(--ink-3); margin-top:3px}
.cm .btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:36px; padding:0 14px; border-radius:var(--r-1); font-size:var(--t-2); font-weight:500; white-space:nowrap; letter-spacing:-.01em; border:1px solid transparent; transition:background .12s, border-color .12s;}
.cm .btn svg{width:16px; height:16px; stroke:currentColor}
.cm .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-1)}
.cm .card-body{padding:var(--sp-4)}
.cm .meta{display:block; font-size:var(--t-1); color:var(--ink-3); margin-top:2px}
.cm .tag{display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; border-radius:var(--r-full); font-size:var(--t-1); font-weight:500; white-space:nowrap; background:var(--line-2); color:var(--ink-3);}
.cm .tabs{display:flex; gap:var(--sp-1); flex-wrap:wrap}
.cm .tab{height:32px; padding:0 12px; border-radius:var(--r-full); font-size:var(--t-2); font-weight:500; color:var(--ink-2); border:1px solid var(--line); background:var(--surface);}
.cm .field{display:flex; flex-direction:column; gap:5px}
.cm .field > label{font-size:var(--t-1); font-weight:500; color:var(--ink-2)}
.cm .field .hint, .cm .hint{font-size:var(--t-1); color:var(--ink-3)}
.cm .link{background:none; border:0; padding:0; color:var(--brand); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.cm .dn-cols{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr); gap:var(--sp-4); align-items:start}
.cm .dn-cols > *{min-width:0}
.cm .btn--primary{background:var(--brand); color:var(--sobre-acento)}
.cm .btn:hover{text-decoration:none}
.cm .btn--ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line)}
.cm .tab[aria-selected="true"]{background:var(--brand); border-color:var(--brand); color:var(--sobre-acento); font-weight:600}
.cm .tag--ok{background:var(--ok-soft); color:var(--ok)}
.cm .tag--warn{background:var(--warn-soft); color:var(--warn)}
.cm .tag--danger{background:var(--danger-soft); color:var(--danger)}

/* ---------------- los componentes de comisiones, portados de css/app.css ---------------- */
.cm .com-plazo{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--t-2)}
.cm .com-sec-h{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.cm .com-sec-h .meta{margin-top:3px; max-width:620px}
.cm .com-mt{display:grid}
.cm .com-mt-h, .cm .com-mt-r{display:grid; grid-template-columns:minmax(0, 1fr) 180px 180px; gap:var(--sp-3); align-items:center}
.cm .com-mt-h{font-size:var(--t-1); font-weight:600; color:var(--ink-2); padding-bottom:8px; border-bottom:1px solid var(--line)}
.cm .com-mt-g{font-size:var(--t-1); font-weight:600; color:var(--ink-3); margin:var(--sp-4) 0 0}
.cm .com-mt-r{padding:12px 0; border-bottom:1px solid var(--line-2)}
.cm .com-mt-q{min-width:0}
.cm .com-mt-q b{display:block; font-size:var(--t-2)}
.cm .com-mt-q .meta{display:block; margin-top:2px}
.cm .com-mt-usa{display:block; font-size:var(--t-1); color:var(--brand); font-weight:500; margin-top:3px}
.cm .com-mt-c{display:block}
.cm .com-mt-c .com-pesos{display:flex}
.cm .com-mt-c input{width:100%; text-align:right}
.cm .com-mt-c.is-usa input{border-color:var(--brand)}
.cm .com-mt-c em{display:block; font-style:normal; font-size:var(--t-1); color:var(--brand); text-align:right; margin-top:3px}
.cm .com-mt-l{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.cm .com-mt-r.is-total{border-bottom:0; background:var(--surface-2); border-radius:var(--r-2); padding:12px; margin-top:8px}
.cm .com-mt-r.is-total > .num{text-align:right; font-size:var(--t-3)}
.cm .com-mt-mas{margin-top:var(--sp-3); font-size:var(--t-2); color:var(--ink-2)}
.cm .com-mt-pie{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.cm .com-mt-estado{font-size:var(--t-2); color:var(--ink-3)}
.cm .com-mt-estado.is-sucio{color:var(--warn); font-weight:500}
.cm .com-mt-estado.is-ok{color:var(--ok); font-weight:500}
.cm .com-reglas{margin-bottom:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); box-shadow:var(--sh-1)}
.cm .com-reglas > summary{list-style:none; display:flex; align-items:center; gap:var(--sp-3); padding:16px 18px; cursor:pointer; border-radius:inherit}
.cm .com-reglas > summary::-webkit-details-marker{display:none}
.cm .com-reglas > summary::after{content:""; flex:none; width:9px; height:9px; margin:0 6px 4px auto; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(45deg); transition:transform .15s}
.cm .com-reglas[open] > summary::after{transform:rotate(-135deg); margin-bottom:-4px}
.cm .com-reglas > summary:hover{background:var(--surface-2)}
.cm .com-reglas > summary:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.cm .com-reglas[open] > summary{border-bottom:1px solid var(--line-2); border-radius:var(--r-2) var(--r-2) 0 0}
.cm .com-reglas-ico{width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand)}
.cm .com-reglas-ico svg{width:20px; height:20px}
/* El círculo del icono también acepta un glifo de la tipografía de iconos del ERP, no solo un
   SVG: es lo que permite poner iconos en las tarjetas sin inventar otra forma. */
.cm .com-reglas-ico i{font-size:20px; line-height:1}
.cm .com-reglas-t{min-width:0}
.cm .com-reglas-t b{display:block; font-size:var(--t-3)}
.cm .com-reglas-t .meta{display:block; margin-top:2px}
.cm .com-reglas-t .tag{margin-left:4px}
.cm .com-reglas-body{padding:var(--sp-4) 18px 18px}
.cm .com-reglas-body .com-sec-h{align-items:center}
.cm .com-accs{display:grid; gap:var(--sp-2)}
.cm .com-acc{border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface)}
.cm .com-acc[open]{border-color:var(--brand-line); box-shadow:var(--sh-1)}
.cm .com-acc summary{list-style:none; display:flex; align-items:center; gap:var(--sp-3); padding:14px 16px; cursor:pointer; border-radius:var(--r-2)}
.cm .com-acc summary::-webkit-details-marker{display:none}
.cm .com-acc summary::after{content:""; flex:none; width:8px; height:8px; margin:0 4px 4px auto; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); transition:transform .15s}
.cm .com-acc[open] summary::after{transform:rotate(-135deg); margin-bottom:-4px}
.cm .com-acc summary:hover{background:var(--surface-2)}
.cm .com-acc summary:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.cm .com-acc-t{min-width:0}
.cm .com-acc-t b{font-size:var(--t-3)}
.cm .com-acc-t .meta{display:block; margin-top:3px}
.cm .com-acc-body{padding:0 16px 16px}
.cm .com-dl{margin:0 0 var(--sp-4); border-top:1px solid var(--line-2)}
.cm .com-dl > div{display:grid; grid-template-columns:150px minmax(0, 1fr); gap:var(--sp-3); padding:10px 0; border-bottom:1px solid var(--line-2)}
.cm .com-dl dt{font-size:var(--t-1); font-weight:600; color:var(--ink-3); padding-top:1px}
.cm .com-dl dd{margin:0; font-size:var(--t-2); color:var(--ink)}
.cm .com-dl dd .meta{display:block; margin-top:2px}
.cm .com-plazo input{width:72px; text-align:right}
.cm .com-bases{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-2) var(--sp-5)}
.cm .com-bases-t{font-size:var(--t-1); font-weight:600; color:var(--ink-2); margin-top:var(--sp-2)}
.cm .com-sub{margin:2px 0 var(--sp-3) 27px; padding:var(--sp-3); background:var(--surface-2); border-radius:var(--r-2); font-size:var(--t-2)}
.cm .com-sub .field{margin:0}
.cm .com-pct{width:72px; text-align:right}
.cm .com-pct-w{display:flex; align-items:center; gap:6px}
.cm .com-esc{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap:var(--sp-3); align-items:center; padding:6px 0; border-bottom:1px solid var(--line-2)}
.cm .com-esc:last-child{border-bottom:0}
.cm .com-esc input{margin:0 4px}
.cm .com-marca{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); padding:5px 0}
.cm .com-marca select{width:auto; min-width:180px}
.cm .com-pesos{display:inline-flex; align-items:center; gap:6px}
.cm .com-pesos input{width:130px; text-align:right}
.cm .com-formula{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--sp-3)}
.cm .com-err{color:var(--danger); font-size:var(--t-2)}
.cm .com-err:empty{display:none}
.cm .com-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-3)}
.cm .com-card{position:relative; display:flex; flex-direction:column; gap:4px; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surface); cursor:pointer}
.cm .com-card:hover{border-color:var(--brand-line)}
.cm .com-card:focus-within{outline:2px solid var(--brand); outline-offset:2px}
.cm .com-card.is-on{border-color:var(--brand); background:var(--brand-soft)}
.cm .com-card input{position:absolute; top:var(--sp-3); right:var(--sp-3); width:18px; height:18px; margin:0}
.cm .com-card-t{font-weight:600; font-size:var(--t-3); padding-right:28px; color:var(--ink)}
.cm .com-card-q{font-size:var(--t-2); color:var(--ink-2)}
.cm .com-card-e{font-size:var(--t-1); color:var(--ink-3)}
.cm .com-bloque{padding:var(--sp-3) 0; border-top:1px solid var(--line-2)}
.cm .com-bloque h3{margin-bottom:var(--sp-2)}
.cm .com-base-l{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:baseline; margin-bottom:var(--sp-3)}
.cm .com-listo h2{margin-bottom:var(--sp-2)}
.cm .com-hub{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--sp-4)}
.cm .com-hub-c{display:block; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s}
.cm .com-hub-c:hover, .cm .com-hub-c:focus-visible{border-color:var(--brand); box-shadow:var(--sh-2)}
.cm .com-hub-c h2{margin-bottom:4px}
.cm .com-hub-est{margin:var(--sp-3) 0; font-size:var(--t-2); color:var(--ink-2)}
.cm .com-mm-bar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3)}
.cm .com-mm-tri{display:inline-flex; align-items:center; gap:var(--sp-2)}
.cm .com-mm-tri b{min-width:130px; text-align:center}
.cm .com-mm-por{margin:var(--sp-3) 0; padding:8px 12px; border-radius:var(--r-2); background:var(--surface-2); font-size:var(--t-2); color:var(--ink-2)}
.cm .com-mm-dos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4)}
.cm .com-prev{display:grid; border:1px solid var(--line-2); border-radius:var(--r-2); overflow:hidden}
.cm .com-prev-p{display:flex; align-items:center; gap:var(--sp-3); width:100%; padding:10px 12px; border:0; border-bottom:1px solid var(--line-2); background:var(--surface); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.cm .com-prev-p:last-child{border-bottom:0}
.cm .com-prev-p b{font-size:var(--t-2); white-space:nowrap}
.cm .com-prev-p .meta{display:block}
.cm .com-prev-p.is-sel{background:var(--brand-soft)}
.cm .com-prev-p.is-total{cursor:default; background:var(--surface-2); font-weight:600}
.cm .com-pasos{list-style:none; margin:0 0 var(--sp-5); padding:0 0 var(--sp-4); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-bottom:1px solid var(--line-2)}
.cm .com-pasos li{position:relative}
.cm .com-pasos li + li::before{content:""; position:absolute; top:21px; right:calc(50% + 17px); width:calc(100% - 34px); height:2px; background:var(--line-2)}
.cm .com-pasos li.es-hecho + li::before, .cm .com-pasos li.es-hecho + li.es-ahora::before{background:var(--ok)}
.cm .com-pasos button{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:6px 4px; border:0; border-radius:var(--r-2); background:none; text-align:center; font:inherit; color:var(--ink-3); cursor:pointer}
.cm .com-pasos button:hover:not(:disabled) .com-pasos-n{border-color:var(--brand)}
.cm .com-pasos button:disabled{cursor:default}
.cm .com-pasos-n{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:var(--r-full); border:1.5px solid var(--line); background:var(--surface); font-size:var(--t-2); font-weight:600; position:relative; z-index:1}
.cm .com-pasos-t{font-size:var(--t-1); font-weight:600; line-height:1.3}
.cm .com-pasos .es-ahora button{color:var(--ink)}
.cm .com-pasos .es-ahora .com-pasos-n{background:var(--brand); border-color:var(--brand); color:#fff}
.cm .com-pasos .es-hecho button{color:var(--ink-2)}
.cm .com-pasos .es-hecho .com-pasos-n{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.cm .com-paso-n{font-size:var(--t-1); font-weight:600; color:var(--brand); margin-bottom:2px}
.cm .com-paso h2{margin-bottom:4px}
.cm .com-paso h2:focus{outline:none}
.cm .com-wz-nav{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.cm .com-recibo{display:grid}
.cm .com-rc-h{padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); margin-bottom:var(--sp-1)}
.cm .com-rc-h b{display:block; font-size:var(--t-3)}
.cm .com-rc-h .meta{display:block; margin-top:2px}
.cm .com-rc-l{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); padding:10px 0; border-bottom:1px dashed var(--line); font-size:var(--t-2)}
.cm .com-rc-l em{display:block; font-style:normal; font-size:var(--t-1); color:var(--ink-3); margin-top:2px}
.cm .com-rc-l b{white-space:nowrap}
.cm .com-rc-l.is-off{color:var(--ink-3)}
.cm .com-rc-l.is-menos b{color:var(--danger)}
.cm .com-rc-l.is-total{border-bottom:0; border-top:2px solid var(--ink); margin-top:var(--sp-1); font-size:var(--t-3); font-weight:600}
.cm .com-recibo > .link{margin-top:var(--sp-3)}
.cm .com-rc-aviso{padding:8px 12px; background:var(--warn-soft); color:var(--ink); border-radius:var(--r-1); font-size:var(--t-1); margin-bottom:var(--sp-2)}
.cm .com-meses{flex-wrap:wrap}
.cm .com-meses button{padding:6px 14px}
.cm .com-mini{display:block; width:72px; height:5px; border-radius:var(--r-full); background:var(--line-2); margin-top:5px; overflow:hidden}
.cm .com-mini i{display:block; height:100%; background:var(--c-1); border-radius:inherit}
.cm .com-antes{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.cm .com-antes li{padding:8px 12px; border-radius:var(--r-1); font-size:var(--t-2); background:var(--surface-2)}
.cm .com-antes li.is-warn{background:var(--warn-soft)}
.cm .com-antes li.is-ok{background:var(--ok-soft)}
.cm .com-ajuste summary{cursor:pointer; color:var(--brand); font-weight:500; font-size:var(--t-2)}
.cm .com-ventas td{vertical-align:top}
.cm .com-ventas tr.is-cero td{color:var(--ink-3)}
.cm .com-ventas-aparte td{background:var(--surface-2)}
.cm .cmm-hero{margin-bottom:var(--sp-5)}
.cm .cmm-hero > .card-body{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--sp-5); align-items:center}
.cm .cmm-estado{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-1); font-weight:600; padding:3px 10px; border-radius:var(--r-full)}
.cm .cmm-estado::before{content:""; width:7px; height:7px; border-radius:var(--r-full); background:currentColor}
.cm .cmm-estado.is-abierto{background:var(--warn-soft); color:var(--warn)}
.cm .cmm-estado.is-cerrado{background:var(--ok-soft); color:var(--ok)}
.cm .cmm-estado.is-corre{background:var(--brand-soft); color:var(--brand)}
.cm .cmm-hero-t{margin-top:var(--sp-3); font-size:var(--t-2); color:var(--ink-2)}
.cm .cmm-hero-v{display:block; font-size:var(--t-6); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.15; margin-top:2px}
.cm .cmm-hero-s{margin-top:6px; font-size:var(--t-2); color:var(--ink-2)}
.cm .cmm-hero-a{display:grid; gap:var(--sp-3); justify-items:start; padding-left:var(--sp-5); border-left:1px solid var(--line-2)}
.cm .cmm-pasos{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:var(--t-2); color:var(--ink-3)}
.cm .cmm-pasos li{display:flex; align-items:center; gap:10px}
.cm .cmm-pasos li span{width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:var(--r-full); border:1.5px solid var(--line); font-size:var(--t-1); font-weight:600}
.cm .cmm-pasos li.es-ahora{color:var(--ink); font-weight:500}
.cm .cmm-pasos li.es-ahora span{background:var(--brand); border-color:var(--brand); color:#fff}
.cm .cmm-avisos{margin:0; padding:10px var(--sp-4) 10px 34px; border-top:1px solid var(--line-2); background:var(--warn-soft); font-size:var(--t-2); border-radius:0 0 var(--r-2) var(--r-2)}
.cm .cmm-grupo + .cmm-grupo{margin-top:var(--sp-5)}
.cm .cmm-grupo-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); padding:0 4px}
.cm .cmm-grupo-h .num{font-size:var(--t-3); font-weight:600}
.cm .cmm-lista{display:grid; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); box-shadow:var(--sh-1); overflow:hidden}
.cm .cmm-p{display:grid; grid-template-columns:auto minmax(0, 1fr) 150px auto; gap:var(--sp-4); align-items:center; width:100%; padding:14px 16px; border:0; border-bottom:1px solid var(--line-2); background:var(--surface); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.cm .cmm-p:last-child{border-bottom:0}
.cm .cmm-p:hover{background:var(--surface-2)}
.cm .cmm-p:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.cm .cmm-p-t{min-width:0}
.cm .cmm-p-t b{display:block; font-size:var(--t-3)}
.cm .cmm-p-q{display:block; margin-top:3px; font-size:var(--t-2); color:var(--ink-2); line-height:1.4}
.cm .cmm-p-meta{display:grid; gap:3px}
.cm .cmm-p-meta .num{font-weight:600; font-size:var(--t-2)}
.cm .cmm-p-meta .com-mini{width:100%; margin-top:0}
.cm .cmm-p-v{display:grid; justify-items:end; gap:2px; text-align:right}
.cm .cmm-p-v b{font-size:var(--t-3); white-space:nowrap}
.cm .cmm-p-v .link{font-size:var(--t-1)}
.cm .cmm-p{text-decoration:none}
.cm .cmm-nav{display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.cm .cmm-quien{display:flex; align-items:center; gap:var(--sp-3)}
.cm .cmm-av{width:44px; height:44px; font-size:var(--t-2)}
.cm .cmm-regla{display:grid; gap:3px; font-size:var(--t-2); color:var(--ink)}
.cm .cmm-bloques{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-4); margin-bottom:var(--sp-4)}
.cm .cmm-bloque h3{font-size:var(--t-2); color:var(--ink-2); font-weight:600}
.cm .cmm-big{font-size:var(--t-5); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin-top:6px; line-height:1.15}
.cm .cmm-bloque .meta{margin-top:2px}
.cm .cmm-bloque .com-barra{margin-top:var(--sp-3)}
.cm .cmm-bar{height:8px; margin-top:var(--sp-3)}
.cm .cmm-coach{margin-top:var(--sp-3); font-size:var(--t-2); color:var(--ink); line-height:1.45}
.cm .cmm-sube{color:var(--ok)}
.cm .cmm-baja{color:var(--danger)}
.cm .cmm-dos{margin-bottom:var(--sp-4)}
.cm .cmm-marcas{margin-top:var(--sp-4); font-size:var(--t-2); line-height:1.6}
.cm .cmm-ventas > .table-wrap{border-top:1px solid var(--line-2)}
.cm .cmm-ventas .com-ventas{margin:0}
@media (max-width:760px){
.cm .cmm-hero > .card-body{grid-template-columns:1fr}
.cm .cmm-nav{justify-content:space-between}
.cm .cmm-hero-a{padding-left:0; border-left:0; padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.cm .cmm-p{grid-template-columns:auto minmax(0, 1fr) auto}
.cm .cmm-p-meta{grid-column:2 / -1; grid-row:2}
}
.cm .com-barra{position:relative; height:12px; border-radius:var(--r-full); background:var(--line-2); margin:6px 0 24px}
.cm .com-barra-real{position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-full); background:var(--c-1)}
.cm .com-barra-proy{position:absolute; top:0; bottom:0; background:var(--c-1); opacity:.3; border-radius:0 var(--r-full) var(--r-full) 0}
.cm .com-barra-m{position:absolute; top:-4px; bottom:-4px; width:0; border-left:1.5px solid var(--ink-3)}
.cm .com-barra-m.is-meta{border-left:2px solid var(--ink)}
.cm .com-barra-m em{position:absolute; top:100%; left:0; transform:translateX(-50%); margin-top:3px; font-style:normal; font-size:11px; font-weight:500; color:var(--ink-3); white-space:nowrap}
.cm .com-barra-m.is-meta em{color:var(--ink)}
.cm .com-barra--mini{height:7px; margin:6px 0 2px; min-width:120px}
.cm .com-barra--mini .com-barra-m{top:-3px; bottom:-3px}
.cm .com-barra--mini .com-barra-m em{display:none}
.cm .dash-meta + .dash-meta{margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.cm .dash-meta .row-between b{font-size:var(--t-2)}
.cm .dash-meta .row-between .num{font-weight:600}
.cm .dash-meta-falta{margin-top:6px; font-size:var(--t-2); color:var(--ink)}
.cm .dash-meta-ed{display:inline-block; margin-top:var(--sp-3)}
.cm .dash-com{display:grid; gap:2px; margin-bottom:var(--sp-3)}
.cm .dash-com b{font-size:var(--t-5); font-weight:600; letter-spacing:-.02em}
.cm .dash-eq-meta{min-width:150px}
.cm .dash-eq-meta .num{font-weight:600}
@media (max-width:640px){
.cm .com-mt-h{display:none}
.cm .com-mt-r{grid-template-columns:1fr 1fr}
.cm .com-mt-q{grid-column:1 / -1}
.cm .com-mt-l{position:static; width:auto; height:auto; clip:auto; display:block; font-size:var(--t-1); color:var(--ink-2); margin-bottom:3px}
.cm .com-dl > div{grid-template-columns:1fr; gap:2px}
.cm .com-esc{grid-template-columns:1fr auto}
.cm .com-cards{grid-template-columns:1fr}
.cm .com-mm-dos{grid-template-columns:1fr}
.cm .com-esc > span:first-child{grid-column:1 / -1}
}

.cm .com-mm-box{border:1px solid var(--line-2); border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4); background:var(--surface); min-width:0}
.cm .com-mm-box h2{font-size:var(--t-4); margin-bottom:2px}
.cm .com-mm-scroll{overflow-x:auto}
.cm .com-mm-t{width:100%; border-collapse:collapse; margin-top:var(--sp-3); font-size:var(--t-2)}
.cm .com-mm-t th, .cm .com-mm-t td{padding:8px 6px; border-bottom:1px solid var(--line-2); text-align:right; white-space:nowrap; vertical-align:top}
.cm .com-mm-t th:first-child, .cm .com-mm-t td:first-child{text-align:left; white-space:normal}
.cm .com-mm-t th{font-size:var(--t-1); color:var(--ink-3); font-weight:600}
.cm .com-mm-t td:first-child .tag{display:inline-block; margin-top:3px}
.cm .com-mm-t td:first-child small{display:block; margin-top:3px; font-size:var(--t-1); color:var(--ink-3)}
.cm .com-mm-t td:first-child b{display:block}
.cm .com-mm-t tr.is-total td{font-weight:600; background:var(--surface-2); border-bottom:0}
.cm .com-mm-c{display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px}
.cm .com-mm-c input{width:120px; text-align:right}
.cm .com-mm-usar{font-size:var(--t-1)}
.cm .com-mm.is-editando .com-mm-box{border-color:var(--warn)}
.cm .com-mm.is-editando .com-mm-bar{margin:calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0; padding:var(--sp-2); border-radius:var(--r-2); background:var(--warn-soft)}
.cm .com-mm.is-editando .com-mm-c input{border-color:var(--warn)}
.cm .com-mm-ed{font-size:var(--t-2)}
.cm .com-quitar.is-seguro{color:var(--danger); border-color:var(--danger)}
.cm .com-frase{padding:12px 14px; background:var(--brand-soft); border-radius:var(--r-2)}
.cm .com-frase b{display:block; color:var(--ink)}
.cm .com-frase span{display:block; font-size:var(--t-2); color:var(--ink-2); margin-top:2px}

/* ---------------- la pantalla del mes y el detalle de una persona ---------------- */
.cm .avatar{width:34px; height:34px; border-radius:var(--r-full); flex:none; border:0; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-size:var(--t-1); font-weight:700;}
.cm .bar{height:6px; border-radius:var(--r-full); background:var(--line-2); overflow:hidden}
.cm .bar > i{display:block; height:100%; border-radius:var(--r-full); background:var(--c-2); transition:width .2s}
.cm .com-mini{display:block; width:72px; height:5px; border-radius:var(--r-full); background:var(--line-2); margin-top:5px; overflow:hidden}
.cm .com-mini i{display:block; height:100%; background:var(--c-1); border-radius:inherit}
.cm .com-antes{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.cm .com-antes li{padding:8px 12px; border-radius:var(--r-1); font-size:var(--t-2); background:var(--surface-2)}
.cm .com-antes li.is-warn{background:var(--warn-soft)}
.cm .com-antes li.is-ok{background:var(--ok-soft)}
.cm .com-ajuste summary{cursor:pointer; color:var(--brand); font-weight:500; font-size:var(--t-2)}
.cm .com-ventas td{vertical-align:top}
.cm .com-ventas tr.is-cero td{color:var(--ink-3)}
.cm .com-ventas-aparte td{background:var(--surface-2)}
.cm .cmm-hero{margin-bottom:var(--sp-5)}
.cm .cmm-hero > .card-body{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--sp-5); align-items:center}
.cm .cmm-estado{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-1); font-weight:600; padding:3px 10px; border-radius:var(--r-full)}
.cm .cmm-estado::before{content:""; width:7px; height:7px; border-radius:var(--r-full); background:currentColor}
.cm .cmm-estado.is-abierto{background:var(--warn-soft); color:var(--warn)}
.cm .cmm-estado.is-cerrado{background:var(--ok-soft); color:var(--ok)}
.cm .cmm-estado.is-corre{background:var(--brand-soft); color:var(--brand)}
.cm .cmm-hero-t{margin-top:var(--sp-3); font-size:var(--t-2); color:var(--ink-2)}
.cm .cmm-hero-v{display:block; font-size:var(--t-6); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.15; margin-top:2px}
.cm .cmm-hero-s{margin-top:6px; font-size:var(--t-2); color:var(--ink-2)}
.cm .cmm-hero-a{display:grid; gap:var(--sp-3); justify-items:start; padding-left:var(--sp-5); border-left:1px solid var(--line-2)}
.cm .cmm-pasos{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:var(--t-2); color:var(--ink-3)}
.cm .cmm-pasos li{display:flex; align-items:center; gap:10px}
.cm .cmm-pasos li span{width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:var(--r-full); border:1.5px solid var(--line); font-size:var(--t-1); font-weight:600}
.cm .cmm-pasos li.es-ahora{color:var(--ink); font-weight:500}
.cm .cmm-pasos li.es-ahora span{background:var(--brand); border-color:var(--brand); color:#fff}
.cm .cmm-avisos{margin:0; padding:10px var(--sp-4) 10px 34px; border-top:1px solid var(--line-2); background:var(--warn-soft); font-size:var(--t-2); border-radius:0 0 var(--r-2) var(--r-2)}
.cm .cmm-grupo + .cmm-grupo{margin-top:var(--sp-5)}
.cm .cmm-grupo-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); padding:0 4px}
.cm .cmm-grupo-h .num{font-size:var(--t-3); font-weight:600}
.cm .cmm-lista{display:grid; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); box-shadow:var(--sh-1); overflow:hidden}
.cm .cmm-p{display:grid; grid-template-columns:auto minmax(0, 1fr) 150px auto; gap:var(--sp-4); align-items:center; width:100%; padding:14px 16px; border:0; border-bottom:1px solid var(--line-2); background:var(--surface); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.cm .cmm-p:last-child{border-bottom:0}
.cm .cmm-p:hover{background:var(--surface-2)}
.cm .cmm-p:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.cm .cmm-p-t{min-width:0}
.cm .cmm-p-t b{display:block; font-size:var(--t-3)}
.cm .cmm-p-q{display:block; margin-top:3px; font-size:var(--t-2); color:var(--ink-2); line-height:1.4}
.cm .cmm-p-meta{display:grid; gap:3px}
.cm .cmm-p-meta .num{font-weight:600; font-size:var(--t-2)}
.cm .cmm-p-meta .com-mini{width:100%; margin-top:0}
.cm .cmm-p-v{display:grid; justify-items:end; gap:2px; text-align:right}
.cm .cmm-p-v b{font-size:var(--t-3); white-space:nowrap}
.cm .cmm-p-v .link{font-size:var(--t-1)}
.cm .cmm-p{text-decoration:none}
.cm .cmm-nav{display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.cm .cmm-quien{display:flex; align-items:center; gap:var(--sp-3)}
.cm .cmm-av{width:44px; height:44px; font-size:var(--t-2)}
.cm .cmm-regla{display:grid; gap:3px; font-size:var(--t-2); color:var(--ink)}
.cm .cmm-bloques{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-4); margin-bottom:var(--sp-4)}
.cm .cmm-bloque h3{font-size:var(--t-2); color:var(--ink-2); font-weight:600}
.cm .cmm-big{font-size:var(--t-5); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin-top:6px; line-height:1.15}
.cm .cmm-bloque .meta{margin-top:2px}
.cm .cmm-bloque .com-barra{margin-top:var(--sp-3)}
.cm .cmm-bar{height:8px; margin-top:var(--sp-3)}
.cm .cmm-coach{margin-top:var(--sp-3); font-size:var(--t-2); color:var(--ink); line-height:1.45}
.cm .cmm-sube{color:var(--ok)}
.cm .cmm-baja{color:var(--danger)}
.cm .cmm-dos{margin-bottom:var(--sp-4)}
.cm .cmm-marcas{margin-top:var(--sp-4); font-size:var(--t-2); line-height:1.6}
.cm .cmm-ventas > .table-wrap{border-top:1px solid var(--line-2)}
.cm .cmm-ventas .com-ventas{margin:0}
@media (max-width:760px){
.cm .cmm-hero > .card-body{grid-template-columns:1fr}
.cm .cmm-nav{justify-content:space-between}
.cm .cmm-hero-a{padding-left:0; border-left:0; padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.cm .cmm-p{grid-template-columns:auto minmax(0, 1fr) auto}
.cm .cmm-p-meta{grid-column:2 / -1; grid-row:2}
}
.cm .com-barra{position:relative; height:12px; border-radius:var(--r-full); background:var(--line-2); margin:6px 0 24px}
.cm .com-barra-real{position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-full); background:var(--c-1)}
.cm .com-barra-proy{position:absolute; top:0; bottom:0; background:var(--c-1); opacity:.3; border-radius:0 var(--r-full) var(--r-full) 0}
.cm .com-barra-m{position:absolute; top:-4px; bottom:-4px; width:0; border-left:1.5px solid var(--ink-3)}
.cm .com-barra-m.is-meta{border-left:2px solid var(--ink)}
.cm .com-barra-m em{position:absolute; top:100%; left:0; transform:translateX(-50%); margin-top:3px; font-style:normal; font-size:11px; font-weight:500; color:var(--ink-3); white-space:nowrap}
.cm .com-barra-m.is-meta em{color:var(--ink)}
.cm .com-barra--mini{height:7px; margin:6px 0 2px; min-width:120px}
.cm .com-barra--mini .com-barra-m{top:-3px; bottom:-3px}
.cm .com-barra--mini .com-barra-m em{display:none}

/* ============================================================
   Lo que el tema del ERP pisa, recuperado solo dentro de `.cm`
   ============================================================ */
.cm .btn{box-shadow:none; text-transform:none; cursor:pointer}
.cm .btn--primary:hover{background:var(--brand-strong); color:var(--sobre-acento)}
.cm .btn--ghost:hover{background:var(--surface-2)}
.cm .btn[disabled]{opacity:.5; cursor:default}
.cm .btn--sm{height:30px; padding:0 10px; font-size:var(--t-1)}
.cm .btn--peligro{background:var(--surface); color:var(--danger); border-color:var(--line)}
.cm .btn--peligro:hover{background:var(--danger-soft)}

.cm .field input, .cm .field select, .cm .field textarea,
.cm input[type=text], .cm input[type=number], .cm select{
  height:36px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-1);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:var(--t-2); width:100%;
}
.cm input:focus, .cm select:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand)}
.cm .field select, .cm select{appearance:none; padding-right:28px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364717E' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:11px;
}
.cm .tab{cursor:pointer}
.cm .tab:hover{border-color:var(--brand-line)}
.cm .link{text-decoration:underline; text-underline-offset:2px}
.cm .link:hover{color:var(--brand-strong)}
.cm .tag--grande{height:26px; padding:0 11px; font-size:var(--t-2)}

/* El aviso. La maqueta no tiene `.alert` de Bootstrap: tiene el color con su frase al lado. */
.cm .com-nota{display:block; padding:11px 13px; border-radius:var(--r-2); font-size:var(--t-2);
  margin-bottom:var(--sp-3); border:1px solid transparent}
.cm .com-nota--warn{background:var(--warn-soft); color:#6E4800; border-color:#F0DCB5}
.cm .com-nota--ok{background:var(--ok-soft); color:var(--ok); border-color:#C9E6D8}
.cm .com-nota--info{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}
.cm .com-nota--danger{background:var(--danger-soft); color:var(--danger); border-color:#F3D2CE}
.cm .com-nota b{font-weight:600}
.cm .com-nota a{color:inherit; font-weight:600}
.cm .com-nota-det{display:block; margin-top:4px; font-size:var(--t-1); opacity:.85}

/* Volver: en la maqueta es un enlace encima del título de la pantalla. */
.cm .com-volver{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-2);
  color:var(--ink-2); text-decoration:none; margin-bottom:var(--sp-2)}
.cm .com-volver:hover{color:var(--brand); text-decoration:none}
.cm .com-volver::before{content:"\2190"; font-size:15px; line-height:1}

/* Tabla de datos con el aire de la maqueta, no la de Bootstrap. */
.cm .com-tabla th{font-size:var(--t-1); font-weight:600; color:var(--ink-2); text-align:left;
  padding:0 var(--sp-3) 8px 0; border-bottom:1px solid var(--line); white-space:nowrap}
.cm .com-tabla td{padding:12px var(--sp-3) 12px 0; border-bottom:1px solid var(--line-2);
  font-size:var(--t-2); vertical-align:top}
.cm .com-tabla tbody tr:last-child td{border-bottom:0}
.cm .com-tabla .der{text-align:right}
.cm .com-tabla tbody tr.es-tocable{cursor:pointer}
.cm .com-tabla tbody tr.es-tocable:hover{background:var(--surface-2)}
.cm .com-tabla tfoot th{border-top:2px solid var(--ink); border-bottom:0; padding-top:12px;
  font-size:var(--t-3); color:var(--ink)}
.cm .com-tabla .es-grupo td{background:var(--surface-2); font-weight:600; font-size:var(--t-1);
  color:var(--ink-3); padding:8px 0 8px 10px}
.cm .com-tabla .es-flojo td{color:var(--ink-3)}
.cm .com-tabla small, .cm .com-mm-t small{display:block; margin-top:3px; font-size:var(--t-1); color:var(--ink-3)}
.cm .com-tabla b{font-weight:600}
.cm .com-tabla .tag{display:inline-block; margin-top:3px}

/* La cifra grande de una pantalla. */
.cm .com-cifra{font-size:var(--t-6); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.cm .com-cifra-p{font-size:var(--t-1); color:var(--ink-3)}

/* El vacío con sentido: un icono, una frase y la salida. */
.cm .com-vacio{text-align:center; padding:var(--sp-6) var(--sp-4)}
.cm .com-vacio b{display:block; font-size:var(--t-3); margin-bottom:4px}
.cm .com-vacio p{color:var(--ink-3); margin-bottom:var(--sp-4)}

.cm .com-pila{display:grid; gap:var(--sp-4)}
.cm .mt-3{margin-top:var(--sp-3)}
.cm .mt-4{margin-top:var(--sp-4)}

@media (max-width:900px){
  .cm .dn-cols{grid-template-columns:1fr}
}

/* ============================================================
   Asistente de metas (SCRUM-2676)

   Portado del mockup aprobado (softop-v5-front, bloque .am-* de
   css/app.css), que sigue el patrón del Asistente de IA de Finanzas
   (view/Accounting/AssistantAI): la voz del asistente sin
   burbuja, el cliente en burbuja azul, el ámbar para avisos y el
   verde solo para confirmar. Bajo .cm, como el resto del módulo, y con
   su misma letra (la del ERP, Nunito) y escala (--t-*): sin fuentes ni
   tamaños propios.
   ============================================================ */
.cm .am-o--guardada{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.cm .am-pastilla--local{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}
.cm .am-reintentar{margin-left:8px; min-height:30px; padding:4px 10px}
.cm .am-head .com-volver{display:table; margin-bottom:6px}
.cm .am-root textarea, .cm .am-root input, .cm .am-root select{box-shadow:none}
@keyframes am-punto{0%,80%,100%{opacity:.3} 40%{opacity:1}}
.cm .am-head{align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap}
.cm .am-pastillas{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.cm .am-pastilla{font-size:var(--t-1); font-weight:600; padding:3px 10px; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand-strong); border:1px solid var(--brand-line)}
.cm .am-root{--am-panel:360px;
  display:flex; height:calc(100vh - 250px); min-height:560px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--sh-1); overflow:hidden}
.cm .am-main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--surface-2)}
.cm .am-hilo{flex:1; overflow-y:auto; padding:var(--sp-5) var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:14px}
.cm .am-hilo > *{max-width:760px; width:100%; margin-left:auto; margin-right:auto; flex:none}
.cm .am-b-t{line-height:1.5}
.cm .am-b--asistente .am-b-t{font-size:var(--t-3); color:var(--ink)}
.cm .am-b--usuario{display:flex; justify-content:flex-end}
.cm .am-b--usuario .am-b-t{display:inline-block; max-width:85%; background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:14px 14px 2px 14px; padding:8px 14px; color:var(--ink); font-size:var(--t-3)}
.cm .am-b--aviso .am-b-t{background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius:10px; padding:10px 14px; color:var(--ink); font-size:var(--t-2)}
.cm .am-b--sistema .am-b-t{font-size:var(--t-1); color:var(--ink-3); text-align:center; border-top:1px dashed var(--line); padding-top:8px}
.cm .am-b--sistema .am-b-t::before{content:'✎ '}
.cm .am-nota-t, .cm .am-pie-t, .cm .am-ayuda-t{font-family:inherit; font-size:var(--t-1); color:var(--ink-3)}
.cm .am-ayuda-t{margin-top:4px}
.cm .am-escribe{display:inline-flex; gap:4px; padding:6px 2px}
.cm .am-escribe i{width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:am-punto 1s infinite}
.cm .am-escribe i:nth-child(2){animation-delay:.15s} .cm .am-escribe i:nth-child(3){animation-delay:.3s}
.cm .am-consulta{font-size:var(--t-2); color:var(--ink-2); display:grid; gap:8px}
.cm .am-spin{display:inline-block; width:12px; height:12px; border:2px solid var(--brand-line); border-top-color:var(--brand); border-radius:50%; animation:am-gira .8s linear infinite; margin-right:8px; vertical-align:-1px}
@keyframes am-gira{to{transform:rotate(360deg)}}
.cm .am-esqueleto{display:grid; gap:6px}
.cm .am-esqueleto i{display:block; height:10px; border-radius:5px; background:linear-gradient(90deg, var(--line-2), var(--line), var(--line-2)); background-size:200% 100%; animation:am-brillo 1.2s infinite}
.cm .am-esqueleto i:nth-child(2){width:80%} .cm .am-esqueleto i:nth-child(3){width:55%}
@keyframes am-brillo{to{background-position:-200% 0}}

/* La pregunta y sus opciones (la .ia-pregunta del ERP) */
.cm .am-pregunta{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 14px}
.cm .am-pregunta-meta{font-size:var(--t-1); color:var(--ink-3); font-weight:600; margin-bottom:6px}
.cm .am-barra{height:4px; background:var(--line-2); border-radius:2px; overflow:hidden; margin-bottom:10px}
.cm .am-barra i{display:block; height:100%; background:var(--brand); border-radius:2px}
.cm .am-opciones{display:flex; flex-wrap:wrap; gap:8px}
.cm .am-opcion{border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand-strong); border-radius:10px; padding:8px 14px; font-weight:600; font-size:var(--t-2); cursor:pointer; text-align:left; min-height:40px; text-decoration:none; display:inline-flex; align-items:center; font-family:inherit}
.cm .am-opcion:hover:not(:disabled){background:var(--brand); color:var(--sobre-acento)}
.cm .am-opcion--salida{border-style:dashed; background:transparent}
.cm .am-opcion--ok{background:var(--ok); border-color:var(--ok); color:#fff}
.cm .am-opcion--ok:hover:not(:disabled){background:color-mix(in srgb, var(--ok) 85%, #000); color:#fff}
.cm .am-opcion:disabled{opacity:.45; cursor:not-allowed}
.cm .am-pregunta.is-usada{display:none}

/* Tarjetas */
.cm .am-card{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:14px 16px; display:grid; gap:10px; font-size:var(--t-2)}
.cm .am-card-tit{font-weight:700; font-size:var(--t-3); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cm .am-card--recibo{background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 35%, transparent)}
.cm .am-card--recibo .am-card-tit{color:var(--ok)}
.cm .am-card--propuesta{border-color:var(--brand-line); box-shadow:0 0 0 3px var(--brand-soft)}
.cm .am-tabla{width:100%; border-collapse:collapse; font-size:var(--t-2)}
.cm .am-tabla th{font-size:var(--t-1); color:var(--ink-3); font-weight:600; text-align:left; padding:4px 6px; border-bottom:1px solid var(--line)}
.cm .am-tabla td{padding:6px; border-bottom:1px solid var(--line-2)}
.cm .am-tabla .num, .cm .am-res-val, .cm .am-campo input{font-variant-numeric:tabular-nums; text-align:right}
.cm .am-tabla th.num{text-align:right}
.cm .am-tabla tfoot td{border-bottom:0; font-weight:600}
.cm .am-fila-sede td{font-weight:600; background:var(--surface-2)}
.cm .am-sangria{padding-left:18px !important}
.cm .am-cargo{font-size:var(--t-1); color:var(--ink-3)}
.cm .am-ref{font-size:var(--t-1); color:var(--ink-3)}
.cm .am-cuadra{color:var(--ok); font-weight:700}
.cm .am-crit{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cm .am-crit li{display:flex; gap:10px; align-items:flex-start}
.cm .am-fam{font-size:var(--t-1); font-weight:700; padding:2px 8px; border-radius:var(--r-full); background:var(--surface-2); border:1px solid var(--line); white-space:nowrap}
.cm .am-fam--Ventas{background:var(--brand-soft); color:var(--brand-strong); border-color:var(--brand-line)}
.cm .am-fam--Recaudo{background:color-mix(in srgb, #6F5FC8 12%, var(--surface)); color:#6F5FC8; border-color:color-mix(in srgb, #6F5FC8 30%, transparent)}
.cm .am-fam--Facturación{background:color-mix(in srgb, #14808C 12%, var(--surface)); color:#14808C; border-color:color-mix(in srgb, #14808C 30%, transparent)}
.cm .am-familias-res{display:grid; gap:4px}
.cm .am-aviso{background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius:10px; padding:10px 12px; font-size:var(--t-2); color:var(--ink)}
.cm .am-aviso ul{margin:4px 0 0; padding-left:18px}
.cm .am-aviso--error{background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 30%, transparent)}
.cm .am-recibo-l{margin:0; padding-left:18px}

/* El origen de cada valor */
.cm .am-o{font-family:inherit; font-size:var(--t-1); font-weight:700; padding:1px 7px; border-radius:var(--r-full); white-space:nowrap; border:1px solid transparent}
.cm .am-o--cliente{background:var(--brand-soft); color:var(--brand-strong); border-color:var(--brand-line)}
.cm .am-o--propuesta{background:transparent; color:var(--ink-2); border:1px dashed var(--ink-3)}
.cm .am-o--anterior{background:var(--surface-2); color:var(--ink-3); border-color:var(--line)}
.cm .am-o--sede{background:color-mix(in srgb, #6F5FC8 10%, var(--surface)); color:#6F5FC8}
.cm .am-estado{font-size:var(--t-1); font-weight:700; padding:2px 8px; border-radius:var(--r-full); background:var(--surface-2); color:var(--ink-3)}
.cm .am-estado--pend{background:var(--warn-soft); color:var(--warn)}
.cm .am-estado--ok{background:var(--ok-soft); color:var(--ok)}

/* Resumen (tarjeta y panel) */
.cm .am-res-fam{display:grid; gap:4px; padding-bottom:10px; border-bottom:1px solid var(--line-2)}
.cm .am-res-fila{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0}
.cm .am-res-fila > div:first-child{min-width:0}
.cm .am-res-val{display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none}
.cm .am-res-suma, .cm .am-res-nota{font-size:var(--t-1); color:var(--ink-3)}
.cm .am-res-nota{padding:2px 0}
.cm .am-falta{color:var(--danger); font-weight:600; font-size:var(--t-1)}
.cm .am-campo{display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:8px; padding:0 8px; background:var(--surface); width:150px}
.cm .am-campo span{color:var(--ink-3); font-size:var(--t-2)}
.cm .am-campo input{border:0; outline:0; background:transparent; width:100%; height:32px; font:inherit; font-size:var(--t-2); color:var(--ink)}
.cm .am-campo:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cm .am-campo:has(input:disabled){background:var(--surface-2)}

/* Panel */
.cm .am-panel{width:var(--am-panel); flex:none; border-left:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; min-height:0; transition:box-shadow .3s}
.cm .am-panel.is-resaltado{box-shadow:inset 0 0 0 2px var(--brand)}
.cm .am-panel-plegar{display:none}
.cm .am-panel-cuerpo{overflow-y:auto; padding:16px; display:grid; gap:12px; align-content:start}
.cm .am-p-cab{display:grid; gap:6px}
.cm .am-p-tit{font-weight:700; font-size:var(--t-3); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cm .am-p-sede{font-size:var(--t-1); color:var(--ink-3)}
.cm .am-p-mes{display:flex; gap:8px; align-items:center; font-size:var(--t-1); color:var(--ink-3); font-weight:600}
.cm .am-p-mes select{flex:1; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:0 8px; font:inherit; font-size:var(--t-2)}
.cm .am-pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:3px}
.cm .am-pasos li{font-size:var(--t-1); color:var(--ink-3); border-top:3px solid var(--line); padding-top:4px; line-height:1.2}
.cm .am-pasos li.is-hecho{border-color:var(--brand); color:var(--ink-2)}
.cm .am-pasos li.is-actual{border-color:var(--brand); color:var(--brand-strong); font-weight:700}
.cm .am-vacio{border:1px dashed var(--line); border-radius:10px; padding:16px; text-align:center; color:var(--ink-3); font-size:var(--t-2)}
.cm .am-leyenda{display:flex; flex-wrap:wrap; gap:4px}
.cm .am-p-acciones{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.cm .am-p-acciones .am-btn--ok{grid-column:1 / -1}

/* Botones y compositor */
.cm .am-btn{border-radius:10px; padding:9px 14px; font-weight:700; font-size:var(--t-2); cursor:pointer; border:1px solid transparent; min-height:40px; font-family:inherit}
.cm .am-btn:disabled{opacity:.5; cursor:not-allowed}
.cm .am-btn--azul{background:var(--brand); color:var(--sobre-acento)}
.cm .am-btn--azul:hover:not(:disabled){background:var(--brand-strong)}
.cm .am-btn--ok{background:var(--ok); color:#fff}
.cm .am-btn--plano{background:var(--surface); border-color:var(--line); color:var(--ink-2)}
.cm .am-btn--plano:hover{border-color:var(--brand-line); color:var(--brand-strong)}
.cm .am-compositor{border-top:1px solid var(--line); background:var(--surface); padding:10px var(--sp-5)}
.cm .am-compositor > *{max-width:760px; margin-left:auto; margin-right:auto}
.cm .am-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.cm .am-chip{border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand-strong); border-radius:var(--r-full); padding:5px 12px; font-weight:600; font-size:var(--t-1); cursor:pointer; font-family:inherit}
.cm .am-chip:hover{background:var(--brand); color:var(--sobre-acento)}
.cm .am-entrada{display:flex; gap:8px; align-items:flex-end}
.cm .am-entrada textarea{flex:1; resize:none; min-height:42px; max-height:120px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:var(--t-3); background:var(--surface); color:var(--ink)}
.cm .am-entrada textarea:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}

/* Estrecho (<1080): panel más angosto. Muy estrecho (<860, tableta): panel arriba y plegable. */
.cm .am-root.am-estrecho{--am-panel:300px}
.cm .am-root.am-estrecho .am-hilo{padding:var(--sp-4)}
.cm .am-root.am-estrecho-2{flex-direction:column-reverse; height:auto; min-height:0; overflow:visible}
.cm .am-root.am-estrecho-2 .am-panel{width:auto; border-left:0; border-bottom:1px solid var(--line); border-radius:14px 14px 0 0}
.cm .am-root.am-estrecho-2 .am-panel-plegar{display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 16px; background:transparent; border:0; font:inherit; font-weight:700; color:var(--ink); cursor:pointer}
.cm .am-root.am-estrecho-2 .am-panel-plegar::after{content:'▾'; margin-left:8px; color:var(--ink-3)}
.cm .am-root.am-estrecho-2 .am-panel.is-plegado .am-panel-plegar::after{content:'▸'}
.cm .am-panel-cuenta{font-size:var(--t-1); font-weight:600; color:var(--ink-3); margin-left:auto}
.cm .am-root.am-estrecho-2 .am-panel.is-plegado .am-panel-cuerpo{display:none}
.cm .am-root.am-estrecho-2 .am-panel-cuerpo{max-height:55vh; padding-top:0}
.cm .am-root.am-estrecho-2 .am-main{border-radius:0 0 14px 14px; overflow:hidden}
.cm .am-root.am-estrecho-2 .am-hilo{height:60vh; flex:none}

.cm .am-crit-frase{font-size:var(--t-3); line-height:1.5; color:var(--ink)}

/* ---- Asistente de metas: lo que se tomó del asistente de Finanzas (SCRUM-2676) ----
   «En curso» con sus pasos (listo / preguntando / pendiente), la tarjeta de pregunta con la
   instrucción de qué hacer, el campo para escribir el valor propio y el pie «‹ Atrás · Cancelar»,
   y las acciones del compositor. */
.cm .am-pregunta:not(.is-usada){border-color:var(--brand-line); box-shadow:0 0 0 3px var(--brand-soft)}
.cm .am-instruccion{font-size:var(--t-1); color:var(--brand-strong); background:var(--brand-soft); border-radius:8px; padding:6px 10px; margin-bottom:10px; font-weight:600}
.cm .am-entrada-linea{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line)}
.cm .am-entrada-item{display:flex; flex-direction:column; gap:3px; flex:1 1 160px; min-width:0; margin:0}
.cm .am-entrada-linea--3 .am-entrada-item{flex:1 1 110px}
.cm .am-entrada-etq{font-size:var(--t-1); font-weight:700; color:var(--ink-2)}
.cm .am-entrada-caja{display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:var(--surface); height:38px}
.cm .am-entrada-caja:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cm .am-entrada-pre, .cm .am-entrada-suf{color:var(--ink-3); font-size:var(--t-2)}
.cm .am-entrada-campo{border:0; outline:0; background:transparent; width:100%; min-width:0; height:36px; font:inherit; font-size:var(--t-3); color:var(--ink); font-variant-numeric:tabular-nums; box-shadow:none}
.cm .am-entrada-ok{flex:none; height:38px; min-height:38px; padding:0 16px}
.cm .am-entrada-ayuda{font-size:var(--t-1); color:var(--ink-3); margin-top:4px}
.cm .am-entrada-error{font-size:var(--t-1); color:var(--danger); font-weight:600; min-height:0}
.cm .am-entrada-error:empty{display:none}
.cm .am-preg-pie{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px; font-size:var(--t-1)}
.cm .am-pie-btn{background:none; border:0; padding:0; color:var(--brand); font-weight:700; cursor:pointer; font-size:var(--t-1); font-family:inherit}
.cm .am-pie-btn:hover{text-decoration:underline}
.cm .am-pie-nota{margin-left:auto; color:var(--ink-3)}

.cm .am-curso{border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--surface-2)}
.cm .am-bloque-tit{display:flex; align-items:center; gap:8px; font-size:var(--t-1); font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin:0 0 8px}
.cm .am-bloque-tit:after{content:''; flex:1; height:1px; background:var(--line)}
.cm .am-contador{order:2; font-weight:700; color:var(--brand-strong); text-transform:none}
.cm .am-curso-tit{font-weight:700; font-size:var(--t-2); color:var(--ink); margin-bottom:6px}
.cm .am-curso-sub{font-weight:600; color:var(--ink-3); font-size:var(--t-1)}
.cm .am-curso-pasos{list-style:none; margin:8px 0 0; padding:0; display:grid}
.cm .am-paso{display:flex; align-items:baseline; gap:8px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:var(--t-1)}
.cm .am-paso:last-child{border-bottom:0}
.cm .am-paso-etq{flex:1; min-width:0; color:var(--ink-2)}
.cm .am-paso-val{text-align:right; font-weight:700; color:var(--ink)}
.cm .am-paso[data-estado="pendiente"] .am-paso-etq, .cm .am-paso[data-estado="pendiente"] .am-paso-val{color:#98a1ac; font-weight:400}
.cm .am-paso[data-estado="preguntando"] .am-paso-etq{color:var(--brand-strong); font-weight:800}
.cm .am-paso[data-estado="preguntando"] .am-paso-val{color:var(--brand); font-weight:600; font-style:italic}
.cm .am-paso[data-estado="listo"] .am-paso-val:before{content:'✓ '; color:var(--ok)}
.cm .am-paso-cambiar{background:none; border:0; padding:0; color:var(--brand); text-decoration:underline; font-size:var(--t-1); cursor:pointer; font-family:inherit; flex:none}
.cm .am-paso.is-nuevo{animation:am-avanza 1.6s ease-out}
@keyframes am-avanza{0%{background:var(--ok-soft)} 100%{background:transparent}}
.cm .am-reposo{border:1px dashed var(--line); border-radius:10px; padding:12px; color:var(--ink-3); font-size:var(--t-1); text-align:center}

.cm .am-acciones-tit{font-size:var(--t-1); font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:4px}
.cm .am-accion--ir{background:transparent; border-style:dashed}
.cm .am-entrada-caja .am-entrada-campo, .cm .am-entrada-caja .am-entrada-campo:focus{border:0; box-shadow:none; outline:0; padding:0 2px; border-radius:0; background:transparent}

/* ============================================================
   Asistente de borradores de comisiones (SCRUM-2676)
   Clases .cb-*, acotadas bajo `.cm` como el resto. Colores de familia: ventas #2563eb,
   recaudo #0d9488, factura #7c3aed. El estado siempre lleva texto e icono además del color.
   ============================================================ */
.cm .cb-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.cm.cb [hidden]{display:none !important}
.cm .cb-root :focus-visible, .cb-modal :focus-visible{outline:2px solid var(--brand,#0079B8); outline-offset:2px}
/* El tema (dore) pone `.btn{outline:initial!important}` y borra el foco de teclado de todos los botones: aquí se devuelve. */
.cm .cb-root .btn:focus-visible, .cm .cb-modal .btn:focus-visible{outline:2px solid var(--brand,#0079B8) !important; outline-offset:2px}
.cm .cb-nota{color:var(--ink-3); font-size:var(--t-1); margin:6px 0}
.cm .cb-sin{color:var(--warn); font-weight:500}
.cm .cb-der{text-align:right}
.cm .cb-scroll{overflow-x:auto}
.cm .btn--sm{height:30px; padding:0 10px}
.cm .btn[disabled]{opacity:.55; cursor:not-allowed}

.cm .cb-error{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); border-radius:var(--r-1); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4); font-weight:500}
.cm .cb-error .link{color:var(--danger); margin-left:var(--sp-2)}
.cm .cb-vacio{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-2); padding:var(--sp-6); text-align:center; max-width:640px; margin:var(--sp-5) auto}
.cm .cb-vacio h2{margin-bottom:var(--sp-2)}
.cm .cb-vacio p{color:var(--ink-2); margin-top:var(--sp-2)}
.cm .cb-vacio-acc{margin-top:var(--sp-4); display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap}

/* Disposición: tablero amplio a la izquierda, chat a la derecha; en tableta y móvil, apilados */
.cm .cb-layout{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--sp-4); align-items:start}
.cm .cb-layout > *{min-width:0}
.cm .cb-layout.is-ocupado .cb-tablero{opacity:.85}
.cm .cb-tablero{display:flex; flex-direction:column; gap:var(--sp-4)}
.cm .cb-chat{position:sticky; top:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-1); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); max-height:calc(100vh - 32px)}
@media (max-width:1080px){
  .cm .cb-layout{grid-template-columns:minmax(0,1fr)}
  .cm .cb-chat{position:static; max-height:none}
}

.cm .cb-seccion{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-1); padding:var(--sp-4)}
.cm .cb-seccion > h2{margin-bottom:var(--sp-3); display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.cm .cb-sub{margin:var(--sp-3) 0 var(--sp-2)}

.cm .cb-tag{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-full); font-size:var(--t-1); font-weight:500; background:var(--line-2); color:var(--ink-2); margin-right:4px}
.cm .cb-tag--ok{background:var(--ok-soft); color:var(--ok)}
.cm .cb-tag--sim{background:var(--warn-soft); color:var(--warn); font-weight:700}
.cm .cb-tag--exc{background:var(--brand-soft); color:var(--brand-strong); border:1px solid var(--brand-line)}
.cm .cb-tag--cambio{background:var(--ok-soft); color:var(--ok)}
.cm .cb-tag--prov{background:var(--warn-soft); color:var(--warn)}

/* Barra de aplicar */
.cm .cb-aplicar{background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4)}
.cm .cb-aplicar--listo{background:var(--ok-soft); border-color:var(--ok)}
.cm .cb-aplicar-b{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.cm .cb-aplicar-m{color:var(--ink-2); font-size:var(--t-1); margin-top:var(--sp-2)}
.cm .cb-aviso-b{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); border-radius:var(--r-1); padding:var(--sp-3) var(--sp-4); font-weight:500}
.cm .cb-cambios{background:var(--ok-soft); border:1px solid var(--ok); border-radius:var(--r-1); padding:var(--sp-3) var(--sp-4); color:var(--ink)}
.cm .cb-cambios ul{margin-top:4px}
.cm .cb-esperando{display:flex; gap:var(--sp-3); align-items:center; background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-2); padding:var(--sp-5); color:var(--ink-2)}
.cm .cb-recibo{margin-top:var(--sp-2)}

/* Personas y grupos */
.cm .cb-grupos{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-3)}
.cm .cb-grupo{border:1px solid var(--line); border-radius:var(--r-1); padding:var(--sp-3); background:var(--surface-2)}
.cm .cb-grupo h3{font-size:var(--t-3)}
.cm .cb-grupo-c{font-size:var(--t-1); color:var(--ink-2); margin:2px 0 var(--sp-2)}
.cm .cb-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.cm .cb-persona{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-2); border-radius:var(--r-1); background:var(--surface); border:1px solid var(--line)}
.cm .cb-persona.is-inactiva{opacity:.7}
.cm .is-cambiado{box-shadow:0 0 0 2px var(--ok); background:var(--ok-soft)}
.cm .cb-avatar{flex:none; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:var(--t-2); text-shadow:0 1px 1px rgba(0,0,0,.35)}
.cm .cb-persona-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.cm .cb-persona-s{font-size:var(--t-1); color:var(--ink-2)}
.cm .cb-persona-m{display:flex; flex-wrap:wrap; gap:2px}

/* Tarjetas de criterios y metas */
.cm .cb-tarjetas{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-3)}
.cm .cb-crit, .cm .cb-meta{border:1px solid var(--line); border-left:5px solid var(--ink-3); border-radius:var(--r-1); padding:var(--sp-3); background:var(--surface); display:flex; flex-direction:column; gap:6px}
.cm .cb-crit-h{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2)}
.cm .cb-fam{font-weight:700; letter-spacing:.01em}
.cm .cb-estado{display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:var(--r-full); font-size:var(--t-1); font-weight:600; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2)}
.cm .cb-estado--nuevo{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.cm .cb-estado--cambia{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}
.cm .cb-estado--baja{background:var(--danger-soft); color:var(--danger); border-color:var(--danger)}
.cm .cb-formas{margin:0; padding-left:18px}
.cm .cb-crit-frase{font-weight:500}
.cm .cb-crit-expl{color:var(--ink-2); font-size:var(--t-1)}
.cm .cb-avisos{list-style:none; padding:0; margin:4px 0 0; color:var(--warn); font-size:var(--t-1)}
.cm .cb-ctl{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:flex-end; border-top:1px dashed var(--line); padding-top:var(--sp-2); margin-top:auto}
.cm .cb-ctl-c{display:flex; flex-direction:column; gap:3px; font-size:var(--t-1); font-weight:500; color:var(--ink-2)}
.cm .cb-in{height:34px; border:1px solid var(--line); border-radius:var(--r-1); padding:0 10px; background:var(--surface); color:var(--ink); font:inherit; max-width:100%}
.cm .cb-in--pct{width:78px; text-align:right}
.cm .cb-in--meta{width:100%; text-align:right}
.cm .cb-in-u{display:inline-flex; gap:4px; align-items:center}
.cm .cb-meta-f{display:flex; flex-direction:column; gap:3px; padding:6px; border-radius:var(--r-1)}
.cm .cb-meta-l{font-size:var(--t-1); font-weight:500; color:var(--ink-2)}
.cm .cb-meta-o{font-size:var(--t-1); color:var(--ink-3)}
.cm .cb-meta-v{font-weight:600}
.cm .cb-meta-ps{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px; border-top:1px dashed var(--line); padding-top:var(--sp-2)}

/* Gráfico */
.cm .cb-svg{width:100%; height:auto; display:block}
.cm .cb-svg-rej{stroke:var(--line); stroke-width:1}
.cm .cb-svg-eje{fill:var(--ink-3); font-size:var(--t-1)}
.cm .cb-svg-prov{fill:var(--line-2)}
.cm .cb-svg-prov-t{fill:var(--warn); font-size:var(--t-1); font-weight:700}
.cm .cb-svg-lin{stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.cm .cb-svg-lin--prov{stroke-dasharray:6 5}
.cm .cb-leyenda{list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-3); padding:0; margin:0 0 var(--sp-2); font-size:var(--t-1); color:var(--ink-2)}
.cm .cb-leyenda li{display:inline-flex; align-items:center; gap:6px}
.cm .cb-leyenda-m{display:inline-block; width:10px; height:10px; border-radius:50%}
.cm .cb-leyenda-m--cuadro{border-radius:1px}
.cm .cb-leyenda-m--rombo{border-radius:1px; transform:rotate(45deg)}
.cm .cb-leyenda-l{display:inline-block; width:22px; border-top:3px solid var(--ink-2)}
.cm .cb-leyenda-l--prov{border-top-style:dashed}
.cm .cb-tabla-det{margin-top:var(--sp-2)}
.cm .cb-tabla-det summary{cursor:pointer; color:var(--brand); font-size:var(--t-1)}

/* Tablas, explicaciones, versiones */
.cm .cb-tabla{width:100%; border-collapse:collapse; font-size:var(--t-2)}
.cm .cb-tabla th, .cm .cb-tabla td{padding:7px 8px; border-bottom:1px solid var(--line-2); text-align:left; font-weight:400}
.cm .cb-tabla thead th{font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--line)}
.cm .cb-tabla tbody th, .cm .cb-tabla tfoot th{font-weight:500}
.cm .cb-tabla tfoot th, .cm .cb-tabla tfoot td{font-weight:700; border-top:1px solid var(--line); border-bottom:0}
.cm .cb-tabla .cb-der{text-align:right}
.cm .cb-expl{padding-left:18px; display:flex; flex-direction:column; gap:4px}
.cm .cb-versiones{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.cm .cb-versiones li{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:var(--r-1); padding:var(--sp-2) var(--sp-3)}
.cm .cb-versiones li.is-actual{border-color:var(--brand); background:var(--brand-soft)}
.cm .cb-ver-t{flex:1 1 220px; min-width:0}
.cm .cb-ver-r{color:var(--ink-3); font-size:var(--t-1)}

/* Actividad real */
.cm .cb-actividad:empty{display:none}
.cm .cb-act-t{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.cm .cb-act-t .btn{margin-left:auto}
.cm .cb-descartar{display:flex; justify-content:flex-end; margin:0 0 var(--sp-3)}
.cm .cb-confirma{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4); max-width:520px}
.cm .cb-confirma p{margin:0 0 var(--sp-2); color:var(--ink-2)}
.cm .cb-confirma-b{display:flex; gap:var(--sp-2); flex-wrap:wrap}
.cm .cb-pasos{list-style:none; padding:0; margin:var(--sp-2) 0 0; display:flex; flex-direction:column; gap:4px; font-size:var(--t-1)}
.cm .cb-paso{display:flex; gap:var(--sp-2); align-items:baseline}
.cm .cb-paso-i{flex:none; width:18px; text-align:center; font-weight:700; color:var(--ink-3)}
.cm .cb-paso--terminado .cb-paso-i{color:var(--ok)}
.cm .cb-paso--error{color:var(--danger)}
.cm .cb-paso--error .cb-paso-i{color:var(--danger)}
.cm .cb-spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:cb-gira .9s linear infinite; flex:none}
@keyframes cb-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .cm .cb-spin{animation:none; border-top-color:var(--line); border-right-color:var(--brand)} }

/* Chat */
.cm .cb-hilo{overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-3); min-height:120px; max-height:46vh; padding-right:2px}
.cm .cb-msg{display:flex; flex-direction:column; gap:2px}
.cm .cb-msg-q{font-size:var(--t-1); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3)}
.cm .cb-msg-t{white-space:pre-wrap; overflow-wrap:anywhere}
.cm .cb-msg--agente .cb-msg-t{font-size:var(--t-3); line-height:1.5}
.cm .cb-msg--usuario .cb-msg-t{background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r-1); padding:var(--sp-2) var(--sp-3); align-self:flex-end; max-width:92%}
.cm .cb-msg--usuario .cb-msg-q{align-self:flex-end}
.cm .cb-preg{border:1px solid var(--brand); background:var(--brand-soft); border-radius:var(--r-1); padding:var(--sp-3)}
.cm .cb-preg-t{font-weight:600; margin-bottom:var(--sp-2)}
.cm .cb-preg-o{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cm .cb-preg-x{display:flex; gap:var(--sp-2); margin-top:var(--sp-2)}
.cm .cb-preg-x .cb-in{flex:1; min-width:0}
.cm .cb-form{display:flex; gap:var(--sp-2); align-items:flex-end}
.cm .cb-form textarea{flex:1; min-width:0; resize:vertical; border:1px solid var(--line); border-radius:var(--r-1); padding:8px 10px; font:inherit; color:var(--ink); background:var(--surface)}
.cm .cb-ayuda{font-size:var(--t-1); color:var(--ink-3)}

/* Modal de revisión (queda fuera de .cm en el DOM del ERP solo si la vista lo saca; aquí dentro de .cm) */
body.cb-sin-scroll{overflow:hidden}
.cm .cb-modal-fondo{position:fixed; inset:0; background:rgba(15,27,38,.55); z-index:2000; display:flex; align-items:center; justify-content:center; padding:var(--sp-4)}
.cm .cb-modal{background:var(--surface); color:var(--ink); border-radius:var(--r-2); box-shadow:var(--sh-2); width:min(860px,100%); max-height:calc(100vh - 32px); overflow:auto}
.cm .cb-modal-c{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4)}
.cm .cb-modal h3{font-size:var(--t-3); margin-bottom:var(--sp-2)}
.cm .cb-modal h4{font-size:var(--t-2); margin:var(--sp-2) 0 4px}
.cm .cb-modal ul{margin-bottom:var(--sp-2)}
.cm .cb-alcance{background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink); border-radius:var(--r-1); padding:var(--sp-3) var(--sp-4)}
.cm .cb-ok{background:var(--ok-soft); border:1px solid var(--ok); border-radius:var(--r-1); padding:var(--sp-3) var(--sp-4)}
.cm .cb-antes{color:var(--ink-3); text-decoration:line-through}
.cm .cb-despues{font-weight:600}
.cm .cb-chips{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:4px}
.cm .cb-modal-acc{display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap; position:sticky; bottom:0; background:var(--surface); padding-top:var(--sp-3); border-top:1px solid var(--line)}
.cm .cb-error--modal{margin-bottom:0}

/* Botones con texto variable: envuelven en varias líneas y nunca se salen de su tarjeta. */
.cm .cb-root .btn, .cm .cb-modal .btn{max-width:100%; height:auto; min-height:36px; white-space:normal; overflow-wrap:anywhere; line-height:1.3; padding-top:6px; padding-bottom:6px}
.cm .cb-root .btn--sm, .cm .cb-modal .btn--sm{min-height:30px; padding-top:4px; padding-bottom:4px}
.cm .cb-preg-o{flex-direction:column; align-items:stretch}
.cm .cb-preg-o .cb-opcion{width:100%; text-align:left; justify-content:flex-start}
.cm .cb-preg, .cm .cb-preg-o{min-width:0; max-width:100%}

/* ============================================================
   Asistente del criterio: ancho y paso 3 compacto (SCRUM-2676)

   El formulario se llevaba el 55 % del ancho y el resumen, que
   solo tiene una tabla corta, el 45 %. Ahora el resumen tiene un
   máximo y el formulario se queda con el resto. La comisión por
   categoría pasa de un campo por renglón a una fila por producto,
   como la tabla de «Comisiones x categoría».
   ============================================================ */
.cm .com-wz-cols{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.cm .com-wz-cols > aside{will-change:transform}

/* Volver va encima del título: el tema pone los h1 en línea. */
.cm .head .com-volver{display:flex; width:max-content}

/* Los campos de número sin `type` quedaban con el borde del navegador. */
.cm input.num:not([type=radio]):not([type=checkbox]){height:36px; padding:0 10px; border:1px solid var(--line);
  border-radius:var(--r-1); background:var(--surface); color:var(--ink); font-family:inherit; font-size:var(--t-2)}
.cm .com-pct, .cm .field .com-pct{width:72px; flex:none}
.cm .com-pesos input, .cm .field .com-pesos input{width:130px; flex:none}

/* Comisión por categoría: producto a la izquierda, sus tipos al lado. */
.cm .com-cats{padding-top:2px; padding-bottom:2px}
.cm .com-cat-g{display:grid; grid-template-columns:minmax(100px,150px) minmax(0,1fr); gap:var(--sp-3); align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line)}
.cm .com-cat-g:last-child{border-bottom:0}
.cm .com-cat-gn{margin:0; font-size:var(--t-1); font-weight:600; color:var(--ink-2)}
/* Los tipos en columnas parejas, para que los campos queden alineados como en una tabla. */
.cm .com-cat-i{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:6px 24px}
.cm .com-cat{display:flex; align-items:center; gap:6px; margin:0; font-size:var(--t-2); color:var(--ink-2); cursor:text}
.cm .com-cat > span:first-child{flex:1; min-width:0; overflow-wrap:break-word}
.cm .com-cat .com-pct{width:64px}
.cm .com-cat.is-on > span:first-child{color:var(--ink); font-weight:600}

/* Escalones: «paga … %» y «+ bono $ …» no se parten en tres renglones. */
.cm .com-esc > span:nth-child(2), .cm .com-esc > span:nth-child(3){white-space:nowrap}
/* Cada escalón es su propia rejilla: con anchos fijos, «paga» y «bono» quedan en la misma columna. */
.cm .com-esc{grid-template-columns:minmax(0,1fr) 140px 190px 64px}
.cm .com-esc .com-pesos input{width:110px}

/* El resumen es más angosto: el aviso de cada persona baja de renglón y la cifra no se sale. */
.cm .com-wz-cols .com-prev-p b{white-space:normal; min-width:0}
.cm .com-wz-cols .com-prev-p .num{white-space:nowrap}

@media (max-width:900px){
  .cm .com-wz-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cm .com-cat-g{grid-template-columns:1fr; gap:6px}
  .cm .com-esc{grid-template-columns:1fr auto}
}

/* ============================================================
   Asistente de comisiones: inicio como chat nuevo, chat centrado
   y diagramas (SCRUM-2676)

   Al entrar, la pregunta, una caja grande para escribir y
   sugerencias, como un chat nuevo. Mientras no hay propuesta, el
   chat va solo y centrado; cuando el asistente publica, pasa a
   tablero + chat al lado.
   ============================================================ */
.cm .cb-inicio{max-width:760px; margin:clamp(16px, 8vh, 96px) auto var(--sp-6); text-align:center}
.cm .cb-inicio-t{font-size:clamp(22px, 2.2vw, 28px); font-weight:600; letter-spacing:-.01em; line-height:1.25}
.cm .cb-inicio-s{color:var(--ink-2); margin:var(--sp-2) auto 0; max-width:600px}
.cm .cb-inicio .cb-nota{margin-top:var(--sp-3)}
.cm .cb-inicio .cb-compositor{margin-top:var(--sp-5); text-align:left}

/* La caja para escribir: el campo sin borde dentro de un marco redondeado, el botón abajo. */
.cm .cb-compositor{border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface);
  box-shadow:0 2px 10px rgba(15,27,38,.06); padding:10px 12px}
.cm .cb-compositor:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cm .cb-compositor textarea{display:block; width:100%; border:0; outline:0; resize:none; background:transparent;
  font:inherit; font-size:var(--t-3); color:var(--ink); padding:4px 2px; min-height:28px}
.cm .cb-compositor--inicio textarea{min-height:72px}
.cm .cb-compositor-pie{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:6px}
.cm .cb-form.cb-compositor{align-items:flex-end}
.cm .cb-form.cb-compositor textarea{border:0; padding:6px 2px}

.cm .cb-sugerencias{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:var(--sp-4)}
.cm .cb-sug{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:var(--r-full);
  padding:8px 14px; font:inherit; font-size:var(--t-2); line-height:1.3; cursor:pointer}
.cm .cb-sug:hover{border-color:var(--brand-line); color:var(--ink); background:var(--brand-soft)}
.cm .cb-sug:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.cm .cb-sug--principal{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.cm .cb-sug--principal:hover{background:var(--brand-strong); border-color:var(--brand-strong); color:#fff}
.cm .cb-sug:disabled{opacity:.6; cursor:default}

/* Chat centrado mientras no hay propuesta. El hilo tiene su propio scroll y la caja queda a la
   vista abajo: `position:sticky` no sirve porque el `main` del ERP tiene overflow:hidden. */
.cm .cb-layout.is-centrado{grid-template-columns:minmax(0,1fr); max-width:800px; margin:0 auto}
.cm .cb-layout.is-centrado .cb-tablero:empty{display:none}
.cm .cb-layout.is-centrado .cb-chat{position:static; background:transparent; border:0; box-shadow:none; padding:0;
  height:max(440px, calc(100vh - 300px)); max-height:none}
.cm .cb-layout.is-centrado .cb-hilo{flex:1; max-height:none; min-height:0; order:1; gap:var(--sp-4); padding:var(--sp-2) 4px}
.cm .cb-layout.is-centrado .cb-actividad{order:2}
.cm .cb-layout.is-centrado .cb-pregunta{order:3}
.cm .cb-layout.is-centrado .cb-form{order:4}
.cm .cb-layout.is-centrado .cb-ayuda{order:5; text-align:center}
.cm .cb-layout.is-centrado .cb-msg--agente .cb-msg-t{font-size:var(--t-3)}
.cm .cb-layout.is-centrado .cb-msg--usuario .cb-msg-t{max-width:80%}

/* Diagramas del asistente. */
.cm .cb-diagrama{margin:var(--sp-2) 0 0; padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-1); background:var(--surface)}
.cm .cb-diag-lienzo{display:flex; justify-content:center; overflow-x:auto}
.cm .cb-diag-lienzo svg{max-width:min(100%, 680px); height:auto; max-height:380px}
.cm .cb-diag-cargando{color:var(--ink-3); font-size:var(--t-1); padding:var(--sp-3)}
.cm .cb-diag-src{margin-top:var(--sp-2); font-size:var(--t-1); color:var(--ink-3)}
.cm .cb-diag-src summary{cursor:pointer}
.cm .cb-diag-src pre{margin:6px 0 0; padding:8px 10px; background:var(--surface-2); border-radius:8px; white-space:pre-wrap;
  font-size:var(--t-1); color:var(--ink-2); max-height:220px; overflow:auto}
.cm .cb-diagrama.is-fallido .cb-diag-lienzo{justify-content:flex-start}

/* La actividad del turno: un desplegable de una línea; con el chat centrado y espacio, una columna
   a la derecha. Solo muestra los pasos del turno en curso, no los de un estudio anterior. */
.cm .cb-act-d summary{cursor:pointer; font-size:var(--t-1); color:var(--ink-3); padding:2px 0}
.cm .cb-act-d summary:hover{color:var(--ink-2)}
.cm .cb-act-t + .cb-act-d{margin-top:4px}
.cm .cb-act-vacio{margin:0; font-size:var(--t-1); color:var(--ink-3)}
.cm .cb-layout.is-centrado.is-ancho{max-width:1100px}
.cm .cb-layout.is-centrado.is-ancho .cb-chat{display:grid; grid-template-columns:minmax(0,1fr) 250px;
  grid-template-rows:minmax(0,1fr) auto auto auto; column-gap:var(--sp-5); row-gap:var(--sp-3)}
.cm .cb-layout.is-centrado.is-ancho .cb-hilo{grid-column:1; grid-row:1}
.cm .cb-layout.is-centrado.is-ancho .cb-pregunta{grid-column:1; grid-row:2}
.cm .cb-layout.is-centrado.is-ancho .cb-form{grid-column:1; grid-row:3}
.cm .cb-layout.is-centrado.is-ancho .cb-ayuda{grid-column:1; grid-row:4}
.cm .cb-layout.is-centrado.is-ancho .cb-actividad{grid-column:2; grid-row:1 / -1; align-self:start; display:block;
  border-left:1px solid var(--line); padding:var(--sp-2) 0 var(--sp-2) var(--sp-4)}
.cm .cb-layout.is-centrado.is-ancho .cb-act-d summary{font-weight:600; color:var(--ink-2)}

@media (max-width:640px){
  .cm .cb-layout.is-centrado .cb-chat{height:auto}
  .cm .cb-layout.is-centrado .cb-hilo{max-height:60vh}
  .cm .cb-compositor-pie .cb-ayuda{display:none}
}

/* Diagramas del tablero (SCRUM-2676): cómo paga cada criterio, la escalera de los escalones y el
   costo por persona de la simulación. Los dibuja Softop con los datos del borrador, no el modelo. */
/* Vertical, para que en una tarjeta angosta el «+» y el «=» no queden sueltos al comienzo de un renglón. */
.cm .cb-flujo{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:var(--sp-2) 0}
.cm .cb-fl-formas{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.cm .cb-fl-n{display:inline-flex; flex-direction:column; padding:6px 10px; border:1px solid var(--brand-line); background:var(--brand-soft);
  border-radius:var(--r-1); font-size:var(--t-2); color:var(--ink); line-height:1.3}
.cm .cb-fl-n small{font-size:var(--t-1); color:var(--ink-2)}
.cm .cb-fl-n--fin{background:var(--surface); border-color:var(--brand); border-width:1.5px}
.cm .cb-fl-mas, .cm .cb-fl-flecha{font-weight:700; color:var(--ink-3)}
.cm .cb-fl-flecha{font-size:var(--t-3)}
.cm .cb-fig{margin:var(--sp-2) 0 var(--sp-3)}
.cm .cb-fig figcaption{font-size:var(--t-1); color:var(--ink-3); margin-top:2px}
.cm .cb-fig--rep{max-width:640px}
.cm .cb-svg-ax{stroke:var(--line); stroke-width:1}
.cm .cb-svg-meta{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:4 4}
.cm .cb-svg-escalera{fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linejoin:round}
.cm .cb-svg-bono{fill:#d97706; stroke:#fff; stroke-width:1.5}
.cm .cb-svg-t{fill:var(--ink-3); font-size:var(--t-1)}
.cm .cb-svg-t--v{fill:var(--ink); font-weight:600; font-size:var(--t-1)}
.cm .cb-svg-esc{max-width:420px}
.cm .cb-svg-t--meta{fill:var(--ink-2); font-weight:600}
.cm .cb-svg-t--bono{fill:#9a5b06; font-weight:600}
.cm .cb-svg-t--grupo{fill:var(--ink-2); font-weight:700; font-size:var(--t-1)}
.cm .cb-svg-t--n{fill:var(--ink); font-size:var(--t-1)}
.cm .cb-svg-t--s{font-size:var(--t-1)}
.cm .cb-svg-t--prop{fill:var(--brand-strong); font-weight:600}
.cm .cb-svg-bar--actual{fill:#C5CFD8}
.cm .cb-svg-bar--prop{fill:var(--brand)}