/* Rutas de Transporte.
 *
 * Todo acotado a .mod-rutas. Los CSS de los tableros CHOCAN entre sí —uno alinea
 * las tablas a la izquierda y el otro a la derecha— y por eso cada módulo lleva
 * el suyo dentro de su clase.
 *
 * Monocromo, como el resto: el rojo (--alarma) está reservado al conflicto de
 * chofer. Los seis estados de una ruta NO se distinguen por color, se distinguen
 * por texto — seis colores serían seis significados que nadie recuerda. */

.mod-rutas .semana{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:10px}
.mod-rutas .nav{display:flex;align-items:baseline;gap:8px}
.mod-rutas .nav button{font:inherit;font-size:13px;background:none;color:var(--ink);
  border:1px solid var(--rule);border-radius:0;padding:5px 11px;cursor:pointer}
.mod-rutas .nav button:hover{border-color:var(--ink)}
.mod-rutas .nav button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.mod-rutas .nav b{margin-left:8px;font-weight:600;font-size:15px;letter-spacing:-.01em}

.mod-rutas .conflicto{margin-top:14px;font-size:14px;font-weight:500;
  border-left:3px solid var(--alarma);padding-left:14px}
.mod-rutas .aviso-rutas{margin-bottom:14px;font-size:14px;font-weight:500}

/* ── retícula ─────────────────────────────────────────────────────────── */
.mod-rutas .rejilla{margin-top:20px;overflow-x:auto}
.mod-rutas .rejilla.cargando{opacity:.45}
.mod-rutas table{border-collapse:collapse;width:100%;table-layout:fixed;min-width:760px}
.mod-rutas thead th{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--meta);font-weight:500;text-align:left;padding:0 0 8px;
  border-bottom:1px solid var(--ink)}
.mod-rutas thead th.hoy{color:var(--ink);font-weight:600}
.mod-rutas tbody th.bloque{width:64px;font-size:13px;font-weight:600;text-align:left;
  vertical-align:top;padding:12px 10px 12px 0;border-bottom:1px solid var(--rule)}
.mod-rutas tbody td{vertical-align:top;padding:12px 10px 12px 0;
  border-bottom:1px solid var(--rule)}

/* ── ficha ────────────────────────────────────────────────────────────── */
.mod-rutas .ficha{display:grid;gap:2px;border:1px solid var(--ink);border-radius:2px;
  padding:8px 10px;margin-bottom:6px;cursor:pointer;background:var(--paper)}
.mod-rutas .ficha:hover{background:#fafafa}
.mod-rutas .ficha:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.mod-rutas .ficha b{font-size:13px;font-weight:600;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.mod-rutas .ficha .pzas{font-size:12px}
.mod-rutas .ficha .est,.mod-rutas .ficha .uni{font-size:11px;color:var(--meta)}

/* Una ruta apenas propuesta todavía no es un compromiso: se dibuja punteada
 * para que no se lea igual que una confirmada. */
.mod-rutas .ficha.e-propuesta{border-style:dashed}
/* Cerrada: ya no pide nada de nadie, se apaga para que no compita por atención. */
.mod-rutas .ficha.e-terminada{border-color:var(--rule);color:var(--meta)}
/* El único rojo de la página. */
.mod-rutas .ficha.choca{border-color:var(--alarma)}
.mod-rutas .ficha.choca .est{color:var(--alarma);font-weight:600}

.mod-rutas .hueco{display:block;width:100%;font:inherit;font-size:12px;color:var(--meta);
  background:none;border:1px dashed var(--rule);border-radius:2px;padding:8px 10px;
  margin-bottom:6px;cursor:pointer;text-align:left}
.mod-rutas .hueco:hover{border-color:var(--ink);color:var(--ink)}
.mod-rutas .hueco:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.mod-rutas .hueco.vacio{cursor:default}
.mod-rutas .hueco.vacio:hover{border-color:var(--rule);color:var(--meta)}

/* ── panel de detalle ─────────────────────────────────────────────────── */
.mod-rutas .detalle{margin-top:26px;border-top:1px solid var(--ink);padding-top:16px}
.mod-rutas .detalle header{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}
.mod-rutas .detalle header b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.mod-rutas .detalle dl{display:flex;flex-wrap:wrap;gap:0 32px}
.mod-rutas .detalle dl div{padding-top:9px;border-top:1px solid var(--rule);
  min-width:118px;margin-bottom:12px}
.mod-rutas .detalle dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--meta);font-weight:500}
.mod-rutas .detalle dd{margin-top:3px;font-size:14px}
.mod-rutas .detalle .quien{font-size:12px;margin-top:4px}
.mod-rutas .detalle label{display:block;font-size:13px;margin-top:14px;max-width:340px}
.mod-rutas .detalle input,.mod-rutas .detalle select{font:inherit;width:100%;margin-top:5px;
  padding:9px 10px;border:1px solid var(--rule);border-radius:0;
  background:var(--paper);color:var(--ink)}
.mod-rutas .detalle input:focus,.mod-rutas .detalle select:focus{outline:0;border-color:var(--ink)}
.mod-rutas .acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.mod-rutas .err{margin-top:12px;font-size:13px;color:var(--alarma);font-weight:500}

/* ── lista por día ────────────────────────────────────────────────────── */
/* La retícula de 7 columnas no cabe abajo de 900 px. Encogerla hasta que quepa
 * la vuelve ilegible, así que ahí se cambia por una lista y no se compite con
 * el ancho de la pantalla. */
.mod-rutas .porDia{display:none}
.mod-rutas .dia{margin-top:24px}
.mod-rutas .dia h3{font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;padding-bottom:7px;border-bottom:1px solid var(--ink)}
.mod-rutas .dia h3 .meta{text-transform:none;letter-spacing:0;font-weight:400}
.mod-rutas .bloqueFila{display:grid;grid-template-columns:58px 1fr;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--rule)}

@media (max-width:900px){
  .mod-rutas .rejilla{display:none}
  .mod-rutas .porDia{display:block}
}