/* Entregas Correntoso — estilos (colores y letras del prototipo aprobado) */
:root {
  --azul: #173A6B;
  --azul-medio: #2A4F85;
  --azul-borde: #5A7CAE;
  --azul-claro: #D5DEEB;
  --azul-fondo: #E4EAF4;
  --fondo: #F6F4EF;
  --texto: #1C2430;
  --gris: #5A6472;
  --gris-oscuro: #3F4753;
  --borde: #DDD8CE;
  --borde-control: #C9CFD8;
  --linea: #EFEBE3;
  --apagado: #E3DFD6;
  --naranja: #B8510B;
  --verde: #2F6B3A;
  --verde-fondo: #E3F0E4;
  --ambar: #7A4F00;
  --ambar-fondo: #FBF0D5;
  --rojo: #A12B22;
  --rojo-fondo: #F8E1DE;
  --neutro-fondo: #ECE9E2;
  --titulos: 'Barlow Condensed', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* Encabezado azul */
.enc { background: var(--azul); color: #FFFFFF; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.enc-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.enc-marca { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul-claro); }
.enc-volver { color: var(--azul-claro); font-size: 14px; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; background: none; border: none; padding: 0; cursor: pointer; }
.enc h1 { margin: 0; font-family: var(--titulos); font-size: 34px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; }
.enc-sub { font-size: 14px; color: var(--azul-claro); }
/* Migas de pan (pasos de la autoentrega): hechos se pueden tocar, el actual resaltado, los que siguen apagados */
.enc-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 13px; }
.enc-migas .miga { background: none; border: none; padding: 4px 0; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; min-height: 32px; }
.enc-migas .miga-actual { background: #FFFFFF; color: var(--azul); border-radius: 999px; padding: 4px 10px; }
.enc-migas .miga-sig { color: var(--azul-claro); opacity: 0.7; }
.enc-migas .miga-hecha { color: #FFFFFF; } /* autoentrega enviada: pasos hechos, ya no se pueden tocar */
.enc-migas .miga-sep { color: var(--azul-claro); }
.chip-usuario { font-size: 13px; background: var(--azul-medio); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* Contenido */
.cont { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 680px; margin: 0 auto; }
.tarjeta { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta h2 { margin: 0; font-size: 16px; font-weight: 600; }
.tarjeta p { margin: 0; line-height: 1.5; }
.nota { font-size: 13px; color: var(--gris); line-height: 1.45; margin: 0; }
.fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.fila:last-child { border-bottom: none; }
.fila > span:first-child { color: var(--gris); }
.fila > .opciones { flex-wrap: nowrap; flex-shrink: 0; }

/* Botones */
.btn { min-height: 52px; border-radius: 12px; border: 1px solid var(--borde-control); background: #FFFFFF; color: var(--azul); font-weight: 600; font-size: 16px; padding: 0 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; width: 100%; }
.btn-principal { background: var(--naranja); border-color: var(--naranja); color: #FFFFFF; }
.btn-azul { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.btn-chico { min-height: 44px; font-size: 14px; border-radius: 10px; width: auto; }
.btn:disabled { background: var(--apagado); border-color: var(--apagado); color: var(--gris); cursor: default; }
.opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.opcion { min-height: 44px; min-width: 56px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--borde-control); background: #FFFFFF; color: var(--texto); font-weight: 600; font-size: 14px; cursor: pointer; }
.opcion.sel { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 14px; color: var(--gris); }
.input { min-height: 48px; border-radius: 10px; border: 1px solid var(--borde-control); padding: 0 12px; font-size: 16px; background: #FFFFFF; width: 100%; }
.input:focus, .btn:focus-visible, .opcion:focus-visible { outline: 2px solid var(--azul-borde); outline-offset: 1px; }
.input-codigo { font-family: var(--titulos); font-size: 34px; letter-spacing: 0.5em; text-align: center; padding-left: 0.5em; min-height: 64px; }

/* Chips de estado */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; background: var(--neutro-fondo); color: var(--gris-oscuro); }
.chip-azul { background: var(--azul-fondo); color: var(--azul); }
.chip-verde { background: var(--verde-fondo); color: var(--verde); }
.chip-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.chip-rojo { background: var(--rojo-fondo); color: var(--rojo); }

/* Avisos */
.aviso { font-size: 14px; padding: 10px 12px; border-radius: 10px; line-height: 1.45; }
.aviso-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.aviso-rojo { background: var(--rojo-fondo); color: var(--rojo); }
.aviso-verde { background: var(--verde-fondo); color: var(--verde); }
.aviso-azul { background: var(--azul-fondo); color: var(--azul); }

/* Grilla de nombres (ingreso) */
.grilla-nombres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grilla-nombres .opcion { min-height: 56px; font-size: 16px; }

/* Lista de usuarios */
.usuario { display: flex; flex-direction: column; gap: 10px; }
.usuario-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.usuario-nombre { font-weight: 600; font-size: 16px; }
.usuario.inactivo .usuario-nombre { color: var(--gris); text-decoration: line-through; }
.usuario-acciones { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.en-linea { display: flex; gap: 8px; align-items: center; }
.en-linea .input { flex: 1; }

/* Mensaje flotante */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: #FFFFFF; padding: 12px 16px; border-radius: 10px; font-size: 14px; max-width: calc(100% - 32px); z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.2); }

/* Agenda */
.enc-agenda h1 { white-space: nowrap; font-size: clamp(26px, 8vw, 34px); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.enc-agenda .enc-fila > span:last-child { flex-shrink: 0; }
.enc-cuenta { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--azul-claro); letter-spacing: 0; vertical-align: middle; }
.enc-agenda { gap: 8px; position: sticky; top: 0; z-index: 30; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; box-shadow: 0 2px 6px rgba(15, 30, 60, .18); }
.lista-mov.entra-der { animation: entra-der .22s ease-out; }
.lista-mov.entra-izq { animation: entra-izq .22s ease-out; }
@keyframes entra-der { from { transform: translateX(40px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes entra-izq { from { transform: translateX(-40px); opacity: .3; } to { transform: none; opacity: 1; } }
/* Nombres de clientes y garantes en mayúscula (20/10/2026) */
input[data-cliente="nombre_completo"], input[data-garante="nombre"] { text-transform: uppercase; }
.enc-resumen { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.enc-resumen-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--azul-claro); }
.enc-resumen-txt small { font-size: 12px; }
.btn-redondo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--azul-borde); background: var(--azul-medio); color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-redondo.girando svg { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.dia-nav { display: flex; gap: 6px; }
.dia-nav button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--azul-borde); background: transparent; color: #FFFFFF; font-size: 13px; font-weight: 600; cursor: pointer; }
.dia-nav button.sel { background: #FFFFFF; color: var(--azul); border-color: #FFFFFF; }
.chip-prueba { white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; background: var(--ambar-fondo); color: var(--ambar); padding: 3px 8px; border-radius: 6px; }
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pestana { min-height: 52px; padding: 4px 6px; border-radius: 10px; border: 1px solid var(--borde-control); background: #FFFFFF; color: var(--azul); font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pestana span:last-child { font-weight: 500; }
.pestana.sel { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.grupo { display: flex; flex-direction: column; gap: 8px; }
.grupo-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.grupo-hora { font-family: var(--titulos); font-size: 26px; font-weight: 700; color: var(--azul); }
.grupo-lugar { font-size: 13px; color: var(--gris); }
.grupo-lugar.lugar-propio { font-weight: 700; color: var(--texto); }
.grupo-lugar.lugar-afuera { font-weight: 700; color: var(--rojo); }
.chip-vuelo { font-size: 12px; font-weight: 600; color: var(--azul); background: var(--azul-fondo); padding: 2px 8px; border-radius: 6px; }
.mov { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; color: var(--texto); text-align: left; cursor: pointer; width: 100%; }
.mov:active { background: #FBFAF7; }
.mov-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; }
.mov-tipo { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mov-tipo.entrega { color: var(--rojo); }
.mov-tipo.devolucion { color: var(--verde); }
.mov-cliente { font-weight: 400; font-size: 15px; color: var(--gris-oscuro); }
.mov-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mov-detalle { font-size: 15px; font-weight: 700; color: var(--texto); }
.mov-saldo { font-weight: 700; color: var(--rojo); }
.mov-nota { font-size: 13px; color: var(--gris-oscuro); background: var(--fondo); border-radius: 8px; padding: 6px 8px; }
.chip-estado-pendiente { background: var(--neutro-fondo); color: var(--gris-oscuro); }
.chip-estado-en_curso, .chip-estado-pausada { background: var(--ambar-fondo); color: var(--ambar); }
.chip-estado-hecha { background: var(--verde-fondo); color: var(--verde); }
.vacio { text-align: center; color: var(--gris); padding: 24px 8px; }

/* Ventana de confirmación */
.velo { position: fixed; inset: 0; background: rgba(28, 36, 48, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 18vh 20px 0; z-index: 40; }
.dialogo { width: 100%; max-width: 440px; background: #FFFFFF; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialogo h2 { margin: 0; font-family: var(--titulos); font-size: 26px; font-weight: 700; color: var(--azul); }
.dialogo p { margin: 0; line-height: 1.5; }

/* Entrega · datos del contrato */
.seccion-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.patente { font-family: var(--titulos); font-size: 30px; font-weight: 700; letter-spacing: 0.04em; color: var(--azul); }
.lista-autos { display: flex; flex-direction: column; gap: 8px; }
.opcion-auto { min-height: 48px; border-radius: 10px; border: 1px solid var(--borde-control); background: #FFFFFF; color: var(--texto); font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 14px; text-align: left; }
.opcion-auto.sel { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.fila > span:last-child { text-align: right; }
.cortar { overflow-wrap: anywhere; }
.saldo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 4px; font-size: 15px; font-weight: 600; }
.saldo-monto { font-family: var(--titulos); font-size: 28px; font-weight: 700; color: var(--azul); }
.tarjeta-guardada { border-radius: 12px; background: var(--azul); color: #FFFFFF; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.chip-guardada { font-size: 12px; background: var(--verde); padding: 3px 8px; border-radius: 6px; }
.tarjeta-numero { font-family: var(--titulos); font-size: 26px; letter-spacing: 0.1em; }
.input-tarjeta { font-size: 18px; letter-spacing: 0.06em; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.separador { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.foto-ticket { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; background: var(--fondo); }
.btn-foto { border-style: dashed; background: var(--fondo); }
.btn-foto.hecha { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde); }

/* Simulador */
.sim-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-acciones .opcion { min-height: 40px; font-size: 13px; }

.cargando { padding: 40px 20px; text-align: center; color: var(--gris); }
.pie { margin-top: auto; padding: 16px 20px 24px; font-size: 13px; color: var(--gris); text-align: center; }

/* Campos ocultos sin que el navegador los trate como contraseña (así no ofrece guardarlos ni autocompletarlos) */
.oculto { -webkit-text-security: disc; text-security: disc; }

/* Lápiz de edición, fechas editables, casilla y garantía combinable */
.btn-lapiz { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--borde-control); background: #FFFFFF; color: var(--azul); font-size: 14px; font-weight: 600; cursor: pointer; }
.bloque-fecha { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); min-height: 40px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; }
.grilla-garantia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grilla-garantia .pestana { min-height: 44px; font-size: 14px; }
select.input { appearance: auto; }

/* Entrega · revisión del auto */
.progreso { background: var(--azul); color: var(--azul-claro); padding: 0 20px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; z-index: 5; }
.progreso .barra { height: 8px; border-radius: 999px; background: var(--azul-medio); overflow: hidden; }
.progreso .barra div { height: 8px; background: #F2A36B; transition: width .3s; }
.item-rev { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.item-rev:last-child { border-bottom: none; }
.opcion.sel-ok { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde); }
.opcion.sel-obs { background: #FBE9DC; color: #9A4308; border-color: #9A4308; }
.input.area { min-height: 64px; padding: 8px 10px; resize: vertical; font-size: 15px; }
.grilla-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.foto-celda { position: relative; height: 92px; border-radius: 10px; border: 1px dashed #9AA4B2; background: var(--fondo); color: var(--gris-oscuro); font-size: 12px; line-height: 1.25; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; overflow: hidden; }
.foto-celda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.foto-celda .foto-titulo, .foto-celda .foto-estado { position: relative; text-align: center; }
.foto-celda .foto-titulo { font-weight: 600; }
.foto-celda.hecha { border: 1px solid var(--verde); background: var(--verde-fondo); color: var(--verde); }
.foto-celda.subiendo { border: 1px solid var(--ambar); background: var(--ambar-fondo); color: var(--ambar); }
.dano { display: flex; gap: 10px; align-items: flex-start; }
.dano img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.enlace { background: none; border: none; padding: 4px 0; color: var(--rojo); font-size: 13px; text-align: left; cursor: pointer; text-decoration: underline; }
.grilla-nafta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* Cámara guiada a pantalla completa */
.camara { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; justify-content: space-between; }
.camara video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camara-arriba { position: relative; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; color: #FFFFFF; background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,0)); text-align: center; }
.camara-num { font-size: 13px; color: var(--azul-claro); }
.camara-titulo { font-family: var(--titulos); font-size: 30px; font-weight: 700; }
/* Recomendación de cada foto: letra negra resaltada en amarillo (pedido del 14/10/2026) */
.camara-ayuda, .ayuda-foto { align-self: center; font-size: 16px; font-weight: 600; color: #111111; background: #FFE14D; padding: 4px 10px; border-radius: 6px; line-height: 1.35; }
.camara-ayuda:empty { display: none; }
.camara-abajo { position: relative; padding: 18px 20px 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.65)); }
.camara-btn { justify-self: start; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.3); color: #FFFFFF; font-weight: 600; cursor: pointer; }
.camara-disparo { width: 76px; height: 76px; border-radius: 999px; border: 5px solid #D5DEEB; background: var(--naranja); cursor: pointer; }
.camara-nota { justify-self: end; font-size: 12px; color: #E8ECF2; text-align: right; max-width: 90px; }
.camara-flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; transition: opacity .15s; }
.camara-flash.on { opacity: .8; }
.camara-girar { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%) rotate(90deg); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 12px; text-align: center; color: #FFFFFF; background: rgba(0,0,0,.45); pointer-events: none; }
.camara-girar[hidden] { display: none; }
.camara-girar b { font-family: var(--titulos); font-size: 20px; }
.camara-girar span { font-size: 13px; max-width: 240px; line-height: 1.3; }
.camara-girar .camara-girar-nota { font-size: 13px; color: #D5DEEB; }
.camara-girar-icono { font-size: 30px; animation: girar-cel 1.6s ease-in-out infinite; }
@keyframes girar-cel { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.camara-disparo:disabled { opacity: .35; cursor: not-allowed; }
.camara-arriba, .camara-abajo { z-index: 2; }
/* Rotación trabada y foto horizontal (03/11/2026): el celular se tiene de costado con el botón de la foto a la derecha,
   así que los textos van girados un cuarto de vuelta y pegados al borde derecho de la pantalla (arriba para quien mira) */
.camara-horizontal .camara-arriba { position: absolute; left: 0; top: 0; width: 100vh; width: 100dvh; box-sizing: border-box; padding: 14px 24px; transform-origin: top left; transform: translateX(100vw) rotate(90deg); }
.camara-horizontal .camara-titulo { font-size: 26px; }
.camara-horizontal .camara-abajo { margin-top: auto; }
.camara-horizontal .camara-btn, .camara-horizontal .camara-nota { transform: rotate(90deg); }
.camara-horizontal .camara-girar { top: 62%; }

/* Entrega · cobro */
.pago { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--verde-fondo); color: var(--verde); font-size: 14px; }
.pago span { font-size: 13px; }
.pago-quitar { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #9AB89F; background: #FFFFFF; color: var(--verde); font-weight: 700; font-size: 18px; cursor: pointer; flex-shrink: 0; }
.agregar-pago { display: flex; flex-direction: column; gap: 10px; background: var(--fondo); border-radius: 10px; padding: 12px; }
.grilla-metodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grilla-metodos .opcion { font-size: 13px; line-height: 1.2; padding: 4px 8px; }

/* Firma */
.firma-vacia { height: 130px; border-radius: 10px; border: 1px dashed #9AA4B2; background: var(--fondo); color: var(--azul); font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
.firma-hecha { min-height: 130px; border-radius: 10px; border: 1px solid var(--verde); background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.firma-hecha img { max-width: 90%; max-height: 90px; }
.firma-hecha span { font-size: 12px; color: var(--verde); text-align: center; }
.panel-firma { position: fixed; inset: 0; z-index: 70; background: #FFFFFF; display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 10px; }
.pf-cab { display: flex; flex-direction: column; gap: 2px; }
.pf-cab b { font-family: var(--titulos); font-size: 24px; color: var(--azul); }
.pf-cab span { font-size: 13px; color: var(--gris); }
.pf-zona { position: relative; flex: 1; border: 1px dashed #9AA4B2; border-radius: 12px; background: #FBFAF7; touch-action: none; overflow: hidden; }
.pf-zona canvas { position: absolute; inset: 0; touch-action: none; }
.pf-linea { position: absolute; left: 6%; right: 6%; bottom: 28%; border-bottom: 1px solid #C9CFD8; pointer-events: none; }
.pf-linea span { position: absolute; left: -2px; bottom: 2px; color: #9AA4B2; font-size: 18px; }
.pf-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-modos .btn.sel { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.pf-nombre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.panel-firma [hidden] { display: none !important; }
.pf-nombre canvas { position: static; }
.pf-botones:has([data-pf="borrar"][hidden]) { grid-template-columns: 1fr 1.4fr; }
.pf-botones { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }

/* Firma por link: botón de WhatsApp y estado del envío */
.btn-wsp { background: #1F7A4D; border-color: #1F7A4D; color: #FFFFFF; }
.lista-estado { display: flex; flex-direction: column; gap: 2px; background: var(--fondo); border-radius: 10px; padding: 8px 10px; }
.lista-estado .fila { font-size: 14px; }

/* Oficina (paso 7): más ancha en la computadora */
.cont-ancho { max-width: 900px; }
.oficina-seccion { display: flex; flex-direction: column; gap: 2px; }
.oficina-seccion h3 { margin: 8px 0 2px; font-size: 13px; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: 0.04em; }
.oficina-valor { text-align: right; }
.oficina-valor s { color: var(--gris); }
.tabla-seguro { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-seguro th, .tabla-seguro td { padding: 6px 8px; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
.tabla-seguro th { color: var(--gris); font-weight: 600; }
.tabla-editar td { padding: 4px; }
.tabla-editar .input { padding: 8px; font-size: 14px; min-width: 0; }
/* Tablet compartida: el nombre de arriba es un botón para cambiar de usuario */
.chip-cambiar { color: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,.55); font: inherit; font-size: 13px; }
.chip-cambiar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* Devolución: comparar con la foto de la entrega */
.comparar { display: flex; flex-direction: column; gap: 10px; }
.comparar-foto { display: block; border-radius: 10px; overflow: hidden; background: var(--neutro-fondo); }
.comparar-foto img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.foto-celda.actual { outline: 3px solid var(--azul); outline-offset: 1px; }
/* Devolución: combustible con el que salió el auto (azul difuminado, referencia y valor por defecto) */
.opcion.sel-salida { background: rgba(23, 58, 107, .14); border-color: rgba(23, 58, 107, .35); color: var(--azul); }

/* Oficina · devoluciones abiertas (etapa 2, paso 3) */
.tarjeta-destacada { border: 2px solid var(--rojo); }
.dialogo-ancho { max-width: 560px; max-height: calc(82vh - 20px); overflow-y: auto; }
.velo:has(.dialogo-ancho) { padding-top: 4vh; }
.velo:has(.dialogo-ancho) .dialogo-ancho { max-height: calc(96vh - 20px); }
.danos-oficina { display: flex; gap: 10px; flex-wrap: wrap; }
.dano-oficina { display: flex; flex-direction: column; gap: 4px; width: 140px; font-size: 12px; color: var(--texto); text-decoration: none; }
.dano-oficina img { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; }
.historial { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #F7F6F2; border-radius: 10px; font-size: 14px; }
.historial-item { display: flex; flex-direction: column; gap: 1px; padding-top: 6px; border-top: 1px solid var(--borde); }
.historial-item span { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.botones-oficina { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lista-adjuntos { display: flex; flex-direction: column; gap: 2px; }

/* Cierre de la devolución: daños con las opciones a la izquierda y la foto a la derecha (14/10/2026) */
.dano-cierre { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--borde); }
.dano-opciones { display: flex; flex-direction: column; gap: 8px; }
.dano-opciones .opcion { width: 100%; text-align: left; }
.dano-foto { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dano-foto img { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; display: block; }
.dano-foto figcaption { overflow-wrap: anywhere; }
.dano-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; width: 84px; flex-shrink: 0; font-size: 12px; color: var(--gris); text-align: center; line-height: 1.25; }
.dano-fig img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.btn-lavado { width: 100%; border: 1.5px dashed var(--ambar); color: var(--ambar); background: var(--ambar-fondo); font-weight: 600; }

/* Cámara con el celular o la tablet horizontal: el disparador a la derecha, al alcance del pulgar derecho (14/10/2026) */
@media (orientation: landscape) {
  .camara-arriba { padding: 10px 150px 10px 20px; }
  .camara-titulo { font-size: 24px; }
  .camara-abajo { position: absolute; top: 0; right: 0; bottom: 0; width: 130px; padding: 16px 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.65)); }
  .camara-btn { justify-self: auto; }
  .camara-disparo { width: 84px; height: 84px; }
  .camara-nota { justify-self: auto; text-align: center; max-width: 110px; }
}

/* Agenda: encabezado chico y menú de abajo (15/10/2026) */
.enc-agenda { padding: 12px 16px 12px; gap: 8px; }
.enc-agenda h1 { font-size: 26px; }
.enc-agenda .enc-fila { flex-wrap: wrap; row-gap: 8px; }
.enc-agenda .enc-fila + .enc-fila { flex-wrap: nowrap; }
.enc-actualizar { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--azul-borde); background: transparent; color: var(--azul-claro); font-size: 12.5px; cursor: pointer; }
.enc-actualizar svg { width: 16px; height: 16px; }
.enc-actualizar.girando svg { animation: girar 0.9s linear infinite; }
.enc-agenda .dia-nav { gap: 4px; }
.enc-agenda .dia-nav { margin-left: auto; }
.enc-agenda .dia-nav button { min-height: 32px; padding: 0 9px; }
.cont-con-menu { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.menu-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #FFFFFF; border-top: 1px solid var(--borde); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px rgba(28, 36, 48, 0.06); }
.menu-abajo > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: none; color: var(--gris); font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 10px; text-align: center; line-height: 1.15; }
.menu-abajo > .sel { color: var(--azul); background: var(--azul-fondo); }
.menu-icono { position: relative; font-size: 20px; line-height: 1; }
.menu-burbuja { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--azul); color: #FFFFFF; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.menu-burbuja.urgente { background: var(--rojo); }
.recordatorio { text-decoration: none; display: block; }
.lista-mas { display: flex; flex-direction: column; gap: 10px; }
.mas-titulo { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: 0.04em; }

/* Agenda en renglones de dos líneas (19/10/2026): hora y estado corto a la izquierda */
.lista-mov { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.renglon { display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 4px; row-gap: 2px; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--borde); background: none; color: var(--texto); text-align: left; cursor: pointer; width: 100%; font: inherit; }
.renglon:last-child { border-bottom: 0; }
.renglon:active { background: #FBFAF7; }
.r-hora { text-align: center; font-family: var(--titulos); font-size: 19px; font-weight: 700; color: var(--azul); line-height: 1.05; font-variant-numeric: tabular-nums; }
.r-linea1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 2px; min-width: 0; font-size: 13px; }
.r-linea1 .lugar-afuera { color: var(--rojo); font-weight: 700; }
.r-linea1 .lugar-propio { color: var(--texto); font-weight: 700; }
.r-tipo { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.r-tipo.entrega { color: var(--rojo); }
.r-tipo.devolucion { color: var(--verde); }
/* Autoentrega / autodevolución (28/10/2026): violeta, y la pregunta del horario de la noche en amarillo */
.r-tipo.auto { color: #5B3FA6; }
.r-auto-preg { grid-column: 2; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: #FFF1B8; color: #6B4E00; font-size: 13px; }
.r-auto-preg b { flex: 1; }
.r-auto-resp { min-width: 48px; padding: 6px 12px; border-radius: 8px; border: 1px solid #D9B84A; background: #FFFFFF; color: var(--texto); font-weight: 700; text-align: center; }
.btn-auto { border-color: #B9A6E6; color: #5B3FA6; }
.aviso-auto { background: #EEE9FA; color: #4A3290; }
/* Preparación de la autoentrega (28/10/2026) */
.opciones-col { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.opciones-col .opcion { width: 100%; min-height: 48px; }
.cosa-fila { display: flex; gap: 12px; align-items: flex-end; }
.cosa-foto { width: 120px; flex: none; }
.cosa-fila .campo { min-width: 0; margin: 0; }
.cosa-foto .grilla-fotos { grid-template-columns: 1fr; }
.r-patente { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-reserva { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #8A5A00; background: #FFF1CC; border: 1px solid #E8C66A; border-radius: 4px; padding: 0 4px; line-height: 16px; align-self: center; }
.r-vuelo { font-size: 11.5px; font-weight: 600; color: var(--azul); background: var(--azul-fondo); padding: 0 5px; border-radius: 5px; }
.r-vuelo-est { font-size: 11.5px; font-weight: 600; }
.r-vuelo-est.est-rojo { color: var(--rojo); }
.r-vuelo-est.est-verde { color: var(--verde); }
.r-vuelo-est.est-gris { color: var(--gris); font-weight: 500; }
.vuelos-act { margin: 0 0 6px; font-size: 12px; color: var(--gris); text-align: right; }
.vuelos-act.atrasado { color: var(--ambar); font-weight: 600; }
.r-linea2 { min-width: 0; font-size: 13.5px; color: var(--gris-oscuro); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.r-estado { font-size: 11px; font-weight: 700; color: var(--texto); text-align: center; white-space: nowrap; overflow: visible; letter-spacing: -0.01em; }
.r-estado.est-pendiente { color: var(--rojo); }
.renglon-en_curso, .renglon-pausada { background: #FFF4C2; }
.renglon-hecha { background: #DFF0DC; }
/* Autoentrega enviada al cliente (03/11/2026) */
.renglon-enviada { background: #EEE7FA; }
.r-estado.est-enviada { color: #5B3FA6; }
/* Eliminado en el sistema (03/11/2026): tachado y en gris, con el cartel sin tachar */
.renglon-eliminado { background: #F1F1EF; }
.renglon-eliminado .r-hora, .renglon-eliminado .r-linea1 > :not(.r-elim), .renglon-eliminado .r-linea2 { text-decoration: line-through; color: var(--gris) !important; opacity: 0.75; }
.renglon-eliminado .r-cliente { color: var(--gris); }
.r-elim { color: var(--rojo); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.r-cliente { color: #05080C; font-weight: 500; } /* nombre más oscuro que el resto (20/10/2026), sin llegar a negrita */
/* Pestañas de la agenda más bajas (19/10/2026) */
.cont-agenda > .pestanas .pestana { min-height: 38px; padding: 3px 6px; flex-direction: row; gap: 6px; }
@media (max-width: 480px) { .cont-agenda { padding-left: 10px; padding-right: 10px; } .cont-agenda .renglon { padding-left: 6px; padding-right: 8px; } }
.cont-agenda { overflow-x: clip; }
/* Garantía en efectivo en la agenda y al abrir la devolución (23/10/2026) */
.mov-gtia { color: var(--rojo); font-weight: 700; }
.aviso-gtia { color: var(--rojo); font-weight: 700; font-size: 17px; margin: 4px 0 8px; }
/* Vuelo demorado (23/10/2026): horario tachado y el nuevo debajo, resaltado */
.renglon-demora .r-hora { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.renglon-demora .r-linea1 { grid-column: 2; grid-row: 1; }
.renglon-demora .r-linea2 { grid-column: 2; grid-row: 2 / span 2; }
.renglon-demora .r-estado { grid-column: 1; grid-row: 3; }
.r-hora-vieja { font-size: 13px; color: var(--gris); text-decoration-thickness: 1px; text-decoration-color: rgba(90, 100, 114, .7); }
.r-hora-nueva { background: #FFE58A; border-radius: 5px; padding: 1px 4px 2px; display: flex; flex-direction: column; align-items: center; }
.r-hora-nueva small { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px; font-weight: 600; color: var(--texto); line-height: 1.1; white-space: nowrap; }
.r-aterrizo { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10.5px; font-weight: 700; color: var(--verde); line-height: 1.15; white-space: normal; text-align: center; }
/* Confirmar devoluciones de mañana (26/10/2026) */
.conf-tarjeta { margin-top: 12px; }
.conf-fila { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); }
.conf-datos { flex: 1; min-width: 0; font-size: 14px; }
.conf-boton { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none; }
.conf-boton.hecho { background: #FFFFFF; color: #1F7A4D; }
.conf-boton.btn-wsp-alt { background: #FFFFFF; color: #1F7A4D; border-style: dashed; }
.conf-ok { font-size: 12.5px; color: var(--verde); font-weight: 600; }
.conf-acciones { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.conf-omitir { background: none; border: 1px solid var(--linea); border-radius: 8px; padding: 5px 8px; color: var(--gris); font: inherit; font-size: 12.5px; cursor: pointer; }
.conf-omitida { font-size: 12.5px; color: var(--gris); font-weight: 600; }
.conf-fila.omitida .conf-datos { opacity: .65; }
.conf-cartel-omitida { display: inline-block; padding: 8px 12px; border-radius: 8px; background: #EEF0F3; color: #4A5260; font-size: 13px; font-weight: 600; text-align: center; max-width: 150px; }
.conf-desmarcar { background: none; border: 0; padding: 0; color: var(--gris); text-decoration: underline; font: inherit; font-weight: 400; cursor: pointer; }
/* "A revisar" con botón Revisado (26/10/2026) */
.revisar-aviso { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.revisar-aviso > span { min-width: 0; }
.revisado-btn { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 13px; background: #FFFFFF; }

/* Autoentrega · lo que ve el cliente (03/11/2026) */
.vista-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.vista-foto { margin: 0; min-width: 0; }
.vista-foto.ancha { grid-column: 1 / -1; }
.vista-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--fondo); }
.vista-foto figcaption { font-size: 12.5px; line-height: 1.3; margin-top: 4px; color: var(--gris-oscuro); }

/* Marca del auto en las fotos de la ubicación (03/11/2026) */
.marca-cont { position: relative; display: block; line-height: 0; }
.marca-cont img { display: block; width: 100%; height: auto; border-radius: 8px; }
.vista-foto .marca-cont img { aspect-ratio: auto; object-fit: initial; }
.marca-editor .marca-cont { cursor: crosshair; }
.marca-editor { margin: 10px 0; }
.marca-auto { position: absolute; width: 68px; height: 68px; border-radius: 50%; border: 6px solid #E0262B; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; }
.marca-auto > span { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #E0262B; color: #fff; font: 700 12px/1 sans-serif; letter-spacing: .5px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.marca-auto > span::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #E0262B; }
.vista-foto.pie-centrado figcaption { text-align: center; font-weight: 700; }
.vista-foto.pie-centro figcaption { text-align: center; } /* elementos principales: nombre en negrita y dónde está, centrados */
.marca-auto.abajo > span { bottom: auto; top: calc(100% + 10px); }
.marca-auto.abajo > span::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #E0262B; }
.estado-linea { margin: 0; font-size: 14px; line-height: 1.4; color: var(--gris); overflow-wrap: anywhere; }
.estado-linea.ok { color: var(--texto); }
.contacto-auto { display: flex; flex-direction: column; gap: 8px; }
.contacto-auto + .contacto-auto { border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 4px; }

/* Autodevolución (05/11/2026): fotos que mandó el cliente */
.autodev-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.autodev-grilla a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--gris, #5A6472); font-size: 12px; min-width: 0; }
.autodev-grilla img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #E7EAEF; display: block; }
/* Confirmaciones con dos botones (Devolución / Autodevolución, 06/11/2026): en el celular, datos arriba y botones abajo, lado a lado */
.conf-fila.dos .conf-boton { justify-content: center; }
@media (max-width: 640px) {
  .conf-fila.dos { flex-direction: column; align-items: stretch; gap: 8px; }
  .conf-fila.dos .conf-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .conf-fila.dos .conf-boton { width: 100%; padding: 0 8px; }
  .conf-fila.dos .conf-omitir, .conf-fila.dos .conf-cartel-omitida { grid-column: 1 / -1; max-width: none; }
}