/* =================================================================== FerreVip - hoja de estilo unica CRITERIO (viene de perder ventas por la interfaz): 1. Tiene que verse PROFESIONAL, no un juguete. Iconos de trazo, no emojis gigantes. Color con moderacion. Bordes finos, no sombras de caricatura. Un ferretero le confia la plata del dia a esto. 2. Pocas cosas, grandes y claras. Si una pantalla necesita que alguien la explique, esta mal hecha. 3. Letra legible y buen contraste: la PC del mostrador es vieja, la pantalla esta lejos y con polvo, y el vendedor tiene apuro. 4. Cero jerga: se dice "Cobrar" y "Me deben", no "Emitir comprobante" ni "Cuentas por cobrar". 5. Se opera con el lector de codigo de barras y el teclado. TEMAS: todo el color sale de variables. Ningun componente sabe si esta en claro u oscuro, por eso cambiar de tema no rompe nada. El tema lo aplica js/tema.js sobre . =================================================================== */ /* ---------- TEMA CLARO (base) ---------- */ :root{ --acento:#c2410c; /* naranja industrial, profundo (no chillon) */ --acento-alto:#ea580c; --acento-tenue:#fff1e9; --acento-borde:#fbcfb4; --ok:#15803d; --ok-tenue:#eaf6ee; --warn:#a16207; --warn-tenue:#fdf6e3; --err:#b42318; --err-tenue:#fdeceb; --info:#1d4ed8; --info-tenue:#eef2ff; --fondo:#f5f6f8; --superficie:#ffffff; --superficie-2:#fafbfc; --superficie-3:#eef0f3; --borde:#e1e4e9; --borde-fuerte:#c9ced6; --txt:#12161c; --txt-2:#3f4854; --txt-3:#6b7482; --barra:#161b22; /* barra superior: oscura en ambos temas */ --barra-txt:#eceff3; --r:12px; --r-sm:9px; --r-lg:16px; --sombra:0 1px 2px rgba(16,24,40,.05); --sombra-md:0 2px 6px rgba(16,24,40,.07); --sombra-lg:0 12px 32px rgba(16,24,40,.16); } /* ---------- TEMA OSCURO ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --acento:#f97316; --acento-alto:#fb923c; --acento-tenue:#2a1710; --acento-borde:#7c3a12; --ok:#4ade80; --ok-tenue:#12251a; --warn:#fbbf24; --warn-tenue:#2a2010; --err:#f87171; --err-tenue:#2b1517; --info:#7aa2f7; --info-tenue:#161d2e; --fondo:#0d1117; --superficie:#161b22; --superficie-2:#1a2029; --superficie-3:#222a35; --borde:#262d38; --borde-fuerte:#3a434f; --txt:#e6edf3; --txt-2:#b6c0cc; --txt-3:#8b95a3; --barra:#010409; --barra-txt:#e6edf3; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-md:0 2px 8px rgba(0,0,0,.45); --sombra-lg:0 14px 36px rgba(0,0,0,.6); } } :root[data-tema="oscuro"]{ --acento:#f97316; --acento-alto:#fb923c; --acento-tenue:#2a1710; --acento-borde:#7c3a12; --ok:#4ade80; --ok-tenue:#12251a; --warn:#fbbf24; --warn-tenue:#2a2010; --err:#f87171; --err-tenue:#2b1517; --info:#7aa2f7; --info-tenue:#161d2e; --fondo:#0d1117; --superficie:#161b22; --superficie-2:#1a2029; --superficie-3:#222a35; --borde:#262d38; --borde-fuerte:#3a434f; --txt:#e6edf3; --txt-2:#b6c0cc; --txt-3:#8b95a3; --barra:#010409; --barra-txt:#e6edf3; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-md:0 2px 8px rgba(0,0,0,.45); --sombra-lg:0 14px 36px rgba(0,0,0,.6); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fondo); color:var(--txt); font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* Precios y cantidades alineados en columna: se leen de un golpe */ .num,.precio,.ti-sub,.total-caja .val,.k-val,input[type=number]{font-variant-numeric:tabular-nums} .ico-svg{display:block;flex:none} /* ---------- Barra superior ---------- */ .topbar{ background:var(--barra); color:var(--barra-txt); padding:11px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(255,255,255,.06); } .topbar h1{font-size:16px;font-weight:650;letter-spacing:-.15px;display:flex;align-items:center;gap:10px} .topbar .marca-ico{ width:29px;height:29px;border-radius:8px;background:var(--acento);color:#fff; display:grid;place-items:center;flex:none; } .topbar .acciones{display:flex;align-items:center;gap:10px} .topbar .user{font-size:13.5px;opacity:.72;font-weight:500} .topbar a.volver,.topbar button.icono{ color:var(--barra-txt);text-decoration:none;font-size:14px;font-weight:600; padding:7px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.08); border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit; } .topbar button.icono{padding:7px} .topbar a.volver:hover,.topbar button.icono:hover{background:rgba(255,255,255,.16)} .wrap{max-width:880px;margin:0 auto;padding:22px 18px} .wrap.ancho{max-width:1360px} /* ---------- Tarjetas ---------- */ .card{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r); box-shadow:var(--sombra);padding:18px;margin-bottom:16px; } .card h2{font-size:15px;margin-bottom:14px;font-weight:650;display:flex;align-items:center;gap:8px;color:var(--txt)} .card h2 .ico-svg{color:var(--txt-3)} .seccion-titulo{ font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase; color:var(--txt-3);margin:0 0 12px 2px; } /* ---------- Formularios ---------- */ label{display:block;font-size:13px;color:var(--txt-2);margin:14px 0 6px;font-weight:600} input,select,textarea{ width:100%;padding:11px 13px;border:1px solid var(--borde-fuerte);border-radius:var(--r-sm); font-size:15.5px;background:var(--superficie);color:var(--txt);font-family:inherit; transition:border-color .12s,box-shadow .12s; } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-tenue); } input::placeholder{color:var(--txt-3);opacity:.85} /* Buscador del mostrador: protagonista, pero sobrio */ .buscador{position:relative} .buscador input{ font-size:19px;padding:16px 16px 16px 50px;font-weight:500;border-width:1.5px; border-radius:var(--r); } .buscador .lupa{ position:absolute;left:16px;top:50%;transform:translateY(-50%); color:var(--txt-3);pointer-events:none; } .buscador input:focus + .lupa,.buscador .lupa{transition:color .12s} .buscador .pista{ font-size:12.5px;color:var(--txt-3);margin-top:9px;display:flex;gap:16px;flex-wrap:wrap; } .buscador .pista b{ color:var(--txt-2);font-weight:600;background:var(--superficie-3); padding:1px 6px;border-radius:5px;border:1px solid var(--borde);font-size:12px; } /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; width:100%;padding:12px 16px;border:1px solid transparent;border-radius:var(--r-sm); background:var(--acento);color:#fff;font-size:15px;font-weight:650; cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s; } .btn:hover{background:var(--acento-alto)} .btn:active{transform:translateY(.5px)} .btn:disabled{opacity:.42;cursor:not-allowed} .btn.verde{background:var(--ok)} .btn.verde:hover{filter:brightness(1.1)} .btn.rojo{background:var(--err)} .btn.rojo:hover{filter:brightness(1.1)} .btn.oscuro{background:var(--barra);color:var(--barra-txt)} .btn.sec{background:var(--superficie);color:var(--txt);border-color:var(--borde-fuerte)} .btn.sec:hover{background:var(--superficie-3)} .btn.fantasma{background:transparent;color:var(--txt-2);border-color:transparent} .btn.fantasma:hover{background:var(--superficie-3)} .btn.chico{width:auto;padding:8px 14px;font-size:14px} .btn.mini{width:auto;padding:5px 10px;font-size:13px;border-radius:7px} /* Boton COBRAR: el mas grande de la pantalla, pero solido y serio */ .btn.cobrar{padding:18px;font-size:19px;font-weight:750;letter-spacing:.2px;background:var(--ok)} .btn.cobrar:hover{filter:brightness(1.08)} /* ---------- Accesos del inicio ---------- */ .accesos{display:grid;grid-template-columns:repeat(2,1fr);gap:13px} .acceso{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r); box-shadow:var(--sombra);padding:18px;text-decoration:none;color:var(--txt); display:flex;align-items:center;gap:15px; transition:border-color .14s,box-shadow .14s,transform .14s; } .acceso:hover{border-color:var(--acento-borde);box-shadow:var(--sombra-md);transform:translateY(-1px)} .acceso .marco{ width:44px;height:44px;border-radius:11px;background:var(--superficie-3);color:var(--txt-2); display:grid;place-items:center;flex:none;transition:background .14s,color .14s; } .acceso:hover .marco{background:var(--acento-tenue);color:var(--acento)} .acceso .txt{font-size:16.5px;font-weight:650;display:block;letter-spacing:-.1px} .acceso .sub{font-size:13px;color:var(--txt-3);font-weight:500;display:block;margin-top:2px} /* El acceso principal se distingue por jerarquia, no por gritar */ .acceso.destacado{ grid-column:1 / -1;padding:22px;border-color:var(--acento-borde); background:linear-gradient(180deg,var(--acento-tenue),var(--superficie) 70%); } .acceso.destacado .marco{background:var(--acento);color:#fff} .acceso.destacado .txt{font-size:19px} /* "Mas opciones": plegado, para que la primera impresion sea simple */ .mas{margin-top:20px} .mas summary{ cursor:pointer;color:var(--txt-3);font-size:14px;font-weight:600; padding:11px;text-align:center;list-style:none;border-radius:var(--r-sm); } .mas summary::-webkit-details-marker{display:none} .mas summary:hover{background:var(--superficie);color:var(--txt)} .mas .lista-mas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px} .mas .lista-mas a{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-sm); padding:13px 10px;text-decoration:none;color:var(--txt-2);font-size:14px;font-weight:600; display:flex;align-items:center;gap:9px; } .mas .lista-mas a:hover{border-color:var(--acento-borde);color:var(--acento)} .mas .lista-mas a .ico-svg{color:var(--txt-3)} .mas .lista-mas a:hover .ico-svg{color:var(--acento)} /* ---------- Mostrador ---------- */ .mostrador{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start} .col-ticket{position:sticky;top:80px} /* ---------- Resultados de busqueda ---------- */ .resultado{ display:flex;align-items:center;gap:14px;padding:13px 15px;background:var(--superficie); border:1px solid var(--borde);border-radius:var(--r-sm);margin-bottom:8px; cursor:pointer;transition:border-color .1s,background .1s; } .resultado:hover{border-color:var(--borde-fuerte)} .resultado.sel{border-color:var(--acento);background:var(--acento-tenue)} .resultado .info{flex:1;min-width:0} .resultado .nom{font-weight:640;font-size:15.5px} .resultado .det{font-size:13px;color:var(--txt-3);margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .resultado .precio{font-size:18px;font-weight:700;white-space:nowrap;text-align:right} .resultado .precio small{display:block;font-size:11.5px;color:var(--txt-3);font-weight:600;margin-top:1px} /* ---------- Ticket ---------- */ .ticket-item{display:flex;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid var(--borde)} .ticket-item:last-child{border-bottom:none} .ticket-item .ti-info{flex:1;min-width:0} .ticket-item .ti-nom{font-weight:620;font-size:14.5px;line-height:1.35} .ticket-item .ti-calc{font-size:12.5px;color:var(--txt-3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ticket-item .ti-sub{font-weight:700;font-size:15px;white-space:nowrap} .ticket-item input.cant{ width:78px;padding:7px;text-align:center;font-size:15px;font-weight:650;border-radius:7px; } .ticket-item .btn.mini{padding:4px 8px} .total-caja{ background:var(--superficie-3);border:1px solid var(--borde); border-radius:var(--r);padding:15px 18px;margin:15px 0; display:flex;justify-content:space-between;align-items:baseline; } .total-caja .lbl{font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--txt-3);text-transform:uppercase} .total-caja .val{font-size:31px;font-weight:760;letter-spacing:-.8px;color:var(--txt)} /* ---------- Etiquetas de estado ---------- */ .badge{ display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px; font-size:12px;font-weight:650;border:1px solid transparent;white-space:nowrap; } .badge.ok{background:var(--ok-tenue);color:var(--ok);border-color:var(--ok-tenue)} .badge.warn{background:var(--warn-tenue);color:var(--warn)} .badge.cero{background:var(--err-tenue);color:var(--err)} .badge.info{background:var(--info-tenue);color:var(--info)} .badge.mayor{background:var(--acento-tenue);color:var(--acento);border-color:var(--acento-borde)} /* ---------- Varios ---------- */ .grid{display:grid;gap:11px} .grid.cols2{grid-template-columns:1fr 1fr} .grid.cols3{grid-template-columns:repeat(3,1fr)} .fila{display:flex;align-items:center;justify-content:space-between;gap:12px} .center{text-align:center} .muted{color:var(--txt-3);font-size:13.5px} .empty{text-align:center;color:var(--txt-3);padding:34px 18px;font-size:14px} .empty .ico-svg{margin:0 auto 12px;color:var(--borde-fuerte)} .kpi{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);padding:17px} .kpi .k-val{font-size:27px;font-weight:730;letter-spacing:-.6px} .kpi .k-lbl{font-size:13px;color:var(--txt-3);font-weight:600;margin-top:2px} .kpi.alerta .k-val{color:var(--err)} /* ---------- Login ---------- */ .login-box{max-width:380px;margin:10vh auto} .login-marca{text-align:center;margin-bottom:24px} .login-marca .ico{ width:60px;height:60px;border-radius:16px;background:var(--acento);color:#fff; display:grid;place-items:center;margin:0 auto 14px;box-shadow:var(--sombra-md); } .login-marca h1{font-size:26px;font-weight:720;letter-spacing:-.5px} .login-marca p{color:var(--txt-3);font-size:14px;margin-top:2px} /* ---------- Toast ---------- */ .toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px); background:var(--barra);color:var(--barra-txt);padding:13px 20px;border-radius:var(--r); font-size:14.5px;font-weight:600;opacity:0;transition:.22s;z-index:60; box-shadow:var(--sombra-lg);max-width:90vw;border:1px solid rgba(255,255,255,.08); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- Modal ---------- */ .modal{ position:fixed;inset:0;background:rgba(8,11,16,.62);z-index:70; display:none;align-items:center;justify-content:center;padding:18px; backdrop-filter:blur(2px); } .modal.abierto{display:flex} .modal .caja{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-lg); padding:22px;width:100%;max-width:440px;box-shadow:var(--sombra-lg); max-height:90vh;overflow:auto; } .modal h3{font-size:18px;font-weight:700;margin-bottom:4px} /* Medios de pago */ .pagos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px} .pago{ border:1px solid var(--borde-fuerte);border-radius:var(--r-sm);padding:12px 6px; text-align:center;cursor:pointer;background:var(--superficie); font-weight:600;font-size:13.5px;color:var(--txt-2); display:flex;flex-direction:column;align-items:center;gap:6px; transition:border-color .1s,background .1s,color .1s; } .pago:hover{border-color:var(--borde-fuerte);background:var(--superficie-3)} .pago.sel{border-color:var(--ok);background:var(--ok-tenue);color:var(--ok)} /* Selector de comprobante */ .opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .opcion{ border:1px solid var(--borde-fuerte);border-radius:var(--r-sm);padding:11px 8px; text-align:center;cursor:pointer;background:var(--superficie);color:var(--txt-2); font-weight:600;font-size:14px;font-family:inherit;transition:border-color .1s,background .1s,color .1s; } .opcion:hover{background:var(--superficie-3)} .opcion.sel{border-color:var(--acento);background:var(--acento-tenue);color:var(--acento)} /* =================================================================== MODO CELULAR — pantalla de conteo en el deposito Criterio: se usa parado, con una mano, con guantes y a contraluz. Botones grandes, contraste fuerte, nada de precision fina. =================================================================== */ .movil{max-width:520px;margin:0 auto;padding:14px 14px 90px} .movil .card{padding:15px} /* Cabecera fija con el avance: siempre a la vista mientras se cuenta */ .mv-avance{ position:sticky;top:52px;z-index:15;background:var(--superficie); border:1px solid var(--borde);border-radius:var(--r);padding:12px 15px; margin-bottom:13px;box-shadow:var(--sombra); } .mv-avance .fila{align-items:baseline} .mv-avance .n{font-size:25px;font-weight:800;letter-spacing:-.6px} .mv-barra{height:7px;background:var(--superficie-3);border-radius:99px;margin-top:9px;overflow:hidden} .mv-barra i{display:block;height:100%;background:var(--ok);transition:width .3s} /* Boton gigante de escanear */ .mv-escanear{ width:100%;padding:20px;border:none;border-radius:var(--r); background:var(--acento);color:#fff;font-family:inherit;font-size:19px; font-weight:750;cursor:pointer;display:flex;align-items:center; justify-content:center;gap:11px; } .mv-escanear:active{filter:brightness(.93)} .mv-escanear.off{background:var(--superficie-3);color:var(--txt-3)} /* Teclado numerico propio: el del celular tapa media pantalla */ .mv-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px} .mv-tecla{ padding:18px 0;border:1px solid var(--borde-fuerte);border-radius:var(--r-sm); background:var(--superficie);font-family:inherit;font-size:22px;font-weight:700; color:var(--txt);cursor:pointer; } .mv-tecla:active{background:var(--superficie-3)} .mv-tecla.accion{background:var(--superficie-3);font-size:16px;font-weight:650} .mv-tecla.ok{background:var(--ok);color:#fff;border-color:var(--ok)} .mv-cant{ width:100%;text-align:center;font-size:38px;font-weight:800;padding:14px; border:2px solid var(--acento);border-radius:var(--r);background:var(--superficie); color:var(--txt);letter-spacing:-1px; } /* Ficha del producto recien leido */ .mv-prod{ background:var(--acento-tenue);border:1px solid var(--acento-borde); border-radius:var(--r);padding:13px 15px;margin-bottom:13px; } .mv-prod .nom{font-weight:700;font-size:16px;line-height:1.3} .mv-prod .det{font-size:13px;color:var(--txt-2);margin-top:4px} /* Lo ya contado */ .mv-item{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:11px 0;border-bottom:1px solid var(--borde); } .mv-item:last-child{border-bottom:none} .mv-item .n{font-weight:640;font-size:14.5px;line-height:1.3} .mv-item .s{font-size:12.5px;color:var(--txt-3);margin-top:2px} /* Barra de acciones fija abajo */ .mv-pie{ position:fixed;left:0;right:0;bottom:0;z-index:20; background:var(--superficie);border-top:1px solid var(--borde); padding:11px 14px;display:flex;gap:9px; padding-bottom:calc(11px + env(safe-area-inset-bottom)); } .mv-pie .btn{margin:0} /* ---------- Escaner de camara ---------- */ .escaner{position:fixed;inset:0;z-index:90;background:#000;display:none} .escaner.abierto{display:block} .esc-video{width:100%;height:100%;object-fit:cover} .esc-marco{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:78%;max-width:340px;height:180px;border:3px solid rgba(255,255,255,.9); border-radius:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45); } .esc-linea{ position:absolute;left:6px;right:6px;top:50%;height:2px;background:#f97316; box-shadow:0 0 8px #f97316;animation:escaneo 1.8s ease-in-out infinite; } @keyframes escaneo{0%,100%{top:12%}50%{top:88%}} .esc-barra{ position:absolute;left:0;right:0;bottom:0;padding:16px; display:flex;align-items:center;justify-content:space-between;gap:12px; background:linear-gradient(transparent,rgba(0,0,0,.8)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); } .esc-txt{color:#fff;font-size:14px;text-align:center;flex:1} .esc-btn{ background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:9px; padding:11px 15px;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer; } .esc-btn.esc-cerrar{background:var(--err)} /* ---------- Pestañas ---------- */ .tabs{ display:flex;gap:3px;border-bottom:1px solid var(--borde);margin-bottom:20px; overflow-x:auto; } .tab{ padding:11px 17px;border:none;background:none;cursor:pointer;font-family:inherit; font-size:14.5px;font-weight:640;color:var(--txt-3);border-bottom:2px solid transparent; white-space:nowrap;display:inline-flex;align-items:center;gap:8px;margin-bottom:-1px; } .tab:hover{color:var(--txt)} .tab.sel{color:var(--acento);border-bottom-color:var(--acento)} .panel{display:none} .panel.sel{display:block} /* ---------- Tablas ---------- */ .tabla{width:100%;border-collapse:collapse;font-size:14.5px} .tabla th{ text-align:left;padding:10px 12px;font-size:12px;font-weight:700; letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3); border-bottom:1px solid var(--borde);white-space:nowrap; } .tabla td{padding:11px 12px;border-bottom:1px solid var(--borde);vertical-align:middle} .tabla tr:last-child td{border-bottom:none} .tabla tbody tr:hover{background:var(--superficie-2)} .tabla td.centro,.tabla th.centro{text-align:center} .tabla .sub{font-size:12.5px;color:var(--txt-3);margin-top:2px} /* Matriz de permisos */ .matriz-wrap{overflow-x:auto} .matriz th.rol{text-align:center;min-width:96px} .matriz td.permiso{min-width:250px} .matriz input[type=checkbox]{width:19px;height:19px;cursor:pointer;accent-color:var(--acento)} /* Aviso / nota destacada */ .nota{ background:var(--acento-tenue);border:1px solid var(--acento-borde); border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;color:var(--txt-2); display:flex;gap:10px;align-items:flex-start;margin-bottom:16px; } .nota .ico-svg{color:var(--acento);flex:none;margin-top:1px} .nota b{color:var(--txt)} /* Fila de politica */ .politica{ display:flex;justify-content:space-between;align-items:center;gap:16px; padding:13px 0;border-bottom:1px solid var(--borde); } .politica:last-child{border-bottom:none} .politica .txt{flex:1;min-width:0} .politica .txt b{font-size:14.5px;font-weight:640;display:block} .politica .txt span{font-size:12.5px;color:var(--txt-3)} .politica .ctrl{flex:none;width:130px} .politica .ctrl input,.politica .ctrl select{padding:8px 10px;font-size:14px} /* Interruptor si/no */ .switch{position:relative;display:inline-block;width:46px;height:26px;flex:none} .switch input{opacity:0;width:0;height:0} .switch .pista{ position:absolute;inset:0;background:var(--borde-fuerte);border-radius:999px; cursor:pointer;transition:background .15s; } .switch .pista:before{ content:"";position:absolute;height:20px;width:20px;left:3px;top:3px; background:#fff;border-radius:50%;transition:transform .15s; } .switch input:checked + .pista{background:var(--ok)} .switch input:checked + .pista:before{transform:translateX(20px)} /* =================================================================== CAJA · REPORTES · TABLERO Todo el color sale de variables: cambiar de tema no toca ni una regla. =================================================================== */ /* ---------- Numeros con signo ---------- La ganancia negativa tiene que saltar a la vista sin leer el numero. */ .neg{color:var(--err)} .pos{color:var(--ok)} .grid.cols4{grid-template-columns:repeat(4,1fr)} .seccion-titulo.grande{ font-size:14px;letter-spacing:.4px;text-transform:none;color:var(--txt-2); margin-bottom:10px; } /* k-val/k-lbl tambien se usan sueltos (fuera de .kpi), por ejemplo en la tarjeta de plata dormida. Las reglas de .kpi las siguen pisando adentro. */ .k-val{font-size:27px;font-weight:730;letter-spacing:-.6px} .k-lbl{font-size:13px;color:var(--txt-3);font-weight:600;margin-top:2px} /* El KPI que manda en la pantalla: borde de acento, no fondo saturado */ .kpi.destacado{border-color:var(--acento-borde);box-shadow:var(--sombra-md)} .kpi.destacado .k-val{color:var(--acento)} .kpi.clickable{cursor:pointer;transition:border-color .12s,transform .12s} .kpi.clickable:hover{border-color:var(--acento-borde);transform:translateY(-1px)} .k-val.grande{font-size:38px;letter-spacing:-1.2px} .link-mas{ font-size:13px;font-weight:650;color:var(--acento);text-decoration:none; white-space:nowrap; } .link-mas:hover{text-decoration:underline} /* ---------- Caja: desglose del cajon ---------- */ .desglose{margin-top:14px;border-top:1px solid var(--borde);padding-top:10px} .desglose .dg{ display:flex;justify-content:space-between;gap:12px; padding:7px 0;font-size:14px;color:var(--txt-2); } .desglose .dg b{color:var(--txt);font-weight:650} .desglose .dg.tot{ border-top:1px solid var(--borde);margin-top:6px;padding-top:11px; font-size:15px;color:var(--txt);font-weight:650; } .desglose .dg.tot b{font-size:19px;color:var(--acento);font-weight:760} .aviso-fiado{ display:flex;align-items:center;gap:9px;margin-top:12px; padding:10px 12px;border-radius:var(--r-sm); background:var(--info-tenue);color:var(--info); font-size:13.5px;line-height:1.4; } .aviso-fiado b{font-weight:730} /* La diferencia del arqueo: el cajero la ve mientras escribe */ .dif-caja{ margin-top:12px;padding:13px 15px;border-radius:var(--r-sm); font-weight:700;font-size:16px;text-align:center;border:1px solid transparent; } .dif-caja.ok {background:var(--ok-tenue); color:var(--ok); border-color:var(--ok)} .dif-caja.falta{background:var(--err-tenue);color:var(--err); border-color:var(--err)} .dif-caja.sobra{background:var(--warn-tenue);color:var(--warn);border-color:var(--warn)} /* ---------- Reportes: barra de fechas ---------- */ .barra-fechas{padding:12px 14px;margin-bottom:14px} .atajos{display:flex;gap:6px;flex-wrap:wrap} .atajos .btn.sel{ background:var(--acento);border-color:var(--acento);color:#fff; } .fecha{ width:auto;margin:0;padding:7px 9px;font-size:13.5px; border:1px solid var(--borde);border-radius:var(--r-sm); background:var(--superficie);color:var(--txt); } .chico-select{ width:auto;margin:0;padding:7px 10px;font-size:13.5px; border:1px solid var(--borde);border-radius:var(--r-sm); background:var(--superficie);color:var(--txt); } /* ---------- Barras horizontales ---------- Un grafico de barras hecho con divs: sin libreria, funciona offline. */ .barras{display:flex;flex-direction:column;gap:8px} .barra-fila{display:flex;align-items:center;gap:11px;font-size:13.5px} .bf-lbl{width:96px;flex:none;color:var(--txt-2);font-weight:600} .bf-track{ flex:1;height:9px;border-radius:99px;background:var(--superficie-3); overflow:hidden;display:block; } .bf-fill{display:block;height:100%;border-radius:99px;background:var(--acento)} .bf-val{width:96px;flex:none;text-align:right;font-weight:700;color:var(--txt)} .rubro{padding:12px 0;border-bottom:1px solid var(--borde)} .rubro:last-child{border-bottom:none} .rubro .bf-track{width:100%} /* La plata dormida es el reporte que mueve decisiones: se muestra distinto */ .card.destacado-alerta{ border-color:var(--warn);background:var(--warn-tenue); } .card.destacado-alerta .k-val{color:var(--warn)} /* ---------- Tablero: tarjetas accionables ---------- */ .alerta-card{ display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit; background:var(--superficie);border:1px solid var(--borde); border-radius:var(--r);box-shadow:var(--sombra);padding:16px; transition:border-color .12s,transform .12s; } .alerta-card:hover{border-color:var(--acento-borde);transform:translateY(-1px)} .alerta-card .ac-ico{ width:44px;height:44px;flex:none;border-radius:12px; background:var(--acento-tenue);color:var(--acento); display:flex;align-items:center;justify-content:center; } .alerta-card .ac-val{font-size:23px;font-weight:730;letter-spacing:-.5px} .alerta-card .ac-lbl{font-size:13px;color:var(--txt-2);font-weight:650} .alerta-card .ac-sub{font-size:12.5px;color:var(--txt-3);margin-top:2px} .alerta-card.urgente{border-color:var(--err)} .alerta-card.urgente .ac-ico{background:var(--err-tenue);color:var(--err)} .alerta-card.urgente .ac-sub{color:var(--err)} .mercaderia-pie{ margin:18px 0 6px;text-align:center;font-size:13.5px;color:var(--txt-3); } .mercaderia-pie b{color:var(--txt-2)} .mercaderia-pie .sep{margin:0 8px;opacity:.5} /* =================================================================== HUB DE MODULOS La pantalla que se le muestra al cliente para que vea TODO lo que hace el sistema. Tarjetas grandes, cada una con un numero real del negocio: un menu se lee, un tablero se entiende. =================================================================== */ .hub-intro{margin:4px 0 18px} .hub-intro h2{font-size:21px;font-weight:730;letter-spacing:-.4px;margin:0 0 5px} .hub-intro p{margin:0;color:var(--txt-3);font-size:14px;max-width:64ch;line-height:1.5} /* "Ver como": para mostrarle al ferretero que ve cada uno de sus empleados */ .vercomo{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; padding:11px 13px;margin-bottom:20px; background:var(--superficie-2);border:1px solid var(--borde);border-radius:var(--r); } .vercomo-lbl{font-size:12px;font-weight:700;letter-spacing:.5px; text-transform:uppercase;color:var(--txt-3);margin-right:2px} .vercomo-pill{ padding:6px 13px;border-radius:99px;border:1px solid var(--borde); background:var(--superficie);color:var(--txt-2); font-size:13px;font-weight:640;cursor:pointer;transition:all .12s; } .vercomo-pill:hover{border-color:var(--acento-borde);color:var(--txt)} .vercomo-pill.active{background:var(--acento);border-color:var(--acento);color:#fff} .vercomo-hint{font-size:12.5px;color:var(--txt-3);font-style:italic;margin-left:4px} /* Secciones: un titulo con una linea que lo cruza, sobrio */ .seg{margin-bottom:26px} .seg-cab{display:flex;align-items:center;gap:11px;margin-bottom:12px;flex-wrap:wrap} .seg-tit{font-size:15px;font-weight:730;letter-spacing:-.2px;white-space:nowrap} .seg-linea{flex:1;height:1px;background:var(--borde);min-width:16px} .seg-desc{font-size:12.5px;color:var(--txt-3);white-space:nowrap} .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px} .mod{ position:relative;display:flex;flex-direction:column; background:var(--superficie);border:1px solid var(--borde); border-radius:var(--r);padding:16px;text-decoration:none;color:inherit; overflow:hidden;transition:border-color .14s,transform .14s,box-shadow .14s; } /* Barra de acento que crece al pasar por encima: da vida sin ser un juguete */ .mod::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--acento);transform:scaleY(0);transform-origin:top; transition:transform .18s; } .mod:hover{border-color:var(--acento-borde);transform:translateY(-2px);box-shadow:var(--sombra-md)} .mod:hover::before{transform:scaleY(1)} .mod-top{display:flex;align-items:center;gap:10px;margin-bottom:9px} .mod-ico{ width:38px;height:38px;flex:none;border-radius:11px; background:var(--acento-tenue);color:var(--acento); display:flex;align-items:center;justify-content:center; } .mod-nom{font-size:15.5px;font-weight:700;letter-spacing:-.2px} .mod-tag{ margin-left:auto;font-size:10.5px;font-weight:750;letter-spacing:.4px; text-transform:uppercase;padding:3px 7px;border-radius:5px; background:var(--ok-tenue);color:var(--ok); } .mod-desc{font-size:13px;color:var(--txt-3);line-height:1.5;flex:1} .mod-pie{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:13px;padding-top:11px;border-top:1px solid var(--borde); } .mod-dato{font-size:12.5px;font-weight:680;color:var(--txt-2)} .mod-abrir{font-size:12.5px;font-weight:700;color:var(--acento);white-space:nowrap} .mod-abrir::after{content:' →';transition:margin .14s} .mod:hover .mod-abrir::after{margin-left:3px} /* ---------- Compras: la linea de detalle ---------- Cada linea tiene mas cosas que una de venta (cantidad, precio, presentacion y la comparacion contra el costo anterior), asi que va apilada en vez de en una fila apretada. */ .linea-compra{ border:1px solid var(--borde);border-radius:var(--r-sm); padding:12px;margin-bottom:10px;background:var(--superficie-2); } .linea-compra .lc-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .linea-compra .lc-cab b{font-size:14.5px;line-height:1.3} .linea-compra .lc-campos{ display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end;margin-top:9px; } .linea-compra .lc-campo{display:flex;flex-direction:column;gap:3px;margin:0} .linea-compra .lc-campo span{font-size:11.5px;color:var(--txt-3);font-weight:650} .linea-compra .lc-campo input{ margin:0;padding:8px 9px;font-size:15px;font-weight:650;text-align:right; } .linea-compra .lc-sub{text-align:right;padding-bottom:8px;white-space:nowrap} .linea-compra .lc-sub span{display:block;font-size:11.5px;color:var(--txt-3);font-weight:650} .linea-compra .lc-sub b{font-size:16px} .linea-compra .lc-pie{ margin-top:9px;padding-top:8px;border-top:1px solid var(--borde); font-size:12.5px;color:var(--txt-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .btn-quitar{ flex:none;width:26px;height:26px;padding:0;border:1px solid var(--borde); border-radius:7px;background:var(--superficie);color:var(--txt-3); display:flex;align-items:center;justify-content:center;cursor:pointer; } .btn-quitar:hover{border-color:var(--err);color:var(--err)} /* ---------- Despacho: la lista de lo que hay que ir a buscar ---------- El almacenero la lee caminando por el deposito, muchas veces desde el celular: cantidad grande a la izquierda y la ubicacion grande a la derecha, que son los dos datos que necesita. Tildar cada linea es solo una ayuda visual para no perderse. */ .items-sacar{margin-top:10px;border-top:1px solid var(--borde)} .item-sacar{ display:grid;grid-template-columns:auto 74px 1fr auto;gap:11px;align-items:center; padding:11px 2px;border-bottom:1px solid var(--borde);margin:0;cursor:pointer; } .item-sacar:last-child{border-bottom:none} .item-sacar input[type=checkbox]{width:20px;height:20px;margin:0;flex:none;cursor:pointer} .item-sacar .is-cant{ font-size:17px;font-weight:760;text-align:right;color:var(--acento);white-space:nowrap; } .item-sacar .is-cant small{font-size:11px;font-weight:650;color:var(--txt-3)} .item-sacar .is-desc b{display:block;font-size:14px;line-height:1.3} .item-sacar .is-desc .sub{display:block} .item-sacar .is-donde{text-align:right;white-space:nowrap} .item-sacar .is-donde b{ font-family:ui-monospace,monospace;font-size:13.5px; background:var(--superficie-3);padding:3px 7px;border-radius:6px;display:inline-block; } .item-sacar .is-donde .sub{display:block;margin-top:2px} /* Tildado: se apaga para que resalte lo que todavia falta juntar */ .item-sacar.listo{opacity:.42} .item-sacar.listo .is-desc b{text-decoration:line-through} /* ---------- Compatibilidad con pantallas heredadas ---------- almacen/compras/despacho/escanear/etiquetas todavia usan estas clases. Se mantienen para no romperlas mientras se migran. */ .menu{display:grid;grid-template-columns:1fr 1fr;gap:12px} .menu a{ background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r); box-shadow:var(--sombra);padding:20px 12px;text-align:center;text-decoration:none; color:var(--txt);font-weight:600; } .menu a .ico{font-size:26px;display:block;margin-bottom:7px} .lista-item{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--borde)} .lista-item:last-child{border-bottom:none} .lista-item .t{font-weight:640} .lista-item .s{font-size:13px;color:var(--txt-3)} @media (max-width:900px){ .mostrador{grid-template-columns:1fr} .col-ticket{position:static} .mas .lista-mas{grid-template-columns:repeat(2,1fr)} .buscador input{font-size:17px;padding:14px 14px 14px 46px} .total-caja .val{font-size:27px} .accesos{grid-template-columns:1fr} /* El dueno mira el tablero desde el celular: una columna y numeros grandes */ .grid.cols4,.grid.cols3,.grid.cols2{grid-template-columns:1fr 1fr} .bf-lbl{width:70px} .bf-val{width:78px;font-size:12.5px} .barra-fechas .fila{align-items:stretch} .barra-fechas .fila > .fila{margin-left:0 !important} } @media (max-width:560px){ .grid.cols4,.grid.cols3,.grid.cols2{grid-template-columns:1fr} .tabs{overflow-x:auto;flex-wrap:nowrap} .tabs .tab{white-space:nowrap} .linea-compra .lc-campos{grid-template-columns:1fr 1fr} .linea-compra .lc-sub{grid-column:1/-1;text-align:left;padding:0} /* En el celular la ubicacion baja abajo en vez de apretarse a la derecha */ .item-sacar{grid-template-columns:auto 66px 1fr} .item-sacar .is-donde{grid-column:2/-1;text-align:left} }