/* El circuito de una pieza y Producción (09/10). Lo dibuja web/js/contenido-circuito.js. Todo lleva el prefijo `cc-`.
   Mockups aprobados: sesiones/2026-10-09-contenido-produccion/mockups. Los colores salen de los tokens de Central; acá sólo
   se definen los propios: un color por persona del circuito, el azul de «aviso» y el texto que va sobre el verde. */
[data-skin="central"] { --cc-p0: oklch(72% 0.13 350); --cc-p1: oklch(74% 0.11 250); --cc-p2: oklch(79% 0.12 85); --cc-p3: oklch(74% 0.12 160); --cc-p4: oklch(74% 0.11 300); --cc-p5: oklch(76% 0.10 30);
  --cc-en-p: oklch(18% 0.02 330); --cc-en-go: oklch(16% 0.04 165); --cc-info: var(--link); --cc-info-soft: color-mix(in oklab, var(--link) 16%, var(--card)); --cc-noche: oklch(14% 0.008 330); }
[data-skin="central"][data-theme="light"], [data-theme="light"] [data-skin="central"] { --cc-p0: oklch(80% 0.10 350); --cc-p1: oklch(82% 0.08 250); --cc-p2: oklch(85% 0.11 85); --cc-p3: oklch(82% 0.10 160); --cc-p4: oklch(82% 0.08 300); --cc-p5: oklch(84% 0.08 30);
  --cc-en-go: oklch(99% 0.01 165); }
/* el violeta de Carlos (11/10) */
[data-skin="central"] { --cc-ca: oklch(80% 0.10 300); --cc-ca-ink: oklch(87% 0.08 300); --cc-ca-soft: color-mix(in oklab, var(--cc-ca) 20%, var(--card)); --cc-en-ca: oklch(18% 0.03 300); }
[data-skin="central"][data-theme="light"], [data-theme="light"] [data-skin="central"] { --cc-ca: oklch(45% 0.14 300); --cc-ca-ink: oklch(37% 0.13 300); --cc-ca-soft: color-mix(in oklab, var(--cc-ca) 10%, var(--card)); --cc-en-ca: oklch(99% 0.01 300); }
/* base */
#page-contenido-miproduccion { --font-serif: var(--sans); } .cc-chip-fijo { pointer-events: none; } .cc-prod-pag { overflow: auto; display: block; }
.cc-dim { color: var(--ink-2); font-size: 12px; } .cc-esp { flex: 1; } .cc-err { margin: 0; color: var(--bad); font-size: 12.5px; font-weight: 700; }
.cc-av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 10px var(--sans); color: var(--cc-en-p); flex: none; } .cc-av.gr { width: 28px; height: 28px; font-size: 12px; }
.cc-av.c0 { background: var(--cc-p0); } .cc-av.c1 { background: var(--cc-p1); } .cc-av.c2 { background: var(--cc-p2); } .cc-av.c3 { background: var(--cc-p3); } .cc-av.c4 { background: var(--cc-p4); } .cc-av.c5 { background: var(--cc-p5); }
.cc-avs { display: inline-flex; flex: none; } .cc-avs .cc-av + .cc-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.cc-fmt { font: 700 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.cc-r { font: 700 11.5px var(--sans); border-radius: 99px; padding: 2px 9px; color: var(--ink-2); background: var(--line); display: inline-flex; gap: 5px; align-items: center; align-self: flex-start; }
.cc-r.go { color: var(--go-ink); background: var(--go-soft); } .cc-r.warn { color: var(--warn); background: var(--warn-soft); } .cc-r.bad { color: var(--bad); background: var(--bad-soft); } .cc-r.info { color: var(--cc-info); background: var(--cc-info-soft); }
.cc-btn { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 11px; font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; justify-content: center; min-height: 36px; }
.cc-btn:hover:not(:disabled) { border-color: var(--ink-3); } .cc-btn:focus-visible, .cc-lk:focus-visible, .cc-tj:focus-visible, .cc-ci:focus-visible, .cc-chk:focus-visible, .cc-pq:focus-visible, .cc-x:focus-visible, .cc-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-btn.pri { background: var(--go); border-color: var(--go); color: var(--cc-en-go); } .cc-btn:disabled { opacity: .55; cursor: default; } .cc-btn.cc-ch { padding: 6px 11px; } .cc-btn.on { border-color: var(--cc-info); }
.cc-btn.cc-dev { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 55%, var(--line-2)); }
.cc-lk { background: none; border: 0; color: var(--go-ink); font: 700 12.5px var(--sans); padding: 4px 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; text-decoration: none; text-align: left; overflow-wrap: anywhere; }
.cc-x { width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 9px; display: grid; place-items: center; color: var(--ink); background: var(--card); flex: none; cursor: pointer; padding: 0; }
.cc-pq { border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); padding: 6px 12px; border-radius: 99px; font: 700 12.5px var(--sans); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cc-pq b { font-size: 11px; background: var(--line); border-radius: 99px; padding: 0 7px; color: var(--ink); } .cc-pq.on { background: var(--go-soft); border-color: var(--go); color: var(--go-ink); }
.cc-lb { font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: block; } .cc-lb .cc-dim { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; }
.cc-ta { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); padding: 9px 11px; font: 500 13px/1.45 var(--sans); color: var(--ink); resize: vertical; }
.cc-ta:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--go); } .cc-ta.gr { font-size: 15px; font-weight: 600; }
/* la franja de paradas */
.cc-fr { display: flex; align-items: stretch; gap: 6px; margin-bottom: 14px; }
.cc-pa { flex: 1 1 0; min-width: 0; display: flex; gap: 9px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; position: relative; }
.cc-pa.on { border-color: var(--go); background: var(--go-soft); } .cc-pa.fin { flex: 0 0 132px; border-style: dashed; align-items: center; }
.cc-pa-n { width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); display: grid; place-items: center; font: 800 11px var(--sans); flex: none; } .cc-pa.on .cc-pa-n { background: var(--go); color: var(--cc-en-go); }
.cc-pa.hecha .cc-pa-n { background: var(--go-soft); color: var(--go-ink); } .cc-pa.salta { border-style: dashed; background: none; } .cc-pa.salta .cc-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line-2); }
.cc-pa-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; } .cc-pa-b small { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cc-pa-b b { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--ink); } .cc-pa-q { font-size: 11.5px; color: var(--ink-2); }
.cc-pa-c { font: 800 18px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); } .cc-pa-f { display: grid; place-items: center; color: var(--ink-2); flex: none; }
/* 20/10 (ronda de Contenido): en Resumen las paradas son angostas y el número pisaba el rótulo («REVISIÓN48»): va abajo, a la derecha. */
.cnt-res-mes .cc-fr:not(.chica) .cc-pa { padding-bottom: 34px; } .cnt-res-mes .cc-fr:not(.chica) .cc-pa-c { position: absolute; right: 12px; bottom: 8px; }
.cc-fr.chica { gap: 3px; margin-bottom: 0; } .cc-fr.chica .cc-pa { padding: 7px 8px; border-radius: 10px; gap: 6px; flex-direction: column; align-items: flex-start; } .cc-fr.chica .cc-pa-b b { font-size: 11.5px; gap: 4px; }
.cc-fr.chica .cc-pa-b small { font-size: 9.5px; letter-spacing: .04em; } .cc-fr.chica .cc-pa-n { width: 18px; height: 18px; font-size: 10px; } .cc-fr.chica .cc-av { width: 18px; height: 18px; font-size: 8.5px; }
/* el Resumen: una tarjeta por parada del circuito, y quién mira gestión en Producción */
.cc-rs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cc-rs-c { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cc-rs-c.vacia { border-style: dashed; }
.cc-rs-h { display: flex; gap: 9px; align-items: center; } .cc-rs-h > div { flex: 1; min-width: 0; } .cc-rs-h b { display: block; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; } .cc-rs-h small { display: block; font-size: 11.5px; color: var(--ink-2); }
.cc-rs-n { font: 800 22px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); } .cc-rs-c p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; } .cc-rs-t { color: var(--bad); font-weight: 700; }
.cc-rs-a { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-top: auto; }
.cc-quien { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .cc-quien .cc-seg { margin-bottom: 0; }
/* tablero */
.cc-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; margin-bottom: 12px; } .cc-seg button { border: 0; background: var(--card); padding: 7px 14px; font: 700 12.5px var(--sans); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cc-seg button.on { background: var(--go-soft); color: var(--go-ink); } .cc-seg b { font-size: 11px; background: var(--line); border-radius: 99px; padding: 0 7px; color: var(--ink); }
.cc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .cc-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cc-col { background: color-mix(in oklab, var(--line) 30%, var(--bg)); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cc-col h2 { margin: 0; font: 800 12.5px var(--sans); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--ink); } .cc-col h2 > span:not(.cc-avs) { font-weight: 600; color: var(--ink-2); font-size: 11.5px; flex: 1; min-width: 0; }
.cc-col h2 em, .cc-cola h2 em { font: 800 11px var(--sans); font-style: normal; background: var(--line); border-radius: 99px; padding: 1px 8px; color: var(--ink); }
.cc-vacia { margin: 0; font-size: 12px; color: var(--ink-2); padding: 6px 4px; } .cc-vacia.gr { padding: 26px 12px; text-align: center; border: 1px dashed var(--line-2); border-radius: 14px; font-size: 13px; }
.cc-tj { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; font-family: var(--sans); color: var(--ink); cursor: pointer; width: 100%; }
.cc-tj:hover { border-color: var(--ink-3); } .cc-tj-h { display: flex; gap: 2px 6px; align-items: center; flex-wrap: wrap; } .cc-tj small { font-size: 11px; color: var(--ink-2); white-space: nowrap; } .cc-tj > b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.cc-tj-q { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); } .cc-tj-q b { color: var(--ink); font-weight: 700; }
.cc-desde { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--ink-2); } .cc-desde svg { flex: none; } .cc-desde.tarde { color: var(--bad); font-weight: 700; }
.cc-vieron { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--line-2); padding-top: 6px; } .cc-vio { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--ink-2); }
.cc-vio.si { color: var(--go-ink); font-weight: 700; } .cc-vio.no .cc-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line-2); }
.cc-fuera { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); } .cc-fuera summary { cursor: pointer; font-weight: 700; } .cc-fuera-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
/* el panel de la pieza */
.cnt-tar-panel.cc { width: min(468px, 100vw); background: var(--card); } .cnt-tar-panel.cc > header.cc-p-h { display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); }
.cc-p-h > div { flex: 1; min-width: 0; } .cc-p-h small { font-size: 11.5px; color: var(--ink-2); } .cc-p-h b { display: block; font: 800 16px/1.25 var(--sans); overflow-wrap: anywhere; }
.cc-p-c { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.cnt-tar-panel.cc > footer.cc-p-f { flex: none; border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; background: var(--card); }
.cc-ahora { display: flex; gap: 9px; align-items: center; background: var(--go-soft); border: 1px solid var(--go); border-radius: 12px; padding: 8px 10px; } .cc-ahora.otro, .cc-ahora.fin { background: var(--bg); border-color: var(--line-2); }
.cc-ahora b { display: block; font-size: 13px; } .cc-ahora small { font-size: 11.5px; color: var(--ink-2); }
.cc-pasar { padding: 12px 14px; font-size: 14px; white-space: normal; } .cc-acc2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cc-acc3 { display: flex; gap: 4px 16px; flex-wrap: wrap; align-items: center; } .cc-acc3 > .cc-lk { align-self: center; } .cc-acc { display: flex; gap: 8px; flex-wrap: wrap; } .cc-acc.fin { justify-content: flex-end; margin-top: 2px; }
.cc-g { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); } .cc-g-h, .cc-w-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cc-g-h b, .cc-w-t b { font-size: 13px; }
.cc-gc { border-left: 3px solid var(--go); padding: 2px 0 2px 10px; } .cc-gc small, .cc-esc small, .cc-ficha small, .cc-refs small, .cc-cr small, .cc-dlg small { font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cc-gc p { margin: 2px 0 0; font: 800 14px/1.35 var(--sans); overflow-wrap: anywhere; } .cc-gc.cie { border-left-color: var(--warn); } .cc-gc.gr p { font-size: 21px; line-height: 1.25; } .cc-gc.gr { padding-left: 14px; border-left-width: 4px; }
.cc-st { margin: 4px 0 -4px; font: 800 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cc-his { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cc-his li { display: flex; gap: 8px; align-items: flex-start; } .cc-his b { display: block; font-size: 12.5px; } .cc-his small { font-size: 11.5px; color: var(--ink-2); }
.cc-his p { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
/* devolver / mover */
.cc-dlg { border: 1px solid color-mix(in oklab, var(--bad) 60%, var(--line-2)); border-radius: 14px; background: var(--bg); padding: 14px; display: flex; flex-direction: column; gap: 8px; animation: cc-entra 180ms ease-out; }
.cc-dlg > b { font: 800 15px var(--sans); } .cc-dlg p { margin: 0; font-size: 12.5px; color: var(--ink-2); } .cc-dlg p b { color: var(--ink); } .cc-mot { display: flex; gap: 6px; flex-wrap: wrap; }
/* avisos: te llegó / te la devolvieron */
.cc-llegadas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cc-avi { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--cc-info); border-radius: 12px; padding: 10px 12px; } .cc-avi.dev { border-left-color: var(--bad); }
.cc-avi > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cc-avi b { font-size: 13px; overflow-wrap: anywhere; } .cc-avi p { margin: 0; font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; } .cc-avi small { font-size: 11.5px; color: var(--ink-2); }
/* producción */
.cc-prod { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.cc-cola { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: sticky; top: 8px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; }
.cc-w { scroll-margin-top: 12px; } .cc-ci { flex: none; } .cc-chk.fija { cursor: default; } .cc-nota { margin: 6px 0 0; font-size: 12px; } .cc-cola h2 { margin: 0; font: 800 14px var(--sans); display: flex; gap: 7px; align-items: center; color: var(--ink); }
.cc-cola > p { margin: 0 0 4px; font-size: 12px; color: var(--ink-2); } .cc-ci { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: 11px; padding: 8px 9px; background: var(--card); text-align: left; font-family: var(--sans); color: var(--ink); cursor: pointer; width: 100%; }
.cc-ci.on { border-color: var(--go); background: var(--go-soft); } .cc-ci-n { width: 20px; height: 20px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font: 800 10.5px var(--sans); flex: none; margin-top: 1px; }
.cc-ci-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cc-ci b { font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; } .cc-ci small { font-size: 11.5px; color: var(--ink-2); } .cc-ci .cc-r { margin-top: 2px; }
.cc-w { background: var(--card); border: 1px solid var(--line); border-radius: 16px; min-width: 0; } .cc-w-h { display: flex; gap: 8px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .cc-w-h > div { flex: 1; min-width: 200px; }
.cc-w-h small { font-size: 11.5px; color: var(--ink-2); } .cc-w-h h2 { margin: 1px 0 0; font: 800 20px var(--sans); color: var(--ink); overflow-wrap: anywhere; } .cc-w-h h2:focus { outline: none; } .cc-w-vol { display: none; }
.cc-w-c { display: grid; grid-template-columns: minmax(0, 1fr) 286px; } .cc-w-g { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cc-w-l { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cc-escs { display: flex; flex-direction: column; gap: 6px; } .cc-esc { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); } .cc-esc > div { min-width: 0; flex: 1; }
.cc-g .cc-esc { background: var(--card); padding: 8px 10px; } .cc-esc.ahora { border-color: var(--go); box-shadow: 0 0 0 2px var(--go-soft); } .cc-esc.ok .cc-dice { color: var(--ink-2); } .cc-dice { margin: 2px 0 0; font: 600 13.5px/1.45 var(--sans); overflow-wrap: anywhere; }
.cc-escs.gr .cc-dice { font: 700 18px/1.4 var(--sans); }
.cc-chk { width: 26px; height: 26px; border: 2px solid var(--line-2); border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--card); color: var(--cc-en-go); cursor: pointer; padding: 0; } .cc-chk.on { background: var(--go); border-color: var(--go); }
.cc-chk.recien svg { animation: cc-tilde 200ms ease-out; }
.cc-ficha { display: flex; flex-direction: column; gap: 8px; } .cc-ficha b { display: block; font-size: 12.5px; line-height: 1.35; } .cc-refs, .cc-cr { display: flex; flex-direction: column; gap: 5px; } .cc-w-l > * + .cc-refs, .cc-w-l > * + .cc-cr { border-top: 1px solid var(--line); padding-top: 12px; }
.cc-refs p { margin: 0; } .cc-cr.gr { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); }
.cc-in { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; padding: 4px 4px 4px 9px; background: var(--bg); color: var(--ink-2); } .cc-in:focus-within { border-color: var(--go); }
.cc-in input { flex: 1; min-width: 0; border: 0; background: none; font: 500 12.5px var(--sans); color: var(--ink); padding: 6px 0; } .cc-in input:focus { outline: none; } .cc-in input::placeholder { color: var(--ink-2); opacity: 1; }
/* editar y comparar el guion */
.cc-ed { border: 1px solid var(--go); border-radius: 14px; padding: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; animation: cc-entra 180ms ease-out; } .cc-ed-h b { font: 800 14px var(--sans); }
.cc-cam { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; background: var(--cc-info-soft); border: 1px solid var(--cc-info); border-radius: 12px; padding: 9px 11px; } .cc-cam.entra { animation: cc-entra 220ms ease-out; }
.cc-cam > div { flex: 1; min-width: 180px; } .cc-cam b { display: block; font-size: 13px; } .cc-cam small { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.cc-cmpw { display: flex; flex-direction: column; gap: 8px; } .cc-cmpw > p { margin: 0; } .cc-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-cmp-c { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); min-width: 0; } .cc-cmp-c.nue { border-color: var(--go); } .cc-cmp-c small { font-size: 11px; color: var(--ink-2); font-weight: 700; } .cc-cmp-c h4 { margin: 4px 0; font: 800 12px var(--sans); }
.cc-cmp-c p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .cc-cmp-c del { background: var(--bad-soft); color: var(--ink); border-radius: 3px; padding: 0 2px; } .cc-cmp-c ins { background: var(--go-soft); color: var(--ink); text-decoration: none; font-weight: 700; border-radius: 3px; padding: 0 2px; }
/* revisar varias de una */
.cc-rvh { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .cc-rvs { display: flex; flex-direction: column; gap: 8px; }
.cc-rv { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .cc-rv.ab { border-color: var(--line-2); } .cc-rv-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-rv-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cc-rv-h b { font-size: 14px; overflow-wrap: anywhere; } .cc-rv small { font-size: 11.5px; color: var(--ink-2); }
.cc-rv-g { margin: 0; font: 700 14px/1.4 var(--sans); overflow-wrap: anywhere; } .cc-rv i { font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--ink-2); margin-right: 6px; }
.cc-rv-x { border-top: 1px dashed var(--line-2); margin-top: 4px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; } .cc-rv-x p { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cc-rv-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px solid var(--go); border-radius: 14px; padding: 10px 14px; margin-top: 12px; position: sticky; bottom: 8px; } .cc-rv-a b { font-size: 13.5px; }
.cc-rvs + .cc-dlg { margin-top: 12px; }
/* modo lectura: siempre de noche, para leer a dos metros */
html .cc-lec[data-skin="central"] { position: fixed; inset: 0; z-index: 9100; display: flex; flex-direction: column; background: var(--cc-noche); --ink: oklch(96% 0.006 330); --ink-2: oklch(72% 0.012 330); --line-2: oklch(34% 0.012 330); --card: oklch(20% 0.008 330); --go: oklch(76% 0.15 160); --cc-en-go: oklch(16% 0.04 165);
  --focus: oklch(80% 0.12 255); color: var(--ink); font-family: var(--sans); animation: cc-aparece 160ms ease-out; }
.cc-lec-h { display: flex; gap: 12px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--line-2); } .cc-lec-h > div { min-width: 0; } .cc-lec-h small { font-size: 12px; color: var(--ink-2); } .cc-lec-h b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-lec-c { display: inline-flex; gap: 6px; } .cc-lec-b { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 30px 9%; }
.cc-lec-b > :first-child { margin-top: auto; } .cc-lec-b > :last-child { margin-bottom: auto; }          /* centrada si entra; si no, desde el primer renglón */
.cc-lec-baja { display: none; align-self: center; align-items: center; gap: 6px; margin: -44px 0 8px; padding: 6px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-2); font: 800 12px var(--sans); color: var(--ink); position: relative; pointer-events: none; }
.cc-lec.larga .cc-lec-baja { display: inline-flex; }
.cc-lec-b small { font: 800 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--go); } .cc-lec-b i { font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; font-style: normal; margin-right: 8px; color: var(--ink-2); }
.cc-lec-ant, .cc-lec-sig { margin: 0; font: 600 22px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .cc-lec-sig { margin-top: 14px; }
.cc-lec-tx { margin: 0; font: 800 calc(46px * var(--cc-lec-esc, 1.18) * var(--cc-lec-fit, 1))/1.16 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cc-lec-f { display: flex; gap: 10px; align-items: center; padding: 16px 24px 20px; border-top: 1px solid var(--line-2); } .cc-lec-ok { padding: 16px 26px; font-size: 16px; flex: 1; } .cc-lec-p { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; max-width: 30%; }
.cc-lec-p i { width: 28px; height: 6px; border-radius: 99px; background: var(--line-2); } .cc-lec-p i.ok { background: var(--go); } .cc-lec-p i.on { background: var(--ink); }
/* movimiento: corto, sólo transform y opacidad. Sin movimiento queda exactamente igual. */
/* el guion por partes adentro del panel de la pieza (angosto) */
.cc-g .cc-que, .cc-g .cc-jer, .cc-g .cc-placa, .cc-g .cc-txt { background: var(--card); } .cc-g .cc-placas { grid-template-columns: minmax(0, 1fr); }
/* 10/10 · el guion por partes, la pieza que no es video y la cola en grupos (láminas 01, 02 y 06) */
.cc-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--line); font: 800 13px var(--sans); vertical-align: 3px; margin-right: 8px; }
.cc-cor { padding: 0 5px; border-radius: 5px; border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--ink); font-weight: 700; }
.cc-bc { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 12px; padding: 9px 11px; color: var(--ink); } .cc-bc > svg { flex: none; margin-top: 3px; color: var(--warn); } .cc-bc > div { min-width: 0; }
.cc-bc b { display: block; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; } .cc-bc .cc-cor { background: var(--card); } .cc-bc small { font-size: 11.5px; color: var(--ink-2); }
.cc-que, .cc-jer { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--bg); } .cc-que small, .cc-tc small, .cc-jer small, .cc-placa small, .cc-gru, .cc-lec-n small { font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cc-que p, .cc-txt p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; } .cc-txt { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; } .cc-gru { display: block; margin-bottom: -6px; }
.cc-ind { margin: 2px 0 0; font: 500 13px/1.4 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .cc-ind.sola { font: 600 14.5px/1.45 var(--sans); color: var(--ink); } .cc-escs.gr .cc-ind.sola { font-size: 16px; } .cc-esc.ok .cc-ind.sola, .cc-esc.ok .cc-sub { color: var(--ink-2); }
.cc-sub { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font: 600 14px/1.4 var(--sans); overflow-wrap: anywhere; } .cc-escs.gr .cc-sub { font-size: 15.5px; } .cc-sub b { font-weight: 800; }
.cc-tc { border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 12px; background: var(--cc-info-soft); } .cc-tc ul, .cc-lec-n ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; } .cc-jer ul { margin: 2px 0 0; padding-left: 18px; font-size: 13px; }
.cc-jer ol { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: ccj; display: flex; flex-direction: column; gap: 6px; } .cc-jer ol > li { counter-increment: ccj; display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.4; } .cc-jer ol > li > div { min-width: 0; overflow-wrap: anywhere; }
.cc-jer ol > li::before { content: counter(ccj); width: 22px; height: 22px; border-radius: 50%; background: var(--line); display: inline-grid; place-items: center; font: 800 11px var(--sans); flex: none; } .cc-jer li span { color: var(--ink-2); font-size: 13px; } .cc-jer ol > li:first-child b { font-size: 17px; }
.cc-placas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cc-placa { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); } .cc-placa > div { min-width: 0; flex: 1; }
.cc-placa p { margin: 3px 0 0; font: 600 14px/1.45 var(--sans); overflow-wrap: anywhere; } .cc-placa.ok p { color: var(--ink-2); }
.cc-lista { display: flex; flex-direction: column; gap: 6px; } .cc-gr { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 4px; } .cc-nada { margin: 4px 0; } .cc-bus { padding: 0 9px; } .cc-bus > svg { flex: none; }
.cc-gr-h { display: flex; gap: 7px; align-items: center; width: 100%; border: 0; background: none; padding: 6px 2px; font: 700 13px var(--sans); color: var(--ink); cursor: pointer; text-align: left; border-radius: 8px; } .cc-gr-h:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-gr-h em { font: 800 11px var(--sans); font-style: normal; background: var(--line); border-radius: 99px; padding: 1px 8px; } .cc-gr:not(.ab) .cc-gr-h > svg:last-child { transform: rotate(-90deg); }
.cc-lec-ind { margin: 0; font: 600 20px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .cc-lec-res { margin: 0; font: 700 calc(26px * var(--cc-lec-fit, 1))/1.3 var(--sans); color: var(--go); overflow-wrap: anywhere; } .cc-lec .cc-cor { background: none; border-color: currentColor; }
.cc-lec-n { position: absolute; top: 64px; right: 24px; z-index: 2; width: min(440px, calc(100vw - 48px)); max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; color: var(--ink); animation: cc-entra 180ms ease-out; } .cc-lec-n ul { font-size: 16px; }
@keyframes cc-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cc-llega { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes cc-tilde { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes cc-aparece { from { opacity: 0; } to { opacity: 1; } }
.cc-tj.llega, .cc-ci.llega { animation: cc-llega 240ms ease-out; }
@media (prefers-reduced-motion: reduce) { .cc-tj.llega, .cc-ci.llega, .cc-chk.recien svg, .cc-cam.entra, .cc-dlg, .cc-ed, .cc-lec, .cc-lec-n, .cc-car { animation: none; } }
/* celular */
@media (max-width: 900px) {
  .cnt-res-mes .cc-fr:not(.chica) { flex-wrap: wrap; overflow-x: visible; } .cnt-res-mes .cc-fr:not(.chica) .cc-pa { flex: 1 1 140px; } .cc-rs { grid-template-columns: 1fr; }
  .cc-fr:not(.chica) { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; } .cc-fr:not(.chica) .cc-pa { flex: 0 0 150px; scroll-snap-align: start; } .cc-fr:not(.chica) .cc-pa-f { display: none; } .cc-fr:not(.chica) .cc-pa.fin { flex-basis: 120px; }
  .cc-fr.chica { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .cc-fr.chica .cc-pa { padding: 6px 5px; } .cc-fr.chica .cc-pa-b b { font-size: 10.5px; } .cc-fr.chica .cc-pa-b small { display: none; }
  .cc-cols { grid-template-columns: 1fr; } .cc-btn, .cc-pq, .cc-lk, .cc-seg button { min-height: 44px; } .cc-x { width: 44px; height: 44px; } .cc-chk { width: 44px; height: 44px; border-radius: 12px; } .cc-g .cc-lk { min-height: 44px; }
  .cc-prod { grid-template-columns: 1fr; } .cc-prod.en-pieza .cc-cola, .cc-prod.en-cola .cc-w { display: none; } .cc-cola { border: 0; padding: 0; background: none; position: static; max-height: none; overflow: visible; } .cc-ci { min-height: 44px; }
  .cc-prod.en-cola .cc-ci.on { border-color: var(--line); background: var(--card); } .cc-w { scroll-margin-top: 70px; }
  .cc-w { border: 0; background: none; } .cc-w-h { padding: 0 0 10px; } .cc-w-vol { display: grid; border: 0; background: none; } .cc-w-h h2 { font-size: 17px; } .cc-w-c { grid-template-columns: 1fr; } .cc-w-g { padding: 12px 0; } .cc-w-l { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
  .cc-w-h .cc-btn { flex: 1 1 40%; } .cc-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-escs.gr .cc-dice { font-size: 17px; } .cc-gc.gr p { font-size: 19px; } .cc-pasar { min-height: 52px; }
  .cc-cmp { grid-template-columns: 1fr; } .cc-rv { padding: 10px; flex-wrap: wrap; } .cc-rv > .cc-lk { flex-basis: 100%; } .cc-rv-a .cc-btn { flex: 1 1 100%; } .cc-avi { flex-wrap: wrap; } .cc-avi > .cc-btn { flex: 1 1 100%; }
  .cc-lec-h { padding: 8px 10px; gap: 8px; } .cc-lec-h > div { flex: 1; } .cc-lec-h b { font-size: 13px; } .cc-lec .cc-esp { display: none; } .cc-lec-b { padding: 18px; gap: 10px; } .cc-lec-tx { font-size: calc(26px * var(--cc-lec-esc, 1.18) * var(--cc-lec-fit, 1)); }
  .cc-placas { grid-template-columns: 1fr; } .cc-escs.gr .cc-sub { font-size: 15px; } .cc-gr-h { min-height: 44px; } .cc-bus input { min-height: 40px; } .cc-lec-ind { font-size: 15px; } .cc-lec-res { font-size: calc(18px * var(--cc-lec-fit, 1)); } .cc-lec .cc-lec-tc { display: none; }
  .cc-lec-ant, .cc-lec-sig { font-size: 15px; } .cc-lec-f { flex-wrap: wrap; padding: 10px 12px 14px; } .cc-lec-ok { flex: 1 1 60%; padding: 0 14px; min-height: 56px; } .cc-lec-p { flex-basis: 100%; max-width: none; justify-content: center; margin: 4px 0 0; order: -1; }
}
/* 19/10 · tareas por formato (mockup aprobado por el owner): pestañas por formato con cuántas hay, el plazo con color y a
   quién pasa la pieza. Peso máximo 600. */
.cc-fmts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.cc-fmts button { border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); border-radius: 99px; padding: 5px 12px; font: 600 12.5px var(--sans); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.cc-fmts button b { font-weight: 600; color: var(--ink); }
.cc-fmts button.on { border-color: var(--go); background: var(--go-soft); color: var(--go-ink); }
.cc-fmts button:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.cc-plazo { white-space: nowrap; }
.cc-plazo.tarde { color: var(--bad); font-weight: 600; }
.cc-plazo.pronto { color: var(--warn); }
.cc-plazo.ok { color: var(--go-ink); }
.cc-ci-pasa { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--ink-2); }
.cc-ci-pasa svg { width: 12px; height: 12px; }
@media (max-width: 760px) { .cc-fmts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .cc-fmts button { flex: none; min-height: 40px; } }
/* 11/10 · Carlos en una línea y sobre la pieza (láminas 01 a 06 de sesiones/2026-10-11-carlos-produccion/mockups).
   El violeta de Carlos se define arriba, con los demás colores propios. */
.cc-ln { display: flex; gap: 8px; align-items: flex-start; } .cc-ln-t { flex: 1; min-width: 0; } .cc-gc .cc-ln { align-items: center; }
.cc-ia { position: relative; flex: none; height: 26px; min-width: 26px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: none; display: inline-grid; place-items: center; color: var(--ink-2); cursor: pointer; opacity: .62; }
.cc-ia em { display: none; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 6px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--cc-ca); background: var(--card); color: var(--cc-ca-ink); font: 700 11.5px var(--sans); white-space: nowrap; pointer-events: none; }
.cc-ia:hover:not(:disabled), .cc-ia:focus-visible { opacity: 1; border-color: var(--cc-ca); color: var(--cc-ca-ink); background: var(--cc-ca-soft); } .cc-ia:hover:not(:disabled) em, .cc-ia:focus-visible em { display: block; }
.cc-ia:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .cc-ia.on, .cc-ia.on:hover:not(:disabled), .cc-ia.on:focus-visible { opacity: 1; border-color: var(--cc-ca); background: var(--cc-ca); color: var(--cc-en-ca); } .cc-ia.on em { display: none; }
.cc-ia:disabled { opacity: .3; cursor: default; } .cc-sub .cc-ia { height: 22px; min-width: 22px; }
.cc-esc.car, .cc-placa.car { border-color: var(--cc-ca); box-shadow: 0 0 0 2px var(--cc-ca-soft); }
.cc-car { margin-top: 10px; border: 1px solid var(--cc-ca); border-radius: 12px; background: var(--card); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; animation: cc-entra 180ms ease-out; }
.cc-car-c { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .cc-car-h { display: flex; gap: 7px; align-items: center; color: var(--cc-ca-ink); } .cc-car-h b { font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.cc-car-x { width: 26px; height: 26px; border-radius: 8px; } .cc-car .cc-pq { color: var(--ink); } .cc-car-in { padding-left: 10px; } .cc-car-in > svg { color: var(--cc-ca-ink); flex: none; } .cc-car-in:focus-within { border-color: var(--cc-ca); } .cc-car-in input { font-size: 13px; }
.cc-car p, .cc-gc.gr .cc-car p { margin: 0; font: 500 12.5px/1.45 var(--sans); } .cc-car p.cc-car-n, .cc-gc.gr .cc-car p.cc-car-n { font-size: 11.5px; color: var(--ink-2); } .cc-car-n b { color: var(--ink); }
.cc-alt { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px 9px 12px; background: var(--bg); } .cc-alt > div { flex: 1; min-width: 0; }
.cc-car .cc-alt p, .cc-gc.gr .cc-car .cc-alt p { font: 700 16px/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .cc-car .cc-alt small { display: block; margin-top: 3px; font: 500 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.cc-car p.cc-car-avi, .cc-gc.gr .cc-car p.cc-car-avi { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 10px; padding: 7px 10px; } .cc-car-avi svg { flex: none; margin-top: 2px; }
.cc-car p.cc-car-avi.ok { background: var(--go-soft); border-color: var(--go); } .cc-car p.cc-car-avi.bad { background: var(--bad-soft); border-color: var(--bad); } .cc-car p.cc-err, .cc-gc.gr .cc-car p.cc-err { color: var(--bad); font-weight: 700; }
.cc-car .cc-cmp-c p, .cc-gc.gr .cc-car .cc-cmp-c p { font: 600 14.5px/1.5 var(--sans); color: var(--ink); } .cc-car .cc-cmp-c small { text-transform: none; letter-spacing: 0; } .cc-car .cc-cmp-c .cc-ta { margin-top: 4px; } .cc-car .cc-cmp { grid-template-columns: minmax(0, 1fr); }
.cc-car p.cc-pens, .cc-gc.gr .cc-car p.cc-pens { display: flex; gap: 5px; align-items: center; font-weight: 700; font-size: 13px; color: var(--ink); } .cc-pens i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-ca); } .cc-pens i:nth-child(2) { opacity: .65; } .cc-pens i:nth-child(3) { opacity: .35; margin-right: 5px; }
.cc-hoy { border-left: 3px solid var(--line-2); padding: 1px 0 1px 10px; } .cc-hoy small, .cc-cual small { font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: block; }
.cc-hoy p, .cc-gc.gr .cc-hoy p, .cc-car .cc-hoy p, .cc-gc.gr .cc-car .cc-hoy p { margin: 2px 0 0; font: 600 14px/1.45 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
p.cc-mk, .cc-gc.gr p.cc-mk { margin: 6px 0 0; display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; font: 500 12px var(--sans); } .cc-r.ca { color: var(--cc-ca-ink); background: var(--cc-ca-soft); align-self: center; } .cc-mk .cc-lk { font-size: 12px; padding: 0; }
.cc-car-b svg { color: var(--cc-ca-ink); } .cc-btn.cc-car-b.on { border-color: var(--cc-ca); background: var(--cc-ca-soft); }
.cc-ref { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cc-ca); color: var(--cc-en-ca); font: 800 10.5px var(--sans); letter-spacing: 0; vertical-align: 1px; margin-left: 4px; }
.cc-cual { display: none; flex-direction: column; gap: 2px; } .cc-op { display: flex; gap: 10px; align-items: center; min-height: 44px; border: 0; background: none; padding: 2px 0; text-align: left; font: 600 13px/1.35 var(--sans); color: var(--ink); cursor: pointer; }
.cc-op i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; box-sizing: border-box; } .cc-op.on { font-weight: 700; } .cc-op.on i { border: 5px solid var(--cc-ca); } .cc-op:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Carlos de la pieza abierto: la cola se pliega y la ficha baja; quedan el guion y Carlos lado a lado */
@media (min-width: 901px) { .cc-con-carlos { padding-right: 420px; } .cc-con-carlos .cc-prod { grid-template-columns: minmax(0, 1fr); } .cc-con-carlos .cc-cola { display: none; } .cc-con-carlos .cc-w-vol { display: grid; }
  .cc-con-carlos .cc-w-c { grid-template-columns: minmax(0, 1fr); } .cc-con-carlos .cc-w-l { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 900px) {
  .cc-ia { width: 44px; height: 44px; border-radius: 12px; opacity: .8; } .cc-ia em, .cc-ia:hover:not(:disabled) em, .cc-ia:focus-visible em { display: none; } .cc-sub .cc-ia { display: none; } .cc-cual { display: flex; }
  .cc-car { scroll-margin: 70px 0 90px; } .cc-placas { grid-template-columns: minmax(0, 1fr); } .cc-placa > div { flex: 1; min-width: 0; }
  .cc-car-x { width: 44px; height: 44px; } .cc-alt { flex-direction: column; align-items: stretch; } .cc-car .cc-acc .cc-btn { flex: 1 1 auto; justify-content: center; } .cc-car-in { min-height: 44px; }
}