/* ===================================================================== Rendio · Rutas › Asignación v2 (entrega del UX, 10-oct-2026) Port de Visual/entrega-asignacion-v2-2026-10-10/src/asignacion-v2.css. Todo va acotado a #routes-v2 y a los overlays .rv2-*: no toca estilos globales de la app ni la vista anterior (#routes-ui). QUÉ CAMBIA RESPECTO A LA ENTREGA (y por qué): · Los tokens no van en :root sino en #routes-v2 y en sus overlays (la app no declara nada en :root; ver styles.css › #routes-ui). · El marco .proto-* no se porta: en la app manda el shell del admin. · Los puntos de quiebre de la lista: la entrega los mide contra la ventana con un riel de 72 px. En la app el menú lateral mide 264 px (o 72 plegado), así que a 1440 px quedaban 1144 px y la fila de escritorio (774 px fijos) no cabía junto al detalle de 420. admin-rutas-v2.js mide el ancho REAL de #routes-v2 y pone data-lay / data-det / data-fila; aquí solo se leen. Sin esos atributos (jsdom, o antes de medir) se ve el diseño de escritorio tal cual. El celular (≤ 767 px) sigue por media query, igual que en la entrega. · El reloj de anillos ya no aparece (README §1): lo reemplaza la vista Carros. · ASIGNACIÓN SIMPLE (15-oct-2026, pedido de la profa): sin chips, sin barra de horas, sin vista Carros. Una frase, tarjetas Avisos/Conductores, filas con los nombres (se arrastran) y el detalle con el mapa del recorrido. ===================================================================== */ #routes-v2, .rv2-sheet, .rv2-scrim, .rv2-toast { /* Tokens existentes de #routes-ui (styles.css) */ --bg: #F4F3F0; --panel: #FFFFFF; --panel2: #F7F6F3; --ink: #1E1C19; --ink2: #5F5B55; --ink3: #9D998F; --line: #E7E5DF; --line2: #D6D2C9; --orange: #E2551A; --orange-soft: #FBE5D8; --green: #16936A; --green-soft: #E3F1EA; --amber: #C9810F; --amber-soft: #FBEBCF; --red: #D6473B; --red-soft: #FADFDC; --h2a: #E2551A; /* salida casa → MDE */ --a2h: #1BB07E; /* llegada MDE → casa */ --hotel: #F0A21E; /* con hotel */ --shadow: 0 6px 18px rgba(30, 28, 25, .07); --shadow-lg: 0 22px 44px rgba(30, 28, 25, .18); --font: "Hanken Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace; /* Nuevos (v2): versiones de texto con contraste ≥ 4.5:1 sobre su fondo suave */ --red-ink: #C23A2F; --amber-ink: #9A6208; --orange-ink: #C84A14; --risk-row: #FFF5EF; --focus: 0 0 0 3px rgba(226, 85, 26, .35); font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; } #routes-v2 *, .rv2-sheet *, .rv2-toast * { box-sizing: border-box; } #routes-v2 :is(button, input, select), .rv2-sheet :is(button, input, select), .rv2-toast button { font: inherit; color: inherit; } #routes-v2 button, .rv2-sheet button, .rv2-toast button { cursor: pointer; } #routes-v2 button:disabled, .rv2-sheet button:disabled { cursor: not-allowed; } #routes-v2 .mono, .rv2-sheet .mono { font-family: var(--mono); } #routes-v2[hidden], #routes-v2 [hidden], .rv2-sheet[hidden], .rv2-sheet [hidden], .rv2-scrim[hidden], .rv2-toast[hidden] { display: none !important; } #routes-v2 :focus-visible, .rv2-sheet :focus-visible, .rv2-toast :focus-visible { outline: none; box-shadow: var(--focus); } #routes-v2 h1, #routes-v2 h2, #routes-v2 h3, #routes-v2 p, .rv2-sheet h2, .rv2-sheet h3, .rv2-sheet p { margin: 0; } /* La vista anterior queda en el DOM (no se borró) pero sin ocupar espacio mientras la v2 está activa. El overlay «Optimizando…» y el mapa del trayecto son de ella y se siguen usando desde la v2, por eso no se esconden. */ #routes-ui.rv2-fuera { height: 0 !important; min-height: 0 !important; border: 0 !important; overflow: visible !important; } #routes-ui.rv2-fuera > :not(.mapovl):not(.ovl) { display: none !important; } /* Enlace «Vista nueva» dentro de la vista anterior */ #routes-ui .rv2-vista-nueva { border: 0; background: transparent; color: var(--orange); font: 700 12.5px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 2px; } #routes-ui .rv2-vista-nueva[hidden] { display: none; } /* ---------- Contenedor ---------- */ #routes-v2 { height: calc(100dvh - 110px); min-height: 560px; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } /* Barra superior */ #routes-v2 .rv2-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } #routes-v2 .rv2-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 6px 0 0; } #routes-v2 .rv2-day { display: flex; align-items: center; gap: 6px; } #routes-v2 .rv2-day b { min-width: 92px; text-align: center; font-size: 14px; font-weight: 600; } #routes-v2 .rv2-ic, .rv2-sheet .rv2-ic { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); flex: 0 0 auto; text-decoration: none; padding: 0; } #routes-v2 .rv2-ic:hover, .rv2-sheet .rv2-ic:hover { border-color: var(--ink3); } #routes-v2 .rv2-ic:disabled { opacity: .4; } #routes-v2 .rv2-ic svg, .rv2-sheet .rv2-ic svg { width: 15px; height: 15px; } /* Chip «Publicado» (pedido de la profa): mismo molde que la etiqueta mono del prototipo. */ #routes-v2 .rv2-pub { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } #routes-v2 .rv2-pub.is-changed { color: var(--amber-ink); background: var(--amber-soft); } #routes-v2 .rv2-search, .rv2-sheet .rv2-search { display: flex; align-items: center; gap: 8px; height: 36px; width: 400px; max-width: 100%; padding: 0 10px 0 12px; background: var(--panel); border: 1px solid var(--line2); border-radius: 9px; } #routes-v2 .rv2-search:focus-within, .rv2-sheet .rv2-search:focus-within { border-color: var(--orange); box-shadow: var(--focus); } #routes-v2 .rv2-search svg, .rv2-sheet .rv2-search svg { width: 15px; height: 15px; color: var(--ink3); flex: 0 0 auto; } #routes-v2 .rv2-search input:focus-visible, .rv2-sheet .rv2-search input:focus-visible { box-shadow: none; } #routes-v2 .rv2-search input, .rv2-sheet .rv2-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; padding: 0; } #routes-v2 .rv2-search kbd { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); border: 1px solid var(--line2); border-radius: 5px; padding: 0 5px; } #routes-v2 .rv2-spacer { flex: 1; } /* Botón de WhatsApp: solo el logo, monocromo en tinta secundaria (sutil). */ #routes-v2 .rv2-wa { width: 38px; height: 38px; border-radius: 9px; color: var(--ink2); } #routes-v2 .rv2-wa svg { width: 19px; height: 19px; } #routes-v2 .rv2-wa:hover { color: var(--ink); } #routes-v2 .rv2-btn, .rv2-sheet .rv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 37px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel); font-size: 13.5px; font-weight: 700; white-space: nowrap; } #routes-v2 .rv2-btn:hover, .rv2-sheet .rv2-btn:hover { border-color: var(--ink3); } #routes-v2 .rv2-btn:disabled, .rv2-sheet .rv2-btn:disabled { opacity: .55; } #routes-v2 .rv2-btn svg, .rv2-sheet .rv2-btn svg { width: 15px; height: 15px; } #routes-v2 .rv2-btn--cta, .rv2-sheet .rv2-btn--cta { background: var(--orange); border-color: var(--orange); color: #FFF; box-shadow: 0 6px 14px rgba(226, 85, 26, .3); } #routes-v2 .rv2-btn--cta:hover, .rv2-sheet .rv2-btn--cta:hover { background: #CF4B14; border-color: #CF4B14; } #routes-v2 .rv2-btn--cta:disabled, .rv2-sheet .rv2-btn--cta:disabled { background: #E9B9A3; border-color: #E9B9A3; box-shadow: none; opacity: 1; } #routes-v2 .rv2-btn--soft, .rv2-sheet .rv2-btn--soft { background: var(--orange-soft); border-color: #EE9A74; color: var(--orange-ink); } #routes-v2 .rv2-btn--sm, .rv2-sheet .rv2-btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; } #routes-v2 .rv2-btn--block { width: 100%; height: 46px; font-size: 15px; border-radius: 12px; } #routes-v2 .rv2-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; background: #FFF; color: var(--orange); } /* ---------- Asignación simple (15-oct-2026) ---------- Una frase de lo que falta, tarjetas Avisos / Conductores, filas con los tripulantes por nombre (se arrastran) y el detalle con el mapa. */ #routes-v2 .rv2-say { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; } #routes-v2 .rv2-say i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; } #routes-v2 .rv2-say.is-ok i { background: var(--green); } #routes-v2 .rv2-say a { color: var(--orange-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #routes-v2 .rv2-say small { margin-left: auto; color: var(--ink3); font-size: 12.5px; } /* Escenario: (tarjetas + vueltas) a la izquierda, detalle con mapa a la derecha */ #routes-v2 .rv2-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; padding: 16px; } #routes-v2 .rv2-listwrap { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 2px 8px 0; } #routes-v2 .rv2-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; } #routes-v2 .rv2-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; } #routes-v2 .rv2-summary .rv2-card { padding: 10px 14px; } /* 27-oct: Avisos y Conductores más bajos */ #routes-v2 .rv2-card h2 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; } #routes-v2 .rv2-card h2 .n { font-family: var(--mono); font-size: 11px; background: var(--red-soft); color: var(--red-ink); border-radius: 999px; padding: 2px 8px; } #routes-v2 .rv2-card .sub { margin: 3px 0 10px; font-size: 12.5px; color: var(--ink2); line-height: 1.45; } /* 27-oct (Camilo): «reduce el tamaño del cuadro de avisos». Renglones más bajos y la caja tope en ~3 avisos (el resto se ve deslizando dentro de la caja). */ #routes-v2 .rv2-al { list-style: none; margin: 8px 0 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 5px; max-height: 172px; overflow: auto; overscroll-behavior: contain; } #routes-v2 .rv2-card .sub + .rv2-al { margin-top: 0; } #routes-v2 .rv2-al li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 9px; background: #FFF6F4; border: 1px solid #F6D6D1; font-size: 12.5px; line-height: 1.3; } #routes-v2 .rv2-al li .t { flex: 1; min-width: 0; } #routes-v2 .rv2-al li small { display: block; color: var(--ink2); font-size: 11.5px; margin-top: 1px; } #routes-v2 .rv2-al li .rv2-btn--sm { height: 30px; padding: 0 10px; flex: 0 0 auto; } #routes-v2 .rv2-al li.is-ok { background: var(--green-soft); border-color: #C9E6D7; color: #0F6E4F; font-weight: 700; } #routes-v2 .rv2-dgrid { display: grid; gap: 6px; align-items: stretch; } #routes-v2 .rv2-dfree { margin: 10px 0 0; } #routes-v2 .rv2-dfree b { font-weight: 700; color: var(--ink); } #routes-v2 .rv2-dgrid .hd { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; padding: 0 2px; } #routes-v2 .rv2-dgrid .car { font-weight: 800; font-size: 13.5px; align-self: center; } /* 0132: «Carro 1» se toca para elegir el carro de la flota (debajo, su placa). */ #routes-v2 .rv2-dgrid .carbtn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 44px; padding: 6px 6px; border: 1px dashed var(--line2); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } #routes-v2 .rv2-dgrid .carbtn b { font-weight: 800; font-size: 13.5px; } #routes-v2 .rv2-dgrid .carbtn small { font-size: 11.5px; color: var(--ink2); font-weight: 600; } #routes-v2 .rv2-dgrid .cell { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; text-align: left; background: var(--panel); display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 42px; min-width: 0; } #routes-v2 .rv2-dgrid .cell b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #routes-v2 .rv2-dgrid .cell small { font-size: 11px; color: var(--ink3); } #routes-v2 .rv2-dgrid button.cell:hover { border-color: var(--ink3); } #routes-v2 .rv2-dgrid .cell.need { border: 1.5px solid var(--red); background: #FFF6F4; } #routes-v2 .rv2-dgrid .cell.need b { color: var(--red-ink); } #routes-v2 .rv2-dgrid .cell.none { border-color: transparent; background: none; font-size: 11.5px; color: var(--ink3); } /* Vueltas: una tarjeta por vuelta, agrupadas por hora (de llegada a JMC o de aterrizaje) */ #routes-v2 .rv2-list { display: flex; flex-direction: column; gap: 14px; } #routes-v2 .rv2-gwrap { display: flex; flex-direction: column; gap: 8px; } #routes-v2 .rv2-hour { font-family: var(--mono); font-size: 12px; color: var(--ink2); padding: 2px 2px 0; } #routes-v2 .rv2-hour strong { color: var(--ink); } /* Madrugada = cierre del turno PM del día anterior (20-oct-2026) */ #routes-v2 .rv2-mad { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel2); } #routes-v2 .rv2-madh b, #routes-v2 .rv2-madsig b { display: block; font-size: 13.5px; color: var(--ink); } #routes-v2 .rv2-madh small, #routes-v2 .rv2-madsig small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink2); margin-top: 2px; } #routes-v2 .rv2-dayh { font-size: 13px; font-weight: 700; color: var(--ink); padding: 6px 2px 0; border-top: 1px solid var(--line); } /* Lista de los jefes 26-oct: las vueltas terminadas se recogen al final. */ /* 0140: Entregas de turno (admin-entregas.js). */ #routes-v2 .rv2-entregas { margin: 0 0 14px; } #routes-v2 .rv2-ents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #routes-v2 .rv2-ent { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } #routes-v2 .rv2-ent-t { display: flex; flex-direction: column; } #routes-v2 .rv2-ent-t b { font-family: var(--mono); font-size: 14px; } #routes-v2 .rv2-ent-t small, #routes-v2 .rv2-ent-st { font-size: 12px; color: var(--ink3); } #routes-v2 .rv2-ent-m { display: flex; flex-direction: column; min-width: 0; } #routes-v2 .rv2-ent-m span { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; } #routes-v2 .rv2-ent[data-k="ok"] .rv2-ent-st { color: var(--green); font-weight: 700; } #routes-v2 .rv2-ent[data-k="warn"] { border-color: var(--orange); } #routes-v2 .rv2-ent[data-k="warn"] .rv2-ent-st { color: var(--orange-ink); font-weight: 700; } #routes-v2 .rv2-ent[data-k="bad"] { border-color: var(--red); } #routes-v2 .rv2-ent[data-k="bad"] .rv2-ent-st { color: var(--red); font-weight: 700; } #routes-v2 .rv2-ent-edit { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } #routes-v2 .rv2-ent-edit select, #routes-v2 .rv2-ent-txt { font: inherit; font-size: 16px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); max-width: 100%; } @media (max-width: 767px) { #routes-v2 .rv2-ent { grid-template-columns: minmax(0, 1fr) auto; } #routes-v2 .rv2-ent-t { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; } } #routes-v2 .rv2-hechas { display: flex; flex-direction: column; gap: 8px; } #routes-v2 .rv2-hechas-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } #routes-v2 .rv2-hechas-b b { font-size: 13.5px; color: var(--green); } #routes-v2 .rv2-hechas-b small { font-size: 12.5px; color: var(--ink2); white-space: nowrap; } #routes-v2 .rv2-madsig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel2); } #routes-v2 .rv2-madsig > div { flex: 1 1 220px; min-width: 0; } #routes-v2 .t-risk, .rv2-sheet .t-risk { color: var(--red-ink); } #routes-v2 .t-nod { color: var(--orange-ink); } #routes-v2 .t-adj, .rv2-sheet .t-adj { color: var(--amber-ink); } #routes-v2 .t-ok, .rv2-sheet .t-ok { color: var(--green); } #routes-v2 .rv2-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 13px; transition: border-color .15s, box-shadow .15s, opacity .15s, background .15s; } #routes-v2 .rv2-row:hover { border-color: var(--line2); } #routes-v2 .rv2-row[data-s="risk"] { border-color: #F0C2BB; box-shadow: inset 4px 0 0 var(--red); } #routes-v2 .rv2-row[aria-current="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(226, 85, 26, .22); } #routes-v2 .rv2-row[data-s="risk"][aria-current="true"] { box-shadow: inset 4px 0 0 var(--red), 0 0 0 2px rgba(226, 85, 26, .22); } #routes-v2 .rv2-row .when b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; } #routes-v2 .rv2-row .when small { display: block; font-size: 12px; color: var(--ink3); margin-top: 3px; line-height: 1.35; } #routes-v2 .rv2-row .when small.late { color: var(--red-ink); font-weight: 700; } /* Vuelta terminada o pasada (26-oct-2026): degradada, con su resultado en el borde — verde sin novedad, rojo con novedad, gris si nadie la marcó. Al pasar el mouse o abrirla vuelve a verse entera. */ #routes-v2 .rv2-row[data-fin] { opacity: .6; } #routes-v2 .rv2-row[data-fin]:hover, #routes-v2 .rv2-row[data-fin][aria-current="true"], #routes-v2 .rv2-row[data-fin]:focus-visible { opacity: 1; } #routes-v2 .rv2-row[data-fin="ok"] { box-shadow: inset 4px 0 0 var(--green); background: color-mix(in srgb, var(--green-soft) 55%, var(--panel)); } #routes-v2 .rv2-row[data-fin="bad"] { box-shadow: inset 4px 0 0 var(--red); background: color-mix(in srgb, var(--red-soft) 55%, var(--panel)); border-color: #F0C2BB; } #routes-v2 .rv2-row[data-fin="sinmarcar"] { box-shadow: inset 4px 0 0 var(--line2); background: var(--panel2); } #routes-v2 .rv2-row[data-fin="ok"][aria-current="true"] { box-shadow: inset 4px 0 0 var(--green), 0 0 0 2px rgba(226, 85, 26, .22); } #routes-v2 .rv2-row[data-fin="bad"][aria-current="true"] { box-shadow: inset 4px 0 0 var(--red), 0 0 0 2px rgba(226, 85, 26, .22); } #routes-v2 .rv2-row[data-fin="sinmarcar"][aria-current="true"] { box-shadow: inset 4px 0 0 var(--line2), 0 0 0 2px rgba(226, 85, 26, .22); } #routes-v2 .rv2-row .when small.done { color: var(--green); font-weight: 700; } #routes-v2 .rv2-row .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; min-width: 0; } #routes-v2 .rv2-row .l1 .car { font-weight: 800; } /* 27-oct (Camilo): «Cambiar hora» en todas las vueltas, a la derecha de la fila. */ #routes-v2 .rv2-row .l1 .rv2-hbtn { margin-left: auto; height: 28px; padding: 0 10px; font-size: 12px; flex: 0 0 auto; } #routes-v2 .rv2-caprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } #routes-v2 .rv2-caprow .rv2-cap { margin: 0; } #routes-v2 .rv2-row .l1 .drv { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #routes-v2 .rv2-row .l1 .drv.none { color: var(--red-ink); font-weight: 700; } #routes-v2 .rv2-row .l1 .tag { font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 2px 8px; } /* Conductor puesto solo a esa vuelta (26-oct-2026). */ #routes-v2 .rv2-row .l1 .tag.own { color: var(--orange-ink); background: var(--orange-soft); white-space: nowrap; } /* 0126: la vuelta delegada (la hace alguien de afuera). */ #routes-v2 .rv2-row .l1 .drv.deleg { color: var(--orange-ink); font-weight: 700; } /* 0151: dejada para tomar (sin conductor, a propósito) y la que ya tomó un conductor. */ #routes-v2 .rv2-row .l1 .drv.tomar { color: #4338CA; font-weight: 700; } #routes-v2 .rv2-row .l1 .tag.tomar { color: #4338CA; background: #EEF0FF; white-space: nowrap; } .rv2-sheet .rv2-opt--deleg .t b { color: var(--orange-ink); } /* 27-oct: conductores de confianza (libreta) con «Quitar», y la casilla para guardar uno nuevo. */ .rv2-sheet .rv2-dlg-row { display: flex; align-items: center; gap: 8px; } .rv2-sheet .rv2-dlg-row .rv2-opt { flex: 1; min-width: 0; } .rv2-sheet .rv2-dlg-row .rv2-btn--sm { flex: 0 0 auto; height: 44px; } .rv2-sheet .rv2-dlg-save { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink); } .rv2-sheet .rv2-dlg-save input { width: 20px; height: 20px; accent-color: var(--orange); } #routes-v2 .rv2-pill { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-ink); } #routes-v2 .rv2-pill.llegada { background: var(--green-soft); color: var(--green); } #routes-v2 .rv2-pill.hotel { background: var(--amber-soft); color: var(--amber-ink); } #routes-v2 .rv2-row .people { display: flex; flex-wrap: wrap; gap: 6px; } #routes-v2 .rv2-p { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); font-size: 13px; max-width: 100%; cursor: grab; } #routes-v2 .rv2-p:hover { border-color: var(--orange); background: #FFF8F3; } #routes-v2 .rv2-p:disabled { cursor: default; opacity: .6; } #routes-v2 .rv2-p:disabled:hover { border-color: var(--line); background: var(--panel2); } #routes-v2 .rv2-p .mono { font-size: 11.5px; color: var(--ink3); } #routes-v2 .rv2-p .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #routes-v2 .rv2-p .pl { color: var(--ink3); font-size: 12px; white-space: nowrap; } /* Llegada (27-oct): «11:35 Leslie Acosta (AV9374) → Ébano». El vuelo o el hotel entre paréntesis como en la lista del jefe; si no cabe, el destino baja de renglón en vez de cortar el nombre. */ #routes-v2 .rv2-p--lle { flex-wrap: wrap; row-gap: 2px; text-align: left; } #routes-v2 .rv2-p .org { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink2); white-space: nowrap; } /* Arrastrando: las vueltas que lo pueden recibir se marcan; las demás se apagan */ #routes-v2.is-dragging .rv2-row:not(.is-drop) { opacity: .45; } #routes-v2 .rv2-row.is-drop { border: 1.5px dashed var(--green); } #routes-v2 .rv2-row.is-over { background: #EEF8F3; border-style: solid; } #routes-v2 mark { background: #FFE7A8; color: inherit; border-radius: 3px; padding: 0 1px; } #routes-v2 .rv2-empty { padding: 48px 24px; text-align: center; color: var(--ink3); font-size: 14px; line-height: 1.5; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } #routes-v2 .rv2-empty b { display: block; color: var(--ink2); font-size: 15px; margin-bottom: 4px; } #routes-v2 .rv2-empty .rv2-btn { margin-top: 14px; } /* Píldora de estado */ #routes-v2 .st, .rv2-sheet .st { display: inline-flex; justify-content: center; align-items: center; width: 108px; height: 24px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; } #routes-v2 .st--ok, .rv2-sheet .st--ok { background: var(--green-soft); color: var(--green); } #routes-v2 .st--adj, .rv2-sheet .st--adj { background: var(--amber-soft); color: var(--amber-ink); } #routes-v2 .st--risk, .rv2-sheet .st--risk { background: var(--red-soft); color: var(--red-ink); } #routes-v2 .st--nodriver, .rv2-sheet .st--nodriver { background: var(--panel); color: var(--orange-ink); border: 1px solid var(--orange); } #routes-v2 .st--off, .rv2-sheet .st--off { background: var(--panel2); color: var(--ink3); } #routes-v2 .st--auto, .rv2-sheet .st--auto { width: auto; padding: 0 10px; } #routes-v2 .rv2-av, .rv2-sheet .rv2-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #FFF; font-size: 11.5px; font-weight: 800; background: #5B6B7A; flex: 0 0 auto; } /* Detalle */ #routes-v2 .rv2-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } #routes-v2 .rv2-dhead { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 12px; } #routes-v2 .rv2-dhead h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; } #routes-v2 .rv2-dhead p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink2); } #routes-v2 .rv2-dhead .rv2-back { display: none; } #routes-v2 .rv2-dhead .x { margin-left: auto; display: none; } #routes-v2 .rv2-dbody { flex: 1; overflow: auto; padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; } #routes-v2 .rv2-alert { margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; line-height: 1.45; } #routes-v2 .rv2-alert--risk { background: var(--red-soft); color: var(--red-ink); } #routes-v2 .rv2-alert--adj { background: var(--amber-soft); color: var(--amber-ink); } #routes-v2 .rv2-alert--ok { background: var(--green-soft); color: var(--green); } #routes-v2 .rv2-alert--nodriver { background: var(--orange-soft); color: var(--orange-ink); } #routes-v2 .rv2-alert--sinmarcar { background: var(--panel2); color: var(--ink2); } #routes-v2 .rv2-note { font-size: 12px; color: var(--ink2); line-height: 1.5; } #routes-v2 .rv2-sug { padding: 14px; background: #FFF6F0; border: 1px solid #F5C7AE; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; } #routes-v2 .rv2-sug h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; } #routes-v2 .rv2-sug h3 svg { width: 15px; height: 15px; color: var(--orange); } #routes-v2 .rv2-sug p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink2); } #routes-v2 .rv2-sug p b { color: var(--ink); } #routes-v2 .rv2-sug .acts { display: flex; gap: 8px; flex-wrap: wrap; } #routes-v2 .rv2-drv { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; color: var(--ink2); } #routes-v2 .rv2-drv b { color: var(--ink); display: block; font-size: 13px; } #routes-v2 .rv2-drv > div { flex: 1; min-width: 0; } #routes-v2 .rv2-cap, .rv2-sheet .rv2-cap { margin: 4px 0 0; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; } #routes-v2 .rv2-stops { list-style: none; margin: 0; padding: 0; } #routes-v2 .rv2-stops li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: #8A867E; } #routes-v2 .rv2-stops li:last-child { border-bottom: 0; } #routes-v2 .rv2-stops li .mono { font-size: 12.5px; font-weight: 700; color: var(--ink); } #routes-v2 .rv2-stops li b { display: block; color: var(--ink); } #routes-v2 .rv2-stops li.end .mono.neg { color: var(--red-ink); } #routes-v2 .rv2-stops .rv2-ic { color: var(--orange); } #routes-v2 .rv2-stops .rv2-ic:disabled { color: var(--ink3); } #routes-v2 .rv2-dfoot { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); } #routes-v2 .rv2-dfoot .rv2-btn { flex: 1; padding: 0 8px; } #routes-v2 .rv2-dempty { margin: auto; padding: 40px; text-align: center; color: var(--ink3); font-size: 13.5px; } #routes-v2 .rv2-dtop, #routes-v2 .rv2-dbot { display: flex; flex-direction: column; gap: 14px; } #routes-v2 .rv2-dtop:empty, #routes-v2 .rv2-dbot:empty { display: none; } #routes-v2 .rv2-mapwrap { display: flex; flex-direction: column; gap: 6px; } #routes-v2 .rv2-mapnote { font-size: 12.5px; color: var(--ink2); min-height: 0; } #routes-v2 .rv2-mapnote:empty { display: none; } #routes-v2 .rv2-mapnote.is-prev { color: var(--orange-ink); font-weight: 700; } #routes-v2 .rv2-map { height: 260px; border-radius: 12px; border: 1px solid var(--line); background: #EEF0EC; overflow: hidden; z-index: 0; } #routes-v2 .rv2-nomap { height: 100%; display: grid; place-items: center; color: var(--ink3); font-size: 13px; padding: 20px; text-align: center; } .rv2-mk { width: 26px; height: 26px; border-radius: 50%; color: #FFF; font: 800 12px "Hanken Grotesk", system-ui, sans-serif; display: grid; place-items: center; border: 2px solid #FFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } .rv2-mk.sal { background: #E2551A; } .rv2-mk.lle { background: #1BB07E; } .rv2-mk.new { background: #FFF; color: #C84A14; border: 3px solid #E2551A; } .rv2-mk.jmc { width: 40px; height: 24px; border-radius: 7px; background: #1E1C19; font-size: 10.5px; letter-spacing: .04em; } #routes-v2 .rv2-stops li[draggable="true"] { cursor: grab; } #routes-v2 .rv2-stops .rv2-mv { color: var(--orange-ink); } #routes-v2 .rv2-mvhead { display: flex; align-items: flex-start; gap: 10px; } #routes-v2 .rv2-mvhead > div { flex: 1; min-width: 0; } #routes-v2 .rv2-mvhead h3 { font-size: 15.5px; font-weight: 800; } #routes-v2 .rv2-mvhead p { margin-top: 3px; font-size: 12.5px; color: var(--ink2); line-height: 1.45; } #routes-v2 .rv2-mvopts { display: flex; flex-direction: column; gap: 8px; } #routes-v2 .rv2-opt { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } #routes-v2 .rv2-opt:hover, #routes-v2 .rv2-opt:focus-visible { border-color: var(--orange); background: #FFF8F3; } #routes-v2 .rv2-opt .t { font-size: 13.5px; } #routes-v2 .rv2-opt small { grid-column: 1 / -1; color: #8A867E; font-size: 12px; } #routes-v2 .rv2-opt .st { width: auto; padding: 0 9px; height: 22px; font-size: 11px; } #routes-v2 .rv2-opt--drop .t b { color: var(--red-ink); } #routes-v2 .rv2-opt--sola, .rv2-sheet .rv2-opt--sola { margin-top: 10px; } #routes-v2 .rv2-opt--sola .t b, .rv2-sheet .rv2-opt--sola .t b { color: var(--ink, #1F1D1A); } #routes-v2 .rv2-impact { font-size: 12.5px; color: var(--ink2); padding: 8px 12px; background: var(--panel2); border-radius: 10px; line-height: 1.5; } #routes-v2 .rv2-impact.is-warn { background: var(--amber-soft); color: var(--amber-ink); } #routes-v2 .rv2-linkbtn { border: 0; background: transparent; padding: 4px 0; font-size: 12.5px; font-weight: 700; color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; text-align: left; align-self: flex-start; } /* Barra fija inferior (solo celular) */ #routes-v2 .rv2-mbar { display: none; } /* Hojas (modal en PC, hoja inferior en celular) */ .rv2-scrim { position: fixed; inset: 0; background: rgba(30, 28, 25, .42); z-index: 60; backdrop-filter: blur(2px); } .rv2-sheet { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, 94vw); max-height: 86dvh; display: flex; flex-direction: column; background: var(--panel); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; } .rv2-sheet .rv2-sh-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 10px; } .rv2-sheet .rv2-sh-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .rv2-sheet .rv2-sh-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink2); } .rv2-sheet .rv2-sh-head .rv2-ic { margin-left: auto; } .rv2-sheet .rv2-sh-body { overflow: auto; padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 10px; } .rv2-sheet .rv2-sh-foot { display: flex; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; } .rv2-sheet .rv2-sh-foot .rv2-btn { flex: 1; height: 44px; } .rv2-sheet .rv2-handle { display: none; } .rv2-sheet .rv2-opt { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } /* 0131: «Delegar a…» — nombre y teléfono escritos a mano (16 px: iOS no hace zoom). */ .rv2-sheet .rv2-dlg-form { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 4px; } .rv2-sheet .rv2-dlg-form[hidden] { display: none; } .rv2-sheet .rv2-inp { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box; } .rv2-sheet .rv2-inp:focus { outline: 2px solid var(--orange, #E2551A); outline-offset: 1px; } .rv2-sheet .rv2-opt:hover { border-color: var(--ink3); } .rv2-sheet .rv2-opt:disabled { opacity: .6; } .rv2-sheet .rv2-opt:disabled:hover { border-color: var(--line); } .rv2-sheet .rv2-opt[aria-checked="true"] { border: 2px solid var(--orange); background: #FFF6F0; padding: 11px 13px; } .rv2-sheet .rv2-opt .t { font-size: 14px; } .rv2-sheet .rv2-opt small { grid-column: 1 / -1; color: #8A867E; font-size: 12.5px; } .rv2-sheet .rv2-opt .st { width: auto; padding: 0 9px; height: 22px; font-size: 11px; } .rv2-sheet .rv2-impact { font-size: 12.5px; color: var(--ink2); padding: 8px 12px; background: var(--panel2); border-radius: 10px; line-height: 1.5; } .rv2-sheet .rv2-impact.is-warn { background: var(--amber-soft); color: var(--amber-ink); } .rv2-sheet .rv2-check { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .rv2-sheet .rv2-check .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; } .rv2-sheet .rv2-check .ico.ok { background: var(--green-soft); color: var(--green); } .rv2-sheet .rv2-check .ico.bad { background: var(--red-soft); color: var(--red-ink); } .rv2-sheet .rv2-check .ico.warn { background: var(--amber-soft); color: var(--amber-ink); } .rv2-sheet .rv2-check small { display: block; color: var(--ink2); font-size: 12.5px; } .rv2-sheet .rv2-ack { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 10px 0 0; line-height: 1.4; } .rv2-sheet .rv2-ack input { width: 18px; height: 18px; accent-color: var(--orange); flex: 0 0 auto; margin: 1px 0 0; } /* «Publicar de todos modos» (decisión de la profa: a las 3 a. m. puede no haber cómo arreglar una ruta y no se puede frenar la operación). */ .rv2-sheet .rv2-force { border: 1px solid #F2B8B2; background: #FFF8F6; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .rv2-sheet .rv2-force > p { font-size: 12.5px; color: var(--red-ink); font-weight: 700; line-height: 1.45; } .rv2-sheet .rv2-force ul { margin: 2px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--ink2); } .rv2-sheet .rv2-linkbtn { border: 0; background: transparent; padding: 6px 0; font-size: 12.5px; font-weight: 700; color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; text-align: left; align-self: flex-start; } .rv2-sheet .rv2-linkbtn--ink { color: var(--ink2); margin-top: 6px; } .rv2-sheet .rv2-opt--drop .t b { color: var(--red-ink); } .rv2-sheet .rv2-btn--danger { background: var(--red-ink); border-color: var(--red-ink); color: #FFF; } .rv2-sheet .rv2-btn--danger:hover { background: #A8322A; border-color: #A8322A; } .rv2-sheet .rv2-btn--danger:disabled { background: #E7B1AB; border-color: #E7B1AB; opacity: 1; } /* Aviso inferior */ .rv2-toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; background: var(--ink); color: #F4F3F0; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13.5px; width: max-content; max-width: min(92vw, 680px); line-height: 1.4; } /* 27-oct: con left 50% sin width el texto largo salía en una columna angosta */ .rv2-toast button { border: 0; background: transparent; color: #F59A73; font-weight: 800; padding: 4px 6px; flex: 0 0 auto; } /* ===================================================================== Anchos intermedios (medidos por admin-rutas-v2.js sobre #routes-v2). :where() deja la especificidad igual a la de la entrega, así el bloque de celular de abajo sigue mandando sobre estos, como en el CSS original. ===================================================================== */ #routes-v2:where([data-det="400"]) .rv2-stage { grid-template-columns: minmax(0, 1fr) 400px; } /* Cajón lateral (la «tablet» de la entrega): el detalle sale de la derecha */ #routes-v2:where([data-lay="cajon"]) .rv2-stage { grid-template-columns: minmax(0, 1fr); } #routes-v2:where([data-lay="cajon"]) .rv2-detail { position: fixed; z-index: 65; top: 0; right: 0; bottom: 0; width: min(440px, 94vw); border-radius: 0; border: 0; border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; visibility: hidden; } /* visibility: cerrado, el cajón queda fuera de la pantalla pero NO en el orden del tabulador ni en el lector de pantalla (se oculta al terminar de salir). */ #routes-v2:where([data-lay="cajon"]) .rv2-detail.is-open { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1); } #routes-v2:where([data-lay="cajon"]) .rv2-dhead .x { display: inline-grid; } /* El cajón va pegado arriba (top: 0) y la app instalada pinta debajo de la barra de estado (viewport-fit=cover + black-translucent): sin este margen la hora del iPhone tapa la cabecera y la flecha de volver no se puede tocar (video de los jefes, 14-oct-2026). */ #routes-v2:where([data-lay="cajon"]) .rv2-dhead { padding-top: calc(18px + env(safe-area-inset-top, 0px)); } #routes-v2:where([data-lay="cajon"]) .rv2-search { width: 300px; } /* ===================================================================== Tarjetas (celular, o una lista de menos de 600 px): la hora arriba ===================================================================== */ #routes-v2:where([data-fila="tarjeta"]) .rv2-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } #routes-v2:where([data-fila="tarjeta"]) .rv2-row .when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } #routes-v2:where([data-fila="tarjeta"]) .rv2-row .when b { width: 100%; font-size: 16px; } #routes-v2:where([data-fila="tarjeta"]) .rv2-row .when small { margin-top: 0; } #routes-v2:where([data-fila="tarjeta"]) .rv2-summary { grid-template-columns: minmax(0, 1fr); } /* ===================================================================== 28-oct-2026 (Camilo, audios y video): «de las cuatro líneas de scroll, que solo la de la derecha, la más grande, me permita bajar todo». · Avisos es una barrita con la cantidad; al tocarla se abre la lista entera (sin caja con scroll propio). Va arriba, y Conductores debajo con todo el ancho. · En el computador #routes-v2 ya no tiene alto fijo: crece con su contenido y se desplaza la página. El detalle con el mapa sale como cajón al tocar una vuelta (admin-rutas-v2.js › medir: siempre «cajon»), con su propio scroll adentro. ===================================================================== */ #routes-v2 .rv2-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; } #routes-v2 .rv2-summary .rv2-avcard { padding: 0; overflow: hidden; } #routes-v2 .rv2-avcard > h2 { padding: 10px 14px 0; } #routes-v2 .rv2-avcard > .rv2-al { padding: 0 14px 10px; } #routes-v2 .rv2-avcard .rv2-al { max-height: none; overflow: visible; } #routes-v2 .rv2-avbar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; background: transparent; text-align: left; } #routes-v2 .rv2-avbar:hover { background: var(--panel2); } #routes-v2 .rv2-avbar h2 { font-size: 14.5px; } #routes-v2 .rv2-avbar-q { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--orange-ink); } #routes-v2 .rv2-avbar svg { width: 16px; height: 16px; color: var(--ink2); transition: transform .18s ease; flex: 0 0 auto; } #routes-v2 .rv2-avbar[aria-expanded="true"] svg { transform: rotate(180deg); } #routes-v2 .rv2-avbar + .rv2-al { margin: 0; padding: 0 14px 12px; } @media (min-width: 768px) { #routes-v2 { height: auto; min-height: 0; overflow: visible; } #routes-v2 .rv2-stage { flex: none; min-height: auto; } #routes-v2 .rv2-listwrap { overflow: visible; min-height: auto; padding-right: 0; } /* La barra (día, Cambios, Publicar) se queda arriba al bajar: antes nunca se iba porque se desplazaba solo la lista. Quien se desplaza es #app-main, y Chrome le descuenta su relleno de arriba al «sticky» (como en el celular, abajo): ese relleno pasa a ser margen de #routes-v2. */ #app-main:has(section[data-panel="routes"]:not(.hidden) > #routes-v2:not([hidden])) { padding-top: 0; } #routes-v2 { margin-top: 24px; } #routes-v2 .rv2-bar { position: sticky; top: 0; z-index: 6; background: var(--bg); border-radius: 16px 16px 0 0; } } /* ===================================================================== Celular: ≤ 767 px → una columna, tarjetas, hojas inferiores ===================================================================== */ @media (max-width: 767px) { /* #app-main trae 16 px a cada lado: se devuelven para que las tarjetas queden con los 12 px de la entrega. Aquí el que se desplaza es #app-main (no #routes-v2), por eso el contenedor no recorta (si no, el «sticky» de las franjas y del botón de publicar no funcionaría). */ #routes-v2 { margin: 0 -16px; border: 0; border-radius: 0; height: auto; min-height: 0; overflow: visible; } /* ÚNICA regla fuera de #routes-v2: mientras la v2 está a la vista en el celular, #app-main no lleva relleno arriba ni abajo. Chrome descuenta ese relleno al pegar un «sticky»: con los 96 px de pb-24 el botón «Publicar plan» quedaba flotando 96 px por encima del borde y las franjas pegadas a 20 px del tope, con filas asomándose por encima. */ #app-main:has(section[data-panel="routes"]:not(.hidden) > #routes-v2:not([hidden])) { padding-top: 0; padding-bottom: 0; } #routes-v2 .rv2-bar { padding: 10px 12px; gap: 8px; } #routes-v2 .rv2-title { font-size: 18px; flex: 1; } #routes-v2 .rv2-day .rv2-ic { width: 44px; height: 44px; } #routes-v2 .rv2-day b { min-width: 76px; } #routes-v2 .rv2-wa { width: 44px; height: 44px; } #routes-v2 .rv2-pub { order: 4; } #routes-v2 .rv2-search { order: 5; width: 100%; height: 44px; } #routes-v2 .rv2-search kbd { display: none; } #routes-v2 .rv2-bar .rv2-spacer, #routes-v2 #rv2-reopt, #routes-v2 #rv2-publish { display: none; } #routes-v2 .rv2-stage { padding: 0 12px 12px; gap: 0; flex: none; min-height: auto; } #routes-v2 .rv2-listwrap { overflow: visible; } #routes-v2 .rv2-say { padding: 10px 12px; font-size: 14px; } #routes-v2 .rv2-say small { margin-left: 0; width: 100%; } #routes-v2 .rv2-listwrap { padding: 12px 0 0; } #routes-v2 .rv2-dgrid .cell { min-height: 48px; } /* En el teléfono también tiene tope (antes crecía sin fin y empujaba la lista). */ #routes-v2 .rv2-al { max-height: 200px; } #routes-v2 .rv2-al li { flex-wrap: nowrap; } #routes-v2 .rv2-al li .rv2-btn--sm { height: 40px; } #routes-v2 .rv2-row .l1 .rv2-hbtn { height: 36px; } #routes-v2 .rv2-p { min-height: 40px; align-items: center; } #routes-v2 .rv2-map { height: 38vh; } #routes-v2 .rv2-stops .rv2-mv { height: 44px; } #routes-v2 .rv2-opt { min-height: 56px; } /* Detalle a pantalla completa */ #routes-v2 .rv2-detail { width: 100vw; border-left: 0; } #routes-v2 .rv2-dhead { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; align-items: center; border-bottom: 1px solid var(--line); } #routes-v2 .rv2-dhead .rv2-back { display: inline-grid; width: 44px; height: 44px; border: 0; } #routes-v2 .rv2-dhead .x { display: none; } #routes-v2 .rv2-dbody { padding: 12px; } #routes-v2 .rv2-stops .rv2-ic { width: 44px; height: 44px; border-radius: 12px; } #routes-v2 .rv2-drv .rv2-ic { width: 44px; height: 44px; border-radius: 12px; } #routes-v2 .rv2-drv .rv2-btn--sm, #routes-v2 .rv2-sug .rv2-btn--sm { height: 44px; padding: 0 16px; } #routes-v2 .rv2-dfoot { padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); } #routes-v2 .rv2-dfoot .rv2-btn { height: 46px; border-radius: 12px; } #routes-v2:where([data-fila="tarjeta"]) .rv2-row .rv2-btn--sm { height: 44px; } #routes-v2 .rv2-mbar { display: block; position: sticky; bottom: 0; z-index: 5; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); margin-top: auto; } /* Hoja inferior */ .rv2-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; } .rv2-sheet .rv2-handle { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line2); margin: 10px auto 0; } .rv2-sheet .rv2-sh-head { padding: 10px 16px 8px; } .rv2-sheet .rv2-sh-head .rv2-ic { width: 44px; height: 44px; } .rv2-sheet .rv2-sh-body { padding: 4px 16px 12px; } .rv2-sheet .rv2-sh-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); } .rv2-sheet .rv2-sh-foot .rv2-btn { height: 48px; border-radius: 12px; } .rv2-sheet .rv2-check .rv2-btn--sm { height: 44px; } .rv2-sheet .rv2-opt { min-height: 56px; } .rv2-sheet .rv2-ack { min-height: 44px; align-items: center; } .rv2-sheet .rv2-linkbtn { min-height: 44px; } .rv2-toast { bottom: 96px; } } @media (prefers-reduced-motion: reduce) { #routes-v2 *, .rv2-sheet *, .rv2-toast * { transition: none !important; animation: none !important; } } /* ── 0125 · La ruta de Julián (admin-ruta-julian.js) ─────────────────────────── */ /* Más ancha solo en la compu; en el celular la hoja va de borde a borde como todas. */ @media (min-width: 768px) { .rv2-sheet.rj-wide, .rv2-sheet:has(.rj-body) { width: min(720px, 96vw); } } .rv2-sheet .rj-ta { width: 100%; box-sizing: border-box; min-height: 180px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 13.5px/1.45 var(--mono); color: var(--ink); background: var(--panel2); } .rv2-sheet .rj-prev { display: flex; flex-direction: column; gap: 10px; } .rv2-sheet .rj-note, #routes-v2 .rj-note { margin: 0; color: var(--ink2); font-size: 13px; } .rv2-sheet .rj-warn { color: var(--orange-ink); } .rv2-sheet .rj-bad { color: var(--red-ink); font-weight: 700; } .rv2-sheet .rj-sum { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); font-size: 13.5px; } /* 27-oct (2ª): rearmar el día con lo pegado, o solo esas vueltas. */ .rv2-sheet .rj-modo { display: flex; flex-direction: column; gap: 6px; } .rv2-sheet .rj-modo-op { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13.5px; cursor: pointer; } .rv2-sheet .rj-modo-op input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange, #E2551A); } .rv2-sheet .rj-modo-op span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rv2-sheet .rj-modo-op small { color: var(--ink2); font-size: 12.5px; line-height: 1.35; } .rv2-sheet .rj-modo-op:has(input:checked) { border-color: var(--orange, #E2551A); background: var(--panel2); } .rv2-sheet .rj-b { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .rv2-sheet .rj-bh { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; background: var(--panel2); font-size: 13.5px; } .rv2-sheet .rj-bh span { color: var(--ink2); font-size: 12.5px; } .rv2-sheet .rj-p { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 13.5px; } .rv2-sheet .rj-p .rj-t { font-family: var(--mono); font-weight: 700; } .rv2-sheet .rj-p .rj-w em { color: var(--ink3); font-style: normal; } .rv2-sheet .rj-p select { width: 100%; min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--panel); color: var(--ink); } .rv2-sheet .rj-p small { grid-column: 2 / -1; color: var(--ink3); font-size: 12px; } .rv2-sheet .rj-p[data-st="falta"] select { border: 1.5px solid var(--red-ink); background: #FFF6F4; } /* 27-oct: falta elegir */ .rv2-sheet .rj-p[data-st="rev"] select { border-color: var(--red-ink); } .rv2-sheet .rj-p[data-st="man"] select { border-color: var(--green); } /* 0133: «Va sin cuenta» (en la ruta, sin aviso). */ .rv2-sheet .rj-p[data-st="guest"] select { border-color: #4338CA; } @media (max-width: 767px) { .rv2-sheet .rj-p { grid-template-columns: 44px minmax(0, 1fr); } .rv2-sheet .rj-p select { grid-column: 1 / -1; } } #routes-v2 .rj-dia { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 24px; } #routes-v2 .rj-dia-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } #routes-v2 .rj-dia-h > div:first-child { display: flex; flex-direction: column; gap: 2px; } #routes-v2 .rj-dia-h span { color: var(--ink2); font-size: 13px; } #routes-v2 .rj-dia-a { display: flex; gap: 6px; flex-wrap: wrap; } /* La columna de los nombres no baja de 180 px: con una delegada de nombre largo y tres botones, la de la derecha se la comía («Mateo, Juliana» desaparecía y «Deben estar» quedaba una palabra por renglón; capturas del día mezclado, 26-oct). */ #routes-v2 .rj-v { display: grid; grid-template-columns: 64px minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } #routes-v2 .rj-v-t { display: flex; flex-direction: column; } #routes-v2 .rj-v-t b { font-family: var(--mono); font-size: 16px; } #routes-v2 .rj-v-t small, #routes-v2 .rj-v-m small { color: var(--ink3); font-size: 12px; } #routes-v2 .rj-v-m { display: flex; flex-direction: column; min-width: 0; } #routes-v2 .rj-v-m span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #routes-v2 .rj-v-st { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--panel2); color: var(--ink2); white-space: nowrap; } #routes-v2 .rj-v[data-st="libre"] .rj-v-st { background: var(--orange-soft); color: var(--orange-ink); } #routes-v2 .rj-v[data-st="tomada"] .rj-v-st, #routes-v2 .rj-v[data-st="curso"] .rj-v-st { background: var(--green-soft); color: var(--green); } /* 0126: delegada (la hace alguien de afuera) y su botón Delegar / Devolver. */ #routes-v2 .rj-v-r { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } #routes-v2 .rj-v[data-st="delegada"] .rj-v-st { background: #EEF2FF; color: #4338CA; } /* 0137: terminada (verde, degradada) y pasada sin marcar (gris); el renglón que las guarda. */ #routes-v2 .rj-v[data-st="hecha"] { opacity: .72; } #routes-v2 .rj-v[data-st="hecha"] .rj-v-st { background: var(--green-soft); color: var(--green); } #routes-v2 .rj-v[data-st="pasada"] { opacity: .72; } #routes-v2 .rj-hechas { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; margin-top: 4px; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } #routes-v2 .rj-hechas b { font-size: 13.5px; color: var(--green); } #routes-v2 .rj-hechas small { font-size: 12.5px; color: var(--ink2); white-space: nowrap; } /* 0129: «Asignar conductor» en una vuelta de la ruta de Julián: la lista sale ahí mismo. */ #routes-v2 .rj-pick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } #routes-v2 .rj-pick select { font: inherit; font-size: 16px; min-height: 34px; max-width: 220px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); } @media (max-width: 767px) { #routes-v2 .rj-dia { padding: 12px 16px 24px; } /* Volver a pegar · Excel del día · Quitar la ruta: con el dedo (44 px). */ #routes-v2 .rj-dia-a .rv2-btn--sm { height: 44px; } #routes-v2 .rj-v { grid-template-columns: 56px minmax(0, 1fr); } #routes-v2 .rj-v-st { grid-column: 1 / -1; justify-self: start; } #routes-v2 .rj-v-r { grid-column: 1 / -1; justify-content: space-between; } } /* 0134: las vueltas para tomar que armó el sistema, arriba de la lista. */ #routes-v2 .rv2-solas { margin-bottom: 10px; } /* Día mezclado (26-oct-2026). Arriba de la lista queda solo la barra de la ruta pegada (Volver a pegar, Excel del día, Quitar la ruta); cada vuelta pegada va EN la lista, en su hora (audios de los jefes de las 4:22 p. m.). */ #routes-v2 .rj-dia.is-mixto { padding: 12px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel2); } #routes-v2 .rj-dia.rj-barra { padding: 10px 12px; gap: 6px; margin-bottom: 12px; } /* La vuelta pegada en la lista: la misma fila del tablero con su raya y su etiqueta. No se abre en el detalle ni recibe gente (no es del tablero): sin mano de clic. */ #routes-v2 .rv2-row--julian { cursor: default; box-shadow: inset 4px 0 0 #6366F1; } #routes-v2 .rv2-row--julian:hover { border-color: var(--line); } #routes-v2 .rv2-row--julian[data-st="libre"] { box-shadow: inset 4px 0 0 var(--orange); } #routes-v2 .rv2-row--julian.is-flash { box-shadow: inset 4px 0 0 #6366F1, 0 0 0 3px rgba(99, 102, 241, .35); } #routes-v2 .rv2-row .l1 .tag.rj-tag { color: #4338CA; background: #EEF2FF; white-space: nowrap; } #routes-v2 .rv2-p.is-fijo { cursor: default; } #routes-v2 .rv2-p.is-fijo:hover { border-color: var(--line); background: var(--panel2); } #routes-v2 .rv2-p em { font-style: normal; color: var(--ink3); } #routes-v2 .rv2-row--julian .rj-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* 0145 · «Cambiar hora»: una fila por recogida (o la salida de la llegada). */ .rv2-sheet .rj-hora { display: flex; flex-direction: column; gap: 8px; } .rv2-sheet .rj-h-p { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; } .rv2-sheet .rj-h-p input { font: inherit; font-size: 16px; height: 44px; min-width: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); } .rv2-sheet .rj-h-p input[data-tocado="1"] { border-color: var(--orange); } .rv2-sheet .rj-h-p em { font-style: normal; color: var(--ink3); } .rv2-sheet .rj-hora .rj-warn { margin: 4px 0 0; font-size: 13px; } /* ── 28-oct · «Cambios» de los tripulantes (admin-cambios.js) y «Enrutar» ─────── */ #routes-v2 #rv2-cambios { position: relative; } #routes-v2 #rv2-cambios .rv2-badge { background: var(--orange); color: #FFF; } #routes-v2 #rv2-cambios.is-new { border-color: var(--orange); color: var(--orange-ink); } .rv2-sheet .rc-body { display: flex; flex-direction: column; gap: 10px; } .rv2-sheet .rc-sum { margin: 0; font-size: 13.5px; color: var(--ink2); } .rv2-sheet .rc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .rv2-sheet .rc-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 13.5px; } .rv2-sheet .rc-row:first-child { border-top: 0; } .rv2-sheet .rc-row.is-new { background: var(--orange-soft); } .rv2-sheet .rc-at { font-family: var(--mono); font-size: 12px; color: var(--ink3); display: flex; flex-direction: column; gap: 2px; } .rv2-sheet .rc-at em { font-style: normal; font-weight: 700; color: var(--orange-ink); text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; } .rv2-sheet .rc-que { min-width: 0; color: var(--ink); line-height: 1.35; } .rv2-sheet .rc-ahora { grid-column: 2 / 3; font-size: 12.5px; color: var(--ink2); } .rv2-sheet .rc-row .rv2-btn--sm { grid-column: 3; grid-row: 1 / span 2; } .rv2-sheet .rc-ahora--ok { color: var(--green); } .rv2-sheet .rc-ahora--warn { color: var(--orange-ink); font-weight: 600; } .rv2-sheet .rc-ahora--bad { color: var(--red-ink); font-weight: 700; } .rv2-sheet .rc-list--antes { opacity: .8; } /* El pegado: «tiene cuenta y no pidió» (se le crea el pedido al pasar). */ .rv2-sheet .rj-p[data-st="crear"] select { border-color: var(--amber); background: var(--amber-soft); } @media (max-width: 767px) { .rv2-sheet .rc-row { grid-template-columns: minmax(0, 1fr) auto; } .rv2-sheet .rc-at { flex-direction: row; gap: 8px; grid-column: 1 / -1; } .rv2-sheet .rc-ahora { grid-column: 1 / 2; } .rv2-sheet .rc-row .rv2-btn--sm { grid-column: 2; grid-row: 2 / span 2; } #routes-v2 #rv2-cambios span:not(.rv2-badge), #routes-v2 #rv2-enrutar span { display: none; } #routes-v2 #rv2-cambios, #routes-v2 #rv2-enrutar { width: 44px; height: 44px; padding: 0; justify-content: center; } }