/* ===================== Módulo chofer (/ruta) ===================== */
.shell-chofer .outlet { padding: 12px 12px 90px; max-width: 640px; margin: 0 auto; }
/* Pantalla grande (PC / tablet horizontal): la lista en dos columnas, el acta más ancha. */
@media (min-width: 900px) {
  .shell-chofer .outlet { max-width: 1100px; padding: 20px 24px 100px; }
  .ruta:not(.acta) .ruta-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .ruta:not(.acta) .ruta-lista .ruta-sub { grid-column: 1 / -1; }
  .ruta.acta { max-width: 760px; margin: 0 auto; }
  .fotos-grid { grid-template-columns: repeat(4, 1fr); }
  .fotos-grid.chica { grid-template-columns: repeat(6, 1fr); }
  .ruta-item:hover { border-color: var(--primary); }
}
.shell-chofer .topbar { padding: 10px 12px; position: sticky; top: 0; z-index: 5; }
.ruta { display: flex; flex-direction: column; gap: 12px; }
.ruta-head { display: flex; align-items: center; gap: 8px; }
.ruta-head .icon-btn { text-decoration: none; display: inline-flex; }
.ruta-fecha { flex: 1; display: flex; flex-direction: column; text-align: center; text-transform: capitalize; }
.ruta-fecha strong { font-size: 17px; }
.ruta-sub { margin: 10px 0 4px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ruta-lista { display: flex; flex-direction: column; gap: 10px; }
.ruta-vacio { text-align: center; padding: 30px 0; }
.ruta-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--text); text-decoration: none; }
.ruta-item.mia { border-color: var(--primary); }
.ruta-item-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ruta-hora { font-size: 20px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.ruta-item-main { display: flex; flex-direction: column; gap: 2px; }
.ruta-item-main strong { font-size: 20px; letter-spacing: .06em; }
.ruta-item-main a { color: var(--primary-text); }
.ruta-dir { color: var(--primary-text); text-decoration: none; font-size: 14px; }
.ruta-item-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ruta-item-acciones .btn { min-height: 40px; }
.ruta-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); display: flex; gap: 8px; z-index: 6; }
.ruta-foot .btn { flex: 1; min-height: 50px; font-size: 16px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.ruta-pend { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(245,158,11,.14); color: #f59e0b; font-size: 14px; }
.ruta-pend.rojo { background: rgba(248,113,113,.14); color: var(--danger); }
.ruta-pend.ok { background: rgba(34,197,94,.14); color: #22c55e; }
.ruta-seg { display: flex; width: 100%; }
.ruta-seg button { flex: 1; padding: 9px 6px; }

/* Acta */
.fotos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fotos-grid.chica { grid-template-columns: repeat(3, 1fr); }
.foto-celda { position: relative; aspect-ratio: 4 / 3; border: 2px dashed var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.foto-celda.oblig { border-color: var(--primary); border-style: dashed; }
.foto-celda.lista { border-style: solid; border-color: #22c55e; }
.foto-celda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-silueta { width: 70%; color: var(--muted); }
.foto-silueta svg { width: 100%; height: auto; display: block; }
.foto-label { position: absolute; left: 0; right: 0; top: 0; padding: 4px 8px; font-size: 12px; font-weight: 600; background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; }
.foto-celda:not(.lista) .foto-label { background: transparent; color: var(--text); }
.foto-btn { position: absolute; left: 8px; right: 8px; bottom: 8px; width: auto; min-height: 38px; }
.foto-pend { font-size: 11px; }
.foto-err { color: var(--danger); font-weight: 700; }
.fotos-danos { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fotos-danos-head { display: flex; align-items: center; justify-content: space-between; }
.acta-campos { padding: 16px; }
.acta-campos input, .acta-campos textarea { font-size: 17px; }
.octavos { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.octavos button { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 8px; padding: 10px 0; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.octavos button.on { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.acta-firma { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.firma-canvas { width: 100%; height: 180px; background: #fff; border-radius: 10px; border: 1px solid var(--border); touch-action: none; display: block; }
.firma-acciones { display: flex; gap: 8px; align-items: center; }
.firma-acciones input { flex: 1; }
@media (max-width: 380px) { .fotos-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .octavos button { font-size: 10px; padding: 8px 0; } }
.ruta-pend[hidden], .ruta [hidden] { display: none !important; }

/* ===================== Visor de actas (oficina) ===================== */
.actas-grupo { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.actas-grupo:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.actas-grupo-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.actas-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .actas-par { grid-template-columns: 1fr; } }
.acta-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acta-col.vacia { opacity: .6; justify-content: flex-start; }
.acta-col-head { display: flex; justify-content: space-between; align-items: center; }
.acta-meta { color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.acta-meta b { color: var(--text); }
.acta-obs { color: var(--text); background: var(--surface); border-radius: 6px; padding: 6px 8px; margin-top: 4px; }
.acta-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.acta-foto { margin: 0; position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.acta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.acta-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; padding: 2px 5px; background: rgba(0,0,0,.55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acta-foto-borrada { display: grid; place-items: center; height: 100%; text-align: center; padding: 4px; font-size: 10px; }
.acta-firma-box { display: flex; align-items: center; gap: 10px; }
.acta-firma-box img { height: 48px; background: #fff; border-radius: 6px; padding: 2px; }
.acta-notas { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--border); padding-top: 6px; }
.acta-acciones { display: flex; gap: 6px; }
.lightbox { display: grid; place-items: center; cursor: zoom-out; flex-direction: column; }
.lightbox img { max-width: 96vw; max-height: 88vh; border-radius: 8px; }
.lightbox-cap { color: #fff; margin-top: 8px; font-size: 13px; }

/* Notas largas del formulario web: recortadas, con "ver más". */
.ruta-notas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ruta-notas.abierta { display: block; -webkit-line-clamp: unset; }
@media (min-width: 900px) { .ruta-foot { justify-content: center; } .ruta-foot .btn { flex: 0 1 520px; } }