@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root{
  --bg:#eef0f3;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --ink:#1b2433;
  --ink-soft:#4b5566;
  --muted:#7c8494;
  --line:#d8dce3;
  --accent:#c65a28;
  --accent-ink:#ffffff;
  --steel:#2c4c6b;
  --steel-soft:#e3ebf1;
  --ok:#2f7a4f;
  --ok-soft:#dcefe2;
  --warn:#b3841a;
  --warn-soft:#f6e9cd;
  --danger:#b3402c;
  --shadow: 0 1px 2px rgba(20,30,45,.06), 0 6px 20px rgba(20,30,45,.06);
  --focus: 0 0 0 3px rgba(198,90,40,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:15px;
  line-height:1.5;
  padding-inline:16px;
  padding-block:20px 64px;
}
.wrap{max-width:760px;margin:0 auto;}
h1,h2,h3{margin:0;}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:none; box-shadow:var(--focus);}
::placeholder{color:var(--muted);}
a{color:var(--steel);}

/* ---------- login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding-block:40px;}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:32px; max-width:360px; width:100%;
}
.login-kicker{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:6px;}
.login-title{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:26px; margin-bottom:4px;}
.login-sub{color:var(--muted); font-size:13.5px; margin:0 0 20px;}
.login-error{background:#fbeae6; color:var(--danger); border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:14px;}
.login-form{display:flex; flex-direction:column; gap:5px;}
.login-form label{font-size:12px; color:var(--muted); margin-top:8px;}
.login-form input{width:100%;}
.btn-block{width:100%; margin-top:18px;}

/* ---------- header ---------- */
.masthead{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px; margin-bottom:14px;}
.masthead-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.kicker{font-family:"IBM Plex Sans Condensed", sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:4px;}
.title{font-family:"IBM Plex Sans Condensed", sans-serif; font-weight:700; font-size:26px; color:var(--ink);}
.who{text-align:right; font-size:12.5px;}
.who-name{font-weight:600;}
.who-rol{color:var(--muted); font-size:11.5px;}
.who-links{margin-top:4px; font-size:12px;}
.who-links a{text-decoration:none;}
.who-links a:hover{text-decoration:underline;}

.sync{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:5px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); white-space:nowrap;}
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
.sync.live .dot{background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);}
.sync.off .dot{background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft);}

.datebar{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap;}
.datebar button.nav{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2); color:var(--ink); font-size:16px; cursor:pointer; display:flex;align-items:center;justify-content:center;}
.datebar button.nav:hover{border-color:var(--steel);}
.date-human{font-weight:600; font-size:14.5px; flex:1; min-width:160px;}
.date-human .sub{display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:1px;}
.datebar input[type=date]{padding:6px 8px; font-size:13px;}

.infogrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px;}
.infofield label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;}
.infofield input{width:100%;}
.infofield .static{display:flex; align-items:center; height:35px; padding:0 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:14px; color:var(--ink-soft);}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; margin-bottom:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto; padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; white-space:nowrap;}
.tab .n{font-family:"IBM Plex Mono",monospace; font-size:11px; background:var(--surface-2); border-radius:999px; padding:1px 6px; color:var(--muted);}
.tab.active{background:var(--steel); border-color:var(--steel); color:#fff;}
.tab.active .n{background:rgba(255,255,255,.2); color:#fff;}

.panel{display:none;}
.panel.active{display:block;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); margin-bottom:14px;}
.card h2{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:16px; color:var(--steel); display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.hint{font-size:12.5px; color:var(--muted); margin:-4px 0 12px;}

.quickform{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-bottom:14px;}
.quickform .full{grid-column:1/-1;}
.quickform label{display:block; font-size:11px; color:var(--muted); margin-bottom:3px; letter-spacing:.03em;}
.quickform input, .quickform select{width:100%;}
.btn{border:none; border-radius:9px; padding:9px 16px; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; justify-content:center;}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn-add{background:var(--accent); color:var(--accent-ink); grid-column:1/-1;}
.btn-add:hover{filter:brightness(1.05);}
.btn-ghost{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--steel); color:var(--steel);}

.rows{display:flex; flex-direction:column; gap:8px;}
.row{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-2); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:13.5px;}
.row .rmain{font-weight:600; color:var(--ink); flex:1 1 160px;}
.row .rmeta{color:var(--ink-soft); display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.row .tag{font-family:"IBM Plex Mono",monospace; font-size:11px; padding:2px 7px; border-radius:6px; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);}
.row .tag.terreno{background:var(--warn-soft); color:var(--warn); border-color:transparent;}
.row .tag.mecanica{background:#fbe4e0; color:var(--danger); border-color:transparent;}
.row .obs{width:100%; color:var(--muted); font-size:12.5px;}
.row-actions{display:flex; gap:6px; margin-left:auto;}
.iconbtn{width:28px;height:28px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px;}
.iconbtn:hover{border-color:var(--steel); color:var(--steel);}
.empty{color:var(--muted); font-size:13px; padding:10px 2px;}

.progress-track{width:70px; height:6px; border-radius:99px; background:var(--line); overflow:hidden; flex:0 0 auto;}
.progress-fill{height:100%; background:var(--ok);}

.photo-controls{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}
.photo-controls label.btn{position:relative; overflow:hidden;}
.photo-controls input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:12px;}
.gallery .shot{position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1/1; background:var(--surface-2);}
.gallery .shot img{width:100%;height:100%;object-fit:cover; display:block;}
.gallery .shot .cap{position:absolute; left:0; right:0; bottom:0; font-size:9.5px; text-align:center; padding:2px 3px; background:rgba(0,0,0,.55); color:#fff;}
.gallery .shot .del{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:6px; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:11px; cursor:pointer;}

.rowphoto{display:flex; align-items:center; gap:6px;}
.rowphoto img{width:30px;height:30px;border-radius:6px;object-fit:cover; border:1px solid var(--line);}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:4px;}
.stat{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-2);}
.stat .num{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:22px; color:var(--steel);}
.stat .lab{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}

.signrow{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); margin-bottom:8px; flex-wrap:wrap;}
.signrow .who2{flex:1; min-width:180px;}
.signrow .name{font-weight:600;}
.signrow .role{font-size:12px; color:var(--muted);}
.signrow .stamp{font-size:11.5px; color:var(--ok); font-family:"IBM Plex Mono",monospace;}
.signrow .stamp.pending{color:var(--danger);}
.signrow .btn-sm{padding:7px 12px; font-size:12.5px;}

.signimgwrap{background:#fff; border:1px solid var(--line); border-radius:8px; padding:4px 8px;}
.signimgwrap .signimg{display:block; height:36px; width:auto; max-width:160px; object-fit:contain;}

.signpad-wrap{flex:1 1 100%; display:flex; flex-direction:column; gap:8px;}
.signpad{width:100%; max-width:520px; height:150px; background:#fff; border:1.5px dashed var(--line); border-radius:10px; touch-action:none; cursor:crosshair;}
.signpad-hint{font-size:11.5px; color:var(--muted);}
.signpad-actions{display:flex; gap:8px; flex-wrap:wrap;}

.footerbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}

.notice{border:1px solid var(--warn); background:var(--warn-soft); color:var(--ink); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px;}
.notice.error{border-color:var(--danger); background:#fbeae6;}

/* modo solo consulta */
body.ro .quickform, body.ro .photo-controls{display:none;}

/* usuarios (admin) */
.userrow{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); margin-bottom:8px; flex-wrap:wrap;}
.userrow .u-main{flex:1; min-width:160px;}
.userrow .u-name{font-weight:600;}
.userrow .u-meta{font-size:12px; color:var(--muted);}
.userrow .u-actions{display:flex; gap:6px; flex-wrap:wrap;}
.chip{font-family:"IBM Plex Mono",monospace; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--steel-soft); color:var(--steel);}
.chip.inactive{background:#f0f1f3; color:var(--muted);}

/* print view */
#printView{display:none;}
@media print{
  body *{visibility:hidden;}
  #printView, #printView *{visibility:visible;}
  #printView{display:block; position:absolute; inset:0; padding:0;}
  .no-print{display:none !important;}
}
.pv-title{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:22px; margin-bottom:2px;}
.pv-sub{color:#555; font-size:12px; margin-bottom:14px;}
.pv-section{margin-top:18px;}
.pv-section h3{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:14px; border-bottom:2px solid #222; padding-bottom:4px; margin-bottom:8px;}
.pv-table{width:100%; border-collapse:collapse; font-size:12px;}
.pv-table th,.pv-table td{border:1px solid #999; padding:5px 7px; text-align:left;}
.pv-photos{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.pv-photos img{width:120px; height:120px; object-fit:cover; border:1px solid #999;}
.pv-sign{display:flex; gap:24px; margin-top:26px; flex-wrap:wrap;}
.pv-sign div{flex:1; min-width:160px; border-top:1px solid #222; padding-top:6px; font-size:12px;}

@media (max-width:480px){
  .title{font-size:21px;}
  .masthead{padding:14px;}
  .card{padding:13px;}
  .who{text-align:left;}
  .masthead-top{flex-direction:column;}
}