/* ========================================================================== WMS OQUENDO - LA HOJA DE ESTILOS -------------------------------------------------------------------------- Estaba adentro del index.html (116 KB). Ahora es un archivo aparte para que el celular lo guarde y no lo baje de nuevo cada vez. Se cambia la version con ?v= en el del index.html. ========================================================================== */ /* ========================================================================== WMS OQUENDO - LA PANTALLA DEL OPERADOR Una sola app. Se instala en el celular. Funciona sin internet. ========================================================================== */ :root{ /* ================= NOCHE (por defecto) ================= */ --fondo: #05080f; --panel: #0f1626; --panel2: #1a2333; --borde: #3d4a5f; /* gris fino, se ve sin ser molesto */ --borde2: #2a3546; --texto: #ffffff; --texto2: #c2cee0; --texto3: #8b9ab0; --ok: #00e676; --alerta: #ffc400; --error: #ff3d3d; --info: #35a7ff; --amarillo: #ffd400; --amarillo2:#ffb800; --r: 14px; --alto: 46px; /* el alto de TODOS los botones */ --alto-g: 55px; /* el alto de los botones grandes */ --alto-in: 45px; /* el alto de los campos */ --letra: 12.5px; /* la letra de los botones */ --radio: 11px; --sombra: 0 2px 8px rgba(0,0,0,.35); } /* ================= DIA ================= */ html[data-tema="dia"]{ --fondo: #eef1f6; --panel: #ffffff; --panel2: #f4f6fa; --borde: #b8c2d1; /* gris visible sobre blanco */ --borde2: #d5dbe5; --texto: #0b1220; --texto2: #3d4a5f; --texto3: #6b7a90; --ok: #00a854; --alerta: #d68f00; --error: #d92b2b; --info: #0b74d1; --amarillo: #ffc400; --amarillo2:#e0a800; --sombra: 0 2px 8px rgba(20,30,50,.10); } html[data-tema="dia"] body{ background:var(--fondo); color:var(--texto); } html[data-tema="dia"] input, html[data-tema="dia"] select, html[data-tema="dia"] textarea{ background:#fff !important; color:var(--texto) !important; } html[data-tema="dia"] nav{ background:linear-gradient(180deg,#fff,#eef1f6) !important; } html[data-tema="dia"] nav button.activo{ color:#000 !important; } html[data-tema="dia"] .card{ background:#fff !important; } html[data-tema="dia"] .inb{ background:var(--fondo); color:var(--texto); } html[data-tema="dia"] .inb thead{ background:var(--panel2); } html[data-tema="dia"] .inb thead th{ color:var(--texto2); } html[data-tema="dia"] .inb tbody tr{ color:var(--texto); } html[data-tema="dia"] .inb .menu{ background:#fff; } html[data-tema="dia"] .inb .menu button{ color:var(--texto2); } html[data-tema="dia"] .inb .menu button:hover{ background:#eef1f6; color:var(--texto); } html[data-tema="dia"] .inb .tabla-item input{ background:#fff; color:var(--texto); } html[data-tema="dia"] .aviso{ background:rgba(0,0,0,.04); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;height:100%} body{ background:var(--fondo); color:var(--texto); font:16px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; overscroll-behavior:none; } /* ---------- la barra de arriba ---------- */ header{ position:sticky;top:0;z-index:50;background:var(--panel); border-bottom:1px solid var(--borde); padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; display:flex;align-items:center;gap:10px; } header h1{font-size:17px;margin:0;flex:1;font-weight:700;letter-spacing:-.2px} header .quien{font-size:12px;color:var(--texto2);text-align:right;line-height:1.2} header .quien b{display:block;color:var(--texto);font-size:13px} .punto{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto;box-shadow:0 0 8px var(--ok)} .punto.off{background:var(--error);box-shadow:0 0 8px var(--error)} /* ---------- el contenido ---------- */ main{ padding:14px 14px calc(env(safe-area-inset-bottom) + 84px); max-width:720px;margin:0 auto; } .vista{display:none} .vista.activa{display:block;animation:entra .18s ease} @keyframes entra{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}} /* ---------- las tarjetas ---------- */ .card{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);padding:15px;margin-bottom:12px} .card h3{margin:0 0 10px;font-size:15px;font-weight:600} .vacio{text-align:center;color:var(--texto3);padding:44px 20px;font-size:15px} .vacio .ico{font-size:44px;display:block;margin-bottom:12px;opacity:.5} /* ---------- los botones ---------- */ button,.btn{ font:inherit;font-weight:600;border:none;border-radius:12px; padding:14px 18px;background:var(--panel2);color:var(--texto); cursor:pointer;display:inline-flex;align-items:center;justify-content:center; gap:8px;transition:transform .08s,filter .15s; } button:active,.btn:active{transform:scale(.97)} button:disabled{opacity:.45;cursor:not-allowed} .btn-primario{background:var(--info);color:#fff} .btn-ok{background:var(--ok);color:#052e16} .btn-alerta{background:var(--alerta);color:#451a03} .btn-fantasma{background:transparent;border:1px solid var(--borde);color:var(--texto2)} .btn-ancho{display:flex;width:100%} .btn-grande{padding:20px;font-size:19px;border-radius:16px} .acciones{display:grid;gap:10px;margin-top:12px} .acciones.dos{grid-template-columns:1fr 1fr} /* ---------- los campos ---------- */ input,select{ font:inherit;width:100%;padding:15px 16px;border-radius:12px; background:var(--panel2);color:var(--texto);border:1px solid var(--borde); } input:focus,select:focus{outline:2px solid var(--info);outline-offset:-1px} input::placeholder{color:var(--texto3)} label{display:block;font-size:13px;color:var(--texto2);margin:12px 0 6px;font-weight:600} /* ---------- los pallets ---------- */ .pallet{ background:var(--panel);border:1px solid var(--borde);border-radius:var(--r); padding:14px;margin-bottom:10px;cursor:pointer; } .pallet:active{transform:scale(.99)} .pallet .lpn{font-family:ui-monospace,monospace;font-size:15px;font-weight:700;color:var(--info)} .pallet .desc{font-size:15px;font-weight:600;margin:3px 0 6px} .pallet .meta{font-size:13px;color:var(--texto2);display:flex;flex-wrap:wrap;gap:12px} .pallet .meta b{color:var(--texto)} .guia-titulo{ font-size:12px;font-weight:700;color:var(--texto3);text-transform:uppercase; letter-spacing:.6px;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--borde); } /* ---------- LA UBICACION SUGERIDA (bien grande) ---------- */ .ubi-sugerida{ background:linear-gradient(135deg,var(--amarillo),var(--amarillo2)); color:#422006;border-radius:18px;padding:24px;text-align:center;margin:14px 0; box-shadow:0 8px 28px rgba(250,204,21,.28); } .ubi-sugerida .etiqueta{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;opacity:.75} .ubi-sugerida .codigo{ font-family:ui-monospace,monospace;font-size:44px;font-weight:900; letter-spacing:2px;line-height:1.05;margin:8px 0; } .ubi-sugerida .zona{font-size:15px;font-weight:600;opacity:.85} .ubi-sugerida .motivos{margin:14px 0 0;padding:0;list-style:none;font-size:13px;text-align:left} .ubi-sugerida .motivos li{padding:3px 0 3px 20px;position:relative} .ubi-sugerida .motivos li:before{content:'✓';position:absolute;left:0;font-weight:800} /* ---------- la escalera de empaque ---------- */ .escalera{ background:var(--panel2);border-radius:12px;padding:12px;margin:10px 0; display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:14px; } .escalera .n{font-size:22px;font-weight:800;color:var(--amarillo)} .escalera .u{color:var(--texto2);font-size:12px;font-weight:600} .escalera .x{color:var(--texto3);font-size:18px} .chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700} .chip.ok{background:rgba(34,197,94,.2);color:#4ade80} .chip.alerta{background:rgba(245,158,11,.2);color:#fbbf24} .chip.error{background:rgba(239,68,68,.2);color:#f87171} /* ---------- los avisos ---------- */ .aviso{padding:14px 16px;border-radius:12px;margin:12px 0;font-size:14px;font-weight:600} .aviso.ok{background:rgba(34,197,94,.15);border:1px solid var(--ok);color:#86efac} .aviso.alerta{background:rgba(245,158,11,.15);border:1px solid var(--alerta);color:#fcd34d} .aviso.error{background:rgba(239,68,68,.15);border:1px solid var(--error);color:#fca5a5} /* ---------- el buscador ---------- */ .buscador{position:relative;margin-bottom:14px} .buscador input{padding-left:44px} .buscador .limpiar{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;padding:10px;color:var(--texto3)} /* ---------- la barra de abajo ---------- */ nav{ position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--panel); border-top:1px solid var(--borde);display:flex; padding-bottom:env(safe-area-inset-bottom); } nav button{ flex:1 1 0; min-width:0; max-width:20%; background:none !important; border:none !important; border-radius:10px !important; padding:7px 1px 6px !important; margin:0 1px; display:flex; align-items:center; justify-content:center; font-size:8.5px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:uppercase !important; color:var(--texto3) !important; min-height:50px !important; line-height:1.1; white-space:normal; word-break:break-word; text-align:center; overflow:hidden; } nav{ overflow-x:hidden; display:flex; align-items:stretch; } nav button .ico{font-size:21px;line-height:1} nav button.activo{color:var(--info)} nav button.activo .ico{transform:translateY(-1px)} /* ---------- el cargando ---------- */ .spin{ width:19px;height:19px;border:2.5px solid rgba(255,255,255,.25); border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite; } @keyframes gira{to{transform:rotate(360deg)}} .cargando{display:flex;align-items:center;justify-content:center;gap:10px;padding:36px;color:var(--texto2)} /* ========================================================================== ALTO CONTRASTE - botones grandes, sin emojis ========================================================================== */ /* OJO: el nav queda AFUERA de esta regla (tiene su propio estilo) */ main button, .card button, .acciones button, .btn-primario, .btn-ok, .btn-alerta, .btn-fantasma, label.btn-alerta { min-height: 62px !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: .4px !important; text-transform: uppercase !important; border-radius: 14px !important; padding: 0 18px !important; -webkit-tap-highlight-color: transparent; } button:active { transform: scale(.975); } /* el primario: AMARILLO con letras NEGRAS (maximo contraste) */ .btn-primario, .btn-alerta { background: var(--amarillo) !important; color: #000000 !important; border: 2px solid var(--amarillo) !important; } .btn-ok { background: var(--ok) !important; color: #001a0d !important; border: 2px solid var(--ok) !important; } .btn-fantasma, button:not([class]) { background: transparent !important; color: var(--texto) !important; border: 2px solid var(--borde) !important; } /* el boton GRANDE */ .btn-grande { min-height: 74px !important; font-size: 19px !important; } .btn-ancho { width: 100%; } /* los titulos de las pantallas */ h2, h3, .card h3 { text-transform: uppercase; letter-spacing: .6px; font-weight: 900; } /* las tarjetas: borde bien visible */ .card { border: 1px solid var(--borde) !important; background: var(--panel) !important; } /* los input: grandes y con borde grueso */ input[type=text], input[type=number], input[type=date], input:not([type]), select, textarea { min-height: 60px !important; font-size: 18px !important; font-weight: 700 !important; border: 2px solid var(--borde) !important; background: #00060f !important; color: var(--texto) !important; border-radius: 12px !important; } input::placeholder { color: var(--texto3) !important; } label { font-size: 14px !important; font-weight: 800 !important; color: var(--texto2) !important; text-transform: uppercase; letter-spacing: .5px; } /* ========================================================================== 10% MAS CHICO EN TODO ========================================================================== */ main button, .card button, .acciones button, .btn-primario, .btn-ok, .btn-alerta, .btn-fantasma { min-height: 56px !important; font-size: 15px !important; } .btn-grande { min-height: 66px !important; font-size: 17px !important; } input[type=text], input[type=number], input[type=date], input:not([type]), select { min-height: 54px !important; font-size: 16px !important; } .card { padding: 15px 16px !important; } /* ⚠️ ESTE ES EL BUENO. NO PONER OTRO "main { padding } " DESPUES. --------------------------------------------------------------------------- La barra de abajo es position:fixed, asi que NO empuja el contenido: lo TAPA. Para que el ultimo renglon se pueda ver hay que dejarle abajo el alto de la barra + el area del gesto del celular. Si se pone un "padding:12px" pelado, el final de cada pantalla queda escondido detras de la barra. */ main{ padding: 12px 12px calc(env(safe-area-inset-bottom) + 92px) !important; } /* la barra, para saber cuanto mide: unos 64px + el gesto del celular */ nav{ min-height: 60px } /* ========================================================================== LA BARRA DE ABAJO - con vida ========================================================================== */ nav { background: linear-gradient(180deg, rgba(15,22,38,.97), #05080f) !important; border-top: 1px solid rgba(69,85,112,.5) !important; box-shadow: 0 -6px 22px rgba(0,0,0,.55); padding: 5px 4px calc(5px + env(safe-area-inset-bottom)) !important; gap: 3px; } nav button { position: relative; border-radius: 12px !important; margin: 0 2px; color: var(--texto3) !important; font-size: 9.5px !important; transition: all .16s ease; } nav button::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 3px; border-radius: 2px; background: transparent; transition: all .18s; } nav button.activo { color: #000 !important; background: var(--amarillo) !important; box-shadow: 0 3px 12px rgba(255,212,0,.35); } nav button.activo::after { background: transparent; } nav button:active { transform: scale(.94); } /* ========================================================================== LA PANTALLA DEL INBOUND - igual a la vieja (Tailwind escrito a mano, para que ande sin internet) ========================================================================== */ .inb { background:#0b1121; color:#f8fafc; font-family:'Inter',system-ui,sans-serif; margin:-16px; padding:16px; min-height:100%; } .inb * { box-sizing:border-box; } .inb .wrap { max-width:1280px; margin:0 auto; } /* ---- cabecera ---- */ .inb .head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; border-bottom:1px solid #334155; padding-bottom:14px; margin-bottom:20px; } .inb .head h1 { font-size:20px; font-weight:900; color:#fff; margin:0; display:flex; align-items:center; gap:10px; } .inb .head p { font-size:11px; color:#94a3b8; font-family:ui-monospace,monospace; margin:4px 0 0; } .inb .head .btns { display:flex; flex-wrap:wrap; gap:8px; } /* ---- los botones de arriba ---- */ .inb .b { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; border:1px solid transparent; transition:all .15s; -webkit-tap-highlight-color:transparent; min-height:0 !important; text-transform:none !important; letter-spacing:0 !important; } .inb .b:active { transform:scale(.97); } .inb .b-verde { background:#059669; color:#fff; } .inb .b-verde:hover { background:#10b981; } .inb .b-rojo { background:rgba(127,29,29,.6); color:#fecaca; border-color:rgba(185,28,28,.5); } .inb .b-rojo:hover { background:#991b1b; } .inb .b-azul { background:linear-gradient(90deg,#2563eb,#4f46e5); color:#fff; border-color:rgba(96,165,250,.3); } .inb .b-azul:hover { background:linear-gradient(90deg,#3b82f6,#6366f1); } .inb .b:disabled { background:#334155 !important; color:#64748b !important; cursor:not-allowed; } .inb .latido { animation:latido 1.5s infinite; } @keyframes latido { 0% { box-shadow:0 0 0 0 rgba(239,68,68,.7) } 70% { box-shadow:0 0 0 10px rgba(239,68,68,0) } 100% { box-shadow:0 0 0 0 rgba(239,68,68,0) } } @media (min-width:760px) { } @media (min-width:760px) {} .inb .fila-dir { display:flex; gap:8px; } .inb .tabla-box { overflow-x:auto; border:1px solid #334155; border-radius:9px; } .inb table { width:100%; border-collapse:collapse; font-size:12px; font-family:ui-monospace,monospace; white-space:nowrap; } .inb thead { background:#1e293b; } .inb thead th { padding:11px; font-size:10px; font-weight:800; color:#94a3b8; text-transform:uppercase; text-align:left; border-bottom:1px solid #334155; letter-spacing:.4px; } .inb thead th.ce { text-align:center; } .inb thead th.am { color:#facc15; } .inb tbody tr { border-bottom:1px solid #1e293b; color:#cbd5e1; } .inb tbody tr:last-child { border-bottom:none; } .inb tbody td { padding:8px 11px; } .inb .vacio { text-align:center; padding:36px 16px; color:#64748b; } .inb .vacio .ic { font-size:30px; display:block; margin-bottom:10px; opacity:.5; } .inb .tabla-item input { width:100%; background:#0f172a; border:1px solid #334155; padding:7px 9px; border-radius:6px; color:#fff; font-family:ui-monospace,monospace; font-size:13px; min-height:0 !important; font-weight:700; } .inb .tabla-item input:focus { outline:none; border-color:#3b82f6; } .inb .tabla-item .cant { text-align:right; } .inb .tabla-item .pal { text-align:center; } .inb .btn-x { background:rgba(127,29,29,.6); color:#fecaca; border:1px solid rgba(185,28,28,.4); border-radius:6px; padding:6px 10px; font-size:12px; font-weight:800; cursor:pointer; min-height:0 !important; } .inb .btn-x:hover { background:#991b1b; } @media (min-width:760px) { } .inb .menu { position:absolute; right:0; margin-top:8px; width:260px; background:#1e293b; border-radius:8px; border:1px solid #334155; z-index:60; display:none; box-shadow:0 12px 30px rgba(0,0,0,.6); overflow:hidden; } .inb .menu.abierto { display:block; } .inb .menu button { display:block; width:100%; text-align:left; padding:11px 16px; font-size:12px; color:#cbd5e1; background:none; border:none; cursor:pointer; font-weight:700; min-height:0 !important; text-transform:none !important; letter-spacing:0 !important; border-radius:0 !important; } .inb .menu button:hover { background:#334155; color:#fff; } .inb .menu .dest { background:rgba(49,46,129,.6); color:#c7d2fe; border-bottom:1px solid #334155; } .inb .menu .dest:hover { background:#3730a3; } /* ---- la barra de estado ---- */ .inb .estado { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; font-family:ui-monospace,monospace; color:#94a3b8; margin-top:12px; padding-top:12px; border-top:1px solid #334155; } .inb .estado b { color:#fff; } .inb .reloj { font-family:ui-monospace,monospace; background:rgba(0,0,0,.3); padding:2px 9px; border-radius:5px; letter-spacing:2px; font-size:11px; } /* ---- scroll ---- */ .inb ::-webkit-scrollbar { width:6px; height:6px; } .inb ::-webkit-scrollbar-track { background:#0f172a; } .inb ::-webkit-scrollbar-thumb { background:#3b82f6; border-radius:10px; } /* ========================================================================== LA PANTALLA DE RECIBIR - estilo f-gold ========================================================================== */ .inb .head h1 { font-size:19px !important; letter-spacing:.3px; } .inb .head p { font-size:9.5px !important; } .chip-red{font-size:9.5px;font-weight:800;padding:4px 11px;border-radius:20px; background:rgba(0,230,118,.15);color:var(--ok);border:1px solid rgba(0,230,118,.4); white-space:nowrap} .chip-red.off{background:rgba(255,61,61,.15);color:var(--error);border-color:rgba(255,61,61,.4)} .chip-foto{font-size:9.5px;font-weight:800;padding:4px 11px;border-radius:20px; background:var(--panel2);color:var(--texto3);border:1px solid var(--borde); white-space:nowrap} .chip-ok{font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:20px; background:rgba(0,230,118,.15);color:var(--ok);border:1px solid rgba(0,230,118,.4)} .chip-ok.mal{background:rgba(255,61,61,.15);color:var(--error);border-color:rgba(255,61,61,.4)} /* ---- los 4 botones de arriba ---- */ .inb-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} .ib{display:flex;align-items:center;justify-content:center;gap:6px; height:46px;min-height:46px;max-height:46px;padding:0 10px;border-radius:11px; font-size:12.5px;font-weight:800;letter-spacing:.2px;cursor:pointer; border:1px solid transparent;transition:filter .15s,transform .1s; text-transform:none !important;box-shadow:none; -webkit-tap-highlight-color:transparent} .ib:active{transform:scale(.975);filter:brightness(1.1)} .ib-azul{background:#2563eb;color:#fff} .ib-verde{background:#059669;color:#fff} .ib-verde.rojo{background:#dc2626 !important} .ib-verde.latido{animation:latido 1.3s ease-in-out infinite} @keyframes latido{0%,100%{opacity:1} 50%{opacity:.72}} .ib-gris{background:var(--panel2);color:var(--texto);border-color:var(--borde)} .ib-violeta{background:#7c3aed;color:#fff} .ib-reloj{font-family:ui-monospace,monospace;font-size:11px;background:rgba(0,0,0,.25); padding:2px 7px;border-radius:5px;letter-spacing:1px;font-size:10.5px} .ib:disabled{opacity:.45;cursor:not-allowed} /* ---- la busqueda de transito, CHICA ---- */ .tr-mini{display:flex;gap:6px;margin-bottom:12px} .tr-mini input{flex:1;height:34px !important;min-height:34px !important;font-size:11.5px !important} .tr-mini button{height:34px !important;min-height:34px !important;font-size:9.5px !important; padding:0 11px !important;border-radius:8px !important; background:#059669;color:#fff;border:1px solid transparent !important; font-weight:800;text-transform:uppercase} .tr-mini button:last-child{background:var(--panel2);color:var(--texto); border-color:var(--borde) !important;padding:0 11px !important} /* ---- el desplegable de transitos ---- */ .tr-wrap{position:relative;flex:1} .tr-drop{position:absolute;top:38px;left:0;right:0;z-index:80;max-height:290px; overflow-y:auto;background:var(--panel);border:1px solid var(--borde); border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.6);display:none} .tr-drop.on{display:block} .tr-drop .op{display:flex;align-items:center;gap:8px;padding:8px 11px; border-bottom:1px solid var(--borde2);cursor:pointer} .tr-drop .op:last-child{border-bottom:none} .tr-drop .op:active{background:var(--panel2)} .tr-drop .op.hecho{opacity:.45} .tr-drop .op .n{font-family:ui-monospace,monospace;font-size:13px;font-weight:900; color:var(--info);min-width:82px} .tr-drop .op .d{flex:1;font-size:10px;color:var(--texto2);line-height:1.45;overflow:hidden} .tr-drop .op .e{font-size:8.5px;font-weight:900;padding:2px 7px;border-radius:9px; white-space:nowrap} .tr-drop .op .e.ok{background:rgba(0,230,118,.15);color:var(--ok); border:1px solid rgba(0,230,118,.4)} .tr-drop .op .e.no{background:rgba(255,196,0,.15);color:var(--alerta); border:1px solid rgba(255,196,0,.4)} .tr-drop .vacio2{padding:16px;text-align:center;font-size:11.5px;color:var(--texto3)} .tr-drop .cab{position:sticky;top:0;background:var(--panel2);padding:6px 11px; font-size:9px;font-weight:900;color:var(--texto3);letter-spacing:.5px; border-bottom:1px solid var(--borde);text-transform:uppercase} /* ---- las tarjetas del inbound ---- */ .inb-card{background:var(--panel);border:1px solid var(--borde);border-radius:12px; padding:13px;margin-bottom:11px} .inb-card-cab{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap} .inb-tt{font-size:14px;font-weight:900;flex:0 0 auto} .inb-ob{font-size:9.5px;color:var(--texto3);font-style:italic;flex:1} .inb-mini{height:28px !important;min-height:28px !important;padding:0 9px !important; font-size:9.5px !important;border-radius:7px !important; background:var(--panel2) !important;color:var(--texto2) !important; border:1px solid var(--borde) !important;font-weight:800; text-transform:uppercase;white-space:nowrap} .inb-lb{display:block;font-size:10px;font-weight:900;color:var(--texto2); margin:10px 0 4px;letter-spacing:.4px;text-transform:uppercase} .inb-lb b{color:var(--alerta)} .inb-in{width:100%;height:42px !important;min-height:42px !important; background:#0b1220 !important;border:1px solid var(--borde) !important; border-radius:8px !important;padding:0 11px !important; font-size:13px !important;color:var(--texto) !important;font-weight:700} .inb-in:focus{border-color:var(--info) !important} .inb-amar{color:var(--alerta) !important} .inb-mono{font-family:ui-monospace,monospace;letter-spacing:.5px} .inb-fila{display:flex;gap:7px;align-items:center} .inb-sep{border-top:1px solid var(--borde2);margin:13px 0 4px} .inb-2col{display:grid;grid-template-columns:1fr 1fr;gap:9px} .inb-tat{font-size:11px;font-family:ui-monospace,monospace;color:var(--ok); background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.3); border-radius:7px;padding:6px 10px;margin-top:8px;text-align:center} /* ---- guardar / exportar ---- */ .inb-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px} .inb-lpn-in{flex:1;height:34px !important;min-height:34px !important; font-family:ui-monospace,monospace !important;font-size:13px !important; color:var(--info) !important;letter-spacing:1px;text-align:center; background:transparent !important;border:1px solid var(--borde) !important} .tabla-item.mal{background:rgba(255,61,61,.08)} /* ---- la tabla ---- */ .tabla-box{overflow-x:auto;border:1px solid var(--borde);border-radius:9px} .tabla-box table{width:100%;border-collapse:collapse;font-size:11px; font-family:ui-monospace,monospace;white-space:nowrap} .tabla-box thead{background:var(--panel2)} .tabla-box thead th{padding:6px 7px;font-size:8px;font-weight:900;color:var(--texto3); text-transform:uppercase;text-align:left; border-bottom:1px solid var(--borde);letter-spacing:0} .tabla-box th.ce{text-align:center} .tabla-box tbody td{padding:4px 6px;border-bottom:1px solid var(--borde2)} .tabla-box tbody tr:last-child td{border-bottom:none} .tabla-box .vacio{text-align:center;padding:24px 12px;color:var(--texto3); font-family:'Inter',system-ui,sans-serif;font-size:11.5px;line-height:1.6} .tabla-box input{height:30px !important;min-height:30px !important; font-size:11px !important;padding:0 6px !important; background:#0b1220 !important;border:1px solid var(--borde) !important; border-radius:6px !important;color:var(--texto) !important} /* ---- los botones del menu de impresion ---- */ .inb .menu button{height:36px;font-size:11px} /* ========================================================================== EL REPORTE DE TRANSITOS - version COMPACTA ========================================================================== */ .rep-mini{background:transparent;border:1px solid var(--borde2); border-radius:8px;margin-bottom:8px;overflow:hidden} .rep-cab{display:flex;align-items:center;gap:7px;width:100%;padding:0 10px; height:30px;min-height:30px;background:none;border:none;cursor:pointer; text-transform:none !important;letter-spacing:0 !important; box-shadow:none !important;border-radius:0 !important} .rep-cab:active{transform:none !important} .rep-tit{font-size:9.5px;font-weight:900;color:var(--texto3);letter-spacing:.5px; text-transform:uppercase;font-family:'Inter',system-ui,sans-serif} .rep-est{flex:1;text-align:right;font-size:9.5px;font-family:ui-monospace,monospace; color:var(--texto3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rep-est.ok{color:var(--ok)} .rep-flecha{font-size:9px;color:var(--texto3);transition:transform .2s} .rep-mini.abierto .rep-flecha{transform:rotate(180deg)} .rep-cuerpo{display:none;padding:0 10px 10px} .rep-mini.abierto .rep-cuerpo{display:block} .rep-info{font-size:10px !important;line-height:1.5 !important;margin-bottom:8px !important} .rep-cargar{height:32px !important;min-height:32px !important;font-size:10px !important} .rep-info{font-size:10.5px;font-family:ui-monospace,monospace;color:#94a3b8; line-height:1.6;margin-bottom:10px} .rep-cargar{position:relative;overflow:hidden;display:flex;align-items:center; justify-content:center;width:100%;height:38px;min-height:38px; font-size:11px;font-weight:800;border-radius:9px;cursor:pointer} /* ========================================================================== AUDITAR - tarjeta chica y color al marcar ========================================================================== */ .aud-cab{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:9px; background:var(--panel2);border:1px solid var(--borde);border-radius:11px; position:sticky;top:0;z-index:20} .aud-cab .nom{font-size:13px;font-weight:900;flex:1} .aud-cab .cue{font-size:10px;color:var(--texto3);font-family:ui-monospace,monospace} .aud-cab button{height:34px !important;min-height:34px !important; font-size:10px !important;padding:0 11px !important; box-shadow:none !important} /* cada posicion */ .pos-cab{display:flex;align-items:center;gap:8px;padding:5px 10px;margin:7px 0 5px; background:var(--panel2);border-left:3px solid var(--info);border-radius:0 7px 7px 0} .pos-cab .p{font-size:11px;font-weight:900;letter-spacing:.5px} .pos-cab .c{flex:1;text-align:right;font-size:9.5px;color:var(--texto3); font-family:ui-monospace,monospace} /* las filas de niveles: BIEN chicas */ .niv-fila{display:flex;align-items:center;gap:7px;padding:5px 9px; border:1px solid var(--borde2);border-radius:8px;margin-bottom:4px; background:var(--panel);transition:all .15s} .niv-fila .n{font-size:9px;font-weight:900;color:var(--texto3); background:var(--panel2);padding:2px 6px;border-radius:5px; font-family:ui-monospace,monospace;min-width:30px;text-align:center} .niv-fila .u{flex:1;font-family:ui-monospace,monospace;font-size:12.5px;font-weight:800; letter-spacing:.4px} .niv-fila .ch{font-size:8.5px;font-weight:800;padding:2px 7px;border-radius:9px; border:1px solid var(--borde)} .niv-fila .ch.vacia{background:rgba(0,230,118,.14);color:var(--ok);border-color:rgba(0,230,118,.4)} .niv-fila .ch.llena{background:rgba(255,196,0,.14);color:var(--alerta);border-color:rgba(255,196,0,.4)} .niv-fila .btns{display:flex;gap:4px} .niv-fila .btns button{height:30px !important;min-height:30px !important;width:38px; padding:0 !important;font-size:10px !important; border-radius:7px !important;box-shadow:none !important; background:transparent !important;color:var(--texto3) !important; border:1px solid var(--borde) !important} /* MARCADA VACIA ->verde */ .niv-fila.marcada-vacia{background:rgba(0,230,118,.13);border-color:var(--ok)} .niv-fila.marcada-vacia .ch{background:var(--ok);color:#00220f;border-color:var(--ok)} .niv-fila.marcada-vacia .btns button.v{background:var(--ok) !important;color:#00220f !important; border-color:var(--ok) !important;font-weight:900} /* MARCADA LLENA ->ambar */ .niv-fila.marcada-llena{background:rgba(255,196,0,.13);border-color:var(--alerta)} .niv-fila.marcada-llena .ch{background:var(--alerta);color:#2a1a00;border-color:var(--alerta)} .niv-fila.marcada-llena .btns button.l{background:var(--alerta) !important;color:#2a1a00 !important; border-color:var(--alerta) !important;font-weight:900} /* ========================================================================== LA TARJETA DEL TRANSITO (reemplaza al "Buscando el transito...") ========================================================================== */ .card-transito{background:linear-gradient(180deg,rgba(16,185,129,.14),rgba(16,185,129,.05)); border:1.5px solid rgba(16,185,129,.5);border-radius:13px; padding:11px 13px;margin:8px 0 12px} .ct-linea1{display:flex;align-items:center;gap:7px;flex-wrap:wrap; font-size:15px;font-weight:900;color:var(--texto)} .ct-linea1 b{color:var(--ok);font-family:ui-monospace,monospace} .ct-sep,.ct-flecha{color:var(--texto3);font-weight:700} .ct-flecha{color:var(--amarillo)} .ct-linea2{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .chip-dato{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1); border-radius:7px;padding:3px 8px;font-size:11px;color:var(--texto2)} .chip-dato b{color:var(--amarillo)} .ct-linea3{font-size:10.5px;color:var(--texto3);margin-top:6px;line-height:1.5} /* ========================================================================== LA RECEPCION GUARDADA - la confirmacion ========================================================================== */ .guardado-ok{background:linear-gradient(180deg,rgba(16,185,129,.2),rgba(16,185,129,.06)); border:2px solid var(--ok);border-radius:14px;overflow:hidden;margin:10px 0} .gd-cab{display:flex;align-items:center;gap:10px;padding:12px 14px; background:rgba(16,185,129,.22);border-bottom:1.5px solid var(--ok)} .gd-check{width:26px;height:26px;border-radius:50%;background:var(--ok);color:#000; display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px} .gd-tt{font-size:14px;font-weight:900;letter-spacing:.6px;color:#6ee7b7} .gd-cuerpo{padding:10px 14px} .gd-grupo{margin-bottom:12px} .gd-grupo:last-child{margin-bottom:2px} .gd-gt{font-size:9.5px;font-weight:900;letter-spacing:1.2px;color:var(--texto3); border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:4px;margin-bottom:7px} .gd-fila{display:flex;justify-content:space-between;gap:10px;padding:3px 0; font-size:12px;align-items:baseline} .gd-k{color:var(--texto3);font-weight:700;flex:0 0 auto} .gd-v{color:var(--texto);font-weight:800;text-align:right;word-break:break-word} .gd-v.grande{font-size:20px;color:var(--amarillo);font-family:'Arial Black',Arial} .gd-v.mono{font-family:ui-monospace,monospace;font-size:11px;color:var(--info)} .gd-v.tat{color:var(--ok);font-family:ui-monospace,monospace;font-size:14px} .gd-pie{padding:9px 14px;background:rgba(0,0,0,.25);font-size:10.5px; color:var(--texto3);text-align:center;font-weight:700} /* el boton del cronometro cuando esta andando */ #btnDescarga.rojo{background:var(--error) !important;border-color:#ff8080 !important} #tiempoDescarga{font-family:ui-monospace,monospace;font-size:19px;font-weight:900; color:#fff;letter-spacing:2px} .bloqueado{opacity:.4;cursor:not-allowed !important} /* ---- los botones chiquitos de cada fila (borrar / duplicar) ---- */ .btn-mini{width:26px;height:26px;min-height:26px;padding:0;border-radius:6px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06); color:var(--texto2);font-size:13px;font-weight:900;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; vertical-align:middle;margin:0 1px;line-height:1} .btn-mini:active{transform:scale(.92)} .btn-dup{color:#93c5fd;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.14)} .btn-dup:hover{background:rgba(59,130,246,.3)} .btn-del{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.14)} .btn-del:hover{background:rgba(239,68,68,.3)} /* ========================================================================== LOS DESPLEGABLES DE 1 RENGLON (la impresora Zebra y el correlativo LPN: van cerrados) ========================================================================== */ .mini-desplegable{border:1px solid var(--borde);border-radius:10px;overflow:hidden; background:rgba(255,255,255,.02);width:100%} .md-cab{width:100%;display:flex;align-items:center;gap:8px; padding:0 10px;height:34px;min-height:34px; background:transparent;border:0;color:var(--texto2); cursor:pointer;text-align:left;font-family:inherit} .md-cab:active{background:rgba(255,255,255,.06)} .md-tt{font-size:11px !important;font-weight:900;letter-spacing:.2px; flex:0 0 auto;white-space:nowrap;color:var(--texto2)} .md-est{flex:1 1 auto;min-width:0;text-align:right;font-size:10px; color:var(--texto3);font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:ui-monospace,monospace} .md-cuerpo{padding:8px 10px 10px;border-top:1px solid var(--borde)} /* ========================================================================== GUARDAR e IMPRIMIR: EXACTAMENTE IGUALES ========================================================================== */ #v-recibir .inb-acciones{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; margin-top:9px !important; align-items:stretch !important; } #v-recibir .inb-acciones > .ib, #v-recibir .inb-acciones > button{ width:100% !important; min-width:0 !important; height:40px !important; min-height:40px !important; max-height:40px !important; padding:0 6px !important; border-radius:9px !important; font-size:11.5px !important; font-weight:900 !important; letter-spacing:.2px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; box-sizing:border-box !important; } #v-recibir #btnGuardarServidor{background:#2563eb !important;color:#fff !important} #v-recibir #btnMenuImprimir{background:#7c3aed !important;color:#fff !important} #v-recibir #btnMenuImprimir:disabled{background:#334155 !important;color:#94a3b8 !important} /* ========================================================================== EL BOTON DE DESCARGA: letra mas chica, y que el reloj entre comodo ========================================================================== */ #v-recibir #btnDescarga{ font-size:10.5px !important; letter-spacing:0 !important; padding:0 5px !important; gap:3px !important; } #v-recibir #textoDescarga{font-size:10.5px !important;font-weight:900 !important} #v-recibir .ib-reloj{ font-size:9.5px !important; padding:1px 4px !important; letter-spacing:0 !important; border-radius:4px !important; } /* ========================================================================== LOS BOTONES DE ARRIBA A PRUEBA DE TODO -------------------------------------------------------------------------- Que el texto NUNCA se corte en 2 renglones, y que los 4 midan igual. ========================================================================== */ #v-recibir .inb-botones{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; margin-bottom:8px !important; } #v-recibir .inb-botones > .ib, #v-recibir .inb-botones > label, #v-recibir .inb-botones > button{ width:100% !important; min-width:0 !important; height:42px !important; min-height:42px !important; max-height:42px !important; padding:0 6px !important; gap:4px !important; border-radius:9px !important; font-size:11.5px !important; font-weight:900 !important; letter-spacing:0 !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; flex-wrap:nowrap !important; } #v-recibir #textoDescarga{ font-size:11.5px !important; font-weight:900 !important; white-space:nowrap !important; flex:0 0 auto !important; } #v-recibir .ib-reloj{ font-size:9px !important; padding:1px 3px !important; letter-spacing:0 !important; border-radius:4px !important; flex:0 0 auto !important; font-family:ui-monospace,monospace !important; } /* ---------- la confirmacion ---------- */ .conf-tabla{width:100%; border-collapse:collapse; font-size:13px} .conf-tabla th{background:#00060f; color:var(--texto2); font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; padding:8px 6px; text-align:left; border-bottom:2px solid var(--borde); white-space:nowrap} .conf-tabla td{padding:8px 6px; border-bottom:1px solid var(--borde); vertical-align:middle} .conf-tabla tr.ok td{border-left:5px solid var(--ok)} .conf-tabla tr.mal td{border-left:5px solid var(--error); background:rgba(255,61,61,.07)} .conf-tabla .sk{font-family:ui-monospace,monospace; font-weight:800; font-size:13.5px; display:block} .conf-tabla .ds{font-size:11px; color:var(--texto3); display:block; margin-top:2px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .conf-tabla input{min-height:46px !important; font-size:15px !important; padding:0 8px !important; text-align:right; width:100%; min-width:92px} .conf-tabla .num{font-family:ui-monospace,monospace; font-size:14px; font-weight:800; text-align:right} .conf-tabla .dif{font-family:ui-monospace,monospace; font-size:14px; font-weight:900; text-align:right} .conf-tabla .dif.mal{color:var(--error)} .conf-tabla .dif.ok{color:var(--ok)} .conf-total{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:800; padding:12px 6px; border-top:3px solid var(--borde)} .conf-total span b{font-family:ui-monospace,monospace} .tabla-mini{width:100%; border-collapse:collapse; font-size:12.5px} .tabla-mini td{padding:5px 4px; border-bottom:1px solid var(--borde)} .tabla-mini td:last-child{text-align:right; font-family:ui-monospace,monospace; font-weight:800} /* ---------- los transitos ---------- */ .transito{border:1px solid rgba(56,189,248,.35);border-radius:12px;padding:12px 14px; margin-bottom:9px;background:linear-gradient(135deg,rgba(56,189,248,.09),transparent)} .transito.hoy{border-color:rgba(34,197,94,.55);background:linear-gradient(135deg,rgba(34,197,94,.12),transparent)} .transito .n{font-family:ui-monospace,monospace;font-size:16px;font-weight:800;letter-spacing:.5px} .transito .d{font-size:12px;color:var(--texto2);margin-top:4px;line-height:1.5} .transito .badge-hoy{font-size:10px;font-weight:800;padding:2px 7px;border-radius:10px; background:var(--ok);color:#052e16;margin-left:7px} .carga-info{font-size:11.5px;color:var(--texto3);margin-top:9px;line-height:1.6; border-top:1px solid rgba(71,85,105,.3);padding-top:9px} /* ---------- los usuarios ---------- */ .usuario{border-left:4px solid var(--ok);background:rgba(34,197,94,.06); padding:12px 14px;margin-bottom:9px;border-radius:0 11px 11px 0} .usuario.baja{border-left-color:var(--texto3);background:rgba(71,85,105,.15);opacity:.6} .usuario.admin{border-left-color:#a78bfa;background:rgba(167,139,250,.08)} .usuario.super{border-left-color:#38bdf8;background:rgba(56,189,248,.07)} .usuario .u{font-family:ui-monospace,monospace;font-size:15px;font-weight:800;letter-spacing:.4px} .usuario .n{font-size:12.5px;color:var(--texto2);margin-top:3px} .usuario .r{font-size:10.5px;font-weight:800;letter-spacing:1px;margin-top:6px;display:inline-block; padding:3px 9px;border-radius:20px} .usuario .r.ADMIN{background:rgba(167,139,250,.2);color:#c4b5fd} .usuario .r.SUPERVISOR{background:rgba(56,189,248,.2);color:#7dd3fc} .usuario .r.OPERADOR{background:rgba(34,197,94,.2);color:#86efac} .usuario .acc{display:flex;gap:6px;margin-top:10px} .usuario .acc button{flex:1;padding:9px;border-radius:9px;font-size:11.5px;font-weight:800; background:rgba(71,85,105,.4);color:var(--texto); border:1px solid rgba(100,116,139,.4)} .usuario .acc button:active{transform:scale(.97)} .form-usu label{font-size:11.5px;color:var(--texto2);display:block;margin-bottom:3px} .form-usu input,.form-usu select{width:100%;padding:12px;border-radius:10px; border:1px solid rgba(100,116,139,.45);background:rgba(2,6,23,.55); color:var(--texto);font-size:15px;margin-bottom:10px} /* ---------- los candados ---------- */ .candado{border-left:4px solid #64748b;padding:12px 14px;margin-bottom:9px; background:rgba(15,23,42,.4);border-radius:0 11px 11px 0} .candado.on{border-left-color:var(--ok);background:rgba(34,197,94,.07)} .candado.off{border-left-color:var(--texto3)} .candado.peligro{border-left-color:#ef4444;background:rgba(239,68,68,.07)} .candado .k{font-family:ui-monospace,monospace;font-size:12.5px;font-weight:800;letter-spacing:.3px} .candado .q{font-size:12.5px;color:var(--texto2);margin-top:5px;line-height:1.45} .candado .w{font-size:11.5px;color:#fca5a5;margin-top:6px;line-height:1.4} .candado .ctrl{margin-top:9px;display:flex;align-items:center;gap:9px} .sw{position:relative;width:52px;height:30px;flex:0 0 auto;border-radius:15px; background:rgba(71,85,105,.7);transition:background .18s;border:none;padding:0} .sw:after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px; border-radius:50%;background:#fff;transition:left .18s} .sw.on{background:#22c55e} .sw.on:after{left:25px} .candado input[type=number],.candado input[type=text]{ flex:1;padding:10px 12px;border-radius:9px;border:1px solid rgba(100,116,139,.45); background:rgba(2,6,23,.55);color:var(--texto);font-size:15px} .grupo{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--texto3); margin:20px 0 9px;padding-left:2px} .linea{border-left:4px solid var(--ok);background:rgba(34,197,94,.06)} .linea .sku{font-family:ui-monospace,monospace;font-weight:800;font-size:14.5px} .escalera{font-size:12px;color:var(--texto2);background:rgba(15,23,42,.5); border-radius:9px;padding:8px 10px;margin-top:8px; font-family:ui-monospace,monospace} .fila-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fila-datos label{font-size:11.5px;color:var(--texto2);display:block;margin-bottom:3px} .alerta-item{border-left:4px solid #ef4444;background:rgba(239,68,68,.07)} nav button{position:relative} /* ---------- los descuadres ---------- */ .descuadre{border-left:4px solid var(--alerta);background:rgba(245,158,11,.06)} .descuadre .fila{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .descuadre .tipo{font-size:11px;font-weight:800;letter-spacing:.6px;color:#fcd34d} .descuadre .ubi{font-family:ui-monospace,monospace;font-weight:800;font-size:15px} .resolver{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px} .resolver button{padding:10px 8px;border-radius:9px;font-size:12px;font-weight:800; background:rgba(71,85,105,.35);color:var(--texto);border:1px solid rgba(100,116,139,.4)} .resolver button:active{transform:scale(.97)} .resolver input{grid-column:1 / -1;padding:10px;border-radius:9px;border:1px solid rgba(100,116,139,.4); background:rgba(15,23,42,.6);color:var(--texto);font-size:14px} /* ---------- el login ---------- */ #login{max-width:400px;margin:0 auto;padding-top:8vh} #login .logo{text-align:center;margin-bottom:28px} #login .logo .ico{font-size:56px} #login .logo h2{margin:8px 0 2px;font-size:24px;font-weight:800;letter-spacing:-.5px} #login .logo p{margin:0;color:var(--texto2);font-size:14px} /* ---------- el dashboard ---------- */ .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);padding:14px} .kpi .v{font-size:27px;font-weight:800;line-height:1.1} .kpi .t{font-size:11px;color:var(--texto2);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;font-weight:600} .kpi.ok .v{color:var(--ok)} .kpi.info .v{color:var(--info)} .kpi.alerta .v{color:var(--alerta)} .kpi.error .v{color:var(--error)} .barra{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:8px} .barra i{display:block;height:100%;background:var(--info);border-radius:99px} /* ---------- la tabla de zonas ---------- */ table{width:100%;border-collapse:collapse;font-size:14px} table th{text-align:left;font-size:11px;color:var(--texto3);text-transform:uppercase;letter-spacing:.5px;padding:8px 6px;border-bottom:1px solid var(--borde)} table td{padding:9px 6px;border-bottom:1px solid rgba(71,85,105,.4)} table td.n{text-align:right;font-family:ui-monospace,monospace;font-weight:600} table tr:last-child td{border-bottom:none} /* ---------- la camara ---------- */ #camara{position:fixed;inset:0;background:#000;z-index:100;display:none;flex-direction:column} #camara.on{display:flex} #video{flex:1;width:100%;object-fit:cover} #camara .controles{padding:14px;padding-bottom:calc(env(safe-area-inset-bottom) + 14px); display:flex;gap:9px;background:#000;z-index:2} #camara .controles button{height:48px !important;min-height:48px !important;font-size:13px !important} /* ---------- el cuadro de enfoque ---------- */ #camara .enfoque{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;pointer-events:none;z-index:1} #camara .marco{position:relative;width:78%;max-width:420px;height:30%;max-height:210px; box-shadow:0 0 0 100vmax rgba(0,0,0,.5);border-radius:6px} #camara .marco .esq{position:absolute;width:30px;height:30px;border:4px solid var(--amarillo)} #camara .marco .tl{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:6px 0 0 0} #camara .marco .tr{top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 6px 0 0} #camara .marco .bl{bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 6px} #camara .marco .br{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 6px 0} #camara .marco .linea{position:absolute;left:6px;right:6px;height:3px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--error),transparent); box-shadow:0 0 12px rgba(255,61,61,.9);animation:barrido 2s infinite} @keyframes barrido{ 0% { top:6px } 50% { top:calc(100% - 10px) } 100% { top:6px } } #camara .pista{margin-top:16px;color:#fff;font-size:12.5px;font-weight:700; background:rgba(0,0,0,.6);padding:7px 14px;border-radius:20px; max-width:88%;text-align:center;line-height:1.4} #camara .leido{margin-top:9px;color:#000;background:var(--amarillo);font-size:15px; font-weight:900;font-family:ui-monospace,monospace;padding:8px 16px; border-radius:9px;letter-spacing:1px} /* ---------- el aviso de sin conexion ---------- */ #sinRed{ position:fixed;top:0;left:0;right:0;z-index:200;background:var(--alerta);color:#451a03; text-align:center;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;font-size:13px;font-weight:700; transform:translateY(-100%);transition:transform .3s; } #sinRed.on{transform:none} /* ========================================================================== PANTALLA DE INBOUND: ORDENADA Y APRETADA -------------------------------------------------------------------------- TODO con !important, porque las reglas originales tambien lo usan. Se reduce SOLO el espacio. NO se toca el tamaño de las letras. ========================================================================== */ /* ========================================================================== 1) LOS 4 BOTONES DE ARRIBA: EXACTAMENTE IGUALES -------------------------------------------------------------------------- Grid de 2 columnas perfectas: 1fr 1fr (mismo ancho) y todos el mismo alto. ========================================================================== */ #v-recibir .inb-botones{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; margin-bottom:8px !important; } #v-recibir .inb-botones .ib{ width:100% !important; height:40px !important; min-height:40px !important; max-height:40px !important; padding:0 8px !important; gap:5px !important; border-radius:9px !important; font-size:12px !important; justify-content:center !important; white-space:nowrap !important; overflow:hidden !important; } #v-recibir .ib-reloj{font-size:10px !important;padding:1px 4px !important} /* ========================================================================== 2) EL ESPACIO ENTRE CAMPOS ========================================================================== */ #v-recibir .inb-lb{margin:5px 0 2px !important;line-height:1.25 !important} #v-recibir .inb-in{height:33px !important;min-height:33px !important; padding:0 8px !important;margin:0 !important} #v-recibir .inb-2col{gap:6px !important;margin:0 0 2px 0 !important} #v-recibir .inb-fila{gap:6px !important;margin:0 !important} #v-recibir .inb-sep{margin:8px 0 !important} #v-recibir .inb-tat{padding:4px 7px !important;margin:5px 0 0 0 !important} #v-recibir .inb-card{padding:10px 11px !important} #v-recibir .inb-card-cab{margin-bottom:7px !important;padding-bottom:5px !important} #v-recibir .card{margin-top:8px !important;padding:10px 11px !important} /* ========================================================================== 3) EL REPORTE Y EL BUSCADOR ========================================================================== */ #v-recibir .rep-mini{margin-bottom:7px !important} #v-recibir .rep-cab{padding:7px 10px !important} #v-recibir .rep-cuerpo{padding:8px 10px !important} /* ========================================================================== 4) LA TABLA ========================================================================== */ #v-recibir .tabla-box,#v-recibir .tabla-caja{max-height:200px !important} #v-recibir table th{padding:3.5px 4px !important} #v-recibir table td{padding:2.5px 4px !important} #v-recibir .btn-mini{width:23px !important;height:23px !important; min-height:23px !important;font-size:12px !important} #v-recibir table input.cant,#v-recibir table input.lot, #v-recibir table input.fef,#v-recibir table input.pal{ height:27px !important;min-height:27px !important} /* ========================================================================== 5) GUARDAR + IMPRIMIR, JUNTOS, ABAJO DE LA TABLA ========================================================================== */ #v-recibir .inb-acciones{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; margin-top:9px !important; } #v-recibir .inb-acciones .ib{ width:100% !important; height:40px !important; min-height:40px !important; max-height:40px !important; border-radius:9px !important; font-size:12px !important; } #v-recibir #btnAgregarItem{height:34px !important;min-height:34px !important; margin-top:8px !important} #v-recibir .estado{margin-top:8px !important;padding:6px 9px !important} /* ---- el menu de impresion, cuando se abre ---- */ #v-recibir .menu button{height:34px !important;min-height:34px !important; padding:0 11px !important} /* ---- los demas botones ---- */ #v-recibir .acciones{gap:6px !important;margin-top:8px !important} #v-recibir .acciones.dos{gap:6px !important} #v-recibir .btn-primario,#v-recibir .btn-fantasma,#v-recibir .btn-verde, #v-recibir .btn-alerta,#v-recibir .btn-azul{ height:36px !important;min-height:36px !important;max-height:36px !important; border-radius:9px !important} #v-recibir .b{height:34px !important;min-height:34px !important; max-height:34px !important} /* ========================================================================== 6) LA IMPRESORA ZEBRA: SE VE COMPLETA -------------------------------------------------------------------------- Con 190px de espacio al final, la tarjeta entra entera y no la tapa la barra de navegacion de abajo. ========================================================================== */ #v-recibir.activa{padding-bottom:190px !important} #v-recibir .zebra-card,#v-recibir #zebraCuerpo{margin-bottom:20px !important} /* ---- las tarjetas de resultado ---- */ #v-recibir .card-transito{padding:8px 10px !important;margin:6px 0 8px !important} #v-recibir .chip-dato{padding:2px 6px !important} #v-recibir .guardado-ok{margin:7px 0 !important} #v-recibir .gd-cab{padding:9px 11px !important} #v-recibir .gd-cuerpo{padding:8px 11px !important} #v-recibir .gd-grupo{margin-bottom:9px !important} #v-recibir .gd-fila{padding:2px 0 !important} /* ========================================================================== ARREGLOS DE PANTALLA ========================================================================== */ /* -------------------------------------------------------------------------- 1) LA BARRA DE ABAJO: que el texto ENTRE en su casillero -------------------------------------------------------------------------- "Descuadres", "Reubicar" y "Consultar" no entraban y se cortaban. Solucion: letra mas chica, que no se parta en 2 renglones, y si no entra igual, se puede deslizar de costado. -------------------------------------------------------------------------- */ nav{ display:flex !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; gap:2px !important; padding:0 3px !important; } nav::-webkit-scrollbar{display:none !important} nav button{ flex:1 0 auto !important; min-width:0 !important; padding:0 4px !important; font-size:9px !important; font-weight:800 !important; letter-spacing:0 !important; line-height:1.05 !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; text-transform:none !important; } nav button span{ white-space:nowrap !important; font-size:9px !important; letter-spacing:0 !important; } /* -------------------------------------------------------------------------- 2) LOS CAMPOS MAS BAJOS -------------------------------------------------------------------------- Estaban en 33px y se veian muy altos. Bajan a 30px. Las letras quedan igual. -------------------------------------------------------------------------- */ #v-recibir .inb-in{height:30px !important;min-height:30px !important; padding:0 8px !important} #v-recibir .inb-lb{margin:4px 0 1px !important} #v-recibir .inb-2col{gap:6px !important;margin:0 !important} #v-recibir .inb-fila{gap:6px !important} #v-recibir .inb-sep{margin:6px 0 !important} #v-recibir .inb-card{padding:9px 10px !important} #v-recibir .inb-card-cab{margin-bottom:5px !important;padding-bottom:4px !important} /* los campos de la tabla, mas bajos tambien */ #v-recibir table input.cant,#v-recibir table input.lot, #v-recibir table input.fef,#v-recibir table input.pal{ height:25px !important;min-height:25px !important;font-size:11px !important} #v-recibir table th{padding:3px 4px !important} #v-recibir table td{padding:2px 4px !important} #v-recibir .tabla-box,#v-recibir .tabla-caja{max-height:190px !important} /* -------------------------------------------------------------------------- 3) LOS BOTONES IGUALADOS -------------------------------------------------------------------------- */ #v-recibir .inb-botones, #v-recibir .inb-acciones{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; align-items:stretch !important; } #v-recibir .inb-botones > *, #v-recibir .inb-acciones > *{ width:100% !important; min-width:0 !important; height:40px !important; min-height:40px !important; max-height:40px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; padding:0 6px !important; border-radius:10px !important; font-size:11.5px !important; font-weight:900 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* ========================================================================== 4) EFECTO CRISTAL Y BRILLO EN LOS BOTONES IMPORTANTES -------------------------------------------------------------------------- Los botones que HACEN algo llevan: · un brillo arriba (como si les diera la luz) · una sombra abajo · un borde clarito · y al tocarlos se hunden ========================================================================== */ /* ---- el boton de INICIAR descarga (el importante de Recibir) ---- */ #v-recibir #btnDescarga, .ib-verde{ background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #10b981, #047857) !important; border:1px solid rgba(255,255,255,.30) !important; box-shadow: 0 3px 10px rgba(16,185,129,.35), 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.45) !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.30) !important; } /* ---- GUARDAR ---- */ #v-recibir #btnGuardarServidor{ background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #3b82f6, #1d4ed8) !important; border:1px solid rgba(255,255,255,.30) !important; box-shadow: 0 3px 10px rgba(59,130,246,.40), 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.45) !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.30) !important; } /* ---- IMPRIMIR ---- */ #v-recibir #btnMenuImprimir:not(:disabled){ background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #a855f7, #6d28d9) !important; border:1px solid rgba(255,255,255,.30) !important; box-shadow: 0 3px 10px rgba(168,85,247,.40), 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.45) !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.30) !important; } /* ---- ESCANEAR y los azules ---- */ .ib-azul{ background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.04) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #3b82f6, #1e40af) !important; border:1px solid rgba(255,255,255,.26) !important; box-shadow: 0 3px 9px rgba(37,99,235,.35), 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.40) !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.28) !important; } /* ---- y los grises: mas discretos, sin brillo fuerte ---- */ .ib-gris{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15)) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10) !important; } /* ---- el boton grande de cada pantalla (los primarios) ---- */ .btn-primario,.btn-verde{ background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #3b82f6, #1d4ed8) !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow: 0 3px 10px rgba(59,130,246,.38), 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.42) !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.28) !important; } .btn-alerta{ background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #ef4444, #b91c1c) !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow: 0 3px 10px rgba(239,68,68,.38), 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.42) !important; color:#fff !important; } /* ---- al tocarlos se HUNDEN (se siente que responden) ---- */ .ib-verde:active,.ib-azul:active,.btn-primario:active,.btn-alerta:active, #v-recibir #btnDescarga:active,#v-recibir #btnGuardarServidor:active, #v-recibir #btnMenuImprimir:active{ transform:translateY(1px) scale(.985) !important; box-shadow:0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.30) !important; filter:brightness(.96) !important; } /* ---- y los importantes laten suave ---- */ @keyframes brilla{ 0%,100%{box-shadow:0 3px 10px rgba(16,185,129,.35),0 1px 2px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.45)} 50% {box-shadow:0 3px 16px rgba(16,185,129,.65),0 1px 2px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.55)} } #v-recibir #btnDescarga.rojo{ background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, #ef4444, #b91c1c) !important; animation:brilla 1.4s ease-in-out infinite !important; } /* ========================================================================== EL DESNIVEL ENTRE EL BOTON VERDE Y EL AZUL -------------------------------------------------------------------------- INICIAR es un