/* ============================================================
   SOFTOP · CARGUE MASIVO (SCRUM-2641) · hoja de estilos

   Son las reglas de la maqueta (softop-v5-front: css/app.css y
   css/tokens.css), portadas como hizo comisiones.css con .cm: todo
   acotado bajo .cg para que los tokens y .card/.btn/.tag no se
   mezclen con el tema del ERP. Generado desde la maqueta: si la
   maqueta cambia, se vuelve a portar, no se edita regla por regla.
   ============================================================ */

.cg{
  --brand:        #0079B8;
  --brand-strong: #005E92;
  --brand-soft:   #F5FAFE;
  --brand-line:   #CFE7F5;
  --brand-vivid:  #009CD8;
  --brand-surface: linear-gradient(96deg,#083A63 0%,#0A5C93 44%,#0C86BE 100%);
  --sobre-acento:   #FFFFFF;
  --ink:   #0F1B26;
  --ink-2: #47586A;
  --ink-3: #64717E;
  --bg:      #F4F7FA;
  --surface: #FFFFFF;
  --surface-2:#F8FAFC;
  --line:    #E3E9EF;
  --line-2:  #F0F4F7;
  --ok:     #0F7B4F;
  --ok-soft:     #E7F5EE;
  --warn:   #9A6400;
  --warn-soft:   #FDF3E2;
  --danger: #C0392F;
  --danger-soft: #FCEDEB;
  --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);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Inter,system-ui,sans-serif;
  --t-1:12.5px;
  --t-2:13.5px;
  --t-3:14.5px;
  --t-4:26px;
  --t-5:25px;
  --t-6:32px;
  --top-h: 56px;
  color:var(--ink-2); font-family:var(--font); font-size:var(--t-2); line-height:1.5; letter-spacing:-.008em; font-variant-numeric:tabular-nums;
}
.cg *,.cg *::before,.cg *::after{box-sizing:border-box}
.cg [hidden]{display:none}
:where(.cg) p{margin:0}
.cg ul,.cg ol{margin:0}
.cg button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.cg svg{flex:none; display:block}

/* ---- componentes V5 que usa la pantalla ---- */
:where(.cg) h1,
:where(.cg) h2,
:where(.cg) h3{color:var(--ink); font-weight:600; letter-spacing:-.012em; line-height:1.2}
:where(.cg) h1{font-size:var(--t-4); letter-spacing:-.022em}
:where(.cg) h2{font-size:var(--t-3)}
:where(.cg) h3{font-size:var(--t-2)}
:where(.cg) a{color:var(--brand); text-decoration:none}
:where(.cg) a:hover{text-decoration:underline}
:where(.cg) button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:where(.cg) svg{flex:none; display:block}
.cg .stack{display:flex; flex-direction:column; gap:var(--sp-4)}
.cg .stack > *{min-width:0}
.cg .row{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.cg .row-between{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
.cg .grow{flex:1; min-width:0}
.cg .icon-btn{width:34px; height:34px; border-radius:var(--r-1); flex:none; display:grid; place-items:center; color:var(--ink-3); position:relative;}
.cg .icon-btn:hover{background:var(--surface-2); color:var(--ink)}
.cg .icon-btn svg{width:18px; height:18px; stroke:currentColor}
.cg .icon-btn[data-dot]::after{content:""; position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:var(--r-full); background:var(--danger); border:2px solid var(--top-dot-ring);}
.cg .head{margin-bottom:var(--sp-5)}
/* La grilla y el asistente mandan: la cabecera es una línea; la ayuda está en «Cómo funciona». */
#cgCabeza{margin-bottom:var(--sp-2); align-items:center; flex-wrap:wrap; gap:var(--sp-2)}
#cgCabeza h1{font-size:20px; line-height:1.2}
#cgCabeza .btn{padding-block:5px}
.cg-anterior{font-size:var(--t-2)}
.cg .head p{color:var(--ink-3); margin-top:3px}
.cg .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;}
.cg .btn svg{width:16px; height:16px; stroke:currentColor}
.cg .btn:hover{text-decoration:none}
.cg .btn--primary{background:var(--brand); color:var(--sobre-acento)}
.cg .btn--primary:hover{background:var(--brand-strong)}
.cg .btn--ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line)}
.cg .btn--ghost:hover{background:var(--surface-2); color:var(--ink)}
.cg .btn--quiet{color:var(--ink-3); padding:0 8px}
.cg .btn--quiet:hover{background:var(--surface-2); color:var(--ink)}
.cg .btn--lg{height:42px; padding:0 18px}
.cg .btn--block{width:100%}
.cg .btn:disabled{opacity:.45; cursor:not-allowed}
.cg .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-1)}
.cg .card-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-4) 0}
.cg .card-body{padding:var(--sp-4)}
.cg .card-foot{padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line-2); font-size:var(--t-2)}
.cg .meta{font-size:var(--t-1); color:var(--ink-3)}
.cg .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);}
.cg .tag::before{content:""; width:5px; height:5px; border-radius:var(--r-full); background:currentColor}
.cg .tag--ok{background:var(--ok-soft); color:var(--ok)}
.cg .tag--warn{background:var(--warn-soft); color:var(--warn)}
.cg .tag--danger{background:var(--danger-soft); color:var(--danger)}
.cg .tag--inline{vertical-align:-4px}
.cg .tabs{display:flex; gap:var(--sp-1); flex-wrap:wrap}
.cg .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);}
.cg .tab:hover{background:var(--surface-2)}
.cg .tab[aria-selected="true"]{background:var(--brand); border-color:var(--brand); color:var(--sobre-acento); font-weight:600}
.cg .tab .n{opacity:.7; margin-left:4px; font-variant-numeric:tabular-nums}
.cg .table-wrap{overflow-x:auto}
:where(.cg) table{width:100%; border-collapse:collapse; font-size:var(--t-2)}
:where(.cg) thead th{text-align:left; padding:10px var(--sp-4); white-space:nowrap; font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:-.005em; background:var(--surface-2); border-bottom:1px solid var(--line);}
:where(.cg) tbody td{padding:12px var(--sp-4); border-bottom:1px solid var(--line-2); vertical-align:middle}
:where(.cg) tbody tr:last-child td{border-bottom:0}
:where(.cg) tbody tr:hover{background:var(--surface-2)}
:where(.cg) tfoot td{padding:12px var(--sp-4); border-top:1px solid var(--line); font-weight:700; color:var(--ink)}
.cg .td-right{text-align:right}
.cg .list{list-style:none}
.cg .list li{display:flex; align-items:center; gap:var(--sp-3); padding:12px var(--sp-4); border-bottom:1px solid var(--line-2)}
.cg .list li:last-child{border-bottom:0}
.cg .list .item-sub{font-size:var(--t-1); color:var(--ink-3); margin-top:1px}
.cg .list .time{font-size:var(--t-1); font-weight:600; color:var(--ink-3); width:46px; flex:none; font-variant-numeric:tabular-nums}
.cg .list--plain li{padding:6px 0; border:0}
.cg .field{display:flex; flex-direction:column; gap:5px}
.cg .field > label{font-size:var(--t-1); font-weight:500; color:var(--ink-2)}
.cg .field .req{color:var(--danger)}
.cg .field .hint{font-size:var(--t-1); color:var(--ink-3)}
.cg .input,
.cg .field :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea){height:36px; padding:0 10px; width:100%; font:inherit; font-size:14px; letter-spacing:-.01em; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-1); outline:none;}
.cg .field textarea{height:auto; padding:8px 10px; resize:vertical; min-height:72px}
.cg .field select{appearance:none; padding-right:28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364717E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:15px}
.cg .input:focus,
.cg .field :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea):focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cg .input--mini{height:30px; padding:0 8px; text-align:right}
.cg .input--mini::-webkit-inner-spin-button,
.cg .input--mini::-webkit-outer-spin-button{appearance:none; margin:0}
.cg .input--mini[type=number]{appearance:textfield; -moz-appearance:textfield}
:where(.cg) button.chip:hover{border-color:var(--ink-3)}
.cg .notice{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r-1);}
.cg .notice .secondary{font-size:var(--t-1); color:var(--ink-3); margin-top:1px}
.cg .av-lista{list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:6px}
.cg .av-ir{display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-1); border:1px solid var(--line); background:var(--surface); color:var(--ink);}
.cg .av-ir:hover{border-color:var(--brand); background:var(--brand-soft)}
.cg .av-ir b{display:block; font-size:var(--t-2); font-weight:600}
.cg .av-ir .meta{display:block; font-size:var(--t-1); color:var(--ink-3)}
.cg .av-flecha{flex:none; font-size:var(--t-1); font-weight:600; color:var(--brand)}
.cg .scrim{position:fixed; inset:0; z-index:1040; /* sobre el encabezado fijo de la app (z-index 1030) */ background:rgba(6,20,32,.45); opacity:0; pointer-events:none; transition:opacity .2s}
.cg[data-drawer="open"] .scrim{opacity:1; pointer-events:auto}
.cg .drawer{position:fixed; top:0; right:0; bottom:0; z-index:1041; width:min(440px,100%); background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--sh-2); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s cubic-bezier(.3,.8,.3,1);}
.cg[data-drawer="open"] .drawer{transform:none}
.cg .drawer-head{display:flex; align-items:center; justify-content:space-between; flex:none; height:var(--top-h); padding:0 var(--sp-3) 0 var(--sp-4); border-bottom:1px solid var(--line);}
.cg .drawer-head b{color:var(--ink); font-size:var(--t-3)}
.cg .drawer-body{flex:1; overflow-y:auto; padding:var(--sp-5) var(--sp-4)}
.cg .pop-wrap{position:relative}
.cg .pop{position:absolute; z-index:70; min-width:250px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-2); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .14s, transform .14s, visibility .14s;}
.cg .pop.on{opacity:1; visibility:visible; transform:none}
.cg .pop--right{top:calc(100% + 6px); right:0; width:296px}
.cg .pop--search{top:calc(100% + 6px); left:0; right:0; max-height:min(60vh, 440px); overflow-y:auto}
.cg .pop-head{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line-2)}
.cg .pop-head b{display:block; color:var(--ink); font-size:var(--t-2)}
.cg .pop-head .meta{display:block}
.cg .pop-sep{height:1px; background:var(--line-2); margin:4px 0}
.cg .pop-body{padding:var(--sp-2); max-height:min(70vh,540px); overflow-y:auto}
.cg .pop-body > a,
.cg .pop-body > button{display:flex; align-items:center; gap:var(--sp-2); width:100%; padding:7px 10px; border-radius:var(--r-1); font-size:var(--t-2); color:var(--ink-2); text-align:left;}
.cg .pop-body > a:hover,
.cg .pop-body > button:hover{background:var(--brand-soft); color:var(--brand); text-decoration:none}
.cg .pop-body > a b{display:block; color:var(--ink); font-weight:600}
.cg .pop-body > a:hover b{color:var(--brand)}
.cg .pop-body > a .meta{display:block}
.cg .pop-body > button[aria-selected="true"]{background:var(--brand-soft); color:var(--brand)}
.cg .pop-body > button[aria-selected="true"] b{color:var(--brand)}
.cg .notice--warn{background:var(--warn-soft); border-color:var(--warn)}
.cg .notice--warn b{color:var(--warn)}
.cg .notice--danger{background:var(--danger-soft); border-color:var(--danger)}
.cg .notice--danger b{color:var(--danger)}
.cg .btn--caja{background:var(--oro); color:#2A1D05; height:42px}
.cg .btn--caja:hover{filter:brightness(.94)}
.cg .btn--caja-ghost{background:var(--oro-soft); color:var(--oro); border-color:var(--oro)}
.cg .btn--caja-ghost:hover{background:var(--oro); color:#2A1D05}
.cg .btn--xs{height:26px; padding:0 9px; font-size:var(--t-1)}
.cg .list--agenda li{gap:var(--sp-2); padding-left:var(--sp-4)}
.cg .check{display:flex; gap:10px; align-items:flex-start; padding:9px 0; cursor:pointer}
.cg .check input{width:17px; height:17px; margin-top:1px; flex:none; accent-color:var(--brand)}
.cg .check span{font-size:var(--t-2); color:var(--ink-2)}
.cg .check em{display:block; font-style:normal; font-size:var(--t-1); color:var(--ink-3); margin-top:1px}
.cg .empty{padding:var(--sp-6) var(--sp-4); text-align:center; color:var(--ink-3)}
.cg .mt-3{margin-top:var(--sp-3)}
.cg .mb-3{margin-bottom:var(--sp-3)}
.cg .mb-4{margin-bottom:var(--sp-4)}
.cg .stack--tight{gap:var(--sp-3)}
.cg .tag--examen{background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line)}
.cg .field [data-estado="sugerido"]{color:var(--ink-3); font-weight:400; font-style:italic; background-color:var(--warn-soft); border-color:var(--warn);}
.cg .field [data-estado="sugerido"]:hover{cursor:pointer; border-color:var(--warn)}
.cg .field--ancho{grid-column:1 / -1}
.cg .field .pred textarea{position:relative; z-index:1; background:transparent; display:block;}
:where(.cg) button.tag{cursor:pointer}
:where(.cg) button.tag:hover{border-color:var(--brand); color:var(--brand)}
.cg .tag--propio{background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line); font-size:var(--t-1); height:24px; padding:0 8px; margin-left:6px; vertical-align:2px;}
.cg .icon-btn[aria-disabled="true"]{opacity:.35; pointer-events:none}
.cg .rps-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4);}
.cg .rps-tile{text-align:left; padding:var(--sp-4); border-radius:var(--r-2); border:1px solid var(--line); background:var(--surface);}
.cg .rps-tile:hover{border-color:var(--brand)}
.cg .rps-tile.es-sel{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cg .rps-tile.es-cero{opacity:.55}
.cg .rps-tile b{display:inline-block; font-size:var(--t-4); font-weight:700; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums;}
.cg .rps-tile b.tag--ok{color:var(--ok)}
.cg .rps-tile b.tag--warn{color:var(--warn)}
.cg .rps-tile b.tag--danger{color:var(--danger)}
.cg .rps-tile b.tag--neutro{color:var(--ink)}
.cg .rps-tile > span{display:block; font-size:var(--t-2); font-weight:600; color:var(--ink); margin-top:2px}
.cg .rps-tile .meta{display:block; font-size:var(--t-1); margin-top:3px; line-height:1.4}
.cg .pop--mega{top:calc(100% + 6px); right:0; width:520px; text-align:left}
.cg .field:hover .hc-estrella,
.cg .field:focus-within .hc-estrella{opacity:1}
.cg .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.cg .sr-only table{table-layout:fixed; width:1px}
.cg .field--inline{display:flex; flex-direction:row; align-items:center; gap:8px; margin:0}
.cg .field--inline label{margin:0; white-space:nowrap}
.cg .field--inline select{width:auto; min-width:150px}
.cg .tag--brand{background:var(--brand-soft); color:var(--brand)}
.cg .tag--muted{background:var(--surface-2); color:var(--ink-3)}
.cg .card.es-apagado{opacity:.5}
.cg .field--check{align-self:end}
:where(.cg) a.po-btn{display:flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box}
.cg .card-head .dash-inf{margin-left:auto; font-size:var(--t-1); white-space:nowrap; min-width:0}
.cg .row-between .rp-tools{margin-left:0}
.cg .card .row-between{flex-wrap:wrap; gap:6px 12px}
:where(.cg) a.pf-rips{text-decoration:none}
.cg .rps-tile--btn{cursor:pointer; font:inherit; color:inherit}
.cg .rps-tile--btn:hover{border-color:var(--brand)}
.cg .list--agenda .btn + .btn{margin-left:4px}
:where(.cg) a.as-l{text-decoration:none; color:inherit}
.cg .field select:disabled{opacity:1; color:var(--ink-2); background:var(--surface-2); cursor:default}

/* ---- la grilla, el asistente y la revisión (de la maqueta, sin cambios) ---- */
.cg-proto{margin-bottom:var(--sp-4); flex-wrap:wrap}
.cg-proto-acc{gap:var(--sp-2)}
.cg .notice .secondary{display:block}
/* Los avisos que piden atención flotan arriba a la izquierda (pedido de Marco, ronda 3): se ven aunque la
   página esté abajo o la grilla en pantalla completa, y no empujan la grilla. Por debajo de las modales (1050). */
.cg-aviso{position:fixed; top:var(--sp-3); left:var(--sp-3); z-index:1045; margin:0; max-width:min(560px, calc(100vw - 2 * var(--sp-3))); box-shadow:var(--sh-2)}
.cg-aviso.notice--ok{background:var(--ok-soft); border-color:var(--ok)}
.cg-work{display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:var(--sp-4); height:var(--cg-alto, clamp(520px, calc(100vh - 340px), 920px))}
.cg-work > *{min-width:0; min-height:0}
.cg-work[data-ai="cerrado"]{grid-template-columns:minmax(0,1fr)}
.cg-work[data-ai="cerrado"] .cg-ai{display:none}
.cg-xl{display:flex; flex-direction:column; overflow:hidden}

/* ---- la barra de herramientas ---- */
.cg-barra{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line-2)}
.cg-grupo{display:flex; align-items:center; gap:2px; padding-right:var(--sp-2); border-right:1px solid var(--line-2)}
.cg-grupo:last-child{border-right:0; padding-right:0}
.cg-rb{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 9px; border-radius:var(--r-1); font-size:var(--t-2); font-weight:500; color:var(--ink-2); white-space:nowrap}
.cg-rb svg{width:16px; height:16px; stroke:currentColor}
.cg-rb:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
.cg-rb:disabled{opacity:.4; cursor:not-allowed}
.cg-rb[aria-pressed="true"]{background:var(--brand-soft); color:var(--brand); font-weight:600}
.cg-rb--ai{border:1px solid var(--brand-line); color:var(--brand); font-weight:600; margin-right:var(--sp-1)}

/* ---- el cuadro de nombre y la barra de fórmulas ---- */
.cg-formula{display:flex; align-items:stretch; min-height:38px; border-bottom:1px solid var(--line-2)}
.cg-nombre{width:104px; flex:none; display:grid; place-items:center; border-right:1px solid var(--line-2); font-weight:600; font-size:var(--t-2); color:var(--ink)}
.cg-fx{width:36px; flex:none; display:grid; place-items:center; border-right:1px solid var(--line-2); color:var(--ink-3); font-style:italic; font-weight:600}
.cg-fin{flex:1; min-width:0; border:0; outline:0; padding:0 var(--sp-3); font:inherit; font-size:var(--t-2); color:var(--ink); background:var(--surface)}
.cg-fin:focus{box-shadow:inset 0 -2px 0 var(--brand)}
.cg-fmsg{display:flex; align-items:center; gap:var(--sp-2); max-width:52%; padding:4px var(--sp-3); font-size:var(--t-1); line-height:1.35}
.cg-fmsg svg{width:15px; height:15px; stroke:currentColor}
.cg-fmsg[data-t="err"]{background:var(--danger-soft); color:var(--danger)}
.cg-fmsg[data-t="adv"],.cg-fmsg[data-t="sug"]{background:var(--warn-soft); color:var(--warn)}
.cg-fmsg[data-t="sug"] span{font-style:italic}
.cg-fmsg[data-t="inf"]{background:var(--brand-soft); color:var(--brand)}

/* ---- la hoja ---- */
.cg-scroll{position:relative; flex:1; min-height:0; overflow:auto; background:var(--surface); outline:none}
.cg-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--brand); border-radius:0}
.cg-scroll.cg-suelta{background:var(--brand-soft); box-shadow:inset 0 0 0 3px var(--brand)}
.cg-hoja{width:auto; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:var(--t-2); user-select:none; -webkit-user-select:none}
.cg-col-rh{width:56px}
.cg-hoja th,.cg-hoja td{height:36px; padding:0 var(--sp-2); border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cg-hoja thead th{position:sticky; top:0; z-index:4; height:46px; padding:0; text-align:left; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-2); cursor:s-resize}
.cg-let{display:block; height:16px; line-height:16px; text-align:center; font-weight:500; color:var(--ink-3); border-bottom:1px solid var(--line-2)}
.cg-cn{display:block; padding:5px var(--sp-2) 0; overflow:hidden; text-overflow:ellipsis}
.cg-hoja thead th.hl{background:color-mix(in srgb, var(--brand) 14%, var(--surface)); color:var(--brand)}
.cg-hoja thead th.hl .cg-let{color:var(--brand)}
.cg-rz{position:absolute; top:0; right:-3px; bottom:0; width:7px; cursor:col-resize; z-index:5}
.cg-hoja thead th.cg-esq{left:0; z-index:6; cursor:se-resize}
.cg-hoja tbody th.cg-rh{position:sticky; left:0; z-index:3; padding:0 2px; text-align:center; background:var(--surface-2); color:var(--ink-3); font-size:12px; font-weight:600; cursor:e-resize; border-left:4px solid transparent}
.cg-hoja tbody th.cg-rh.hl{background:color-mix(in srgb, var(--brand) 14%, var(--surface)); color:var(--brand)}
.cg-rh[data-e="nuevo"]{border-left-color:var(--ok)}
.cg-rh[data-e="mod"]{border-left-color:var(--brand)}
.cg-rh[data-e="err"]{border-left-color:var(--danger)}
.cg-rh[data-e="nuevo"]::after{content:" +"}
.cg-rh[data-e="mod"]::after{content:" •"}
.cg-rh[data-e="err"]::after{content:" !"}
.cg-hoja tbody tr:hover{background:transparent}
.cg-hoja tbody tr:last-child td{border-bottom:1px solid var(--line-2)}
.cg-hoja td{position:relative; cursor:cell; background:var(--surface); color:var(--ink)}
.cg-n{text-align:right}
.cg-hoja td.cg-ro{background:var(--surface-2); color:var(--ink-3)}
.cg-hoja td.cg-in{background:color-mix(in srgb, var(--brand) 11%, var(--surface))}
.cg-hoja td.cg-ro.cg-in{background:color-mix(in srgb, var(--brand) 14%, var(--surface-2))}
.cg-hoja td.cg-sug{background:var(--warn-soft); color:var(--ink-3); font-style:italic}
.cg-hoja td.cg-cam{color:var(--brand); font-weight:600}
.cg-hoja td.cg-err{background:var(--danger-soft)}
.cg-hoja td.cg-adv{box-shadow:inset 0 -2px 0 var(--warn)}
.cg-hoja td.cg-err::after,.cg-hoja td.cg-adv::after{content:""; position:absolute; top:0; right:0; border-left:9px solid transparent; border-top:9px solid var(--danger)}
.cg-hoja td.cg-adv::after{border-top-color:var(--warn)}
.cg-dl{margin-left:6px; font-size:12px; font-weight:600; font-style:normal}
.cg-dl.sube{color:var(--ok)}
.cg-dl.baja{color:var(--danger)}
.cg-ph{color:var(--ink-3); font-style:italic}
.cg-ayu{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--line); color:var(--ink-2); font-size:10px; font-weight:700; cursor:help; vertical-align:1px}
.cg-dd{position:absolute; right:4px; top:50%; display:none; width:22px; height:22px; margin-top:-11px; border:1px solid var(--line); border-radius:6px; cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364717E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat}
.cg-hoja td.cg-act .cg-dd,.cg-hoja td:hover .cg-dd{display:block}
.cg-hoja tr.cg-flash td{animation:cg-flash 1.8s}
@keyframes cg-flash{from{background-color:var(--warn-soft)}}

/* ---- la capa de selección y el editor ---- */
.cg-capa{position:absolute; left:0; top:0; width:0; height:0; z-index:2; pointer-events:none}
.cg-selbox,.cg-actbox,.cg-copybox,.cg-fillbox{position:absolute; pointer-events:none}
.cg-selbox{border:2px solid var(--brand)}
.cg-selbox--multi{border-width:1px}
.cg-actbox{border:2px solid var(--brand); box-shadow:inset 0 0 0 1px var(--surface)}
.cg-copybox{border:2px dashed var(--brand)}
.cg-fillbox{border:1px dashed var(--ink-3)}
.cg-asa{position:absolute; z-index:3; width:10px; height:10px; background:var(--brand); border:2px solid var(--surface); cursor:crosshair; pointer-events:auto}
.cg-ed{position:absolute; z-index:8; pointer-events:auto}
.cg-ed input{width:100%; height:100%; padding:0 var(--sp-2); border:2px solid var(--brand); border-radius:0; outline:0; font:inherit; font-size:var(--t-2); color:var(--ink); background:var(--surface); box-shadow:var(--sh-2)}
.cg-lista{position:absolute; left:0; top:100%; min-width:100%; max-height:260px; overflow:auto; margin-top:2px; padding:var(--sp-1); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-1); box-shadow:var(--sh-2)}
.cg-lista div{padding:7px 10px; border-radius:var(--r-1); cursor:pointer; white-space:nowrap; font-size:var(--t-2); color:var(--ink-2)}
.cg-lista div b{font-weight:500; color:var(--ink)}
.cg-lista .meta{margin-left:8px}
.cg-lista div.hi{background:var(--brand-soft); color:var(--brand)}
.cg-lista div.hi b{color:var(--brand)}
.cg-lista .none{cursor:default; color:var(--ink-3); white-space:normal; max-width:340px}
.cg-lista .cg-regprov{display:flex; margin-top:var(--sp-2); gap:6px}
.cg-lista .cg-elegidas{margin:0; padding:6px 10px; white-space:normal; font-size:var(--t-1)}
.cg-lista .cg-multi{display:flex; align-items:center; gap:8px}
.cg-marca{display:inline-flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; border:1.5px solid var(--line); border-radius:4px; font-size:11px; font-weight:700; color:var(--surface)}
.cg-multi[aria-selected="true"] .cg-marca{background:var(--brand); border-color:var(--brand)}
.cg-regprov svg{width:14px; height:14px; stroke:currentColor}
/* La modal reutiliza la página de Proveedores (Softop): sin su título ni su ruta. */
.cg-mform h1, .cg-mform .breadcrumb-container, .cg-mform .separator{display:none !important}
.cg-mform .card{margin:0 !important; box-shadow:none}

/* ---- el pie: hojas y barra de estado ---- */
.cg-pie{display:grid; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--line); background:var(--surface-2)}
.cg-hojas{align-items:center; gap:var(--sp-2)}
.cg-tab-err{margin-left:6px; font-weight:600}
.cg-hojas .tab[aria-selected="false"] .cg-tab-err{color:var(--danger)}
.cg-pie > *{min-width:0}
.cg-estado{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-4); padding-top:var(--sp-2); border-top:1px solid var(--line-2); font-size:var(--t-1); color:var(--ink-3)}
.cg-estado b{color:var(--ink); font-weight:600}
.cg-sp{flex:1}
.cg-leyenda{display:inline-flex; align-items:center; gap:6px}
.cg-leyenda svg{width:14px; height:14px; stroke:currentColor}
.cg-leyenda--adv{color:var(--warn); font-weight:600}
.cg-leyenda--ok{color:var(--ok); font-weight:600}
.cg-pto{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; font-style:normal; font-size:12px; font-weight:600; line-height:1}
.cg-pto--nuevo{background:var(--ok-soft); color:var(--ok)}
.cg-pto--nuevo::before{content:"+"}
.cg-pto--mod{background:var(--brand-soft); color:var(--brand)}
.cg-pto--mod::before{content:"•"}
.cg-ir{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--r-1); font-size:var(--t-1); font-weight:600; background:var(--danger-soft); color:var(--danger)}
.cg-ir--sug{background:var(--warn-soft); color:var(--warn)}
.cg-ir svg{width:14px; height:14px; stroke:currentColor}

/* ---- menús: columnas y clic derecho (el mismo .pop de siempre) ---- */
.cg-pop{top:calc(100% + 6px); left:0; width:320px}
.cg-pop .check{padding:6px var(--sp-2)}
.pop.cg-ctx{position:fixed; width:300px}
.cg-ctx .pop-body > button{justify-content:space-between}
.cg-ctx .pop-body > button:disabled{opacity:.4; cursor:not-allowed}
#cgPopSim .check{padding:6px var(--sp-2)}

/* ---- el asistente: un panel al lado de la hoja ---- */
.cg-ai{display:flex; flex-direction:column; overflow:hidden}
.cg-ai-cab{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line-2)}
.cg-ai-cab b{color:var(--ink); font-size:var(--t-3)}
.cg-ai-ico svg{width:18px; height:18px; stroke:var(--brand)}
.cg-log{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); background:var(--surface-2)}
.cg-m{max-width:96%; padding:10px 12px; border-radius:var(--r-2); font-size:var(--t-2); line-height:1.5; color:var(--ink-2)}
.cg-m b{color:var(--ink); font-weight:600}
.cg-m--u{align-self:flex-end; background:var(--brand); color:var(--sobre-acento); border-bottom-right-radius:4px}
.cg-m--u b{color:inherit}
.cg-m--a{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px}
.cg-m--a.is-falta{border-color:var(--danger)}
.cg-arch{display:inline-flex; align-items:center; gap:8px}
.cg-arch svg{width:16px; height:16px; stroke:currentColor}
.cg-acts{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}
.cg-lis{display:grid; gap:4px; margin:var(--sp-2) 0; padding-left:18px}
.cg-sub{margin-top:var(--sp-2)}
.cg-pens{display:inline-flex; align-items:center; gap:4px}
.cg-pens i{width:6px; height:6px; border-radius:var(--r-full); background:var(--ink-3); animation:cg-pens 1s infinite}
.cg-pens i:nth-child(2){animation-delay:.15s}
.cg-pens i:nth-child(3){animation-delay:.3s}
@keyframes cg-pens{50%{opacity:.25}}
.cg-hojas-sel{border:0; margin-top:var(--sp-2)}
.cg-hojas-sel legend{padding:0}
.cg-mapa{display:grid; margin:var(--sp-2) 0}
.cg-mrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; align-items:center; gap:var(--sp-2); padding:7px 0; border-bottom:1px solid var(--line-2)}
.cg-mrow > div:first-child{min-width:0}
.cg-mrow b{display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.cg-mrow .meta{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cg-mrow .field select{height:34px}
.cg-mini{margin-top:var(--sp-2); font-size:var(--t-1)}
.cg-mini thead th,.cg-mini tbody td{padding:6px; white-space:normal}
.cg-demos{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--line-2)}
.cg-demos .chip svg{width:14px; height:14px; stroke:currentColor}
.cg-entrada{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3); border-top:1px solid var(--line-2)}
.cg-entrada .input{flex:1; min-width:0}
.cg-clip svg,.cg-ai-cab .icon-btn svg,.cg-mic svg{width:18px; height:18px}
/* «Mantén para hablar»: rojo y con pulso mientras graba; gris si al soltar se cancela. */
.cg-mic{touch-action:none; user-select:none; -webkit-user-select:none}
.cg .cg-mic.cg-mic--rec{color:#fff; background:var(--danger, #c62828); border-radius:50%; animation:cg-mic-pulso 1.2s ease-in-out infinite}
.cg .cg-mic.cg-mic--fuera{color:var(--ink-3, #777); background:var(--line-2, #e5e5e5); border-radius:50%}
.cg .cg-mic.cg-mic--oyendo{opacity:.6; cursor:progress}
@keyframes cg-mic-pulso{0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.45)} 50%{box-shadow:0 0 0 7px rgba(198,40,40,0)}}
@media (prefers-reduced-motion:reduce){.cg .cg-mic.cg-mic--rec{animation:none}}

/* ---- revisar y guardar: una página ---- */
.cg-guardar{position:sticky; bottom:var(--sp-3); z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); padding:var(--sp-3) var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-2)}
.cg-antes{color:var(--ink-3); text-decoration:line-through}
.cg-ahora{color:var(--ink); font-weight:600}
.cg-chk{width:18px; height:18px; accent-color:var(--brand)}
.cg-progreso{display:block; height:6px; margin-top:var(--sp-2); border-radius:var(--r-full); background:var(--line-2); overflow:hidden}
.cg-prog{display:block; width:0; height:100%; background:var(--brand); transition:width 1s}
.cg-prog.on{width:100%}
.cg-hist li{align-items:flex-start}
.cg-hist .item-sub{display:block}
.cg-der{display:grid; justify-items:end; gap:var(--sp-2)}
.cg-hist .cg-bloq{display:flex; align-items:flex-start; gap:6px; margin-top:var(--sp-1); color:var(--warn)}
.cg-bloq svg{width:14px; height:14px; margin-top:2px; stroke:currentColor}
.cg-guia{display:grid; gap:var(--sp-3); margin:0 0 var(--sp-4); padding-left:20px; color:var(--ink-2)}
.cg-guia kbd{padding:0 5px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:var(--t-1)}

@media (max-width:1000px){
  .cg-work{grid-template-columns:minmax(0,1fr); height:var(--cg-alto, clamp(480px, calc(100vh - 320px), 900px))}
  .cg-ai{position:fixed; top:var(--top-h); right:0; bottom:0; z-index:60; width:min(420px,100%); border-radius:0; box-shadow:var(--sh-2)}
}
@media (max-width:760px){
  .cg-proto{flex-direction:column; align-items:stretch}
  .cg-proto .grow{flex:none}
  .cg-t{display:none}
  .cg-rb--ai{order:-1}
  .cg-nombre{width:64px}
  .cg-formula{flex-wrap:wrap}
  .cg-fin{flex-basis:calc(100% - 100px)}
  .cg-fmsg{flex-basis:100%; max-width:none}
  .cg-estado{justify-content:flex-start}
  .cg-guardar .btn{flex:1}
  .cg-work{height:var(--cg-alto, clamp(440px, calc(100vh - 260px), 900px))}
}
@media (prefers-reduced-motion:reduce){
  .cg-hoja tr.cg-flash td,.cg-pens i{animation:none}
  .cg-prog{transition:none}
}

/* ============================================================
   Lo propio de F1, fuera de la maqueta (no se regenera)
   ============================================================ */
/* La sede es un texto fijo donde la maqueta tenía el selector: no hay multisede. */
.cg-sede{font-size:var(--t-2); color:var(--ink-3)}
.cg-sede b{color:var(--ink); font-weight:600}
/* Filas virtualizadas: los espaciadores dan el alto de lo que no se dibuja. */
.cg-hoja tr.cg-esp td{padding:0; border:0; background:transparent}
/* Pantalla completa: la grilla y el asistente tapan todo; Esc sale. */
.cg-work.cg-full{position:fixed; inset:0; z-index:1040; height:auto; padding:var(--sp-3); background:var(--bg)}
body.cg-sin-scroll{overflow:hidden}
.cg .pop.cg-ctx{z-index:1060}
/* El ancho del asistente se arrastra. Solo en pantallas anchas: en las angostas el asistente es
   un panel fijo encima (la regla de la maqueta en max-width:1000px), y esto la pisaría. */
@media (min-width:1001px){
  .cg-work[data-ai="abierto"]{grid-template-columns:minmax(0,1fr) var(--cg-ai-w, 390px)}
  .cg-ai{position:relative}
}
/* Dentro del borde izquierdo del asistente: .cg-ai recorta lo que sobresale (overflow:hidden). */
.cg-split{position:absolute; left:0; top:0; bottom:0; z-index:2; width:12px; cursor:col-resize; display:flex; align-items:center; justify-content:center; border-radius:6px; outline:0}
/* La manija se ve siempre (tres puntos); al pasar o con foco se marca toda la franja. */
.cg-split::before{content:""; width:4px; height:28px; border-radius:2px; background:radial-gradient(circle, var(--ink-3) 1.5px, transparent 1.6px) 0 0/4px 9px repeat-y}
.cg-split:hover, .cg-split:focus-visible, .cg-split.on{background:var(--brand-soft)}
.cg-split:hover::before, .cg-split:focus-visible::before, .cg-split.on::before{background-image:radial-gradient(circle, var(--brand) 1.5px, transparent 1.6px)}
.cg-leyenda-pie{margin-top:var(--sp-3)}
.cg-modo-mont{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
@media (max-width:760px){
  .cg .head.row-between > .row{width:100%}
  .cg-sede{flex-basis:100%}
}
/* F2: el tema del ERP agranda los legend; en el mensaje de las hojas va como el texto del chat. */
.cg-hojas-sel legend{width:auto; margin:0; font-size:inherit; line-height:inherit}
/* El tema del ERP no deja el título de la revisión debajo de «Volver a la grilla», como en la maqueta. */
#cgVistaRev .head{display:block}
#cgVistaRev .head h1{display:block}

/* Vista inicial (mockup): solo el asistente hasta que se decide qué hacer. */
.cg-work[data-hoja="oculta"][data-ai]{grid-template-columns:minmax(0,720px); justify-content:center}
.cg-work[data-hoja="oculta"] .cg-xl, .cg-work[data-hoja="oculta"] .cg-split, .cg-work[data-hoja="oculta"] [data-cg="cerrarAsistente"]{display:none}
.cg-work[data-hoja="oculta"] .cg-ai{display:flex; position:static; width:auto; border-radius:var(--r-2); box-shadow:none}
.cg-modos{display:grid; gap:var(--sp-2); margin-top:var(--sp-3)}
.cg-modos button{display:grid; gap:2px; padding:var(--sp-3); text-align:left; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); cursor:pointer}
.cg-modos button:hover:not(:disabled){border-color:var(--brand); background:var(--brand-soft)}
.cg-modos button:disabled{opacity:.5; cursor:not-allowed}
.cg-modos b{color:var(--ink)}
.cg-que{display:inline-flex; align-items:center; gap:4px; margin-right:var(--sp-1)}
.cg-que:empty{display:none}
/* Filtro por columna, como en Excel (ronda 3): el embudo del encabezado o el menú de la columna. */
.cg-fbtn{position:absolute; right:8px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--ink-3); opacity:0; cursor:pointer}
.cg-fbtn svg{width:13px; height:13px; stroke:currentColor; fill:none}
.cg-hoja thead th:hover .cg-fbtn, .cg-fbtn:focus-visible{opacity:1}
.cg-fbtn:hover{background:var(--brand-soft); color:var(--brand)}
.cg-fbtn.on{opacity:1; background:var(--brand); color:#fff}
.cg-ctx-filtro{display:grid; gap:6px; padding:6px 10px 8px}
.cg-ctx-filtro label{display:flex; align-items:center; gap:6px; margin:0; font-size:var(--t-1); font-weight:600; color:var(--ink-2)}
.cg-ctx-filtro label svg{width:13px; height:13px; stroke:currentColor; fill:none}
.cg-ctx-filtro input{height:32px; padding:0 8px; border:1px solid var(--line); border-radius:var(--r-1); font:inherit; font-size:var(--t-2)}
.cg-ctx-filtro input:focus{outline:2px solid var(--brand-line); border-color:var(--brand)}
.cg-rb--filtro{border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand)}
.cg-rb--filtro svg:last-child{width:12px; height:12px}
/* La barra se acomoda al ancho: los grupos también bajan de línea en vez de salirse. */
.cg-grupo{flex-wrap:wrap; min-width:0}

/* «Cómo funciona»: recorrido guiado (cargue-tour.js). La luz oscurece todo menos lo que se explica. */
/* El recorrido guiado usa SoftopRecorrido: estilos en web/css/softop-recorrido.css. */

/* SCRUM-2641 — «Lo que puedo hacer»: lista a la izquierda, la capacidad elegida a la derecha. */
.cg-cap-fondo{position:fixed; inset:0; z-index:1980; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); background:rgba(15,23,42,.55)}
.cg-cap{display:flex; flex-direction:column; width:min(900px, 100%); height:min(600px, calc(100vh - 32px)); background:var(--surface); border-radius:var(--r-3); box-shadow:var(--sh-2); overflow:hidden}
.cg-cap-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-4); border-bottom:1px solid var(--line)}
.cg-cap-cab h2{margin:0 0 4px; font-size:20px; font-weight:650; color:var(--ink); letter-spacing:-.02em}
.cg-cap-cab .meta{margin:0}
.cg-cap-cuerpo{flex:1; min-height:0; display:grid; grid-template-columns:260px minmax(0,1fr)}
.cg-cap-lista{overflow:auto; padding:var(--sp-3); background:var(--surface-2); border-right:1px solid var(--line)}
.cg-cap-lista [role="tab"]{display:flex; align-items:center; gap:var(--sp-3); width:100%; padding:10px 12px; border:0; border-radius:var(--r-1); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--t-2); text-align:left; cursor:pointer}
.cg-cap-lista [role="tab"] svg{width:18px; height:18px; flex:none; color:var(--ink-3)}
.cg-cap-lista [role="tab"]:hover{background:var(--line-2)}
.cg-cap-lista [role="tab"][aria-selected="true"]{background:var(--brand-soft); color:var(--brand); font-weight:600; box-shadow:inset 3px 0 0 var(--brand)}
.cg-cap-lista [role="tab"][aria-selected="true"] svg{color:var(--brand)}
.cg-cap-panel{overflow:auto; padding:var(--sp-5) var(--sp-6)}
.cg-cap-ico{display:grid; place-items:center; width:48px; height:48px; margin-bottom:var(--sp-3); border-radius:14px; background:var(--brand-soft); color:var(--brand)}
.cg-cap-ico svg{width:24px; height:24px}
.cg-cap-panel h3{margin:0 0 var(--sp-2); font-size:18px; font-weight:650; color:var(--ink)}
.cg-cap-panel > p{margin:0 0 var(--sp-4); max-width:56ch; font-size:15px; line-height:1.6; color:var(--ink-2)}
.cg-cap-sub{margin:var(--sp-4) 0 var(--sp-2); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.cg-cap-ejs{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cg .cg-cap-ej{padding:8px 12px; border:1px solid var(--brand-line); border-radius:999px; background:var(--surface); color:var(--brand); font:inherit; font-size:var(--t-2); cursor:pointer}
.cg .cg-cap-ej:hover, .cg .cg-cap-ej:focus-visible{background:var(--brand-soft)}
.cg-cap-chat{display:flex; flex-direction:column; gap:var(--sp-2); max-width:440px; padding:var(--sp-3); border-radius:var(--r-2); background:var(--bg)}
.cg-cap-pie{display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--line)}
@media (max-width:700px){
  .cg-cap{height:calc(100vh - 32px)}
  .cg-cap-cuerpo{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  .cg-cap-lista{display:flex; gap:var(--sp-1); overflow-x:auto; border-right:0; border-bottom:1px solid var(--line)}
  .cg-cap-lista [role="tab"]{width:auto; flex:none; white-space:nowrap}
  .cg-cap-panel{padding:var(--sp-4)}
}
/* El formulario corto de «crear N filas» dentro del chat. */
.cg-cf{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-3)}
.cg-cf .field:first-child{grid-column:1 / -1}
/* Las modales de proveedor, tipo y categoría cargan la página de Configuración tal cual: aquí se
   ordena en dos columnas y toma el aspecto del cargue. La modal va en <body>, fuera de .cg: los
   colores van escritos y no como tokens. */
.cg-mform .modal-content{border:0; border-radius:22px; box-shadow:0 18px 48px rgba(15,27,38,.16); overflow:hidden}
.cg-mform .modal-header{align-items:flex-start; padding:20px 24px 14px; border-bottom:1px solid #E3E9EF}
.cg-mform .modal-title{font-size:19px; font-weight:650; color:#0F1B26; letter-spacing:-.02em}
.cg-mform .cg-mform-sub{display:block; margin-top:4px; font-size:13px; font-weight:400; color:#64717E; letter-spacing:0}
.cg-mform .modal-body{padding:8px 24px 20px}
.cg-mform .card-body{padding:12px 0 0}
.cg-mform .row{margin-left:-8px; margin-right:-8px}
.cg-mform .row > [class*="col-"]{padding-left:8px; padding-right:8px}
.cg-mform .row > .col-md-3{flex:0 0 50%; max-width:50%}
.cg-mform .form-group{margin-bottom:14px}
.cg-mform label{margin-bottom:5px; font-size:13px; font-weight:500; color:#47586A}
.cg-mform .form-control, .cg-mform .select2-container .select2-selection--single{height:38px; border:1px solid #E3E9EF; border-radius:10px; font-size:14px; color:#0F1B26; box-shadow:none}
.cg-mform .form-control:focus{border-color:#0079B8; box-shadow:0 0 0 3px #F5FAFE}
.cg-mform .form-control[readonly]{background:#F8FAFC; color:#47586A}
.cg-mform .select2-container .select2-selection--single{padding:0}
.cg-mform .select2-container .select2-selection--single .select2-selection__rendered{line-height:36px; padding:0 28px 0 12px !important}
.cg-mform .select2-container .select2-selection--single .select2-selection__arrow{height:36px}
.cg-mform .input-group .form-control{border-top-right-radius:0; border-bottom-right-radius:0}
.cg-mform .input-group-text{height:38px; border:1px solid #E3E9EF; border-left:0; border-radius:0 10px 10px 0; background:#F5FAFE; color:#0079B8; font-size:14px; font-weight:500}
.cg-mform input[type="checkbox"]{width:16px; height:16px; margin:0 6px 0 0; vertical-align:-3px; accent-color:#0079B8}
.cg-mform .form-check{padding-left:0; display:flex; align-items:flex-start; gap:6px}
.cg-mform .form-check-input{position:static; flex:none; margin-top:2px}
.cg-mform .form-check-label{font-size:13px; line-height:1.4}
/* La nota de los asteriscos, pequeña; Guardar al final a la derecha, con el color del cargue. */
.cg-mform label[for="buyPriceP"]{font-size:12px; font-weight:400; color:#64717E}
.cg-mform .col-md-12:has([type="submit"]){display:flex; justify-content:flex-end; margin-top:4px; padding-top:14px; border-top:1px solid #E3E9EF}
.cg-mform form [type="submit"], .cg-mform form .btn-success, .cg-mform form .btn-primary{height:38px; padding:0 20px; border:0; border-radius:10px; background:#0079B8; color:#fff; font-size:14px; font-weight:600; box-shadow:none}
.cg-mform form [type="submit"]:hover{background:#005E92}
@media (max-width:575px){ .cg-mform .row > .col-md-3{flex:0 0 100%; max-width:100%} }
/* Revisar antes de guardar: con muchos cambios, cada tabla y la lista de errores tienen su propio
   scroll (con el encabezado fijo) y la página no se vuelve interminable. */
#cgVistaRev .table-wrap{max-height:min(420px, 55vh); overflow:auto}
#cgVistaRev .table-wrap thead th{position:sticky; top:0; z-index:1}
#cgVistaRev .av-lista{max-height:min(460px, 55vh); overflow:auto; padding-right:4px}
/* Grilla angosta (asistente abierto en pantallas medianas): los botones con nombre largo quedan en ícono
   (conservan su title) para que la barra no ocupe tres líneas. */
.cg-xl{container-type:inline-size}
@container (max-width:900px){ .cg-barra .cg-t{display:none} }