/* ============================================================ MOLDURAS WEB — Sistema de diseño Dos temas conmutables por usuario: data-theme="taller" -> claro/cálido (por defecto) data-theme="panel" -> oscuro/compacto El tema se aplica en desde la preferencia guardada del usuario (columna usuarios.tema). ============================================================ */ :root{ --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --rad:14px; --rad-sm:10px; --nav-w:236px; /* ---- TEMA TALLER (claro) — por defecto ---- */ --bg:#F6F4EF; --surface:#FFFFFF; --edge:#E7E2D7; --edge-soft:#EFEBE2; --txt:#23221F; --sub:#736F67; --acc:#2E6E9E; --acc-weak:#EAF2F8; --acc-ink:#215073; --wood:#C08A3E; --shadow:0 1px 2px rgba(28,27,25,.05), 0 8px 24px -16px rgba(28,27,25,.28); --sidebar:#FFFFFF; --sidebar-edge:#E7E2D7; --good:#2F8F5B; --good-bg:#E7F4EC; --warn:#B7791F; --warn-bg:#FBF1DC; --cut:#2E6E9E; --cut-bg:#E7F0F7; --pack:#6C5CC4; --pack-bg:#EDEAF8; --dead:#8A857B; --dead-bg:#EEEBE4; --danger:#C4453B; --danger-bg:#FBEAE8; } /* ---- TEMA PANEL (oscuro) ---- */ :root[data-theme="panel"]{ --bg:#12151A; --surface:#191D24; --edge:#282E38; --edge-soft:#20252D; --txt:#E7EAF0; --sub:#8B94A3; --acc:#4C9BD6; --acc-weak:#16283A; --acc-ink:#9CCBEC; --wood:#E0A94A; --shadow:0 1px 0 rgba(0,0,0,.4), 0 14px 34px -20px rgba(0,0,0,.75); --sidebar:#0E1116; --sidebar-edge:#20252D; --good:#4FCB84; --good-bg:#12291D; --warn:#E0A94A; --warn-bg:#2C2210; --cut:#5AA9E6; --cut-bg:#122636; --pack:#9C8CF0; --pack-bg:#20203A; --dead:#77808E; --dead-bg:#20252D; --danger:#E06A60; --danger-bg:#2C1613; } *{box-sizing:border-box} html,body{margin:0;height:100%} body{background:var(--bg);color:var(--txt);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5} a{color:var(--acc);text-decoration:none} h1,h2,h3,h4{margin:0;letter-spacing:-.01em} /* ============================================================ LAYOUT ============================================================ */ .layout{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh} .main{display:flex;flex-direction:column;min-width:0} /* ---- SIDEBAR ---- */ .side{background:var(--sidebar);border-right:1px solid var(--sidebar-edge);padding:18px 14px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;overflow:auto} .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px} .brand .logo{width:38px;height:38px;border-radius:10px;flex:none;background:linear-gradient(135deg,var(--acc),var(--acc-ink));display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px -4px var(--acc)} .brand .logo svg{width:22px;height:22px} .brand .name{font-weight:700;font-size:15.5px;line-height:1.1} .brand .name small{display:block;font-weight:500;font-size:11px;color:var(--sub)} .nav-label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sub);padding:14px 10px 6px;font-weight:700} .nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--rad-sm);color:var(--sub);font-size:14px;font-weight:500;cursor:pointer;transition:.15s;border:1px solid transparent} .nav-i svg{width:18px;height:18px;flex:none;opacity:.9} .nav-i:hover{background:var(--acc-weak);color:var(--txt)} .nav-i.on{background:var(--acc-weak);color:var(--acc-ink);font-weight:600;border-color:color-mix(in srgb,var(--acc) 22%,transparent)} .side .foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--edge)} .avatar{width:32px;height:32px;border-radius:50%;background:var(--wood);color:#2a1c07;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none} .side .foot .who{font-size:13px;font-weight:600;line-height:1.2;min-width:0} .side .foot .who small{display:block;color:var(--sub);font-weight:500;font-size:11px} .side .foot form{margin-left:auto} .icon-btn{background:transparent;border:0;color:var(--sub);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center} .icon-btn:hover{background:var(--acc-weak);color:var(--txt)} .icon-btn svg{width:17px;height:17px} /* ---- TOPBAR ---- */ .top{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--edge);background:var(--surface);position:sticky;top:0;z-index:20} :root[data-theme="panel"] .top{background:var(--bg)} .top h2{font-size:19px;font-weight:700} .top .sub{color:var(--sub);font-size:13px} .spacer{flex:1} /* selector de empresa */ .empresa-sel{position:relative} .empresa-sel .cur{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--edge);border-radius:999px;padding:6px 8px 6px 12px;cursor:pointer;font-size:13px;font-weight:600} :root[data-theme="panel"] .empresa-sel .cur{background:var(--surface)} .empresa-sel .cur .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)} .empresa-sel .cur .em2{background:var(--wood)} .empresa-sel .cur svg{width:14px;height:14px;color:var(--sub)} .empresa-sel .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--edge);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:220px;display:none;z-index:40} .empresa-sel.open .menu{display:block} .empresa-sel .menu button{display:flex;width:100%;align-items:center;gap:10px;background:transparent;border:0;color:var(--txt);font:inherit;font-size:13.5px;font-weight:600;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left} .empresa-sel .menu button:hover{background:var(--acc-weak)} .empresa-sel .menu button .dot{width:8px;height:8px;border-radius:50%;flex:none} .empresa-sel .menu button small{display:block;color:var(--sub);font-weight:500;font-size:11px} .empresa-sel .menu button .check{margin-left:auto;color:var(--acc)} /* búsqueda + botones */ .search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--edge);border-radius:999px;padding:8px 14px;color:var(--sub);font-size:13px;min-width:220px} :root[data-theme="panel"] .search{background:var(--surface)} .search svg{width:15px;height:15px} .search input{border:0;background:transparent;font:inherit;font-size:13px;color:var(--txt);outline:0;width:100%} .search input::placeholder{color:var(--sub)} .btn{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:var(--rad-sm);padding:9px 16px;border:1px solid var(--edge);background:var(--surface);color:var(--txt);display:inline-flex;align-items:center;gap:7px;transition:.15s;text-decoration:none} .btn svg{width:15px;height:15px} .btn:hover{border-color:var(--acc)} .btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 6px 16px -8px var(--acc)} .btn.pri:hover{filter:brightness(1.06)} .btn.ghost{color:var(--sub);background:transparent} .btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)} .btn.ok{background:var(--good);border-color:var(--good);color:#fff;box-shadow:0 6px 16px -8px var(--good)} .btn.ok:hover{filter:brightness(1.06)} .btn.sm{padding:6px 11px;font-size:12.5px} /* ---- CONTENIDO ---- */ .body{padding:24px;display:flex;flex-direction:column;gap:22px} .container-narrow{max-width:1180px;width:100%;margin:0 auto} /* ============================================================ COMPONENTES ============================================================ */ /* KPIs */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}} .kpi{background:var(--surface);border:1px solid var(--edge);border-radius:var(--rad);padding:17px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;overflow:hidden} .kpi .k-top{display:flex;align-items:center;justify-content:space-between} .kpi .k-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--acc-weak);color:var(--acc-ink)} .kpi .k-ic svg{width:18px;height:18px} .kpi .k-val{font-size:30px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1} .kpi .k-lab{font-size:12.5px;color:var(--sub);font-weight:500} .kpi.warn .k-ic{background:var(--warn-bg);color:var(--warn)} .kpi.warn .k-val{color:var(--warn)} .k-trend{font-size:11.5px;font-weight:600} .trend-up{color:var(--good)} .trend-flat{color:var(--sub)} /* Card / panel */ .card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--rad);box-shadow:var(--shadow);overflow:hidden} .card > .c-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--edge);flex-wrap:wrap} .card > .c-head h3{font-size:15px;font-weight:700} .card > .c-head .count{font-size:12px;color:var(--sub);background:var(--bg);border:1px solid var(--edge);border-radius:999px;padding:2px 9px;font-weight:600} :root[data-theme="panel"] .card > .c-head .count{background:var(--surface)} .filters{display:flex;gap:8px;flex-wrap:wrap} .chip{font-size:12.5px;font-weight:600;color:var(--sub);background:var(--bg);border:1px solid var(--edge);border-radius:999px;padding:6px 13px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center} :root[data-theme="panel"] .chip{background:var(--surface)} .chip:hover{color:var(--txt)} .chip.on{background:var(--acc-weak);color:var(--acc-ink);border-color:color-mix(in srgb,var(--acc) 30%,transparent)} .chip b{font-weight:700} /* Tabla */ .tbl-wrap{overflow-x:auto} table.grid{width:100%;border-collapse:collapse;font-size:13.5px} table.grid thead th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-weight:700;padding:11px 18px;border-bottom:1px solid var(--edge);background:var(--bg);white-space:nowrap} :root[data-theme="panel"] table.grid thead th{background:color-mix(in srgb,var(--surface) 60%,#000)} table.grid tbody td{padding:12px 18px;border-bottom:1px solid var(--edge);vertical-align:middle} table.grid tbody tr:last-child td{border-bottom:0} table.grid tbody tr:hover{background:var(--acc-weak)} .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .cli{font-weight:600} .cli small{display:block;color:var(--sub);font-weight:500;font-size:11.5px} .mono{font-variant-numeric:tabular-nums;color:var(--sub);font-size:12.5px;white-space:nowrap} .rowlink{cursor:pointer} /* Pills de estado */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill.pend{color:var(--warn);background:var(--warn-bg)} .pill.cort{color:var(--cut);background:var(--cut-bg)} .pill.emba{color:var(--pack);background:var(--pack-bg)} .pill.desp{color:var(--good);background:var(--good-bg)} .pill.baja{color:var(--dead);background:var(--dead-bg)} .pill.na{color:var(--dead);background:var(--dead-bg)} .via{font-size:12px;color:var(--sub)} .tag-ml{color:var(--wood);font-weight:600} /* Formularios */ .split{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start} @media(max-width:960px){.split{grid-template-columns:1fr}} .form-card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--rad);box-shadow:var(--shadow)} .form-card .c-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--edge)} .form-card .c-head svg{width:18px;height:18px;color:var(--acc)} .form-card .c-head .badge{margin-left:auto;font-size:11px;font-weight:700;color:var(--acc-ink);background:var(--acc-weak);padding:3px 10px;border-radius:999px} .form-grid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field.col2{grid-column:1/-1} .field label{font-size:11.5px;font-weight:600;color:var(--sub);letter-spacing:.02em} .field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--edge);border-radius:var(--rad-sm);padding:10px 12px;font:inherit;font-size:13.5px;color:var(--txt);width:100%} :root[data-theme="panel"] .field input,:root[data-theme="panel"] .field select,:root[data-theme="panel"] .field textarea{background:#0E1116} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid color-mix(in srgb,var(--acc) 50%,transparent);border-color:var(--acc)} .field .err{color:var(--danger);font-size:11.5px} .seg{display:flex;gap:6px} .seg label{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:9px;border-radius:var(--rad-sm);border:1px solid var(--edge);color:var(--sub);cursor:pointer;background:var(--bg)} :root[data-theme="panel"] .seg label{background:#0E1116} .seg input{position:absolute;opacity:0;pointer-events:none} .seg input:checked + span,.seg label:has(input:checked){color:#fff} .seg label:has(input:checked){background:var(--acc);border-color:var(--acc);color:#fff} .form-actions{display:flex;gap:10px;padding:0 18px 18px;justify-content:flex-end} /* Alertas / flash */ .flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--rad-sm);font-size:13.5px;font-weight:500;margin-bottom:4px} .flash svg{width:17px;height:17px;flex:none} .flash.ok{background:var(--good-bg);color:var(--good)} .flash.err{background:var(--danger-bg);color:var(--danger)} /* Paginación */ .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--edge);font-size:13px;color:var(--sub);flex-wrap:wrap} .pager .links{display:flex;gap:4px;flex-wrap:wrap} .pager .links a,.pager .links span{min-width:32px;text-align:center;padding:6px 9px;border-radius:8px;border:1px solid var(--edge);font-weight:600;font-size:12.5px;color:var(--txt)} .pager .links a:hover{border-color:var(--acc)} .pager .links .cur{background:var(--acc);border-color:var(--acc);color:#fff} .pager .links .disabled{opacity:.4} .empty{padding:48px 18px;text-align:center;color:var(--sub)} .empty svg{width:34px;height:34px;opacity:.5;margin-bottom:10px} /* ============================================================ LOGIN ============================================================ */ .login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr} @media(max-width:820px){.login-wrap{grid-template-columns:1fr}.l-art{display:none}} .l-art{position:relative;overflow:hidden;color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(120% 90% at 80% 10%, color-mix(in srgb,var(--acc) 60%,transparent), transparent 60%),linear-gradient(160deg,var(--acc-ink),#12324a 70%)} :root[data-theme="panel"] .l-art{background:linear-gradient(160deg,#0c1826,#0a0f16 75%)} .l-art .stripes{position:absolute;inset:0;opacity:.14;pointer-events:none;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 26px)} .l-art .lgm{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center} .l-art .lgm svg{width:30px;height:30px} .l-art h3{font-size:30px;line-height:1.15;margin:0 0 12px;font-weight:750;max-width:15ch} .l-art p{margin:0;opacity:.82;font-size:14px;max-width:34ch} .l-form{background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:48px 46px;gap:6px} .l-form .eb{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700} .l-form h4{font-size:23px;font-weight:750;margin:2px 0 4px} .l-form .lead{color:var(--sub);font-size:13.5px;margin:0 0 20px} .l-form .field{margin-bottom:14px} .l-form .row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--sub);margin:2px 0 18px} .l-form .btn.pri{width:100%;justify-content:center;padding:12px} .l-form .hint{margin-top:16px;font-size:12px;color:var(--sub);text-align:center} /* ============================================================ INGRESAR PEDIDO (formulario interactivo) ============================================================ */ .pedido-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start} @media(max-width:1000px){.pedido-grid{grid-template-columns:1fr}} .col-main{display:flex;flex-direction:column;gap:18px;min-width:0} .aside-sticky{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px} @media(max-width:1000px){.aside-sticky{position:static}} /* Autocompletar */ /* Las tarjetas normales usan overflow:hidden (bordes redondeados en tablas), pero eso recorta el desplegable del buscador. Las que tienen autocompletar lo permiten desbordar. */ .card.ac-host{overflow:visible} .ac{position:relative} .ac-menu{position:absolute;left:0;right:0;top:calc(100% + 5px);background:var(--surface);border:1px solid var(--edge);border-radius:var(--rad-sm);box-shadow:var(--shadow);z-index:30;max-height:300px;overflow:auto;display:none} .ac-menu.open{display:block} .ac-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--edge-soft);font-size:13.5px} .ac-item:last-child{border-bottom:0} .ac-item:hover,.ac-item.hl{background:var(--acc-weak)} .ac-item .t{font-weight:600} .ac-item .s{color:var(--sub);font-size:12px} .ac-empty{padding:12px;color:var(--sub);font-size:13px} /* Cliente seleccionado */ .cli-box{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--acc-weak);border:1px solid color-mix(in srgb,var(--acc) 25%,transparent);border-radius:var(--rad-sm)} .cli-box .ci{width:40px;height:40px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;flex:none} .cli-box .cd{min-width:0;flex:1} .cli-box .cd b{font-size:15px} .cli-box .cd small{display:block;color:var(--sub);font-size:12.5px} /* Fila para agregar ítem */ .add-row{display:grid;grid-template-columns:1fr 84px 106px 72px auto;gap:10px;align-items:end;padding:16px 18px;border-bottom:1px solid var(--edge);background:var(--bg)} :root[data-theme="panel"] .add-row{background:color-mix(in srgb,var(--surface) 55%,#000)} @media(max-width:720px){.add-row{grid-template-columns:1fr 1fr}} .add-row .field{gap:5px} .add-row .field label{font-size:10.5px} .link-mini{background:none;border:0;color:var(--acc);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0} /* Valor de solo lectura (ej. vendedor = usuario logueado) */ .static-val{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--edge);border-radius:var(--rad-sm);padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--txt)} :root[data-theme="panel"] .static-val{background:#0E1116} .static-val svg{width:16px;height:16px;color:var(--acc);flex:none} /* Tabla de ítems */ .itbl td .x{color:var(--danger);cursor:pointer;background:none;border:0;padding:4px;display:grid;place-items:center;border-radius:6px} .itbl td .x:hover{background:var(--danger-bg)} .itbl td .x svg{width:15px;height:15px} /* Totales */ .tot{display:flex;flex-direction:column;padding:4px 2px} .tot .r{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--sub)} .tot .r b{color:var(--txt);font-variant-numeric:tabular-nums;font-weight:600} .tot .r.big{border-top:1px solid var(--edge);margin-top:4px;padding-top:12px} .tot .r.big span{font-weight:700;color:var(--txt);font-size:15px} .tot .r.big b{font-size:20px;font-weight:750} .tot .r.resta{border-top:1px dashed var(--edge);margin-top:4px;padding-top:10px} .tot .r.resta span{font-weight:700;color:var(--txt)} .tot .r.resta b{color:var(--acc);font-size:18px} /* ============================================================ MODAL DE CONFIRMACIÓN (data-confirm en un form) ============================================================ */ .modal-overlay{position:fixed;inset:0;background:rgba(10,12,16,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px} .modal-overlay.open{display:flex} .modal{background:var(--surface);border:1px solid var(--edge);border-radius:var(--rad);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);max-width:420px;width:100%;padding:24px} .modal .m-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--danger-bg);color:var(--danger);margin-bottom:14px} .modal .m-ic svg{width:22px;height:22px} .modal h3{font-size:18px;font-weight:700;margin-bottom:6px} .modal p{color:var(--sub);font-size:14px;margin-bottom:20px} .modal .modal-actions{display:flex;gap:10px;justify-content:flex-end} /* ============================================================ LÍNEA DE TIEMPO (historial de estados del pedido) ============================================================ */ .timeline{display:flex;flex-direction:column} .tl-item{display:grid;grid-template-columns:16px 1fr;gap:14px} .tl-rail{display:flex;flex-direction:column;align-items:center} .tl-dot{width:14px;height:14px;border-radius:50%;background:currentColor;margin-top:3px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent);flex:none} .tl-conn{flex:1;width:2px;background:var(--edge);margin:4px 0;min-height:12px} .tl-item:last-child .tl-conn{display:none} .tl-content{padding-bottom:18px} .tl-item:last-child .tl-content{padding-bottom:0} .tl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tl-detalle{color:var(--sub);font-size:12.5px} .tl-fecha{color:var(--sub);font-size:12px;font-variant-numeric:tabular-nums;margin-top:3px} @media(prefers-reduced-motion:reduce){*{transition:none!important}}