/* Diseño del mockup del módulo 1: pantallas del grupo «produccion» (D175).
   Los inicios de Producción, Despacho y el conductor (mockups 12, 17 y 19), el plan (14 y 15),
   «En la tienda» (21) y la cadena de un pedido (29). */

/* ── Los inicios: el saludo con el anillo del día ──
   En el celular va en el encabezado oscuro (en vez del título); en el computador, en una tarjeta oscura arriba. */
.barra-movil:has(> .prod-saludo) .barra-titulo { display: none; }
.barra-movil:has(> .prod-saludo) { padding-bottom: 40px; }
.prod-saludo { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.prod-saludo-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.prod-saludo-tx small { font-size: 14px; color: #b6bec6; margin-bottom: 2px; }
.prod-saludo-tx b { font-family: var(--letra-titulos); font-weight: 600; font-size: 24px; line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.prod-saludo-tx span { font-size: 14px; color: #b6bec6; margin-top: 2px; }
.prod-anillo-caja { flex: none; display: flex; flex-direction: column; align-items: center; }
.prod-anillo { position: relative; width: 64px; height: 64px; }
.prod-anillo svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.prod-anillo .prod-anillo-lleno { stroke: var(--marca); }
.prod-anillo b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--letra-titulos);
            font-weight: 600; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.prod-anillo-caja small { font-size: 11px; color: #b6bec6; margin-top: 4px; white-space: nowrap; }
.prod-saludo-pc { display: none; }

/* El cuerpo de los inicios: en el celular, una columna; en el computador, dos */
.prod-cols, .prod-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prod-col > h2, .prod-col > .seccion-t, .prod-col > h2.dia-titulo:first-of-type { margin: 0; }
.prod-col > .seccion-t h2, .prod-col > h2 { font-size: 15.5px; }
.prod-col > .seccion-t { margin-bottom: -4px; }
.prod-col > h2.dia-titulo { margin-bottom: -4px; }
.prod-col > p { margin: 0; }

/* «Ahora»: lo primero que hay que hacer (la .ahora del mockup) */
.aviso-cadena.prod-ahora { display: block; margin: 0; padding: 0; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
                           border-radius: 20px; box-shadow: var(--sombra2); overflow: hidden; }
.prod-ahora-top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 14px; }
.prod-ahora-top h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.prod-ahora-top p { margin: 0; }
.prod-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
        color: var(--alerta); }
.prod-vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--alerta); box-shadow: 0 0 0 4px var(--alerta-suave); flex: none; }
.prod-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.prod-cats span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); white-space: nowrap; }
.prod-cats b { font-variant-numeric: tabular-nums; }
.prod-ahora-accion { padding: 12px 16px 16px; border-top: 1px solid var(--linea); background: var(--gris-cab); }
.prod-ahora-accion .boton, .aviso-cadena .prod-ahora-accion a.boton { margin: 0; min-height: 52px; font-size: 16px; color: var(--primario-texto); white-space: normal; }
.prod-listo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; border-radius: var(--radio);
              background: var(--ok-suave); border: 1px solid #c4e2cf; }
.prod-listo h2 { margin: 0; font-size: 18px; line-height: 1.3; }

/* «Tu día»: la agenda con su línea */
.prod-agenda-card { padding: 18px 16px; }
.prod-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prod-agenda .a { display: grid; grid-template-columns: 60px 20px minmax(0, 1fr); column-gap: 6px; position: relative; padding-bottom: 16px; }
.prod-agenda .a:last-child { padding-bottom: 0; }
.prod-agenda .a::before { content: ""; position: absolute; left: 75px; top: 20px; bottom: 0; width: 2px; background: var(--linea); }
.prod-agenda .a:last-child::before { display: none; }
.prod-agenda .h { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 1px; text-align: right; color: var(--suave);
             white-space: nowrap; }
.prod-agenda .pt { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea-fuerte); background: var(--papel); display: flex;
              align-items: center; justify-content: center; color: #fff; position: relative; z-index: 1; }
.prod-agenda .pt .ico { width: 12px; height: 12px; stroke-width: 3; }
.prod-agenda .a.hecho .pt { background: var(--ok); border-color: var(--ok); }
.prod-agenda .a.ahora-a .pt { border-color: var(--alerta); box-shadow: 0 0 0 4px var(--alerta-suave); }
.prod-agenda .a.ahora-a .pt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); }
.prod-agenda .a.ahora-a .h { color: var(--alerta); }
.prod-agenda .tx b { display: block; font-size: 14.5px; line-height: 1.3; }
.prod-agenda .tx small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--suave); }
.prod-agenda a.tx { text-decoration: none; color: var(--tinta); }
.prod-agenda a.tx:hover b { text-decoration: underline; }

/* Los pedidos de Producción de cada día: una tarjeta con una fila por tienda y su camino */
.pedidos-prod { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
                overflow: hidden; }
.pedidos-prod > li:first-child { border-top: 0; }
.pedidos-prod .prod-etapas-rot { display: grid; padding: 10px 16px 8px; font-size: 10.5px; color: var(--tenue); white-space: nowrap; }
.prod-etapas-rot span { text-align: center; } .prod-etapas-rot span:first-child { text-align: left; } .prod-etapas-rot span:last-child { text-align: right; }
.pedidos-prod .pedido-prod, .pedidos-prod .pedido-prod.por-firmar { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;
  border: 0; border-top: 1px solid var(--linea); border-radius: 0; box-shadow: none; background: none; }
.pedido-prod-cab { gap: 4px 8px; }
.pedido-prod-cab > .estado { margin-left: auto; }
.pedido-prod.por-firmar .pedido-prod-cab > .estado.gris { background: var(--g800); color: #fff; }
.prod-etapas { display: flex; align-items: center; padding: 2px; }
.prod-etapas .e { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-fuerte); flex: none; }
.prod-etapas .e.h { background: var(--ok); }
.prod-etapas .e.a { background: var(--papel); box-shadow: 0 0 0 2px var(--g800); }
.prod-etapas .l { height: 2px; flex: 1; min-width: 14px; background: var(--linea-fuerte); }
.prod-etapas .l.h { background: var(--ok); }
.pedido-prod-pie { gap: 6px 10px; }
.prod-shopify { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--suave); min-width: 0; }
.prod-shopify .estado:not(.fallo) { padding: 0; background: none; color: var(--suave); font-weight: 400; font-size: 12px; white-space: normal; }
.prod-shopify .estado:not(.fallo)::before { display: none; }
.pedidos-prod .boton.ancho-auto { min-height: 34px; padding: 6px 14px; font-size: 13.5px; border-radius: 10px; }
/* En el celular no caben el estado de Shopify, los enlaces y el botón: el botón va a la derecha y los enlaces abajo */
@media (max-width: 899px) {
  .pedido-prod-pie:has(> .boton) > .prod-shopify { flex: 1 1 0; }
  .pedido-prod-pie:has(> .boton) > .boton { order: 2; margin-left: auto; }
  .pedido-prod-pie:has(> .boton) > .chico { order: 3; flex-basis: 100%; text-align: right; }
}

/* Los inicios de Despacho y del conductor (mockups 17 y 19) */
.prod-tareas { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
               box-shadow: var(--sombra); overflow: hidden; display: block; }
.prod-tareas li + li { border-top: 1px solid var(--linea); }
.prod-tareas li a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 0; border-radius: 0; box-shadow: none;
                    background: none; color: var(--tinta); text-decoration: none; }
.prod-tareas li a:hover { background: var(--gris-cab); border: 0; }
.prod-tareas .tarea-texto { flex: 1; min-width: 0; line-height: 1.35; }
.prod-tareas .tarea-texto .chico { display: block; font-size: 12.5px; }
.prod-tareas .icono-circ { width: 44px; height: 44px; }
.prod-tareas .icono-circ.marca { background: var(--marca-suave); color: var(--marca-fuerte); }
.prod-tareas .estado { flex: none; }
.prod-tareas .suave.chico:last-child { flex: none; }
.prod-salieron li a::after { content: ""; width: 7px; height: 7px; border: solid var(--tenue); border-width: 2px 2px 0 0; transform: rotate(45deg); flex: none;
                        margin-left: 2px; }
.prod-banda { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 16px; border-radius: var(--radio-chico); font-size: 14px;
              background: var(--papel); color: var(--suave); border: 1px solid var(--linea); }
.prod-banda .ico { margin-top: 2px; }

@media (min-width: 900px) {
  .prod-saludo-pc { display: block; margin: 0 0 18px; padding: 20px 24px; border-radius: 20px; background: var(--g800); color: #fff; }
  main:has(> .prod-saludo-pc) > .titulo-pagina { display: none; }
  /* El saludo del computador ya va arriba: la copia de las cifras del encabezado del celular sobra (se veían dos). */
  main:has(> .prod-saludo-pc) > .cifras-pc { display: none; }
  .prod-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .prod-agenda .a { grid-template-columns: 50px 20px minmax(0, 1fr); column-gap: 10px; }
  .prod-agenda .a::before { left: 69px; }
  .prod-agenda .h { font-size: 13px; }
  .prod-agenda-card { padding: 18px 20px; }
  .prod-ahora-top { padding: 16px 16px 14px; }
}

/* ── La cadena de un pedido (mockup 29) ── */
.prod-detalle { display: flex; flex-direction: column; gap: 14px; }
.prod-detalle > p { margin: 0; }
.prod-detalle-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.prod-detalle-tx { flex: 1 1 100%; }
.prod-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px 8px 12px; border-radius: var(--radio-chico);
               border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); font-weight: 700; text-decoration: none; }
.prod-volver:hover { background: var(--fondo); color: var(--tinta); }
.prod-detalle .cadena-pasos { margin: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
                              overflow: hidden; }
.prod-detalle .cadena-pasos > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-content: start; gap: 6px 10px; margin: 0;
                                   padding: 16px; border: 0; border-top: 1px solid var(--linea); }
.prod-detalle .cadena-pasos > li:first-child { border-top: 0; }
.prod-detalle .cadena-pasos > li::before { display: none; }
.prod-detalle .cadena-pasos > li > :not(.prod-paso-marca, .eyebrow) { grid-column: 1 / -1; }
.prod-paso-marca { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                   border: 2px solid var(--linea-fuerte); background: var(--papel); color: #fff; }
.prod-paso-marca .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.cadena-pasos > li.hecho .prod-paso-marca { background: var(--ok); border-color: var(--ok); }
.cadena-pasos > li.con-dif .prod-paso-marca { background: var(--alerta); border-color: var(--alerta); }
.prod-detalle .cadena-pasos .eyebrow { align-self: center; }
.prod-detalle .cadena-pasos .paso-cab { display: flex; flex-direction: column; gap: 4px; }
.prod-detalle .cadena-pasos .paso-cab strong { font-size: 15.5px; line-height: 1.35; }
.prod-detalle .cadena-pasos .difs { margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 13.5px; }
.prod-detalle .cadena-pasos .ok.chico { color: var(--tinta); }
.prod-sin-conteo { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: var(--radio-chico);
                   background: var(--fondo); color: var(--suave); }
.prod-sin-conteo .ico { margin-top: 2px; }
.prod-detalle-cols { display: grid; gap: 14px; align-items: start; }
.prod-detalle-cols > .tarjeta { padding: 0; overflow: hidden; }
.prod-detalle-cols h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 20px; font-size: 15.5px; border-bottom: 1px solid var(--linea); }
.prod-difs .tabla-envuelta { border: 0; border-radius: 0; box-shadow: none; }
.prod-difs .tabla td:first-child { font-weight: 700; }
.prod-difs b.baja { color: var(--error); } .prod-difs b.sube { color: var(--sube); }
.prod-en-shopify h2 { border-bottom: 0; padding-bottom: 6px; }
.prod-en-shopify .aviso-linea { margin: 0 20px 18px; padding: 10px 14px; font-size: 14px; }
@media (max-width: 899px) {
  /* En el celular, cada diferencia es un bloque: el producto arriba y lo demás con su rótulo */
  .prod-difs .tabla thead { display: none; }
  .prod-difs .tabla, .prod-difs .tabla tbody { display: block; }
  .prod-difs .tabla tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 8px 10px; padding: 14px 16px;
                         border-top: 1px solid var(--linea); }
  .prod-difs .tabla tr:first-child { border-top: 0; }
  .prod-difs .tabla td { display: block; padding: 0; border: 0; text-align: left; }
  .prod-difs .tabla td:first-child, .prod-difs .tabla td:nth-child(2) { grid-column: 1 / -1; }
  .prod-difs .tabla td[data-rot]::before { content: attr(data-rot); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700;
                                           letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
}
@media (min-width: 900px) {
  main:has(> .prod-detalle) > .titulo-pagina { margin-bottom: 4px; }
  .prod-detalle-tx { flex: 1 1 auto; }
  .prod-detalle .cadena-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .prod-detalle .cadena-pasos > li { border-top: 0; border-left: 1px solid var(--linea); padding: 18px 20px; }
  .prod-detalle .cadena-pasos > li:first-child { border-left: 0; }
  .prod-detalle-cols:has(> :nth-child(2)) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ── En la tienda (mockup 21) ── */
.prod-cab-pc { display: none; }
.prod-entrega { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.prod-entrega > p, .prod-entrega > .tarjeta-accion { margin: 0; }
.prod-entrega .tarjeta-accion { padding: 18px 20px; border-radius: 20px; }
.prod-accion-cab { display: flex; align-items: center; gap: 12px; }
.prod-accion-cab strong { font-size: 16.5px; line-height: 1.3; }
.prod-num { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
            background: var(--gris); color: var(--tinta); font-weight: 700; font-size: 14px; }
.prod-num.marca { background: var(--marca); color: var(--g900); }
.prod-num .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.prod-entrega .tarjeta-accion p { margin: 10px 0 12px; }
.prod-entrega .tarjeta-accion .boton.claro { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-fuerte); min-height: 52px; }
.prod-entrega .tarjeta-accion .boton.claro:hover { background: var(--fondo); }
.prod-entrega .form-sin-conteo .foto-boton { display: flex; margin: 12px 0 6px; font-weight: 700; }
.cifras.prod-cifras-entrega { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.25fr); grid-auto-flow: row; }
.prod-cifras-entrega b { white-space: nowrap; }
.prod-entrega .form-sin-conteo label:not(.foto-boton) { margin: 14px 0 10px; }
.prod-entrega .prod-clave { font-size: 22px; letter-spacing: .5em; text-align: center; padding: 12px; min-height: 54px; }
.prod-entrega .prod-clave:focus { outline: none; border-color: var(--marca-fuerte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 40%, transparent); }
.prod-entrega .boton.prod-oscuro { background: var(--primario); min-height: 52px; font-size: 16px; }
.prod-entrega .boton.prod-oscuro:hover { background: var(--primario-hover); }
.prod-entrega .fila-form input { flex: 1 1 160px; min-width: 0; font-size: 18px; letter-spacing: .3em; text-align: center; min-height: 48px; }
.prod-entrega .fila-form .boton { flex: 1 1 200px; width: auto; }
.prod-entrega .difs { margin: 10px 0 0; padding-left: 18px; color: var(--alerta); font-weight: 700; font-size: 14px; }
.prod-volver-a { font-size: 14px; }
@media (min-width: 900px) {
  main:has(> .prod-cab-pc) > :is(.titulo-pagina, .sub-pagina) { display: none; }
  .prod-cab-pc { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 0 16px; padding: 20px 24px; border-radius: 20px;
                 background: var(--g800); color: #fff; }
  .prod-cab-pc-t { display: flex; align-items: center; gap: 12px; }
  .prod-cab-pc-t > div { flex: 1; min-width: 0; }
  .prod-cab-pc-t b { display: block; font-family: var(--letra-titulos); font-weight: 600; font-size: 24px; line-height: 1.2; }
  .prod-cab-pc-t span { display: block; font-size: 13.5px; color: #b6bec6; }
  .prod-cab-pc, .prod-entrega { margin-left: auto; margin-right: auto; width: 100%; }
}

/* ── Los planes (mockup 14): una tarjeta por tienda ── */
.prod-plan-intro { margin: 0 0 16px; max-width: 640px; }
h2.prod-plan-taller { font-size: 15.5px; margin: 22px 0 10px; }
.lista-links.prod-planes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.prod-planes li a { gap: 14px; justify-content: flex-start; padding: 18px 20px; border-radius: var(--radio); font-weight: 400; }
.prod-planes li a::after { display: none; }
.prod-planes .icono-circ { width: 44px; height: 44px; border-radius: 14px; background: var(--marca-suave); color: var(--marca-fuerte); }
.prod-plan-nombre { flex: 1; min-width: 0; font-family: var(--letra-titulos); font-weight: 600; font-size: 16px; line-height: 1.3; }
.prod-plan-abrir { flex: none; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--linea-fuerte); background: var(--papel);
                   font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.prod-planes li a:hover .prod-plan-abrir { border-color: var(--tinta); }
@media (min-width: 900px) { .prod-plan-intro { margin-top: -12px; } }

/* ── El plan de una tienda (mockup 15) ── */
.prod-plan-revisar { margin: 0 0 14px; }
.prod-plan-sub { margin: 0 0 14px; font-size: 14.5px; }
.prod-plan-estado { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radio-chico);
                    font-size: 14px; background: var(--marca-suave); color: color-mix(in srgb, var(--marca-fuerte) 65%, #000);
                    border: 1px solid color-mix(in srgb, var(--marca) 55%, transparent); }
.prod-plan-estado .ico { margin-top: 2px; }
.prod-plan { display: flex; flex-direction: column; gap: 14px; }
.prod-plan-form { display: contents; }
.prod-plan-tabla .tabla th, .prod-plan-tabla .tabla td { padding: 8px 6px; }
.prod-plan-tabla .tabla :is(th, td):first-child { padding-left: 16px; position: sticky; left: 0; z-index: 1; background: var(--papel); }
.prod-plan-tabla .tabla th:first-child, .prod-plan-tabla .tabla .fila-cat td { background: var(--gris-cab); }
.prod-plan-tabla .tabla :is(th, td):last-child { padding-right: 16px; }
.prod-plan-tabla .tabla td:first-child { min-width: 130px; line-height: 1.3; }
.prod-plan-tabla .fila-cat td { padding-top: 10px; padding-bottom: 10px; }
.prod-plan-tabla .tabla.plan input, .prod-celda { display: inline-block; width: 48px; padding: 6px 0; border-radius: 8px; border: 1px solid var(--linea-fuerte);
  background: var(--papel); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 400; text-align: center; font-variant-numeric: tabular-nums; }
.prod-plan-tabla .tabla.plan input.cero, .prod-celda.cero { color: var(--tenue); background: var(--fondo); border-color: var(--linea); }
.prod-plan-tabla .tabla.plan input.cambio { border-color: var(--marca-fuerte); background: var(--marca-suave); font-weight: 700; }
.prod-plan-tabla .tabla.plan input:focus { outline: none; border-color: var(--marca-fuerte); background: var(--papel);
                                           box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 40%, transparent); }
.prod-plan-tabla td.prod-semana { font-weight: 700; text-align: right; padding-left: 12px; }
.prod-plan-rige, .prod-plan-versiones { padding: 18px 20px; }
.prod-plan-rige { display: flex; flex-direction: column; gap: 8px; }
.prod-plan-rige label { font-family: var(--letra-titulos); font-weight: 600; font-size: 15.5px; }
.prod-plan-rige input { font: inherit; font-size: 16px; padding: 12px 14px; color: var(--tinta); background: var(--papel);
                        border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); }
.prod-plan-rige small { font-size: 12.5px; min-height: 1em; }
.prod-plan-rige small:empty { display: none; }
.prod-plan-rige .boton { margin-top: 4px; }
.prod-plan-versiones h2 { margin: 0 0 14px; font-size: 15.5px; }
.prod-tl { list-style: none; margin: 0; padding: 0; }
.prod-tl li { position: relative; padding: 0 0 18px 30px; }
.prod-tl li:last-child { padding-bottom: 0; }
.prod-tl li::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--linea-fuerte); }
.prod-tl li:last-child::before { display: none; }
.prod-tl .pt { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--papel);
               border: 2px solid var(--linea-fuerte); display: flex; align-items: center; justify-content: center; color: #fff; }
.prod-tl .pt .ico { width: 12px; height: 12px; stroke-width: 3; }
.prod-tl li.hecho .pt { background: var(--ok); border-color: var(--ok); }
.prod-tl-cab { display: flex; justify-content: space-between; gap: 8px; }
.prod-tl-cab b { font-size: 14.5px; }
.prod-tl-cab .chico { flex: none; white-space: nowrap; }
.prod-tl small { display: block; font-size: 12.5px; }
.prod-plan + .prod-volver-a { margin-top: 16px; }
@media (min-width: 900px) {
  .prod-plan { display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-rows: auto 1fr; gap: 16px; align-items: start; }
  .prod-plan-tabla { grid-column: 1; grid-row: 1 / span 2; }
  .prod-plan-rige { grid-column: 2; grid-row: 1; }
  .prod-plan-versiones { grid-column: 2; grid-row: 2; }
  .prod-plan:not(:has(.prod-plan-rige)) .prod-plan-versiones { grid-row: 1; }
  main:has(> .prod-plan) > .titulo-pagina { margin-bottom: 4px; }
  .prod-plan-revisar { float: right; margin: -44px 0 0 16px; }
}

/* ── Antes del paso 0 (grupo B): lo pedido sobre el plan (mockup 40) y las dos tandas (mockup 38) ── */
.sobre-fila { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--linea); }
.card-cab + .sobre-fila { border-top: 0; }
.sp-cambio { display: flex; align-items: center; gap: 10px; }
.sp-cambio h2, .tanda-fila h2 { margin: 0; font-size: 16px; line-height: 1.25; }
.sp-cambio p, .tanda-fila p { margin: 2px 0 0; }
.sp-campos { display: grid; gap: 10px; }
.sp-campos .campo-f { font-size: 13px; }
@media (min-width: 600px) { .sp-campos { grid-template-columns: 200px minmax(0, 1fr); align-items: end; } }
.tanda-cols { display: flex; justify-content: space-between; padding: 10px 18px 8px; background: var(--gris-cab); border-bottom: 1px solid var(--linea);
              font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.tanda-cols span:last-child { width: 132px; text-align: center; }
.tandas .tanda-fila { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-top: 1px solid var(--linea); }
.tandas .tanda-cols + .tanda-fila { border-top: 0; }
.tandas .tanda-fila .crece { flex: 1; min-width: 0; }
.tandas .tanda-fila.con-tarde { background: var(--marca-suave); }
.tandas .tanda-fila .paso input { width: 44px; -moz-appearance: textfield; }
.tandas .tanda-fila .paso input::-webkit-inner-spin-button, .tandas .tanda-fila .paso input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tanda-total { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--linea); background: var(--gris-cab); }
.tandas-kpis .kpi { padding: 12px 14px; }
/* En el pedido: las dos tandas, una tarjeta cada una */
section.tanda-fila { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
section.tanda-fila .crece { flex: 1; min-width: 0; }
section.tanda-fila h2 { font-size: 15.5px; }
section.tanda-fila .icono-circ { width: 34px; height: 34px; border-radius: 10px; font-weight: 700; }
/* En la firma de una tanda (mockups 52 y 53): el pedido y sus dos tandas */
.firma-tandas { margin: 6px 0 10px; }
.firma .tandas-del-pedido { margin: 14px 0 6px; }
.firma:has(.tandas-del-pedido) { min-height: 0; }

/* ── Armar las bandejas (el picking, mockup 41): un botón por producto, que se marca cuando ya está en su bandeja ── */
.picking { max-width: 720px; }
.picking .banda { align-items: center; }
.pick-seg { align-self: flex-start; margin: 0; }
.pick-bandeja .seccion-t { margin: 4px 0 8px; }
.pick-bandeja .seccion-t h2 { font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pick-lista { display: flex; flex-direction: column; gap: 8px; }
.pick-form { margin: 0; }
.pick { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; font: inherit; text-align: left;
        color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); box-shadow: var(--sombra);
        cursor: pointer; transition: background .15s; }
.pick:hover:not(:disabled) { border-color: var(--linea-fuerte); }
.pick:disabled { cursor: default; }
.pick .mk { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea-fuerte); flex: none; display: flex; align-items: center;
            justify-content: center; color: transparent; }
.pick .mk .ico { width: 14px; height: 14px; stroke-width: 3; }
.pick .nom { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.3; }
.pick .nom small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }
.pick .n { flex: none; min-width: 54px; padding: 6px 10px; border-radius: 10px; border: 1.5px dashed var(--linea-fuerte); text-align: center;
           font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.pick.ok { background: var(--ok-suave); border-color: transparent; }
.pick.ok .mk { background: var(--ok); border-color: var(--ok); color: #fff; }
.pick.ok .n { border-color: transparent; }
.pick-productos .it b.num { flex: none; }
.pick-total { background: var(--gris-cab); }
.pick-pie { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--papel); border: 1px solid var(--linea);
            border-radius: var(--radio); box-shadow: var(--sombra); }
.pick-pie p { margin: 0; text-align: center; }
.pick-estado { padding: 13px 16px; border-radius: var(--radio-chico); background: var(--gris); color: var(--suave); font-weight: 700; }
.pick-estado.listo { background: var(--ok-suave); color: var(--ok); }
.prod-picking { margin-top: 14px; }
.prod-plan-nombre small { display: block; font-size: 12.5px; color: var(--suave); font-weight: 400; }
.prod-plan-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }