/* ============================================================
   ZetaSoft ERP por dentro (/erp/): diagramas animados
   ------------------------------------------------------------
   Todo vive dentro de .zs-dg (y el indice de la portada en
   .zs-erp-indice) para no chocar con Elementor ni con el tema.

   OJO con Hello Elementor: su reset pinta TODOS los <button> de
   rosado (#c36, tambien en :hover y :focus) y a las tablas les pone
   bordes grises, relleno de 15px y filas rayadas. Por eso cada
   boton y cada tabla de aqui redefine borde, fondo, relleno y
   colores con mas especificidad (.zs-dg button.algo).

   Movimiento: mismo criterio que la seccion "Movimiento" de
   style.css (skills de Emil Kowalski). El JS esta en
   erp-diagramas.js y se carga solo en esta pagina.
   ============================================================ */

/* Las anclas del indice no deben quedar tapadas por la cabecera fija. */
#modulos, #ventas, #restaurante, #panaderia, #etiquetas, #cobranza, #ciclo { scroll-margin-top: 110px; }

/* ---------- Indice de la portada (sobre navy) ---------- */
.zs-erp-indice {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 20px 22px;
    color: #FFFFFF;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.zs-erp-indice .zs-erp-indice-titulo {
    margin: 0 0 8px;
    font: 600 12px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #0FD4A8;
}
.zs-erp-indice ol { list-style: none; margin: 0; padding: 0; }
.zs-erp-indice ol li { margin: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.zs-erp-indice ol li:first-child { border-top: 0; }
.zs-erp-indice ol a {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 1px 10px;
    padding: 9px 0;
    text-decoration: none;
    color: #FFFFFF;
}
.zs-erp-indice ol a span { grid-row: 1 / 3; font: 500 12px/1.7 "JetBrains Mono", ui-monospace, Consolas, monospace; color: #0FD4A8; }
.zs-erp-indice ol a b { font: 600 15px/1.3 "Sora", "Segoe UI", sans-serif; color: #FFFFFF; transition: color 150ms ease; }
.zs-erp-indice ol a small { font-size: 13px; line-height: 1.4; color: #B4BCDB; }
@media (hover: hover) and (pointer: fine) {
    .zs-erp-indice ol a:hover b { color: #0FD4A8; }
}
.zs-erp-indice ol a:focus-visible { outline: 2px solid #0FD4A8; outline-offset: 2px; border-radius: 6px; box-shadow: none; }

/* ---------- Base de cada diagrama ---------- */
.zs-dg {
    --s-bg: #F4F6FB; --s-card: #FFFFFF; --s-ink: #111A3D; --s-muted: #4A5578; --s-line: #E3E8F3;
    --s-accent: #0A7F65; --s-mint: #0FD4A8; --s-off: #8A93B0; --s-dash: #C4CBDF;
    --k-bg: #0E1533; --k-card: #1B2552; --k-muted: #8F9AC4;
    --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --disp: "Sora", "Segoe UI", system-ui, sans-serif;
    --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    background: var(--s-bg);
    border-radius: 18px;
    padding: clamp(16px, 3vw, 32px);
    color: var(--s-ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.zs-dg *, .zs-dg *::before, .zs-dg *::after { box-sizing: border-box; }
.zs-dg p, .zs-dg h3, .zs-dg ul, .zs-dg ol, .zs-dg dl, .zs-dg dt, .zs-dg dd, .zs-dg li, .zs-dg table, .zs-dg figure { margin: 0; }
.zs-dg ul, .zs-dg ol { padding: 0; list-style: none; }

.zs-dg .zs-dg-barra {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    font: 500 12px/1.3 var(--mono); color: var(--s-muted);
}
.zs-dg button.zs-dg-otra {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 13px/1 var(--body); text-transform: none; white-space: nowrap;
    color: var(--s-ink); background: #FFFFFF;
    border: 1px solid var(--s-line); border-radius: 999px; padding: 9px 14px 9px 12px;
    cursor: pointer;
    transition: border-color 150ms ease, transform 160ms var(--ease);
}
.zs-dg button.zs-dg-otra::before {
    content: ""; width: 0; height: 0;
    border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
    .zs-dg button.zs-dg-otra:hover { border-color: var(--s-accent); background: #FFFFFF; color: var(--s-ink); }
}
.zs-dg button.zs-dg-otra:active { transform: scale(.97); }
.zs-dg button:focus-visible { outline: 3px solid var(--s-mint); outline-offset: 2px; box-shadow: none; }

/* Piezas comunes */
.zs-dg .dg-card {
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: 14px;
    padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.zs-dg .dg-tag { font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--s-accent); }
.zs-dg .dg-card h3 { font: 700 16.5px/1.28 var(--disp); color: var(--s-ink); text-wrap: balance; }
.zs-dg .dg-card p { font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.zs-dg kbd {
    font: 500 12px/1 var(--mono); color: var(--s-ink); background: #F1F3F9;
    border: 1px solid #D3D9E8; border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px;
}
.zs-dg .dg-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--s-muted); }
.zs-dg .dg-doc {
    align-self: flex-start; font: 500 12px/1.3 var(--mono); color: var(--s-ink);
    background: #F1F3F9; border-radius: 6px; padding: 5px 8px; overflow-wrap: anywhere;
}
.zs-dg .dg-pill {
    align-self: flex-start; font: 600 12px/1 var(--body); border-radius: 999px; padding: 5px 10px; white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}
.zs-dg .dg-pill[data-color="gris"]  { background: #EEF0F5; color: #4A5578; }
.zs-dg .dg-pill[data-color="azul"]  { background: #E6EEFF; color: #2457C5; }
.zs-dg .dg-pill[data-color="verde"] { background: #DDF5EC; color: #0A7F65; }
.zs-dg .dg-pill[data-color="ambar"] { background: #FFF1D6; color: #8A5A00; }
.zs-dg .dg-pill[data-color="rojo"]  { background: #FDE8E8; color: #B42318; }
.zs-dg .dg-num { font-variant-numeric: tabular-nums; }

/* ---------- Ventas y caja: flujo de una venta ---------- */
.zs-dg .dg-flow { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: stretch; }
.zs-dg .dg-conn { align-self: center; height: 2px; background: var(--s-accent); position: relative; margin-inline: 5px; }
.zs-dg .dg-conn::after {
    content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px;
    border-top: 2px solid var(--s-accent); border-right: 2px solid var(--s-accent);
    transform: translateY(-50%) rotate(45deg);
}
.zs-dg .dg-cuadre { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.zs-dg .dg-cuadre dt { color: var(--s-muted); }
.zs-dg .dg-cuadre dd { text-align: right; font-weight: 600; color: var(--s-ink); }
.zs-dg .dg-cuadre .dg-ok-txt { color: var(--s-accent); }
.zs-dg .dg-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.zs-dg .dg-bars li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12.5px; color: var(--s-muted); }
.zs-dg .dg-bars li span:last-of-type { font-weight: 600; color: var(--s-ink); }
.zs-dg .dg-bars li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #E9EDF6; position: relative; overflow: hidden; }
.zs-dg .dg-bars li i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--v); background: var(--s-mint); border-radius: 3px; }

/* ---------- Modulos: nucleo y modulos ---------- */
.zs-dg .dg-hub { display: grid; grid-template-columns: 1fr 34px minmax(210px, 1.05fr) 34px 1fr; row-gap: 12px; align-items: center; }
.zs-dg .dg-r1 { grid-row: 1; } .zs-dg .dg-r2 { grid-row: 2; } .zs-dg .dg-r3 { grid-row: 3; }
.zs-dg .dg-c1 { grid-column: 1; } .zs-dg .dg-c2 { grid-column: 2; } .zs-dg .dg-c4 { grid-column: 4; } .zs-dg .dg-c5 { grid-column: 5; }
.zs-dg .dg-core {
    grid-column: 3; grid-row: 1 / 4; align-self: stretch;
    background: var(--s-ink); color: #FFFFFF; border-radius: 18px; padding: 24px 22px;
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.zs-dg .dg-core .dg-tag { color: var(--s-mint); }
.zs-dg .dg-core h3 { font: 700 18px/1.3 var(--disp); color: #FFFFFF; text-wrap: balance; }
.zs-dg .dg-core p { font-size: 13.5px; line-height: 1.5; color: #B9C1DC; }
.zs-dg .dg-core .dg-cuenta { font: 600 14px/1.2 var(--body); color: #FFFFFF; }
.zs-dg .dg-core .dg-cuenta b { color: var(--s-mint); font-weight: 700; }
.zs-dg .dg-hconn { height: 2px; background: var(--s-accent); transition: background-color 150ms ease; }
.zs-dg .dg-hconn.dg-off { background: repeating-linear-gradient(90deg, var(--s-dash) 0 5px, transparent 5px 9px); }
.zs-dg button.dg-mod {
    display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; width: 100%;
    font: inherit; text-align: left; text-transform: none; white-space: normal; cursor: pointer;
    background: var(--s-card); color: var(--s-ink);
    border: 1px solid var(--s-accent); border-radius: 14px; padding: 12px 14px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease);
}
.zs-dg button.dg-mod strong { font: 700 15px/1.25 var(--disp); }
.zs-dg button.dg-mod small { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--s-muted); }
.zs-dg button.dg-mod .dg-est { font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--s-accent); align-self: center; }
.zs-dg button.dg-mod[aria-pressed="false"] { background: transparent; border-style: dashed; border-color: var(--s-dash); color: var(--s-off); }
.zs-dg button.dg-mod[aria-pressed="false"] small,
.zs-dg button.dg-mod[aria-pressed="false"] .dg-est { color: var(--s-off); }
@media (hover: hover) and (pointer: fine) {
    .zs-dg button.dg-mod:hover { border-color: var(--s-ink); background: var(--s-card); color: var(--s-ink); }
    .zs-dg button.dg-mod[aria-pressed="false"]:hover { background: transparent; color: var(--s-off); }
}
.zs-dg button.dg-mod:active { transform: scale(.97); }

/* ---------- Todo conectado: ciclo completo ---------- */
.zs-dg .dg-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding-top: 30px; }
.zs-dg .dg-rail { position: absolute; left: 10%; right: 10%; top: 10px; height: 3px; border-radius: 2px; background: var(--s-line); }
.zs-dg .dg-rail-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--s-accent); }
.zs-dg .dg-stn { position: relative; }
.zs-dg .dg-stn::before {
    content: ""; position: absolute; top: -26px; left: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: var(--s-card); border: 3px solid var(--s-accent); transform: translateX(-50%);
}
.zs-dg .dg-margen { font: 700 22px/1 var(--disp); color: var(--s-accent); }

/* ---------- Panaderia: produccion y lotes ---------- */
.zs-dg .dg-prod { display: grid; grid-template-columns: minmax(250px, .85fr) 1.4fr; gap: 28px; align-items: start; }
.zs-dg .dg-costeo { padding: 20px; gap: 12px; }
.zs-dg .dg-cost { display: flex; flex-direction: column; }
.zs-dg .dg-cost div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--s-line); font-size: 14px; }
.zs-dg .dg-cost dt { color: var(--s-muted); }
.zs-dg .dg-cost dd { font-weight: 600; color: var(--s-ink); }
.zs-dg .dg-cost .dg-total { border-bottom: 0; border-top: 2px solid var(--s-ink); margin-top: 4px; padding-top: 10px; font-size: 15px; }
.zs-dg .dg-cost .dg-total dt { color: var(--s-ink); font-weight: 600; }
.zs-dg .dg-cost-foot { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; color: var(--s-muted); background: #F1F3F9; border-radius: 10px; padding: 10px 12px; }
.zs-dg .dg-cost-foot b { color: var(--s-accent); font-size: 15px; }
.zs-dg .dg-steps { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 30px; }
.zs-dg .dg-steps-line { position: absolute; left: 8px; top: 22px; bottom: 22px; width: 3px; background: var(--s-accent); border-radius: 2px; }
.zs-dg .dg-step { position: relative; }
.zs-dg .dg-step::before {
    content: ""; position: absolute; left: -29px; top: 18px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--s-card); border: 3px solid var(--s-accent);
}
.zs-dg .dg-traza { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.zs-dg .dg-traza li { display: flex; justify-content: space-between; gap: 10px; color: var(--s-muted); border-top: 1px solid var(--s-line); padding-top: 5px; }
.zs-dg .dg-traza li span:first-child { color: var(--s-ink); font-weight: 500; }

/* ---------- Restaurante: comandas en pantalla ---------- */
.zs-dg .dg-kds { display: grid; grid-template-columns: minmax(230px, .8fr) 2fr; gap: 20px; align-items: start; }
.zs-dg .dg-mesa-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zs-dg .dg-pedido { display: flex; flex-direction: column; }
.zs-dg .dg-pedido li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 0; border-top: 1px solid var(--s-line); font-size: 14px; color: var(--s-ink); }
.zs-dg .dg-pedido .dg-dest { font: 500 11.5px/1.2 var(--mono); color: var(--s-muted); grid-column: 1; }
.zs-dg .dg-pedido .dg-ok { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.zs-dg .dg-mesa .dg-mesa-pie { font-size: 13px; }
.zs-dg .dg-pantallas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zs-dg .dg-pantalla { background: var(--k-bg); border-radius: 14px; padding: 12px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; }
.zs-dg .dg-pantalla header {
    display: flex; justify-content: space-between; align-items: center;
    font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--k-muted);
}
.zs-dg .dg-pantalla header .dg-n { font: 500 12px/1 var(--mono); color: var(--s-mint); letter-spacing: 0; }
.zs-dg .dg-ticket { background: var(--k-card); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; color: #FFFFFF; }
.zs-dg .dg-t-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zs-dg .dg-t-top b { font: 700 15px/1.1 var(--disp); }
.zs-dg .dg-t-top span { font: 500 12px/1.2 var(--mono); color: var(--s-mint); }
.zs-dg .dg-ticket p { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #FFFFFF; }
.zs-dg .dg-t-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zs-dg .dg-impresa { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--k-muted); }
.zs-dg button.dg-listo {
    font: 700 13px/1 var(--body); text-transform: none; white-space: nowrap; cursor: pointer;
    background: var(--s-mint); color: var(--k-bg); border: 0; border-radius: 8px; padding: 9px 14px;
    transition: transform 160ms var(--ease), filter 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .zs-dg button.dg-listo:hover { background: var(--s-mint); color: var(--k-bg); filter: brightness(1.08); }
}
.zs-dg button.dg-listo:active { transform: scale(.97); }
.zs-dg button.dg-listo:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.zs-dg .dg-vacia { margin: auto 0; text-align: center; font-size: 13px; color: var(--k-muted); }
.zs-dg .dg-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.zs-dg .dg-mini li { background: var(--s-card); border: 1px solid var(--s-line); border-radius: 999px; padding: 7px 12px; color: var(--s-ink); }
.zs-dg .dg-mini li.dg-flecha { background: none; border: 0; padding: 0; color: var(--s-accent); }

/* ---------- Etiquetado: etiqueta con sellos ---------- */
.zs-dg .dg-etq { display: grid; grid-template-columns: 1fr minmax(300px, 1.1fr); gap: 32px; align-items: center; }
.zs-dg .dg-pasos { counter-reset: dgpaso; display: flex; flex-direction: column; gap: 16px; }
.zs-dg .dg-pasos li { counter-increment: dgpaso; display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; }
.zs-dg .dg-pasos li::before {
    content: counter(dgpaso); grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%;
    background: var(--s-ink); color: #FFFFFF; display: grid; place-items: center; font: 700 13px/1 var(--disp);
}
.zs-dg .dg-pasos strong { font: 700 15px/1.3 var(--disp); color: var(--s-ink); }
.zs-dg .dg-pasos span { font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.zs-dg .dg-etiqueta {
    background: #FFFFFF; border: 2px solid #111111; border-radius: 6px; padding: 16px; color: #111111;
    display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(17, 26, 61, .10);
}
.zs-dg .dg-etiqueta header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid #111111; padding-bottom: 8px; }
.zs-dg .dg-etiqueta h3 { font: 700 21px/1.1 var(--disp); color: #111111; }
.zs-dg .dg-etiqueta header span { font-size: 12px; }
.zs-dg .dg-sellos { display: flex; gap: 10px; flex-wrap: wrap; }
.zs-dg .dg-sello {
    position: relative; width: 92px; height: 92px; clip-path: var(--oct); background: #111111; color: #FFFFFF;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px;
}
.zs-dg .dg-sello::before { content: ""; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; background: #FFFFFF; clip-path: var(--oct); }
.zs-dg .dg-sello::after { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; background: #111111; clip-path: var(--oct); }
.zs-dg .dg-sello > * { position: relative; z-index: 1; }
.zs-dg .dg-sello span { font: 700 11px/1 var(--body); letter-spacing: .03em; }
.zs-dg .dg-sello b { font: 700 13px/1.05 var(--body); }
.zs-dg .dg-sello small { font: 500 6.5px/1.1 var(--body); margin-top: 3px; letter-spacing: .02em; }
.zs-dg table.dg-nutri { width: 100%; border-collapse: collapse; font-size: 12.5px; background: transparent; margin: 0; }
.zs-dg table.dg-nutri caption { text-align: left; font-weight: 700; font-size: 13px; padding-bottom: 4px; color: #111111; }
.zs-dg table.dg-nutri th,
.zs-dg table.dg-nutri td {
    padding: 4px 6px; border: 0; border-top: 1px solid #111111; line-height: 1.4;
    text-align: right; font-weight: 500; color: #111111; background: transparent; vertical-align: middle;
}
.zs-dg table.dg-nutri th:first-child, .zs-dg table.dg-nutri td:first-child { text-align: left; }
.zs-dg table.dg-nutri thead th { font-weight: 700; border-top: 2px solid #111111; }
.zs-dg .dg-etiqueta p { font-size: 12.5px; line-height: 1.45; color: #111111; }
.zs-dg .dg-etiqueta .dg-lote { font: 500 11.5px/1.4 var(--mono); border-top: 2px solid #111111; padding-top: 8px; }

/* ---------- Cobranza: de la cotizacion al pago ---------- */
.zs-dg .dg-cobro { display: grid; grid-template-columns: 1fr 34px 1.25fr; align-items: center; }
.zs-dg .dg-doccard { padding: 18px; }
.zs-dg .dg-doc-cuerpo { display: flex; flex-direction: column; gap: 8px; }
.zs-dg .dg-doctop { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 23px; }
.zs-dg .dg-doccard h3.dg-docnum { font: 500 20px/1.2 var(--mono); }
.zs-dg .dg-doccard .dg-cuadre { font-size: 13.5px; }
.zs-dg table.dg-cxc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; margin: 0; }
.zs-dg table.dg-cxc-tabla td {
    padding: 8px 0; border: 0; border-top: 1px solid var(--s-line); line-height: 1.4;
    color: var(--s-ink); background: transparent; vertical-align: middle;
}
.zs-dg table.dg-cxc-tabla td:first-child { font: 500 12.5px/1.2 var(--mono); }
.zs-dg table.dg-cxc-tabla td:nth-child(2) { color: var(--s-muted); padding-left: 10px; padding-right: 10px; }
.zs-dg table.dg-cxc-tabla td:last-child { text-align: right; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 900px) {
    .zs-dg .dg-flow { grid-template-columns: 1fr; }
    .zs-dg .dg-conn { width: 2px; height: 22px; justify-self: center; margin: 5px 0; }
    .zs-dg .dg-conn::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
    .zs-dg .dg-track { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; }
    .zs-dg .dg-rail { left: 9px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
    .zs-dg .dg-stn::before { top: 18px; left: -31px; transform: none; }
    .zs-dg .dg-prod, .zs-dg .dg-kds, .zs-dg .dg-etq, .zs-dg .dg-cobro { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .zs-dg .dg-hub { grid-template-columns: 1fr 1fr; gap: 10px; }
    .zs-dg .dg-hub > * { grid-row: auto; grid-column: auto; }
    .zs-dg .dg-core { grid-column: 1 / -1; grid-row: auto; order: -1; }
    .zs-dg .dg-hconn { display: none; }
}
@media (max-width: 620px) {
    .zs-dg .dg-pantallas { grid-template-columns: 1fr; }
    .zs-dg .dg-pantalla { min-height: 0; }
}
@media (max-width: 420px) {
    .zs-dg .dg-hub { grid-template-columns: 1fr; }
}