/* Operaciones · Thelsa — plan de empaque/maniobra, días, tren (mapa de plataforma), ruta, cuadrilla */

  .plan-emp { border: 1px solid var(--info); border-radius: var(--r-md); overflow: hidden; }
  .plan-emp .plan-head { padding: 9px 16px; background: var(--info-bg); border-bottom: 1px solid var(--info); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); }
  .plan-emp .plan-body { padding: 14px 16px; background: var(--bg-subtle); }
  .plan-emp .plan-linea { font-size: 14px; font-weight: 500; }
  .plan-emp .plan-linea strong { font-family: 'Geist Mono', monospace; color: var(--brand); }
  .dias-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .dias-lista:empty { display: none; }
  .dia-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; border: 1px solid var(--info); border-radius: 999px; font-size: 13px; font-family: 'Geist Mono', monospace; color: var(--brand); }
  .dia-chip.carga { background: var(--info-bg); font-weight: 600; }
  .dia-chip .quitar { cursor: pointer; color: var(--ink-soft); font-weight: 700; line-height: 1; }
  .dia-chip .quitar:hover { color: #d81b33; }
  .dia-chip .tope { font-size: 11px; font-family: 'Geist', sans-serif; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
  .dia-chip.fijo { border-style: dashed; cursor: default; }
  .conductor-fila { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
  .conductor-fila .nom { min-width: 66px; font-weight: 600; }
  .conductor-fila select { flex: 1; max-width: 320px; }
  .dia-chip.alerta { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
  .dia-chip .carga-dia { font-size: 11px; font-family: 'Geist', sans-serif; color: var(--ink-soft);
    background: var(--bg-subtle); border-radius: 999px; padding: 1px 7px; }
  .dia-chip .carga-dia.alerta { background: #fff; color: var(--warn); font-weight: 600; }
  .dias-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
  .dias-add label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
  .dias-add input[type="date"] { width: 165px; }
  .dias-add input:disabled, .dias-add button:disabled { opacity: 0.45; cursor: not-allowed; }
  .dia-nota { margin-top: 6px; font-size: 12px; }
  .tramo-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; background: #fff; }
  .tramo-card:hover { border-color: var(--brand); }
  .van-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
  .van-cliente { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
  .van-color { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; flex-shrink: 0; }
  .van-color.rev { border-style: dashed; }
  .dias-op { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
  .dia-op { text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
            background: #fff; cursor: pointer; min-width: 190px; font: inherit; }
  .dia-op:hover:not(:disabled) { border-color: var(--brand); }
  .dia-op.sel { border-color: var(--brand); border-width: 2px; background: #eef4fc; }
  .dia-op.sel .d1 { color: var(--brand); }
  .dia-op.sel .d2, .dia-op.sel .d3 { color: #3a5a80; }
  .dia-op.ocupado { opacity: .5; cursor: not-allowed; background: var(--bg-subtle); }
  .dia-op.apretado { border-color: var(--warn); background: var(--warn-bg); }
  .dia-op.apretado .d3 { color: var(--warn); }
  .dia-op .d1 { font-weight: 600; font-size: 13px; }
  .dia-op .d2 { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
  .dia-op .d3 { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
  /* Mapa de la plataforma: paradas en horizontal, lugares en vertical */
  .mapa-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 16px; background: #fff; }
  .mapa-paradas { display: grid; height: 40px; margin-left: 30px; }
  .mapa-parada { position: relative; }
  .mapa-parada > div { position: absolute; left: 0; transform: translateX(-50%); width: 86px; text-align: center; }
  .mapa-parada > div.fin { left: auto; right: 0; transform: translateX(50%); }
  .mapa-suc { font-weight: 700; font-size: 12px; color: var(--brand); }
  .mapa-cuando { font-size: 10px; color: var(--muted); }
  .mapa-wrap { position: relative; }
  .mapa-grid { display: grid; margin-left: 30px; border: 1px solid var(--line); border-radius: 6px;
               background: repeating-linear-gradient(to bottom, #fff 0 25px, #f5f6f8 25px 26px); }
  .mapa-div { border-left: 1px dashed #cfd4da; }
  .mapa-lugares { position: absolute; left: 0; top: 0; display: grid; width: 26px; text-align: right;
                  font-size: 10px; color: #a9b0b8; }
  .mapa-lugares span { line-height: 26px; }
  .mapa-barra { margin: 2px 3px; border-radius: 5px; border: 1.5px solid; display: flex; align-items: center;
                padding: 0 7px; font-size: 11.5px; font-weight: 600; overflow: hidden; white-space: nowrap;
                cursor: pointer; }
  .mapa-barra:hover { filter: brightness(0.95); }
  .mapa-libres { display: grid; margin-left: 30px; margin-top: 6px; }
  .mapa-libres div { text-align: center; font-size: 11px; color: var(--muted); }
  .mapa-cuello { color: var(--err); font-weight: 700; }
  #opsTableBody tr.foraneo { background: #fffdf7; }
  /* Quién puede operar la ruta */
  .ruta-suc { padding: 12px 16px; background: var(--info-bg); border: 1px solid var(--info); border-radius: var(--r-md); font-size: 13px; }
  .ruta-suc.aviso { background: #fffbeb; border-color: #d97706; }
  .ruta-suc .rs-tit { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 8px; }
  .ruta-suc .rs-ops { display: flex; flex-wrap: wrap; gap: 8px; }
  .ruta-suc .rs-op { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-size: 13px; }
  .ruta-suc .rs-op:hover { border-color: var(--brand); }
  .ruta-suc .rs-op.on { border-color: var(--brand); border-width: 2px; padding: 6px 11px; font-weight: 600; }
  .ruta-suc .rs-op .rs-km { color: var(--ink-soft); font-size: 11.5px; font-family: 'Geist Mono', monospace; }
  .ruta-suc .rs-op.llena { opacity: 0.55; }
  .ruta-suc .rs-fecha { display: flex; flex-direction: column; gap: 2px; }
  .ruta-suc .rs-fecha .rs-km { font-family: 'Geist', sans-serif; }
  .ruta-suc .rs-nota { margin-top: 8px; color: var(--ink-soft); font-size: 12px; }
  /* Cuadrilla completa: los nombres nunca se recortan */
  .celda-cuadrilla { min-width: 240px; }
  .cuadrilla-nombres { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .nombre-cuadrilla { display: inline-block; padding: 2px 7px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 4px; font-size: 11.5px; white-space: nowrap; }
  .cuadrilla-detalle { display: flex; flex-direction: column; gap: 2px; }
  .persona-fila { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
  .persona-fila:last-child { border-bottom: 0; }
  .persona-fila .pp { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }

  .cap-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
  .cap-grid th, .cap-grid td { padding: 8px 9px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); text-align: center; }
  .cap-grid th { background: var(--bg-subtle); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
  .cap-grid th.branch-h, .cap-grid td.branch-h { position: sticky; left: 0; background: var(--bg-card); z-index: 2; text-align: left; font-weight: 600; border-right: 1px solid var(--line); }
  .cap-grid th.branch-h { background: var(--bg-subtle); }
  .cap-grid td.cell-ok { background: #f1f8f4; }
  .cap-grid td.cell-warn { background: #fdf3e1; }
  .cap-grid td.cell-err { background: #fae2e2; }
  .cap-grid td.cell-empty { background: #f8fafc; color: var(--ink-faint); }