:root{
  --bg:#1e2228;
  --panel:#262b33;
  --panel2:#2f3540;
  --border:#3a4150;
  --text:#e8eaed;
  --text-dim:#9aa3b2;
  --accent:#4c8dff;
  --eliminar:#e5484d;
  --agregar:#30a46c;
  --cambiar:#f5a524;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Login overlay */
#loginOverlay{
  position:fixed;
  inset:0;
  background:rgba(10,12,16,.88);
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
}
#loginCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  width:340px;
  max-width:92vw;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
#loginCard h2{margin:0 0 6px;font-size:18px;}
#loginCard p{margin:0 0 16px;color:var(--text-dim);}
#loginCard .teLabel{display:block;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-dim);margin:10px 0 4px;}
#loginCard .teLabel:first-of-type{margin-top:0;}
#loginCard input[type=text], #loginCard input[type=password]{
  width:100%;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:6px;
  padding:9px 10px;
  font:inherit;
  font-size:14px;
}
#logoutBtn{padding:5px 9px;font-size:12px;}

/* Project bar */
#projectBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  background:#161a20;
  border-bottom:1px solid var(--border);
  font-size:12.5px;
  flex-shrink:0;
}
#projectBarName{font-weight:700;color:var(--text);margin-right:auto;}
#switchProjectBtn, #downloadAllBtn, #saveProjectBtn{padding:5px 9px;font-size:12px;}
#saveProjectBtn.dirty{background:var(--cambiar);border-color:var(--cambiar);color:#111;font-weight:700;}
#saveProjectBtn:disabled{opacity:.4;cursor:not-allowed;}
.drawerToggle{display:none;padding:5px 9px;font-size:12px;}

#drawerBackdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:150;
}
#drawerBackdrop.show{display:block;}

/* Project picker overlay */
#projectPicker{
  position:fixed;
  inset:0;
  background:rgba(10,12,16,.72);
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
}
#projectPickerCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  width:520px;
  max-width:92vw;
  max-height:80vh;
  padding:24px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
#projectPickerCard h2{margin:0 0 6px;font-size:18px;}
#projectPickerCard p{margin:0 0 16px;color:var(--text-dim);}
#newProjectBtn{align-self:flex-start;margin-bottom:14px;background:var(--accent);border-color:var(--accent);color:#fff;}
#projectSearchInput{
  width:100%;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:6px;
  padding:9px 10px;
  font:inherit;
  font-size:13px;
  margin-bottom:12px;
}
#projectListEl{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px;}
.project-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  cursor:pointer;
}
.project-item:hover{border-color:var(--accent);}
.project-item .pi-name{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.project-item .pi-meta{font-size:11px;color:var(--text-dim);white-space:nowrap;}
.project-item .pi-del{opacity:.5;padding:3px 6px;border-radius:4px;flex-shrink:0;}
.project-item .pi-del:hover{opacity:1;color:var(--eliminar);background:rgba(255,255,255,.1);}

/* Top toolbar */
#toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  z-index:20;
}
#toolbar .group{
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 8px;
  border-right:1px solid var(--border);
}
#toolbar .group:last-child{border-right:none;}
button{
  background:var(--panel2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:7px 10px;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
button:hover{background:#38404d;}
button.active{background:var(--accent);border-color:var(--accent);color:#fff;}
button.stamp-eliminar.active{background:var(--eliminar);border-color:var(--eliminar);}
button.stamp-agregar.active{background:var(--agregar);border-color:var(--agregar);}
button.stamp-cambiar.active{background:var(--cambiar);border-color:var(--cambiar);}
button:disabled{opacity:.4;cursor:not-allowed;}
input[type=color]{width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:6px;background:none;}
input[type=range]{width:70px;}
select{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px;font-size:13px;}
label.small{font-size:11px;color:var(--text-dim);}

/* Main layout */
#main{
  flex:1;
  display:flex;
  min-height:0;
}

/* Sidebar: file list */
#sidebar{
  width:230px;
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
#sidebar h3{margin:10px 12px 6px;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;}
#fileList{flex:1;overflow-y:auto;padding:0 8px;}
.file-item{
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  margin-bottom:2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.file-item:hover{background:var(--panel2);}
.file-item.active{background:var(--accent);color:#fff;}
.file-item .fname-wrap{overflow:hidden;flex:1;min-width:0;}
.file-item .fname{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
}
.file-item .freport-input{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  background:rgba(255,255,255,.06);
  color:inherit;
  border:1px solid transparent;
  border-radius:4px;
  padding:2px 4px;
  font:inherit;
  font-size:11px;
  margin-top:2px;
}
.file-item .freport-input::placeholder{color:var(--text-dim);opacity:.7;}
.file-item .freport-input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.12);}
.file-item.active .freport-input{background:rgba(255,255,255,.15);color:#fff;}
.file-item.active .freport-input::placeholder{color:rgba(255,255,255,.7);}
.file-item .fcount{font-size:11px;opacity:.75;flex-shrink:0;}
.file-item .fremove{opacity:.5;flex-shrink:0;padding:2px 5px;border-radius:4px;}
.file-item .fremove:hover{opacity:1;background:rgba(255,255,255,.15);}
#addFileBtn{margin:8px;}
#dropHint{padding:20px 14px;color:var(--text-dim);font-size:12.5px;text-align:center;line-height:1.5;}

/* Viewer */
#viewerWrap{
  flex:1;
  overflow:auto;
  background:#12151a;
  display:flex;
  padding:24px;
  position:relative;
}
#emptyState{
  margin:auto;
  text-align:center;
  color:var(--text-dim);
  max-width:360px;
}
#emptyState h2{color:var(--text);font-size:18px;}
#pageStage{
  position:relative;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
  background:#fff;
  display:none;
  margin:auto;
  flex-shrink:0;
}
#pageStage canvas.pdfCanvas{display:block;}
#overlaySvg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  cursor:crosshair;
}
.stampIcon circle{stroke:#fff;stroke-width:2;}
.stampIcon text.symbol{font-size:20px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;}
.stampLabel{
  font-size:11px;
  font-family:inherit;
  fill:#111;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:3px;
}
.noteText{font-family:inherit;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:3px;}
.mark-selected{outline:2px dashed #4c8dff;}

/* Right panel: observations */
#obsPanel{
  width:280px;
  background:var(--panel);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
#obsPanel h3{margin:10px 12px 2px;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center;}

#obsTabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.obsTab{
  flex:1;
  background:none;
  border:none;
  border-radius:0;
  border-bottom:2px solid transparent;
  padding:10px 6px;
  color:var(--text-dim);
  font-size:12.5px;
}
.obsTab.active{color:var(--text);border-bottom-color:var(--accent);background:var(--panel2);}
#obsPane, #countsPane{flex:1;display:flex;flex-direction:column;min-height:0;}

#obsList{flex:1;overflow-y:auto;padding:6px 8px;}
.obs-item{
  background:var(--panel2);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:6px;
  padding:8px 10px;
  margin-bottom:6px;
  font-size:12.5px;
  cursor:pointer;
}
.obs-item:hover{border-color:var(--accent);}
.obs-item .obs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.obs-item .obs-tag{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
.obs-item .obs-page{color:var(--text-dim);font-size:11px;}
.obs-item .obs-note{color:var(--text);white-space:pre-wrap;word-break:break-word;}
.obs-item .obs-del{color:var(--text-dim);font-size:11px;margin-top:4px;text-align:right;}
.obs-item .obs-del:hover{color:var(--eliminar);}
.obs-eliminar{border-left-color:var(--eliminar);}
.obs-agregar{border-left-color:var(--agregar);}
.obs-cambiar{border-left-color:var(--cambiar);}
#obsEmpty{padding:16px 12px;color:var(--text-dim);font-size:12.5px;text-align:center;}
#obsFooter{padding:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;}

/* Counts (equipment tally) */
#countsList{flex:1;overflow-y:auto;padding:6px 8px;}
#countsEmpty{padding:16px 12px;color:var(--text-dim);font-size:12.5px;text-align:center;}
.count-item{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 10px;
  margin-bottom:6px;
  font-size:12.5px;
}
.count-item .count-top{display:flex;align-items:center;}
.count-item .count-label{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.count-item .count-num{font-weight:700;font-size:14px;}
.count-item .count-pages{color:var(--text-dim);font-size:11px;margin-top:3px;}
.count-item .count-actions{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px;}
.count-item .count-highlight{color:var(--accent);cursor:pointer;}
.count-item .count-highlight:hover{text-decoration:underline;}
.count-item .count-del{color:var(--text-dim);cursor:pointer;}
.count-item .count-del:hover{color:var(--eliminar);}
.count-item.highlighted{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}

#countToolGroup button.active{background:var(--accent);border-color:var(--accent);color:#fff;}
#countGroup select, #countGroup input[type=range]{vertical-align:middle;}
#countThreshold{width:70px;}

#countReviewBar{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  background:#1b2532;
  border:1px solid var(--accent);
  border-top:none;
  border-radius:0 0 10px 10px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:50;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  font-size:12.5px;
}
#countReviewLabel{font-weight:700;}
#countReviewBar button{padding:6px 10px;font-size:12px;}
#countReviewConfirm{background:var(--agregar);border-color:var(--agregar);color:#fff;}
#countReviewCancel{background:var(--panel2);}

.countDot{cursor:pointer;transition:opacity .15s;}
.countDot circle.dotFill{stroke:#fff;stroke-width:1.5;}
.countDot.pending circle.dotFill{stroke-dasharray:3 2;fill-opacity:.35;}
.countDot.excluded circle.dotFill{fill-opacity:.12;stroke-dasharray:2 2;}
.countDot.dim{opacity:.15;}
.countDot.emphasized circle.dotFill{stroke-width:2.5;}
.countDot .dotRing{
  transform-box:fill-box;
  transform-origin:center;
  animation:countPulse 1.3s ease-out infinite;
}
@keyframes countPulse{
  0%{transform:scale(1);opacity:.9;}
  100%{transform:scale(1.9);opacity:0;}
}
#tempSelectBox{fill:rgba(76,141,255,.15);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3;}

/* Page nav */
#pageNav{display:flex;align-items:center;gap:6px;}
#pageNumInput{width:44px;text-align:center;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 4px;}

/* Note popover */
#notePopover{
  position:fixed;
  background:#fff;
  color:#111;
  border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  padding:10px;
  width:220px;
  z-index:100;
  display:none;
}
#notePopover textarea{
  width:100%;
  min-height:60px;
  font-family:inherit;
  font-size:13px;
  border:1px solid #ccc;
  border-radius:6px;
  padding:6px;
  resize:vertical;
}
#notePopover .npRow{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;}
#notePopover button{padding:5px 10px;font-size:12px;}
#notePopover .npTitle{font-size:12px;font-weight:700;margin-bottom:6px;text-transform:uppercase;}

/* Tipo editor (centered modal, more fields than the note popover) */
#tipoEditor{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  color:#111;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  padding:16px;
  width:300px;
  z-index:200;
}
#tipoEditor .teLabel{display:block;font-size:11px;font-weight:700;text-transform:uppercase;color:#666;margin:10px 0 4px;}
#tipoEditor .teLabel:first-of-type{margin-top:0;}
#tipoEditor input[type=text]{
  width:100%;
  border:1px solid #ccc;
  border-radius:6px;
  padding:7px 8px;
  font:inherit;
  font-size:13px;
}
#tePreviewRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:10px;
  background:#f4f4f6;
  border-radius:8px;
}
#tePreviewSvg{flex-shrink:0;}
#tePreviewText{color:#555;line-height:1.4;}

/* Zip choice popover — same centered-modal look as the tipo editor */
#zipChoicePopover{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  color:#111;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  padding:16px;
  width:320px;
  z-index:200;
}
.zipChoiceBtn{
  width:100%;
  justify-content:flex-start;
  background:#f4f4f6;
  border:1px solid #ddd;
  color:#111;
  padding:10px 12px;
  margin-bottom:8px;
  font-size:13px;
}
.zipChoiceBtn:hover{background:#eaeaee;border-color:var(--accent);}

#toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:#222;
  color:#fff;
  padding:9px 16px;
  border-radius:8px;
  font-size:13px;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  max-width:min(90vw,560px);
  text-align:center;
  white-space:pre-wrap;
  word-break:break-word;
}
#toast.show{opacity:1;}

/* Matrix report (tipos x planos) */
#matrixModal{
  position:fixed;
  inset:0;
  background:rgba(10,12,16,.78);
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
#matrixCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  width:100%;
  height:100%;
  max-width:1400px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
#matrixHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#matrixHeader h2{margin:0 0 4px;font-size:17px;}
#matrixActions{display:flex;gap:8px;}
#matrixTableWrap{flex:1;overflow:auto;padding:16px 20px;}
#matrixTable{border-collapse:collapse;font-size:12.5px;min-width:100%;}
#matrixTable th, #matrixTable td{border:1px solid var(--border);padding:6px 10px;text-align:center;white-space:nowrap;}
#matrixTable thead th{
  position:sticky;top:0;
  background:var(--panel2);
  z-index:2;
  font-size:11.5px;
}
#matrixTable td.mx-rowlabel, #matrixTable th.mx-rowlabel{
  position:sticky;left:0;
  background:var(--panel2);
  text-align:left;
  z-index:1;
  min-width:160px;
}
#matrixTable thead th.mx-rowlabel{z-index:3;}
#matrixTable td.mx-group{
  text-align:left;
  color:var(--text-dim);
  font-size:11px;
  background:#20252d;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#matrixTable td.mx-swatch{padding:0 4px;width:14px;}
#matrixTable tr.mx-total td{font-weight:700;background:#20252d;}
#matrixTable td.mx-num{font-variant-numeric:tabular-nums;}
#matrixTable td.mx-zero{color:var(--text-dim);opacity:.4;}

/* Group headers inside the tipo/count lists */
.count-group-header{
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-dim);
  margin:12px 4px 4px;
}
.count-group-header:first-child{margin-top:2px;}
.count-item .count-grouptag{font-size:10px;color:var(--text-dim);margin-left:4px;}

#printArea{display:none;}
@media print{
  body > *:not(#printArea){display:none !important;}
  #printArea{display:block !important;}
}

/* Responsive: tablet / phone — sidebar and obs panel become slide-in drawers */
@media (max-width:860px){
  .drawerToggle{display:flex;}
  #projectBar{flex-wrap:wrap;row-gap:6px;}

  #sidebar, #obsPanel{
    position:fixed;
    top:0;bottom:0;
    width:min(82vw,320px);
    z-index:200;
    transition:transform .22s ease;
    box-shadow:0 0 24px rgba(0,0,0,.5);
  }
  #sidebar{left:0;transform:translateX(-100%);}
  #obsPanel{right:0;transform:translateX(100%);}
  #sidebar.open, #obsPanel.open{transform:translateX(0);}

  /* touch-friendlier targets */
  button{padding:9px 12px;min-height:38px;}
  #toolbar .group{padding:0 6px;}
  input[type=range]{width:56px;}

  #notePopover{max-width:90vw;}
  #tipoEditor, #zipChoicePopover{width:min(92vw,320px);}
}

@media (max-width:520px){
  #projectBarName{font-size:12px;}
  #downloadAllBtn span.dlText{display:none;}
}