/* ===========================================================
   APM Pedidos 2 — Cuadrillas
   Quién maneja y quién carga cada camión, cada día.

   Vive aparte de app.css porque es una pantalla de armado, no del día a día del
   patio: así se puede tocar sin rozar lo que usa Rogelio cada mañana.
   Ni un color nuevo: todo sale de los tokens de app.css.

   Dos reglas mandan el tamaño de todo lo de aquí:
     · Ningún campo abajo de 16px — iPhone hace zoom solo y saca la pantalla de
       lugar justo cuando se está armando el día.
     · Ningún botón abajo de 38px de alto ni ningún texto abajo de 12px: esto se
       usa de pie, con el teléfono en una mano.
   =========================================================== */

/* ---------- La tira de días ---------- */
/* La tira es la de siempre (`.dias`, en app.css). Lo único que se le agrega es
   la marca del día de hoy: sin ella, siete fechas seguidas se ven todas iguales
   y hay que ponerse a contar para saber dónde está uno parado. */
#cu-dias button.hoy:not(.on){border-color:var(--steel);color:var(--steel)}

/* ---------- La línea de arriba: ir a otro día y copiar ---------- */
/* Con wrap: en teléfono el botón de copiar se va al renglón de abajo en lugar
   de empujar la pantalla de lado. Aquí nunca hay scroll horizontal. */
.cu-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
.cu-ir{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.cu-ir input.f{margin:0;width:auto;min-height:44px;font-size:16px}
.cu-copiar{flex:0 0 auto;min-height:44px;border:1px solid var(--steel);background:var(--steel);
  color:#fff;border-radius:var(--r-btn);padding:12px 18px;font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease)}
.cu-copiar:hover{background:var(--steel2)}
.cu-copiar:disabled{opacity:.55;cursor:default}

/* ---------- Alguien en dos camiones ---------- */
/* Ámbar, no rojo: no está mal, hay que revisarlo. A veces de verdad se reparte
   el día entre dos camiones y la app no está en el patio para saberlo. */
.cu-doble{background:var(--warn-bg);border:1px solid #f3d6c3;border-radius:var(--r-panel);
  padding:11px 14px;margin-bottom:14px;font-size:13.5px;line-height:1.5;color:#8a3a0c}
.cu-doble b{display:block;font-family:Oswald,sans-serif;font-size:14px;font-weight:600;
  color:var(--warn);letter-spacing:.02em;margin-bottom:3px}
.cu-doble span{display:block}

/* ---------- Las tarjetas de camión ---------- */
/* Rejilla que se acomoda sola: en compu salen tres o cuatro, en teléfono una
   debajo de otra, sin un solo media query que mantener. */
.cu-camiones{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.cu-cam{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--e1);padding:14px 16px 16px;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
/* El camión ya armado se distingue de un vistazo: el verde es "ya quedó". */
.cu-cam.armado{border-color:#cfe3d8;box-shadow:var(--e1),inset 3px 0 0 var(--ok)}

.cu-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.cu-nm{flex:1;min-width:0;font-family:Oswald,sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.02em;line-height:1.25;color:var(--ink)}
.cu-nm small{display:block;font-family:Barlow,sans-serif;font-size:12px;font-weight:500;
  color:var(--gris);letter-spacing:0;margin-top:2px;line-height:1.35}

/* El aviso de guardado va aquí, chiquito y en su tarjeta: un toast por cada
   palomita taparía la pantalla justo cuando se está armando el día. */
.cu-guard{flex:0 0 auto;font-style:normal;font-size:12px;font-weight:700;color:var(--gris);
  white-space:nowrap;padding-top:3px}
.cu-guard.ok{color:var(--ok)}
.cu-guard.mal{color:var(--danger)}

.cu-campo{margin-bottom:12px}
/* Etiqueta propia y no `.f`: la de app.css mide 11px y aquí nada baja de 12. */
.cu-et{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut);font-weight:700;margin:0 0 6px}

.cu-cam select.f{margin:0;min-height:46px;font-size:16px;background:#fff}
/* El chofer repetido se marca en el campo mismo, no sólo en el letrero de
   arriba: con seis camiones en pantalla el letrero se pierde. */
.cu-cam select.f.doble{border-color:var(--warn);background:var(--warn-bg)}

/* ---------- Los cargadores ---------- */
/* Pastillas que se prenden y se apagan. Se toca el nombre completo, no una
   casilla de 14px: esto se usa con el pulgar. */
.cu-gente{display:flex;flex-wrap:wrap;gap:7px}
.cu-p{min-height:42px;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:10px 15px;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease)}
.cu-p:hover{border-color:var(--steel);color:var(--steel)}
.cu-p.on{background:var(--steel);border-color:var(--steel);color:#fff}
.cu-p.on.doble{background:var(--warn);border-color:var(--warn);color:#fff}
.cu-p:disabled{opacity:.55;cursor:default}
.cu-p:disabled:hover{border-color:var(--line);color:var(--mut)}

.cu-resumen{margin-top:12px;padding-top:10px;border-top:1px solid #f0f2f6;
  font-size:12.5px;font-weight:600;color:var(--mut);line-height:1.4}
.cu-cam.armado .cu-resumen{color:var(--ok)}

/* ---------- Teléfono ---------- */
@media (max-width:640px){
  /* Una tarjeta por renglón y el botón de copiar al ancho completo: es el que
     se usa casi siempre y tiene que caer debajo del pulgar. */
  .cu-camiones{grid-template-columns:1fr}
  .cu-ir{flex:1 1 100%}
  .cu-ir input.f{flex:1}
  .cu-copiar{flex:1 1 100%;width:100%}
  .cu-cam{padding:14px}
  .cu-p{flex:1 1 auto;text-align:center}
}

/* ---------- Impreso ---------- */
/* La cuadrilla se imprime dentro de la hoja verde de Choferes, no desde aquí.
   Si alguien manda a imprimir esta pantalla, que al menos no salgan los botones
   de guardar ni el calendario, que en papel no sirven de nada. */
@media print{
  .cu-barra,.cu-guard,.dias{display:none!important}
  .cu-camiones{grid-template-columns:1fr 1fr}
  .cu-cam{box-shadow:none;border:1px solid #999;break-inside:avoid}
}