/* ===================================================================== COEPSA · identidad visual --------------------------------------------------------------------- Los tres colores salen del logotipo, medidos, no elegidos a ojo. La regla del proyecto es contraste minimo 4,5:1 sobre blanco (PRODUCT.md, Accessibility) y los del logo la pasan MEJOR que la paleta que reemplazan: rojo #CE1126 5,63:1 (antes #C0392B 5,44) verde #15753C 5,77:1 (antes #1B7A42 5,37) azul #0F69B4 5,68:1 (antes #1F6FB2 5,28) grafito #3C3C3B 11,04:1 — el gris del wordmark Coincidencia que ordena todo el rediseno: las tres flechas del logotipo YA SON los tres estados del semaforo de existencias. La marca y el semaforo dicen lo mismo, asi que subir la marca no cuesta ni un punto de contraste. El ambar de atencion no esta en el logo y se queda como estaba, porque es el cuarto estado y necesita ser distinto de los tres. ===================================================================== */ :root{ --rojo:#CE1126; --verde:#15753C; --azul:#0F69B4; --grafito:#3C3C3B; --critico:var(--rojo); --ok:var(--verde); --acento:var(--azul); --atencion:#A85B0D; /* 5,04:1 — cuarto estado, fuera del logo */ --franja:#2E2E2D; --activo:#1F1F1E; /* grafito oscurecido: el wordmark en su tono */ --fondo:#F4F5F6; --panel:#fff; --texto:#1C1C1B; --gris:#5E625F; --linea:#DCDFE0; --sombra:0 1px 2px #1c1c1b0f, 0 4px 12px -2px #1c1c1b14; --sombra-alta:0 -2px 4px #1c1c1b0a, 0 -12px 32px -8px #1c1c1b1f; } *{box-sizing:border-box} /* hidden gana siempre. Sin esto, cualquier `display` con especificidad de clase o id le gana al [hidden] del navegador y el atributo deja de ocultar. */ [hidden]{display:none!important} body{margin:0;background:var(--fondo);color:var(--texto); font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; /* Cifras de ancho fijo en toda la aplicacion: una columna de cantidades que baila entre el 1 y el 8 se lee peor, y aqui se compara de un vistazo. */ font-variant-numeric:tabular-nums} /* Las superficies que no dibuje yo tambien son del diseno. */ ::selection{background:#0f69b426;color:var(--texto)} :root{accent-color:var(--azul);caret-color:var(--azul);scrollbar-color:#c3c7c9 transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:#c3c7c9;border-radius:6px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:#a9aeb0;background-clip:content-box} :focus-visible{outline:2px solid var(--azul);outline-offset:2px} /* --- logotipo ------------------------------------------------------ */ /* El wordmark va en la tipografia del sistema con el tracking del logo. Es interino y honesto: un logotipo se compone en vectores, no se aproxima con una fuente. Exporta COEPSA como SVG desde tu archivo de marca y reemplaza .marca-texto por el ; las flechas ya son vectoriales y exactas. */ .marca{display:flex;align-items:center;gap:10px;min-width:0} .marca svg{flex:none;display:block} .marca-texto{display:flex;flex-direction:column;gap:2px;min-width:0} .marca-nombre{font-size:19px;font-weight:600;letter-spacing:.14em;line-height:1; color:#fff;white-space:nowrap} .marca-bajada{display:flex;align-items:center;gap:5px;font-size:7.5px;font-weight:600; letter-spacing:.3em;color:#ffffffa8;white-space:nowrap;text-transform:uppercase} /* Las dos reglas dobles que el logo pone a los lados de la bajada. */ .marca-bajada::before,.marca-bajada::after{content:"";width:11px;height:3px;flex:none; border-top:1px solid currentColor;border-bottom:1px solid currentColor} /* --- entrar -------------------------------------------------------- */ .centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:14px; padding:0 0 30px;width:100%;max-width:394px;display:flex;flex-direction:column; box-shadow:var(--sombra);overflow:hidden} /* La cabecera de la tarjeta es el momento de marca: el logo sobre grafito y la regla de tres colores debajo. */ .tarjeta-marca{background:var(--franja);padding:26px 30px 24px; border-bottom:3px solid transparent; border-image:linear-gradient(90deg,var(--rojo) 0 33.34%,var(--verde) 33.34% 66.67%,var(--azul) 66.67% 100%) 1} .tarjeta-marca .marca-nombre{font-size:25px} .tarjeta-marca .marca-bajada{font-size:8.5px} .tarjeta form,.tarjeta>label,.tarjeta>input,.tarjeta>button,.tarjeta>p{margin-inline:30px} .tarjeta .sub{margin:26px 30px 22px;color:var(--gris);font-size:14px} .tarjeta label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--gris);margin-bottom:7px;display:block} .tarjeta input{font:inherit;width:calc(100% - 60px);padding:13px 14px;border:1px solid var(--linea); border-radius:9px;margin-bottom:18px;background:#fff;color:var(--texto)} .tarjeta input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px #0f69b42e} .tarjeta button{font:inherit;font-size:16px;font-weight:600;width:calc(100% - 60px); padding:14px;border:none;border-radius:9px;background:var(--activo);color:#fff;cursor:pointer; transition:background .15s} .tarjeta button:hover:not(:disabled){background:#000} .tarjeta button:disabled{opacity:.5;cursor:default} /* --- cabecera ------------------------------------------------------ */ header{background:var(--franja);color:#fff;padding:11px 16px;display:flex;gap:12px; align-items:center;min-width:0; /* La firma del rediseno: las tres flechas del logo se vuelven una regla de 3px bajo la cabecera. Cita la marca sin repetir el logotipo. */ border-bottom:3px solid transparent; border-image:linear-gradient(90deg,var(--rojo) 0 33.34%,var(--verde) 33.34% 66.67%,var(--azul) 66.67% 100%) 1} .chip{background:#ffffff1a;border:1px solid #ffffff2e;border-radius:20px;padding:4px 11px; font-size:11px;font-weight:600;letter-spacing:.07em;flex:none;white-space:nowrap} /* El que cede es el nombre: 'Luis Miranda' cabe en 375px, 'Bodeguero de turno Gonzalez' no, y sin esto la cabecera empuja el ancho del documento entero. */ .usuario{font-size:13px;color:#ffffffc4;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .crece{flex:1} header button.plano{border:1px solid #ffffff33;background:#ffffff14;color:#fff; padding:7px 13px;font-size:13px;border-radius:8px;transition:background .15s} header button.plano:hover{background:#ffffff26} /* --- modos --------------------------------------------------------- */ #modos{display:flex;gap:1px;background:var(--linea);box-shadow:var(--sombra)} .modo{flex:1;min-width:0;background:var(--panel);border:none;border-bottom:3px solid transparent; padding:13px 6px 11px;font:inherit;font-size:12px;font-weight:600;letter-spacing:.05em; color:var(--gris);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px; transition:background .14s,color .14s} .modo svg{display:block} .modo kbd{font:inherit;font-size:10px;font-weight:500;opacity:.55;letter-spacing:0} .modo:hover:not([aria-current=true]){background:#fafbfb;color:var(--texto)} .modo[aria-current=true]{color:var(--azul);border-bottom-color:var(--azul);background:#f0f6fb} .solo-admin{display:none} body.admin .solo-admin{display:flex} /* --- lector: el instrumento principal de la pantalla --------------- */ .zona{background:var(--panel);border-bottom:1px solid var(--linea);padding:16px; position:sticky;top:0;z-index:5} .zona label{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px} .lectura{display:flex;gap:9px} .campo-lector{flex:1;min-width:0;position:relative;display:flex;align-items:center} .campo-lector svg{position:absolute;left:15px;color:var(--gris);pointer-events:none; transition:color .15s} #lector{width:100%;height:60px;font:21px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding:0 14px 0 48px;border:1.5px solid var(--linea);border-radius:11px;background:#fcfcfd; color:var(--texto);transition:border-color .15s,box-shadow .15s,background .15s} #lector::placeholder{color:#9aa0a0} #lector:focus{outline:none;border-color:var(--azul);background:#fff; box-shadow:0 0 0 3px #0f69b42e} .campo-lector:focus-within svg{color:var(--azul)} #btnCamara{height:60px;min-width:60px;display:flex;align-items:center;justify-content:center; border:1.5px solid var(--linea);background:#fff;color:var(--azul);border-radius:11px; cursor:pointer;transition:border-color .15s,background .15s} #btnCamara:hover{border-color:var(--azul);background:#f0f6fb} .aviso{margin:12px 0 0;font-size:14px;display:flex;gap:9px;align-items:baseline;min-height:20px} .aviso b{font-weight:700;font-size:13px} .aviso.ok b{color:var(--ok)} .aviso.mal b{color:var(--critico)} .aviso.ojo b{color:var(--atencion)} .aviso button{margin-left:auto;background:none;border:none;color:var(--azul);font:inherit; font-size:14px;font-weight:600;cursor:pointer;padding:0;white-space:nowrap; text-underline-offset:3px;text-decoration:underline} /* --- lineas -------------------------------------------------------- */ /* La barra de 4px al borde izquierdo es decision documentada del proyecto (docs/03-diseno-de-interfaz.md #4): pintar la fila entera de rojo la vuelve ilegible, y esto se ve igual de rapido con el texto intacto. */ ul{list-style:none;margin:0;padding:0 0 156px} li{display:flex;align-items:center;gap:12px;background:var(--panel); border-bottom:1px solid var(--linea);border-left:4px solid var(--linea); padding:11px 16px;min-height:62px} li.ok{border-left-color:var(--ok)} li.ojo{border-left-color:var(--atencion)} li.mal{border-left-color:var(--critico)} .info{flex:1;min-width:0} .desc{font-size:16px;font-weight:600;letter-spacing:-.005em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meta{font-size:12.5px;color:var(--gris);margin-top:3px;overflow:hidden} /* La etiqueta nunca se corta: si la linea no alcanza, envuelve y la fila crece. Cortar la palabra deja el estado comunicado solo por color, que es justo lo que PRODUCT.md prohibe. */ .meta .etiqueta{white-space:nowrap} .cifra{text-align:right;min-width:76px} .cant{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .queda{font-size:11.5px;color:var(--gris);margin-top:1px} .etiqueta{font-weight:700;letter-spacing:.02em} .etiqueta.ok{color:var(--ok)} .etiqueta.ojo{color:var(--atencion)} .etiqueta.mal{color:var(--critico)} .quitar{width:40px;height:40px;flex:none;border:1px solid var(--linea);background:#fff; color:var(--gris);border-radius:9px;cursor:pointer;display:flex;align-items:center; justify-content:center;transition:border-color .15s,color .15s,background .15s} .quitar:hover{border-color:var(--critico);color:var(--critico);background:#fdf3f4} .vacio{padding:52px 24px;text-align:center;color:var(--gris);font-size:14px; max-width:46ch;margin-inline:auto} .vacio svg{color:#b9bebe;margin-bottom:14px} /* --- barra inferior ------------------------------------------------ */ footer{position:fixed;bottom:26px;left:0;right:0;background:var(--panel); border-top:1px solid var(--linea);padding:13px 16px;display:flex;gap:10px; align-items:center;min-height:74px;box-shadow:var(--sombra-alta)} footer #total{flex:1;font-size:13.5px;color:var(--gris)} button.plano{font:inherit;font-size:15px;font-weight:500;padding:13px 15px;border-radius:9px; border:1px solid var(--linea);background:#fff;color:var(--texto);cursor:pointer; transition:border-color .15s,background .15s} button.plano:hover{background:#f7f8f8;border-color:#c9cdce} button.fuerte{font:inherit;font-size:15px;font-weight:600;letter-spacing:.03em;padding:13px 20px; border-radius:9px;border:none;background:var(--activo);color:#fff;cursor:pointer; transition:background .15s,transform .08s} button.fuerte:hover:not(:disabled){background:#000} button.fuerte:active:not(:disabled){transform:translateY(1px)} button.fuerte:disabled{opacity:.38;cursor:default} #teclas{position:fixed;bottom:0;left:0;right:0;height:26px;background:var(--franja); color:#ffffffab;display:flex;gap:16px;align-items:center;padding:0 16px;font-size:11px} #teclas b{color:#fff;font-weight:600} /* --- hoja de confirmar --------------------------------------------- */ #velo{position:fixed;inset:0;background:#1c1c1b7d;z-index:20; animation:aparecer .18s cubic-bezier(.16,1,.3,1)} #hoja{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--panel); border-radius:16px 16px 0 0;padding:0 0 calc(20px + env(safe-area-inset-bottom)); max-height:88vh;overflow-y:auto;box-shadow:0 -4px 8px #1c1c1b14,0 -24px 60px -12px #1c1c1b3d; /* El unico momento animado de la pantalla: la hoja sube. Ease-out exponencial desde un estado ya presente, no una entrada por seccion. */ animation:subir .3s cubic-bezier(.16,1,.3,1)} @keyframes subir{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}} @keyframes aparecer{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){#hoja,#velo{animation:none}} #hoja h2{margin:0;font-size:19px;letter-spacing:-.015em;padding:22px 20px 18px; border-bottom:1px solid var(--linea);position:sticky;top:0;background:var(--panel);z-index:1} #hojaCuerpo{padding:20px 20px 4px} #hoja .campo{margin-bottom:20px} #hoja .campo > label{display:block;font-size:15px;font-weight:600;margin-bottom:9px} #hoja .opciones{display:flex;flex-wrap:wrap;gap:8px} #hoja .opciones button{font:inherit;font-size:15px;padding:11px 16px;border-radius:22px; border:1px solid var(--linea);background:#fff;color:var(--texto);cursor:pointer; transition:border-color .14s,background .14s} #hoja .opciones button:hover[aria-pressed=false]{border-color:#b7bcbd;background:#fafbfb} #hoja .opciones button[aria-pressed=true]{background:var(--activo);border-color:var(--activo);color:#fff} #hoja input,#hoja select,#hoja textarea{font:inherit;font-size:16px;width:100%;padding:12px; border:1px solid var(--linea);border-radius:9px;background:#fff;color:var(--texto)} #hoja input:focus,#hoja select:focus,#hoja textarea:focus{outline:none;border-color:var(--azul); box-shadow:0 0 0 3px #0f69b42e} #hoja textarea{min-height:66px} .hojaPie{display:flex;gap:9px;justify-content:flex-end;padding:6px 20px 0} #hoja .error{color:var(--critico);font-size:14px;margin:0 0 16px;font-weight:600; background:#fdf3f4;border:1px solid #f0d4d7;border-radius:9px;padding:11px 13px} /* --- deshacer ------------------------------------------------------ */ #deshacer{position:fixed;left:16px;right:16px;bottom:112px;z-index:15;background:var(--activo); color:#fff;border-radius:12px;padding:14px 16px;display:flex;gap:14px;align-items:center; box-shadow:0 4px 8px #1c1c1b1f,0 16px 40px -8px #1c1c1b4d; animation:subir .28s cubic-bezier(.16,1,.3,1)} #deshacer b{display:block;font-size:15px} #deshacer span{font-size:12.5px;color:#ffffffb8} #btnDeshacer{font:inherit;font-size:14px;font-weight:600;margin-left:auto;white-space:nowrap; background:#fff;color:var(--activo);border:none;border-radius:9px;padding:11px 15px;cursor:pointer; display:flex;align-items:center;gap:7px;transition:background .15s} #btnDeshacer:hover{background:#eceded} /* Las casillas de permisos de un rol. Etiqueta envolviendo el input para que el area de clic sea toda la linea: son 18 y con el mouse justo en el cuadrito se vuelve tedioso. */ #hoja .chk{display:flex;align-items:center;gap:9px;font-weight:400;font-size:15px; padding:7px 0;cursor:pointer;margin:0} #hoja .chk input{width:auto;margin:0;flex:none} /* La franja de pruebas. Naranja y arriba de todo: tiene que ser lo primero que se ve y no poder confundirse con la aplicacion real. Va en el flujo normal (no fija) para que empuje el contenido en vez de taparlo. */ #franjaPruebas{background:#b45309;color:#fff;font-weight:700;font-size:13px; letter-spacing:.04em;text-align:center;padding:7px 12px} /* Y el borde lateral, para que se note tambien con la franja fuera de la vista al hacer scroll en un telefono. */ body.pruebas{box-shadow:inset 4px 0 0 #b45309, inset -4px 0 0 #b45309} /* La zona de la orden de compra: separada del lector por una linea, para que se lea como un paso previo y no como otro campo mas del mismo formulario. */ #zonaOc{border-bottom:1px solid var(--linea);padding-bottom:14px;margin-bottom:16px} #lector:disabled{background:#f4f5f5;color:#9aa0a1;cursor:not-allowed} .tenue{font-weight:400;color:var(--tenue,#6b7172)} .nota.ojo{border-left:3px solid var(--atencion);padding-left:10px} #resultados{padding:0 0 156px} /* La fila de F3 abre el detalle, y tiene que decirlo: puntero al pasar y foco visible al llegar con Tab. Se trabaja con pistola y teclado, sin mouse, asi que el anillo de foco no es decoracion -- es el unico indicio de donde estas. outline-offset negativo para que el anillo no se corte contra el borde. */ #resultados li[data-detalle]{cursor:pointer} #resultados li[data-detalle]:hover{background:#fafbfb} #resultados li[data-detalle]:focus-visible{outline:3px solid var(--activo);outline-offset:-3px} /* Los valores del detalle no son campos editables: sin el peso de un