/* VERSION 10.7 */ :root{--azul:#008FBE;--verde:#00A887;--rojo:#c0392b;--ambar:#b06a00;--morado:#8e6fb5; --gris-claro:#f4f7f8;--gris-texto:#2b2b2b;--borde:#d8e2e4;} *{box-sizing:border-box;} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:var(--gris-claro);color:var(--gris-texto);} header{background:linear-gradient(135deg,var(--azul),var(--verde));color:#fff;padding:20px 18px 0;text-align:center;} header h1{margin:0;font-size:1.25rem;font-weight:700;} header p{margin:4px 0 14px;font-size:0.83rem;opacity:0.95;} /* El ancho útil crece con la pantalla. En monitor grande caben tablas completas sin scroll horizontal; en celular sigue siendo una columna. El tope de 1400 evita líneas de texto imposibles de leer. */ main{max-width:1400px;margin:0 auto;padding:16px;} @media(min-width:1100px){ main{padding:20px 32px;} } /* Los bloques de sólo lectura sí conviene acotarlos: una instrucción de 1400px de ancho no se lee, se escanea mal. */ main > .card.instrucciones{max-width:900px;} .card{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);} .instrucciones{font-size:0.82rem;color:#556;line-height:1.5;} .instrucciones b{color:var(--azul);} label{display:block;font-size:0.74rem;font-weight:600;color:#667;margin:9px 0 3px;} input,select,textarea{width:100%;padding:9px;border:1px solid var(--borde);border-radius:8px;font-size:0.9rem;} .btn{width:100%;padding:12px;border:none;border-radius:10px;font-weight:700;font-size:0.92rem; cursor:pointer;color:#fff;margin-top:11px;background:var(--verde);} .btn.azul{background:var(--azul);} .btn.rojo{background:var(--rojo);} .btn.gris{background:#7a8b93;} .estado{font-size:0.82rem;margin-top:9px;color:#556;line-height:1.5;} .vacio{text-align:center;color:#889;padding:28px 10px;font-size:0.9rem;line-height:1.5;} .folio{font-weight:800;color:var(--azul);font-size:1.02rem;} .meta{font-size:0.78rem;color:#667;margin:4px 0 8px;line-height:1.45;} .chip{display:inline-block;background:#e6f2f7;color:var(--azul);font-size:0.68rem; padding:2px 9px;border-radius:20px;font-weight:700;vertical-align:middle;} .chip.rojo{background:#fce4e4;color:var(--rojo);} .chip.verde{background:#e6f7f2;color:var(--verde);} .chip.ambar{background:#fff4e0;color:var(--ambar);} table.t{width:100%;border-collapse:collapse;font-size:0.81rem;margin-bottom:8px;} table.t th{text-align:left;color:#889;font-weight:600;padding:5px 3px;border-bottom:1px solid var(--borde);} table.t td{padding:6px 3px;border-bottom:1px solid var(--gris-claro);vertical-align:middle;} table.t input{width:70px;padding:6px;font-size:0.82rem;} .aviso{font-size:0.78rem;padding:9px 11px;border-radius:9px;margin-top:8px;line-height:1.45; background:#fff4e0;color:var(--ambar);} .aviso.rojo{background:#fce4e4;color:var(--rojo);} .aviso.verde{background:#e6f7f2;color:#00745e;} .tabs{display:flex;gap:8px;margin-bottom:13px;} .tab{flex:1;text-align:center;padding:10px;border-radius:10px;font-weight:700;font-size:0.84rem; background:#fff;color:#667;cursor:pointer;border:1px solid var(--borde);} .tab.activo{background:var(--azul);color:#fff;border-color:var(--azul);} /* ---------- Buscador de productos ---------- */ .bsc{position:relative;} .bsc-input{ width:100%;padding:9px 30px 9px 9px;border:1px solid var(--borde); border-radius:8px;font-size:0.9rem;background:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center;background-size:15px; } .bsc-input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 2px rgba(0,143,190,0.13);} /* El panel se escapa del ancho de su columna: en celular la caja del producto mide ~40% de la pantalla y los nombres largos no cabían. */ .bsc-panel{ display:none;position:absolute;top:100%;left:0;z-index:60; width:max(100%, 78vw); max-width:calc(100vw - 32px); background:#fff;border:1px solid var(--borde);border-radius:10px; margin-top:3px;max-height:62vh;overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.18); } @media (min-width:700px){ .bsc-panel{width:max(100%, 420px);max-width:520px;} } .bsc-panel.abierto{display:block;} .bsc-item{ padding:11px 12px;cursor:pointer;border-bottom:1px solid var(--gris-claro); display:flex;justify-content:space-between;align-items:center;gap:10px; } .bsc-item:last-child{border-bottom:none;} .bsc-item:hover,.bsc-item.marcado{background:#eef7fa;} .bsc-nom{ font-size:0.88rem;font-weight:600;color:var(--gris-texto);line-height:1.35; overflow-wrap:anywhere; /* nombres largos parten, no desbordan */ } .bsc-extra{ font-size:0.72rem;color:#889;white-space:nowrap;text-align:right;flex-shrink:0; font-variant-numeric:tabular-nums; } .bsc-extra.sinprecio{color:var(--rojo);font-weight:700;} .bsc-vacio{padding:12px;font-size:0.79rem;color:#889;text-align:center;} /* ---------- Identidad: logo ---------- */ /* El logo va sobre el degradado azul-verde, así que lleva placa blanca para que el símbolo conserve sus colores en vez de perderse. */ /* ---------- Marcas de pendiente ---------- */ /* Ámbar = hay trabajo por hacer aquí. Rojo = requiere atención hoy. */ .pendiente{ border-left:5px solid var(--ambar) !important; background:linear-gradient(90deg,#fff8ea 0%,#fffdf8 55%) !important; } .pendiente-alto{ border-left:5px solid var(--rojo) !important; background:linear-gradient(90deg,#fdeeee 0%,#fffbfb 55%) !important; } .marca-pendiente{ display:inline-block;background:#fff4e0;color:var(--ambar); font-size:0.68rem;font-weight:800;padding:2px 9px;border-radius:20px; vertical-align:middle;margin-left:6px;letter-spacing:0.3px; } .marca-pendiente.alto{background:#fce4e4;color:var(--rojo);} /* ============================================================ PANTALLAS GRANDES En celular todo va en una columna. En computadora se aprovecha el ancho con varias columnas de tarjetas, en vez de dejar la mitad de la pantalla vacía. ============================================================ */ @media (min-width: 900px){ /* Las listas de tarjetas fluyen en columnas */ .grid-auto{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:12px; align-items:start; } .grid-auto > .card{margin-bottom:0;} /* Formularios largos: dos columnas */ .fila2{grid-template-columns:1fr 1fr;} header{padding:24px 18px 0;} header h1{font-size:1.4rem;} } @media (min-width: 1400px){ .grid-auto{grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));} } /* ============================================================ CINTILLO DE TAREA COMPLETADA ============================================================ */ .cintillo{ display:flex;align-items:flex-start;gap:11px; background:#e6f7f2;color:#00614e;border-left:5px solid var(--verde); border-radius:12px;padding:14px 15px;margin-bottom:12px; font-size:0.86rem;line-height:1.55; animation:entra .28s ease-out; box-shadow:0 2px 10px rgba(0,168,135,0.16); } .cintillo .ic{font-size:1.3rem;line-height:1;flex-shrink:0;} .cintillo b{display:block;font-size:0.92rem;margin-bottom:2px;} .cintillo .cerrar{ margin-left:auto;background:none;border:none;color:#00614e; font-size:1.1rem;cursor:pointer;opacity:0.55;padding:0 2px; } @keyframes entra{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}} /* ---------- Buscador: menú de categorías ---------- */ .bsc-titulo{ padding:9px 12px 7px;font-size:0.7rem;font-weight:800;color:#8a959a; text-transform:uppercase;letter-spacing:0.6px; background:var(--gris-claro);position:sticky;top:0;z-index:1; } .bsc-volver{ padding:11px 12px;font-size:0.82rem;font-weight:700;color:var(--azul); cursor:pointer;border-bottom:1px solid var(--borde); background:#fff;position:sticky;top:0;z-index:2; } .bsc-volver:hover{background:#eef7fa;} .bsc-cat{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:13px 12px;cursor:pointer;border-bottom:1px solid var(--gris-claro); } .bsc-cat:last-child{border-bottom:none;} .bsc-cat:hover{background:#eef7fa;} .bsc-cat-nom{font-size:0.89rem;font-weight:700;color:var(--gris-texto);} .bsc-cat-num{ font-size:0.72rem;font-weight:700;color:#667;background:var(--gris-claro); padding:3px 10px;border-radius:20px;flex-shrink:0; } .bsc-cat:hover .bsc-cat-num{background:#d9eef5;color:var(--azul);} .bsc-tag{ display:inline-block;background:var(--gris-claro);color:#889; font-size:0.65rem;font-weight:700;padding:1px 7px;border-radius:20px;margin-left:5px; } /* ---------- Navegación por categorías ---------- */ .bsc-cat{ position:absolute;right:2px;top:2px;height:calc(100% - 4px);width:34px; background:var(--gris-claro);border:none;border-radius:0 8px 8px 0; color:var(--azul);font-size:1rem;cursor:pointer;line-height:1; } .bsc-cat:hover{background:#e6f2f7;} /* El buscador deja espacio al botón de categorías */ .bsc .bsc-input{padding-right:64px;} .bsc-input{background-position:right 40px center;} .cat-panel{ display:none;position:absolute;top:100%;left:0;z-index:70; width:max(100%, 78vw);max-width:calc(100vw - 32px); background:#fff;border:1px solid var(--borde);border-radius:10px; margin-top:3px;max-height:62vh;overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.18); } .cat-panel.abierto{display:block;} @media (min-width:700px){ .cat-panel{width:max(100%, 420px);max-width:520px;} } .cat-tit{ position:sticky;top:0;background:var(--azul);color:#fff; padding:10px 12px;font-size:0.79rem;font-weight:800; letter-spacing:0.4px;display:flex;align-items:center;gap:8px; } .cat-atras{ background:rgba(255,255,255,0.22);border:none;color:#fff; width:24px;height:24px;border-radius:6px;font-size:1.05rem; cursor:pointer;line-height:1;flex-shrink:0; } .cat-item{ padding:12px;cursor:pointer;border-bottom:1px solid var(--gris-claro); display:flex;justify-content:space-between;align-items:center;gap:10px; font-size:0.87rem; } .cat-item:last-child{border-bottom:none;} .cat-item:hover{background:#eef7fa;} .cat-item span:first-child{overflow-wrap:anywhere;font-weight:600;} .cat-num{ font-size:0.73rem;color:#889;white-space:nowrap;flex-shrink:0; background:var(--gris-claro);padding:3px 9px;border-radius:20px;font-weight:700; } /* ============================================================ INTERACCIÓN CON BOTONES Un botón que responde al toque confirma que se registró el clic. En celular importa más que en computadora: sin señal visual la gente presiona dos veces y duplica la operación. ============================================================ */ .btn, button.accion, .agregar, .btn-quitar, .motivo-chip, .tab, a.mod { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn:hover, button.accion:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); filter: brightness(1.06); } .btn:active, button.accion:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 6px rgba(0,0,0,0.14); filter: brightness(0.96); } .btn:disabled, button.accion:disabled { transform: none; box-shadow: none; filter: none; cursor: not-allowed; } .agregar:hover { background: #e6f2f7; border-color: var(--verde); transform: translateY(-1px); } .btn-quitar:hover { background: #f9c9c9; transform: scale(1.06); } .motivo-chip:hover { transform: translateY(-1px); } .tab:hover { filter: brightness(0.97); } /* El botón activo mantiene un contorno visible al navegar con teclado */ .btn:focus-visible, button.accion:focus-visible, a.mod:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; } /* ============================================================ IMPORTES: nunca se parten Los centavos saltando al siguiente renglón hacían ilegible la columna de precios en celular. ============================================================ */ .importe, .total-box span, .kpi-v, .an-m, .act-num, .tabla-lote .num, .bsc-extra, .cat-num, td.num { white-space: nowrap; font-variant-numeric: tabular-nums; } .fila-producto .importe { min-width: 76px; text-align: right; } .disp { white-space: normal; } /* ============================================================ RETROALIMENTACIÓN AL TOCAR Un botón que no responde al dedo se presiona dos veces, y en este sistema eso puede significar dos pedidos. ============================================================ */ .btn, button.accion, .agregar, .tab, a.mod, .motivo-chip, .act-btn{ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn:hover, button.accion:hover, .agregar:hover{ filter: brightness(1.07); box-shadow: 0 4px 14px rgba(0,0,0,0.16); transform: translateY(-1px); } .btn:active, button.accion:active, .agregar:active, a.mod:active{ transform: scale(0.975); box-shadow: 0 1px 4px rgba(0,0,0,0.12); filter: brightness(0.97); } .btn:disabled, button.accion:disabled{ transform: none; filter: none; box-shadow: none; cursor: not-allowed; } .tab:hover{ background: #e6f2f7; } .motivo-chip:active{ transform: scale(0.94); } /* Botón trabajando: evita el segundo clic por impaciencia */ .btn.cargando{ position: relative; color: transparent !important; pointer-events: none; } .btn.cargando::after{ content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2.5px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation: girar .7s linear infinite; } @keyframes girar{ to{ transform: rotate(360deg); } } /* ---------- Importes: los centavos no se parten ---------- */ .importe, .num, .total-box span, .kpi-v, .dia-kpi-v, td[class*="num"], .an-m, .tramo-tag{ white-space: nowrap; font-variant-numeric: tabular-nums; } /* ============================================================ MOVIMIENTO Discreto y con propósito: confirma que algo respondió. Se desactiva para quien pidió menos animación en su sistema. ============================================================ */ /* Las animaciones del logo se retiraron: dejaban selectores rotos y un selector inválido hace que el navegador descarte todo lo que viene después, incluida la regla del propio logo. */ /* Los módulos entran escalonados: se lee de arriba a abajo */ a.mod{ opacity:1; animation: entraMod .34s ease-out backwards; } @keyframes entraMod{ from{ opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } } a.mod:nth-child(1){animation-delay:.02s} a.mod:nth-child(2){animation-delay:.05s} a.mod:nth-child(3){animation-delay:.08s} a.mod:nth-child(4){animation-delay:.11s} a.mod:nth-child(5){animation-delay:.14s} a.mod:nth-child(6){animation-delay:.17s} a.mod:nth-child(7){animation-delay:.20s} a.mod:nth-child(8){animation-delay:.23s} a.mod:nth-child(9){animation-delay:.26s} a.mod:nth-child(n+10){animation-delay:.29s} /* El icono y el estado de cada módulo: ver MENÚ PRINCIPAL · v14.7 */ .pill{ opacity:1; animation: aparecePill .4s cubic-bezier(.34,1.6,.64,1) backwards .3s; } @keyframes aparecePill{ from{ opacity:0; transform: scale(.4); } to { opacity:1; transform: none; } } /* Las tarjetas de contenido entran suave */ main > .card, .ped, .emb{ opacity:1; animation: entraCard .3s ease-out backwards; } @keyframes entraCard{ from{ opacity:0; transform: translateY(7px); } to { opacity:1; transform: none; } } /* Quien prefiere menos movimiento, no lo tiene */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* Una línea de luz cruza el encabezado, muy despacio */ header{ position:relative; overflow:hidden; } header::after{ content:''; position:absolute; inset:0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%); transform: translateX(-100%); animation: brilloHeader 9s ease-in-out 2.5s infinite; pointer-events:none; } @keyframes brilloHeader{ 0% { transform: translateX(-100%); } 55% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce){ body.menu-principal{ animation:none; } header::after{ animation:none; opacity:0; } } /* ---------- Paso siguiente dentro del cintillo ---------- */ .paso-sig{ margin:7px 0 5px;padding:8px 10px;background:rgba(255,255,255,.65); border-radius:9px;font-size:0.81rem;line-height:1.5; display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .paso-lbl{font-weight:800;text-transform:uppercase;font-size:0.66rem;letter-spacing:.6px;opacity:.75;} .paso-ir{ margin-left:auto;background:var(--verde);color:#fff;text-decoration:none; font-weight:700;font-size:0.76rem;padding:5px 12px;border-radius:20px;white-space:nowrap; } .paso-ir:hover{filter:brightness(1.08);} /* ---------- Punto 10: logos más grandes ---------- */ @media (min-width:700px){ } /* ============================================================ LOGO — una sola definición, sin animación que pueda ocultarlo ============================================================ */ .logo{ height:52px; width:auto; display:block; margin:0 auto 8px; background:#fff; border-radius:12px; padding:7px 12px; box-shadow:0 2px 7px rgba(0,0,0,0.16); opacity:1; /* nunca invisible, pase lo que pase */ transition:transform .2s ease; } .logo:hover{ transform:scale(1.04); } .logo-grande{ height:112px; width:auto; display:block; margin:0 auto 14px; background:#fff; border-radius:18px; padding:12px 20px; box-shadow:0 3px 12px rgba(0,0,0,0.14); opacity:1; } @media (min-width:700px){ .logo{ height:62px; } .logo-grande{ height:132px; } } /* ---------- Barra de módulos hermanos ---------- */ .hermanos{ display:flex;gap:6px;overflow-x:auto;padding:3px 0 10px; -webkit-overflow-scrolling:touch; } .herm{ flex-shrink:0;padding:8px 15px;border-radius:20px; font-size:0.82rem;font-weight:700;text-decoration:none; background:#fff;color:var(--azul);border:1px solid var(--borde); box-shadow:0 1px 4px rgba(0,0,0,0.06);white-space:nowrap; } .herm:hover{background:#eef7fa;} .herm.activo{background:var(--azul);color:#fff;border-color:var(--azul);} /* ============================================================ BARRA DE SESIÓN — Menú y Salir separados y distinguibles Estaban pegados y parecían el mismo enlace. ============================================================ */ .user-bar{ display:flex;align-items:center;gap:10px; background:rgba(255,255,255,.92);padding:9px 14px; font-size:0.85rem;color:var(--gris-texto); border-radius:0 0 12px 12px;margin-bottom:12px; box-shadow:0 1px 5px rgba(0,0,0,0.07); } .user-bar > span:first-child{ flex:1; min-width:0; } /* Dentro del encabezado (todos los módulos) van sobre el degradado */ .bar-acciones{ display:flex; gap:8px; flex-shrink:0; } .bar-btn{ display:inline-flex;align-items:center; padding:6px 15px;border-radius:20px;font-size:0.79rem; font-weight:700;text-decoration:none !important;white-space:nowrap; transition:filter .15s, transform .12s; } .bar-btn:active{ transform:scale(.95); } .bar-menu{ background:rgba(255,255,255,.92); color:var(--azul) !important; } .bar-menu:hover{ background:#fff; } .bar-salir{ background:rgba(192,57,43,.9); color:#fff !important; } .bar-salir:hover{ background:#c0392b; } /* En el menú principal la barra es blanca: se invierten */ .user-bar .bar-menu{ background:#e6f2f7; } .user-bar .bar-salir{ background:#fdecea; color:#c0392b !important; } /* ---------- Barra de módulos hermanos: que se vean como botones ---------- */ .hermanos{ display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px; -webkit-overflow-scrolling:touch; } .herm{ flex-shrink:0;padding:9px 17px;border-radius:22px; font-size:0.83rem;font-weight:700;text-decoration:none !important; background:#fff;color:var(--azul) !important; border:1px solid var(--borde); box-shadow:0 1px 4px rgba(0,0,0,0.07); white-space:nowrap;transition:filter .15s, transform .12s; } .herm:visited{ color:var(--azul) !important; } .herm:hover{ background:#eef7fa; } .herm:active{ transform:scale(.96); } .herm.activo{ background:var(--azul);color:#fff !important;border-color:var(--azul); box-shadow:0 2px 8px rgba(0,143,190,.28); } /* ============================================================ BIENVENIDA AL ENTRAR Confirma quién entró y qué puede hacer. Dura menos de 2 segundos: la pantalla se abre decenas de veces al día. ============================================================ */ .bienvenida{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--azul),var(--verde)); animation:bvEntra .3s ease-out; cursor:pointer; } .bienvenida.bv-sale{ animation:bvSale .4s ease-in forwards; } @keyframes bvEntra{ from{opacity:0;} to{opacity:1;} } @keyframes bvSale{ to{opacity:0;transform:scale(1.04);} } .bv-caja{ text-align:center; padding:24px; } .bv-logo{ height:96px;width:auto;display:block;margin:0 auto 20px; background:#fff;border-radius:22px;padding:14px 20px; box-shadow:0 8px 30px rgba(0,0,0,.22); animation:bvLogo .65s cubic-bezier(.34,1.5,.64,1) both; } @keyframes bvLogo{ from{ opacity:0; transform:translateY(-18px) scale(.82); } to { opacity:1; transform:none; } } .bv-saludo{ color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:.2px; animation:bvTexto .5s ease-out .18s both; } .bv-rol{ color:rgba(255,255,255,.9);font-size:0.9rem;font-weight:600; margin-top:5px;text-transform:uppercase;letter-spacing:1.6px; animation:bvTexto .5s ease-out .3s both; } .bv-cli{ color:rgba(255,255,255,.82);font-size:0.86rem;margin-top:9px; animation:bvTexto .5s ease-out .42s both; } @keyframes bvTexto{ from{ opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .bienvenida, .bv-logo, .bv-saludo, .bv-rol, .bv-cli{ animation:none; } } /* ---------- Aprovechar el ancho en pantalla grande ---------- */ @media(min-width:1100px){ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;} } /* ============================================================ MENÚ PRINCIPAL · v14.7 Cada módulo es un renglón delgado —icono, nombre, para qué sirve, contador— y los renglones llenan el ancho en columnas. Antes era una tarjeta de 152 px de alto por módulo, y además a lo ancho de toda la pantalla: index.html le ponía display:block en línea al menú y eso anulaba la cuadrícula. En un monitor quedaban cinco módulos visibles y el resto abajo, con más espacio en blanco que contenido. Ahora en el mismo monitor caben todos de un vistazo. ============================================================ */ /* Las fases son columnas que se reparten el ancho. Con 5 fases en un monitor quedan las 5 lado a lado; en tablet 2 o 3; en celular 1. */ .grid-menu{ display:grid;gap:14px 16px;padding:4px 0 28px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:start; } /* Lo que no es una fase ocupa el renglón completo */ .grid-menu > :not(.fase){ grid-column:1/-1; } .fase{ display:flex; flex-direction:column; gap:8px; min-width:0; } /* Encabezado de fase: discreto, sirve de título de la columna */ .grupo{ display:flex;align-items:center;gap:10px; font-size:0.66rem;font-weight:800;letter-spacing:2px; text-transform:uppercase;color:#93a4ac; margin:6px 0 1px 2px; } .grupo::after{ content:'';flex:1;height:1px; background:linear-gradient(90deg,rgba(190,205,212,.8),transparent); } a.mod{ position:relative;isolation:isolate;overflow:hidden; display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:13px; min-height:66px;padding:10px 14px 10px 12px;border-radius:14px; text-decoration:none;color:var(--gris-texto);background:#fff; border:1px solid rgba(200,215,222,.7); border-left:4px solid rgba(0,143,190,.22); box-shadow:0 1px 2px rgba(16,40,50,.04), 0 6px 16px -12px rgba(16,40,50,.28); transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, border-color .18s ease, background .18s ease; } a.mod:hover{ transform:translateY(-2px); border-color:rgba(0,143,190,.35); box-shadow:0 2px 4px rgba(16,40,50,.05), 0 14px 26px -14px rgba(16,40,50,.35); } a.mod:active{transform:translateY(0) scale(.99);} a.mod .ic{ width:40px;height:40px;border-radius:12px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:1.25rem;line-height:1; background:linear-gradient(145deg,#f0f6f8,#e4eef2); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); transition:transform .22s cubic-bezier(.2,.9,.3,1), background .22s; } a.mod:hover .ic{ transform:scale(1.06) rotate(-3deg); background:linear-gradient(145deg,#dcf0f8,#c9e7f3); } .mod-cuerpo{ min-width:0; display:flex; flex-direction:column; gap:2px; } .mod-nombre{ font-weight:800;font-size:0.9rem;line-height:1.2;letter-spacing:-.2px; /* Los nombres largos ("Captura de pedido y cotización") pasan a una segunda línea en vez de cortarse con puntos suspensivos */ overflow-wrap:anywhere; } .mod-desc{ font-size:0.73rem;color:#7d8b92;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* El contador es el dato accionable: a la derecha, donde termina la lectura */ .cuenta{ min-width:30px;height:30px;padding:0 9px;border-radius:15px; background:linear-gradient(140deg,#c47a00,var(--ambar)); color:#fff;font-size:0.88rem;font-weight:800; display:flex;align-items:center;justify-content:center; font-variant-numeric:tabular-nums;letter-spacing:-.3px; box-shadow:0 3px 10px -3px rgba(176,106,0,.55); } .cuenta.urg{ background:linear-gradient(140deg,#d64534,var(--rojo)); box-shadow:0 3px 10px -3px rgba(192,57,43,.55); } /* El borde izquierdo dice el estado. Si todo está en orden el menú se ve tranquilo, y eso también es información. */ a.mod.pendiente{ border-left-color:var(--ambar); background:linear-gradient(90deg,#fffaf1,#fff 55%); } a.mod.urgente{ border-left-color:var(--rojo); background:linear-gradient(90deg,#fff4f2,#fff 55%); box-shadow:0 1px 2px rgba(192,57,43,.06), 0 10px 22px -14px rgba(192,57,43,.45); } /* En celular: una columna, un poco más compacta */ @media(max-width:599px){ .grid-menu{grid-template-columns:1fr;gap:10px;} .fase{gap:7px;} a.mod{min-height:60px;padding:9px 12px 9px 10px;column-gap:11px;} a.mod .ic{width:36px;height:36px;font-size:1.12rem;border-radius:11px;} } @media (prefers-reduced-motion: reduce){ a.mod, a.mod .ic{transition:none;} a.mod:hover, a.mod:hover .ic{transform:none;} } /* ---------- Pestañas: el ancho completo, repartido parejo ---------- */ .tabs{ display:grid;gap:9px;margin-bottom:14px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); max-width:none; } .tabs .tab{ padding:13px 10px;border-radius:12px;text-align:center; font-weight:700;font-size:0.9rem;cursor:pointer; background:#fff;color:var(--azul); border:1px solid var(--borde); transition:background .16s, transform .12s, box-shadow .16s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tabs .tab:hover{background:#f2f9fb;} .tabs .tab:active{transform:scale(.985);} .tabs .tab.activo{ background:var(--azul);color:#fff;border-color:var(--azul); box-shadow:0 3px 12px -4px rgba(0,143,190,.55); } /* ---------- Al elegir un módulo: confirmación visual ---------- */ a.mod{position:relative;} a.mod .onda{ position:absolute;border-radius:50%; background:rgba(0,143,190,.25); transform:scale(0);pointer-events:none; animation:ondaMod .55s ease-out forwards; } @keyframes ondaMod{ to{ transform:scale(2.6); opacity:0; } } a.mod.eligiendo{ transform:scale(.97); border-color:var(--azul); box-shadow:0 0 0 3px rgba(0,143,190,.22), 0 18px 34px -14px rgba(0,143,190,.5); } a.mod.eligiendo .ic{ background:linear-gradient(145deg,var(--azul),#0079a3); color:#fff;transform:scale(1.1); } /* ---------- El logo acompaña la entrada al módulo ---------- La navegación entre páginas deja medio segundo de pantalla en blanco en el que no pasa nada visible. En tablet, con una conexión lenta, ese silencio hace que la persona toque otra vez. El símbolo de la empresa hace de puente: se despega del encabezado, crece hacia el centro y gira sobre su eje mientras carga la página. Es la marca la que hace de indicador de espera, no un aro genérico. Dura 520 ms — lo que tarda la navegación — y no bloquea el clic. */ .velo-logo{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at center, rgba(255,255,255,.94) 0%, rgba(240,246,248,.88) 100%); pointer-events:none; animation:veloEntra .52s ease-out forwards; } .velo-logo img{ width:88px;height:88px;object-fit:contain; filter:drop-shadow(0 10px 22px rgba(0,143,190,.35)); animation:logoViaja .52s cubic-bezier(.34,1.3,.5,1) forwards; } .velo-logo .velo-nombre{ position:absolute;top:calc(50% + 62px);left:0;right:0;text-align:center; font-weight:800;font-size:.9rem;letter-spacing:.4px;color:var(--azul); opacity:0;animation:nombreEntra .52s ease-out .12s forwards; } @keyframes veloEntra{ from{opacity:0;} to{opacity:1;} } @keyframes logoViaja{ 0% { transform:scale(.45) rotate(-24deg); opacity:0; } 55% { transform:scale(1.12) rotate(6deg); opacity:1; } 100%{ transform:scale(1) rotate(0deg); opacity:1; } } @keyframes nombreEntra{ from{opacity:0;transform:translateY(7px);} to{opacity:1;transform:none;} } @media (prefers-reduced-motion: reduce){ a.mod .onda{animation:none;display:none;} a.mod.eligiendo{transform:none;} /* Quien pidió menos movimiento ve el logo quieto, no girando */ .velo-logo, .velo-logo img, .velo-logo .velo-nombre{animation:none;opacity:1;transform:none;} } /* ============================================================ ANIMACIÓN INSTITUCIONAL DE CARGA · v14.7 La marca hace de indicador de espera: el símbolo de la empresa dentro de un aro en el degradado azul → verde que gira. La arma app.js sola, en toda pantalla y en toda consulta. ============================================================ */ /* Barra fija arriba mientras hay una consulta en camino */ /* Tonos oscuros de la misma paleta: el azul y el verde institucionales puros desaparecen sobre el encabezado, que es de esos mismos colores. */ .barra-carga{ position:fixed;top:0;left:0;right:0;height:4px;z-index:10000; overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s ease; background:rgba(0,70,95,.18); } .barra-carga.activa{opacity:1;} .barra-carga::before{ content:'';position:absolute;top:0;bottom:0;left:-45%;width:45%; background:linear-gradient(90deg,transparent,#005f80 25%,#fff 50%,#006b58 75%,transparent); box-shadow:0 0 8px rgba(0,95,128,.5); animation:barraViaja 1.15s cubic-bezier(.45,.05,.55,.95) infinite; } @keyframes barraViaja{ to{ transform:translateX(322%); } } /* Bloque de espera: símbolo al centro, aro girando, texto debajo */ .carga-inst{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;padding:22px 10px;color:#5d7079;font-size:.84rem;font-weight:600; text-align:center; } .carga-logo{ position:relative;flex-shrink:0;width:60px;height:60px; display:flex;align-items:center;justify-content:center; background:#fff;border-radius:50%; box-shadow:0 6px 18px -8px rgba(0,143,190,.45); } .carga-logo::before{ content:'';position:absolute;inset:-3px;border-radius:50%; background:conic-gradient(from 0deg, rgba(0,143,190,0) 0deg, var(--azul) 150deg, var(--verde) 300deg, rgba(0,168,135,0) 360deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); animation:cargaGira .95s linear infinite; } .carga-logo img{ width:38px;height:38px;object-fit:contain; animation:cargaLate 1.9s ease-in-out infinite; } .carga-txt::after{ content:'';display:inline-block;width:1.2em;text-align:left; animation:cargaPuntos 1.2s steps(1,end) infinite; } @keyframes cargaGira{ to{ transform:rotate(360deg); } } @keyframes cargaLate{ 0%,100%{ transform:scale(1); } 50% { transform:scale(.88); } } @keyframes cargaPuntos{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} } /* Versión en línea, para "Registrando...", "Guardando..." */ .carga-inst.mini{ display:inline-flex;flex-direction:row;gap:9px;padding:2px 0; font-size:inherit;color:#4d6570;text-align:left; } .carga-inst.mini .carga-logo{ width:24px;height:24px;box-shadow:none; } .carga-inst.mini .carga-logo::before{ inset:-2px; -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); } .carga-inst.mini .carga-logo img{ width:16px;height:16px; } /* Dentro de una tarjeta vacía no hace falta el relleno propio */ .vacio .carga-inst{ padding:6px 0; } @media (prefers-reduced-motion: reduce){ .barra-carga::before{ animation:none; left:0; width:100%; opacity:.6; } .carga-logo::before, .carga-logo img, .carga-txt::after{ animation:none; } .carga-txt::after{ content:'...'; } } /* ---------- Eliminar lo atorado (sólo master, v14.8) ---------- */ .zona-eliminar{margin-top:10px;} .btn-eliminar{background:none;border:1px dashed #d9a3a3;color:var(--rojo);border-radius:9px; padding:7px 12px;font-size:0.76rem;font-weight:700;cursor:pointer;} .btn-eliminar:hover{background:#fbeeee;} .btn-eliminar.fuerte{background:var(--rojo);color:#fff;border-style:solid;border-color:var(--rojo); width:100%;padding:11px;font-size:0.86rem;margin-top:8px;} .btn-eliminar.neutro{border-color:#c5ced2;color:#667;width:100%;margin-top:6px;} .btn-eliminar:disabled{opacity:.5;cursor:default;} .aviso-elim{margin-top:8px;background:#fdf6f6;border-left:4px solid var(--rojo);border-radius:9px; padding:10px 12px;font-size:0.8rem;color:#445;line-height:1.5;text-align:left;} .aviso-elim.elim-hecho{background:#eef8f4;border-left-color:var(--verde);} .elim-titulo{font-weight:800;color:var(--rojo);margin-bottom:4px;} .elim-lista{margin:4px 0 6px;padding-left:18px;} .elim-si{color:var(--rojo);font-weight:700;} .elim-no{color:#889;} .elim-stock{background:#eef6fa;border-radius:7px;padding:6px 9px;margin:6px 0;} .elim-aviso{color:#9a6200;margin:4px 0;} .elim-bloqueo{color:var(--rojo);font-weight:700;margin:4px 0;} .elim-check{display:flex;gap:8px;align-items:center;margin:8px 0 4px;font-size:0.8rem;} .elim-lbl{display:block;font-size:0.76rem;font-weight:700;margin-top:6px;} .elim-motivo{width:100%;margin:4px 0 0;} .eliminada{opacity:.62;} .card.eliminada{border-left-color:#c5ced2 !important;} /* ---------- Banner fijo al hacer scroll (v14.8) ---------- */ html{ scroll-padding-top:60px; } /* lo que se enfoca no queda debajo del banner */ .banner-fijo{ position:fixed;left:0;right:0;top:0;z-index:900; display:flex;align-items:center;gap:10px;padding:7px 14px; background:linear-gradient(135deg,var(--azul),var(--verde));color:#fff; box-shadow:0 3px 14px -4px rgba(0,0,0,.35); transform:translateY(-120%);transition:transform .22s ease;pointer-events:none; } .banner-fijo.visible{transform:none;pointer-events:auto;} .bf-logo{width:30px;height:30px;border-radius:8px;background:#fff;padding:3px;object-fit:contain;flex:none;} .bf-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;} .bf-txt b{font-size:0.9rem;letter-spacing:.2px;} .bf-txt span{font-size:0.72rem;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bf-arriba{flex:none;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer; background:rgba(255,255,255,.22);color:#fff;font-size:0.72rem;} .bf-arriba:hover{background:rgba(255,255,255,.34);} @media (min-width:900px){ .banner-fijo{padding:8px max(14px, calc(50% - 440px));} } @media (prefers-reduced-motion: reduce){ .banner-fijo{transition:none;} } @media print{ .banner-fijo{display:none;} } /* El atributo hidden tiene que ganarle a cualquier display de una clase. Sin esto,