/* ============================================================ Nu Vista - Flujo de Produccion Hoja de estilo apegada a la guia de imagen corporativa (Visual Guidelines v1.001, DIC 2022). Colores de marca, tal cual vienen en la guia: Smoky Black var(--negro) primario White var(--blanco) primario Deep Saffron var(--saffron) secundario / acento Davy's Grey var(--davy) secundario El negro y el blanco mandan; el saffron es acento y se usa con medida: navegacion activa, barras de avance, cifras que importan. Los grises y fondos van tibios (con una pizca de amarillo) para que convivan con el naranja; un gris azulado al lado del saffron se ve sucio. Las tipograficas son las de la guia y viven en /static/fuentes: el taller no siempre tiene internet y la pagina no puede depender de un CDN. ============================================================ */ @font-face{ font-family:"Montserrat"; src:url("/static/fuentes/montserrat.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191, U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Montserrat"; src:url("/static/fuentes/montserrat-ext.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Bebas Neue"; src:url("/static/fuentes/bebas-neue.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191, U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Bebas Neue"; src:url("/static/fuentes/bebas-neue-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } :root{ /* --- marca --- */ --negro:#130A01; /* Smoky Black */ --blanco:#fff; --saffron:#F49231; /* Deep Saffron */ --davy:#58585A; /* Davy's Grey */ /* --- derivados de trabajo --- */ --negro-alto:#241A10; /* negro levantado, para hover sobre negro */ --negro-hondo:#0A0400; /* mas hondo que el negro, para el estado activo */ --quemado:#9C5410; /* saffron oscurecido: el unico que se lee como texto */ --acento-suave:#FDF2E5; /* fondo tenue del acento */ --acento-borde:#F5CFA4; --texto:#1C1611; --gris:#6E6A66; --borde:#E6E2DB; --fondo:#F6F5F3; --raya:#FAF9F7; /* renglon par de las tablas */ --sobre:#FDF3E8; /* renglon bajo el cursor */ --campo-borde:#D6D0C7; --rojo:#B3261E; --ambar:#8F5D00; --verde:#2E6B3F; /* --- papeles, no colores --- El nombre dice PARA QUE sirve, no de que color es. Es lo que permite que el tema oscuro los cambie sin tocar una sola regla. */ --superficie:#fff; /* la cara de las tarjetas */ --superficie-tenue:#FCFBFA; /* chips y cosas sobre la tarjeta */ --gris-fondo:#F2F0EC; --gris-hondo:#5D5852; --gris-mas-hondo:#4A4540; --barra-vacia:#EDEAE5; /* el canal de la barra de avance */ --detalle-fondo:#1C1206; /* el renglon que se abre en el tablero */ --malo-fondo:#FCEBEA; --malo-texto:#8A1C13; --malo-borde:#EEBCB7; --malo-raya:#FDF3F2; /* renglon detenido */ --bien-fondo:#E9F3EC; --bien-texto:#1D5230; --bien-borde:#B6D6BF; --ojo-fondo:#FFF6E6; --ojo-texto:#7A4A00; --ojo-borde:#EDD3A8; --lila-fondo:#F1EDF9; --lila-texto:#4C2E7A; --lila-borde:#CFC2E6; --reorden-fondo:#FDEEE8; --reorden-texto:#8A3A13; --reorden-borde:#F0C4AE; --saffron-claro:#F7A24A; --saffron-hondo:#E8842A; --acento-hover:#FBE8D2; --azul-fondo:#E8EEF8; --azul-texto:#1F3864; --azul-borde:#B9C7E2; --gris-tenue:#646B77; /* Letra que va ENCIMA del rojo. En claro el rojo es oscuro y pide blanco; en oscuro el rojo se aclara y pide letra negra. */ --rojo-letra:#fff; --armado-fondo:#F4EFE6; --armado-franja:#B98B3E; --vidrio-fondo:#E9F0F4; --vidrio-franja:#4E7E96; /* Alias viejos: quedan para no romper nada que aun los use. */ --azul:var(--negro); --azul-claro:var(--acento-suave); } /* =================================================================== LA ESCALA TIPOGRAFICA =================================================================== Sergio, 18-sep-2026: *"busquemos la letra mas apropiada para las apps, lo que se maneje como standard tanto en tamano y proporciones segun sea titulos, texto, etiquetas y encabezados de tabla"*. LA FUENTE: la del sistema. En las maquinas del piso es Segoe UI, que Windows dibuja con hinting propio y se lee limpia a 12 px -- que es donde vive esta app: tablas densas, etiquetas y chips. Una fuente web se baja, parpadea y se renderiza peor en tamanos chicos. Montserrat y Bebas Neue se quedan para la MARCA (la barra de arriba y los PDF), que es donde tienen sentido. LA ESCALA: seis pasos, con la proporcion de siempre en interfaces (~1.2 entre pasos), y NADA por debajo de 11 px en pantalla. Antes habia rotulos de 9.5. --fs-xs 11px chips, marcas de esquina --fs-sm 12.5px texto secundario (.chico), etiquetas de campo --fs-md 13.5px tablas densas --fs-base 15px texto de la pantalla --fs-lg 17px titulo de panel (h2) --fs-xl 22px titulo de pantalla (h1) LOS PESOS: 400 el texto, 600 las etiquetas, 700 los titulos y los encabezados de tabla. Las mayusculas forzadas se quitaron de las etiquetas: en Segoe UI a 12 px con espaciado se leen peor que en minusculas. Las hojas que se IMPRIMEN -- packing slip y etiquetas -- tienen sus propios tamanos medidos contra el papel y no entran en esta escala. */ :root{ --fuente-ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system, Roboto,"Helvetica Neue",Arial,sans-serif; --fuente-marca:"Montserrat","Segoe UI",system-ui,Arial,sans-serif; --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-base:15px; --fs-lg:17px; --fs-xl:22px; --lh-apretado:1.25; --lh-normal:1.5; --lh-tabla:1.35; } *{box-sizing:border-box} body{margin:0;background:var(--fondo);color:var(--texto); font-family:var(--fuente-ui); font-size:var(--fs-base);line-height:var(--lh-normal); -webkit-font-smoothing:antialiased} a{color:var(--quemado);text-decoration:none} a:hover{text-decoration:underline} /* LA LETRA DE LA PANTALLA. Bebas Neue es la tipografia de la guia de marca y aqui se habia usado para titulos, rotulos, etiquetas de campo y encabezados de tabla. Sergio, 18-sep-2026: *"la letra que estamos usando y el color no me gusta mucho, se que salio de la base de diseno pero ocupamos cambiarla, es dificil leerla"*. Tenia razon: es condensada, no tiene minusculas de verdad, y puesta en 11-12 px, en mayusculas, con espaciado y en gris, se lee mal -- justo en lo que mas se lee de esta app, que son etiquetas y tablas. Se queda en el LOGO de la barra, que es donde la marca se firma. El resto pasa a Montserrat, con mas peso y mas contraste. */ .rotulo,h2,.kpi span,.parte span,.desglose-titulo,.accion-titulo, .pastilla-avance span,.migas .aqui span, label.campo>span,.entrada label,th,.tablero-kpi .total span{ font-family:var(--fuente-ui); font-weight:700; letter-spacing:.01em; } /* La MARCA: la barra de arriba es lo unico que sigue hablando en la tipografia de la guia. Ahi si funciona -- son dos palabras, grandes. */ header .marca{font-family:var(--fuente-marca)} /* ---------------------------------------------------- ENCABEZADO */ header{background:var(--negro);color:var(--blanco);padding:0 18px;display:flex; align-items:center;gap:20px;flex-wrap:wrap;position:sticky;top:0;z-index:20} /* La marca: el simbolo del logo (que trae fondo transparente) mas el nombre compuesto. El logo horizontal completo viene sobre blanco y no se puede poner encima del negro. */ header .marca{display:flex;align-items:center;gap:10px;padding:7px 0; white-space:nowrap;text-decoration:none} header .marca:hover{text-decoration:none} header .marca img{height:30px;width:auto;display:block} header .marca .nombre{display:flex;flex-direction:column;line-height:1} header .marca .nombre b{font-size:15px;font-weight:800;letter-spacing:.06em; color:var(--blanco);text-transform:uppercase} header .marca .nombre span{font-family:"Bebas Neue","Montserrat",sans-serif; font-size:11px;letter-spacing:.16em;color:var(--saffron);margin-top:2px} header nav{display:flex;gap:2px;flex:1;flex-wrap:wrap} header nav a{color:rgba(255,255,255,.74);padding:13px 12px;font-size:13px; border-bottom:3px solid transparent;white-space:nowrap} header nav a:hover{color:var(--blanco);background:rgba(255,255,255,.09); text-decoration:none} header nav a.activo{color:var(--blanco);border-bottom-color:var(--saffron);font-weight:600} .barra-usuario{display:flex;align-items:center;gap:12px;padding:8px 0; flex-wrap:wrap} header .quien{display:flex;align-items:baseline;gap:6px;font-size:13px; color:var(--blanco);line-height:1.2;background:none;border:0;padding:0;margin:0} header .quien b{color:var(--blanco);font-weight:600} header .quien .rol{font-size:11px;text-transform:uppercase;letter-spacing:.5px; color:var(--blanco);background:rgba(244,146,49,.30);padding:2px 7px; border-radius:9px} header a.enlace-usuario{color:rgba(255,255,255,.74);font-size:12px} header a.enlace-usuario:hover{color:var(--blanco)} header a.enlace-salir{color:var(--saffron);font-size:12px;font-weight:600} main{padding:18px;max-width:1900px;margin:0 auto} h1{font-size:var(--fs-xl);line-height:var(--lh-apretado);margin:0 0 3px; font-weight:700;letter-spacing:-.01em} .sub{color:var(--gris);font-size:12px;margin-bottom:16px} .kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .kpi{background:var(--superficie);border:1px solid var(--borde);border-radius:8px; padding:10px 16px;min-width:112px} .kpi span{font-size:12.5px;color:var(--gris-mas-hondo); letter-spacing:.09em} .kpi b{display:block;font-size:22px;color:var(--texto);line-height:1.25; font-weight:800} .kpi.alerta b{color:var(--rojo)} .kpi.bien b{color:var(--verde)} .panel{background:var(--superficie);border:1px solid var(--borde);border-radius:8px; padding:14px 16px;margin-bottom:16px} .panel h2{font-size:var(--fs-lg);line-height:var(--lh-apretado);margin:0 0 10px; letter-spacing:.10em;color:var(--davy)} form.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center} input,select,textarea{font-family:inherit;font-size:13px;padding:6px 8px; border:1px solid var(--campo-borde);border-radius:5px;background:var(--superficie); color:var(--texto)} input:focus,select:focus,textarea:focus{outline:2px solid var(--acento-borde); border-color:var(--saffron)} /* El boton normal va en negro: en la guia el negro y el blanco mandan y el saffron es acento. Para la accion principal de una pantalla esta .acento. */ button{font-family:inherit;font-size:13px;padding:7px 14px;border-radius:5px; border:1px solid var(--negro);background:var(--negro);color:var(--blanco); cursor:pointer;font-weight:500} button:hover{background:var(--negro-alto)} button:focus-visible{outline:2px solid var(--saffron);outline-offset:1px} button.suave{background:var(--superficie);color:var(--texto);border-color:var(--campo-borde)} button.suave:hover{background:var(--acento-suave);border-color:var(--saffron)} button.acento{background:var(--saffron);border-color:var(--saffron); color:var(--negro);font-weight:700} button.acento:hover{background:var(--saffron-hondo)} table{border-collapse:collapse;width:100%;background:var(--superficie)} /* El encabezado se pega DEBAJO de la barra de acciones, no a la misma altura: las dos eran sticky en top:44px y la barra (z-index 15) tapaba al encabezado (z-index 5). La altura la mide `tabla.js`, porque la barra crece y se encoge al abrir el formulario de reorden. En las pantallas sin barra de acciones la variable no existe y vale 0. */ th{background:var(--negro);color:var(--blanco);text-align:left;padding:8px 9px; font-size:var(--fs-sm);letter-spacing:.01em;position:sticky; top:calc(44px + var(--alto-acciones, 0px));z-index:5; font-weight:700} td{border-bottom:1px solid var(--borde);padding:6px 9px;vertical-align:middle; font-size:var(--fs-md);line-height:var(--lh-tabla)} tr:nth-child(even) td{background:var(--raya)} tr:hover td{background:var(--sobre)} th.num, .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} /* Las columnas de medida van CENTRADAS, no a la derecha. Son fichas de ancho distinto ("46 x 73 3/4" contra "45 9/16 x 73 3/4"); alineadas a la derecha quedaban dentadas del lado izquierdo y no se leia que fueran la misma columna. El encabezado lleva la misma clase que sus celdas. */ th.med, td.med{text-align:center} .chico{font-size:var(--fs-sm);color:var(--gris-hondo);line-height:1.4} .etiqueta{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px; border:1px solid rgba(0,0,0,.15);white-space:nowrap} /* `pastilla` se usaba en la pantalla de struts sin estar definida, asi que salia como texto suelto. Es la misma idea que `etiqueta`, con dos estados: `buena` cuando nuestro calculo coincide con Ace y `ojo` cuando no. */ .pastilla{display:inline-block;padding:2px 8px;border-radius:10px; font-size:11px;font-weight:600;white-space:nowrap; border:1px solid var(--borde);background:var(--superficie-tenue)} .pastilla.buena{background:var(--bien-fondo);border-color:var(--bien-borde); color:var(--bien-texto)} .pastilla.ojo{background:var(--ojo-fondo);border-color:var(--ojo-borde); color:var(--ojo-texto)} .sem{font-size:11px;font-weight:600;white-space:nowrap} .sem-Atrasado{color:var(--rojo)} .sem-Esta.semana{color:var(--ambar)} /* nombre viejo, hasta 8/9/2026 */ .sem-Proximos{color:var(--ambar)} .sem-Ready{color:var(--verde)} .barra{background:var(--barra-vacia);border-radius:8px;height:16px;width:100%;min-width:64px; position:relative;overflow:hidden} .barra i{display:block;height:100%;background:var(--saffron);border-radius:8px} .barra b{position:absolute;inset:0;font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;color:var(--texto)} .barra.lleno i{background:var(--verde)} .aviso{background:var(--bien-fondo);border:1px solid var(--bien-borde);color:var(--bien-texto); padding:9px 12px;border-radius:6px;margin-bottom:14px;font-size:13px} /* Aviso de "ojo con esto": ni bueno ni malo, hay que mirarlo. Vivia como color crema fijo dentro de cuatro plantillas, asi que el tema oscuro no lo alcanzaba: quedaba una tarjeta clara con la letra del tema encima. */ /* LO QUE SALIO MAL, EN ROJO. `aviso malo` se usaba en once pantallas (errores, "the truck cannot leave yet", "the dealer did not confirm") y NO tenia regla: salia verde, igual que un "listo". La prueba de hojas no lo vio porque `.malo` si existe en otra regla. 24-sep-2026. */ .aviso.malo{background:var(--malo-fondo);border-color:var(--malo-borde); color:var(--malo-texto)} /* Lo que salio bien: el mismo verde del aviso, dicho a proposito. */ .aviso.ok{background:var(--bien-fondo);border-color:var(--bien-borde); color:var(--bien-texto)} .aviso.ojo{background:var(--ojo-fondo);border-color:var(--ojo-borde); color:var(--ojo-texto)} .error{background:var(--malo-fondo);border:1px solid var(--malo-borde);color:var(--malo-texto); padding:9px 12px;border-radius:6px;margin-bottom:14px;font-size:13px} .entrada{display:flex;flex-direction:column;gap:3px;margin-bottom:11px} .entrada label{font-size:13px;color:var(--gris-mas-hondo); letter-spacing:.08em} .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px} /* ------------------------------------------- LA FORMA DE LA ENTREGA `.rejilla` le da a todo el mismo ancho, y por eso la direccion salia cortada mientras "From" y "To" sobraban espacio. Aqui cada campo dice CUANTO ocupa, en una rejilla de 12 columnas, y los campos se agrupan por lo que contestan: cuando, a donde, que se sube, y quien confirma. Pedido de Sergio, 16 de septiembre de 2026: "que se vea profesional, tenemos mucho espacio para que no se vea amontonado". */ .forma-entrega{display:grid;gap:20px} .grupo-campos{display:grid;gap:12px 18px; grid-template-columns:repeat(12,minmax(0,1fr));align-items:end} /* El ultimo paso del embarque, en el packing slip. Se ve como una forma -- con sus campos que llenar -- y no como un boton suelto: registrar el viaje avisa a la casa que la orden salio, y eso no puede pasar de un clic distraido. Ver el comentario de la plantilla. */ .carga-viaje{margin-top:10px;padding:10px 12px;border:1px solid var(--borde); border-left:3px solid var(--saffron);border-radius:8px; background:var(--superficie-tenue)} .carga-viaje .campos{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end; margin:6px 0} .carga-viaje .campo input{width:160px} /* La hoja del gas strut: el dibujo a la izquierda y los datos a la derecha, porque se lee de un vistazo con la ventana enfrente. */ .hoja-strut .strut-hoja-cols{display:flex;flex-direction:column;gap:14px; margin-top:14px} .strut-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;align-items:start} /* SOLO EN PANTALLA. En papel la pagina mide 739 px de ancho, asi que una regla de "max-width" tambien le pega: los tres bloques se apilaban y se comian la hoja, dejando al dibujo cortado abajo. */ @media screen and (max-width:820px){.strut-datos{grid-template-columns:1fr}} /* EL DIBUJO SE AJUSTA A SU CAJA, no al reves: sale con `viewBox`, asi que se le da una altura y el se acomoda dentro. Esto es lo que hace que la hoja quepa SIEMPRE en una pagina, que es como Sergio la ocupa en el piso. */ .strut-dibujo{border:1px solid var(--borde);border-radius:8px;padding:8px; background:var(--blanco);height:600px} .strut-dibujo svg{display:block;width:100%;height:100%} .hoja-strut .dato{font-size:var(--fs-md);margin:3px 0} .hoja-strut .dato span{display:inline-block;min-width:140px;color:var(--gris-hondo)} .hoja-strut .cota{font-size:var(--fs-lg);margin:4px 0} .hoja-strut .cota span{display:inline-block;min-width:160px; font-size:var(--fs-sm);color:var(--gris-hondo)} .hoja-strut .cota b{font-variant-numeric:tabular-nums} /* ---- LA HOJA DE LA DAYTONA ---- Dibujo a la izquierda y datos a la derecha, en dos columnas. Antes eran tres columnas a todo lo ancho y con el dibujo vacio: los rotulos quedaban a media pantalla de su valor. */ .dy-cols{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:22px;align-items:start;margin-top:14px} /* UNA sola columna de datos al lado del dibujo. En dos columnas los valores se parten en dos renglones -- 59-1/4" x 116-1/4" no cabe -- y una medida partida se lee mal en el piso. Con una columna sobra ancho y sobra alto. */ .dy-datos{display:grid;grid-template-columns:1fr;gap:10px;align-items:start} .dy-datos .dato b,.dy-datos .cota b{white-space:nowrap} @media screen and (max-width:900px){.dy-cols{grid-template-columns:1fr}} .hoja-daytona .dato span, .hoja-daytona .cota span{min-width:118px} .hoja-daytona .titulo-seccion{margin-top:2px} .strut-correo-texto{white-space:pre-wrap;font-size:var(--fs-sm); background:var(--superficie-tenue);border:1px solid var(--borde); border-radius:6px;padding:12px;margin:0} /* ---------------------------------------------------- GAS STRUTS La pantalla de Sergio: a la izquierda lo que calcula la app, a la derecha lo que contesto Ace, y abajo las dos cotas que se dibujan. En dos columnas porque la gracia es compararlas de un vistazo. */ .strut h2 a{text-decoration:none} .strut-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px; margin-top:10px} @media (max-width:900px){.strut-cols{grid-template-columns:1fr}} .strut .dato{font-size:var(--fs-md);margin:3px 0} .strut .dato span{display:inline-block;min-width:150px;color:var(--gris-hondo)} .strut-forma{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px;align-items:end;margin-top:6px} .strut-forma .campo.c12{grid-column:1/-1} .strut-forma button{grid-column:1/-1;justify-self:start} .strut-cotas{margin-top:14px;padding:10px 12px;border-radius:8px; background:var(--superficie-tenue);border:1px solid var(--borde); border-left:3px solid var(--saffron)} .strut-cotas .cota{font-size:var(--fs-base);margin:3px 0} .strut-cotas .cota span{display:inline-block;min-width:170px; color:var(--gris-hondo);font-size:var(--fs-sm)} .strut-cotas .cota b{font-variant-numeric:tabular-nums} .strut-correo{margin-top:12px} .strut-correo summary{cursor:pointer;font-size:var(--fs-sm); color:var(--gris-hondo)} .strut-correo pre{white-space:pre-wrap;font-size:var(--fs-sm); background:var(--superficie-tenue);border:1px solid var(--borde); border-radius:6px;padding:10px;margin:8px 0 0} /* ------------------------------------------- EL TITULO DE UNA SECCION Sergio, 18-sep-2026, senalando los rotulos de la forma de entrega -- "WHEN", "WHERE AND WITH WHOM", "WHAT GOES ON THE TRUCK" --: *"a este tipo de titulos podriamos ponerles un fondo para que sean un poco mas visuales, tanto aqui como en toda la app"*. Eran texto suelto en mayusculas con una raya debajo: a 12 px y con mucho espaciado se leen como adorno, no como el encabezado de un bloque. Con fondo, borde y una barra de color a la izquierda se ven como lo que son: donde empieza cada parte de la forma. `.titulo-seccion` es la clase para usarla en cualquier pantalla. Las hojas que se IMPRIMEN no entran: ahi `.rotulo` tiene sus propios tamanos medidos contra el papel, y una banda gris se imprime como una mancha. */ .titulo-seccion, .grupo-campos>.rotulo{ display:block;grid-column:1/-1;margin:0 0 2px; font-family:var(--fuente-ui);font-weight:700; font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase; color:var(--gris-mas-hondo); background:var(--gris-fondo); border:1px solid var(--borde); border-left:3px solid var(--saffron); border-radius:6px; padding:6px 10px; } /* Lo que aclara el titulo va en el mismo renglon pero sin gritar. */ .titulo-seccion .chico, .grupo-campos>.rotulo .chico{text-transform:none;letter-spacing:0; font-weight:400;color:var(--gris-hondo)} .forma-entrega label{display:flex;flex-direction:column;gap:3px;min-width:0} .forma-entrega input{width:100%} .forma-entrega .c2{grid-column:span 2} .forma-entrega .c3{grid-column:span 3} .forma-entrega .c4{grid-column:span 4} .forma-entrega .c5{grid-column:span 5} .forma-entrega .c6{grid-column:span 6} .forma-entrega .c8{grid-column:span 8} /* La liga de una solicitud de compra, junto a "Cuantos hay en stock" (c2): 7-oct-2026. */ .forma-entrega .c10{grid-column:span 10} .forma-entrega .c12{grid-column:span 12} /* La casilla que decide si el camion sale: se ve como una decision, no como un campo mas de la lista. */ .forma-entrega .casilla-confirma{flex-direction:row;align-items:center;gap:8px; border:2px solid var(--borde);border-radius:8px;padding:9px 14px; align-self:end} .forma-entrega .casilla-confirma.si{border-color:var(--verde); background:var(--bien-fondo)} .forma-entrega .pie-forma{grid-column:1/-1;display:flex;gap:16px; align-items:flex-end;flex-wrap:wrap} @media (max-width:900px){ .forma-entrega .c2,.forma-entrega .c3,.forma-entrega .c4, .forma-entrega .c5{grid-column:span 4} .forma-entrega .c6,.forma-entrega .c8,.forma-entrega .c10{grid-column:span 8} } @media (max-width:620px){ .forma-entrega [class*="c"]{grid-column:1/-1} } /* ------------------------------------------------- ENTRAR / CONTRASENA El logo vertical preside la pantalla de acceso: es la primera cosa que ve la gente al abrir el programa. */ .login{max-width:360px;margin:7vh auto;background:var(--superficie);border:1px solid var(--borde); border-radius:12px;padding:30px 28px; box-shadow:0 1px 2px rgba(19,10,1,.05),0 12px 30px -14px rgba(19,10,1,.20)} .login .logo{display:block;width:172px;max-width:70%;height:auto; margin:0 auto 20px} .login h1{text-align:center;margin:0 0 4px;font-size:16px;font-weight:700} .login .lema{text-align:center;font-family:"Bebas Neue","Montserrat",sans-serif; font-size:13px;letter-spacing:.14em;color:var(--davy);margin:0 0 20px} .login button{width:100%;margin-top:6px;background:var(--saffron); border-color:var(--saffron);color:var(--negro);font-weight:700; padding:9px 14px} .login button:hover{background:var(--saffron-hondo)} .login .pie-login{margin-top:16px;text-align:center;font-size:12px} .pie{color:var(--gris);font-size:11px;margin-top:24px;border-top:1px solid var(--borde); padding-top:12px} .globo{background:var(--saffron);color:var(--negro);border-radius:9px;padding:0 6px; font-size:11px;font-weight:700;vertical-align:1px} /* Encabezados que ordenan. La flecha va PEGADA al titulo, no en un renglon de cajas debajo. La pone tabla.js como texto: con content de CSS un escape mal generado deja un caracter de control y se ve como un cuadrito. */ th.ordenable{cursor:pointer;user-select:none;white-space:nowrap; transition:background .12s} th.ordenable:hover{background:var(--negro-alto)} th.ordenable:focus-visible{outline:2px solid var(--saffron);outline-offset:-2px} th.ordenando{background:var(--negro-hondo)} .flecha-orden{margin-left:6px;font-size:11px;letter-spacing:-1px; opacity:.42;font-weight:400} th.ordenando .flecha-orden{opacity:1;letter-spacing:0;font-size:11px; color:var(--saffron)} /* Caja de busqueda de las tablas con data-buscar="1" */ .barra-busqueda{display:flex;align-items:center;gap:12px;margin-bottom:8px} .barra-busqueda input{min-width:280px;font-size:13px;padding:7px 10px; border:1px solid var(--campo-borde);border-radius:6px;background:var(--superficie)} .conteo-filas{font-size:11px;color:var(--gris)} /* ---- Junta de produccion ---- */ .cuerpo-junta{padding:14px 18px} ol.agenda{margin:0;padding-left:20px;line-height:1.9} ol.agenda li{padding-left:4px} .prio{display:inline-block;padding:1px 9px;border-radius:10px;font-size:11px; font-weight:600;text-transform:capitalize} .prio-alta{background:var(--malo-fondo);color:var(--malo-texto);border:1px solid var(--malo-borde)} .prio-media{background:var(--acento-suave);color:var(--ojo-texto);border:1px solid var(--ojo-borde)} .prio-baja{background:var(--gris-fondo);color:var(--gris-hondo);border:1px solid var(--borde)} tr.cerrado td{opacity:.5} tr.cerrado td b{text-decoration:line-through} .vencido{color:var(--rojo);font-weight:600;font-size:11px} .nota{border-left:2px solid var(--acento-borde);padding-left:7px;margin-top:3px; color:var(--gris-hondo)} details summary{cursor:pointer;color:var(--quemado);padding:2px 0} form.editor{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0; background:var(--gris-fondo);padding:7px;border-radius:6px} form.editor input,form.editor select{font-size:12px;padding:4px 6px} button.peligro{background:var(--superficie);color:var(--rojo);border-color:var(--malo-borde)} button.peligro:hover{background:var(--malo-fondo)} .dos-columnas{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:900px){.dos-columnas{grid-template-columns:1fr 1fr}} .activo-chip{font-weight:700;text-decoration:underline} .sem-fila{display:grid;grid-template-columns:150px 1fr 34px;align-items:center; gap:10px;padding:5px 0;font-size:13px} /* ---- Campos con su encabezado, para saber que es cada cosa ---- */ label.campo{display:flex;flex-direction:column;gap:3px} label.campo>span{font-size:var(--fs-sm);color:var(--gris-mas-hondo); font-weight:600;letter-spacing:.01em} form.editor{align-items:flex-start} /* Responsables: casillas en vez de lista desplegable. Con datalist habia que borrar el texto para ver las opciones, y no dejaba poner a dos personas. */ .casillas{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0} .casilla{display:inline-flex;align-items:center;gap:5px;font-size:12.5px; background:var(--superficie);border:1px solid var(--campo-borde);border-radius:14px; padding:3px 11px 3px 8px;cursor:pointer;text-transform:none; letter-spacing:0;color:var(--texto);font-weight:400; font-family:"Montserrat",sans-serif} .casilla:hover{border-color:var(--saffron);background:var(--acento-suave)} .casilla input{margin:0} .casilla.sin-correo{opacity:.55;cursor:not-allowed} .casilla .chico{margin-left:2px} /* Cada responsable asignado, como etiqueta. Se llama .responsable y no .quien: .quien es el bloque del usuario en el encabezado, y compartir el nombre le metia un fondo claro encima del negro. */ .responsable{display:inline-block;background:var(--gris-fondo);border:1px solid var(--borde); border-radius:11px;padding:1px 8px;margin:1px 3px 1px 0;font-size:11.5px; color:var(--gris-mas-hondo);white-space:nowrap} /* Tache para borrar un comentario */ button.tache{background:none;border:0;color:var(--gris);cursor:pointer; font-size:14px;line-height:1;padding:0 3px;margin-left:3px} button.tache:hover{color:var(--rojo);background:none} /* ---- Total con su desglose ---- El total manda visualmente y el desglose dice explicitamente que suma. Antes eran siete tarjetas iguales y la lectura natural era sumarlas todas, con lo que el total salia inflado. */ .tablero-kpi{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch; margin-bottom:14px} .tablero-kpi .total{background:var(--negro);color:var(--blanco);border-radius:10px; padding:14px 24px;min-width:190px;display:flex;flex-direction:column; justify-content:center} .tablero-kpi .total span{font-size:13px; letter-spacing:.11em;color:var(--saffron)} .tablero-kpi .total b{font-size:44px;line-height:1.05;font-weight:800} .tablero-kpi .total small{font-size:11px;opacity:.72} .tablero-kpi .desglose{flex:1;min-width:300px;background:var(--superficie); border:1px solid var(--borde);border-radius:10px;padding:10px 14px; display:flex;flex-direction:column;justify-content:center} .desglose-titulo{font-size:13px;letter-spacing:.02em; color:var(--gris);margin-bottom:8px} .partes{display:flex;flex-wrap:wrap;gap:7px} .parte{display:flex;align-items:baseline;gap:6px;border:1px solid var(--borde); border-radius:8px;padding:6px 12px;background:var(--superficie-tenue);text-decoration:none; color:var(--texto);border-left:3px solid var(--campo-borde)} .parte:hover{background:var(--acento-suave);text-decoration:none; border-color:var(--saffron)} .parte b{font-size:19px;line-height:1;font-weight:800} .parte span{font-size:12px;color:var(--gris);letter-spacing:.05em} .parte.sem-Atrasado{border-left-color:var(--rojo)} .parte.sem-Atrasado b{color:var(--rojo)} .parte.sem-Esta{border-left-color:var(--ambar)} /* nombre viejo */ .parte.sem-Esta b{color:var(--ambar)} .parte.sem-Proximos{border-left-color:var(--ambar)} .parte.sem-Proximos b{color:var(--ambar)} .parte.sem-Ready{border-left-color:var(--verde)} .parte.sem-Ready b{color:var(--verde)} /* ---- En que va la orden, en el anden ---- Dice si lo que se esta subiendo es de una orden lista o de una que todavia esta en el piso. El anden NO filtra -- los parciales son legitimos -- asi que lo unico que puede hacer es decirlo. */ .como-va{display:inline-block;padding:2px 9px;border-radius:10px; font-size:11px;font-weight:600;white-space:nowrap;margin-left:8px; text-transform:none;letter-spacing:0;font-family:"Montserrat",sans-serif} .como-va.verde{background:var(--bien-fondo);color:var(--bien-texto); border:1px solid var(--bien-borde)} .como-va.ambar{background:var(--ojo-fondo);color:var(--ojo-texto); border:1px solid var(--ojo-borde)} .como-va.gris{background:var(--gris-fondo);color:var(--gris-hondo); border:1px solid var(--borde)} /* ---- Ojo para tapar el dinero ---- */ .form-ojo{margin:0} button.ojo{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30); color:var(--blanco);font-size:12px;padding:5px 12px;border-radius:15px;cursor:pointer; display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:400} button.ojo:hover{background:rgba(244,146,49,.32);border-color:var(--saffron)} button.ojo .icono{font-size:13px;line-height:1} button.ojo span{font-size:11px;letter-spacing:.2px;color:var(--blanco)} /* ---- Ventanas y plantas ---- */ .planta{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px; font-weight:600;white-space:nowrap} .planta-Gardena{background:var(--bien-fondo);color:var(--bien-texto);border:1px solid var(--bien-borde)} .planta-Tecate{background:var(--acento-suave);color:var(--ojo-texto);border:1px solid var(--ojo-borde)} tr.detenida td{background:var(--malo-raya) !important} tr.detenida:hover td{background:var(--malo-fondo) !important} /* ---- Barra de captura de ventanas ---- */ .barra-acciones{position:sticky;top:44px;z-index:15;border-color:var(--saffron)} .barra-acciones h2{background:var(--acento-suave);color:var(--quemado)} .contador-marcadas{text-transform:none;letter-spacing:0;font-weight:400; margin-left:8px;color:var(--gris);font-family:"Montserrat",sans-serif} .accion{padding:5px 0;border-bottom:1px solid var(--borde)} .accion:last-of-type{border-bottom:0} .accion-titulo{display:block;font-size:12px; letter-spacing:.10em;color:var(--gris);margin-bottom:3px} .barra-acciones button[disabled]{opacity:.4;cursor:not-allowed} .sillpan{display:inline-block;background:var(--acento-suave);color:var(--quemado); border:1px solid var(--acento-borde);border-radius:10px;padding:1px 8px; font-size:11px;font-weight:600} .sillpan.comprado{background:var(--lila-fondo);color:var(--lila-texto);border-color:var(--lila-borde)} .marcar-todas{display:flex;align-items:center;gap:8px;padding:4px 10px; background:var(--acento-suave);border:1px solid var(--acento-borde); border-radius:7px;margin-bottom:10px;cursor:pointer;font-size:13px} .marcar-todas input{margin:0;width:15px;height:15px} tr.bloqueada td{opacity:.5;background:var(--raya)} tr.bloqueada b{font-weight:500} /* ============================================================ INICIO La pantalla que abre el programa. Manda lo que hay que atender hoy; los accesos a las secciones van despues. ============================================================ */ .portada{background:var(--negro);color:var(--blanco);border-radius:12px; padding:22px 26px;margin-bottom:18px;display:flex;align-items:center; gap:22px;flex-wrap:wrap; background-image:radial-gradient(circle at 88% -30%, rgba(244,146,49,.28),transparent 62%)} .portada img{height:56px;width:auto;flex:none} .portada .texto{flex:1;min-width:230px} .portada .saludo{font-family:"Bebas Neue","Montserrat",sans-serif;font-size:15px; letter-spacing:.14em;color:var(--saffron);margin:0 0 4px} .portada h1{font-size:25px;margin:0;color:var(--blanco);font-weight:800; letter-spacing:-.015em} .portada .fecha{color:rgba(255,255,255,.66);font-size:12px;margin-top:5px} /* Lo que pide atencion. Solo aparece lo que tiene numero: un tablero de ceros es ruido y la gente deja de leerlo. */ .atencion{display:grid;gap:10px;margin-bottom:18px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .alerta-tarjeta{display:block;background:var(--superficie);border:1px solid var(--borde); border-left:4px solid var(--campo-borde);border-radius:9px;padding:12px 15px; color:var(--texto);text-decoration:none} .alerta-tarjeta:hover{text-decoration:none;border-color:var(--saffron); background:var(--acento-suave)} .alerta-tarjeta b{display:block;font-size:27px;line-height:1.05;font-weight:800} .alerta-tarjeta .que{font-family:"Bebas Neue","Montserrat",sans-serif; font-size:14px;letter-spacing:.09em;color:var(--gris);display:block; margin-top:3px} .alerta-tarjeta .detalle{font-size:11.5px;color:var(--gris);margin-top:5px; display:block;line-height:1.45} .alerta-tarjeta.roja{border-left-color:var(--rojo)} .alerta-tarjeta.roja b{color:var(--rojo)} .alerta-tarjeta.ambar{border-left-color:var(--ambar)} .alerta-tarjeta.ambar b{color:var(--ambar)} .alerta-tarjeta.verde{border-left-color:var(--verde)} .alerta-tarjeta.verde b{color:var(--verde)} .alerta-tarjeta.acento{border-left-color:var(--saffron)} .alerta-tarjeta.acento b{color:var(--quemado)} .todo-en-orden{background:var(--superficie);border:1px solid var(--borde);border-radius:9px; padding:16px 18px;margin-bottom:18px;color:var(--gris);font-size:13px} .todo-en-orden b{color:var(--verde)} /* Accesos a las secciones */ .accesos{display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(228px,1fr))} .acceso{display:flex;flex-direction:column;gap:4px;background:var(--superficie); border:1px solid var(--borde);border-radius:10px;padding:15px 17px; color:var(--texto);text-decoration:none;transition:border-color .12s} .acceso:hover{text-decoration:none;border-color:var(--saffron); box-shadow:0 6px 18px -12px rgba(19,10,1,.4)} .acceso .nombre{font-family:"Bebas Neue","Montserrat",sans-serif;font-size:19px; letter-spacing:.06em;color:var(--texto);display:flex;align-items:baseline; gap:8px} .acceso .cuenta{font-family:"Montserrat",sans-serif;font-size:12px; font-weight:700;color:var(--quemado);background:var(--acento-suave); border-radius:9px;padding:1px 8px;letter-spacing:0} .acceso p{margin:0;font-size:12px;color:var(--gris);line-height:1.5} /* Aviso de piezas sin capturar, pegado a la barra de avance. Va en rojo porque una orden puede marcar 100% teniendo lineas que nadie toco, y de ahi a embarcar incompleto hay un paso. */ .falta-capturar{display:block;margin-top:3px;font-size:11.5px;font-weight:600; color:var(--rojo);text-decoration:none;line-height:1.2} .falta-capturar:hover{text-decoration:underline} /* Numero de orden que en OpenJanela tiene mas de un pedido vivo. Va pegado al numero porque es ahi donde enganna: se ve una orden y son dos. */ .compartido{display:block;margin-top:2px;font-size:11px;font-weight:700; color:var(--rojo);background:var(--malo-fondo);border:1px solid var(--malo-borde); border-radius:9px;padding:0 6px;line-height:1.5;white-space:nowrap} /* OpenJanela cambio la orden despues de que produccion capturo. Va en ambar y no en rojo: no es un riesgo de embarcar incompleto, es que hay que volver a mirar la orden. */ .cambio-oj{display:block;margin-top:3px;font-size:11.5px;font-weight:600; color:var(--ambar);text-decoration:none;line-height:1.2} .cambio-oj:hover{text-decoration:underline} /* El renglon que se acaba de guardar parpadea un momento, para encontrarlo con la vista al volver de un POST. */ @keyframes recien{from{background:var(--acento-suave)}to{background:transparent}} .recien-guardado>td{animation:recien 1.6s ease-out} /* ---- Datos de compras del pendiente ---- */ .compras-resumen{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px; font-size:11px;align-items:center} .compras-resumen b,.compras-resumen span{background:var(--gris-fondo); border:1px solid var(--borde);border-radius:9px;padding:1px 7px; white-space:nowrap;color:var(--gris-mas-hondo)} .compras-resumen b{background:var(--negro);color:var(--blanco);border-color:var(--negro)} .compras-resumen .sin-pedir{background:var(--malo-fondo);color:var(--malo-texto); border-color:var(--malo-borde);font-weight:600} .compras-resumen .pedida{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} .compras-resumen .llega{background:var(--acento-suave);color:var(--quemado); border-color:var(--acento-borde)} .compras-resumen .llega-tarde{background:var(--malo-fondo);color:var(--malo-texto); border-color:var(--malo-borde);font-weight:600} details.compras>summary{font-size:11px;text-transform:uppercase; letter-spacing:.09em;color:var(--gris);font-weight:600;padding:4px 0; font-family:"Bebas Neue","Montserrat",sans-serif} details.compras[open]>summary{color:var(--quemado)} /* Eliminar no es cerrar: se separa del resto para que no se confundan. */ form.zona-peligro{display:flex;align-items:center;gap:9px;margin-top:10px; padding-top:9px;border-top:1px dashed var(--borde)} /* La cantidad que manda OpenJanela: se ensena, no se teclea. */ .qty-erp{display:inline-block;min-width:52px;text-align:right;padding:5px 8px; background:var(--gris-fondo);border:1px dashed var(--campo-borde);border-radius:5px; font-variant-numeric:tabular-nums;font-weight:600;color:var(--texto)} /* ---- Vidrio ---- La leyenda es un enlace a la pantalla Glass filtrada por esa orden: desde el tablero se ve el estado y con un clic se va a hacer algo al respecto. */ .vidrio{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px; border-radius:11px;font-size:11px;font-weight:600;text-decoration:none; white-space:nowrap;border:1px solid transparent} .vidrio:hover{text-decoration:none;filter:brightness(.96)} .vidrio b{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums} .v-sin-pedir{background:var(--malo-fondo);color:var(--malo-texto);border-color:var(--malo-borde)} .v-parcial{background:var(--ojo-fondo);color:var(--ojo-texto);border-color:var(--ojo-borde)} .v-pedido{background:var(--acento-suave);color:var(--quemado); border-color:var(--acento-borde)} .v-recibido{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} /* Estaba completa y dejo de estarlo: una hoja se volvio a pedir. Se ve distinto de 'pedido' a proposito -- ahi nunca llego nada, aqui llego casi todo y se cayo uno. */ .v-reorden{background:var(--reorden-fondo);color:var(--reorden-texto);border-color:var(--reorden-borde)} /* La medida que manda OpenJanela: se ve, no se edita. */ .medida-erp{display:inline-block;padding:2px 8px;background:var(--gris-fondo); border:1px dashed var(--campo-borde);border-radius:5px; font-variant-numeric:tabular-nums;white-space:nowrap} .parte.v-borde-rojo{border-left-color:var(--rojo)} .parte.v-borde-rojo b{color:var(--rojo)} .parte.v-borde-ambar{border-left-color:var(--ambar)} .parte.v-borde-ambar b{color:var(--ambar)} .parte.v-borde-verde{border-left-color:var(--verde)} .parte.v-borde-verde b{color:var(--verde)} /* Corregir la medida de una hoja: plegado hasta que se necesita. */ details.medida>summary{cursor:pointer;font-size:12px;list-style:none} details.medida>summary::-webkit-details-marker{display:none} details.medida>summary:hover{color:var(--quemado)} details.medida[open]>summary{margin-bottom:5px} details.medida form.editor{white-space:normal;min-width:330px} /* Estas viendo el vidrio de UNA orden: por donde saliste y como volver. */ .panel.migaja{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:12px 16px;background:var(--acento-suave); border-color:var(--acento-borde)} .salir-orden{font-weight:600;color:var(--quemado);text-decoration:none; white-space:nowrap} .salir-orden:hover{text-decoration:underline} /* Volver al proyecto desde Vidrio o Screens. Va a la derecha del texto y se ve como boton, no como liga: sin esto habia que ir a "En produccion" y buscar el proyecto otra vez. */ .ir-al-proyecto{margin-left:auto;font-weight:600;font-size:12.5px; text-decoration:none;white-space:nowrap;padding:6px 13px;border-radius:6px; background:var(--negro);color:var(--blanco)} .ir-al-proyecto:hover{background:var(--quemado)} /* En Vidrio el filtro de estado ya se pega a la derecha; ahi el boton solo se separa del texto. */ .panel.migaja .ir-al-proyecto:not(:last-child){margin-left:0} button.cancelar-medida{background:none;border:1px solid var(--campo-borde); color:var(--gris);font-size:12px;padding:5px 12px} button.cancelar-medida:hover{background:var(--gris-fondo);color:var(--texto)} /* El avance por linea es un resumen, no un campo. */ .pct-leido{display:inline-block;min-width:52px;text-align:right;padding:5px 8px; background:var(--gris-fondo);border:1px dashed var(--campo-borde);border-radius:5px; font-variant-numeric:tabular-nums;color:var(--texto)} .fuente-ventanas,.fuente-vieja{display:inline-block;margin-left:7px; font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px; text-transform:uppercase;letter-spacing:.04em} .fuente-ventanas{background:var(--bien-fondo);color:var(--bien-texto);border:1px solid var(--bien-borde)} .fuente-vieja{background:var(--gris-fondo);color:var(--gris);border:1px solid var(--borde)} /* El avance por linea es un resumen, no un campo. */ .pct-leido{display:inline-block;min-width:52px;text-align:right;padding:5px 8px; background:var(--gris-fondo);border:1px dashed var(--campo-borde);border-radius:5px; font-variant-numeric:tabular-nums;color:var(--texto)} .fuente-ventanas,.fuente-vieja{display:inline-block;margin-left:7px; font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px; text-transform:uppercase;letter-spacing:.04em;vertical-align:1px} .fuente-ventanas{background:var(--bien-fondo);color:var(--bien-texto);border:1px solid var(--bien-borde)} .fuente-vieja{background:var(--gris-fondo);color:var(--gris);border:1px solid var(--borde)} /* ---- La puerta a la captura ---- El desglose por ventana es donde se captura el avance; el resto de la ficha es de consulta. Por eso va como boton grande y en color de la marca, no como un enlace mas del monton. */ .boton-ventanas{ display:flex;align-items:center;gap:16px; background:var(--saffron);color:var(--negro); border:2px solid var(--negro);border-radius:11px; padding:16px 22px;margin:0 0 18px;text-decoration:none; box-shadow:0 3px 0 var(--negro); transition:transform .08s, box-shadow .08s; } .boton-ventanas:hover{ text-decoration:none;background:var(--saffron-claro); transform:translateY(-1px);box-shadow:0 4px 0 var(--negro); } .boton-ventanas:active{transform:translateY(2px);box-shadow:0 1px 0 var(--negro)} .boton-ventanas .titulo{ font-family:"Bebas Neue","Montserrat",sans-serif; font-size:24px;letter-spacing:.05em;line-height:1;flex:none; } .boton-ventanas .detalle{ font-size:12.5px;line-height:1.4;opacity:.85;flex:1;min-width:150px; } .boton-ventanas .flecha{font-size:26px;font-weight:800;flex:none;line-height:1} @media(max-width:620px){ .boton-ventanas{flex-wrap:wrap;gap:8px} .boton-ventanas .titulo{font-size:20px} } /* En que estaciones trabaja un operador. */ .estacion-chip{display:inline-block;background:var(--acento-suave); color:var(--quemado);border:1px solid var(--acento-borde);border-radius:9px; padding:1px 8px;margin:1px 3px 1px 0;font-size:11px;white-space:nowrap} /* El asistente apoya donde haga falta: no ocupa una estacion propia. */ .rol-asistente{display:inline-block;background:var(--acento-suave); color:var(--quemado);border:1px solid var(--acento-borde);border-radius:9px; padding:1px 9px;font-size:11px;font-weight:600} /* Que tan bueno es cada quien en cada estacion. */ .casilla.con-nivel{padding-right:5px} /* 46px no alcanzaban para tres digitos con la flechita del number: quien tecleaba 100 veia '10' y creia que se habia guardado mal. */ input.nivel{width:70px;padding:2px 6px;font-size:12px;text-align:right; border-radius:4px;margin-left:4px; font-variant-numeric:tabular-nums} .estacion-chip b{font-weight:800;margin-left:3px;font-variant-numeric:tabular-nums} .estacion-chip.fuerte{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} /* ---- Matriz de habilidades ---- Estaciones en los renglones y gente en las columnas: son pocas personas y muchas estaciones. Con los titulos verticales quedaba ilegible. */ .marco-matriz{overflow-x:auto;border:1px solid var(--borde);border-radius:9px} table.matriz{min-width:auto;border-collapse:separate;border-spacing:0} table.matriz th.col-op{ text-align:center;min-width:104px;padding:9px 10px;line-height:1.25; font-size:12px;letter-spacing:.05em;white-space:nowrap} table.matriz th.quien{min-width:170px;text-align:left} table.matriz td.quien{ text-align:left;white-space:nowrap;background:var(--hoja); border-right:2px solid var(--borde);line-height:1.3} table.matriz tr:nth-child(even) td.quien{background:var(--raya)} table.matriz td.celda{ text-align:center;padding:7px 8px;min-width:104px;line-height:1.3; border-right:1px solid var(--borde)} table.matriz td.celda:last-child{border-right:0} .nivel-num{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums} .sin-calificar{font-size:11.5px;color:var(--gris);font-style:italic} .vacio{color:var(--borde);font-size:15px} td.celda.alto{background:var(--bien-fondo)} td.celda.alto .nivel-num{color:var(--bien-texto)} td.celda.bajo{background:var(--malo-fondo)} td.celda.bajo .nivel-num{color:var(--malo-texto)} td.celda.no-trabaja{background:var(--raya)} .medido{display:block;font-size:11px;color:var(--gris);margin-top:2px; font-variant-numeric:tabular-nums} .mini{display:block;font-size:11px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;opacity:.75;margin-top:2px} .mini.no-en{color:var(--rojo);opacity:1} /* La clave de colores al pie de la matriz. */ .clave{display:inline-block;padding:1px 9px;border-radius:9px;font-size:11px; margin-right:7px;border:1px solid var(--borde)} .clave.alto{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} .clave.bajo{background:var(--malo-fondo);color:var(--malo-texto);border-color:var(--malo-borde)} .clave.no-trabaja{background:var(--raya);color:var(--gris)} /* Estaciones que dependen de una sola persona, o de nadie. */ .riesgo-alto,.riesgo-medio{display:inline-block;padding:1px 9px; border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap} .riesgo-alto{background:var(--malo-fondo);color:var(--malo-texto);border:1px solid var(--malo-borde)} .riesgo-medio{background:var(--ojo-fondo);color:var(--ojo-texto);border:1px solid var(--ojo-borde)} /* Cuando el juicio y los hechos no coinciden. */ .mejor{color:var(--verde);font-weight:600} .peor{color:var(--ambar);font-weight:600} /* =================================================================== AYUDA El manual dentro de la app. Se lee en pantalla y a veces se imprime, asi que el cuerpo va mas ancho y mas aireado que el resto de la app: aqui se lee, no se captura. =================================================================== */ /* El signo de pregunta del encabezado. Redondo y discreto: tiene que estar siempre a la mano sin competir con el menu. */ header a.signo-ayuda{display:inline-flex;align-items:center; justify-content:center;width:24px;height:24px;border-radius:50%; border:1px solid rgba(255,255,255,.34);color:rgba(255,255,255,.82); font-size:13px;font-weight:700;line-height:1;text-decoration:none} header a.signo-ayuda:hover{background:var(--saffron);border-color:var(--saffron); color:var(--negro);text-decoration:none} .busca-ayuda{display:flex;gap:8px;align-items:center;margin-bottom:18px} .busca-ayuda input{flex:1;max-width:640px;padding:11px 14px;font-size:14px; border:1px solid var(--campo-borde);border-radius:8px} .busca-ayuda input:focus{outline:2px solid var(--saffron);outline-offset:-1px; border-color:var(--saffron)} .capitulo-titulo{font-size:12px;text-transform:uppercase;letter-spacing:.12em; color:var(--quemado);margin:26px 0 10px;font-weight:700} .panel.tema{max-width:860px} .panel.tema h2{margin-bottom:4px} /* El cuerpo del manual. Renglon comodo y medida corta: un parrafo de linea a linea completa de la pantalla no se lee, se brinca. */ .prosa{font-size:14px;line-height:1.65;color:var(--texto);max-width:70ch} .prosa p{margin:9px 0} .prosa h3{font-size:13px;margin:16px 0 4px;font-weight:700} .prosa ul,.prosa ol{margin:9px 0;padding-left:22px} .prosa li{margin:5px 0} .prosa code{background:var(--fondo);border:1px solid var(--borde); border-radius:4px;padding:1px 5px;font-size:12.5px} .prosa a{color:var(--quemado);font-weight:600} /* Las advertencias. Son las que evitan el error caro, asi que se ven. */ .prosa p.ojo{background:var(--acento-suave);border-left:3px solid var(--saffron); padding:9px 13px;margin:12px 0;border-radius:0 6px 6px 0; color:var(--texto)} .indice{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px} .indice .capitulo h3{font-size:11px;text-transform:uppercase; letter-spacing:.1em;color:var(--quemado);margin:0 0 6px;font-weight:700} .indice ul{margin:0;padding-left:16px} .indice li{margin:4px 0;font-size:13px;line-height:1.4} .otras-pantallas{max-width:860px;border-color:var(--acento-borde); background:var(--acento-suave)} a.boton-manual{display:inline-block;margin-top:6px;background:var(--negro); color:var(--blanco);padding:9px 16px;border-radius:7px;font-size:13px; font-weight:600;text-decoration:none} a.boton-manual:hover{background:var(--negro-alto);text-decoration:none} .vacio-ayuda{border-color:var(--acento-borde)} .vacio-ayuda h2{color:var(--quemado)} a.arriba{display:inline-block;margin-top:10px;color:var(--gris)} .sin-nada{color:var(--rojo);font-weight:600} /* =================================================================== CENTINELA DEL ESQUEMA (pantalla Estado) El color dice el estado antes de leer una sola palabra. =================================================================== */ .centinela{border-left-width:4px;border-left-style:solid} .centinela-bien{border-left-color:var(--verde)} .centinela-ojo{border-left-color:var(--saffron)} .centinela-mal{border-left-color:var(--rojo);background:var(--malo-raya)} .centinela p{font-size:13px;line-height:1.55;margin:0 0 10px} .gravedad{font-size:11px;text-transform:uppercase;letter-spacing:.06em; font-weight:700;padding:2px 8px;border-radius:9px;white-space:nowrap} .g-grave{background:var(--rojo);color:var(--rojo-letra)} .g-aviso{background:var(--acento-suave);color:var(--quemado); border:1px solid var(--acento-borde)} .g-info{background:var(--fondo);color:var(--gris); border:1px solid var(--borde)} /* =================================================================== TEXTO QUE NO CABE Regla del proyecto: el texto completo SIEMPRE va en el HTML y el recorte lo hace el navegador. Recortarlo en el servidor con [:44] borraba datos que cambian una decision -- el tipo de gas del vidrio (Air contra Argon) y el final de los nombres de proyecto ("... RE ORDER Extra Glass"). Asi Ctrl+F lo encuentra, se copia entero, y al pasar el cursor se lee. =================================================================== */ .texto-largo{max-width:340px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;cursor:help} .texto-largo:hover{white-space:normal;overflow:visible; background:var(--acento-suave);border-radius:4px} div.texto-largo{max-width:100%} /* Los screens: entregables, no etapas. El estado se lee de un vistazo. */ .screen{font-size:11px;font-weight:700;padding:2px 9px;border-radius:9px; white-space:nowrap;text-transform:lowercase} .s-por-hacer{background:var(--malo-fondo);color:var(--rojo);border:1px solid var(--malo-borde)} .s-hecho{background:var(--acento-suave);color:var(--quemado); border:1px solid var(--acento-borde)} .s-entregado{background:var(--bien-fondo);color:var(--verde);border:1px solid var(--bien-borde)} /* Las estaciones de un screen, una por una en el mismo renglon. Iban con la clase `.chip`, que esta definida como `.detalle .chip`: solo aplica dentro de un contenedor `.detalle`. En la tabla viven en un , asi que no recibian NINGUN estilo y se leian corridas: "Cut Cut Out/CNC Hardware Assembly Screen Mesh QC". Llevan recuadro propio, como el distintivo de arriba, para que se vea donde acaba una y empieza la otra. */ .chips-estacion{display:flex;flex-wrap:wrap;gap:4px} .chip-estacion{font-size:11px;font-weight:600;padding:2px 8px; border-radius:9px;white-space:nowrap; border:1px solid var(--campo-borde);background:var(--gris-fondo); color:var(--texto)} /* Hecha: el mismo verde del distintivo de entregado. */ .chip-estacion.hecha{background:var(--bien-fondo);border-color:var(--bien-borde); color:var(--bien-texto);font-weight:700} /* =================================================================== AJUSTES Tarjetas grandes en vez de una lista: son cuatro destinos y cada uno necesita una linea que diga para que sirve. Quien entra aqui casi nunca lo hace, asi que conviene explicarle. =================================================================== */ .ajustes{display:grid;gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); max-width:1000px} a.tarjeta-ajuste{display:block;background:var(--superficie); border:1px solid var(--borde);border-radius:10px;padding:16px 18px; text-decoration:none;color:var(--texto)} a.tarjeta-ajuste:hover{border-color:var(--saffron);text-decoration:none; box-shadow:0 1px 8px rgba(19,10,1,.07)} a.tarjeta-ajuste h2{margin:0 0 6px;font-size:14px} a.tarjeta-ajuste p{margin:0 0 10px;font-size:13px;line-height:1.55; color:var(--gris)} a.tarjeta-ajuste .cuantos{font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--quemado)} a.tarjeta-ajuste .cuantos.mal{color:var(--rojo)} /* Las dos vistas de Componentes (Vidrio / Screens). Va arriba del titulo para que se lea como "estas en Componentes, viendo esta parte", no como otro menu. */ .vistas{display:flex;gap:6px;margin-bottom:16px} .vistas a{font-size:15px;font-weight:600;padding:10px 22px;border-radius:24px; color:var(--gris);background:var(--superficie); border:1px solid var(--borde);text-decoration:none} .vistas a:hover{border-color:var(--saffron);text-decoration:none} .vistas a.activo{background:var(--negro);border-color:var(--negro);color:var(--blanco)} /* Reordenes de vidrio. La marca va pegada al estado de la hoja: una hoja pedida dos veces es un vidrio pagado dos veces y tiene que verse en la lista, no nada mas en el reporte. */ .marca-reorden{display:inline-block;margin-left:6px;padding:1px 7px; border-radius:10px;font-size:11px;font-weight:700; background:var(--rojo);color:var(--rojo-letra);text-decoration:none} .marca-reorden:hover{text-decoration:none;opacity:.85} /* La barra de peso de cada corte. Es proporcion, no cantidad: sirve para ver de un golpe cual motivo domina. */ .barra-corte{display:inline-block;width:90px;height:8px;border-radius:4px; background:var(--borde);overflow:hidden;vertical-align:middle; margin-right:6px} .barra-corte>span{display:block;height:100%;background:var(--saffron)} /* Las barras SDL de cada hoja, dibujadas a escala junto a la cuenta ("1V 2H"). Es lo que quien recibe compara contra el vidrio que tiene enfrente (Sergio, 23-oct-2026). */ .sdl-celda{white-space:nowrap} .sdl-dibujo{vertical-align:middle;margin-right:6px} .sdl-dibujo rect{fill:var(--gris-fondo);stroke:var(--davy);stroke-width:1} .sdl-dibujo line{stroke:var(--texto);stroke-width:1.6} /* La reorden pide mas datos que las otras acciones, asi que se separa para que no se lea como continuacion de "Ya se pidio el vidrio". */ .accion-reorden{border-top:2px solid var(--borde);padding-top:12px} /* La reorden va colapsada: pide muchos mas datos que las otras acciones y la barra es sticky. Abierta de nacimiento tapaba el encabezado de la tabla y se comia media pantalla. */ details.accion-reorden>summary{cursor:pointer;list-style:none; display:flex;align-items:baseline;gap:8px} details.accion-reorden>summary::-webkit-details-marker{display:none} details.accion-reorden>summary::before{content:"\25B8"; display:inline-block;transition:transform .12s;color:var(--quemado)} details.accion-reorden[open]>summary::before{transform:rotate(90deg)} details.accion-reorden>summary:hover{color:var(--quemado)} /* La medida se captura en dos campos: el entero y la fraccion. En el taller nadie teclea 40.8125 -- dice "cuarenta y trece dieciseisavos" -- y escoger la fraccion de una lista es mas rapido y no se presta a errores de dedo. */ .medida-partes{display:inline-flex;align-items:center;gap:3px} .medida-partes input{width:56px;text-align:right} .medida-partes select{width:74px;font-variant-numeric:tabular-nums} .medida-partes .por{margin:0 3px;color:var(--gris);font-weight:600} /* La celda de vidrio del tablero: tres renglones, no un numero suelto. Antes salia "pedido 9/10" y el 9 eran RECIBIDAS, mientras que en "parcial 3/6" el 3 eran PEDIDAS. Dos significados con la misma pinta. */ a.vidrio-cuenta{display:inline-block;min-width:118px;padding:4px 8px; border:1px solid;border-radius:6px;text-decoration:none; font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums} a.vidrio-cuenta:hover{text-decoration:none;filter:brightness(.97)} a.vidrio-cuenta span{display:flex;justify-content:space-between;gap:10px} a.vidrio-cuenta i{font-style:normal;opacity:.75} a.vidrio-cuenta b{font-weight:700} /* La reorden es la unica que rompe la buena noticia: se marca. */ a.vidrio-cuenta .rehecho{margin-top:2px;padding-top:2px; border-top:1px dashed currentColor} /* Los cortes de Reordenes: la tabla NO se estira a todo lo ancho. Estirada, el motivo quedaba en la columna 1 y su costo 1,500px a la derecha, con el hueco en medio. Aunque cada dato estuviera bajo su encabezado, nada parecia estarlo. Ahora las columnas abrazan su contenido y la barra de peso se lleva la holgura. */ table.tabla-corte{width:auto;min-width:min(680px,100%);max-width:100%} table.tabla-corte th, table.tabla-corte td{white-space:nowrap} table.tabla-corte .peso{width:100%} /* El boton unico de la captura de avance. Va pegado al fondo porque con ocho estaciones el pie de la tabla queda fuera de pantalla justo cuando terminas de llenar el ultimo renglon. */ .guardar-todo{position:sticky;bottom:0;display:flex;align-items:center; gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 0 4px; background:var(--superficie);border-top:1px solid var(--borde)} .guardar-todo button{font-size:14px;padding:9px 20px} /* El tablero: el PO bajo el proyecto, no junto al numero de orden. Estiraba la columna Orden sin necesidad y dejaba todo apretado a la izquierda. */ .col-dealer{max-width:180px} .col-proyecto{min-width:220px} .col-proyecto .po{color:var(--gris);font-variant-numeric:tabular-nums} /* ------------------------------------------------ el renglon que se abre El tablero se queda compacto y el detalle se abre ahi mismo. Asi cabe lo que no cabria en columnas -- reparto por planta, por estacion, que la detiene -- sin saturar la pantalla principal ni mandar a otra vista. */ td.abrir{padding:0 0 0 4px;width:26px} button.chevron{background:none;border:0;cursor:pointer;padding:4px 5px; color:var(--gris);font-size:13px;line-height:1;border-radius:4px} button.chevron:hover{color:var(--quemado);background:var(--acento-suave)} button.chevron.abierto{color:var(--quemado)} /* El panel va OSCURO y con una barra de acento a la izquierda. Con el fondo claro de antes, teniendo varios abiertos no se veia donde acababa uno y empezaba el siguiente: el panel se confundia con los renglones de la tabla. Oscuro se lee de un golpe que "esto cuelga de la orden de arriba". */ tr.detalle-orden>td{background:var(--detalle-fondo);padding:0; border-bottom:3px solid var(--saffron); box-shadow:inset 5px 0 0 var(--saffron)} tr.renglon-orden.abierta>td{background:var(--acento-suave)} /* Las seis tarjetas SIEMPRE en un renglon. Era flex con `wrap`, y en una orden con cinco lineas de producto la ultima se iba sola a un segundo renglon: la pantalla se leia como dos. Con rejilla, el ancho de cada una se reparte por peso y ninguna decide por su cuenta bajarse. Los pesos salen de cuanto texto lleva cada una: vidrio y planta son dos numeros, el avance por linea es una tabla de seis columnas. */ .detalle-orden .detalle{ display:grid; grid-template-columns:.75fr .6fr 1.25fr .95fr 1.15fr 1.5fr; align-items:start;gap:12px;padding:14px 18px 16px 30px} .detalle .bloque{min-width:0;background:var(--superficie); border:1px solid rgba(255,255,255,.14);border-radius:8px; padding:10px 12px} /* En pantallas chicas la rejilla se parte en dos, que es mejor que aplastar seis columnas hasta que no se lea ninguna. */ @media(max-width:1300px){ .detalle-orden .detalle{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:820px){ .detalle-orden .detalle{grid-template-columns:repeat(2,minmax(0,1fr))} } /* El total va una vez, encima de las cantidades, en vez de repetirse como denominador en cada renglon. */ .detalle .de-cuantas{font-size:11.5px;color:var(--gris);letter-spacing:.04em; padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid var(--borde)} .detalle .de-cuantas.malo{color:var(--rojo);margin-top:7px} .detalle .bloque.angosto .par{gap:10px} /* Los titulos van sobre el fondo oscuro, no dentro de las tarjetas. */ .detalle h4{margin:0 0 7px;font-size:11.5px;text-transform:uppercase; letter-spacing:.07em;color:var(--saffron);font-weight:800} .detalle .par{display:flex;justify-content:space-between;gap:14px; font-size:12.5px;line-height:1.7;font-variant-numeric:tabular-nums} .detalle .par b{font-weight:700} .detalle .par.malo b{color:var(--rojo)} .detalle .chips{display:flex;flex-wrap:wrap;gap:5px} .detalle .chip{font-size:11.5px;padding:2px 8px;border-radius:11px; background:var(--acento-suave);border:1px solid var(--borde)} /* Una etapa YA hecha de un screen. Verde apagado: el renglon lleva cuatro o seis chips y en verde fuerte gritan todos a la vez. */ .chip-hecho{background:var(--bien-fondo);border-color:var(--bien-borde); color:var(--bien-texto);font-weight:600} .detalle .chip b{margin-left:3px;font-weight:800} /* La tabla de avance por linea. El `min-width:0` va en el bloque ANCHO -- el unico que lleva tabla -- y es lo que evita que se desborde: sin eso el flex item crece con su contenido y las ultimas columnas se salian de la tarjeta blanca. Los bloques chicos conservan su min-width. */ .detalle .bloque.ancho{min-width:0} /* La tabla cabe en su columna o se desliza; nunca empuja a las vecinas. */ .detalle table.mini{width:100%;font-size:11px;table-layout:fixed; border-collapse:collapse} .detalle .bloque.ancho{overflow-x:auto} /* Los encabezados NO van en Bebas Neue. Esa tipografia no tiene minusculas de verdad, asi que "Assembly" se leia ASSEMBLY y en una tabla de seis columnas eso es un renglon de gritos que no se parece a ningun otro texto de la app. Aqui van en la de siempre, chicas y en gris. */ .detalle table.mini th{position:static;background:transparent; color:var(--gris);font-family:inherit;font-size:11px;font-weight:700; text-transform:none;letter-spacing:.02em;padding:2px 5px 5px; white-space:nowrap;border-bottom:1px solid var(--borde)} .detalle table.mini td{padding:4px 5px;border-bottom:1px solid var(--raya)} .detalle table.mini tbody tr:last-child td{border-bottom:0} /* La linea de producto es lo unico que puede partirse en dos renglones; los numeros nunca. */ .detalle table.mini td:first-child, .detalle table.mini th:first-child{width:30%} .detalle table.mini td.num{white-space:nowrap;font-variant-numeric:tabular-nums} .detalle table.mini .chico{font-size:11px;line-height:1.35;font-weight:400} .detalle .renglon-screens td{border-top:1px dashed var(--borde)} /* Cuantas piezas de un renglon se van en ESTE viaje. Vacio = todas, que es lo normal; se llena solo cuando el renglon se parte en dos camiones. */ input.cuantas-viaje{width:46px;margin-left:6px;padding:2px 4px;font-size:11.5px; text-align:right} /* El dibujo de OpenJanela, arriba a la derecha del encabezado de la ventana. Va junto a las medidas y el color porque es del mismo tipo de dato: lo que el ERP dice que ES esta ventana. */ .dibujo-ventana{flex:0 0 auto;display:block;background:var(--superficie);border-radius:8px; border:1px solid var(--borde);padding:6px;max-width:290px} .dibujo-ventana img{display:block;width:100%;height:auto;max-height:210px; object-fit:contain} .dibujo-ventana:hover{border-color:var(--saffron)} /* OJO: NO ponerle `overflow` a `.scroll`. La tabla lleva encabezado fijo (`position: sticky` en los th), y un ancestro con overflow crea un contexto nuevo: el encabezado se pega a ESA caja en vez de a la ventana y queda flotando a media tabla, tapando renglones. Se probo el 24 de agosto y quedo peor que el desbordamiento que venia a arreglar. Para que quepa se aprietan las columnas, no se agrega scroll. */ /* Con 16 columnas, lo que puede crecer sin fin se corta. Referencia y ubicacion las escribe el dealer y a veces traen parrafos. */ table .texto-corto{max-width:130px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* La lista de ventanas es la tabla mas ancha de la app: se aprieta para que entre sin barras. */ table.filtrable td, table.filtrable th{padding-left:8px;padding-right:8px} table.filtrable td.texto-largo{max-width:210px} /* La miniatura en la lista de ventanas: para reconocerla sin abrirla. Tiene columna propia, asi que cabe mas grande que cuando iba apretada dentro de Marca. */ .mini-dibujo{display:block} .mini-dibujo img{display:block;width:88px;height:auto;max-height:70px; object-fit:contain;background:var(--superficie);border:1px solid var(--borde); border-radius:5px;padding:3px} .mini-dibujo:hover img{border-color:var(--saffron)} /* Las piezas cuelgan de SU estacion, en un desplegable para no estorbar a quien solo viene a capturar porcentajes. Cada estacion lleva su propio color: con dos cajones abiertos se confundia cual era cual y se capturaba en el equivocado. La franja de la izquierda es lo que se ve de reojo. */ tr.renglon-piezas > td{padding:14px 18px} tr.renglon-piezas.de-armado > td{background:var(--armado-fondo); box-shadow:inset 4px 0 0 var(--armado-franja)} tr.renglon-piezas.de-glazing > td{background:var(--vidrio-fondo); box-shadow:inset 4px 0 0 var(--vidrio-franja)} tr.renglon-piezas summary{cursor:pointer;font-size:13.5px;padding:4px 0; font-weight:600} tr.renglon-piezas summary:hover{color:var(--quemado)} /* La tabla ocupa el ancho que hay. Antes se encogia a su contenido y dejaba media pantalla vacia a la derecha mientras los renglones se amontonaban. */ table.piezas{width:100%;margin-top:10px;background:var(--superficie); border-radius:8px;overflow:hidden;border-collapse:collapse} table.piezas th{position:static;font-size:11.5px;font-weight:700; letter-spacing:.02em;text-transform:none;padding:9px 12px; white-space:nowrap;text-align:left} table.piezas th.num{text-align:right} table.piezas td{padding:7px 12px;font-size:13px;vertical-align:middle; border-top:1px solid var(--raya)} table.piezas tbody tr:first-child td{border-top:0} table.piezas td b{font-weight:700} table.piezas td.medida{white-space:nowrap;font-variant-numeric:tabular-nums; color:var(--gris)} table.piezas td.texto-largo{max-width:340px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;color:var(--gris)} /* Los campos, con aire: se capturan con guantes puestos. */ table.piezas select, table.piezas input[type=date], table.piezas input[type=number]{font-size:13px;padding:5px 8px} table.piezas input[type=date]{width:150px} table.piezas input[type=number]{width:78px;text-align:right} table.piezas input[type=text], table.piezas input:not([type]){font-size:13px;padding:5px 8px;min-width:190px; width:100%} table.piezas td:last-child{width:24%} table.piezas input[type=checkbox]{width:17px;height:17px} /* La columna Estacion: la calcula la app, no se teclea. Se ve como dato, no como control -- si pareciera un desplegable, alguien intentaria cambiarla a mano y ese era justo el problema. */ .estacion{display:inline-block;padding:3px 9px;border-radius:5px; background:var(--negro);color:var(--blanco);font-size:12px;font-weight:600} .estacion.lista{background:var(--bien-fondo);color:var(--bien-texto);border:1px solid var(--bien-borde)} /* Cargada y con folio, pero el camion no ha salido (falta "Mark as left"). Verde es "ya se fue"; esto todavia no. 7-oct-2026, la 3089. */ .estacion.por-salir{background:var(--ojo-fondo);color:var(--ojo-texto);border:1px solid var(--ojo-borde)} /* Lo que detiene la orden y la app sabe sola. La cuenta importa: tres ventanas paradas de doce no es la orden entera. */ .detiene{font-size:11.5px;line-height:1.6;color:var(--rojo); font-variant-numeric:tabular-nums} .detiene b{font-weight:800} /* "Que incluye": para una orden de partes o de Glass esto es TODO lo que hay que decir. No tienen lineas de producto y el bloque de avance por linea les salia vacio. */ .detalle .incluye{padding:6px 0;border-bottom:1px dashed var(--borde)} .detalle .incluye:last-child{border-bottom:0;padding-bottom:0} .detalle .chips.camino{margin-top:5px} .detalle .chips.camino .chip{font-size:11.5px;padding:1px 7px; background:var(--superficie);color:var(--gris)} /* La muestra del color de cada situacion, en su catalogo. */ .muestra-color{display:inline-block;width:15px;height:15px;border-radius:4px; border:1px solid var(--borde);vertical-align:middle} /* El registro de un viaje va colapsado, como la reorden: pide mas datos que las otras acciones y la barra es sticky. */ details.accion-viaje>summary{cursor:pointer;list-style:none; display:flex;align-items:baseline;gap:8px} details.accion-viaje>summary::-webkit-details-marker{display:none} details.accion-viaje>summary::before{content:"\25B8";display:inline-block; transition:transform .12s;color:var(--quemado)} details.accion-viaje[open]>summary::before{transform:rotate(90deg)} details.accion-viaje>summary:hover{color:var(--quemado)} details.accion-viaje{border-top:2px solid var(--borde);padding-top:12px} /* Los viajes de una orden, en su ficha. */ .viajes{display:flex;flex-direction:column;gap:6px} .viaje{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--borde)} .viaje:last-child{border-bottom:0} .viaje .que{font-weight:700;min-width:170px} .viaje .cuantas{font-variant-numeric:tabular-nums;font-weight:700} /* ------------------------------------------------------------- SERVICIO Los dos relojes se ven distintos a proposito: el de la reparacion y el del dinero avanzan a otro ritmo y los mueve otra gente. */ .srv{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11px; font-weight:700;border:1px solid} .srv-abierto{background:var(--malo-fondo);color:var(--malo-texto);border-color:var(--malo-borde)} .srv-evaluando{background:var(--acento-suave);color:var(--quemado); border-color:var(--ojo-borde)} .srv-asignado{background:var(--azul-fondo);color:var(--azul-texto);border-color:var(--azul-borde)} .srv-reparado{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} .srv-cerrado{background:var(--gris-fondo);color:var(--gris);border-color:var(--borde)} .srv-cancelado{background:var(--gris-fondo);color:var(--gris-tenue);border-color:var(--borde)} .cobro{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11px; font-weight:700;border:1px dashed var(--borde);color:var(--gris)} .cobro-sin-costo{color:var(--bien-texto);border-color:var(--bien-borde)} .cobro-facturado{color:var(--quemado);border-color:var(--ojo-borde)} .cobro-pagado{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde); border-style:solid} /* Las fotos del servicio. La forma que manda Cynthia las pide, y son lo primero que se mira para saber de que se trata. */ .galeria{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px} .archivo{width:150px;font-size:11px} .archivo img{width:150px;height:110px;object-fit:cover;border-radius:7px; border:1px solid var(--borde);display:block} .archivo .doc{display:flex;align-items:center;justify-content:center; width:150px;height:110px;border-radius:7px;border:1px solid var(--borde); background:var(--acento-suave);color:var(--quemado); font-weight:800;font-size:17px;letter-spacing:.05em} .archivo form{margin-top:3px} /* La estacion que ya termino toda su cuota se marca: de un vistazo se ve donde va la fila sin leer los numeros uno por uno. */ .detalle .chip.completa{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} /* "Le sigue": la estacion que le toca AHORA a cada ventana. Sin esto, quien captura tenia que adivinar cual sigue de una lista de 16, y capturar la equivocada mueve el tablero entero. */ .sigue{display:inline-block;padding:2px 9px;border-radius:5px;font-size:11.5px; font-weight:700;background:var(--negro);color:var(--blanco)} .sigue.trabada{background:var(--malo-fondo);color:var(--malo-texto);border:1px solid var(--malo-borde)} /* La estacion que sigue pero NO puede arrancar. Se ve distinta de las demas: "Glazing" a secas hacia creer que estaba lista para vidriar. */ .estacion.trabada{background:var(--malo-fondo);color:var(--malo-texto);border:1px solid var(--malo-borde)} /* ============================================================ PULIDO โ€” 24 de agosto No mueve nada de sitio ni cambia que hace cada cosa. Ajusta como se ve: jerarquia de los encabezados, profundidad de las tarjetas, y lo que se estiraba a todo lo ancho sin necesidad. ============================================================ */ /* --- Los encabezados de seccion tenian el mismo peso que todo lo demas. Ahora llevan una marca de color a la izquierda: se distinguen de un vistazo sin gritar. --- */ .panel > h2{ position:relative;padding-left:13px;font-size:14px; letter-spacing:.12em;color:var(--texto); } .panel > h2::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:4px;height:15px;border-radius:2px;background:var(--saffron); } .panel > h2 .chico{color:var(--gris)} /* --- Las tarjetas se levantan del fondo. Un borde plano las dejaba pegadas a la pagina; una sombra corta les da orden sin ruido. --- */ .panel,.kpi,.tablero-kpi .desglose{ box-shadow:0 1px 2px rgba(19,10,1,.05); } .panel{border-radius:10px} .tablero-kpi .total{box-shadow:0 2px 6px rgba(19,10,1,.16)} /* --- "Marcar todas" se estiraba a todo el ancho para envolver una casilla y tres palabras. Ahora ocupa lo que mide. --- */ .marcar-todas{ display:inline-flex;width:auto;padding:7px 14px;border-radius:8px; transition:background .12s,border-color .12s; } .marcar-todas:hover{background:var(--acento-hover);border-color:var(--saffron)} /* --- Los titulillos de cada accion, con mas aire entre ellos. --- */ .accion{padding:11px 0} .accion-titulo{font-size:12.5px;letter-spacing:.12em;color:var(--davy)} /* --- La barra de acciones es la que manda en la pantalla: se le nota. --- */ .barra-acciones{box-shadow:0 2px 10px rgba(244,146,49,.15)} .barra-acciones > h2{padding:9px 13px;border-radius:7px;margin-bottom:12px} .barra-acciones > h2::before{background:var(--quemado)} /* --- Los KPI: el numero manda, la etiqueta acompaรฑa. --- */ .kpi{border-radius:10px;transition:border-color .12s} .kpi:hover{border-color:var(--acento-borde)} .kpi b{letter-spacing:-.02em} /* --- Los chips y etiquetas, un poco mas suaves de canto. --- */ .parte,.chip,.sillpan,.estacion{border-radius:8px} .estacion{letter-spacing:.01em} /* --- Los campos responden al foco. Antes no se sabia donde estabas parado si capturabas con el teclado. --- */ input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--saffron); box-shadow:0 0 0 3px rgba(244,146,49,.18); } /* --- Los botones, con un poco de relieve al pasar encima. --- */ button{transition:filter .12s,transform .06s} button:not([disabled]):hover{filter:brightness(1.06)} button:not([disabled]):active{transform:translateY(1px)} /* --- Las filas de tabla se iluminan al pasar el cursor: ayuda a no perder el renglon en tablas de 16 columnas. --- */ table.filtrable tbody tr{transition:background .1s} /* --- El bloque que acompaรฑa al KPI (Reparto por planta, Lo que dice OpenJanela) se estiraba a todo lo que sobrara aunque llevara un solo chip adentro, y quedaba un hueco enorme a la derecha. Ahora crece con su contenido y para de crecer cuando ya cabe. --- */ .tablero-kpi .desglose{flex:0 1 auto;min-width:280px} /* --- El boton que lleva al desglose por ventana es la accion principal de la pantalla, pero ocupaba el ancho completo con 60px de alto. Se queda prominente, con menos grito. --- */ .boton-ventanas{ max-width:760px;padding:13px 20px;border-width:1.5px; box-shadow:0 2px 0 var(--negro); } .boton-ventanas:hover{box-shadow:0 3px 0 var(--negro)} .boton-ventanas .titulo{font-size:21px} /* --- Los avisos y las migajas, del mismo tamaรฑo que el resto. --- */ .panel.migaja{border-radius:10px;padding:11px 15px} /* --- Las tablas: encabezado con mas presencia y renglones que no se pegan entre si. --- */ table th{letter-spacing:.06em} table.filtrable tbody td{padding-top:9px;padding-bottom:9px} /* --- El pie de cada bloque de captura (Guardar + la explicacion) se separa de la tabla en vez de quedar pegado. --- */ .guardar-todo{padding-top:12px;margin-top:4px; border-top:1px solid var(--borde)} /* --- Jerarquia: el titulo de la pantalla pesaba lo mismo que un encabezado de seccion. Ahora se lee primero el que, luego el donde. --- */ h1{font-size:22px;letter-spacing:-.015em;line-height:1.2} .sub{font-size:12.5px;line-height:1.55;margin-bottom:18px} .sub b{color:var(--texto)} /* --- Aire entre secciones: apretadas se leen como una sola. --- */ .panel{margin-bottom:18px} .tablero-kpi{margin-bottom:18px;gap:16px} .kpis{gap:12px;margin-bottom:18px} /* --- Las ligas de la app, del color de la marca y sin subrayado hasta que se apuntan. --- */ a{color:var(--quemado)} a:hover{color:var(--saffron)} /* --- El texto chico se usa para explicar; que se lea. --- */ .chico{font-size:11.5px;line-height:1.5} /* ============================================================ TEMA OSCURO Cada variable cambia de valor, ninguna regla cambia. Por eso valio la pena convertir los 197 colores sueltos a nombres que dicen su PAPEL: "--malo-fondo" sigue significando lo mismo en los dos temas aunque el color sea otro. Se enciende con `data-tema="oscuro"` en el , que pone el boton de la barra y recuerda `localStorage`. ============================================================ */ html[data-tema="oscuro"]{ --negro:#0E0C0A; --negro-alto:#1C1815; --negro-hondo:#070605; --superficie:#17140F; /* la cara de las tarjetas */ --superficie-tenue:#1D1914; --fondo:#0B0908; /* la pagina */ --raya:#1B1712; /* renglon par */ --sobre:#241D14; /* renglon bajo el cursor */ --texto:#EDE7DF; /* El gris de las explicaciones se aclara mas que en el tema claro: sobre fondo oscuro el mismo tono queda por debajo del contraste minimo. */ --gris:#ACA49A; --gris-tenue:#A39B90; --rojo-letra:#2A0F0C; --gris-fondo:#211D18; --gris-hondo:#B4ADA3; --gris-mas-hondo:#C7C0B6; --borde:#2E2820; --campo-borde:#3A3229; --barra-vacia:#2A241D; --detalle-fondo:#000; /* El acento se mantiene: es la marca. Solo se suaviza lo que sirve de fondo, que en oscuro no puede ser crema. */ --acento-suave:#2A1E10; --acento-borde:#5A3E1C; --acento-hover:#3A2915; --quemado:#F0A250; /* en oscuro el quemado no se lee: se aclara */ --malo-fondo:#2B1512; --malo-texto:#F5A9A2; --malo-borde:#5A2621; --malo-raya:#231311; --bien-fondo:#12261A; --bien-texto:#8ED5A5; --bien-borde:#2A4E36; --ojo-fondo:#2A2110; --ojo-texto:#E8C07A; --ojo-borde:#57431E; --lila-fondo:#1E1730; --lila-texto:#C3B0E8; --lila-borde:#3B2F5C; --reorden-fondo:#2C1A11; --reorden-texto:#F0AE85; --reorden-borde:#5A3524; --azul-fondo:#141D2E; --azul-texto:#A8C0E8; --azul-borde:#2A3A56; --rojo:#E8756B; --ambar:#D4A24A; --verde:#6FC189; --armado-fondo:#241E14; --armado-franja:#8A6528; --vidrio-fondo:#141D22; --vidrio-franja:#3D6272; } /* Las sombras claras no se ven sobre negro: se cambian por sombra honda. */ html[data-tema="oscuro"] .panel, html[data-tema="oscuro"] .kpi, html[data-tema="oscuro"] .tablero-kpi .desglose{ box-shadow:0 1px 3px rgba(0,0,0,.45); } html[data-tema="oscuro"] .pastilla-avance{ box-shadow:0 2px 8px rgba(0,0,0,.55);border:1px solid var(--borde); } html[data-tema="oscuro"] .tablero-kpi .total{ box-shadow:0 2px 8px rgba(0,0,0,.55);border:1px solid var(--borde); } /* El KPI negro sobre fondo negro necesita despegarse. */ html[data-tema="oscuro"] .tablero-kpi .total{background:var(--negro-alto)} html[data-tema="oscuro"] .portada{border:1px solid var(--borde)} /* El dibujo de OpenJanela viene con fondo blanco: se deja tal cual, es un plano y en negativo no se entiende. */ html[data-tema="oscuro"] .dibujo-ventana, html[data-tema="oscuro"] .mini-dibujo img{background:var(--blanco)} /* --- El boton de la barra: sol y luna, sin texto. --- */ .tema{background:none;border:1px solid rgba(255,255,255,.22); color:var(--blanco); border-radius:7px;padding:5px 9px;cursor:pointer;line-height:1; display:inline-flex;align-items:center;gap:5px;font-size:13px} .tema:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.4)} .tema svg{width:15px;height:15px;display:block} /* Solo se ve el icono del tema al que se VA a cambiar: sol cuando esta oscuro, luna cuando esta claro. */ .tema .icono-sol{display:none} .tema .icono-luna{display:block} html[data-tema="oscuro"] .tema .icono-sol{display:block} html[data-tema="oscuro"] .tema .icono-luna{display:none} /* El selector de idioma: dice a cual se VA a cambiar, como el del tema. */ .idioma-boton{text-decoration:none;font-weight:700;font-size:11.5px; letter-spacing:.06em;padding:6px 9px} .idioma-boton:hover{text-decoration:none;color:var(--blanco)} /* ---------------------------------------------------- SCREENS Y EMBARQUE */ /* El aviso de screens vive junto al AVANCE, no en Situacion: es ahi donde se mira antes de decidir si una orden se puede ir. Rojo cuando faltan -- igual que "faltan N pz sin capturar", que es el mismo tipo de aviso -- y verde discreto cuando ya estan, porque "listo" no tiene que gritar. Las dos son ligas al modulo de screens. */ .faltan-screens, .screens-listos{display:block;margin-top:3px;font-size:11.5px;font-weight:600; text-decoration:none;line-height:1.2} .faltan-screens{color:var(--rojo)} .screens-listos{color:var(--verde);opacity:.8} .faltan-screens:hover, .screens-listos:hover{text-decoration:underline} /* El final del camino, debajo de la estacion que detiene: cuantas ya podian irse y cuantas se fueron. El back order va en color porque es el unico que pide accion; los demas son informativos y no deben competir con el chip. */ .cola-embarque{margin-top:4px;font-size:11.5px;line-height:1.45; color:var(--gris-tenue)} .cola-embarque b{color:var(--letra)} .cola-embarque .back-order{color:var(--rojo);font-weight:600} .cola-embarque .back-order b{color:var(--rojo)} /* En la ficha de la orden los screens son un renglon mas de "Avance por linea", pero no son una linea de producto: se separa con una raya. */ .renglon-screens td{border-top:1px dashed var(--borde)} .renglon-screens.detenida td{background:var(--malo-fondo)} /* ------------------------------------------------- VIAJES: UNA SOLA PUERTA */ /* Todo lo de viajes vive en un solo desplegable -- lo que ya salio y el formulario para registrar otro -- porque el panel de captura es sticky y con las dos secciones abiertas se comia media pantalla. Se le da aspecto de control: quien lo ve tiene que saber que ahi se pica. Antes era texto gris con una flecha rota y nadie lo abria. */ details.accion-viaje>summary{padding:5px 9px;border-radius:6px; background:var(--acento-suave);border:1px solid var(--acento-borde); color:var(--quemado);font-size:11.5px} details.accion-viaje>summary:hover{background:var(--acento-borde)} details.accion-viaje[open]>summary{margin-bottom:6px} /* Cuantos viajes lleva la orden, en el resumen: abrirlo a ciegas para descubrir que no hay ninguno es un clic perdido. */ .cuantos-viajes{display:inline-block;min-width:17px;padding:0 5px; border-radius:9px;background:var(--saffron);color:var(--negro); /* saffron con negro: 8.4:1 en los dos temas. `--quemado` con blanco se lee en el claro y se cae a 2.1:1 en el oscuro, donde `--quemado` es un naranja claro. */ font-size:11.5px;font-weight:700;text-align:center; font-variant-numeric:tabular-nums} /* QUE ventanas se llevo cada viaje. Sin esto, dos entregas del mismo dia se ven identicas y hay que adivinar cual deshacer. */ .que-se-llevo{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px; margin:2px 0 0 0} .chip-unidad{display:inline-block;padding:0 6px;border-radius:8px; background:var(--acento-suave); border:1px solid var(--borde);font-size:11.5px;font-weight:600; font-variant-numeric:tabular-nums;line-height:1.6} /* ------------------------------------------------------------- AVISOS */ /* Los avisos de la pantalla, guardados en un cajon. Eran cuatro tiras de texto apiladas arriba de todo: se leen una vez, se entienden, y despues ocupan media pantalla todos los dias. Guardados siguen ahi para quien los ocupe, con su cuenta a la vista. */ details.avisos{margin:0 0 12px 0} details.avisos>summary{cursor:pointer;list-style:none;display:flex; align-items:center;gap:8px;padding:6px 10px;border-radius:8px; background:var(--gris-fondo);border:1px solid var(--borde); color:var(--gris-hondo);font-size:12px} details.avisos>summary::-webkit-details-marker{display:none} details.avisos>summary::before{content:"\25B8";display:inline-block; transition:transform .12s;color:var(--gris)} details.avisos[open]>summary::before{transform:rotate(90deg)} details.avisos>summary:hover{background:var(--borde)} details.avisos[open]>summary{margin-bottom:8px} /* Cuando uno de los avisos es de los que dejan embarcar sin capturar, el resumen se pinta: guardarlos no puede volverlos invisibles. */ details.avisos.con-error>summary{background:var(--malo-fondo); border-color:var(--malo-borde);color:var(--rojo)} details.avisos.con-error>summary::before{color:var(--rojo)} .cuantos-avisos{display:inline-block;min-width:17px;padding:0 5px; border-radius:9px;background:var(--saffron);color:var(--negro); font-size:11.5px;font-weight:700;text-align:center; font-variant-numeric:tabular-nums} /* Rojo sobre su propio fondo tenue: 5.7:1 en claro y 5.9:1 en oscuro. Rojo con blanco se lee en el claro y se cae a 2.9:1 en el oscuro, donde `--rojo` es un salmon. */ details.avisos.con-error .cuantos-avisos{background:var(--malo-fondo); color:var(--rojo);border:1px solid var(--malo-borde)} /* La tarea del dealer se CONTESTA en la ficha del servicio. Antes solo se ensenaba y el aviso de arriba pedia confirmarla sin decir donde: los campos existian en la base pero ninguna pantalla los escribia. */ .tarea-dealer .par{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-bottom:6px} .tarea-dealer select{max-width:130px;padding:2px 6px;font-size:12px} /* -------------------------------------------------------- SOLICITUDES */ /* El estado de una solicitud. Se lee de un vistazo en la bandeja: lo pendiente pide accion, lo demas es historia. */ .estado-solicitud{display:inline-block;padding:1px 8px;border-radius:10px; font-size:11px;font-weight:700;text-decoration:none;text-transform:uppercase; letter-spacing:.04em} .estado-solicitud.pendiente{background:var(--acento-suave);color:var(--quemado); border:1px solid var(--acento-borde)} .estado-solicitud.aceptada{background:var(--gris-fondo); color:var(--verde);border:1px solid var(--borde)} .estado-solicitud.rechazada{background:var(--gris-fondo);color:var(--gris-hondo); border:1px solid var(--borde)} /* El formulario de captura: dos columnas en pantalla grande, una en chica. Son 12 campos y en una sola columna hay que hacer scroll para llenarlo. */ .rejilla-solicitud{display:grid;gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))} .rejilla-solicitud .ancho{grid-column:1 / -1} .rejilla-solicitud .campo{display:flex;flex-direction:column;gap:3px} .rejilla-solicitud textarea{width:100%;font:inherit} /* Lo obligatorio se ve antes de llenar, no despues de que truene. */ .rejilla-solicitud .campo.obligatorio>span{color:var(--quemado);font-weight:600} /* Aceptar desde el renglon de la bandeja: entrar a la ficha nada mas para apretar un boton era un paso de mas. */ .aceptar-rapido{display:flex;gap:5px;align-items:center} .aceptar-rapido input{padding:2px 6px;font-size:12px} .aceptar-rapido button{padding:3px 9px;font-size:12px;white-space:nowrap} /* La captura va plegada: la bandeja es lo que se mira todos los dias, y el formulario solo cuando llama un dealer. */ details.captura-solicitud{margin-top:10px;border-top:1px solid var(--borde); padding-top:8px} details.captura-solicitud>summary{cursor:pointer;list-style:none; display:inline-flex;align-items:center;gap:8px;padding:5px 10px; border-radius:6px;background:var(--acento-suave); border:1px solid var(--acento-borde);color:var(--quemado);font-size:12px; font-weight:600} details.captura-solicitud>summary::-webkit-details-marker{display:none} details.captura-solicitud>summary::before{content:"\25B8"; display:inline-block;transition:transform .12s} details.captura-solicitud[open]>summary::before{transform:rotate(90deg)} details.captura-solicitud>summary:hover{background:var(--acento-borde)} details.captura-solicitud[open]>summary{margin-bottom:10px} /* ------------------------------------------------ LA PAGINA DEL DEALER */ /* Estas pantallas las ve gente de FUERA, casi siempre desde el celular y parada frente a la ventana. Una sola columna, campos grandes y nada del menu de la casa. */ body.publica{background:var(--fondo);margin:0} .cabeza-publica{display:flex;align-items:baseline;gap:10px;padding:14px 18px; background:var(--negro);color:var(--blanco)} .cabeza-publica .marca{font-weight:800;letter-spacing:.06em} .cabeza-publica .chico{color:var(--saffron)} .hoja-publica{max-width:640px;margin:0 auto;padding:18px} .pie-publico{max-width:640px;margin:0 auto;padding:0 18px 28px; color:var(--gris)} .forma-publica section{background:var(--superficie);border:1px solid var(--borde); border-radius:10px;padding:14px 16px;margin-bottom:14px} .forma-publica h2{font-size:14px;margin:0 0 10px 0} .forma-publica .campo{display:flex;flex-direction:column;gap:4px; margin-bottom:12px} .forma-publica .campo:last-child{margin-bottom:0} .forma-publica .campo>span{font-size:12.5px;font-weight:600} /* Lo obligatorio se ve antes de llenar, no cuando truena al enviar. */ .forma-publica .campo.obligatorio>span{color:var(--quemado)} .forma-publica input, .forma-publica select, .forma-publica textarea{width:100%;padding:9px 10px;font:inherit; font-size:15px;border:1px solid var(--campo-borde);border-radius:6px; background:var(--superficie);color:var(--texto)} /* 15px o mas: abajo de eso el celular hace zoom solo al tocar el campo. */ .forma-publica textarea{resize:vertical} button.grande{width:100%;padding:13px;font-size:16px;font-weight:700} .gracias{background:var(--superficie);border:1px solid var(--borde); border-radius:10px;padding:22px 18px;text-align:center} .gracias h1{margin-top:0} /* La liga recien generada. Se enseรฑa completa y se selecciona al tocarla: el token existe en claro UNA vez, y copiarlo a medias es perderlo. */ .liga-dealer{display:flex;flex-wrap:wrap;align-items:center;gap:8px} input.liga-copiar{flex:1;min-width:280px;font-family:ui-monospace,monospace; font-size:11.5px;padding:5px 8px;border:1px solid var(--borde); border-radius:5px;background:var(--superficie);color:var(--texto)} /* Los campos que pone la INVITACION y el dealer no puede cambiar: su nombre y su numero de orden. Se ensenan para que sepa que llego bien, en gris para que no intente escribirlos. */ .forma-publica input.fijo{background:var(--gris-fondo);color:var(--gris-hondo); cursor:not-allowed} /* ------------------------------------------------------------ EL RELOJ */ /* Cuantos dias lleva tarde una orden, o cuantos le quedan. Reemplaza a la columna del semaforo, que decia la CATEGORIA -- eso ya esta en el filtro de arriba. Lo que se pregunta frente al tablero es el numero. */ .reloj{display:inline-block;padding:1px 8px;border-radius:10px; font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums; white-space:nowrap} .reloj.tarde{background:var(--malo-fondo);color:var(--rojo); border:1px solid var(--malo-borde)} .reloj.a-tiempo{background:var(--gris-fondo);color:var(--verde); border:1px solid var(--borde)} /* Hoy no es ni tarde ni holgado: es hoy. */ .reloj.hoy{background:var(--acento-suave);color:var(--quemado); border:1px solid var(--acento-borde)} .reloj.sin-eta{background:transparent;color:var(--gris);border:0; font-weight:400} /* La ETA en un solo renglon: en ISO el navegador la partia en dos y el renglon crecia. */ td.eta-fecha{white-space:nowrap;font-variant-numeric:tabular-nums} /* La entrega acordada, debajo del ETA. Va en la misma celda para no agregar una columna a un tablero que ya tiene diecisiete -- Sergio, 16-sep-2026. El color dice el estado sin tener que abrir nada: verde ya esta confirmada y el camion puede salir; ambar se acordo pero el dealer no ha contestado, y hasta que conteste la salida esta frenada. */ .entrega-fecha{display:block;margin-top:2px;font-size:11px;font-weight:600; white-space:nowrap} .entrega-fecha.confirmada{color:var(--verde)} .entrega-fecha.por-confirmar{color:var(--ambar)} /* El boton que lleva a registrar el viaje. Se ve como boton pero es liga: no marca nada, abre la pantalla donde se escoge que se va. */ a.boton-suave{display:inline-block;padding:3px 10px;border-radius:5px; border:1px solid var(--borde);background:var(--superficie); color:var(--texto);text-decoration:none;font-size:12px;white-space:nowrap} a.boton-suave:hover{background:var(--acento-suave);color:var(--quemado); border-color:var(--acento-borde)} /* -------------------------------------------- LA CABECERA DE LA ORDEN */ /* Las cifras a la izquierda y la puerta a las ventanas a la derecha, en el mismo renglon. Antes la puerta iba encima a todo lo ancho y empujaba los numeros abajo del pliegue en pantallas chicas. */ .cabecera-orden{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch; margin-bottom:14px} .cabecera-orden .kpis{flex:1 1 320px;margin:0} .cabecera-orden .boton-ventanas{flex:1 1 340px;margin:0} /* ------------------------------------------ EL BOTON DE VIAJE, ARRIBA */ /* Registrar el viaje vive junto a la puerta de captura: son las DOS cosas que se hacen en la ficha. Antes estaba hasta abajo, en un panel que se quito porque marcaba la orden entera de un golpe y perdia el back order. Hereda la forma del boton de ventanas pero en verde: no es lo mismo capturar avance que sacar producto, y a un clic de distancia conviene que no se parezcan. */ .boton-viaje{ display:flex;align-items:center;gap:16px; /* Verde SOBRE la superficie, no al reves: `--verde` cambia entre temas y ni el blanco ni el negro se leen en los dos encima de el (2.2:1 en oscuro). Asi da 6.4:1 en claro y 8.5:1 en oscuro, y el borde grueso le da el peso que perdio al no llevar fondo lleno. */ background:var(--superficie);color:var(--verde); border:2px solid var(--verde);border-radius:11px; padding:16px 22px;margin:0;text-decoration:none; box-shadow:0 3px 0 var(--verde); transition:transform .08s, box-shadow .08s; } .boton-viaje:hover{text-decoration:none;transform:translateY(-1px); box-shadow:0 4px 0 var(--verde);background:var(--gris-fondo)} .boton-viaje:active{transform:translateY(2px);box-shadow:0 1px 0 var(--verde)} .boton-viaje .titulo{font-size:19px;font-weight:800;letter-spacing:.01em} .boton-viaje .detalle{flex:1;font-size:12.5px;opacity:.9;line-height:1.35} .boton-viaje .flecha{font-size:22px;font-weight:700} /* Un dato que sale del ERP y NO se captura. Se ve como campo para que el renglon no se desalinee, pero sin caja: nada invita a escribir ahi. */ .dato-fijo{padding:7px 0;font-weight:600;font-variant-numeric:tabular-nums} /* La bitacora, guardada. Se consulta cuando algo no cuadra, no a diario. */ details.bitacora>summary{cursor:pointer;list-style:none;display:flex; align-items:baseline;gap:9px;font-size:15px;font-weight:700} details.bitacora>summary::-webkit-details-marker{display:none} details.bitacora>summary::before{content:"\25B8";display:inline-block; transition:transform .12s;color:var(--quemado);font-weight:400} details.bitacora[open]>summary::before{transform:rotate(90deg)} details.bitacora>summary:hover{color:var(--quemado)} details.bitacora[open]>summary{margin-bottom:10px} /* ============================================================ LA PANTALLA DE UNA UNIDAD Es la unica pantalla que se abre para MIRAR una sola ventana, asi que aqui cabe todo lo que OpenJanela sabe de ella. Lo que manda el acomodo es en que orden se pregunta: donde estoy, que es, y como va armada. ============================================================ */ /* --- Las migas: de afuera hacia adentro. La orden, sus ventanas, la vecina anterior, ESTA, y la que sigue. Cada una es un boton y no un renglon de texto con puntos, porque en el piso se pican con el dedo. --- */ .migas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px; font-size:12px;margin-bottom:12px} .migas a,.migas .aqui{display:inline-flex;align-items:baseline;gap:6px; padding:4px 10px;border-radius:999px;border:1px solid var(--borde); background:var(--superficie-tenue);white-space:nowrap} .migas a:hover{background:var(--acento-suave);border-color:var(--acento-borde); text-decoration:none} /* Donde estas parado va en negro: se distingue de un vistazo de las cuatro ligas que lo rodean sin tener que leerlas. */ .migas .aqui{background:var(--negro);color:var(--blanco); border-color:var(--negro);font-weight:700} .migas .aqui span{font-weight:400;font-size:11px;letter-spacing:.08em; color:var(--saffron)} /* --- El titulo y su avance, en el mismo renglon. --- */ .titulo-unidad{display:flex;align-items:flex-start;justify-content:space-between; gap:16px;flex-wrap:wrap} .titulo-texto{flex:1;min-width:240px} /* La pastilla ABRAZA el numero. Antes el avance era un bloque negro del alto de la ficha entera para ensenar cuatro caracteres, y se comia el ancho que le hace falta al detalle de la ventana. */ .pastilla-avance{flex:0 0 auto;display:flex;flex-direction:column; align-items:center;gap:3px;background:var(--negro);color:var(--blanco); border-radius:11px;padding:12px 26px 13px;line-height:1; box-shadow:0 2px 6px rgba(19,10,1,.16)} .pastilla-avance b{font-size:46px;font-weight:800;letter-spacing:-.025em} .pastilla-avance span{font-size:11px;letter-spacing:.09em; color:var(--saffron)} /* --- QUE ES: el dibujo primero, porque es lo que se reconoce sin leer. --- */ /* Dibujo, datos y armado en el MISMO renglon: las tres cosas contestan la misma pregunta -- que es esta ventana -- y separadas obligaban a bajar la pantalla para juntarlas. */ .ficha-unidad{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start; margin-bottom:14px} /* Todo lo que no es el dibujo va en una sola columna: arriba lo que dice el ERP, abajo como va armada. Se lee de corrido y de arriba hacia abajo, que es el orden en que se pregunta. */ .ficha-derecha{flex:1;min-width:300px;display:flex;flex-direction:column; gap:16px;padding-top:2px} .ficha-bloque{min-width:0} /* La nota que trae el renglon en el ERP -- "NET DOOR PANEL - 42 x 96" -- la lleva una de cada siete ventanas, y cuando la lleva hay que leerla antes de cortar. Por eso va en color de aviso y no como texto mas. */ .nota-erp{margin-top:11px;padding:8px 11px;border-radius:8px; background:var(--ojo-fondo);color:var(--ojo-texto); border:1px solid var(--ojo-borde);font-size:13px;line-height:1.45} .nota-erp .rotulo{display:block;font-size:11px;letter-spacing:.09em; margin-bottom:2px} /* --- COMO VA ARMADA: pares opcion / respuesta. En columnas porque son 17 en promedio y hasta 33: en una sola lista habia que bajar la pantalla entera para leerlas. --- */ dl.armado{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0 20px;margin:0} dl.armado > div{display:flex;align-items:baseline;justify-content:space-between; gap:12px;padding:6px 0;border-bottom:1px solid var(--borde)} dl.armado dt{margin:0;color:var(--gris);font-size:12px} dl.armado dd{margin:0;font-weight:700;text-align:right} /* Lo que se contesto que NO: va guardado porque es casi la mitad y ninguna dice que hacer, pero se puede abrir -- "Not Supplied" es una respuesta, no un dato que falte. */ .armado-no{margin-top:12px;border-top:1px solid var(--borde);padding-top:4px} .armado-no > summary{cursor:pointer;font-size:12px;color:var(--gris); padding:7px 0;list-style:none} .armado-no > summary::-webkit-details-marker{display:none} .armado-no > summary::before{content:"\25B8";display:inline-block; margin-right:7px;transition:transform .12s;color:var(--quemado)} .armado-no[open] > summary::before{transform:rotate(90deg)} .armado-no > summary:hover{color:var(--quemado)} .armado-no dl.armado dd{font-weight:600;color:var(--gris)} /* Cuando el renglon trae dos vidrios cada uno tiene su etiqueta NFRC y OpenJanela imprime una sola. Se ensenan las dos y se avisa con el color de "ojo": escoger a ciegas seria afirmar un numero de Title 24. */ dl.armado > div.nfrc-varios{cursor:help} dl.armado > div.nfrc-varios dd{color:var(--ambar)} /* ============================================================ PACKING SLIP Esto se IMPRIME. El resto de la app se mira en pantalla, y esta pagina tiene que sobrevivir a una impresora laser en blanco y negro y a que alguien le palomee encima con pluma en el anden. ============================================================ */ .hoja{background:var(--superficie);border:1px solid var(--borde); border-radius:10px;padding:18px 20px 20px; box-shadow:0 1px 2px rgba(19,10,1,.05)} .hoja-encabezado{display:flex;justify-content:space-between;align-items:flex-start; gap:20px;flex-wrap:wrap;border-bottom:2px solid var(--negro); padding-bottom:12px;margin-bottom:14px} .hoja-encabezado h1{font-size:26px;margin:0} .hoja-datos{display:flex;gap:22px;flex-wrap:wrap;text-align:right} .hoja-datos span{display:block;font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--gris)} .hoja-datos b{font-size:14px} .hoja-cifras{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px} .hoja-cifras > div{flex:1 1 110px;border:1px solid var(--borde);border-radius:8px; padding:7px 11px;background:var(--superficie-tenue)} .hoja-cifras span{display:block;font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--gris)} .hoja-cifras b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums} .hoja-cifras .ojo{background:var(--ojo-fondo);border-color:var(--ojo-borde)} .hoja-cifras .ojo b{color:var(--ojo-texto)} /* Lo que todavia no termina produccion. Es EL aviso de la hoja: si el camion sale con esto pendiente, algo se queda. */ .hoja-aviso{background:var(--ojo-fondo);color:var(--ojo-texto); border:1px solid var(--ojo-borde);border-radius:8px;padding:8px 12px; margin-bottom:12px;font-size:13px} /* Los tres bloques de arriba: a donde va, que va, y quien se la lleva. Es lo que se lee antes de cargar. */ .hoja-partes{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px} .hoja-partes .hoja-bloque{flex:1 1 200px;min-width:0;border:1px solid var(--borde); border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.5} .hoja-partes .rotulo{display:block;font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--gris);margin-bottom:4px} .hoja-partes .par{display:flex;justify-content:space-between;gap:12px; font-variant-numeric:tabular-nums} .hoja-partes .par b{font-weight:700} /* El logo solo en el papel. En pantalla ya esta en la barra de arriba. */ .solo-imprimir{display:none} .hoja-marca img{max-width:230px;height:auto;margin-bottom:8px} /* Las columnas van en PORCENTAJE y suman 100. Se probaron dos veces antes: con `auto` el navegador reparte por contenido, y como las medidas y los numeros van en `nowrap`, esos se llevaban el ancho y "Description" -- la unica columna que si necesita espacio -- quedaba en sesenta pixeles. Poner `width:auto` en el dentro de `table-layout:fixed` tampoco sirvio. Un porcentaje no depende de lo que traiga el renglon. */ .hoja-tabla{width:100%;border-collapse:collapse;font-size:12.5px; table-layout:fixed} /* LAS ANCHURAS TIENEN QUE SUMAR 100. Con cuatro columnas numericas sumaban 3+5+38+14+40 = 100; al agregar BUNDLES quedaron 110, la tabla no cupo y el navegador encogio TODA la hoja para meterla -- por eso salia impresa mucho mas chica que la carta. Lo cacho Sergio el 2 de septiembre de 2026. Son CINCO numericas: 3 + 4 + 37 + 13 + (5 x 8.6) = 100. */ .hoja-tabla col.c-check{width:3%} .hoja-tabla col.c-linea{width:4%} .hoja-tabla col.c-desc{width:37%} .hoja-tabla col.c-medida{width:13%} .hoja-tabla col.c-num{width:8.6%} .hoja-tabla th{background:transparent;color:var(--gris);font-family:inherit; font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; text-align:left;padding:4px 6px;border-bottom:1.5px solid var(--negro); position:static} /* `vertical-align:middle` -- no `top` -- para que el numero de un renglon de cuatro lineas no quede colgado hasta arriba, lejos de su descripcion. */ .hoja-tabla td{padding:7px 6px;border-bottom:1px solid var(--borde); vertical-align:middle} /* Las cifras van CENTRADAS bajo su titulo. A la derecha se alejaban del encabezado y en una hoja de ocho columnas costaba saber cual era cual. */ .hoja-tabla td.num,.hoja-tabla th.num{text-align:center; font-variant-numeric:tabular-nums;white-space:nowrap} .hoja-tabla td.pk-linea,.hoja-tabla th:nth-child(2){text-align:center} /* La descripcion es lo unico que se parte en varios renglones, y se parte entre PALABRAS. `word-break` las cortaba a la mitad: "Sideli te HL Swin g In". Se lee peor que no partirlas. */ .hoja-tabla td.pk-desc{overflow-wrap:break-word;word-break:normal; hyphens:none;line-height:1.35} .hoja-tabla .pk-linea{font-weight:800;font-variant-numeric:tabular-nums} .hoja-tabla .pk-medida{white-space:nowrap;color:var(--gris); font-variant-numeric:tabular-nums} /* La casilla se palomea con pluma sobre el papel al ir cargando. */ .hoja-tabla .pk-check{font-size:16px;color:var(--gris-hondo);text-align:center} .hoja-tabla .pk-falta{font-weight:800;color:var(--ojo-texto)} /* Lo que ya se entrego en un viaje anterior: se deja ver -- el dealer quiere la orden completa -- pero apagado, para que no se vuelva a subir. */ .hoja-tabla tr.ya-salio{color:var(--gris)} .hoja-tabla tr.ya-salio b{font-weight:600} .hoja-tabla tfoot td{border-top:1.5px solid var(--negro);border-bottom:0; padding-top:8px;font-variant-numeric:tabular-nums} /* La etiqueta -- WINDOW, SCREEN, PART -- nunca se parte: en una columna angosta se veia como "WI / ND / OW" en tres renglones. */ .etiqueta-clase{display:inline-block;margin-left:6px;font-size:9.5px; letter-spacing:.06em;text-transform:uppercase;padding:1px 6px; border-radius:9px;border:1px solid var(--borde);color:var(--gris); white-space:nowrap} .e-screen{background:var(--vidrio-fondo);border-color:var(--vidrio-franja)} .e-sillpan,.e-parte{background:var(--armado-fondo);border-color:var(--armado-franja)} .e-extra{background:var(--acento-suave);border-color:var(--acento-borde); color:var(--quemado)} /* LAS FIRMAS. El dato va SOBRE la raya -- donde se escribiria a mano -- y el rotulo debajo. Por eso la raya es el borde de abajo del valor y ya no el borde de arriba de la casilla: asi lo impreso y lo escrito caen en el mismo renglon. Lo que no se sabe se deja en blanco y se llena con pluma. */ .hoja-firmas{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px} .hoja-firmas > div{flex:1 1 160px} /* Alto FIJO, no minimo: con min-height la casilla vacia -- "Received by" -- quedaba unos pixeles mas abajo y las cuatro rayas no hacian renglon. */ .hoja-firmas .valor{display:block;height:21px;line-height:18px;font-size:12px; font-weight:600;padding:0 2px;border-bottom:1px solid var(--negro)} .hoja-firmas span{display:block;font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--gris);padding-top:5px} /* LAS CONDICIONES DE ENTREGA, al pie de la hoja. Dos columnas y letra chica: es mucho texto y tiene que caber sin empujar las firmas a otra pagina. Chica no es ilegible -- 8.5px con interlineado holgado se lee -- y es el tamano en el que se imprimen estas condiciones en cualquier documento de embarque. No se parte entre paginas (`break-inside:avoid`): unas condiciones cortadas a la mitad son las que despues nadie acepta haber leido. */ .hoja-condiciones{margin-top:22px;padding-top:9px; border-top:1px solid var(--borde);break-inside:avoid;page-break-inside:avoid} .hoja-condiciones .titulo{display:block;font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--gris);margin-bottom:5px} .hoja-condiciones .cols{column-count:2;column-gap:26px} .hoja-condiciones p{margin:0 0 5px;font-size:8.5px;line-height:1.42; color:var(--texto);break-inside:avoid} .hoja-condiciones .fuerte{font-weight:700} /* El folio escaneable. Chico a proposito: es para leerlo con un lector al volver, no para dominar la hoja. */ .hoja-folio-codigo{display:flex;align-items:flex-end;gap:8px;margin-top:6px} .hfc-barras{flex:1 1 auto;min-width:0;line-height:0} .hfc-barras svg{width:100%;height:0.42in} .hfc-qr{flex:0 0 auto;line-height:0} .hfc-qr svg{width:0.62in;height:0.62in;display:block} /* LA HOJA DEL PACKING SLIP: carta VERTICAL. `@page` va aqui, al NIVEL DE ARRIBA, y NO dentro de `@media print`. Anidado los navegadores lo tratan de forma inconsistente y hay quien simplemente lo ignora -- y entonces manda el papel que traiga puesto el dialogo, que despues de imprimir etiquetas sigue siendo 4x6. `@page` solo aplica a medios paginados, asi que no hace falta encerrarlo. VERTICAL porque asi la quiere Sergio, y es como se archiva y se firma una hoja de embarque. Yo la habia puesto apaisada por mi cuenta -- la tabla trae nueve columnas -- y esa fue una decision mia que nadie pidio. Se comprobo que cabe: a 739 px, que es el ancho imprimible de una carta vertical con estos margenes, NINGUN elemento se desborda. */ @page{size:letter;margin:0.4in} /* --- Lo que NO va al papel --- */ @media print{ /* CARTA APAISADA, y dicho AQUI a proposito. `@page` es del DOCUMENTO, no del selector: no se puede encerrar en una clase. El bloque de las etiquetas ponia `size:4in 2in` mas abajo en esta misma hoja y se lo comia TODO -- el packing slip salia recortado al tamano de una etiqueta. Lo cacho Sergio el 2 de septiembre de 2026. Por eso el tamano de la etiqueta se mudo a su propia plantilla, donde no puede alcanzar a nadie mas. Apaisada porque la tabla trae nueve columnas; en vertical se apretaban las medidas hasta partirse. */ .no-imprimir,header,footer,nav{display:none !important} .solo-imprimir{display:block} body{background:var(--blanco);font-size:11.5px} .hoja{border:0;border-radius:0;box-shadow:none;padding:0} /* Un renglon no se parte entre dos hojas: quien recibe firma una lista, no media. */ .hoja-tabla tr{page-break-inside:avoid} .hoja-tabla thead{display:table-header-group} /* EL TOTAL VA AL FINAL, NO A LA MITAD. Un `tfoot` es por defecto `table-footer-group`, y el navegador lo pone al pie de CADA hoja: en la 3417 la primera pagina terminaba en "Sash 1" y ahi mismo salia el Total, con los otros cinco sashes en la hoja siguiente. En un papel que alguien firma eso no es un detalle de maquetacion: es un total que no corresponde a lo que esta arriba. Como `table-row-group` se comporta como un renglon mas y cae donde debe, hasta el final. Lo cacho Sergio el 2 de septiembre de 2026. */ .hoja-tabla tfoot{display:table-row-group} /* Y que la unidad no se separe de sus bultos: una puerta partida entre dos hojas obliga a voltear la pagina para saber que le falta. */ .hoja-tabla tr.pk-unidad{page-break-after:avoid;break-after:avoid} .hoja-firmas{page-break-inside:avoid} /* ---- LA HOJA DEL GAS STRUT, SIEMPRE EN UNA PAGINA ---- Carta vertical con margen de 0.4in = 10.2in de alto imprimible. La hoja se queda en ese alto y el dibujo se lleva lo que sobra. */ .hoja-strut{height:10.1in;overflow:hidden;display:flex; flex-direction:column} .hoja-strut .strut-hoja-cols{flex:1;min-height:0} /* `height:100%` aqui seria el alto ENTERO del renglon, no lo que sobra despues de la tira de datos: el dibujo se salia por abajo y la hoja cortaba el jamb. Lo que sobra se pide con flex. */ .strut-dibujo{flex:1;min-height:0;height:auto;border:0;padding:0} /* En tres columnas angostas las etiquetas anchas parten el valor en dos renglones ("33" arriba y "11/16" abajo). En papel la etiqueta va justo antes del valor, y las dos cotas con su rotulo encima. */ .hoja-strut .dato span{min-width:90px} .hoja-strut .cota span{display:block;min-width:0} .hoja-strut .hoja-pie{margin-top:auto} /* La de Daytona no lleva tira de datos arriba, asi que su dibujo no pelea por el alto: basta con no dejarla crecer de mas. */ .hoja-daytona .dy-cols{flex:0 0 auto} .hoja-daytona .strut-dibujo{height:auto;max-height:6.2in} .hoja-daytona .strut-dibujo svg{max-height:6.2in} /* En blanco y negro los fondos no distinguen nada y gastan toner. */ .hoja-cifras > div,.hoja-aviso,.etiqueta-clase{background:var(--blanco) !important} } /* ============================================================ LAS TRES PUERTAS DE LA ORDEN Packing slip, desglose por ventana y registrar un viaje. Son las tres cosas que se hacen desde la ficha; el resto de la pantalla es de consulta. Van del MISMO tamano y en un solo renglon. Antes eran tres botones de distinto ancho, alto y color -- uno naranja enorme, otro verde con borde, otro un renglon de texto -- y no se leian como tres opciones sino como tres cosas sueltas que alguien fue pegando. ============================================================ */ .puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px; margin-top:14px} /* A todo lo ancho y debajo de las cifras, no apretadas a la derecha. En la mitad del renglon quedaban de 162 pixeles: caben, pero se ven como tres botones chicos en vez de tres opciones. */ .cabecera-orden .puertas{flex:1 1 100%;margin-top:0} .puerta{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:7px;text-align:center; min-height:92px;padding:16px 14px;border-radius:10px; background:var(--superficie);border:1px solid var(--borde); color:var(--texto);box-shadow:0 1px 2px rgba(19,10,1,.05); transition:border-color .12s,box-shadow .12s,transform .08s} .puerta .icono{font-size:20px;line-height:1;color:var(--gris)} .puerta .titulo{font-family:"Bebas Neue","Montserrat",Impact,sans-serif; font-weight:400;font-size:19px;letter-spacing:.03em;line-height:1.1} .puerta:hover{border-color:var(--saffron);box-shadow:0 3px 8px rgba(19,10,1,.10); text-decoration:none} .puerta:active{transform:translateY(1px)} /* La de capturar avance va en el color de la marca: es a donde de verdad se entra todos los dias, y el resto de la ficha es de consulta. */ .puerta.destacada{background:var(--negro);color:var(--blanco); border-color:var(--negro)} .puerta.destacada .icono{color:var(--saffron)} .puerta.destacada:hover{border-color:var(--saffron)} /* Cuando la orden ya no esta en el piso, la tercera se queda apagada en vez de desaparecer: si no, las otras dos se estiran y el renglon cambia de forma entre una orden y otra. */ .puerta.apagada{opacity:.4;cursor:default;box-shadow:none} .puerta.apagada:hover{border-color:var(--borde);box-shadow:none} @media(max-width:760px){ .puertas{grid-template-columns:1fr} } /* --- Las piezas de una unidad, debajo de ella. Cada una con su casilla: es lo que se palomea al ir subiendo al camion. Van tenues y con sangria para que la unidad siga leyendose como el renglon principal y sus piezas como lo que la componen. --- */ .hoja-tabla tr.pk-unidad > td{border-top:1px solid var(--borde); border-bottom:0;padding-top:9px} .hoja-tabla tr.pk-pieza > td{border-bottom:0;padding-top:2px;padding-bottom:2px; font-size:11.5px;color:var(--gris-hondo)} .hoja-tabla tr.pk-pieza .pk-check{font-size:13px} .pk-guia{color:var(--gris);margin-right:5px} /* Una pieza que todavia no puede subir: un vidrio sin llegar, un screen sin QC. Se ensena en el renglon, no en una nota al pie que nadie lee. */ .pk-pendiente{display:inline-block;margin-left:6px;font-size:10px; letter-spacing:.04em;padding:0 6px;border-radius:8px; background:var(--ojo-fondo);color:var(--ojo-texto); border:1px solid var(--ojo-borde)} .etiqueta-clase.e-puerta{background:var(--lila-fondo); border-color:var(--lila-borde);color:var(--lila-texto)} /* Glass Only: el vidrio vendido solo, sin ventana. Mismo tono que el vidrio en el resto de la app, para que se lea igual en todas las pantallas. */ .etiqueta-clase.e-vidrio{background:var(--vidrio-fondo); border-color:var(--vidrio-franja)} /* El folio, cuando ya es firme. Se resalta porque es el dato por el que se busca una hoja despues: "el packing slip 3256-02". */ .hoja-datos .hoja-folio b{color:var(--quemado)} /* La lista de vidrio suelto dentro del formulario de viaje. Separada del resto para que se lea como otra cosa: son bultos, no ventanas. */ .viaje-vidrio{flex-basis:100%;margin-top:9px;padding:9px 12px; border:1px solid var(--vidrio-franja);background:var(--vidrio-fondo); border-radius:8px} .viaje-vidrio .rotulo{display:block;font-size:10px;text-transform:uppercase; letter-spacing:.08em;color:var(--gris);margin-bottom:2px} .viaje-vidrio-lista{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:6px} /* El vidrio que viaja como su propio bulto. Se separa a proposito de las cifras de unidades: no es una ventana mas. */ .hoja-vidrio-suelto{border:1px solid var(--vidrio-franja); background:var(--vidrio-fondo);border-radius:8px;padding:9px 13px; margin-bottom:12px;font-size:13px} .hoja-vidrio-suelto .rotulo{display:block;margin-bottom:5px} /* Las cifras, una por renglon y alineadas: se leen de arriba abajo. */ .hoja-vidrio-suelto .par{display:flex;justify-content:space-between; max-width:330px;padding:1px 0} /* El total de la orden, debajo de las cifras del camion. Va chico y a la derecha: es contexto, no es lo que se carga hoy. */ .hoja-total-orden{text-align:right;font-size:11.5px;color:var(--gris); margin:-4px 0 10px} .hoja-total-orden b{color:var(--negro)} /* La linea de producto, debajo de su familia. */ .hoja-partes .par.sangria{padding-left:12px;color:var(--gris);font-size:11.5px} /* Desde la hoja se puede ir a esa ventana. En el papel la liga no se nota: ahi solo estorbaria. */ .pk-liga{color:inherit} .pk-liga:hover{color:var(--quemado)} @media print{ .pk-liga{color:inherit !important;text-decoration:none} } /* ====================================================== LAS ETIQUETAS 4" x 2" en la Rollo, que es termica. Cada etiqueta en su propia hoja: la impresora avanza etiqueta por etiqueta. En pantalla se ven en fila con su borde, para revisarlas antes de gastar papel. Al imprimir, cada una sola en su hoja. */ /* La etiqueta se imprime en papel termico blanco, asi que va en blanco y negro SIEMPRE -- tambien con el tema oscuro puesto. `--blanco` y `--negro` no cambian entre temas; es el mismo recurso que usa el packing slip. */ /* 4" x 2". La historia: 4x2 el 1-sep-2026 en la Rollo; 4x6 el 2-sep, porque en la chica la Rollo no imprimia nitido y el lector no agarraba el codigo; y 4x2 otra vez el 6-oct-2026, con la impresora nueva que compro Sergio y SIN el QR -- solo el codigo del lector. */ /* NO usar `.etiqueta` a secas: esa clase ya existe (linea ~221) para el pill de etapa que usan Enviadas y el tablero, y esta tarjeta la pisaba -- el pill salia como un recuadro de 4x6 pulgadas. Lo cacho Sergio el 3 de septiembre de 2026. Esta es la TARJETA de la etiqueta impresa. */ .et-tarjeta{width:4in;height:2in;box-sizing:border-box;padding:0.06in 0.12in 0.05in; border:1px solid var(--borde);border-radius:6px;background:var(--blanco); margin:0 0 10px;display:flex;flex-direction:column;overflow:hidden; color:var(--negro)} .et-arriba{display:flex;justify-content:space-between;align-items:baseline; border-bottom:1.5px solid var(--negro);padding-bottom:1px;margin-bottom:2px; line-height:1.05} .et-orden{font-size:22px;font-weight:700;letter-spacing:.02em} .et-unidad{font-size:20px;font-weight:700} /* UN RENGLON POR DATO. En 2" de alto nada puede ocupar dos renglones: lo de la izquierda (el proyecto, la pieza) se corta con "..." y lo de la derecha (el PO, la medida) no se corta, porque es corto y es justo lo que distingue una etiqueta de su vecina. El proyecto sigue mandando sobre la pieza: quien pega las etiquetas busca la OBRA (3-sep-2026). */ .et-fila{display:flex;align-items:baseline;gap:8px;white-space:nowrap;line-height:1.2} .et-fila > :first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .et-fila > :last-child:not(:first-child){flex:0 0 auto} .et-proyecto{font-size:14px;font-weight:700} .et-po{font-size:12px;font-weight:600;color:var(--gris-hondo)} .et-titulo{font-size:13px;font-weight:700} .et-medida{font-size:13px;font-weight:600} .et-detalle{font-size:11px;color:var(--gris-hondo);line-height:1.2; overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* LAS BARRAS: a todo lo ancho y con ALTO FIJO de 0.8". El SVG viene con `estirar=True` (`codigo.svg`): sin eso guardaba su proporcion y el alto lo decidia el ancho -- en la 4x6 se pedian 1.5" y salian ~0.8". En la primera 4x2 median 0.46" y la Rollo no las agarraba. */ .et-codigo{margin-top:auto;line-height:0} .et-codigo svg{display:block;width:100%;height:0.8in} .et-texto{text-align:center;font-size:11px;letter-spacing:.14em;font-weight:700; font-family:Consolas,'Courier New',monospace;margin-top:1px;line-height:1.1} /* EL TABLERO DE ETIQUETAS. Bryan, via Sergio, 5-oct-2026: las etiquetas en miniatura, por unidad, para escoger cuales imprimir y ver cuales ya salieron. La tarjeta es la MISMA de 4x2 achicada con `zoom`: lo que se ve es exactamente lo que sale, y al imprimir vuelve a su tamano. */ .et-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px} .et-grupo{margin:0 0 16px} .et-grupo-enc{display:flex;flex-wrap:wrap;gap:10px;align-items:center; font-weight:700;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--borde)} .et-grupo-enc button{margin-left:auto} .et-tablero{display:flex;flex-wrap:wrap;gap:10px} .et-mini{display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:5px; border:2px solid var(--borde);border-radius:8px;background:var(--superficie)} .et-mini:hover{border-color:var(--acento-borde)} .et-mini.elegida{border-color:var(--saffron);background:var(--acento-suave)} .et-mini.et-ya{opacity:.75} .et-mini.et-ya.elegida{opacity:1} .et-mini .et-tarjeta{zoom:.6;margin:0} .et-elegir{display:flex;align-items:center;gap:6px;font-size:12px} .et-elegir input{margin:0} .et-impresa{color:var(--bien-texto);font-weight:600;margin-left:auto} .et-elegir .chico{margin-left:auto} /* LA HOJA SIN VIAJE REGISTRADO ES UNA LISTA DE CARGA, no un documento de embarque. En pantalla ya lo decia un aviso; en PAPEL se veia igual que la buena. Se marca donde se mira el folio, y se imprime. */ .hoja-folio-borrador b{color:var(--gris-hondo)} .hoja-borrador{font-size:10px;line-height:1.3;font-weight:600; text-transform:uppercase;letter-spacing:.04em;color:var(--quemado); border:1.5px dashed var(--quemado);border-radius:5px; padding:4px 7px;margin-top:5px;max-width:34ch} @media print{ /* El `@page` de la etiqueta NO vive aqui: vive en `etiquetas.html`. `@page` es del documento y desde esta hoja compartida se le aplicaba tambien al packing slip, que salia del tamano de una etiqueta. */ body{background:var(--blanco);margin:0;padding:0} .et-tarjeta{border:none;border-radius:0;margin:0; page-break-after:always;break-after:page;width:4in;height:2in} .et-tarjeta:last-child{page-break-after:auto;break-after:auto} /* En el tablero cada tarjeta es la ultima de su miniatura: sin esto no pediria hoja nueva y saldrian encimadas. La ultima la marca el JS. */ .et-tablero,.et-grupo{display:block;margin:0} .et-mini{display:block;border:none;padding:0;background:none;opacity:1} .et-mini .et-tarjeta,.et-mini .et-tarjeta:last-child{zoom:1; page-break-after:always;break-after:page} .et-mini.et-ultima .et-tarjeta{page-break-after:auto;break-after:auto} body.et-solo-elegidas .et-mini:not(.elegida){display:none} } /* COMO VA LA CARGA, en el packing slip. Cuenta lo ya embarcado mas lo escaneado sin registrar: las dos cosas son bultos que ya no hay que buscar. No se imprime -- es para quien carga, no para quien recibe. */ .carga-avance{margin:14px 0 4px;padding:12px 16px;border:1px solid var(--borde); border-radius:9px;background:var(--gris-fondo)} .carga-rotulo{display:flex;justify-content:space-between;align-items:baseline; gap:12px;margin-bottom:7px} .carga-rotulo b{font-size:14px} .carga-rotulo span{font-size:12px;color:var(--davy)} .carga-avance .barra{width:100%} /* Cargado pero SIN registrar. Verde es "ya se fue"; esto todavia no se fue, asi que va en ambar: queda algo que hacer. */ .carga-avance.esperando{border-color:var(--acento-borde); background:var(--acento-suave)} .carga-avance.esperando .barra i{background:var(--saffron)} /* LA ESCALERA DE UNA COMPRA (los sill pans de Lindblade). Cada renglon es un paso: verde el que ya paso, ambar en el que va, y en blanco los que faltan. El color lo dice de un vistazo; el texto lo dice con palabras, porque el color solo no basta para quien no lo distingue. */ tr.paso-hecho td{background:var(--bien-fondo)} tr.paso-actual td{background:var(--acento-suave)} tr.paso-actual b{color:var(--quemado)} /* Una compra parada una semana o mas. */ tr.paso-tarde td{background:var(--malo-fondo)} /* --------------------------------------------- LOS PROCEDIMIENTOS EN PDF Se ven como documentos, no como renglones de una lista: son los que se imprimen y se le dan a alguien que empieza. Sergio, 16-sep-2026. */ .documentos{display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .documento{display:flex;gap:12px;align-items:flex-start; border:1px solid var(--borde);border-radius:9px;padding:12px 14px; text-decoration:none;color:inherit;background:var(--superficie)} .documento:hover{border-color:var(--saffron);background:var(--fondo)} .documento .icono{flex:none;background:var(--negro);color:var(--blanco); border-radius:5px;padding:4px 7px;font-size:10px;font-weight:700; letter-spacing:.08em} .documento .texto{display:flex;flex-direction:column;gap:2px;min-width:0} .documento .texto b{font-size:14px} /* ------------------------ ANOTAR UN PENDIENTE DESDE EL TABLERO Sutil a proposito: se usa despues de la junta, repasando proyectos, y no debe competir con "A enviadas", que es la accion fuerte del renglon. Sergio, 16-sep-2026. */ .boton-anotar{background:none;border:1px dashed var(--borde);color:var(--gris); border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer; white-space:nowrap;margin-top:4px} /* El color de la letra al pasar el mouse sale de --texto y no de --negro: en modo oscuro --negro y --fondo son casi el mismo, y el boton se volvia invisible. Lo cacho la prueba de contraste. */ .boton-anotar:hover{border-color:var(--saffron);color:var(--texto); border-style:solid;background:var(--fondo)} .ventana-pendiente{border:none;border-radius:12px;padding:20px 22px; max-width:720px;width:92vw; box-shadow:0 10px 40px -10px rgba(19,10,1,.45); background:var(--superficie);color:var(--texto)} .ventana-pendiente::backdrop{background:rgba(19,10,1,.45)} .ventana-pendiente .cabeza-pendiente{flex:1 1 100%; border-bottom:1px solid var(--borde);padding-bottom:8px;margin-bottom:4px} .ventana-pendiente .pie-pendiente{flex:1 1 100%;display:flex;gap:10px; align-items:center;flex-wrap:wrap; border-top:1px solid var(--borde);padding-top:12px;margin-top:6px} /* ----------------------- POR DONDE SE HABLO, en la bitacora del servicio Un color por canal para poder barrer la bitacora de un vistazo: lo que se busca casi siempre es "cuando fue la ultima llamada". Sergio, 16-sep-2026. */ .canal{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em; border-radius:99px;padding:1px 7px;text-transform:uppercase; border:1px solid var(--borde);color:var(--gris)} .canal.llamada{border-color:var(--saffron);color:var(--quemado)} .canal.correo{border-color:var(--borde);color:var(--gris)} .canal.whatsapp{border-color:var(--bien-borde);color:var(--verde)} .canal.visita{border-color:var(--ojo-borde);color:var(--ambar)} /* ------------------------------------------- LA AGENDA DE LAS CUADRILLAS Siete columnas, una por dia. Lo que se busca de un vistazo es "que trae cada cuadrilla" y "se encimo algo". Sergio, 16-sep-2026. */ .semana{display:grid;gap:8px;grid-template-columns:repeat(7,minmax(0,1fr))} .dia{background:var(--superficie);border:1px solid var(--borde); border-radius:9px;padding:8px;min-height:130px} .dia.vacio{background:var(--fondo);border-style:dashed} .dia.es-hoy{border-color:var(--saffron);border-width:2px} .dia-cabeza{display:flex;align-items:baseline;gap:6px;margin-bottom:7px; padding-bottom:5px;border-bottom:1px solid var(--borde)} .dia-cabeza b{font-size:17px;line-height:1} .dia-cabeza span{font-size:10px;color:var(--gris);font-variant-numeric:tabular-nums} .hoy-marca{margin-left:auto;font-size:9px;font-style:normal;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--quemado)} .visita-tarjeta{display:block;text-decoration:none;color:inherit; border:1px solid var(--borde);border-left:3px solid var(--saffron); border-radius:0 7px 7px 0;padding:7px 8px;margin-bottom:6px; background:var(--fondo)} .visita-tarjeta:hover{border-color:var(--saffron);background:var(--superficie)} .visita-tarjeta b{display:block;font-size:12px} .visita-tarjeta span{display:block;font-size:10.5px;color:var(--gris); line-height:1.35} .vt-hora{font-weight:700;color:var(--negro) !important} .vt-cuadrilla{font-weight:600;color:var(--quemado) !important; text-transform:uppercase;letter-spacing:.05em;font-size:9.5px !important} .vt-dir{font-size:9.5px !important} .vt-hecha{display:inline-block !important;margin-top:4px;background:var(--bien-fondo); color:var(--bien-texto) !important;border-radius:99px;padding:0 7px; font-size:9.5px !important;font-weight:700} .visita-tarjeta.encimada{border-left-color:var(--rojo);background:var(--malo-fondo)} .vt-choque{color:var(--malo-texto) !important;font-weight:700;margin-top:3px} tr.apagado{opacity:.5} .visita{font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:99px; padding:1px 8px;white-space:nowrap} .visita.programada{background:var(--ojo-fondo);color:var(--ojo-texto)} .visita.hecha{background:var(--bien-fondo);color:var(--bien-texto)} .visita.cancelada{background:var(--malo-fondo);color:var(--malo-texto)} /* La garantia de cada renglon del servicio. Mismo molde que las visitas. */ .garantia{font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:99px; padding:2px 8px;white-space:nowrap;background:var(--ojo-fondo);color:var(--ojo-texto)} .garantia.cubierta{background:var(--bien-fondo);color:var(--bien-texto)} .garantia.vencida,.garantia.no-cubierta{background:var(--malo-fondo);color:var(--malo-texto)} @media (max-width:900px){ .semana{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .semana{grid-template-columns:1fr} } /* LA ORDEN DE TRABAJO DE UNA VISITA (orden_trabajo.html). Sergio, 17-sep-2026. Carta vertical: la regla de @page de arriba ya la manda asi. Los renglones para escribir a mano son bordes, no guiones bajos: con guiones la pluma brinca y se imprimen mas o menos segun la fuente. */ .ot{background:var(--superficie);color:var(--texto);max-width:8in;margin:0 auto} .ot-cabeza{display:flex;align-items:center;gap:16px;border-bottom:3px solid var(--saffron); padding-bottom:8px;margin-bottom:10px} .ot-cabeza img{width:150px} .ot-cabeza h1{margin:0;font-size:20px} .ot-cuando{margin-left:auto;text-align:right} .ot-cuando b{display:block;font-size:17px} .ot-cuando span{display:block;font-size:12px;color:var(--gris)} .ot-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ot-caja{border:1px solid var(--borde);border-radius:8px;padding:8px 12px;margin-bottom:8px; break-inside:avoid} .ot-caja h3{margin:0 0 6px;font-size:13px;letter-spacing:.04em;text-transform:uppercase; display:flex;gap:8px;align-items:center} .ot-dato{font-size:12.5px;margin:2px 0} .ot-dato span{display:inline-block;min-width:95px;color:var(--gris)} .ot-tabla{width:100%;border-collapse:collapse;font-size:12px} .ot-tabla th{text-align:left;border-bottom:2px solid var(--texto);padding:3px 4px;font-size:11px} .ot-tabla td{border-bottom:1px solid var(--borde);padding:5px 4px;vertical-align:top} /* Las fotos: anexo al final, cuadricula de 3 con celdas iguales. `contain` y no `cover`: son fotos de piezas y de danos, recortarlas esconde justo lo que importa. Cada celda no se parte entre hojas; la cuadricula si. */ .ot-anexo{margin-top:16px;border-top:2px solid var(--saffron);padding-top:8px} .ot-anexo h3{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase} .ot-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .ot-foto{height:2.3in;border:1px solid var(--borde);border-radius:6px;padding:4px; display:flex;align-items:center;justify-content:center;break-inside:avoid;overflow:hidden} .ot-foto img{max-width:100%;max-height:100%;object-fit:contain} .ot-lineas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px} .ot-lineas div{display:flex;flex-direction:column;font-size:11px;color:var(--gris)} .ot-lineas i{border-bottom:1px solid var(--texto);height:22px} .ot-rotulo{font-size:11px;color:var(--gris);margin-top:6px} .ot-renglon{border-bottom:1px solid var(--texto);height:22px} .ot-casillas{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font-size:12.5px} .ot-cierre{break-inside:avoid} .ot-firmas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:12px} .ot-firmas i{display:block;border-bottom:1px solid var(--texto);height:30px} .ot-firmas span{font-size:11px;color:var(--gris)} .ot-pie{margin-top:6px} @media (max-width:640px){ .ot-dos,.ot-lineas,.ot-firmas{grid-template-columns:1fr} } /* LA BARRA DE CARGA DE CADA ORDEN EN EL ANDEN. Sergio, 18-sep-2026: que quien carga vea el avance del proyecto sin abrir nada. */ .carga-orden{display:flex;align-items:center;gap:12px;margin:8px 0 10px} .carga-cifra b{font-size:16px} .carga-cifra span{display:block;font-size:11px;color:var(--gris)} .carga-barra{position:relative;flex:1;height:22px;border-radius:99px; background:var(--barra-vacia);overflow:hidden} .carga-barra i{display:block;height:100%;background:var(--saffron); border-radius:99px;transition:width .2s} .carga-barra.llena i{background:var(--verde)} .carga-barra span{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;font-size:12px;font-weight:700;color:var(--texto)} .carga-falta{font-size:12px;color:var(--gris);white-space:nowrap} @media (max-width:640px){ .carga-orden{flex-wrap:wrap} } /* ------------------------------------------------ LA BANDEJA DE COMPRAS 21-sep-2026, Sergio: "esta pantalla esta bien mal organizada". La forma ahora usa el molde de entregas; aqui solo va lo propio de la bandeja. */ /* "Pedir algo" se abre y se cierra: cerrado cuando ya hay solicitudes, para que la bandeja -- que es lo que el comprador viene a ver -- quede arriba. */ summary.abrir-forma{cursor:pointer;font-weight:700;font-size:var(--fs-lg); color:var(--davy);letter-spacing:.04em} summary.abrir-forma:hover{color:var(--quemado)} details[open]>summary.abrir-forma{margin-bottom:12px} .forma-entrega label.casilla.urgente{flex-direction:row;align-items:center;white-space:nowrap} .forma-entrega .pie-forma .chico{flex:1 1 320px;margin:0} table.bandeja-compras td{vertical-align:top} table.bandeja-compras .que-se-compra{min-width:320px} /* El juego que arma la app: se lee como una lista de compra, no como nota. */ table.partes-compra{margin:6px 0 4px;width:auto;font-size:12.5px; border:1px solid var(--borde);border-radius:6px} table.partes-compra th{background:var(--gris-fondo);color:var(--gris-mas-hondo); font-size:11px;padding:3px 8px} table.partes-compra td{padding:3px 8px} /* Los botones de cada solicitud: un renglon por accion, cada campo pegado al boton que lo usa, en vez de todos revueltos. */ .acciones-solicitud{min-width:250px} .acciones-solicitud form{display:flex;flex-direction:column;gap:5px; align-items:flex-start;margin-bottom:5px} .acciones-solicitud .par{display:flex;gap:5px;width:100%} .acciones-solicitud .par input{flex:1;min-width:0;padding:4px 7px;font-size:12px} .acciones-solicitud button{padding:4px 10px;font-size:12px;white-space:nowrap} /* Los renglones de piezas de una solicitud manual. A todo lo ancho desde el 22-oct-2026 (Sergio: "utiliza todo el ancho de la pantalla"): cada pieza trae su stock, su liga y su proveedor. Antes, tope de 900px y luego 1400px. */ .piezas-forma{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .piezas-forma .chico{margin:0} .piezas-forma table.partes-compra{width:100%} .piezas-forma table.partes-compra input{width:100%;padding:4px 7px;font-size:12.5px} /* ---- LA BANDEJA REORDENADA (Sergio, 2-oct-2026: "siento que esta todo amontonado, sin orden"). Aprobada sobre una maqueta: una accion principal por estado, lo demas en "Mas" y en la ficha del folio; las piezas en su recuadro con encabezado propio; el estado con color. Todo con variables para que el tema oscuro lo siga. */ table.bandeja-compras{table-layout:fixed;width:100%} table.bandeja-compras .col-folio{width:105px} table.bandeja-compras .col-para{width:100px} table.bandeja-compras .col-proveedor{width:115px} table.bandeja-compras .col-pidio{width:105px} table.bandeja-compras .col-estado{width:140px} table.bandeja-compras .col-sigue{width:255px} table.bandeja-compras .que-se-compra{min-width:0} button.folio-compra{background:none;border:none;padding:0;font-weight:800;font-size:15px; color:var(--texto);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer} button.folio-compra:hover{color:var(--quemado)} .nombre-juego{font-weight:700;margin-bottom:6px} table.piezas-compra{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0; border:1px solid var(--borde);border-radius:8px;overflow:hidden;font-size:13px; background:var(--superficie)} /* El encabezado de las tablas de la app se queda pegado arriba al hacer scroll; dentro de un renglon eso lo montaba encima de la primera pieza. */ table.piezas-compra th{position:static;top:auto;z-index:auto; background:var(--gris-fondo);color:var(--gris-hondo);font-size:10.5px; font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:left; padding:5px 10px;border-bottom:1px solid var(--borde)} table.piezas-compra td{padding:6px 10px;vertical-align:baseline;overflow-wrap:anywhere;border-bottom:0} table.piezas-compra tr:nth-child(odd) td{background:var(--superficie-tenue)} table.piezas-compra tr+tr td{border-top:1px solid var(--raya)} table.piezas-compra .n{width:52px;text-align:right;white-space:nowrap} table.piezas-compra td.n{font-weight:700;font-size:14px} table.piezas-compra .u{width:66px;color:var(--gris)} table.piezas-compra .c{width:26%;overflow:hidden;text-overflow:ellipsis} table.piezas-compra td.c{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px;font-weight:600;color:var(--azul-texto);white-space:nowrap} table.piezas-compra .p{width:118px;text-align:right;white-space:nowrap} table.piezas-compra td.c .pastilla{font-family:var(--fuente-ui);font-weight:600} .ver-mas-piezas{background:none;border:none;padding:0;margin-top:5px;font-size:12px; color:var(--azul-texto);cursor:pointer} .nota-compra{font-size:12.5px;color:var(--gris-mas-hondo);margin-top:7px;line-height:1.45} .etq{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;padding:1px 7px;border-radius:5px;margin-right:5px; background:var(--ojo-fondo);color:var(--ojo-texto)} .etq.gris{background:var(--gris-fondo);color:var(--gris-hondo)} /* El estado, con color: se lee sin leer el texto. */ .pastilla.edo-nueva{background:var(--gris-fondo);color:var(--gris-hondo)} .pastilla.edo-aprobada{background:var(--azul-fondo);border-color:var(--azul-borde);color:var(--azul-texto)} .pastilla.edo-en_po{background:var(--ojo-fondo);border-color:var(--ojo-borde);color:var(--ojo-texto)} .pastilla.edo-recibida{background:var(--bien-fondo);border-color:var(--bien-borde);color:var(--bien-texto)} .pastilla.edo-rechazada{background:var(--gris-fondo);color:var(--gris)} .pastilla.edo-tarde{background:var(--malo-fondo);border-color:var(--malo-borde);color:var(--malo-texto)} /* "Que sigue": la accion del estado a la izquierda, "Mas" siempre a la derecha. */ .sigue-compra{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start} .sigue-principal form{margin:0} form.po-rapido{display:flex;gap:6px;flex-wrap:wrap} form.po-rapido input{width:90px;padding:5px 8px;font-size:12.5px} .espera-compra{display:inline-block;padding-top:6px;font-size:13px;color:var(--gris)} details.menu-mas{position:relative} details.menu-mas>summary{list-style:none;cursor:pointer;padding:5px 11px;border:1px solid var(--campo-borde); border-radius:7px;font-size:12.5px;background:var(--superficie);white-space:nowrap} details.menu-mas>summary::-webkit-details-marker{display:none} .menu-mas-lista{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:230px; background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:6px; box-shadow:0 8px 24px rgba(19,10,1,.14)} .menu-mas-lista form{margin:0} .menu-mas-lista button{display:block;width:100%;text-align:left;background:none;border:none; padding:7px 10px;border-radius:6px;font-size:13px;color:var(--texto);cursor:pointer} .menu-mas-lista button:hover{background:var(--fondo)} /* La ficha del folio. */ dialog.ficha-compra{border:none;border-radius:14px;padding:20px 24px;max-width:840px;width:92vw; background:var(--superficie);color:var(--texto);box-shadow:0 10px 40px -10px rgba(19,10,1,.45)} dialog.ficha-compra::backdrop{background:rgba(19,10,1,.45)} dialog.ficha-compra h2{margin:0;font-size:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} dialog.ficha-compra h3{font-size:14px;margin:16px 0 6px} .ficha-cabeza{display:flex;justify-content:space-between;gap:12px;align-items:flex-start; border-bottom:1px solid var(--borde);padding-bottom:12px;margin-bottom:14px} .ficha-cabeza form{margin:0} /* La X lleva el color del texto: sin el heredaba el blanco de los botones y en la ficha de compras y en Edit del NCMR no se veia (23-oct-2026). */ button.cerrar-ficha{border:none;background:none;color:var(--texto);font-size:22px;line-height:1;padding:2px 8px;cursor:pointer} .cuadros-compra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .cuadros-compra div{background:var(--fondo);border-radius:8px;padding:8px 10px;font-size:13px} .cuadros-compra span{display:block;font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em} .historial-compra div{font-size:13px;padding:4px 0;border-bottom:1px solid var(--raya)} .ficha-acciones{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;min-width:0; margin-top:18px;padding-top:14px;border-top:1px solid var(--borde)} /* Cambiar la fecha estimada de una solicitud en PO, debajo del numero. */ form.cambiar-fecha{display:flex;gap:4px;margin-top:4px} form.cambiar-fecha input{padding:2px 5px;font-size:11.5px} form.cambiar-fecha button{padding:2px 7px;font-size:11px} /* Por llegar: un bloque por dia, lo atrasado en rojo. */ .llegadas-grupo{margin-bottom:18px} .llegadas-grupo.atrasado .titulo-seccion{border-left-color:var(--rojo);color:var(--rojo)} .llegadas-grupo.hoy .titulo-seccion{border-left-color:var(--verde)} table.llegadas td{vertical-align:top} /* ---- Las cuadrillas y su gente (Sergio, 23-sep-2026) ---- */ form.editor.plano{background:none;padding:0;align-items:flex-end;gap:8px} .abajo{align-self:flex-end} .ancho-total{flex:1 1 100%;display:flex;flex-direction:column;gap:3px} .ancho-total>span{font-size:var(--fs-sm);color:var(--gris-mas-hondo);font-weight:600} .h2-lado{float:right;font-weight:400;text-transform:none;letter-spacing:0} .cuadrillas-rejilla{display:grid;gap:10px;margin-bottom:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .cuadrilla-tarjeta{border:1px solid var(--borde);border-left:3px solid var(--saffron); border-radius:0 7px 7px 0;padding:9px 11px;background:var(--fondo)} .cuadrilla-tarjeta.apagada{opacity:.55;border-left-color:var(--borde)} .cuadrilla-cabeza{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px} .cuadrilla-cabeza b{font-size:14px} .cuadrilla-gente{list-style:none;margin:0 0 6px;padding:0} .cuadrilla-gente li{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap; padding:3px 0;border-bottom:1px dotted var(--borde);font-size:12.5px} .cuadrilla-gente li:last-child{border-bottom:0} .cuadrilla-gente li a{margin-left:auto;font-variant-numeric:tabular-nums} .cuadrilla-gente li.apagado{opacity:.5} .empresa-chip{display:inline-block;border:1px solid var(--campo-borde);border-radius:9px; padding:0 8px;font-size:10.5px;font-weight:700;color:var(--gris-mas-hondo); background:var(--superficie);white-space:nowrap} /* Al agendar: la gente de la cuadrilla escogida. */ .gente-visita{flex:1 1 100%;display:flex;flex-direction:column;gap:3px} .gente-visita>span{font-size:var(--fs-sm);color:var(--gris-mas-hondo);font-weight:600; display:flex;gap:10px;align-items:center} .gente-visita [hidden]{display:none !important} button.ver-todos{padding:0 7px;font-size:11px;font-weight:400} .gente-vacia{align-self:center} .elige-cuadrilla{min-width:150px} .vt-gente{color:var(--negro) !important} .vt-gente.choca{color:var(--malo-texto) !important;font-weight:700} .visita-gente{font-size:11.5px} .visita-gente .choca{color:var(--malo-texto);font-weight:700} .ot-gente{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} /* ---- Las ventanas del servicio (Sergio, 23-sep-2026) ---- El Line Items del Service Ticket de OpenJanela: tabla con imagen, y un "+" que abre los renglones de la orden para escoger. */ .barra-renglones{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin:4px 0 10px} .elegir-renglones{flex:1 1 100%} .elegir-renglones>summary{list-style:none;display:inline-block} .elegir-renglones>summary::-webkit-details-marker{display:none} .boton-mas{background:var(--saffron);color:var(--negro);border-radius:5px;padding:5px 12px; font-weight:700;font-size:13px} .boton-mas:hover{background:var(--saffron-hondo)} .elegir-renglones[open]>summary{margin-bottom:8px} .elegir-renglones form{border:1px solid var(--borde);border-radius:8px;padding:8px; background:var(--fondo)} .elegir-renglones form button{margin-top:8px} .cambiar-orden>summary{padding:6px 0} table.renglones-orden td,table.renglones-servicio td{vertical-align:middle} .ro-img{width:96px} .ro-img img{display:block;width:90px;height:56px;object-fit:contain;background:var(--blanco); border-radius:3px} .unidad-detalle{border-top:1px solid var(--borde);margin-top:10px;padding-top:6px; scroll-margin-top:70px} .unidad-detalle>summary{font-weight:700;font-size:13.5px;padding:4px 0} .unidad-detalle>summary .chico{font-weight:400;margin-left:6px} .unidad-detalle[open]>summary{margin-bottom:8px} .unidad-detalle .dibujo-ventana{width:300px} .unidad-detalle .dibujo-ventana img{max-height:300px;object-fit:contain} /* En la orden de trabajo impresa. */ .ot-mini{width:.8in} .ot-mini img{display:block;width:.7in;height:.46in;object-fit:contain} /* =================================================================== EL MODULO DE SERVICIO, CON CARA DE PRODUCTO. Sergio, 23-sep-2026: "que todo se alinee, los titulos salgan sombreados para que se aprecie cada seccion ... que se vea chula y profesional, como si el mismisimo Microsoft la hubiera hecho". Es el lenguaje de Fluent: tarjetas con sombra corta, un encabezado sombreado por seccion, controles de la misma altura alineados abajo, tablas con encabezado claro, botones secundarios blancos y uno solo primario. Vive bajo .srv-pagina para no mover las demas pantallas. Colores SOLO de las variables: el tema oscuro sigue funcionando. =================================================================== */ .srv-pagina .panel{padding:0 18px 16px;border-radius:8px;border-color:var(--borde); box-shadow:0 1.6px 3.6px rgba(19,10,1,.09),0 .3px .9px rgba(19,10,1,.07)} .srv-pagina .panel > h2{margin:0 -18px 14px;padding:11px 18px 11px 20px; background:var(--gris-fondo);border-bottom:1px solid var(--borde); border-radius:8px 8px 0 0;font-size:14.5px;font-weight:600; letter-spacing:.01em;color:var(--texto);display:flex;align-items:center; gap:8px;flex-wrap:wrap} .srv-pagina .panel > h2::before{left:0;top:0;bottom:0;height:auto; transform:none;width:4px;border-radius:8px 0 0 0} .srv-pagina .panel > h2 .chico{font-weight:400;letter-spacing:0} .srv-pagina .panel.migaja{padding:10px 16px} /* Los controles: todos de la misma altura y alineados abajo, aunque la etiqueta de uno ocupe dos renglones. */ .srv-pagina form.filtros{align-items:flex-end;gap:10px 12px} .srv-pagina label.campo>span{font-size:12px;font-weight:600; color:var(--gris-mas-hondo)} .srv-pagina input:not([type=checkbox]):not([type=radio]):not([type=file]), .srv-pagina select{height:32px;box-sizing:border-box;padding:4px 9px; border-radius:4px} .srv-pagina input[type=file]{height:32px;box-sizing:border-box;padding:3px} .srv-pagina button{height:32px;box-sizing:border-box;padding:0 14px; border-radius:4px;background:var(--superficie);color:var(--texto); border:1px solid var(--campo-borde);font-weight:600} .srv-pagina button:hover{background:var(--gris-fondo)} .srv-pagina button.acento{background:var(--saffron);border-color:var(--saffron); color:var(--negro)} .srv-pagina button.acento:hover{background:var(--saffron-hondo)} .srv-pagina button.peligro{color:var(--rojo);border-color:var(--malo-borde)} .srv-pagina .crece{flex:1 1 240px;min-width:200px} .srv-pagina .crece input{width:100%} .srv-pagina .w-xs{width:72px} .srv-pagina .w-sm{width:100px} .srv-pagina .w-md{width:150px} .srv-pagina .w-lg{width:210px} .casilla-linea{display:inline-flex;align-items:center;gap:6px;height:32px; font-size:13px;white-space:nowrap} .ayuda-linea{align-self:center;max-width:420px} .nota-panel{margin-top:10px} .separado{margin-top:10px} .texto-bien{color:var(--verde)} .barra-srv{margin-bottom:14px} /* Las tablas: encabezado claro y sombreado, no el negro de produccion. */ .srv-pagina table{border:1px solid var(--borde);border-radius:6px; border-collapse:separate;border-spacing:0;overflow:hidden} .srv-pagina th{background:var(--gris-fondo);color:var(--gris-mas-hondo); font-weight:600;font-size:12px;letter-spacing:.02em;position:static; border-bottom:1px solid var(--borde);padding:8px 10px} .srv-pagina td{padding:8px 10px} .srv-pagina tbody tr:last-child td{border-bottom:0} /* `.mini` es tambien el rotulo chico de las celdas (bloque, mayusculas, espaciado): en una TABLA mini eso la encogia y la ponia en mayusculas. */ .srv-pagina table.mini{display:table;width:100%;font-size:13px;font-weight:400; letter-spacing:normal;text-transform:none;color:inherit;opacity:1} .srv-pagina table.mini td{text-transform:none;letter-spacing:normal} .srv-pagina .marco{border:0} /* "El problema": cuatro tarjetas parejas en vez de bloques sueltos. */ .srv-pagina .detalle{display:grid;gap:12px;padding:0; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .srv-pagina .detalle .bloque{background:var(--superficie-tenue); border:1px solid var(--borde);border-radius:6px;padding:10px 12px} .srv-pagina .detalle h4{color:var(--gris-mas-hondo);font-size:11.5px; letter-spacing:.06em;margin-bottom:8px} /* Las visitas: el resultado con su encabezado y la orden de trabajo a la derecha, grande. Antes era una liga chica escondida entre los botones. */ .srv-pagina form.en-linea{display:inline-flex;gap:6px;margin:0} a.boton-ot{display:inline-flex;align-items:center;gap:6px;height:32px; padding:0 14px;border-radius:4px;background:var(--negro);color:var(--blanco); font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none} a.boton-ot:hover{background:var(--negro-alto);color:var(--blanco)} .srv-pagina table.bitacora td:first-child{width:130px;white-space:nowrap} .srv-pagina table.bitacora td:nth-child(2){width:90px} .srv-pagina table.bitacora td:nth-child(3){width:90px} /* Las fotos: tarjeta con de que renglon es y que muestra. */ .srv-pagina .galeria{gap:14px} .srv-pagina .archivo{width:220px;border:1px solid var(--borde);border-radius:8px; padding:8px;background:var(--superficie);font-size:12px; box-shadow:0 .3px .9px rgba(19,10,1,.07)} .srv-pagina .archivo img{width:100%;height:150px;object-fit:cover} .archivo-ref{margin:6px 0 2px;font-size:12.5px;line-height:1.35} .archivo-ref b{color:var(--quemado);margin-right:4px} .archivo-nota{display:flex;flex-direction:column;gap:5px;margin:6px 0} .srv-pagina .archivo-nota select,.srv-pagina .archivo-nota input{width:100%; height:30px;font-size:12px} .archivo-botones{display:flex;justify-content:space-between;gap:6px} .srv-pagina .archivo form button{height:28px;font-size:12px;padding:0 10px} /* Lo que pide el dealer: las capturas como acordeon, no como pastillas. */ .srv-pagina details.captura-solicitud{border:1px solid var(--borde); border-radius:6px;padding:0;margin-top:10px;background:var(--superficie)} .srv-pagina details.captura-solicitud>summary{display:flex;width:100%; box-sizing:border-box;border:0;border-radius:6px;background:var(--superficie-tenue); color:var(--texto);font-size:13.5px;padding:11px 14px} .srv-pagina details.captura-solicitud>summary:hover{background:var(--gris-fondo)} .srv-pagina details.captura-solicitud[open]>summary{margin:0;border-radius:6px 6px 0 0; border-bottom:1px solid var(--borde)} .srv-pagina details.captura-solicitud>form{padding:14px} .srv-pagina .rejilla-solicitud{align-items:end;gap:12px 14px} .srv-pagina .rejilla-solicitud textarea{min-height:64px} .srv-pagina .aceptar-rapido input,.srv-pagina .aceptar-rapido button{height:30px} /* La orden de trabajo: el cuadro donde el instalador escribe, y el pie de cada foto. */ .ot-col-escribir{width:27%} .ot-escribir{height:.42in;border:1px solid var(--gris);border-radius:4px; background:var(--superficie)} /* Que la medida, la linea y la fecha no se partan a media palabra por darle ancho al cuadro de escribir. */ .ot-tabla .ot-sin-partir{white-space:nowrap} .ot-foto-celda{margin:0;break-inside:avoid} .ot-foto-celda figcaption{font-size:10.5px;line-height:1.3;margin-top:3px} .ot-foto-celda figcaption b{margin-right:4px} /* Los chips de la lista ("What they are about") vivian solo dentro de .detalle; en la lista salian como texto corrido. */ .srv-pagina .chips{display:flex;flex-wrap:wrap;gap:6px} .srv-pagina .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px; border-radius:12px;border:1px solid var(--borde);background:var(--superficie-tenue); font-size:12.5px} .srv-pagina .chip b{font-weight:700} /* El cobro por visita: el total al pie, y la nota cuando no se cobra. */ .srv-pagina table.cobro-visitas tfoot td{background:var(--gris-fondo); border-top:1px solid var(--borde);font-size:13.5px;padding:9px 10px} .cobro-nada{margin-bottom:12px} /* La ayuda junto a un control se alinea con el control, no con su etiqueta. */ .srv-pagina form.filtros .ayuda-linea{align-self:flex-end;padding-bottom:8px} /* ---- Por paqueteria (Sergio, 24-sep-2026) ---- */ .paquete{border:1px solid var(--borde);border-radius:8px;padding:10px 12px; margin-bottom:10px;background:var(--superficie-tenue)} .paquete-cabeza{display:flex;flex-wrap:wrap;gap:8px;align-items:center; margin-bottom:6px} .paquete-costo{margin-left:auto;font-weight:700} .guia{font-family:Consolas,monospace;font-size:12.5px;padding:1px 8px; border:1px solid var(--borde);border-radius:10px;background:var(--superficie)} a.guia:hover{border-color:var(--saffron)} .resumen-envio{display:flex;flex-wrap:wrap;gap:8px 22px;padding:10px 12px; border-top:1px solid var(--borde);margin-top:6px;font-size:13.5px} .envio-paqueteria{margin-top:6px;padding-top:5px;border-top:1px dashed var(--borde)} .envio-contacto{margin-top:4px} /* El porque de un back order: solo en pantalla, para quien carga. Al cliente le basta "BACK ORDER" (Sergio, 24-sep-2026). */ .pk-motivo{margin-left:6px;font-size:11px;color:var(--gris);font-style:italic} /* En la columna Going cabe partido en dos renglones; en uno se encimaba con el peso ("BACK ORDER398"). */ .hoja-tabla .pk-bo{white-space:normal;line-height:1.15;word-spacing:100vw} .hoja-tabla .pk-bo .pk-motivo{display:block;margin-left:0;word-spacing:normal} /* Por donde sale cada orden del anden (Sergio, 24-sep-2026). */ .ruta{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px; font-weight:400;letter-spacing:0;text-transform:none;margin-left:6px; border:1px solid var(--borde)} .ruta b{font-weight:700;margin-right:4px} .ruta-paq{background:var(--azul-fondo);color:var(--azul-texto);border-color:var(--azul-borde)} .ruta-recoge{background:var(--lila-fondo);color:var(--lila-texto);border-color:var(--lila-borde)} .ruta-camion{background:var(--bien-fondo);color:var(--bien-texto);border-color:var(--bien-borde)} .ruta-bloqueo{margin:8px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline} .campo-en-linea{flex-direction:row !important;align-items:center;gap:6px} .campo-en-linea input{width:130px} .llevo-paq{margin-top:10px} button[disabled]{opacity:.45;cursor:not-allowed} /* La carga cerrada que no se ha ido (paso 2). Roja desde el dia siguiente: es el recordatorio. Sergio, 24-sep-2026. */ .por-salir{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center; justify-content:space-between;border:1px solid var(--ojo-borde); background:var(--ojo-fondo);color:var(--ojo-texto);border-radius:8px; padding:10px 14px;margin-bottom:10px} .por-salir.vieja{border-color:var(--malo-borde);background:var(--malo-fondo); color:var(--malo-texto)} .por-salir form{margin:0} /* "Se escaneo algo desde otro aparato": el anden y la pantalla de escanear se recargan solos, salvo si alguien esta escribiendo; entonces sale esto con su boton (6-oct-2026, `static/escaner.js`). El `[hidden]` va aparte porque el `display:flex` le gana al del navegador. */ .escaner-cambios{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .escaner-cambios[hidden]{display:none} /* El boton que sustituyo al formulario de cerrar la carga en la pantalla de escanear: la carga se cierra en el packing slip (7-oct-2026). */ .escaner-cerrar{margin-top:12px;align-items:center} /* Las cajas por paqueteria (Sergio, 24-sep-2026). */ .w-caja{width:80px} .hoja-cajas{border:1px solid var(--borde);border-radius:8px;padding:9px 12px; font-size:12.5px;line-height:1.5;margin-bottom:12px;break-inside:avoid} .hoja-cajas .rotulo{display:block;font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--gris);margin-bottom:4px} .hoja-cajas .par{display:flex;justify-content:space-between;gap:12px; font-variant-numeric:tabular-nums} .paquete-cajas{margin:-2px 0 6px} /* Cerrar una carga parcial: se dice que se queda en back order. */ .carga-viaje .parcial{margin:6px 0 8px} /* Un dato con su rotulo dentro de una celda: "Nota", "Proyecto", "PO". Sin rotulo, la nota de quien pidio salia como texto suelto y nadie sabia que era (Sergio, 25-sep-2026). */ .dato-suelto{margin-top:5px;font-size:12px;line-height:1.4} .rotulo-dato{display:block;font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--gris)} table.bandeja-compras .para-que{min-width:110px} table.bandeja-compras .col-fecha{white-space:nowrap} /* El renglon que ya se fue, en la columna Going de la hoja. */ .pk-ido{font-size:10.5px;line-height:1.2;color:var(--gris);white-space:nowrap} /* QUE SE REHACE en una orden de servicio. Va arriba porque en una orden hija es el dato que manda: lo demas de la ficha describe la unidad original. */ .rehace-ojo{margin:0 0 14px;padding:8px 10px;border-radius:6px; background:var(--acento-suave);border:1px solid var(--acento-borde); color:var(--quemado)} .rehace-renglon{padding:12px 0;border-top:1px solid var(--linea)} .rehace-renglon:first-of-type{border-top:0;padding-top:0} .rehace-renglon h3{margin:0 0 8px;font-size:15px} .rehace-renglon h3 .chico{font-weight:400;color:var(--gris)} .rehace-renglon p{margin:4px 0} .rehace-piezas{width:auto;min-width:min(520px,100%);margin:0 0 8px} .rehace-piezas td,.rehace-piezas th{padding:3px 10px 3px 0;vertical-align:top} /* El panel de "Que se rehace" se distingue del resto de la ficha: en una orden de servicio es el unico apartado que habla del trabajo real. */ .panel.rehace{border-left:3px solid var(--acento-borde)} /* --- "Marcar solo..." junto a "Marcar todas": una planta, una linea o una ubicacion de golpe. Sergio, 25-sep-2026. --- */ .marcar-por{width:auto;margin-left:10px;vertical-align:middle; padding:6px 10px;border-radius:8px} /* --- La casilla de cada bloque, dentro de su titulo: marca solo las de ese bloque. --- */ .marcar-grupo{display:inline-flex;align-items:center;margin-right:9px; vertical-align:middle;cursor:pointer} .marca-grupo{margin:0;width:15px;height:15px;cursor:pointer} /* --- CAMBIO EN OPENJANELA DESPUES DE APROBAR LOS DIBUJOS (la 3415, DW Taylor, 28-sep-2026). En el tablero va sutil a proposito: una linea chica con un punto, debajo del proyecto. Lleva a la lista de ventanas. --- */ .cambio-oj{display:block;width:fit-content;margin-top:3px;font-size:11px; font-weight:600;color:var(--ojo-texto);text-decoration:none;white-space:nowrap} .cambio-oj::before{content:"";display:inline-block;width:7px;height:7px; border-radius:50%;background:var(--saffron);margin-right:5px;vertical-align:1px} .cambio-oj:hover{text-decoration:underline} /* El panel de la ficha y de la lista de ventanas. Con pendientes se le nota: es lo que detiene el corte. */ .cambios-oj.con-pendientes{border-left:3px solid var(--rojo)} .tabla-cambios tr.pendiente td{background:var(--malo-fondo)} /* SIN encabezado fijo. Todos los `th` se pegan a 44px + la barra de captura (`--alto-acciones`, unos 250px en la lista de ventanas), y este panel va ARRIBA de esa barra: su encabezado caia encima del renglon y lo tapaba. Es una tabla de dos o tres renglones; no necesita pegarse. */ .tabla-cambios th{position:static} .nota-verificar{flex:1;min-width:240px} /* QC mide en la misma fila de la estacion. */ .medida-qc{margin-top:6px} /* Que quepa "ancho" y un numero de tres cifras: con el ancho de antes se leia "widt" y "heig". */ .medida-qc input{width:72px} /* Los paneles de una corrediza en QC, uno por renglon, y lo que se midio. Sin encabezado fijo: es una tabla chica dentro de una celda. */ .panel-qc{display:flex;align-items:center;gap:8px;margin-top:5px} .panel-qc .chico{min-width:92px} .tabla-medida{width:auto;margin-top:8px;font-size:12px} .tabla-medida th{position:static;padding:3px 8px;font-size:11px} .tabla-medida td{padding:3px 8px;font-size:12px} .tabla-medida tr.no-cuadra td{background:var(--malo-fondo);color:var(--rojo);font-weight:600} /* Medir en QC: plegable, como las piezas de Assembly y Glazing. */ tr.renglon-piezas.de-qc > td{background:var(--malo-fondo); box-shadow:inset 4px 0 0 var(--rojo)} .bien{color:var(--bien-texto);font-weight:600} /* Lo que dice OJ de cada panel, al lado de donde se escribe lo medido. */ .oj-dice{min-width:150px;color:var(--gris)} /* Medir en QC cuando es OPCIONAL (cualquier corrediza): azul de consulta, no rojo -- el rojo es para cuando QC no pasa sin la medida. */ tr.renglon-piezas.de-qc.opcional > td{background:var(--azul-fondo); box-shadow:inset 4px 0 0 var(--azul-texto)} /* El nombre de la pieza a ancho fijo: "Frame H1 ยท Head + Track" y "Panel 1" miden distinto, y sin esto los campos quedaban chuecos. */ .panel-qc .nombre-qc{flex:0 0 220px} /* Ancho FIJO, no minimo: "OJ: 54 15/16\" x 118 5/8\"" es mas largo que "OJ: 24 1/2\" x 34\"" y empujaba los campos de ese panel fuera de la columna (orden 3089). */ .panel-qc .oj-dice{flex:0 0 180px} /* OpenJanela no contesta: el aviso va pegado arriba, en todas las pantallas. */ .aviso.sin-oj{margin:12px 0} /* NCMR impreso (templates/ncmr_pdf.html). La hoja trae su propio estilo en linea porque se imprime a PDF aparte; aqui solo se registran sus clases para que la prueba de clases huerfanas sepa que existen. */ .ncmrp-enc,.ncmrp-sub,.ncmrp-num,.ncmrp-estado,.ncmrp-sec,.ncmrp-l, .ncmrp-caja,.ncmrp-fotos,.ncmrp-firmas,.ncmrp-pie,.ncmrp-w34,.ncmrp-w33,.ncmrp-w55{box-sizing:border-box} /* Material Requirement del aluminio a pintar (templates/pintura_material_pdf.html, 7-oct-2026). Igual que el NCMR: su estilo va en linea; aqui solo se registran sus clases. */ .mrq-enc,.mrq-titulo,.mrq-dir,.mrq-datos,.mrq-l,.mrq-color,.mrq-tabla,.mrq-num, .mrq-qty,.mrq-ok,.mrq-familia,.mrq-total,.mrq-firmas,.mrq-pie,.mrq-suf, .mrq-falta,.mrq-rec{box-sizing:border-box} /* El color final de una orden pintada, escrito a mano (7-oct-2026). */ .pt-color{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:8px 0 4px} .pt-color input[name="color"]{flex:1 1 420px;min-width:240px} /* ---- LOS ARCHIVOS DE UNA SOLICITUD DE COMPRA (Sergio, 5-oct-2026: fotos, PDF y cotizaciones que le llegan al comprador en el mismo correo). La lista vive en la ficha del folio; cada uno se abre en otra pestana. */ ul.archivos-compra{list-style:none;margin:4px 0 8px;padding:0} ul.archivos-compra li{padding:4px 0;border-bottom:1px solid var(--borde); display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline} ul.archivos-compra li a{font-weight:600;word-break:break-all} /* ALUMINIO A PINTAR (6-oct-2026, `nuvista.pintura`): el plan de barras. El renglon de un perfil donde OJ se quedaria corto va marcado; el selector de barras de mas y el perimetro editable van chicos dentro de su celda. La barra se dibuja en SVG a escala -- puntas, piezas y lo que sobra: verde si se guarda (24" o mas), gris si es merma. Sin `style=` en la plantilla: los colores viven aqui, y se imprimen. */ tr.pt-corto td{background:var(--ojo-fondo)} .pt-extra{margin:0} .pt-extra select{padding:2px 4px;font-size:12px} .pt-perimetro summary{cursor:pointer;white-space:nowrap} .pt-perimetro form{display:flex;gap:4px;margin:4px 0 2px} .pt-perimetro input{width:7em} .pt-perfil{margin:12px 0 0} .pt-perfil h3{font-size:12.5px;margin:0 0 3px;padding:4px 7px;border-radius:4px; background:var(--gris-fondo);color:var(--texto)} .pt-plan td{vertical-align:top} .pt-barra{display:block;width:100%;height:7px;margin-top:3px} .pt-barra .pt-pieza{fill:var(--verde)} .pt-barra .pt-punta{fill:var(--gris)} .pt-barra .pt-guarda{fill:var(--bien-fondo)} .pt-barra .pt-merma{fill:var(--barra-vacia)} .pt-guardar{color:var(--bien-texto);font-weight:700;white-space:nowrap} .pt-merma-texto{color:var(--gris-hondo);white-space:nowrap} @media print{ .pt-perfil{break-inside:auto} .pt-plan tr{page-break-inside:avoid} tr.pt-corto td{background:none} } /* La barra con una RAYA en cada corte y dos tonos alternados, para que se vea donde empieza y termina cada pieza (Sergio, 6-oct-2026: "que salga una linea entre cada corte y cambiarle el color"). La raya no se estira con la barra: `vector-effect` la deja siempre del mismo grueso. Las piezas agregadas a mano van en otro color. */ .pt-barra{height:9px} /* LA HOJA DEL PLAN A TODO LO ANCHO (6-oct-2026). Sergio, con la hoja impresa en la mano: "esto se ve muy mal... tenemos demasiado espacio muerto; no puede quedar amontonado". Con `table-layout:fixed` y sin anchos, las seis columnas salian IGUALES: la de cortes se quedaba en 1/6 de la hoja, con la barra metida ahi, y Barra y Ref sobraban. Ahora los anchos suman 100 (ver la nota de `.hoja-tabla`: si pasan de 100 el navegador encoge toda la hoja) y la barra va en su propio renglon, a todo lo ancho, con la Ref de cada pieza adentro. Su alto sale de la proporcion del `viewBox` (`pintura.ALTO_DIBUJO`), asi que la letra no se deforma. */ /* 8 + 42 + 14 + 16 + 20 = 100: Barra, Ref, Puntas, Sierra, Sobra. Hasta el mismo 6-oct eran seis, con "Cortes en orden" en 45 -- se quito porque la barra ya trae la medida y la Ref de cada pieza. Antes de eso: con Sobra en 13 se cortaba "58-1/16" Guardar", y con Barra en 5 "BARRA" se pegaba con "REF". */ .pt-plan th:nth-child(1){width:8%} .pt-plan th:nth-child(2){width:42%;text-align:left} .pt-plan th:nth-child(3){width:14%} .pt-plan th:nth-child(4){width:16%} .pt-plan th:nth-child(5){width:20%} /* En pantalla la hoja del plan mide lo que la carta: el dibujo de cada barra guarda su proporcion y, a todo lo ancho de un monitor, salia enorme (Sergio, 6-oct-2026: "en el reporte se ve bien pero en la pantalla esta demasiado grande"). Al imprimir no cambia nada. */ @media screen{ .hoja.pt-hoja{max-width:8.5in;margin-left:auto;margin-right:auto} } .pt-plan tr.pt-datos > td{border-bottom:0;padding-bottom:3px} .pt-plan tr.pt-dibujo > td{padding-top:0;padding-bottom:10px} .pt-barra.pt-barra-grande{height:auto;margin:0} /* CASI SIN TINTA (Sergio, 6-oct-2026: "que no salga tan gruesa e imprimir tanto a color"). Hasta el 8-oct-2026 las piezas iban en blanco. COLORES CLAROS DESDE EL 8-OCT-2026 (Sergio: "dale colores a la barra o algun hatch, si ves que hay problema porque tenemos letras adentro"): las piezas alternan naranja claro y azul claro, para ver donde acaba una y empieza la otra; lo hecho a mano en lila; Keep en verde claro; y con RAYADO las puntas de 2" (gris) y el Scrap (rojo), que se tiran. Todos en tono de borde, no de relleno fuerte: poca tinta y la letra negra se lee. */ /* `.pt-barra.pt-barra-grande` (tres clases) y no `.pt-barra-grande`: las reglas del naranja de abajo pesan lo mismo con dos y, por venir despues, ganaban. */ /* Con las variables de la app y no con colores escritos a mano: la primera version traia blanco, negro y grises en hexadecimal, y `test_texto_completo` la cazo. Adentro de la barra (que es blanca en los dos temas) la letra va en --negro, que el tema oscuro deja oscuro; ARRIBA de la barra va sobre el fondo de la hoja, asi que en --texto, que si cambia con el tema. */ .pt-barra.pt-barra-grande .pt-pieza{fill:var(--acento-borde)} .pt-barra.pt-barra-grande .pt-pieza-b{fill:var(--azul-borde)} .pt-barra.pt-barra-grande .pt-pieza-mano{fill:var(--lila-borde)} .pt-barra.pt-barra-grande .pt-guarda{fill:var(--bien-borde)} .pt-barra.pt-barra-grande .pt-merma{fill:url(#pt-rayas-scrap)} .pt-barra.pt-barra-grande .pt-punta{fill:url(#pt-rayas-puntas)} .pt-defs{position:absolute;width:0;height:0;overflow:hidden} .pt-raya-fondo-gris{fill:var(--barra-vacia)} .pt-raya-gris{stroke:var(--campo-borde);stroke-width:.55} .pt-raya-fondo-rojo{fill:var(--malo-fondo)} .pt-raya-roja{stroke:var(--rojo);stroke-opacity:.45;stroke-width:.5} .pt-barra.pt-barra-grande .pt-corte{stroke:var(--negro);stroke-width:1.2} .pt-barra .pt-marco{fill:none;stroke:var(--negro);stroke-width:1} .pt-barra .pt-rotulo{fill:var(--negro);font-weight:700;font-family:inherit} /* Arriba de la barra, la Ref debajo de la medida de la pieza que no cupo. */ .pt-barra .pt-rotulo-ref{fill:var(--negro);font-weight:600;font-family:inherit} .pt-barra .pt-arriba{fill:var(--texto)} .pt-barra .pt-rotulo-sobra{fill:var(--gris-hondo);font-weight:600;font-family:inherit} /* La tabla de referencias, apretada: 28 renglones de la 3465 se comian pagina y media con columnas iguales. 8 + 52 + 28 + 12 = 100. */ .pt-refs th:nth-child(1){width:8%} .pt-refs th:nth-child(2){width:52%;text-align:left} .pt-refs th:nth-child(3){width:28%} .pt-refs th:nth-child(4){width:12%} .pt-refs td{padding-top:2px;padding-bottom:2px} @media print{ .pt-plan tbody.pt-una-barra{break-inside:avoid;page-break-inside:avoid} .pt-plan tr.pt-datos{break-after:avoid;page-break-after:avoid} } .pt-barra .pt-pieza{fill:var(--saffron)} .pt-barra .pt-pieza-b{fill:var(--saffron-claro)} .pt-barra .pt-pieza-mano{fill:var(--lila-borde)} .pt-barra .pt-corte{stroke:var(--negro);stroke-width:1.5} .pt-inglete summary{cursor:pointer;font-size:12px;color:var(--gris-hondo)} .pt-inglete form{display:flex;gap:4px;margin:4px 0 2px} .pt-inglete input{width:6em} .pt-texto-corto{white-space:nowrap} /* Ventas (8-oct-2026): filtros por dealer, proyecto, orden y PO, y la nota "con tax y shipping" bajo el Total final. La nota hereda el blanco del encabezado: el gris de .chico no se lee sobre negro. */ form.filtros-ventas{align-items:flex-end} form.filtros-ventas input[type=search]{width:150px} form.filtros-ventas select[name=dealer]{max-width:260px} .tabla-ventas th .chico{display:block;color:inherit;opacity:.75;font-weight:400; font-size:11px;letter-spacing:0} /* El mes y la orden no se parten: en pantallas de menos de ~1800px la tabla por mes no cabe y "2026-10" salia en dos renglones. */ .tabla-ventas td:first-child{white-space:nowrap} .tabla-ventas th.serie{white-space:nowrap;line-height:1.25} /* Usuarios OJ (Ajustes): usuario y contrasena en letra de ancho fijo, para distinguir l de 1 y O de 0 al teclearlos en OpenJanela. 12-oct-2026. */ .clave-oj{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}