/* Interfaz nueva (mockup de la reestructura): despacho
   Lo que ve el conductor (y Despacho): su inicio (/cadena), «En la tienda» (/cadena/pedido/…/entrega), el detalle de
   una entrega (/cadena/pedido/…, que ven también la tienda, Producción y Control) y la línea de la carga en la firma.
   Como el mockup pulido el 15-10: una columna al centro, filas parejas (ícono · texto · estado), estados con pill y
   palabra, y UNA acción fuerte. Solo se ve: rutas, formularios y textos de las reglas no cambian. */

/* ── El marco: una columna al centro (máx. 880 px), con las cifras en una franja blanca en el computador ── */
.dsp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dsp > * { margin-top: 0; margin-bottom: 0; }
.dsp > .seccion-t { margin: 10px 0 -2px; }
.dsp > .seccion-t h2 { font-size: 16px; }
.dsp > .boton { min-height: 52px; font-size: 16px; }
@media (min-width: 900px) {
  main:has(> .dsp) > :is(.titulo-pagina, .sub-pagina, .cifras-pc),
  main > .dsp { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
  main:has(> .dsp) > .cifras-pc { margin-top: 2px; margin-bottom: 14px; }
  main:has(> .dsp) > .cifras-pc .cifras { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
  main:has(> .dsp) > .cifras-pc .cifras > div { padding: 10px 14px; }
  main:has(> .dsp) > .cifras-pc .cifras > div + div { border-left-color: var(--linea); }
  main:has(> .dsp) > .cifras-pc .cifras small { color: var(--suave); }
  main:has(> .dsp) > .cifras-pc .cifras b { color: var(--tinta); }
  main:has(> .dsp) > .cifras-pc .cifras b.marca { color: color-mix(in srgb, var(--marca-fuerte) 80%, #000); }
  .dsp > .boton { align-self: flex-start; min-width: 280px; width: auto; }
}

/* Las bandas que usa el mockup y no están en estilo.css */
.dsp .banda.gris { background: var(--papel); color: var(--suave); }
.dsp .banda.gris b { color: var(--tinta); }
.dsp .banda a { white-space: nowrap; }

/* Filas parejas: la cifra o el estado a la derecha, la flecha suave */
.dsp .it .tx b { display: block; font-family: var(--letra-titulos); font-weight: 600; }
.dsp .it > .num { flex: none; font-family: var(--letra-titulos); font-weight: 600; font-size: 16px; text-align: right; }
.dsp-chev { color: var(--tenue); width: 16px; height: 16px; flex: none; }
.dsp-n { font-family: var(--letra-titulos); }
.icono-circ.medio { background: var(--alerta-suave); color: var(--alerta); }
.dsp-links { margin: 4px 0 0 !important; text-align: center; color: var(--suave); }
.dsp-links a { color: var(--suave); }
.dsp-links .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

/* ── Inicio (/cadena): «Por hacer», la primera con su botón ── */
.dsp-por-hacer .it { min-height: 64px; }
.dsp-por-hacer .dsp-ahora { background: color-mix(in srgb, var(--marca-suave) 45%, var(--papel)); }
.dsp-boton { flex: none; min-height: 40px; padding: 8px 16px; font-size: 14px; pointer-events: none; }
.dsp-por-hacer a.it:hover .dsp-boton { background: var(--primario-hover); }
/* Lo que hizo hoy y lo que salió: la hora a la izquierda, como la fecha del historial */
.dsp-hora { flex: none; width: 46px; font-family: var(--letra-titulos); font-weight: 600; font-size: 14px; color: var(--suave);
            font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .dsp-por-hacer .it { flex-wrap: wrap; }
  .dsp-por-hacer .it .tx { flex-basis: calc(100% - 64px); }
  .dsp-por-hacer .dsp-boton { flex: 1 1 100%; min-height: 46px; font-size: 15px; }
  .dsp-por-hacer .it > .estado { margin-left: 52px; }
}

/* ── En la tienda (/cadena/pedido/…/entrega) ── */
.dsp-difs .dsp-dif { color: var(--alerta); font-size: 15px; white-space: nowrap; }
.dsp-entrega .pie-tarea { margin-top: 4px; }
.dsp-entrega .pie-tarea .boton { min-height: 52px; font-size: 16px; }
.dsp-desacuerdo { padding: 0; }
.dsp-desacuerdo summary { padding: 14px 18px; font-weight: 700; font-size: 14px; color: var(--suave); cursor: pointer; text-align: center;
                          text-decoration: underline; list-style: none; }
.dsp-desacuerdo summary::-webkit-details-marker { display: none; }
.dsp-desacuerdo[open] summary { text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--linea); }
.dsp-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
.dsp-form > * { margin: 0; }
.dsp-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dsp-foto > * { margin: 0 !important; }
.dsp-foto .dsp-foto-ico { width: 56px; height: 56px; border-radius: 16px; }
.dsp-foto .foto-boton { display: flex; width: 100%; margin-top: 6px !important; font-weight: 700; }
.dsp-foto .dsp-clave { width: 100%; text-align: left; margin-top: 6px !important; font-size: 13.5px; }
.dsp-foto .dsp-clave input { font-size: 22px; letter-spacing: .5em; text-align: center; padding: 12px; min-height: 52px; }
.dsp-foto .dsp-clave input:focus { outline: none; border-color: var(--marca-fuerte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 40%, transparent); }
.dsp-foto > .boton { margin-top: 4px !important; min-height: 52px; font-size: 16px; }

/* ── El detalle de una entrega (/cadena/pedido/…): las firmas en una tarjeta, una fila por paso ── */
.dsp-detalle-sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dsp-detalle .ok-caja { margin: 0; }
.cadena-pasos.dsp-firmas { margin: 0; padding: 0; }
.cadena-pasos.dsp-firmas > li { border-left: 0; margin: 0; padding: 12px 18px; align-items: flex-start; }
.cadena-pasos.dsp-firmas > li::before { display: none; }
.cadena-pasos.dsp-firmas > li > .icono-circ { width: 38px; height: 38px; border-radius: 11px; }
.cadena-pasos.dsp-firmas > li .tx { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.cadena-pasos.dsp-firmas > li .tx > * { margin: 0; }
.cadena-pasos.dsp-firmas .difs { padding: 0; list-style: none; font-weight: 700; font-size: 13.5px; }
.cadena-pasos.dsp-firmas .dsp-u { padding-top: 8px; }
.dsp-sin-conteo { display: flex; gap: 6px; align-items: flex-start; }
.dsp-sin-conteo .ico { width: 15px; height: 15px; margin-top: 2px; }
.dsp-shopify h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15.5px; }
.dsp-shopify .aviso-linea { margin: 0; }

/* ── La firma de la carga: la línea de la nota de entrega bajo el botón ── */
.firma-nota-carga { margin: 6px 0 0; text-align: center; }
@media (min-width: 900px) {
  .dsp-entrega .pie-tarea .pin-caja { max-width: 380px; }
  .dsp-entrega .pie-tarea .boton { align-self: flex-start; width: auto; min-width: 280px; }
  .dsp-foto { align-items: center; }
  .dsp-foto .foto-boton, .dsp-foto .dsp-clave, .dsp-foto > .boton { max-width: 420px; }
}