/* Public/src/modules/direccion-comercial/dc-ui.css
   =============================================================================
   DIRECCIÓN COMERCIAL · la identidad de la casa (core/tokens.css), lámina 1 A
   «El mosaico» (docs/direccion-comercial/02-lamina-1-armazon.html).
   TODO va scopeado bajo `.dc-ui` y con prefijo `dc-`.
   ============================================================================= */

.dc-ui {
    --dc-ok-050: #eef7f3;  --dc-ok-hair: #c7e4d7;
    --dc-warn-050: #fdf3e5; --dc-warn-hair: #f2ddbb;
    --dc-crit-050: #fdecec; --dc-crit-hair: #f3c9c9;
    --dc-g1: #1f5fb8; --dc-colbase: #c9d6ea; --dc-ghost: #8a95a5;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.5;
}
/* `#page-direccion-comercial` declara `data-shell="full"`: el armazón le da el alto
   y le deja el scroll al módulo. Sin estas tres líneas la tarjeta se cortaba abajo y la
   apertura no se alcanzaba con la rueda (Hernán, 16/10, en vivo). */
.dc-ui.dc-shell { padding: 14px var(--gutter, 20px) 40px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dc-ui button { font: inherit; cursor: pointer; }

/* cabecera: pestañas a la izquierda, controles a la derecha */
.dc-ui .dc-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    border-bottom: 1px solid var(--hair-strong); margin-bottom: 16px; }
.dc-ui .dc-tabs { display: flex; gap: 20px; }
.dc-ui .dc-tabs button { border: 0; background: none; padding: 6px 0 9px; color: var(--muted); font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dc-ui .dc-tabs button.on { color: var(--navy); border-color: var(--navy); }
.dc-ui .dc-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; }
.dc-ui .dc-sel { background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 9px; padding: 5px 8px;
    font: inherit; font-weight: 600; color: var(--ink); }
.dc-ui .dc-seg { display: flex; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 9px; padding: 2px; }
.dc-ui .dc-seg button { border: 0; background: none; border-radius: 7px; padding: 4px 10px; color: var(--muted); font-weight: 600; }
.dc-ui .dc-seg button.on { background: var(--navy); color: #fff; }
.dc-ui .dc-act { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 5px 12px 5px 9px; font-weight: 600; color: var(--navy); }
.dc-ui .dc-act:hover { background: var(--navy-050); }
.dc-ui .dc-act svg { width: 16px; height: 16px; }
.dc-ui .dc-act.corre { cursor: progress; }
.dc-ui .dc-act.corre svg { animation: dc-gira 1s linear infinite; }
@keyframes dc-gira { to { transform: rotate(360deg); } }
.dc-ui .dc-corte { font-size: 11.5px; color: var(--faint); text-align: right; line-height: 1.3; min-width: 150px; }
.dc-ui .dc-corte b { color: var(--ink); font-weight: 600; }
.dc-ui .dc-mal { color: var(--crit); font-weight: 600; }

/* baldosas */
.dc-ui .dc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .dc-ui .dc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dc-ui .dc-tiles { grid-template-columns: 1fr; } }
.dc-ui .dc-tile { background: var(--surface); border-radius: 14px; box-shadow: var(--e1); border: 1px solid var(--hair);
    padding: 14px 16px 12px; position: relative; min-height: 168px; }
.dc-ui .dc-tile.vacia { background: repeating-linear-gradient(135deg, var(--surface) 0 10px, #f7f8fb 10px 20px); }
.dc-ui .dc-tile.dc-esqueleto { background: var(--surface); opacity: .6; }
.dc-ui .dc-tt { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dc-ui .dc-eyebrow { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.dc-ui .dc-v { font-size: 16px; font-weight: 600; color: var(--faint); margin-top: 12px; }
.dc-ui .dc-f { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.dc-ui .dc-obj { font-size: 12.5px; color: var(--ink); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--hair-strong); }
.dc-ui .dc-obj b { color: var(--navy); }
.dc-ui .dc-sinobj { color: var(--faint); }
.dc-ui .dc-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 1px 9px; font-size: 11.5px;
    font-weight: 600; border: 1px solid; white-space: nowrap; }
.dc-ui .dc-chip.ok   { color: var(--ok);   background: var(--dc-ok-050);   border-color: var(--dc-ok-hair); }
.dc-ui .dc-chip.warn { color: var(--warn); background: var(--dc-warn-050); border-color: var(--dc-warn-hair); }
.dc-ui .dc-chip.crit { color: var(--crit); background: var(--dc-crit-050); border-color: var(--dc-crit-hair); }
.dc-ui .dc-chip.neu  { color: var(--faint); background: var(--canvas); border-color: var(--hair); }
.dc-ui .dc-pie { margin-top: 14px; font-size: 12px; color: var(--faint); max-width: 820px; }
.dc-ui .dc-aviso { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 16px; color: var(--muted); }

/* la entrada: CADA VEZ que se entra */
.dc-ui .dc-entra { animation: dc-sube .5s var(--curva) both; }
@keyframes dc-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* objetivos */
.dc-ui .dc-obj-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dc-ui .dc-obj-h p { margin: 0; color: var(--muted); max-width: 720px; font-size: 12.5px; }
.dc-ui .dc-obj-h p b { color: var(--ink); }
.dc-ui .dc-obj-b { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-ui .dc-btn { background: var(--navy); color: #fff; border: 0; border-radius: 9px; padding: 7px 14px; font-weight: 600; }
.dc-ui .dc-btn-sec { background: var(--surface); color: var(--navy); border: 1px solid var(--hair-strong); border-radius: 9px; padding: 6px 12px; font-weight: 600; }
.dc-ui .dc-btn:disabled, .dc-ui .dc-btn-sec:disabled { opacity: .45; cursor: default; }
.dc-ui .dc-grid-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; }
.dc-ui table.dc-og { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 720px; width: 100%; max-width: 1100px; }
.dc-ui .dc-og th small { display: block; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--faint); }
.dc-ui .dc-og th, .dc-ui .dc-og td { padding: 6px 4px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.dc-ui .dc-og th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; background: #fafbfc; }
.dc-ui .dc-og td:first-child, .dc-ui .dc-og th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.dc-ui .dc-og th:first-child { background: #fafbfc; }
.dc-ui .dc-og td.q, .dc-ui .dc-og th.q { background: var(--navy-050); font-weight: 600; color: var(--navy); }
.dc-ui .dc-og td.q, .dc-ui .dc-og th.q { min-width: 58px; padding-left: 8px; padding-right: 8px; }
.dc-ui .dc-og td.calc { color: var(--muted); font-style: italic; }
.dc-ui .dc-og input { width: 110px; border: 1px solid transparent; border-radius: 6px; padding: 3px 5px; text-align: right; font: inherit;
    background: transparent; font-variant-numeric: tabular-nums; color: var(--ink); }
.dc-ui .dc-og input:hover { border-color: var(--hair-strong); }
.dc-ui .dc-og input:focus { outline: none; border-color: var(--navy-500); background: var(--navy-050); }
.dc-ui .dc-og input.sucia { background: var(--dc-warn-050); border-color: var(--dc-warn-hair); }
.dc-ui .dc-og input.mal { border-color: var(--crit); background: var(--dc-crit-050); }
.dc-ui .dc-og .kn { font-weight: 600; }
.dc-ui .dc-og .ku { font-size: 11px; color: var(--faint); font-weight: 400; display: block; }
.dc-ui .dc-hist { margin-top: 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 8px 14px; }
.dc-ui .dc-hist summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.dc-ui .dc-hist-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.dc-ui .dc-hist-t td { padding: 4px 8px 4px 0; border-top: 1px solid var(--hair); color: var(--muted); }
.dc-ui .dc-hist-t td.n { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-ui .dc-hist-t .u { color: var(--faint); font-size: 11px; }

/* ─── Facturación (ronda 3, vuelta 2: A «El puente» + la mezcla de B) ─── */
.dc-ui .dc-tile-k { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
    transition: box-shadow .2s, transform .2s var(--curva); }
.dc-ui .dc-tile-k:hover { box-shadow: var(--e2); transform: translateY(-1px); }
.dc-ui .dc-tile-k:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.dc-ui .dc-hero-s { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); margin-top: 8px;
    line-height: 1.1; font-variant-numeric: tabular-nums; }
.dc-ui .dc-hero-s small, .dc-ui .dcf-hero small { font-weight: 600; color: var(--navy-500); margin-left: 3px; }
.dc-ui .dc-hero-s small { font-size: 15px; }
.dc-ui .dc-f b { color: var(--navy); font-weight: 600; }
.dc-ui .dc-mini { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }
.dc-ui .dc-chip svg { width: 13px; height: 13px; }
.dc-ui .dc-pop { transform: scale(.6); opacity: 0; }
.dc-ui .dc-pop.in { transform: scale(1); opacity: 1; transition: transform .45s var(--curva), opacity .3s; }
.dc-ui .dc-volver { background: none; border: 0; color: var(--navy); font-weight: 600; padding: 2px 0 10px; }
.dc-ui .dc-volver:hover { text-decoration: underline; }
.dc-ui .dc-tip { position: fixed; pointer-events: none; background: var(--navy-700); color: #fff; border-radius: 8px; padding: 7px 10px;
    font-size: 12px; box-shadow: var(--e3); opacity: 0; transition: opacity .12s; z-index: 50; min-width: 170px; left: 0; top: 0; }
.dc-ui .dc-tip .r { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.dc-ui .dc-tip .t { font-weight: 600; margin-bottom: 3px; }

.dc-ui .dcf-escena { position: relative; }
.dc-ui .dcf-kpi { background: var(--surface); border-radius: 14px; box-shadow: var(--e2); padding: 20px 22px 14px; max-width: 1040px; }
.dc-ui .dcf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-ui .dcf-mes { color: var(--navy-500); }
.dc-ui .dcf-story { font-size: 15.5px; line-height: 1.45; margin: 8px 0 4px; max-width: 760px; min-height: 45px; }
.dc-ui .dcf-story b { color: var(--navy); font-weight: 600; }
.dc-ui .dcf-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 6px; }
@media (max-width: 760px) { .dc-ui .dcf-body { grid-template-columns: 1fr; } .dc-ui .dcf-kpi { padding: 16px 14px 12px; } }
.dc-ui .dcf-hero { font-size: 50px; font-weight: 600; letter-spacing: -.025em; color: var(--navy); line-height: 1.05; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .dc-ui .dcf-hero { font-size: 40px; } }
.dc-ui .dcf-hero small { font-size: 22px; }
.dc-ui .dcf-cap { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dc-ui .dcf-bullet { margin-top: 10px; }
.dc-ui .dcf-track { position: relative; height: 10px; border-radius: 99px; background: var(--navy-050); }
.dc-ui .dcf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; width: 0; transition: width .8s var(--curva); }
.dc-ui .dcf-proy { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 99px 99px 0; width: 0; transition: width .8s var(--curva);
    background: repeating-linear-gradient(45deg, #c7d6ee 0 4px, #e4ecf8 4px 8px); }
.dc-ui .dcf-goal { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); border-radius: 2px; left: 80%; }
.dc-ui .dcf-hoy { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--navy-500); }
.dc-ui .dcf-bcap { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; gap: 8px; }
.dc-ui .dcf-bcap b { color: var(--ink); font-weight: 600; }
.dc-ui .dcf-sinobj { font-size: 12.5px; color: var(--faint); border-top: 1px dashed var(--hair-strong); padding-top: 8px; }
.dc-ui .dcf-sinobj b { color: var(--navy); }
.dc-ui .dcf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dc-ui .dcf-chips .dc-chip.neu { color: var(--navy-500); background: var(--navy-050); border-color: #d6e1f2; }
.dc-ui .dcf-puente { margin-top: 12px; font-size: 12px; display: grid; gap: 4px; }
.dc-ui .dcf-pt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 2px; }
.dc-ui .dcf-pr { display: grid; grid-template-columns: 118px 1fr 70px; align-items: center; gap: 8px; }
.dc-ui .dcf-pr .n { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dcf-pr .trk { position: relative; height: 11px; }
.dc-ui .dcf-pr .trk div { position: absolute; top: 0; bottom: 0; border-radius: 3px; width: 0; transition: width .6s var(--curva), left .6s var(--curva); }
.dc-ui .dcf-pr .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.dc-ui .dcf-pr.fin .n, .dc-ui .dcf-pr.fin .v { color: var(--navy); font-weight: 700; }
.dc-ui .dcf-pr.ini .v { color: var(--ink); font-weight: 600; }
.dc-ui .dcf-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.dc-ui .dcf-axis text { font-size: 10.5px; fill: var(--faint); }
.dc-ui .dcf-col { cursor: pointer; }
.dc-ui .dcf-col.vacio { cursor: default; }
.dc-ui .dcf-col rect.hit { fill: transparent; }
.dc-ui .dcf-col:hover rect.hit { fill: var(--navy-050); }
.dc-ui .dcf-col .ml { fill: var(--faint); }
.dc-ui .dcf-col .ml.on { fill: var(--navy); font-weight: 700; }
.dc-ui .dcf-mezcla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 3px 18px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dc-ui .dcf-mezcla span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dc-ui .dcf-mezcla i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dc-ui .dcf-mezcla b { color: var(--ink); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dcf-mezcla em { font-style: normal; color: var(--faint); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.dc-ui .dcf-mezcla .dcf-av, .dc-ui .dcf-mezcla .dcf-av b { color: var(--warn); }
.dc-ui .dcf-fade { opacity: 0; transform: translateY(6px); }
.dc-ui .dcf-fade.in { opacity: 1; transform: none; transition: opacity .45s var(--curva), transform .45s var(--curva); }
.dc-ui .dcf-strip-box { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 12px; }
.dc-ui .dcf-strip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.dc-ui .dcf-strip-h b { color: var(--ink); font-weight: 600; }
.dc-ui .dcf-strip { display: flex; height: 20px; border-radius: 6px; overflow: hidden; margin-top: 8px; gap: 2px; }
.dc-ui .dcf-strip div { height: 100%; transition: flex-basis .7s var(--curva); flex: 0 0 0; min-width: 0; }
.dc-ui .dcf-strip-leg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 14px; margin-top: 8px; font-size: 12px; }
.dc-ui .dcf-strip-leg > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.dc-ui .dcf-strip-leg .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dc-ui .dcf-strip-leg i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dc-ui .dcf-strip-leg em { font-style: normal; color: var(--faint); margin-left: auto; padding-left: 8px; flex: none; font-variant-numeric: tabular-nums; }
.dc-ui .dcf-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--hair);
    margin-top: 12px; padding-top: 10px; font-size: 12.5px; color: var(--muted); }
.dc-ui .dcf-foot b { color: var(--ink); font-weight: 600; }
.dc-ui .dcf-link { background: none; border: 0; color: var(--navy); font-weight: 600; padding: 4px 0; }
.dc-ui .dcf-link:hover { text-decoration: underline; }
.dc-ui .dcf-link:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.dc-ui .dcf-panel { position: absolute; inset: 10px 10px auto 10px; min-height: calc(100% - 20px); max-width: 1020px; background: var(--surface);
    border-radius: 16px; box-shadow: var(--e3); padding: 20px 22px; z-index: 5; transform-origin: 50% 30%; opacity: 0;
    transform: scale(.97) translateY(10px); pointer-events: none; visibility: hidden;
    transition: opacity .28s, transform .38s var(--curva), visibility 0s linear .38s; }
.dc-ui .dcf-panel.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .28s, transform .38s var(--curva); }
@media (max-width: 760px) { .dc-ui .dcf-panel { inset: 0 0 auto 0; padding: 16px 14px; } }
.dc-ui .dcf-panel h4 { margin: 2px 0; font-size: 17px; color: var(--navy); }
.dc-ui .dcf-tabs { display: flex; gap: 4px; background: var(--canvas); padding: 3px; border-radius: 10px; width: max-content; max-width: 100%; overflow-x: auto; margin: 12px 0 10px; }
.dc-ui .dcf-tabs button { border: 0; background: none; border-radius: 8px; padding: 5px 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dc-ui .dcf-tabs button.on { background: var(--surface); color: var(--navy); box-shadow: var(--e1); }
.dc-ui .dcf-agr { margin: 0 0 8px; display: flex; }
.dc-ui .dcf-agr[hidden] { display: none; }
/* ── La apertura B «la tabla viva» (lámina 05, 16/10): dc-apertura-ui.js, para todos los KPI ── */
.dc-ui [data-r="bars"] { overflow-x: auto; }
.dc-ui .dca-bar { height: 100%; width: 0; border-radius: 0 4px 4px 0; transition: width .8s var(--curva); }
.dc-ui .dca-mez { display: flex; gap: 2px; height: 36px; border-radius: 9px; overflow: hidden; margin: 4px 0 6px; }
.dc-ui .dca-mez > div { flex-basis: 0; transition: flex-basis .9s var(--curva); display: flex; align-items: center; padding: 0 10px; color: #fff;
    font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: pointer; min-width: 6px; }
.dc-ui .dca-mez > div:hover { filter: brightness(1.08); }
.dc-ui .dca-mezcap { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--faint); margin-bottom: 10px; }
.dc-ui .dca-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.dc-ui .dca-tbl th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--hair); }
.dc-ui .dca-tbl th:first-child, .dc-ui .dca-tbl th.bt { text-align: left; }
.dc-ui .dca-tbl td { padding: 5px 8px; text-align: right; }
.dc-ui .dca-tbl td:first-child { text-align: left; }
.dc-ui .dca-tbl .n { display: block; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dca-tbl td.bt { width: 34%; text-align: left; }
.dc-ui .dca-tbl td.bt .t { height: 8px; }
.dc-ui .dca-tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dca-tbl .mu { color: var(--muted); } .dc-ui .dca-tbl .fa, .dc-ui .dca-ui .fa { color: var(--faint); }
.dc-ui .dca-tbl tr.g td { background: color-mix(in srgb, var(--c) 11%, #fff); font-weight: 700; font-size: 13.5px; padding-top: 9px; padding-bottom: 9px; border-top: 8px solid var(--surface); }
.dc-ui .dca-tbl tr.g td:first-child { border-radius: 9px 0 0 9px; box-shadow: inset 4px 0 0 var(--c); }
.dc-ui .dca-tbl tr.g td:last-child { border-radius: 0 9px 9px 0; }
.dc-ui .dca-tbl tr.g td.bt .t { height: 12px; }
.dc-ui .dca-tbl tr.s td { font-weight: 600; color: color-mix(in srgb, var(--c) 75%, #000); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding-top: 8px; }
.dc-ui .dca-tbl tr.s td:first-child, .dc-ui .dca-tbl tr.h td:first-child { padding-left: 22px; position: relative; }
.dc-ui .dca-tbl tr.h.p2 td:first-child { padding-left: 38px; }
.dc-ui .dca-tbl tr.s td:first-child::before, .dc-ui .dca-tbl tr.h td:first-child::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
    border-left: 2px solid color-mix(in srgb, var(--c) 35%, #fff); }
.dc-ui .dca-tbl tr.aviso td, .dc-ui .dca-tbl tr.aviso .mu { color: var(--warn); }
.dc-ui .dca-tbl tbody tr:not(.g):hover td { background: #f6f8fc; }
.dc-ui .dca-tbl .dca-mas { text-align: left; padding-top: 10px; }
.dc-ui .dca-cli { margin-top: 14px; }
.dc-ui .dca-par { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 760px) { .dc-ui .dca-par { grid-template-columns: 1fr; } }
.dc-ui .dca-par svg { width: 100%; height: auto; display: block; }
.dc-ui .dca-dash { transition: stroke-dashoffset 1.2s var(--curva); }
.dc-ui .dca-big { font-size: 26px; font-weight: 650; color: var(--navy); line-height: 1.1; margin-top: 2px; }
.dc-ui .dca-mu { color: var(--muted); margin: 6px 0 12px; }
.dc-ui .dca-cola { display: flex; gap: 1px; height: 14px; margin-top: 6px; border-radius: 4px; overflow: hidden; }
.dc-ui .dca-cola > div { background: #b9c6da; }
.dc-ui .dca-cola > div:hover { background: #8fa3c2; }
.dc-ui .dca-link { margin-top: 8px; border: 0; background: none; color: var(--navy-500); font-weight: 600; padding: 0; }
.dc-ui .dca-hm { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.dc-ui .dca-hm th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 4px 6px; text-align: center; }
.dc-ui .dca-hm th:first-child { text-align: left; } .dc-ui .dca-hm th.tot { text-align: right; }
.dc-ui .dca-hm td { padding: 8px; text-align: center; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dca-hm td:first-child { text-align: left; font-weight: 600; }
.dc-ui .dca-hm td.vacia { background: #f6f7f9; color: #b0b8c4; }
.dc-ui .dca-hm td.tot { text-align: right; font-weight: 650; }
.dc-ui .dca-hm td.cl { color: var(--muted); font-size: 12px; }
.dc-ui .dca-hm tr.r { cursor: pointer; }
.dc-ui .dca-hm tr.r:hover td:first-child, .dc-ui .dca-hm tr.r:focus-visible td:first-child { color: var(--navy-500); }
.dc-ui .dca-hm tr.r:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; }
.dc-ui .dca-hm tr.on td:first-child { color: var(--navy); }
.dc-ui .dca-hm tr.drw td { padding: 2px 0 10px; text-align: left; }
.dc-ui .dca-drw { background: #f7f9fc; border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media (max-width: 760px) { .dc-ui .dca-drw { grid-template-columns: 1fr; } .dc-ui .dca-hm { min-width: 560px; } .dc-ui .dca-tbl { min-width: 520px; } }
.dc-ui .dca-drw h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dc-ui .dca-drw .ln { display: grid; grid-template-columns: minmax(0, 1fr) 60px 62px 74px; gap: 8px; font-size: 12px; align-items: center; margin: 3px 0; font-weight: 400; }
.dc-ui .dca-drw .ln.sin-cant { grid-template-columns: minmax(0, 1fr) 70px 74px; }
.dc-ui .dca-drw .ln .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dca-drw .ln .n i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.dc-ui .dca-drw .ln .t { height: 8px; }
.dc-ui .dca-drw .ln .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dca-drw .fa { color: var(--faint); }
.dc-ui .dcf-pie { margin-top: 14px; font-size: 12px; color: var(--faint); max-width: 820px; }
.dc-ui .dcf-cerrar { position: absolute; top: 12px; right: 12px; border: 0; background: var(--canvas); border-radius: 8px; width: 30px; height: 30px;
    color: var(--muted); font-size: 17px; }

/* ─── Volumen (ronda 4, lámina 07: A «la carrera» + B «las columnas», Polvos en bultos) ─── */
.dc-ui .dcv-kpi { max-width: 1060px; }
.dc-ui .dcv-frase { font-size: 18px; line-height: 1.35; margin: 10px 0 2px; max-width: 900px; min-height: 48px; font-weight: 500; }
.dc-ui .dcv-frase b { color: var(--navy); font-weight: 700; }
.dc-ui .dcv-frase .dcv-big { font-size: 30px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dcv-frase2 { color: var(--muted); font-size: 13px; max-width: 900px; min-height: 20px; margin: 0; }
.dc-ui .dcv-frase2 b { color: var(--ink); }
.dc-ui .dcv-kpi .t-ok { color: var(--ok); } .dc-ui .dcv-kpi .t-warn { color: var(--warn); } .dc-ui .dcv-kpi .t-crit { color: var(--crit); }
.dc-ui .dcv-frase b.t-ok { color: var(--ok); } .dc-ui .dcv-frase b.t-warn { color: var(--warn); } .dc-ui .dcv-frase b.t-crit { color: var(--crit); }
@media (max-width: 640px) { .dc-ui .dcv-frase { font-size: 15.5px; } .dc-ui .dcv-frase .dcv-big { font-size: 24px; } }
.dc-ui .dcv-med { margin-top: 14px; display: grid; gap: 14px; }
.dc-ui .dcv-mrow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px; gap: 12px; align-items: center; }
@media (max-width: 700px) { .dc-ui .dcv-mrow { grid-template-columns: 1fr; gap: 4px; } }
.dc-ui .dcv-mrow .nm { font-size: 12.5px; font-weight: 650; }
.dc-ui .dcv-mrow .nm small { display: block; font-size: 11px; color: var(--faint); font-weight: 500; }
.dc-ui .dcv-mrow .tx { font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 700px) { .dc-ui .dcv-mrow .tx { text-align: left; } }
.dc-ui .dcv-mrow .tx b { color: var(--ink); }
.dc-ui .dcv-mrow .tx b.t-ok { color: var(--ok); } .dc-ui .dcv-mrow .tx b.t-warn { color: var(--warn); } .dc-ui .dcv-mrow .tx b.t-crit { color: var(--crit); }
.dc-ui .dcv-sinobj { font-size: 12px; color: var(--faint); }
.dc-ui .dcv-sinobj b { color: var(--navy); }
.dc-ui .dcv-mbar { position: relative; height: 16px; border-radius: 99px; background: var(--canvas); }
.dc-ui .dcv-mbar .pr { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; border: 1.5px dashed var(--navy-500); border-left: 0; width: 0; transition: width 1s var(--curva), opacity .4s; }
.dc-ui .dcv-mbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; width: 0; transition: width 1s var(--curva); }
.dc-ui .dcv-mbar .hoy { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2.5px solid var(--ink); transition: opacity .3s; }
.dc-ui .dcv-mbar .hoy span { position: absolute; top: -17px; left: -30px; width: 60px; text-align: center; font-size: 10.5px; color: var(--ink); font-weight: 600; }
.dc-ui .dcv-mbar .fin { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--faint); margin-left: -1px; }
.dc-ui .dcv-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; }
@media (max-width: 860px) { .dc-ui .dcv-body { grid-template-columns: 1fr; } }
.dc-ui .dcv-body[hidden] { display: none; }
.dc-ui .dcv-h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.dc-ui .dcv-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dc-ui .dcv-svg .ln { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dc-ui .dcv-svg .ln.on { stroke-width: 3.6; }
.dc-ui .dcv-svg .off { opacity: .3; }
.dc-ui .dcv-svg .grid { stroke: var(--hair); stroke-width: 1; }
.dc-ui .dcv-svg text { font-size: 11px; fill: var(--faint); font-family: inherit; }
.dc-ui .dcv-svg .et { font-size: 12px; font-weight: 700; }
.dc-ui .dcv-svg .rampa { fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-dasharray: 2 4; stroke-linecap: round; }
.dc-ui .dcv-svg .sep { stroke: var(--hair-strong); stroke-dasharray: 3 3; }
.dc-ui .dcv-ley { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.dc-ui .dcv-ley span { display: inline-flex; align-items: center; gap: 5px; }
.dc-ui .dcv-ley i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dc-ui .dcv-ley i.l { height: 3px; width: 14px; border-radius: 2px; }
.dc-ui .dcv-ley i.r { height: 0; width: 16px; border-top: 2px dotted var(--faint); border-radius: 0; }
.dc-ui .dcv-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 220px; align-items: end;
    border-bottom: 1px solid var(--hair-strong); padding-top: 22px; }
.dc-ui .dcv-col { position: relative; height: 100%; cursor: pointer; border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.dc-ui .dcv-col.fijo, .dc-ui .dcv-col.vacio { cursor: default; }
.dc-ui .dcv-col:not(.vacio):not(.fijo):hover { background: rgba(0, 43, 107, .035); }
.dc-ui .dcv-col:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; }
.dc-ui .dcv-col.on { background: rgba(0, 43, 107, .08); }
.dc-ui .dcv-col.t { border-left: 1px dashed var(--hair-strong); }
.dc-ui .dcv-col .gsw { position: relative; width: 52%; max-width: 56px; height: 100%; display: flex; align-items: flex-end; }
.dc-ui .dcv-col .gs { width: 100%; height: 0; display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 5px 5px 0 0; transition: height .9s var(--curva); }
.dc-ui .dcv-col .gs > div { flex-basis: 0; }
.dc-ui .dcv-col .cpr { position: absolute; bottom: 0; left: 0; right: 0; border: 1.5px dashed var(--navy-500); border-bottom: 0; border-radius: 5px 5px 0 0; transition: opacity .4s; }
.dc-ui .dcv-col .fxb { width: 11%; max-width: 10px; height: 0; background: #9aa6b8; border-radius: 3px 3px 0 0; transition: height .9s var(--curva) .15s; }
.dc-ui .dcv-col .otk { position: absolute; left: 8%; right: 8%; border-top: 2px dotted var(--faint); transition: opacity .4s; }
.dc-ui .dcv-col .cval { position: absolute; left: 0; right: 0; text-align: center; font-size: 11.5px; font-weight: 700; transition: opacity .4s; }
.dc-ui .dcv-xl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 5px; font-size: 11.5px; color: var(--faint); text-align: center; }
.dc-ui .dcv-xl .on { color: var(--navy); font-weight: 700; }
.dc-ui .dcv-pol { margin-top: 18px; border: 1px solid color-mix(in srgb, #d0566f 25%, #fff); background: color-mix(in srgb, #d0566f 4%, #fff); border-radius: 12px; padding: 12px 14px; }
.dc-ui .dcv-pol .nm { color: color-mix(in srgb, #d0566f 80%, #000); font-weight: 700; }
.dc-ui .dcv-pol .dcv-mbar .fill { background: #d0566f !important; }
.dc-ui .dcv-pol .dcv-mbar { background: #fff; }
.dc-ui .dcv-polmes { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.dc-ui .dcv-polmes b { color: var(--ink); }
.dc-ui .dcv-fichas { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.dc-ui .dcv-ficha { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; min-width: 150px; }
.dc-ui .dcv-ficha small { display: block; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.dc-ui .dcv-ficha b { font-size: 17px; }
.dc-ui .dcv-ficha .mu { color: var(--muted); font-size: 12px; }
.dc-ui .dcv-ficha.t-ok b { color: var(--ok); } .dc-ui .dcv-ficha.t-crit b { color: var(--crit); }
.dc-ui .dcv-ficha.chico b { font-size: 14px; color: var(--muted); }
.dc-ui .dcv-puente { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 12px; }
.dc-ui .dcv-puente[hidden] { display: none; }
.dc-ui .dcv-puente summary { cursor: pointer; font-size: 12.5px; color: var(--navy-500); font-weight: 600; }
.dc-ui .dcv-wf { display: grid; grid-template-columns: minmax(150px, 290px) minmax(0, 1fr) 90px; gap: 4px 12px; align-items: center; font-size: 12.5px; margin-top: 10px; }
@media (max-width: 640px) { .dc-ui .dcv-wf { grid-template-columns: minmax(0, 1fr) 64px 76px; } }
.dc-ui .dcv-wf .t { position: relative; height: 16px; }
.dc-ui .dcv-wf .t > div { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.dc-ui .dcv-wf .v { text-align: right; font-weight: 600; white-space: nowrap; }
.dc-ui .dcv-wf .tot { font-weight: 700; }
.dc-ui .dcv-wf .q { color: var(--warn); }
.dc-ui .dcv-polh { margin: 20px 0 4px; font-weight: 700; color: color-mix(in srgb, #d0566f 80%, #000); }
.dc-ui .dcv-polh span { font-weight: 500; color: var(--faint); font-size: 12px; }

/* LA BANDA DEL OBJETIVO (Hernán 16/10, lámina 08, ganó A): el objetivo se mide sólo
   contra el fraccionado de 1 kg; todo lo que lo compara va acá adentro. */
.dc-ui .dc-banda { margin-top: 12px; border-radius: 12px; background: color-mix(in srgb, #1f5fb8 6%, #fff);
    border: 1px solid color-mix(in srgb, #1f5fb8 22%, #fff); padding: 10px 12px 12px; }
.dc-ui .dc-banda[hidden] { display: none; }
.dc-ui .dc-banda-t { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; color: #1f5fb8; font-weight: 700; }
.dc-ui .dc-banda-t span + span { color: var(--faint); font-weight: 600; }
.dc-ui .dc-banda .dcf-bullet { margin-top: 8px; }
.dc-ui .dc-banda .dcv-med { margin-top: 10px; }
.dc-ui .dc-banda-tx { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.dc-ui .dc-banda-tx b { color: var(--ink); }
.dc-ui .dc-banda-tx b.t-ok { color: var(--ok); } .dc-ui .dc-banda-tx b.t-warn { color: var(--warn); } .dc-ui .dc-banda-tx b.t-crit { color: var(--crit); }
.dc-ui .dc-banda .dcf-chips:empty { display: none; }

/* ─── PRECIO (ronda 5, lámina 12: A «Las dos llaves») ─────────────────────── */
.dc-ui .dcp-kpi .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dcp-kpi .t-ok, .dc-ui .dcf-panel .t-ok { color: var(--ok); }
.dc-ui .dcp-kpi .t-warn, .dc-ui .dcf-panel .t-warn { color: var(--warn); }
.dc-ui .dcp-kpi .t-crit { color: var(--crit); }
.dc-ui .dcp-kpi .fa { color: var(--faint); }
.dc-ui .dcp-combo { font-size: 12px; color: var(--navy); font-weight: 700; background: var(--navy-050); border-radius: 99px; padding: 2px 10px; }
.dc-ui .dcp-combo:empty { display: none; }
.dc-ui .dcp-llaves { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; align-items: center; }
.dc-ui .dcp-llt { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-right: 6px; }
.dc-ui .dcp-llave { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 10px; overflow: hidden; background: var(--surface); vertical-align: middle; }
.dc-ui .dcp-llave button { font-size: 12.5px; border: 0; background: transparent; padding: 5px 11px; color: var(--muted); }
.dc-ui .dcp-llave button + button { border-left: 1px solid var(--hair); }
.dc-ui .dcp-llave button.on { background: var(--navy); color: #fff; font-weight: 700; }
.dc-ui .dcp-llave button:disabled { color: var(--faint); opacity: .55; cursor: not-allowed; }
.dc-ui .dcp-sintasa { font-size: 12px; color: var(--warn); }
.dc-ui .dcp-frase { margin: 10px 0 2px; font-size: 16px; line-height: 1.38; font-weight: 500; max-width: 820px; }
.dc-ui .dcp-frase b { color: var(--navy); }
.dc-ui .dcp-big { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dc-ui .dcp-frase2 { color: var(--muted); font-size: 12.5px; margin: 2px 0; max-width: 900px; }
.dc-ui .dcp-frase2 b { color: var(--ink); font-weight: 600; }
.dc-ui .dcp-fams { display: grid; grid-template-columns: 1.25fr 1.25fr repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 900px) { .dc-ui .dcp-fams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dc-ui .dcp-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-ui .dcp-fam { border: 1px solid var(--hair); border-radius: 12px; padding: 8px 10px; background: var(--surface); min-width: 0; text-align: left; color: inherit; }
.dc-ui button.dcp-fam:hover { border-color: var(--hair-strong); }
.dc-ui .dcp-fam.on { border-color: var(--navy-500); box-shadow: inset 0 0 0 1px var(--navy-500); background: var(--navy-050); }
.dc-ui .dcp-fam.vacia { opacity: .55; }
.dc-ui .dcp-fam .fn { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.dc-ui .dcp-fam .fn i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dc-ui .dcp-fam .fv { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.dc-ui .dcp-fam .fs { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dcp-sec { margin-top: 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700;
    display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dc-ui .dcp-sec[hidden] { display: none; }
.dc-ui .dcp-sec span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dc-ui .dcp-secc { display: inline-flex; align-items: center; gap: 8px; }
.dc-ui .dcp-secc i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* la cascada */
.dc-ui .dcp-casc { display: grid; gap: 5px; margin-top: 6px; }
.dc-ui .dcp-casc .cr, .dc-ui .dcp-cax { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 74px; gap: 8px; align-items: center; font-size: 12px; }
@media (max-width: 640px) { .dc-ui .dcp-casc .cr, .dc-ui .dcp-cax { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 58px; gap: 6px; font-size: 11.5px; } }
.dc-ui .dcp-casc .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dcp-casc .cl small { display: block; font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dcp-casc .cv { text-align: right; font-weight: 700; }
.dc-ui .dcp-casc .ctr { position: relative; height: 18px; }
.dc-ui .dcp-casc .ctr .g { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--hair); }
.dc-ui .dcp-casc .b { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; transform: scaleX(0); transform-origin: left;
    transition: transform .55s var(--curva); transition-delay: var(--d, 0s); }
.dc-ui .dcp-casc .b.drop { transform-origin: right; }
.dc-ui .go .dcp-casc .b { transform: scaleX(1); }
.dc-ui .dcp-casc .cr.sel { background: var(--navy-050); border-radius: 6px; }
.dc-ui .dcp-casc .cr.sel .cl { font-weight: 700; color: var(--navy); }
.dc-ui .dcp-casc .cr.tot .cv { color: var(--navy); }
.dc-ui .dcp-cax { font-size: 10px; color: var(--faint); margin-top: 8px; }
.dc-ui .dcp-cax .sc { position: relative; height: 12px; }
.dc-ui .dcp-cax .sc span { position: absolute; transform: translateX(-50%); }
/* las tablas de la tarjeta */
.dc-ui .dcp-tbw { overflow-x: auto; }
.dc-ui table.dcp-tb { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.dc-ui .dcp-tb th, .dc-ui .dcp-tb td { padding: 5px; text-align: right; border-bottom: 1px solid var(--hair); }
.dc-ui .dcp-tb th { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); font-weight: 700; vertical-align: bottom; }
.dc-ui .dcp-tb th:first-child, .dc-ui .dcp-tb td:first-child { text-align: left; }
.dc-ui .dcp-tb td:first-child { white-space: nowrap; }
.dc-ui .dcp-tb tr.g td { background: color-mix(in srgb, var(--c) 7%, #fff); font-weight: 700; }
.dc-ui .dcp-tb tr.g td:first-child { border-left: 3px solid var(--c); }
.dc-ui .dcp-tb tr.ref td:first-child::after { content: "referencia"; margin-left: 6px; font-size: 10px; color: var(--dc-g1); font-weight: 700;
    border: 1px solid var(--dc-g1); border-radius: 99px; padding: 0 6px; }
.dc-ui .dcp-tb th.on, .dc-ui .dcp-tb td.on { background: var(--navy-050); color: var(--navy); }
.dc-ui .dcp-tb th.on { box-shadow: inset 0 3px 0 var(--navy); }
.dc-ui .dcp-tb td.on { font-weight: 700; }
.dc-ui .dcp-tb .dd { font-size: 11px; color: var(--muted); }
.dc-ui .dcp-tb .nm small { display: block; font-size: 10.5px; color: var(--faint); font-weight: 400; }
.dc-ui .dcp-tb td.u { color: var(--muted); font-size: 11.5px; }
.dc-ui .dcp-kpi .onlym { display: none; }
@media (max-width: 640px) {
    .dc-ui .dcp-tb .hidem, .dc-ui .dcp-tv .hidem { display: none; }
    .dc-ui .dcp-tb th, .dc-ui .dcp-tb td { padding: 4px 3px; font-size: 11.5px; }
    .dc-ui .dcp-kpi .onlym { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
}
.dc-ui .dcp-nota { font-size: 11.5px; color: var(--faint); margin: 10px 0 0; max-width: 900px; }
/* el dorso: la tabla de clientes */
.dc-ui .dcp-dmini { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.dc-ui .dcp-dmini b { color: var(--navy); }
.dc-ui table.dcp-tv { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.dc-ui .dcp-tv th, .dc-ui .dcp-tv td { padding: 6px; text-align: right; border-bottom: 1px solid var(--hair); }
.dc-ui .dcp-tv th { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); font-weight: 700; cursor: pointer; white-space: nowrap; }
.dc-ui .dcp-tv th:hover { color: var(--navy); }
.dc-ui .dcp-tv th:first-child, .dc-ui .dcp-tv td:first-child { text-align: left; }
.dc-ui .dcp-tv th.on { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
.dc-ui .dcp-tv td.on { background: var(--navy-050); font-weight: 700; color: var(--navy); }
.dc-ui .dcp-tv .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dcp-tv .dd { font-size: 11px; color: var(--muted); }
.dc-ui .dcp-tv .cn { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dcp-tv .pb { position: relative; height: 10px; min-width: 110px; background: var(--canvas); border-radius: 3px; }
.dc-ui .dcp-tv .pb .m { position: absolute; top: -3px; bottom: -3px; left: 50%; border-left: 2px solid var(--navy); }
.dc-ui .dcp-tv .pb .d { position: absolute; top: 0; bottom: 0; border-radius: 3px; transform: scaleX(0);
    transition: transform .55s var(--curva); transition-delay: var(--d, 0s); }
.dc-ui .dcp-tv .pb .d.pos { transform-origin: left; } .dc-ui .dcp-tv .pb .d.neg { transform-origin: right; }
.dc-ui .go .dcp-tv .pb .d, .dc-ui .dcf-panel.go .dcp-tv .pb .d { transform: scaleX(1); }
.dc-ui .dcp-tv tr.cola td { background: #f7f8fa; color: var(--muted); }
.dc-ui .dcp-tv tr.cola td:first-child { font-style: italic; }
.dc-ui .dcp-tv tr.tot td { font-weight: 700; border-top: 2px solid var(--hair-strong); }
.dc-ui .dcp-tv tbody tr:not(.tot):hover td { background: #f6f8fc; }
.dc-ui .dch { font-size: 10.5px; border-radius: 99px; padding: 0 6px; font-weight: 700; }
.dc-ui .dch.m { color: var(--crit); background: var(--dc-crit-050); } .dc-ui .dch.a { color: var(--ok); background: var(--dc-ok-050); }
@media (max-width: 760px) { .dc-ui .dcp-tv th, .dc-ui .dcp-tv td { padding: 5px 3px; font-size: 11.5px; } .dc-ui .dcp-tv .cn { max-width: 150px; } }
/* la tasa (pestaña Objetivos) */
.dc-ui .dc-tasa { margin-top: 18px; background: var(--surface); border: 1px solid var(--hair); border-left: 4px solid #8a4fc2; border-radius: 12px; padding: 12px 16px; max-width: 1100px; }
.dc-ui .dc-tasa h4 { margin: 0 0 2px; font-size: 13px; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; }
.dc-ui .dc-tasa p { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; max-width: 860px; }
.dc-ui .dc-tasa table { border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
.dc-ui .dc-tasa td, .dc-ui .dc-tasa th { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--hair); text-align: left; }
.dc-ui .dc-tasa th { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.dc-ui .dc-tasa td.n { text-align: right; font-weight: 700; color: #8a4fc2; font-variant-numeric: tabular-nums; }
.dc-ui .dc-tasa tr.vieja td { color: var(--faint); text-decoration: line-through; }
.dc-ui .dc-tasa .fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; }
.dc-ui .dc-tasa input { font: inherit; padding: 4px 6px; border: 1px solid var(--hair-strong); border-radius: 8px; }
.dc-ui .dc-tasa input[type="number"] { width: 80px; text-align: right; }
/* El horario de administración (pre-cargas etapa 1): dos renglones, L–V y sábado. */
.dc-ui .dc-horario input[type="time"] { width: 96px; }
.dc-ui .dc-horario .fila .tramo { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dc-ui .dc-horario .fila .tramo > span:first-child { min-width: 112px; font-weight: 600; color: var(--ink); }
.dc-ui .dc-horario .fila .corte { width: 100%; height: 0; }
.dc-ui .dc-horario td.n { color: var(--navy); font-weight: 600; text-align: left; }

@media (prefers-reduced-motion: reduce) {
    .dc-ui *, .dc-ui { animation: none !important; transition: none !important; }
}

/* ── Precio fraccionado (ronda 6, lámina 15 ganó A): la escalera ── */
.dc-ui .dcq-ant { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.dc-ui .dcq-ant b { color: var(--ink); }
.dc-ui .dcq-med { margin-top: 10px; }
.dc-ui .dcq-med[hidden] { display: none; }
.dc-ui .dcq-medt { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); margin-top: 5px; }
.dc-ui .dcq-medt b { color: var(--navy); }
.dc-ui .dcq-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.dc-ui .dcq-chart .cv { pointer-events: none; }
.dc-ui .dcv-ley i.dcq-lo { height: 0; width: 16px; border-top: 2px dashed var(--navy); border-radius: 0; }
.dc-ui .dcq-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .dc-ui .dcq-fichas { grid-template-columns: 1fr; } }
.dc-ui .dcq-fi { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; background: var(--surface); min-width: 0; }
.dc-ui .dcq-fi .t { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.dc-ui .dcq-fi .v { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dc-ui .dcq-fi .v small { font-size: 11px; color: var(--faint); font-weight: 500; }
.dc-ui .dcq-fi .v b.t-ok { color: var(--ok); } .dc-ui .dcq-fi .v b.t-crit { color: var(--crit); }
.dc-ui .dcq-fi .d { font-size: 11.5px; color: var(--muted); }
.dc-ui .dc-obj b.t-ok { color: var(--ok); } .dc-ui .dc-obj b.t-warn { color: var(--warn); } .dc-ui .dc-obj b.t-crit { color: var(--crit); }
.dc-ui .dcq-tbl td.on { background: #eef3fb; }
.dc-ui .dcq-tbl td.t-ok { color: var(--ok); } .dc-ui .dcq-tbl td.t-warn { color: var(--warn); } .dc-ui .dcq-tbl td.t-crit { color: var(--crit); }
.dc-ui .dcq-tbl tr.cola td { color: var(--faint); font-style: italic; }
.dc-ui .dcq-tbl tr.tot td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--hair-strong); }
.dc-ui .dcq-tbl + .dca-link { margin-top: 8px; }

/* ── Precio fraccionado en USD (ronda 7, lámina 16 ganó A) ── */
.dc-ui .dc-dolar { border-left-color: #0d8f86; }
.dc-ui .dc-dolar td.n { color: #0d8f86; }
.dc-ui .dcu-llave { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.dc-ui .dcq-fichas.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .dc-ui .dcq-fichas.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-ui .dcq-fi.tc { border-color: color-mix(in srgb, #0d8f86 40%, #fff); background: color-mix(in srgb, #0d8f86 5%, #fff); }
.dc-ui .dcq-fi.tc .t { color: #0d8f86; }

/* ── Concentración de clientes (ronda 8, lámina 17 ganó A «Los cinco») ── */
.dc-ui .dcc-llave { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.dc-ui .dcc-llave-n { font-size: 11.5px; color: var(--faint); }
.dc-ui .dcc-cinta { display: flex; height: 22px; border-radius: 7px; overflow: hidden; margin: 10px 0 4px; background: #d4dbe7; }
.dc-ui .dcc-cinta.chica { height: 16px; margin: 6px 0 4px; }
.dc-ui .dcc-cinta .s { flex: 0 0 0%; height: 100%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; min-width: 0;
  overflow: hidden; white-space: nowrap; transition: flex-basis .9s var(--curva); }
.dc-ui .dcc-cinta .s.r { color: var(--muted); font-weight: 600; background: #d4dbe7; }
.dc-ui .dcc-cinta[hidden] { display: none; }
.dc-ui .dcc-podio { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; }
.dc-ui .dcc-podio[hidden] { display: none; }
.dc-ui .dcc-podio li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 52px; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--hair); }
.dc-ui .dcc-podio li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dc-ui .dcc-podio li b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-ui .dcc-podio li .p { text-align: right; color: var(--navy); font-weight: 700; grid-column: 4; }
.dc-ui .dcc-podio li.r b { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.dc-ui .dcc-podio li.r .p { color: var(--muted); }
.dc-ui .dcc-nuevo { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); background: var(--ok-050); border-radius: 99px; padding: 0 7px; font-weight: 700; }
.dc-ui .dcv-ley i.dcc-lq { height: 0; width: 16px; border-top: 3px solid var(--navy); border-radius: 0; }
.dc-ui .dcc-grps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .dc-ui .dcc-grps { grid-template-columns: 1fr; } }
.dc-ui .dcc-grp { border: 1px solid var(--hair); border-left: 4px solid var(--c); border-radius: 12px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.dc-ui .dcc-grp-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dc-ui .dcc-grp-h h5 { margin: 0; font-size: 12.5px; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.dc-ui .dcc-grp-h h5 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dc-ui .dcc-grp-h span { font-size: 11.5px; color: var(--faint); }
.dc-ui .dcc-grp-big { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dc-ui .dcc-grp-big b { font-size: 20px; color: var(--navy); font-variant-numeric: tabular-nums; }
.dc-ui .dcc-grp-big span { font-size: 11.5px; color: var(--faint); }
.dc-ui .dcc-tbl td.on { background: #eef3fb; }
.dc-ui .dcc-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: 0; }
.dc-ui .dcc-ven { margin-bottom: 12px; }
.dc-ui .dcc-h5 { margin-top: 6px; }


/* ── Precio por canal (ronda 9, lámina 18 B) ── */
.dc-ui .dcn-mini { display: grid; gap: 5px; margin-top: 10px; }
.dc-ui .dcn-mr { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); }
.dc-ui .dcn-mr em { font-style: normal; font-weight: 700; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.dc-ui .dcn-mb, .dc-ui .dcn-er .bar { position: relative; height: 9px; border-radius: 99px; background: var(--canvas); }
.dc-ui .dcn-mb i, .dc-ui .dcn-er .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; width: 0; }
.dc-ui .dcn-mb b, .dc-ui .dcn-er .bar b { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--crit); margin-left: -1px; }
.dc-ui .dcn-hero { font-size: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; }
@media (max-width: 420px) { .dc-ui .dcn-hero { font-size: 32px; } }
.dc-ui .dcn-kpi .dcf-cap b.t-ok, .dc-ui .dcn-kpi .t-ok { color: var(--ok); }
.dc-ui .dcn-kpi .t-warn { color: var(--warn); } .dc-ui .dcn-kpi .t-crit { color: var(--crit); }
.dc-ui .dcn-kpi .dcf-cap { font-size: 12.5px; }
.dc-ui .dcn-otros { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.dc-ui .dcn-otros b { color: var(--ink); }
.dc-ui .dcn-esc { display: grid; gap: 8px; }
.dc-ui .dcn-body [data-r="escT"] { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
.dc-ui .dcn-esc-r { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* la escalera necesita ancho: debajo de 1100 px, la tarjeta va en una columna */
@media (max-width: 1100px) { .dc-ui .dcn-body { grid-template-columns: 1fr; } }
.dc-ui .dcn-er { display: grid; grid-template-columns: 120px minmax(0, 1fr) 84px; gap: 10px; align-items: center; font-size: 12.5px; }
.dc-ui .dcn-er .n { font-weight: 600; color: var(--ink); } .dc-ui .dcn-er .n small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; }
.dc-ui .dcn-er .bar { height: 18px; border-radius: 6px; }
.dc-ui .dcn-er .bar i { border-radius: 6px; transition: width .7s var(--curva); }
.dc-ui .dcn-er .v { text-align: right; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; font-size: 14px; }
.dc-ui .dcn-er .v small { display: block; font-size: 11px; font-weight: 600; }
.dc-ui .dcn-er .v small.fa { color: var(--faint); font-weight: 500; }
.dc-ui .dcn-er.aviso .n { color: var(--warn); }
.dc-ui .dcn-ee { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); margin-left: 130px; margin-right: 94px; }
.dc-ui .dcn-h5b { margin-top: 16px; }
.dc-ui .dcn-tira { overflow-x: auto; }
.dc-ui .dcn-tt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dc-ui .dcn-tt th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--hair-strong); }
.dc-ui .dcn-tt th:first-child, .dc-ui .dcn-tt td:first-child { text-align: left; }
.dc-ui .dcn-tt th.on { color: var(--navy); } .dc-ui .dcn-tt th.clic { cursor: pointer; } .dc-ui .dcn-tt th.clic:hover { color: var(--navy); text-decoration: underline; }
.dc-ui .dcn-tt td { padding: 5px 8px; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; }
.dc-ui .dcn-tt td.on { background: #eef3fb; font-weight: 700; }
.dc-ui .dcn-tt td.fa { color: var(--faint); }
.dc-ui .dcn-tt tr.aviso td:first-child { color: var(--warn); }
.dc-ui .dcn-tt tr.tot td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--hair-strong); border-bottom: 0; }
@media (max-width: 760px) { .dc-ui .dcn-er { grid-template-columns: 96px minmax(0, 1fr) 76px; } .dc-ui .dcn-ee { margin-left: 106px; margin-right: 86px; } }

/* ── Precio del flete (ronda 11, lámina 22 ganó A «El puente» + las bandas de distancia de la 23) ── */
.dc-ui .dcl-puente-b { background: color-mix(in srgb, #154a94 5%, #fff); border-color: color-mix(in srgb, #154a94 20%, #fff); }
.dc-ui .dcl-puente-b[hidden], .dc-ui .dcl-bandas[hidden] { display: none; }
.dc-ui .dcl-puente { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; margin-top: 8px; min-height: 108px; }
.dc-ui .dcl-pu { text-align: center; font-size: 11px; color: var(--faint); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.dc-ui .dcl-pu .b { width: 70%; border-radius: 6px 6px 0 0; background: var(--navy-500); transition: height .6s var(--curva); }
.dc-ui .dcl-pu .b.ta { background: var(--crit); } .dc-ui .dcl-pu .b.mz { background: #a85900; } .dc-ui .dcl-pu .b.nu { background: #8a4fc2; }
.dc-ui .dcl-pu .v { font-weight: 700; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; margin-bottom: 3px; white-space: nowrap; }
.dc-ui .dcl-pu .v.t-crit { color: var(--crit); } .dc-ui .dcl-pu .v.t-ok { color: var(--ok); }
.dc-ui .dcl-pu span { margin-top: 3px; }
.dc-ui .dcq-fi.km { border-color: color-mix(in srgb, #a85900 40%, #fff); background: color-mix(in srgb, #a85900 5%, #fff); }
.dc-ui .dcq-fi.km .t { color: #a85900; }
.dc-ui .dcq-fi .d b.t-ok { color: var(--ok); } .dc-ui .dcq-fi .d b.t-crit { color: var(--crit); }
.dc-ui .dcq-ant b.t-ok { color: var(--ok); } .dc-ui .dcq-ant b.t-crit { color: var(--crit); }
.dc-ui .dcl-bandas { margin-top: 14px; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.dc-ui .dcl-bandas .dc-banda-t span:first-child { color: var(--navy); }
.dc-ui .dcl-bgrid { display: grid; grid-template-columns: 150px minmax(0, 1fr) 118px 110px 90px; gap: 6px 12px; align-items: center; font-size: 12.5px; margin-top: 8px; }
@media (max-width: 760px) { .dc-ui .dcl-bgrid { grid-template-columns: 104px minmax(0, 1fr) 100px; } .dc-ui .dcl-bgrid .hm { display: none; } }
.dc-ui .dcl-bgrid .h { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; text-align: right; }
.dc-ui .dcl-bgrid .h:first-child, .dc-ui .dcl-bgrid .h.l { text-align: left; }
.dc-ui .dcl-bgrid .n { font-weight: 600; color: var(--ink); } .dc-ui .dcl-bgrid .n small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; }
.dc-ui .dcl-bgrid .bar { position: relative; height: 20px; background: var(--canvas); border-radius: 6px; }
.dc-ui .dcl-bgrid .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--navy-500); transition: width .7s var(--curva); }
.dc-ui .dcl-bgrid .bar em { position: absolute; top: 3px; bottom: 3px; width: 0; border-left: 2px solid #9fb3d1; }
.dc-ui .dcl-bgrid .bar b { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--crit); }
.dc-ui .dcl-bgrid .v { text-align: right; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.dc-ui .dcl-bgrid .v small { display: block; font-size: 11px; font-weight: 600; }
.dc-ui .dcl-bgrid .v small.crit { color: var(--crit); } .dc-ui .dcl-bgrid .v small.ok { color: var(--ok); } .dc-ui .dcl-bgrid .v small.fa { color: var(--faint); font-weight: 500; }
.dc-ui .dcl-bgrid .d { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; } .dc-ui .dcl-bgrid .d b { color: var(--ink); }
.dc-ui .dcl-bandas p { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; } .dc-ui .dcl-bandas p b { color: var(--ink); }
.dc-ui .dcl-tbl th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.dc-ui .dcl-tbl td small.t-ok { color: var(--ok); } .dc-ui .dcl-tbl td small.t-warn { color: var(--warn); } .dc-ui .dcl-tbl td small.t-crit { color: var(--crit); }
/* el índice del transporte (pestaña Objetivos) */
.dc-ui .dc-indice { border-left-color: #a85900; }
.dc-ui .dc-indice td.n { color: #a85900; }
.dc-ui .dc-indice input[type="month"] { width: 150px; }
.dc-ui .dc-indice a { color: var(--navy-500); font-weight: 600; }
.dc-ui .dc-indice th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.dc-ui .dc-indice .dc-mal { color: var(--crit); }

/* ── La portada (ronda 12, láminas 24 y 25, 23/10/2026): una baldosa para todos, cuatro vistas,
   el organizador y la barra del KPI abierto. Hernán: mismo tamaño para todas (armonía), una
   figura por KPI, color por familia, tintes en las que piden atención. ── */
.dc-ui .dc-pcab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dc-ui .dc-ctx { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hair);
    border-radius: 12px; padding: 7px 12px; box-shadow: var(--e1); font-size: 12.5px; color: var(--muted); }
.dc-ui .dc-ctx b { color: var(--ink); }
.dc-ui .dc-q { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.dc-ui .dc-q .trk { position: relative; width: 110px; height: 8px; border-radius: 99px; background: var(--navy-050); overflow: hidden; }
.dc-ui .dc-q .trk i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--navy-500); border-radius: 99px; }
.dc-ui .dc-sp { flex: 1 1 auto; }
.dc-ui .dc-vistas button.mia { color: #8a5a00; }
.dc-ui .dc-vistas button.mia.on { background: #8a5a00; color: #fff; }
.dc-ui .dc-frase { font-size: 15.5px; line-height: 1.45; margin: 0 0 14px; max-width: 1000px; color: var(--ink); }
.dc-ui .dc-frase b { font-weight: 600; }
.dc-ui .dc-frase b.t-crit, .dc-ui .dc-desvio.t-crit { color: var(--crit); }
.dc-ui .dc-frase b.t-warn { color: var(--warn); }
.dc-ui .dc-frase b.t-ok { color: var(--ok); }
.dc-ui .dc-frase small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.dc-ui .dc-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.dc-ui .dc-sec:first-of-type { margin-top: 0; }
.dc-ui .dc-sec .n { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dc-ui .dc-sec.crit { color: var(--crit); }
.dc-ui .dc-sec.ok { color: var(--ok); }
.dc-ui .dc-sec.fam { color: var(--fam, var(--navy)); }
.dc-ui .dc-sec.mia { color: #8a5a00; }

/* la baldosa única */
.dc-ui .dc-tiles { align-items: stretch; }
.dc-ui .dc-tile { display: flex; flex-direction: column; min-height: 250px; padding: 14px 16px 12px 20px; overflow: hidden;
    transition: box-shadow .2s, transform .2s var(--curva); }
.dc-ui .dc-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--hair-strong); }
.dc-ui .dc-tile.ok::before { background: var(--ok); }
.dc-ui .dc-tile.warn::before { background: var(--warn); }
.dc-ui .dc-tile.crit::before { background: var(--crit); }
.dc-ui .dc-tile.neu::before { background: #aeb8c6; }
.dc-ui .dc-tile.crit { background: linear-gradient(160deg, var(--surface) 55%, var(--dc-crit-050)); border-color: var(--dc-crit-hair); }
.dc-ui .dc-tile.warn { background: linear-gradient(160deg, var(--surface) 60%, var(--dc-warn-050)); border-color: var(--dc-warn-hair); }
.dc-ui .dc-tile.obra { border-style: dashed; box-shadow: none; }
.dc-ui .dc-tile.obra::before { display: none; }
.dc-ui .dc-tile.obra .dc-v { font-size: 15px; color: var(--faint); font-weight: 600; margin-top: 10px; }
.dc-ui .dc-tile.obra .dc-f { flex: 1 1 auto; }
.dc-ui .dc-tt { align-items: flex-start; }
.dc-ui .dc-nom { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; min-width: 0; }
.dc-ui .dc-fam { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-right: 7px;
    padding: 0 6px; border-radius: 4px; color: #fff; vertical-align: 1px; background: var(--navy); }
.dc-ui .dc-tile .dc-chip, .dc-ui .dc-lista .dc-chip { border-radius: 99px; padding: 2px 9px; font-weight: 700; flex: none; }
.dc-ui .dc-tile .dc-chip.ok, .dc-ui .dc-lista .dc-chip.ok { color: #fff; background: var(--ok); border-color: var(--ok); }
.dc-ui .dc-tile .dc-chip.warn, .dc-ui .dc-lista .dc-chip.warn { color: #fff; background: var(--warn); border-color: var(--warn); }
.dc-ui .dc-tile .dc-chip.crit, .dc-ui .dc-lista .dc-chip.crit { color: #fff; background: var(--crit); border-color: var(--crit); }
.dc-ui .dc-tile .dc-chip.neu, .dc-ui .dc-tile .dc-chip.obra, .dc-ui .dc-lista .dc-chip.neu, .dc-ui .dc-lista .dc-chip.obra { color: var(--faint); background: #eef1f6; border-color: #eef1f6; }
.dc-ui .dc-tile .dc-hero-s { font-size: 32px; font-weight: 700; letter-spacing: -.025em; margin-top: 8px; }
.dc-ui .dc-tile.crit .dc-hero-s { color: var(--crit); }
.dc-ui .dc-tile.warn .dc-hero-s { color: #8a4a00; }
.dc-ui .dc-tile.crit .dc-hero-s small, .dc-ui .dc-tile.warn .dc-hero-s small { color: inherit; opacity: .8; }
/* el segundo número (Precio fraccionado: el USD/tn al lado del $/kg, lámina 26) */
.dc-ui .dc-hero-2 { font-size: 20px; font-weight: 600; color: var(--navy-500); letter-spacing: -.01em; }
.dc-ui .dc-hero-2 small { font-size: 12px; }
.dc-ui .dc-lista .dc-hero-2 { font-size: 12.5px; }
.dc-ui .dc-lista .dc-hero-2 small { font-size: 10.5px; }
.dc-ui .dc-tile b.t-ok, .dc-ui .dc-lista b.t-ok { color: var(--ok); }
.dc-ui .dc-tile b.t-crit, .dc-ui .dc-lista b.t-crit { color: var(--crit); }
.dc-ui .dc-desvio { font-size: 13px; font-weight: 600; margin-top: 3px; line-height: 1.35; color: var(--muted); }
.dc-ui .dc-tile.ok .dc-desvio, .dc-ui .dc-lista tr.ok .dc-desvio { color: var(--ok); }
.dc-ui .dc-tile.warn .dc-desvio, .dc-ui .dc-lista tr.warn .dc-desvio { color: var(--warn); }
.dc-ui .dc-tile.crit .dc-desvio, .dc-ui .dc-lista tr.crit .dc-desvio { color: var(--crit); }
.dc-ui .dc-tile.neu .dc-desvio { font-weight: 500; }
.dc-ui .dc-tile .dc-f { font-size: 12px; margin-top: 3px; line-height: 1.4; }
.dc-ui .dc-fig { margin-top: auto; padding-top: 10px; min-width: 0; }
.dc-ui .dc-fig-svg, .dc-ui .dc-fig .dc-mini { width: 100%; height: auto; display: block; overflow: visible; margin-top: 0; }
.dc-ui .dc-fig .dcn-mini { margin-top: 0; }
.dc-ui .dc-cinta { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; }
.dc-ui .dc-cinta span { flex: 0 0 0; min-width: 0; height: 100%; transition: flex-basis .7s var(--curva); color: #fff; font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.dc-ui .dc-cinta span.r { background: #e4e8f0; color: var(--muted); font-weight: 500; }
/* la leyenda de la cinta (lámina 36 A): cada color con su nombre y su % */
.dc-ui .dc-cinta-ley { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-size: 11px; color: var(--ink); }
.dc-ui .dc-cinta-ley span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dc-ui .dc-cinta-ley i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dc-ui .dc-cinta-ley b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-ui .dc-cinta-ley .r { color: var(--faint); }
.dc-ui .dc-cinta-ley .r i { background: #e4e8f0; }
/* el número con su sujeto al lado y la pastilla «vs hace un año» de un KPI sin objetivo (lámina 36 A) */
.dc-ui .dc-hero-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dc-ui .dc-hero-l .dc-hero-s { flex: none; }
.dc-ui .dc-hero-suj { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.dc-ui .dc-hero-suj b { color: var(--navy); }
.dc-ui .dc-tile .dc-chip.dc-vs, .dc-ui .dc-lista .dc-chip.dc-vs { color: var(--ok); background: var(--dc-ok-050); border-color: var(--dc-ok-hair); }
.dc-ui .dc-tile .dc-chip.dc-vs.mal, .dc-ui .dc-lista .dc-chip.dc-vs.mal { color: var(--crit); background: var(--dc-crit-050); border-color: var(--dc-crit-hair); }
.dc-ui .dc-chip.dc-vs svg { width: 11px; height: 11px; }
.dc-ui .dc-tile .dc-obj .dc-dato { color: var(--ink); font-size: 12px; }
.dc-ui .dc-tile .dc-obj .dc-dato b { color: var(--navy); font-weight: 700; }
.dc-ui .dc-tile .dc-obj { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); }
.dc-ui .dc-tile .dc-obj b { font-weight: 600; }
.dc-ui .dc-abrir { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--navy); border: 1px solid var(--hair-strong); border-radius: 99px;
    padding: 3px 11px; background: var(--surface); white-space: nowrap; transition: background .15s, color .15s; cursor: pointer; }
.dc-ui .dc-tile-k:hover { transform: translateY(-2px); }
.dc-ui .dc-tile-k:hover .dc-abrir, .dc-ui .dc-abrir:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* la lista */
.dc-ui .dc-lista { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.dc-ui .dc-lista th { text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--hair-strong); background: #fafbfd; }
.dc-ui .dc-lista th.n { text-align: right; }
.dc-ui .dc-lista td { padding: 7px 10px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.dc-ui .dc-lista td.nom { font-weight: 600; color: var(--ink); border-left: 5px solid var(--hair-strong); white-space: nowrap; }
.dc-ui .dc-lista tr.ok td.nom { border-left-color: var(--ok); }
.dc-ui .dc-lista tr.warn td.nom { border-left-color: var(--warn); }
.dc-ui .dc-lista tr.crit td.nom { border-left-color: var(--crit); }
.dc-ui .dc-lista tr.neu td.nom { border-left-color: #aeb8c6; }
.dc-ui .dc-lista tr.obra td { color: var(--faint); }
.dc-ui .dc-lista td.v { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; white-space: nowrap; }
.dc-ui .dc-lista td.v small { font-weight: 500; color: var(--faint); font-size: 11px; margin-left: 3px; }
.dc-ui .dc-lista tr.crit td.v { color: var(--crit); }
.dc-ui .dc-lista tr.warn td.v { color: #8a4a00; }
.dc-ui .dc-lista td.w { color: var(--muted); min-width: 240px; font-size: 12px; }
.dc-ui .dc-lista td.w .dc-desvio { display: inline; font-size: 12.5px; }
.dc-ui .dc-lista td.fig { width: 170px; }
.dc-ui .dc-lista td.fig .dc-fig { padding-top: 0; width: 160px; }
.dc-ui .dc-lista td.ab { text-align: right; white-space: nowrap; }

/* la barra del KPI abierto (lámina 24) */
.dc-ui .dc-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hair);
    border-radius: 12px; padding: 7px 10px; box-shadow: var(--e1); margin-bottom: 12px; }
.dc-ui .dc-barra .dc-volver { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair-strong); border-radius: 8px; padding: 5px 10px;
    font-weight: 600; color: var(--navy); background: var(--surface); font-size: 12.5px; }
.dc-ui .dc-barra .dc-volver:hover { background: var(--navy-050); text-decoration: none; }
.dc-ui .dc-miga { font-size: 12.5px; color: var(--faint); }
.dc-ui .dc-miga b { color: var(--ink); font-weight: 600; }
.dc-ui .dc-nav { display: inline-flex; gap: 4px; }
.dc-ui .dc-nav button { border: 1px solid var(--hair-strong); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; color: var(--muted); background: var(--surface); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-ui .dc-nav button:hover { color: var(--navy); background: var(--navy-050); }

/* el organizador */
.dc-ui .dc-org-fondo { position: fixed; inset: 0; background: rgba(10, 25, 60, .18); z-index: 40; opacity: 0; transition: opacity .25s; }
.dc-ui .dc-org-fondo.open { opacity: 1; }
.dc-ui .dc-org { position: fixed; top: 12px; right: 12px; bottom: 12px; width: 400px; max-width: calc(100vw - 24px); background: var(--surface);
    border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--e3); padding: 16px 18px; z-index: 41; overflow-y: auto;
    transform: translateX(24px); opacity: 0; transition: transform .3s var(--curva), opacity .25s; }
.dc-ui .dc-org.open { transform: none; opacity: 1; }
.dc-ui .dc-org h4 { margin: 0; font-size: 14px; color: var(--navy); }
.dc-ui .dc-org .sub { font-size: 12px; color: var(--faint); margin: 2px 0 12px; }
.dc-ui .dc-org-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--faint); padding: 4px 8px; }
.dc-ui .dc-org-pre { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.dc-ui .dc-org-pre button { border: 1px solid var(--hair-strong); border-radius: 10px; padding: 8px 6px 6px; font-size: 11.5px; color: var(--muted); background: var(--surface); text-align: center; display: grid; gap: 2px; justify-items: center; }
.dc-ui .dc-org-pre button svg { width: 44px; height: 26px; }
.dc-ui .dc-org-pre button b { color: var(--ink); font-size: 12px; }
.dc-ui .dc-org-pre button.on { border-color: var(--navy); background: var(--navy-050); }
.dc-ui .dc-org h5 { margin: 10px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.dc-ui .dc-org h5 em { font-style: normal; color: #8a5a00; font-weight: 600; }
.dc-ui .dc-org h5 .n { font-weight: 500; text-transform: none; letter-spacing: 0; }
.dc-ui .dc-org-fila { display: grid; grid-template-columns: 18px 18px minmax(0, 1fr) 44px 22px; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--hair); font-size: 12.5px; background: var(--surface); }
.dc-ui .dc-org-fila.off .n { color: var(--faint); font-weight: 500; }
.dc-ui .dc-org-fila.drag { opacity: .4; }
.dc-ui .dc-org-fila.sobre { box-shadow: inset 0 2px 0 var(--navy); }
.dc-ui .dc-org-fila .h { color: #c0c8d4; cursor: grab; font-size: 14px; line-height: 1; user-select: none; }
.dc-ui .dc-org-fila .n { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ui .dc-org-fila .n small { color: var(--faint); font-weight: 500; margin-left: 4px; }
.dc-ui .dc-org-fila .mv { display: inline-flex; gap: 2px; }
.dc-ui .dc-org-fila .mv button { border: 1px solid var(--hair-strong); border-radius: 5px; background: var(--surface); font-size: 9px; padding: 1px 4px; color: var(--muted); line-height: 1.4; }
.dc-ui .dc-org-fila .mv button:disabled { opacity: .35; cursor: default; }
.dc-ui .dc-org-fila .st { border: 0; background: none; color: #d4dbe7; font-size: 16px; line-height: 1; padding: 0; }
.dc-ui .dc-org-fila .st.on { color: #e3a600; }
.dc-ui .dc-org-fig { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 12px; flex-wrap: wrap; }
.dc-ui .dc-org-acc { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 760px) { .dc-ui .dc-org { top: auto; max-height: 85vh; border-radius: 16px 16px 0 0; left: 0; right: 0; bottom: 0; width: auto; max-width: none; } }

/* ─── OTIF (ronda 10, etapa 7 · maqueta 21): todo con el prefijo dco- ─── */
.dc-ui .dco-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-ui .dcq-fi .v.dn { color: var(--crit); } .dc-ui .dcq-fi .v.wn { color: var(--warn); } .dc-ui .dcq-fi .v.up { color: var(--ok); }
.dc-ui .dcq-fi .v.dco-v-chico { font-size: 14px; }
.dc-ui .dco-banda .dcf-fill { background: #1f5fb8; }
.dc-ui .dco-banda .dcf-bcap span:last-child { white-space: nowrap; }
/* a menos de 1000 px el gráfico de doce columnas no entra al lado del número: una columna */
@media (max-width: 1000px) { .dc-ui .dco-kpi .dcf-body { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dc-ui .dco-leg { grid-template-columns: 1fr; } }
.dc-ui .dco-chart text { font-family: inherit; }
.dc-ui .dco-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dc-ui .dco-leg span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dc-ui .dco-leg i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dc-ui .dco-leg b { color: var(--ink); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-ui .dco-leg em { font-style: normal; color: var(--faint); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
/* el embudo */
.dc-ui .dco-embudo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 4px; }
@media (max-width: 820px) { .dc-ui .dco-embudo { grid-template-columns: 1fr 1fr; } }
.dc-ui .dco-em { border-radius: 10px; padding: 10px 12px; color: #fff; min-height: 84px; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--curva); }
.dc-ui .dco-em.vivo { transform: none; }
.dc-ui .dco-em .t { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .85; font-weight: 600; }
.dc-ui .dco-em .v { font-size: 24px; font-weight: 700; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dc-ui .dco-em .v small { font-size: 11.5px; font-weight: 600; opacity: .85; margin-left: 4px; }
.dc-ui .dco-em .d { font-size: 11.5px; opacity: .9; margin-top: 3px; }
.dc-ui .dco-em.e1 { background: #5d7aa6; } .dc-ui .dco-em.e2 { background: #3f66a0; } .dc-ui .dco-em.e3 { background: #27509a; } .dc-ui .dco-em.e4 { background: var(--navy); }
.dc-ui .dco-fuga { font-size: 12px; color: var(--muted); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 820px) { .dc-ui .dco-fuga { grid-template-columns: 1fr 1fr; } .dc-ui .dco-fuga > div:first-child { display: none; } }
.dc-ui .dco-fuga > div { padding: 0 4px; } .dc-ui .dco-fuga b { color: var(--crit); } .dc-ui .dco-fuga b.nc { color: var(--ok); }
.dc-ui .dco-tbl { margin-top: 8px; }
/* cambios de turno · urgentes */
.dc-ui .dco-quien { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dc-ui .dco-quien-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dc-ui .dco-quien-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .dc-ui .dco-quien, .dc-ui .dco-quien-5 { grid-template-columns: 1fr 1fr; } }
.dc-ui .dco-aud { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; font-size: 12.5px; margin-top: 12px; }
.dc-ui .dco-aud .lh, .dc-ui .dco-aud .lr { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.3fr 1.5fr; gap: 8px; padding: 7px 12px; align-items: center; }
.dc-ui .dco-aud .lh { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--hair-strong); background: #f7f8fb; }
.dc-ui .dco-aud .lr { border-bottom: 1px solid var(--hair); } .dc-ui .dco-aud .lr:last-child { border-bottom: 0; }
.dc-ui .dco-aud .lr b { color: var(--ink); } .dc-ui .dco-aud .lr small { display: block; color: var(--faint); font-size: 11px; }
.dc-ui .dco-aud .lr.cli { background: var(--navy-050); }
.dc-ui .dco-aud .fa { color: var(--faint); }
@media (max-width: 820px) { .dc-ui .dco-aud .lh { display: none; } .dc-ui .dco-aud .lr { grid-template-columns: 1fr 1fr; } }
.dc-ui .dco-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; margin-top: 10px; }
@media (max-width: 900px) { .dc-ui .dco-dos { grid-template-columns: 1fr; } }
/* por cliente: el cliente se abre en sus pedidos */
.dc-ui .dco-tbl tr.dco-cli { cursor: pointer; }
.dc-ui .dco-tbl tr.dco-cli.on td { background: #f2f6fc; }
.dc-ui .dco-tbl tr.dco-ped td { text-align: left; padding: 3px 8px 3px 38px; font-size: 12px; color: var(--muted); white-space: normal; background: #fafbfd; }
.dc-ui .dco-tbl tr.dco-ped b { color: var(--ink); font-weight: 600; }
.dc-ui .dco-tbl tr.dco-ped.mal td { box-shadow: inset 3px 0 0 #d0566f; }
.dc-ui .dco-tbl tr.dco-ped.ok td { box-shadow: inset 3px 0 0 #1f5fb8; }
.dc-ui .dco-est { font-weight: 600; color: var(--crit); } .dc-ui .dco-est.OTIF { color: var(--ok); } .dc-ui .dco-est.EC, .dc-ui .dco-est.SC, .dc-ui .dco-est.AC { color: var(--faint); }
.dc-ui .dco-tbl .t-crit { color: var(--crit); } .dc-ui .dco-tbl .t-warn { color: var(--warn); }
/* ─── Facturación en USD (ronda 13, lámina 31 A, Hernán 26/10): contra el año anterior ─── */
.dc-ui .dc-desvio b.up, .dc-ui .dcd-kpi .up { color: var(--ok); } .dc-ui .dc-desvio b.dn, .dc-ui .dcd-kpi .dn { color: var(--crit); }
.dc-ui .dcd-donde { margin-top: 14px; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.dc-ui .dcd-dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 6px; }
.dc-ui .dcd-g { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "t d"; column-gap: 10px; row-gap: 3px; align-items: center; padding: 6px 0; font-size: 12.5px; border-top: 1px solid var(--hair); }
.dc-ui .dcd-g .n { grid-area: n; } .dc-ui .dcd-g .num:not(.d) { grid-area: v; } .dc-ui .dcd-g .trk { grid-area: t; } .dc-ui .dcd-g .num.d { grid-area: d; }
.dc-ui .dcd-g:first-of-type { border-top: 0; }
.dc-ui .dcd-g .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-ui .dcd-g .n i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.dc-ui .dcd-g .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dc-ui .dcd-g .num.d { font-weight: 700; font-size: 12px; }
.dc-ui .dcd-g .trk { display: block; height: 8px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.dc-ui .dcd-g .trk .dca-bar { display: block; }
.dc-ui .dcd-g .trk.up .dca-bar { background: var(--ok); } .dc-ui .dcd-g .trk.dn .dca-bar { background: var(--crit); }
.dc-ui .dcd-sec { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 0 0 4px; }
.dc-ui .dcd-sec span + span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dc-ui .dcd-col text { font-size: 10px; }
.dc-ui .dcd-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--faint); margin-top: 4px; }
.dc-ui .dcd-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.dc-ui .dcd-leg i.cur { background: #fff; border: 1px dashed; }
.dc-ui .dcd-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 900px) { .dc-ui .dcd-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-ui .dcd-fi { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; background: var(--surface); min-width: 0; }
.dc-ui .dcd-fi .t { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.dc-ui .dcd-fi .v { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dc-ui .dcd-fi .v small { font-size: 11px; color: var(--faint); font-weight: 500; }
.dc-ui .dcd-fi .d { font-size: 11.5px; color: var(--muted); }
.dc-ui .dcd-fi.tc { border-color: color-mix(in srgb, #0d8f86 40%, #fff); background: color-mix(in srgb, #0d8f86 5%, #fff); }
.dc-ui .dcd-fi.tc .t { color: #0d8f86; }
.dc-ui .dcd-tbl td.dcd-dbt .t.up .dca-bar { background: color-mix(in srgb, var(--ok) 70%, #fff); }
.dc-ui .dcd-tbl td.dcd-dbt .t.dn .dca-bar { background: color-mix(in srgb, var(--crit) 70%, #fff); }
.dc-ui .dcd-tbl td.dcd-dbt { width: 22%; }
.dc-ui .dcd-tbl tr.tot td { font-weight: 700; color: var(--navy); border-top: 1px solid var(--hair-strong); }