:root{
  --azul:#1F3A5F; --azul2:#2b5288; --azul-claro:#e8eff7; --fondo:#eef1f5; --panel:#ffffff; --borde:#cfd7e1; --texto:#1b2430; --suave:#5d6b7c;
  --verde:#1d7a3e; --rojo:#b3261e; --ambar:#a86b00; --sel:#fff3c4;
  --imprenta:#2e9e4f; --textil:#e0b400; --rotulacion:#d0392b; --rotulos:#8e44ad; --merchandising:#e67e22;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Segoe UI",system-ui,Arial,sans-serif;font-size:13px;color:var(--texto);background:var(--fondo)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:var(--azul2)}
/* ---------- login */
.login{position:fixed;inset:0;background:linear-gradient(135deg,#1F3A5F,#2b5288);display:flex;align-items:center;justify-content:center}
.login-box{background:#fff;padding:28px 32px;border-radius:10px;width:340px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-box h1{font-size:17px;margin:0 0 6px;text-align:center;color:var(--azul)}
.login-logo{width:56px;height:56px;border-radius:12px;background:var(--azul);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.login-box label{display:flex;flex-direction:column;gap:4px;font-weight:600;color:var(--suave)}
.login-box input{padding:9px;border:1px solid var(--borde);border-radius:6px;font-size:15px}
.error{color:var(--rojo);min-height:18px;white-space:pre-line}
/* ---------- shell */
#app{display:flex;flex-direction:column;height:100vh}
.titulo{background:var(--azul);color:#fff;display:flex;align-items:center;gap:16px;padding:4px 12px;height:34px}
.marca{display:flex;align-items:center;gap:8px}
.logo{background:#fff;color:var(--azul);font-weight:800;border-radius:4px;padding:1px 5px;font-size:12px}
.usuario{margin-left:auto;display:flex;gap:10px;align-items:center}
.usuario button{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:4px;padding:2px 8px;cursor:pointer}
.estado-red{font-size:12px;opacity:.9}
.cinta{background:#f8fafc;border-bottom:1px solid var(--borde)}
.cinta-tabs{display:flex;gap:2px;padding:0 8px;background:#dfe6ee}
.cinta-tabs button{border:0;background:transparent;padding:6px 14px;cursor:pointer;border-radius:5px 5px 0 0;font-weight:600;color:var(--suave)}
.cinta-tabs button.activo{background:#f8fafc;color:var(--azul)}
.cinta-botones{display:flex;gap:4px;padding:6px 8px;min-height:74px;align-items:stretch;overflow-x:auto}
.cinta-grupo{display:flex;gap:2px;padding:0 6px;border-right:1px solid var(--borde);position:relative;padding-bottom:14px}
.cinta-grupo:after{content:attr(data-titulo);position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10.5px;color:var(--suave)}
.cbtn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:70px;max-width:92px;padding:4px 6px;border:1px solid transparent;
  background:transparent;border-radius:5px;cursor:pointer;font-size:11.5px;line-height:1.15;text-align:center}
.cbtn:hover{background:var(--azul-claro);border-color:#b8cbe0}
.cbtn .ico{font-size:21px;line-height:1}
.ventanas{display:flex;gap:2px;padding:4px 8px 0;background:var(--fondo);overflow-x:auto;min-height:30px}
.ventanas .vt{display:flex;align-items:center;gap:6px;background:#dfe6ee;border:1px solid var(--borde);border-bottom:0;border-radius:6px 6px 0 0;padding:4px 8px 4px 10px;cursor:pointer;white-space:nowrap;max-width:260px}
.ventanas .vt span{overflow:hidden;text-overflow:ellipsis}
.ventanas .vt.activa{background:#fff;font-weight:600;color:var(--azul)}
.ventanas .vt.sucia span:before{content:"● ";color:var(--ambar)}
.ventanas .vt button{border:0;background:transparent;cursor:pointer;padding:0 2px;color:var(--suave);font-size:14px}
main{flex:1;overflow:auto;background:#fff;border-top:1px solid var(--borde);position:relative}
.barra-estado{background:#dfe6ee;border-top:1px solid var(--borde);padding:3px 10px;font-size:11.5px;color:var(--suave);display:flex;gap:18px}
.vista{padding:10px 12px;min-height:100%}
/* ---------- controles */
.btn{border:1px solid var(--borde);background:#fff;padding:5px 11px;border-radius:5px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--azul2);background:var(--azul-claro)}
.btn.primario{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn.primario:hover{background:var(--azul2)}
.btn.verde{background:var(--verde);color:#fff;border-color:var(--verde)}
.btn.rojo{color:var(--rojo);border-color:#e6b4b0}
.btn.grande{padding:9px 14px;font-size:15px}
.btn:disabled{opacity:.45;cursor:default}
.barra{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.barra .espacio{flex:1}
.barra h2{margin:0 10px 0 0;font-size:17px;color:var(--azul)}
input.buscar{padding:5px 8px;border:1px solid var(--borde);border-radius:5px;min-width:240px}
.campo{display:flex;flex-direction:column;gap:2px;min-width:0}
.campo>span{font-size:11.5px;color:var(--suave);font-weight:600}
.campo input,.campo select,.campo textarea{border:1px solid var(--borde);border-radius:4px;padding:5px 6px;background:#fff;min-width:0;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus,td input:focus,td select:focus{outline:2px solid #8fb3dd;border-color:var(--azul2)}
.campo input[readonly]{background:#f3f5f8}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 12px}
.form .ancho2{grid-column:span 2} .form .ancho3{grid-column:span 3} .form .todo{grid-column:1/-1}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer}
.panel{border:1px solid var(--borde);border-radius:6px;padding:10px;margin-bottom:10px;background:#fff}
.panel h3{margin:0 0 8px;font-size:14px;color:var(--azul)}
.fila{display:flex;gap:10px;flex-wrap:wrap}
.fila>*{flex:1;min-width:280px}
/* ---------- rejilla */
table.rej{width:100%;border-collapse:collapse;font-size:12.5px}
.rej th{background:#e3e9f0;text-align:left;padding:5px 6px;border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:1;white-space:nowrap;font-weight:600;color:#33475f;cursor:default}
.rej td{padding:4px 6px;border-bottom:1px solid #e7ebf0;vertical-align:top}
.rej tbody tr{cursor:pointer}
.rej tbody tr:nth-child(even){background:#fafbfd}
.rej tbody tr:hover{background:#eef4fb}
.rej tbody tr.sel{background:var(--sel)}
.rej td.n,.rej th.n{text-align:right;white-space:nowrap}
.rej tfoot td{font-weight:700;background:#f1f4f8}
.caja-rej{border:1px solid var(--borde);border-radius:6px;overflow:auto;max-height:calc(100vh - 260px)}
.pag{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:6px 0;color:var(--suave)}
/* ---------- etiquetas */
.et{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;background:#e3e9f0;color:#33475f;white-space:nowrap}
.et.verde{background:#dcf1e3;color:var(--verde)} .et.rojo{background:#fbe0de;color:var(--rojo)} .et.ambar{background:#fdf0cf;color:var(--ambar)} .et.azul{background:#dde8f6;color:var(--azul2)}
.dep{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10.5px;font-weight:700;color:#fff}
.dep.IMPRENTA{background:var(--imprenta)} .dep.TEXTIL{background:var(--textil);color:#3b3000} .dep.ROTULACION{background:var(--rotulacion)} .dep.ROTULOS{background:var(--rotulos)} .dep.MERCHANDISING{background:var(--merchandising)} .dep.TIENDA{background:#667}
/* ---------- tablero */
.tablero-filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.tablero{display:flex;gap:10px;overflow-x:auto;align-items:flex-start;padding-bottom:10px;height:calc(100vh - 240px)}
.col{background:#e6ebf1;border-radius:8px;min-width:262px;max-width:262px;display:flex;flex-direction:column;max-height:100%}
.col.lateral{background:#f1e9dc}
.col h4{margin:0;padding:8px 10px;font-size:12.5px;display:flex;justify-content:space-between;color:#2d3e53}
.col .tarjetas{padding:0 8px 8px;overflow-y:auto;flex:1;min-height:40px}
.col.sobre{outline:3px dashed var(--azul2);outline-offset:-3px}
.col .sub{font-size:11px;font-weight:700;margin:6px 2px 4px;color:#445}
.tj{background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.18);padding:7px 8px;margin-bottom:7px;cursor:pointer;border-left:5px solid #9aa7b6;position:relative}
.tj:hover{box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tj.IMPRENTA{border-left-color:var(--imprenta)} .tj.TEXTIL{border-left-color:var(--textil)} .tj.ROTULACION{border-left-color:var(--rotulacion)} .tj.ROTULOS{border-left-color:var(--rotulos)} .tj.MERCHANDISING{border-left-color:var(--merchandising)}
.tj .t1{font-weight:600;font-size:12.5px;margin-bottom:3px}
.tj .t2{font-size:11.5px;color:var(--suave)}
.tj .pie{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:11px;color:var(--suave)}
.prog{height:5px;background:#e3e8ee;border-radius:3px;overflow:hidden;margin-top:5px}
.prog i{display:block;height:100%;background:var(--verde)}
.tj .avisos{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.tj.arrastrando{opacity:.4}
/* ---------- expediente */
.exp-cab{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.exp-cab h2{margin:0;font-size:18px;color:var(--azul)}
.fases-linea{display:flex;gap:2px;margin:8px 0 12px;overflow-x:auto}
.fases-linea div{flex:1;min-width:34px;text-align:center;font-size:10.5px;padding:4px 2px;background:#e3e8ee;color:#7a8594;border-radius:3px}
.fases-linea div.hecha{background:#cfe8d6;color:var(--verde)}
.fases-linea div.actual{background:var(--azul);color:#fff;font-weight:700}
.pestanas{display:flex;gap:2px;border-bottom:2px solid var(--azul);margin-bottom:10px;flex-wrap:wrap}
.pestanas button{border:0;background:#e3e8ee;padding:6px 12px;border-radius:5px 5px 0 0;cursor:pointer;font-weight:600;color:var(--suave)}
.pestanas button.activo{background:var(--azul);color:#fff}
.puerta{border:1px solid var(--borde);border-radius:6px;margin-bottom:8px;overflow:hidden}
.puerta>h4{margin:0;padding:7px 10px;background:#f1f4f8;font-size:13px;display:flex;gap:8px;align-items:center;cursor:pointer}
.puerta.actual{border-color:var(--azul2);box-shadow:0 0 0 2px #cfe0f3}
.puerta.actual>h4{background:var(--azul-claro);color:var(--azul)}
.puerta.completa>h4{color:var(--verde)}
.puerta .items{padding:6px 10px}
.item{display:flex;gap:8px;align-items:flex-start;padding:4px 0;border-bottom:1px dashed #e3e8ee}
.item:last-child{border:0}
.item input{margin-top:2px;width:16px;height:16px}
.item .quien{margin-left:auto;font-size:11px;color:var(--suave);white-space:nowrap}
.item.auto .txt:after{content:" · automático";font-size:11px;color:var(--azul2)}
/* ---------- documento */
.doc-cab{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px 12px;margin-bottom:8px}
table.lineas{width:100%;border-collapse:collapse}
.lineas th{background:#e3e9f0;padding:5px;font-size:12px;text-align:left;border:1px solid var(--borde)}
.lineas td{border:1px solid #e0e5eb;padding:0}
.lineas td input,.lineas td select{border:0;width:100%;padding:5px;background:transparent}
.lineas td.n input{text-align:right}
.lineas td.acc{white-space:nowrap;padding:0 3px;text-align:center}
.lineas td.acc button{border:0;background:transparent;cursor:pointer;padding:3px;font-size:13px}
.lineas tr.info td{border-top:0;font-size:11px;color:var(--suave);padding:2px 6px;background:#fbfcfd}
.totales{display:flex;justify-content:flex-end;gap:18px;margin-top:10px;align-items:flex-end;flex-wrap:wrap}
.totales .t{text-align:right}
.totales .t span{display:block;font-size:11px;color:var(--suave)}
.totales .t b{font-size:15px}
.totales .t.g b{font-size:21px;color:var(--azul)}
.bloqueado{background:#fff8e1;border:1px solid #f0d58a;padding:6px 10px;border-radius:5px;margin-bottom:8px}
.sugerencias{position:absolute;background:#fff;border:1px solid var(--borde);box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:50;max-height:320px;overflow:auto;min-width:460px;border-radius:5px}
.sugerencias div{padding:5px 8px;cursor:pointer;border-bottom:1px solid #eef1f4;display:flex;gap:8px}
.sugerencias div.sel,.sugerencias div:hover{background:var(--azul-claro)}
.sugerencias small{color:var(--suave)}
/* ---------- partes */
.iconos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.icono{border:2px solid #d6dde6;border-radius:7px;padding:5px;text-align:center;cursor:pointer;font-size:11.5px;background:#fff;position:relative}
.icono img{width:100%;height:78px;object-fit:contain}
.icono.si{border-color:var(--azul2);background:var(--azul-claro);font-weight:600}
.icono.si:before{content:"✔";position:absolute;top:3px;left:6px;color:var(--azul2);font-size:15px}
.icono input{width:100%;margin-top:3px;border:1px solid var(--borde);border-radius:3px;padding:2px 4px;font-size:11px}
table.tallas input[data-pt],table.tallas input[data-t]{width:52px;text-align:right}
.croquis{border:1px solid var(--borde);background:url(/img/cuadricula.svg) center/cover;touch-action:none;cursor:crosshair;max-width:100%}
.firma-canvas{border:1px solid var(--borde);border-radius:6px;background:#fff;touch-action:none;cursor:crosshair;width:100%;max-width:520px;height:170px}
/* ---------- panel inicio */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:12px}
.kpi{border:1px solid var(--borde);border-radius:8px;padding:10px 12px;background:#fff;cursor:pointer}
.kpi span{display:block;color:var(--suave);font-size:12px}
.kpi b{font-size:22px;color:var(--azul)}
.kpi.alerta b{color:var(--rojo)}
.lista-alertas{max-height:260px;overflow:auto}
.lista-alertas div{padding:5px 4px;border-bottom:1px solid #eef1f4;cursor:pointer;display:flex;gap:8px}
.lista-alertas div:hover{background:#f3f7fb}
.barras .b{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:12px}
.barras .b i{display:block;height:14px;border-radius:3px}
/* ---------- modal y avisos */
.modal{position:fixed;inset:0;background:rgba(20,30,45,.45);display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:40px 12px;overflow:auto}
.modal-caja{background:#fff;border-radius:8px;padding:16px 18px;min-width:360px;max-width:min(980px,96vw);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.modal-caja h3{margin:0 0 10px;color:var(--azul)}
.modal-pie{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.avisos{position:fixed;right:14px;bottom:34px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:420px}
.aviso{background:#1d2b3d;color:#fff;padding:10px 14px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.3);white-space:pre-line;animation:ent .2s}
.aviso.error{background:var(--rojo)} .aviso.ok{background:var(--verde)}
@keyframes ent{from{transform:translateY(10px);opacity:0}}
.cambio-remoto{background:#fdf0cf;border:1px solid #f0d58a;padding:6px 10px;border-radius:5px;margin-bottom:8px;display:flex;gap:10px;align-items:center}
/* ---------- calendario */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .d{border:1px solid var(--borde);border-radius:5px;min-height:96px;padding:3px;background:#fff;font-size:11.5px}
.cal .d.fuera{opacity:.45} .cal .d.hoy{border:2px solid var(--azul2)}
.cal .d .num{font-weight:700;color:var(--suave)}
.cal .d .ev{margin-top:2px;padding:1px 4px;border-radius:3px;background:var(--azul-claro);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .cab{font-weight:700;text-align:center;color:var(--suave)}
/* ---------- TPV */
.tpv{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.tpv .productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:calc(100vh - 300px);overflow:auto}
.tpv .prod{border:1px solid var(--borde);border-radius:6px;padding:8px;cursor:pointer;background:#fff;font-size:12px}
.tpv .prod:hover{background:var(--azul-claro)}
.tpv .prod b{display:block;color:var(--azul);margin-top:4px}
.tpv .total{font-size:30px;font-weight:800;color:var(--azul);text-align:right}
@media (max-width:900px){.doc-cab{grid-template-columns:1fr 1fr}.tpv{grid-template-columns:1fr}.cinta-botones{min-height:0}}

/* stock bajo mínimo: fila en rojo */
tr.bajo td{background:#fde8e6 !important;color:#8f1d15}
tr.bajo td b{color:#b3261e}
.iconos.mini{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.iconos.mini .icono img{height:48px}
/* gastos */
.gasto-ficha{display:grid;grid-template-columns:minmax(440px,1fr) minmax(360px,1fr);gap:10px;align-items:start}
.gasto-ficha .visor{position:sticky;top:0}
.visor iframe,.visor img{width:100%;height:calc(100vh - 250px);min-height:420px;border:1px solid var(--borde);border-radius:6px;background:#f6f7f9;display:block}
.visor img{object-fit:contain}
.visor-vacio{padding:40px;text-align:center;color:var(--suave)}
.desglose input,.desglose select{padding:3px 5px}
.zona-subir{border:2px dashed #9fb3c8;border-radius:10px;padding:26px;text-align:center;background:#f8fbff;cursor:pointer;line-height:1.6}
.zona-subir:hover,.zona-subir.encima{background:#e3eefb;border-color:var(--azul2)}
.informe h3{margin:12px 0 6px;font-size:14px;color:var(--azul)}
.informe details{margin-top:10px} .informe summary{cursor:pointer;padding:4px 0}
.rej tfoot tr.t td{border-top:2px solid var(--azul)}
@media (max-width:980px){.gasto-ficha{grid-template-columns:1fr}.gasto-ficha .visor{position:static}}

.orto-btn{display:block;margin-top:3px;font-size:11px;padding:2px 8px;border:1px solid var(--borde);border-radius:10px;background:#f6f9fc;color:var(--azul2);cursor:pointer}
.orto-btn:hover{background:var(--azul-claro)}
.permisos td{text-align:center} .permisos td:first-child{text-align:left} .permisos input{transform:scale(1.2)}

/* versión en la nube */
.aviso-nube { background: #FFF4D6; color: #6B4E00; border-bottom: 1px solid #E8C766; padding: 4px 12px; font-size: 13px; text-align: center; }
.login-nube { margin: -6px 0 10px; color: #555; font-size: 14px; text-align: center; }