/* =========================================================
   TEMA PREMIUM — camada final de acabamento.
   Direção: ateliê técnico. Papel porcelana, menu em café escuro com a marca em latão,
   títulos na mesma serifa dos relatórios em PDF, traço fino e muito ar entre os campos.
   ========================================================= */

/* ---------- tipografia ---------- */
body{font-size:14.5px; letter-spacing:0; text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:var(--font-display); font-weight:500; letter-spacing:-.012em; color:var(--ink);}
.eyebrow{display:none;}   /* o menu já diz onde você está */
.hero h1{font-size:34px; line-height:1.08; margin:0 0 10px;}
.hero p.sub{font-size:14.5px; line-height:1.6; color:var(--muted); max-width:62ch; margin:0 0 30px;}
.modal-head h2{font-family:var(--font-display); font-size:24px; font-weight:500;}

/* ---------- folhas (cada seção é uma folha de papel) ---------- */
.wrap{max-width:1080px; padding:48px 44px 140px;}
.hero, .room, .addroom{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card);}
.hero{padding:42px 48px 44px; margin-bottom:28px; box-shadow:var(--shadow-sheet); overflow:visible;}
.hero::before{display:none;}
.room{box-shadow:var(--shadow-sheet); margin-bottom:26px;}
.addroom{border:1px dashed var(--line-strong); box-shadow:none; background:transparent; padding:20px 26px;}
.addroom .label{font-family:var(--font-display); font-size:19px; font-weight:500;}
.addroom select, .addroom input[type=text]{width:auto; flex:1 1 210px; min-width:0;}

/* ---------- campos ---------- */
.grid-fields{gap:22px 22px;}
.field label, .oc-add-label, .hero .oc-add-label{
  display:block; margin:0 0 7px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-soft);
}
.field input, .field select, .field textarea,
.addroom select, .addroom input[type=text]{
  width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:#fff; color:var(--ink); font:500 14px/1.4 var(--font-ui);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:0;}
.field input::placeholder, .field textarea::placeholder{color:#A7A08F; font-weight:400;}
.field input:hover, .field select:hover, .field textarea:hover{border-color:#BDB39B;}
.field input:focus, .field select:focus, .field textarea:focus,
.addroom select:focus, .addroom input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(176,141,87,.2);}
.check-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; line-height:1.5;}
input[type=checkbox], input[type=radio]{accent-color:var(--gold-dark);}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 20px; border:0; border-radius:var(--r-md); font:600 13.5px/1 var(--font-ui);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn .ic{width:17px; height:17px;}
.btn-gold{
  background:var(--gold); color:#1C1710;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(21,18,14,.25), 0 8px 18px -10px rgba(138,107,58,.7);
}
.btn-gold:hover{background:#BA9761; box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(21,18,14,.25), 0 12px 22px -10px rgba(138,107,58,.8);}
.btn-ghost{background:#fff; border:1px solid var(--line-strong); color:var(--ink);}
.btn-ghost:hover{background:#fff; border-color:var(--gold); color:var(--gold-dark);}
.btn-sm{min-height:34px; padding:0 14px; font-size:12.5px; border-radius:9px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45; box-shadow:none;}

/* ---------- ambientes e itens ---------- */
.room-head{background:var(--espresso); padding:18px 28px; gap:16px;}
.room-head input.roomname{font-family:var(--font-display); font-size:21px; font-weight:500; letter-spacing:-.005em; border-bottom-color:rgba(233,223,201,.3); max-width:300px;}
.room-head .tag{font-size:11.5px; letter-spacing:0; text-transform:none; padding:4px 12px; background:rgba(233,223,201,.12); color:#E9DFC9;}
.room-head .counts{font-size:12.5px; color:rgba(233,223,201,.75);}
.room-body{padding:14px 28px 28px;}
.cat{margin-top:30px;}
.cat h4{
  font-family:var(--font-display); font-size:19px; font-weight:500; letter-spacing:-.005em; text-transform:none; color:var(--ink);
  padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.item{padding:14px 2px; border-bottom:1px solid var(--line-soft, #EFEBE1);}
.item-row .name{font-size:14px; font-weight:500; color:var(--ink);}
.seg{border-color:var(--line-strong); border-radius:10px;}
.seg button{padding:8px 13px; font-size:12px; border-right-color:var(--line);}
.info-btn{border-color:var(--line-strong);}
.infobox{border-left-color:var(--gold); border-radius:0 10px 10px 0; background:#F8F4EA;}

/* ---------- janelas ---------- */
.modal-backdrop{background:rgba(21,18,14,.58); backdrop-filter:blur(3px);}
.modal-box{border-radius:20px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6);}
.vistorias-panel{border-radius:16px; border:1px solid var(--line); box-shadow:0 30px 70px -24px rgba(21,18,14,.5);}

/* aviso de "salvo" — canto da tela, discreto */
.savebar{
  position:fixed; z-index:90; top:auto; bottom:22px; right:24px; left:auto; max-width:none; height:auto; margin:0; padding:10px 18px;
  border-radius:999px; background:var(--espresso); color:#E9DFC9; font:500 12.5px/1 var(--font-ui); text-align:left;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); pointer-events:none;
}

/* ---------- foco e movimento ---------- */
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
button:focus-visible, .side-link:focus-visible{outline-offset:1px;}
*{scrollbar-color:rgba(122,115,100,.35) transparent; scrollbar-width:thin;}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important;}
}
@media (max-width:900px){
  .wrap{padding:28px 16px 120px;}
  .hero{padding:28px 22px 30px;}
  .hero h1{font-size:28px;}
  .room-body{padding:12px 16px 22px;}
}

/* ---------- celular: nada passa da largura da tela, alvos de toque grandes, sem zoom automático do iOS ---------- */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, [contenteditable=true]{font-size:16px;}
  .sidebar{height:100vh; height:100dvh; padding-bottom:env(safe-area-inset-bottom);}
  .sidebar-toggle{bottom:calc(18px + env(safe-area-inset-bottom));}
  .wrap{padding-bottom:calc(120px + env(safe-area-inset-bottom));}
  .modal-box{max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
}
@media (max-width:640px){
  /* cabeçalho do ambiente: nome em cima, contadores embaixo */
  .room-head{flex-wrap:wrap; padding:14px 16px; row-gap:8px;}
  .room-head .left{flex:1 1 100%; min-width:0; gap:10px;}
  .room-head input.roomname{flex:1; min-width:0; max-width:none; font-size:19px;}
  .room-head .tag{white-space:nowrap; flex-shrink:0;}
  .room-head .counts{margin-right:auto; white-space:normal;}
  /* item: nome em cima, Aprovado/Reprovado/Reinsp./N-A embaixo, ocupando a largura toda */
  .item-row{flex-wrap:wrap; align-items:flex-start; row-gap:10px;}
  .item-row .name{flex:1 1 calc(100% - 44px); min-width:0;}
  .seg{order:3; flex:1 1 100%; width:100%;}
  .seg button{flex:1 1 0; min-width:0; padding:12px 2px; font-size:12.5px;}
  .btn{min-height:46px;}
  .btn-sm{min-height:40px;}
  .hero{padding:24px 18px 26px; border-radius:16px;}
  .grid-fields{grid-template-columns:1fr; gap:16px;}
  .laudo-ch-head{gap:6px;}
  .laudo-title{min-width:100%; order:5;}
}