/* ===========================================================
   Resumen y Rutas / WhatsApp
   Mismos tokens de app.css: aquí no se inventa ni un color.
   Las clases genéricas (.tarjeta, .chip, .barra, .vacio, .pt-mini, .im-*)
   también salen de app.css; esto sólo agrega lo propio de las dos pantallas.
   =========================================================== */

/* La barra de botones va arriba a la derecha, como en el patio. */
.rs-barra{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:12px}

/* ---------- Operación · lo que pide atención ---------- */
.op-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.op-k{appearance:none;text-align:left;background:var(--card);border:1px solid var(--line);
      border-radius:var(--r-panel);box-shadow:var(--e1);padding:15px 16px;color:var(--ink);
      cursor:pointer;transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.op-k:hover{transform:translateY(-1px);border-color:var(--steel)}
.op-k b{display:block;font-family:"Barlow Condensed",Impact,sans-serif;font-size:38px;font-weight:800;line-height:.95;color:var(--navy)}
.op-k span{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.055em;color:var(--mut);margin-top:6px}
.op-k em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--steel);margin-top:12px}
.op-k.mal{background:var(--danger-bg);border-color:#f0cfcf}.op-k.mal b{color:var(--danger)}
.op-k.hoy{background:var(--warn-bg);border-color:#f3d7c4}.op-k.hoy b{color:var(--warn)}
.op-atencion{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1);overflow:hidden}
.op-atencion h3{font-family:"Barlow Condensed",Impact,sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);padding:13px 16px;border-bottom:1px solid var(--line)}
.op-atencion button{width:100%;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:12px;text-align:left;padding:13px 16px;border:0;border-bottom:1px solid #f0f2f6;background:#fff;color:var(--ink);cursor:pointer}
.op-atencion button:last-child{border-bottom:0}.op-atencion button:hover{background:#fafbfd}
.op-atencion button b,.op-atencion button small{display:block}.op-atencion button small{color:var(--mut);margin-top:2px}
.op-atencion button em{font-style:normal;font-weight:700;color:var(--steel);white-space:nowrap}
.op-dot{width:10px;height:10px;border-radius:50%;background:var(--steel)}.op-dot.mal{background:var(--danger)}.op-dot.hoy{background:var(--warn)}
.op-listo{display:flex;gap:12px;align-items:center;background:var(--ok-bg);color:var(--ok);border-radius:var(--r-panel);padding:13px 16px}
.op-listo span{color:var(--mut)}

/* ---------- Resumen · los números del día ---------- */
.rs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px}
.rs-k{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);
      box-shadow:var(--e1);padding:14px 16px;min-width:0}
.rs-k b{display:block;font-family:Oswald,sans-serif;font-size:27px;font-weight:600;
      line-height:1.05;color:var(--steel);word-break:break-word}
.rs-k span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--mut);margin-top:4px}
/* Atrasado en rojo y hoy en ámbar: los mismos dos avisos de la lista de pedidos,
   para que el color signifique lo mismo en toda la app. */
.rs-k.mal{background:var(--danger-bg);border-color:#f0cfcf}
.rs-k.mal b{color:var(--danger)}
.rs-k.hoy{background:var(--warn-bg);border-color:#f3d7c4}
.rs-k.hoy b{color:var(--warn)}

.rs-pendiente{margin:12px 0 0;font-size:13.5px;color:var(--mut)}
.rs-h3{font-family:"Barlow Condensed",Impact,sans-serif;font-size:17px;font-weight:700;color:var(--navy);
      text-transform:uppercase;letter-spacing:.06em;margin:22px 0 10px}

/* ---------- Resumen · un camión, una tarjeta ---------- */
.rs-cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;
      align-items:start}
.rs-cam{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
      box-shadow:var(--e1);overflow:hidden;min-width:0}
.rs-cam.lleno{border-color:var(--warn)}
.rs-cam.excede{border-color:var(--danger)}
.rs-cam-cab{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
      padding:13px 16px;background:var(--steel);color:#fff}
.rs-cam.mostrador .rs-cam-cab{background:var(--gris)}
.rs-cam-nm{font-family:Oswald,sans-serif;font-size:16.5px;font-weight:600;letter-spacing:.02em;min-width:0}
.rs-cam-nm small{display:block;font-family:Barlow,sans-serif;font-size:12px;font-weight:400;
      letter-spacing:0;opacity:.78;margin-top:2px}
.rs-cam-kg{text-align:right;flex:0 0 auto;min-width:104px}
.rs-cam-kg b{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;white-space:nowrap}
.rs-cam-kg em{display:block;font-style:normal;font-size:11.5px;opacity:.8;margin-top:3px}
/* Sobre el azul del encabezado los colores oscuros no se ven: la barra y el
   recado van en las versiones claras, como en el patio. */
.rs-cam-kg .barra{margin-top:5px;background:rgba(255,255,255,.25)}
.rs-cam-kg .barra i{background:#8fd0a8}
.rs-cam-kg .barra i.lleno{background:#ffc46b}
.rs-cam-kg .barra i.excede{background:#ff9b9b}
.rs-cam-kg em.lleno{color:#ffd9a6}
.rs-cam-kg em.excede{color:#ffc9c9}

.rs-fila{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
      padding:10px 16px;border-top:1px solid #f0f2f6}
.rs-fila:first-of-type{border-top:0}
.rs-recol{background:#fafbfd}
.rs-pd{flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-pill);background:var(--steel);
      color:#fff;font-family:Oswald,sans-serif;font-size:12.5px;font-weight:600;
      display:grid;place-items:center}
.rs-pd.vacia{background:#eceff4}
.rs-quien{flex:1 1 140px;min-width:0}
.rs-quien b{font-size:14.5px;line-height:1.25;display:block}
.rs-quien small{display:block;font-size:12.5px;color:var(--mut)}
.rs-prog{font-size:12.5px;color:var(--mut);white-space:nowrap}
.rs-kg{margin-left:auto;font-family:Oswald,sans-serif;font-size:15px;font-weight:600;
      color:var(--steel);white-space:nowrap}

/* ---------- Rutas / WhatsApp ---------- */
/* Verde como la hoja de choferes: son las mismas paradas del mismo viaje. */
.rt-cam{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
      box-shadow:var(--e1);overflow:hidden;margin-bottom:14px}
.rt-cab{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
      padding:13px 16px;background:var(--verde);color:#fff}
.rt-cam.mostrador .rt-cab{background:var(--gris)}
.rt-nm{font-family:Oswald,sans-serif;font-size:16.5px;font-weight:600;letter-spacing:.02em;min-width:0}
.rt-nm small{display:block;font-family:Barlow,sans-serif;font-size:12px;font-weight:400;
      letter-spacing:0;opacity:.78;margin-top:2px}
.rt-btns{display:flex;gap:8px;margin-left:auto}

.rt-paradas{list-style:none;margin:0;padding:0}
.rt-parada{display:flex;gap:9px;align-items:flex-start;
      padding:11px 16px;border-top:1px solid #f0f2f6}
.rt-parada:first-child{border-top:0}
.rt-recol{background:#fafbfd}
.rt-quien{flex:1 1 auto;min-width:0}
.rt-quien b{font-size:14.5px;line-height:1.25;display:block}
.rt-quien small{display:block;font-size:12.5px;color:var(--mut);line-height:1.35}
/* Las ligas de mapas son larguísimas: nunca deben empujar la pantalla de lado. */
.rt-maps{display:inline-block;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--steel);
      overflow-wrap:anywhere}
.rt-cuanto{flex:0 0 auto;text-align:right;font-size:12.5px;color:var(--mut);white-space:nowrap}
.rt-cuanto small{display:block;font-family:Oswald,sans-serif;font-size:14px;font-weight:600;
      color:var(--steel)}

/* El recado se enseña completo: Jorge lo lee antes de mandarlo. */
.rt-ver{border-top:1px solid var(--line);background:#fafbfd}
.rt-ver summary{padding:10px 16px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--mut);cursor:pointer}
.rt-ver summary::marker{color:var(--mut)}
.rt-pre{margin:0;padding:0 16px 16px;font-family:Barlow,system-ui,sans-serif;font-size:13.5px;
      line-height:1.55;color:var(--ink);
      white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- Teléfono ---------- */
@media (max-width:640px){
  .op-kpis{grid-template-columns:1fr 1fr}
  .op-k{padding:12px}.op-k b{font-size:24px}.op-k em{display:none}
  .op-atencion button{grid-template-columns:10px 1fr}.op-atencion button em{grid-column:2}
  .op-listo{align-items:flex-start;flex-direction:column;gap:2px}
  .rs-kpis{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
  .rs-k{padding:11px 12px}
  .rs-k b{font-size:22px}
  .rs-cams{grid-template-columns:1fr}
  .rs-cam-cab,.rt-cab{flex-direction:column;align-items:stretch;gap:8px}
  .rs-cam-kg{text-align:left;min-width:0}
  .rs-cam-kg .barra{max-width:220px}
  .rt-btns{margin-left:0}
  .rt-btns .pt-mini{flex:1}
  .rs-kg{margin-left:34px}
}

/* =====================================================================
   IMPRESIÓN — sigue mandando la misma regla: TODO SE LEE EN NEGRO.
   El armazón (.im-hoja, .im-cab, .im-tab, .im-firmas) es el de app.css;
   aquí sólo va lo que el resumen agrega. Rutas no se imprime: se manda.
   ===================================================================== */
@media print{
  .rs-im-kpis{display:flex;gap:4mm;border:1pt solid #000;border-radius:2mm;
      padding:2.5mm 3mm;margin-bottom:4mm}
  .rs-im-kpis div{flex:1;text-align:center}
  .rs-im-kpis b{display:block;font-family:Oswald,sans-serif;font-size:8pt;font-weight:600;
      text-transform:uppercase;letter-spacing:.05em}
  .rs-im-kpis span{display:block;font-family:Oswald,sans-serif;font-size:13pt;font-weight:600}

  /* El renglón del camión parte la tabla en bloques sin depender de un fondo
     de color: regla gruesa arriba y letra de título. */
  .rs-im-cam td{border-top:1.2pt solid #000;border-bottom:.6pt solid #000;
      font-family:Oswald,sans-serif;font-size:10.5pt;font-weight:600;
      text-transform:uppercase;letter-spacing:.03em;padding-top:2.5mm}
}