/* TEMPLE Aperturas — tokens del manual de marca. Radio 0 en todo (lenguaje wireframe). */
:root{
  --ink:#231f20;
  --paper:#f4f2ee;
  --surface:#fffefb;
  --yellow:#fae100;
  --magenta:#d40f7d;
  --cyan:#219895;
  --cyan-deep:#135f5d;
  --n100:#faf9f6; --n200:#eceae5; --n300:#ddd9d2; --n400:#bdb8b0;
  --n500:#9a948c; --n600:#7a746d; --n700:#57524c; --n800:#3a3634; --n900:#231f20;
  --divider:rgba(35,31,32,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.15}
h3{font-size:25px}
h5{font-size:16px}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit;border-radius:0}
button{cursor:pointer}
a{color:var(--magenta);text-decoration:none}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.hide{display:none !important}

/* --- Marcas de registro (+ en las 4 esquinas) ---------------------------- */
.blueprint{position:relative}
.blueprint > .corner{position:absolute;width:11px;height:11px;pointer-events:none}
.corner::before,.corner::after{content:"";position:absolute;background:rgba(35,31,32,.55)}
.corner::before{left:0;right:0;top:5px;height:1px}
.corner::after{top:0;bottom:0;left:5px;width:1px}
.corner.tl{left:-6px;top:-6px} .corner.tr{right:-6px;top:-6px}
.corner.bl{left:-6px;bottom:-6px} .corner.br{right:-6px;bottom:-6px}

/* --- Botones y chips ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:0 13px;font-weight:600;font-size:14px;
  background:var(--surface);border:1px solid var(--divider);color:var(--ink)}
.btn:hover{background:var(--n200)}
.btn-primary{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn-primary:hover{background:#ab0a64}
.btn-ghost{background:transparent;border-color:transparent;color:var(--magenta)}
.btn-ghost:hover{background:transparent;color:#ab0a64;text-decoration:underline}
.btn-sm{min-height:32px;padding:0 10px;font-size:13px}
.btn-on{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn-danger{color:var(--magenta);border-color:var(--magenta);background:transparent}

.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  font-weight:600;font-size:11px;line-height:18px;border:1px solid var(--divider);background:var(--surface)}
.tag-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.tag-magenta{background:var(--magenta);border-color:var(--magenta);color:#fff}
.tag-cyan{background:var(--cyan-deep);border-color:var(--cyan-deep);color:#fff}

.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--n600)}
.field input,.field select,.field textarea{
  min-height:38px;padding:7px 10px;font-size:15px;
  background:var(--paper);border:1px solid var(--divider)}
.field textarea{min-height:78px;resize:vertical;line-height:1.4}

.bar{height:10px;background:var(--n300);position:relative;overflow:hidden}
.bar > i{position:absolute;inset:0 auto 0 0;display:block}

/* --- Layout -------------------------------------------------------------- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:13px;padding:11px 18px;background:var(--ink);position:sticky;top:0;z-index:30}
.wordmark{font-weight:600;font-size:22px;letter-spacing:.2em;line-height:1;color:var(--yellow)}
.topbar .sep{width:1px;height:18px;background:rgba(244,242,238,.3)}
.topbar .sub{font-weight:600;font-size:15px;color:rgba(244,242,238,.72)}
.topbar .spacer{flex:1}
.netbtn{display:flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;background:transparent;white-space:nowrap;
  border:1px solid rgba(244,242,238,.35);color:var(--paper);font-weight:600;font-size:13px}
.netbtn i{width:8px;height:8px;background:var(--cyan);display:block}
.netbtn.off i{background:var(--n500)}
.offbanner{display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--yellow);font-size:13px;color:var(--ink)}
.offbanner b{font-weight:600}

.body{flex:1;display:flex;align-items:stretch}
.sidebar{width:288px;flex:none;border-right:1px solid var(--divider);padding:20px 16px;
  display:flex;flex-direction:column;gap:18px;background:var(--n100)}
.projcard{text-align:left;background:var(--surface);border:1px solid var(--divider);padding:12px;
  display:flex;flex-direction:column;gap:3px}
.navlist{display:flex;flex-direction:column;gap:2px}
.navlink{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;text-align:left;
  background:transparent;border:0;border-left:3px solid transparent;font-size:15px}
.navlink:hover{background:var(--n200)}
.navlink.on{background:var(--surface);border-left-color:var(--magenta);font-weight:600}
.navlink .count{color:var(--n600);font-size:13px}
.arealist{display:flex;flex-direction:column;gap:5px}
.arealink{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 6px;background:transparent;
  border:0;border-left:3px solid transparent;font-size:14px}
.arealink:hover{background:var(--n200)}
.arealink.on{border-left-color:var(--magenta);background:var(--surface);font-weight:600}
.arealink .sw{width:9px;height:9px;flex:none}
.arealink .code{font-weight:600;font-size:12px;width:32px;flex:none;color:var(--n600)}
.arealink .nm{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{flex:1;min-width:0;padding:18px 18px 96px;max-width:1100px}
.view{display:flex;flex-direction:column;gap:18px}
.vhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vhead h3{padding:2px 9px}
.h-yellow{background:var(--yellow)}
.h-magenta{background:var(--magenta);color:#fff}
.h-cyan{background:var(--cyan-deep);color:#fff}
.muted{font-size:13px;color:var(--n700)}
.label{font-size:12px;color:var(--n600)}

.tabbar{position:fixed;left:0;right:0;bottom:0;height:52px;display:flex;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:var(--surface);border-top:1px solid var(--divider);z-index:30}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{flex:1 0 auto;min-width:74px;background:transparent;border:0;
  border-top:3px solid transparent;font-size:11px;font-weight:600;color:var(--n700);padding:0 8px;white-space:nowrap}
.tabbar button.on{border-top-color:var(--magenta);color:var(--ink)}

/* --- Resumen ------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--divider);padding:14px}
.ringcard{padding:18px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;background:var(--surface)}
.ringwrap{position:relative;width:134px;height:134px;flex:none}
.ringwrap svg{width:134px;height:134px;transform:rotate(-90deg)}
.ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringtxt b{font-weight:600;font-size:42px;line-height:1}
.ringtxt b span{font-size:20px}
.metrics{flex:1;min-width:220px;display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:12px}
.metric{padding-left:11px;border-left:4px solid var(--n300)}
.metric b{display:block;font-weight:600;font-size:31px;line-height:1.05}
.metric span{font-size:13px;color:var(--n700)}
.m-done{border-left-color:var(--yellow)}
.m-wip{border-left-color:var(--cyan)}
.m-late{border-left-color:var(--magenta)}
.m-late b{color:var(--magenta)}

.blockrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--divider);
  border-left:5px solid var(--magenta);padding:11px 12px;text-align:left;min-height:58px;width:100%}
.blockrow:hover{background:var(--n100)}
.blockrow .r{text-align:right;flex:none}
.blockrow .r b{font-weight:600;font-size:14px;color:var(--magenta)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.areacard{background:var(--surface);border:1px solid var(--divider);border-top:5px solid var(--n400);
  padding:13px;display:flex;flex-direction:column;gap:10px;text-align:left;width:100%}
.areacard:hover{background:var(--n100)}
.areacard .top{display:flex;align-items:baseline;gap:8px}
.areacard .top .nm{font-weight:600;font-size:20px;flex:1;line-height:1.15}
.areacard .top .pc{font-weight:600;font-size:20px}
.areacard .foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n700)}
.codechip{padding:1px 6px;font-weight:600;font-size:11px}

/* --- Area / checklist ---------------------------------------------------- */
.moneystrip{display:flex;flex-wrap:wrap;gap:22px;padding:14px;background:var(--surface);border:1px solid var(--divider)}
.moneystrip .m b{display:block;font-weight:600;font-size:24px;line-height:1.2}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters .btn{min-height:34px}
.filters .btn span{font-weight:400;color:var(--n600);margin-left:4px}
.filters .btn.on span{color:inherit;opacity:.75}
.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:10px 12px;
  background:var(--surface);border:1px solid var(--divider);font-size:13px}
.legend .it{display:flex;align-items:center;gap:7px}
.legend .sw{width:16px;height:16px;border:1px solid var(--n400);display:block}
.editbanner{padding:11px 13px;background:var(--yellow);font-size:13px;line-height:1.4}
.editbanner b{display:block;font-weight:600;margin-bottom:3px}

.cathead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px;border-bottom:2px solid var(--n400)}
.cathead .no{font-weight:600;font-size:13px;color:var(--n500)}
.cathead .nm{font-weight:600;font-size:18px}
.cathead .cnt{margin-left:auto;font-size:13px;color:var(--n700)}
.cathead input{min-height:34px;padding:0 8px;font-size:18px;font-weight:600;background:var(--paper);border:1px solid var(--divider)}
.catblock{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}

.trow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--divider);border-left:5px solid var(--n400);min-height:58px;padding:6px 12px 6px 0}
.trow.over{box-shadow:inset 0 3px 0 var(--magenta)}
.trow.s-done{border-left-color:var(--cyan)}
.trow.s-wip{border-left-color:var(--cyan-deep)}
.trow.s-late{border-left-color:var(--magenta)}
.trow.s-na{border-left-color:var(--n300);background:var(--n100)}
.trow.s-na .nm{color:var(--n500);text-decoration:line-through;text-decoration-color:var(--n400)}
.tcheck i.na{border-style:dashed;color:var(--n500);background:transparent}
.grip{flex:none;width:30px;min-height:44px;text-align:center;color:var(--n400);cursor:grab;
  font-size:16px;background:none;border:0;touch-action:none;user-select:none;-webkit-user-select:none}
.grip:hover{color:var(--n700)}
.grip:active{cursor:grabbing}
.trow.drag{opacity:.9;background:var(--n100);box-shadow:0 2px 10px rgba(35,31,32,.18);position:relative;z-index:5}
.tcheck{flex:none;width:56px;height:58px;display:flex;align-items:center;justify-content:center;background:none;border:0}
.tcheck i{width:26px;height:26px;border:1px solid var(--n400);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;font-style:normal;background:var(--surface)}
.tcheck i.on{background:var(--cyan);border-color:var(--cyan);color:#fff}
.tcheck i.part{border-color:var(--cyan-deep);color:var(--cyan-deep)}
.tname{flex:1 1 230px;min-width:190px;display:flex;flex-direction:column;gap:5px}
.tname .nm{font-size:15px;line-height:1.35;text-wrap:pretty}
.tname .mini{height:5px;background:var(--n300);position:relative}
.tmeta{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.tmeta .due{font-size:12px;color:var(--n700);white-space:nowrap}
.tmeta .due.late{color:var(--magenta);font-weight:600}
.tmeta .who{font-size:12px;color:var(--n700);white-space:nowrap}
.tmeta .cam{font-size:12px;color:var(--n600)}
.tmoney{display:grid;grid-template-columns:auto auto auto;gap:1px 8px;justify-items:end;align-items:center;font-size:12px}
.tmoney .k{color:var(--n600)}
.tmoney .v{font-variant-numeric:tabular-nums}
.tmoney .v.real{font-weight:600}
.tmoney .dev{grid-row:1 / span 2;grid-column:3;padding:2px 7px;font-weight:600;font-size:11px;border:1px solid var(--divider)}
.tmoney .dev.over{background:var(--magenta);border-color:var(--magenta);color:#fff}
.tmoney .dev.under{background:var(--cyan-deep);border-color:var(--cyan-deep);color:#fff}
.tag-alerta{background:transparent;border:1px solid var(--magenta);color:var(--magenta)}
.blockrow.es-arranque{border-left-color:var(--n700)}
.gtbar.sinarranque{border-left-width:4px;border-left-color:var(--magenta)}
.xbtn{flex:none;background:none;border:0;color:var(--n500);font-size:15px;padding:4px 6px}
.xbtn:hover{color:var(--magenta)}
.quickadd{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.quickadd input,.quickadd select{min-height:38px;padding:0 10px;background:var(--surface);border:1px solid var(--divider)}
.quickadd input{flex:1 1 240px}

/* --- Etapas -------------------------------------------------------------- */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--cyan)}
.stage{position:relative;margin-bottom:22px;display:flex;flex-direction:column;gap:8px}
.stage .dot{position:absolute;left:-26px;top:4px;width:16px;height:16px;border:2px solid var(--cyan);background:var(--surface)}
.stage .dot.full{background:var(--cyan)}
.stage .dot.part{background:rgba(33,152,149,.35)}
.stage .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stage .hd .nm{font-weight:600;font-size:21px}
.stage .chips{display:flex;gap:6px;flex-wrap:wrap}

/* --- Cronograma (Gantt) --------------------------------------------------- */
.gantt{display:flex;border:1px solid var(--divider);background:var(--surface);overflow:hidden}
.gcol{flex:none;width:210px;border-right:1px solid var(--divider);background:var(--n100)}
.gscroll{flex:1;min-width:0;overflow-x:auto;cursor:grab}
.gscroll.pan{cursor:grabbing;user-select:none}
.gbody{position:relative}

/* Encabezado de dos bandas: mes arriba, dias abajo */
.ghead{height:44px;position:relative;border-bottom:1px solid var(--divider);background:var(--n100);z-index:1}
.gbanda-mes{position:absolute;top:0;left:0;right:0;height:22px;border-bottom:1px solid var(--divider)}
.gbanda-dia{position:absolute;top:22px;left:0;right:0;height:22px}
.gmes{position:absolute;top:4px;font-size:11px;font-weight:600;color:var(--n700);padding-left:5px;white-space:nowrap}
.gdia{position:absolute;top:0;height:22px;line-height:22px;text-align:center;font-size:10px;
  color:var(--n600);font-variant-numeric:tabular-nums}
.gdia.nolab{color:var(--n400)}
.gline{position:absolute;top:0;bottom:0;width:1px;background:var(--divider)}
/* Sabados y domingos: en obra no se trabaja, y verlos ayuda a leer el plazo */
.gfinde{position:absolute;top:44px;bottom:0;background:rgba(35,31,32,.04);pointer-events:none}

/* Cada fila de la columna izquierda tiene que medir igual que su par de la derecha */
.grow{height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;
  border-bottom:1px solid var(--divider);box-sizing:border-box}
.gtitulo{height:38px;background:var(--n200);font-weight:600}
.gcat{background:transparent;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.gtarea{height:28px;font-size:12px;color:var(--n700);padding-left:26px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:block;line-height:28px}
.gcol .gcat{cursor:pointer}
.gcol .gcat:hover{background:var(--n200)}

.gbar{position:absolute;top:8px;height:18px;background:var(--n200);border:1px solid var(--n400);box-sizing:border-box;cursor:pointer;
  display:flex;align-items:center;overflow:hidden}
.gbar > i{position:absolute;inset:0 auto 0 0;display:block}
.gbar > b{position:relative;font-size:11px;font-weight:600;padding:0 6px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.gtbar{position:absolute;top:6px;height:16px;background:var(--n200);border:1px solid var(--n400);box-sizing:border-box;padding:0;
  cursor:pointer;display:flex;align-items:center;overflow:hidden}
.gtbar > i{position:absolute;inset:0 auto 0 0;display:block}
.gtbar > b{position:relative;font-size:10px;font-weight:600;padding:0 5px;font-variant-numeric:tabular-nums}
.gtbar:hover{outline:2px solid var(--ink);outline-offset:1px}
.ghito{position:absolute;top:5px;width:18px;height:18px;border:1px solid;padding:0;
  font-size:10px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;
  transform:rotate(45deg)}
.ghito:hover{outline:2px solid var(--ink);outline-offset:1px}
.ghitotxt{position:absolute;top:6px;font-size:11px;color:var(--n600);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.ghoy{position:absolute;top:44px;bottom:0;width:2px;background:var(--magenta);z-index:2}
.gapertura{position:absolute;top:44px;bottom:0;width:0;border-left:2px dashed var(--cyan-deep);z-index:2}
.gaperturatxt{position:absolute;top:48px;font-size:10px;font-weight:600;color:var(--cyan-deep);
  background:var(--surface);padding:0 3px;z-index:3}

@media(max-width:600px){
  .gcol{width:132px}
  .grow{padding:0 7px;gap:5px}
  .gtarea{padding-left:14px;font-size:11px}
}

/* --- Archivos ------------------------------------------------------------ */
.filecard{background:var(--surface);border:1px solid var(--divider);padding:13px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.filecard .top{display:flex;align-items:flex-start;gap:8px}
.filecard .nm{font-weight:600;font-size:17px;line-height:1.2}
.dropzone{border:2px dashed var(--cyan-deep);background:transparent;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;min-height:120px;padding:13px;
  color:var(--cyan-deep);font-size:13px;text-align:center}
.dropzone.hot{background:rgba(33,152,149,.1)}

/* --- Proyectos ----------------------------------------------------------- */
.projgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.pcard{background:var(--surface);border:1px solid var(--divider);border-top:5px solid var(--magenta);
  padding:14px;display:flex;flex-direction:column;gap:9px;text-align:left;width:100%}
.pcard:hover{background:var(--n100)}
.pcard .nm{font-weight:600;font-size:21px;line-height:1.15}
.pcard .pc{font-weight:600;font-size:34px;line-height:1}

/* --- Sheet (detalle de tarea / formularios) ------------------------------ */
.scrim{position:fixed;inset:0;background:rgba(35,31,32,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:540px;max-height:92vh;background:var(--surface);border:1px solid var(--ink);
  display:flex;flex-direction:column;animation:sheetUp .2s ease-out}
@media(min-width:900px){ .sheet{max-height:84vh;margin-bottom:24px} }
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet .hd{display:flex;align-items:flex-start;gap:10px;padding:14px;border-bottom:1px solid var(--divider)}
.sheet .sc{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:14px}
.sheet .ft{display:flex;gap:8px;padding:14px;border-top:1px solid var(--divider)}
.sheet .ft .btn{flex:1}
.pctbtns{display:flex;gap:6px;flex-wrap:wrap}
.pctbtns .btn{flex:1;min-width:58px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumb{position:relative;width:88px;height:88px;border:1px solid var(--divider);object-fit:cover;display:block;background:var(--n200)}
.thumbwrap{position:relative}
.thumbwrap .xbtn{position:absolute;top:0;right:0;background:var(--surface);border:1px solid var(--divider)}
/* Importe con su selector de moneda pegado a la izquierda */
.importe{display:flex;min-width:0;border:1px solid var(--divider);background:var(--paper)}
.importe select{flex:none;width:62px;min-height:38px;border:0;border-right:1px solid var(--divider);
  background:var(--n200);font-weight:600;font-size:14px;padding:0 6px}
.importe input{flex:1;min-width:0;min-height:38px;border:0;background:transparent;padding:7px 10px;font-size:15px}

/* Tabla chica de totales por moneda de origen */
.ccytable{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 14px;font-size:14px;align-items:baseline}
.ccytable .h{font-size:12px;color:var(--n600);text-align:right}
.ccytable .k{font-size:13px;color:var(--n700)}
.ccytable .num{text-align:right;font-weight:600}

.thumb.pendiente{opacity:.65;border-style:dashed}
.thumbwrap .encola{position:absolute;left:0;bottom:0;background:var(--yellow);color:var(--ink);
  font-size:10px;font-weight:600;padding:1px 5px;letter-spacing:.02em}
.adjunto{width:88px;height:88px;border:1px solid var(--divider);background:var(--n100);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;padding:6px;color:var(--cyan-deep);text-decoration:none}
.adjunto:hover{background:var(--n200)}
.adjunto span{font-size:10px;line-height:1.2;color:var(--n700);word-break:break-word}
input[type="date"]{cursor:pointer}

.camera{width:88px;height:88px;border:2px dashed var(--cyan-deep);color:var(--cyan-deep);background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}

/* Separador de categoria en el listado de proveedores */
.catsep{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px;padding-bottom:4px;
  border-bottom:2px solid var(--cyan-deep);font-weight:600;font-size:15px}

/* Administrar categorias */
.catlista{display:flex;flex-direction:column;gap:4px}
.catrow{display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--divider);padding:4px 8px}
.catrow.drag{opacity:.9;box-shadow:0 2px 10px rgba(35,31,32,.18);position:relative;z-index:5}
.catrow input{flex:1;min-height:32px;border:0;background:transparent;font-size:14px;padding:0 4px}
.catrow .grip{min-height:32px;width:24px}

.provrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;
  border-bottom:1px solid var(--divider)}
.provrow:last-child{border-bottom:0}
.provrow:hover{background:var(--n100)}

/* --- Pedido inicial ------------------------------------------------------- */
.prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;
  border-bottom:1px solid var(--divider);min-height:50px}
.prow:hover{background:var(--n100)}
.pnom{flex:1 1 220px;min-width:170px;display:flex;flex-direction:column;gap:1px;font-size:14px;line-height:1.3}
.pmeta{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pmeta input,.pmeta select{min-height:32px;border:1px solid var(--divider);background:var(--paper);
  font-size:13px;padding:0 6px}
.pqty{width:62px;text-align:right;font-variant-numeric:tabular-nums}
.punit{width:88px}
.pprov{width:140px}
.pest{width:118px;font-size:12px}

@media(max-width:600px){
  .pnom{flex-basis:100%}
  .pmeta{margin-left:0;width:100%}
  .pprov{flex:1 1 120px;width:auto}
  .pest{flex:1 1 110px;width:auto}
}

/* --- Reporte imprimible --------------------------------------------------- */
.reporte{background:var(--surface);border:1px solid var(--divider);padding:26px}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid var(--ink);padding-bottom:10px}
.rwordmark{font-weight:600;font-size:22px;letter-spacing:.2em;line-height:1}
.rtitulo{margin:22px 0 8px;font-size:15px;font-weight:600;
  border-bottom:1px solid var(--divider);padding-bottom:4px}
.rkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:14px 0}
.rkpis > div{border-left:4px solid var(--ink);padding-left:10px}
.rkpis b{display:block;font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.rkpis span{font-size:12px;color:var(--n700)}
.rtabla{width:100%;border-collapse:collapse;font-size:13px}
.rtabla th{text-align:left;font-size:11px;font-weight:600;color:var(--n600);
  border-bottom:1px solid var(--divider);padding:4px 6px}
.rtabla td{padding:6px;border-bottom:1px solid var(--n200);vertical-align:top}
.rtabla .r{text-align:right;font-variant-numeric:tabular-nums}
.rbar{display:block;height:8px;background:var(--n300);position:relative}
.rbar > i{position:absolute;inset:0 auto 0 0;display:block}
.rpie{margin-top:22px;padding-top:8px;border-top:1px solid var(--divider);
  font-size:11px;color:var(--n600)}

@media print{
  @page{margin:14mm}
  body{background:#fff}
  .topbar,.sidebar,.tabbar,.noprint,#toast,#sheet{display:none !important}
  main{padding:0 !important;max-width:none !important}
  .reporte{border:0;padding:0}
  .view{gap:0}
  .rtitulo,.rtabla{break-inside:avoid}
  .rtabla tr{break-inside:avoid}
}

/* --- Toast / login ------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:60;
  background:var(--ink);color:var(--yellow);font-weight:600;font-size:14px;padding:10px 16px;
  box-shadow:0 6px 20px rgba(35,31,32,.28)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--ink)}
.login form{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--divider);
  padding:22px;display:flex;flex-direction:column;gap:12px}
.login .wordmark{color:var(--ink);margin-bottom:4px}
.login .err{color:var(--magenta);font-size:13px;font-weight:600}
.empty{padding:28px 14px;text-align:center;color:var(--n600);border:1px dashed var(--divider);background:var(--surface)}

@media(max-width:899px){
  main{padding:14px 14px 90px}
  h3{font-size:22px}
  /* El grip tocable (30px) empuja el nombre fuera de la primera linea: se achica
     la base del nombre para que entre junto al grip y al checkbox, y crezca solo. */
  .tname{flex:1 1 150px;min-width:140px}
}
@media(max-width:480px){
  /* En el celular los importes van uno debajo del otro: dos columnas dejan ~100px
     de ancho util y cargar un monto largo se vuelve incomodo. */
  .row2{grid-template-columns:minmax(0,1fr)}
  .topbar{gap:8px;padding:10px 12px}
  /* Con tres botones a la derecha ("En línea", Equipo, Salir) el subtítulo ya no
     entra: se oculta para que no se corte "Salir". */
  .topbar .sub, .topbar .sep{display:none}
  .netbtn{padding:0 8px;font-size:12px;gap:5px}
  .wordmark{font-size:19px;letter-spacing:.16em}
}