se vuelve una card vertical full-width.
Cada | se apila con label visible (via data-label).
se oculta porque cada celda ya tiene su label. */
/* Anular el wrapper que tenía scroll horizontal por defecto (`.table-wrap`
tiene `overflow-x: auto` y `.data-table` tiene `min-width: max-content`,
lo que en mobile dejaba los valores fuera del viewport). */
[data-panel="envios"] .table-wrap {
overflow-x: visible;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#tbl-envios {
width: 100%;
min-width: 0 !important;
table-layout: auto;
}
#tbl-envios thead { display: none; }
#tbl-envios, #tbl-envios tbody {
display: block;
/* Aislar el repaint al tbody — si una card se mueve, no recalcula
el resto del documento. */
contain: layout style;
}
#tbl-envios tr.env-row {
display: flex;
flex-direction: column;
margin-bottom: 12px;
padding: 14px;
border-radius: 12px;
border: 1px solid var(--border-strong);
background: var(--glass);
width: 100%;
box-sizing: border-box;
touch-action: pan-y;
position: relative;
/* Promote a layer permanente — translate3d usa GPU desde el render
(sin promote-on-the-fly). `contain` aísla repaint. */
will-change: transform;
transform: translateZ(0);
contain: layout style paint;
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* NATIVE VIRTUALIZATION: el browser skipea el render/layout/paint de
las cards que están FUERA del viewport. Para 346 cards en pantalla
reduce el costo de cada frame ~30×. Soportado Chrome 85+. */
content-visibility: auto;
contain-intrinsic-size: 0 320px;
}
/* Indicadores visuales mientras se hace swipe (>30% del ancho).
Hint a la izquierda (verde) cuando arrastrás a la derecha = siguiente estado.
Hint a la derecha (rojo) cuando arrastrás a la izquierda = Problema. */
#tbl-envios tr.env-row::before,
#tbl-envios tr.env-row::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
opacity: 0;
transition: opacity .15s;
pointer-events: none;
}
#tbl-envios tr.env-row::before {
left: -70px;
content: '→';
color: #6cd6c6;
}
#tbl-envios tr.env-row::after {
right: -70px;
content: '↶'; /* arrow undo: retroceder estado */
color: #f5b366;
}
/* Hint visual: en lugar de outline (que es paint del tr entero), solo
cambiamos el color del borde existente — el browser ya lo tiene en
su layer y este toggle es muy barato. */
#tbl-envios tr.env-row.env-swipe-right-ready {
border-color: #6cd6c6;
}
#tbl-envios tr.env-row.env-swipe-right-ready::before { opacity: 1; }
#tbl-envios tr.env-row.env-swipe-left-ready {
border-color: #f5b366;
}
#tbl-envios tr.env-row.env-swipe-left-ready::after { opacity: 1; }
/* Tintes de estado en cards mobile + barra lateral 4px del color: el
chofer/Juanpi identifica el estado de la card de un vistazo, sin
leer el pill. */
#tbl-envios tr.env-row-pendiente { background-color: rgba(200,200,210,0.14); border-left: 4px solid rgba(200,200,210,.55); }
#tbl-envios tr.env-row-remitado { background-color: rgba(120,160,255,0.22); border-left: 4px solid #82a4ff; }
#tbl-envios tr.env-row-reparto { background-color: rgba(245,179,102,0.22); border-left: 4px solid #f5b366; }
#tbl-envios tr.env-row-entregado { background-color: rgba(108,214,198,0.18); border-left: 4px solid #6cd6c6; }
#tbl-envios tr.env-row-problema { background-color: rgba(255,80,80,0.24); border-left: 4px solid #ff7777; }
#tbl-envios tr.env-row-borrado { background-color: rgba(120,120,120,0.08); border-left: 4px solid #888; }
#tbl-envios tr.env-row td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 6px 0;
border: none;
text-align: right;
min-width: 0;
max-width: none !important;
word-break: break-word;
white-space: normal !important; /* anula el nowrap heredado de .data-table td */
line-height: 1.35;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
/* Etiqueta (chica, alineada a la izquierda). */
#tbl-envios tr.env-row td::before {
content: attr(data-label);
flex: 0 0 auto;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/* Cliente: protagonista de la card, sin label inline, full-width arriba. */
#tbl-envios tr.env-row td.env-td-cliente {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 4px 0 10px 0;
border-bottom: 1px solid var(--border-strong);
margin-bottom: 8px;
}
#tbl-envios tr.env-row td.env-td-cliente::before { display: none; }
#tbl-envios tr.env-row td.env-td-cliente strong { font-size: 17px; line-height: 1.25; }
/* Detalle: también sin label inline, full-width debajo del cliente. */
#tbl-envios tr.env-row td.env-articulos {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 4px 0;
font-size: 13px;
color: var(--text-muted);
}
#tbl-envios tr.env-row td.env-articulos::before {
font-size: 10px;
margin-bottom: 2px;
}
/* Estado: full-width abajo con pill grande y botón siguiente prominente. */
#tbl-envios tr.env-row td.env-estado-cell {
flex-direction: column;
align-items: stretch;
text-align: left;
padding-top: 12px;
margin-top: 8px;
border-top: 1px solid var(--border-strong);
gap: 10px;
}
#tbl-envios tr.env-row td.env-estado-cell::before { display: none; }
.env-estado-cell .env-pill {
align-self: stretch;
text-align: center;
font-size: 14px;
padding: 10px 14px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Orden visual en mobile: lo que Juanpi necesita escanear primero
arriba (cliente / estado / dirección / teléfono); el resto del meta
queda al final. Funciona porque tr.env-row pasa a flex column. */
#tbl-envios tr.env-row td.env-row-check { order: 0; }
#tbl-envios tr.env-row td.env-td-cliente { order: 1; }
#tbl-envios tr.env-row td.env-estado-cell { order: 2; border-top: none; padding-top: 6px; margin-top: 0; }
#tbl-envios tr.env-row td.env-direccion { order: 3; }
#tbl-envios tr.env-row td[data-label="Tel"] { order: 4; }
#tbl-envios tr.env-row td.env-articulos { order: 5; }
#tbl-envios tr.env-row td.env-anotado { order: 6; }
#tbl-envios tr.env-row td[data-label="Chofer"],
#tbl-envios tr.env-row td[data-label="Remito"],
#tbl-envios tr.env-row td[data-label="Pago"],
#tbl-envios tr.env-row td[data-label="Condición"],
#tbl-envios tr.env-row td[data-label="Nº"],
#tbl-envios tr.env-row td[data-label="Vendedor"],
#tbl-envios tr.env-row td[data-label="Camión"] { order: 7; }
/* Botón "siguiente estado" full-width grande, fácil de tapear. */
.env-btn-next {
width: 100%;
min-height: 52px;
font-size: 15px;
font-weight: 600;
padding: 12px;
border-radius: 10px;
}
/* Links de teléfono más visibles. */
#tbl-envios tr.env-row a[href^="tel:"] {
color: var(--accent-blue, #6cd6c6);
text-decoration: none;
font-weight: 500;
}
/* === Drawer (modal-envio) como bottom-sheet === */
#modal-envio .modal {
position: fixed;
bottom: 0; left: 0; right: 0;
max-height: 88vh;
width: 100%;
max-width: none;
margin: 0;
border-radius: 16px 16px 0 0;
overflow-y: auto;
animation: env-slide-up .2s ease-out;
}
@keyframes env-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.env-detalle .env-dl {
grid-template-columns: 1fr;
gap: 4px;
}
.env-detalle .env-dl dt {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 6px;
}
.env-detalle .env-dl dd { font-size: 15px; margin-bottom: 4px; }
.env-botones { grid-template-columns: 1fr; }
.env-btn-estado { min-height: 56px; font-size: 16px; }
}
@media (max-width: 380px) {
/* Apretar todavía un poco para iPhones SE / similares */
[data-panel="envios"] .tab-strip-cell { min-width: 96px; padding: 8px 10px; }
[data-panel="envios"] .tab-strip-value { font-size: 18px; }
#tbl-envios tr.env-row { padding: 12px; }
#tbl-envios tr.env-row td { font-size: 13px; }
#tbl-envios tr.env-row td.env-td-cliente strong { font-size: 16px; }
}
/* ============================================================================
Info system — íconos "ⓘ" con popover explicativo
============================================================================ */
.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 6px;
border-radius: 50%;
background: rgba(255,246,240,0.12);
color: rgba(255,246,240,0.7);
font-family: var(--serif, "Source Serif Pro", Georgia, serif);
font-style: italic;
font-size: 10px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background .15s ease, color .15s ease, transform .12s ease;
vertical-align: middle;
user-select: none;
flex-shrink: 0;
}
.info-icon::before { content: "i"; }
.info-icon:hover {
background: rgba(255,56,56,0.78);
color: #fff;
transform: scale(1.15);
}
.info-icon:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(255,56,56,0.4);
}
.info-icon-light {
background: rgba(255,246,240,0.18);
color: rgba(255,246,240,0.85);
}
/* Popover */
.info-popover {
position: absolute;
z-index: 9999;
max-width: 420px;
min-width: 280px;
padding: 18px 20px 16px;
background: rgba(15, 19, 24, 0.97);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border: 1px solid rgba(255,246,240,0.16);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,56,56,0.08);
color: rgba(255,246,240,0.94);
font-family: "Sora", -apple-system, system-ui, sans-serif;
font-size: 13px;
line-height: 1.45;
animation: infopop-in .18s ease-out;
}
@keyframes infopop-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.info-pop-title {
margin: 0 0 8px;
font-family: var(--serif, "Source Serif Pro", Georgia, serif);
font-style: italic;
font-weight: 400;
font-size: 18px;
letter-spacing: -0.01em;
color: rgba(255,56,56,0.95);
padding-right: 24px;
}
.info-pop-desc {
margin: 0 0 12px;
color: rgba(255,246,240,0.92);
font-size: 13px;
}
.info-pop-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid rgba(255,246,240,0.1);
}
.info-pop-row {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
}
.info-pop-key {
color: rgba(255,246,240,0.55);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.info-pop-val {
color: rgba(255,246,240,0.88);
font-size: 12.5px;
}
.info-pop-val code, .info-pop-row code {
font-family: var(--font-mono, "JetBrains Mono", monospace);
background: rgba(255,246,240,0.06);
padding: 1px 5px;
border-radius: 4px;
font-size: 11px;
}
.info-pop-row-plain {
color: rgba(255,246,240,0.85);
}
.info-pop-close {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: 0;
color: rgba(255,246,240,0.5);
font-size: 16px;
width: 24px;
height: 24px;
line-height: 1;
cursor: pointer;
border-radius: 4px;
transition: background .15s ease, color .15s ease;
}
.info-pop-close:hover {
background: rgba(255,246,240,0.08);
color: rgba(255,246,240,0.9);
}
/* Info icon en /cierre — fondo dark también, usa color claro */
.cierre-page .info-icon {
background: rgba(255,246,240,0.10);
color: rgba(255,246,240,0.82);
}
.cierre-page .info-icon:hover {
background: rgba(255,56,56,0.92);
color: #fff;
}
/* Info flotante para paneles sin titulo visible (Pre-pedidos, Documentos) */
.panel-info-floating {
position: absolute;
top: 8px;
right: 12px;
z-index: 5;
}
.tab-panel { position: relative; }
.info-icon-section {
width: 18px;
height: 18px;
font-size: 12px;
background: rgba(255,56,56,0.12);
color: rgba(255,140,140,0.95);
}
.info-icon-section:hover {
background: rgba(255,56,56,0.92);
color: #fff;
}
/* === Carga nativa de pedidos (formulario del vendedor) ===================== */
.env-form { display: flex; flex-direction: column; gap: 16px; }
.env-form .form-field { display: flex; flex-direction: column; gap: 6px; }
/* Jerarquía: label claro y con peso (no gris medio sobre fondo oscuro). */
.env-form .form-field,
.env-form .form-field > span {
font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #cbd5e1;
}
.env-form .form-field .muted { font-weight: 400; }
/* Inputs legibles y táctiles. 16px evita el zoom automático de iOS al enfocar. */
.env-form input,
.env-form textarea {
min-height: 48px; padding: 12px 14px; font-size: 16px;
color: var(--text); background: var(--surface-2);
border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
width: 100%; box-sizing: border-box;
transition: border-color .12s, box-shadow .12s;
}
.env-form textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.env-form input::placeholder,
.env-form textarea::placeholder { color: var(--text-soft); }
/* Foco con el rojo de marca (Logistics Core / Stitch). */
.env-form input:focus,
.env-form textarea:focus {
outline: none; border-color: var(--abba);
box-shadow: 0 0 0 3px var(--abba-glow);
}
.env-form-envio-only { display: flex; flex-direction: column; gap: 16px; }
/* Retiro de contenedor oculta este grupo: el display:flex de arriba le gana al
atributo [hidden] (display:none de UA), así que hay que forzarlo. */
.env-form-envio-only[hidden] { display: none; }
/* Switch de tipo — botones grandes, seleccionado SÓLIDO (rojo de marca + peso + sombra). */
.env-tipo-switch { display: flex; gap: 10px; }
.env-tipo-btn {
flex: 1; min-height: 52px; padding: 12px; cursor: pointer; font-size: 16px;
color: var(--text-muted); background: var(--surface-2);
border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg);
transition: all .12s ease;
}
.env-tipo-btn.env-tipo-active {
background: var(--abba); color: #fff; border-color: var(--abba); font-weight: 700;
box-shadow: 0 2px 10px var(--abba-glow);
}
/* Condición de pago — SEGMENTED CONTROL: opción única y excluyente, activo sólido. */
.env-cond-chips {
display: flex; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
overflow: hidden; background: var(--surface-2);
}
.env-cond-chip {
flex: 1; min-height: 44px; padding: 10px 8px; cursor: pointer;
font-size: 15px; color: var(--text-muted); background: transparent; border: none;
border-right: 1.5px solid var(--border-strong); transition: all .12s ease;
white-space: nowrap;
}
.env-cond-chip:last-child { border-right: none; }
.env-cond-chip.env-cond-chip-active { background: var(--abba); color: #fff; font-weight: 700; }
.env-acciones-editar { margin: 8px 0; }
/* Aterrizaje visible: flash de la fila recién guardada/editada. */
@keyframes envRowFlash {
0% { background: var(--abba-glow); }
100% { background: transparent; }
}
.env-row-flash > td { animation: envRowFlash 1.6s ease-out; }
/* Mobile: modal de carga a pantalla completa + acciones fijas abajo. */
@media (max-width: 640px) {
#modal-env-form .modal {
width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
border-radius: 0; display: flex; flex-direction: column;
}
#modal-env-form .modal-body { flex: 1; overflow-y: auto; }
#modal-env-form .modal-actions {
position: sticky; bottom: 0; background: #0f172a;
padding: 12px 0 4px; margin: 0; border-top: 1px solid #334155;
display: flex; gap: 10px;
}
#modal-env-form .modal-actions .btn { flex: 1; min-height: 48px; }
}
/* Desktop: grid de 2 columnas para aprovechar el ancho y evitarle scroll al
vendedor. Mobile (≤640px) queda en una sola columna a pantalla completa. */
@media (min-width: 768px) {
#modal-env-form .modal { min-width: 660px; max-width: 760px; }
#modal-env-form .env-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
align-items: start;
}
/* El grupo envío-only desaparece como caja: sus campos (Artículos/Condición/
Remito) pasan a ser celdas del MISMO grid. */
#modal-env-form .env-form-envio-only { display: contents; }
/* …salvo cuando es retiro: ahí se oculta de verdad (gana al display:contents
por especificidad porque el selector lleva el #id). */
#modal-env-form .env-form-envio-only[hidden] { display: none; }
/* Filas a todo el ancho; el resto fluye en 2 columnas en orden de DOM:
Cliente|Dirección, Teléfono|Contacto, Condición|Remito. */
#modal-env-form .env-tipo-switch,
#modal-env-form .env-col-full,
#modal-env-form .modal-actions { grid-column: 1 / -1; }
}
|