/* ==========================================================
   UNIPROTEL — rma.css
   Estilos usados SÓ no formulário de RMA (rma.html).
   ========================================================== */

.grid-cep{display:grid; grid-template-columns:.6fr 1.4fr .5fr; gap:18px;}
.grid-loc{display:grid; grid-template-columns:1fr .7fr .4fr; gap:18px;}
@media(max-width:700px){ .grid-cep, .grid-loc{grid-template-columns:1fr;} }

.field label .hint{color:var(--amber); font-size:10px; text-transform:none; letter-spacing:0; opacity:0; transition:opacity .2s;}
.field label .hint.show{opacity:1;}
.field input[readonly]{color:var(--text-muted);}
.spinner{
  position:absolute; right:14px; top:39px; width:14px; height:14px;
  border:2px solid var(--border); border-top-color:var(--amber); border-radius:50%;
  animation:spin .7s linear infinite; display:none;
}
.spinner.show{display:block;}
@keyframes spin{ to{ transform:rotate(360deg); } }

.items-table{width:100%; border-collapse:collapse; margin-bottom:16px;}
.items-table th{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); text-align:left; padding:0 8px 10px; border-bottom:1px solid var(--border);
}
.items-table td{padding:6px 8px 6px 0; vertical-align:top;}
.items-table input, .items-table textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:9px 10px; color:var(--text); font-size:13.5px; font-family:var(--font-body);
}
.items-table input:focus, .items-table textarea:focus{outline:none; border-color:var(--amber);}
.items-table textarea{
  min-height:40px; height:40px; resize:none; overflow:hidden; line-height:1.4;
  transition:height .1s ease;
}
.row-remove{
  background:none; border:1px solid var(--border); color:var(--text-muted);
  width:32px; height:32px; border-radius:6px; cursor:pointer; font-size:15px; line-height:1;
  transition:border-color .2s, color .2s;
}
.row-remove:hover{border-color:var(--red); color:var(--red);}
@media(max-width:820px){
  .items-table thead{display:none;}
  .items-table, .items-table tbody, .items-table tr, .items-table td{display:block; width:100%;}
  .items-table tr{
    background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
    padding:14px; margin-bottom:12px;
  }
  .items-table td{padding:6px 0;}
  .items-table td::before{
    content:attr(data-label); display:block; font-family:var(--font-mono); font-size:10px;
    text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; letter-spacing:.05em;
  }
}

.add-row{
  background:transparent; border:1px dashed var(--border); color:var(--text-muted);
  padding:10px 16px; border-radius:8px; font-size:13.5px; cursor:pointer; font-family:var(--font-body);
  display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, color .2s;
}
.add-row:hover{border-color:var(--amber); color:var(--amber);}

.actions-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; flex-wrap:wrap;}
.actions-row .btn{width:auto; padding:11px 26px;}
.consent{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-muted);}
.consent input{margin-top:3px;}

.status-msg{
  font-family:var(--font-mono); font-size:13px; padding:14px 16px; border-radius:8px; margin-top:16px;
  display:none; align-items:center; gap:10px; flex-wrap:wrap;
}
.status-msg.show{display:flex;}
.status-msg.ok{background:rgba(46,217,160,.08); border:1px solid rgba(46,217,160,.35); color:var(--green);}
.status-msg.err{background:rgba(232,88,106,.08); border:1px solid rgba(232,88,106,.35); color:var(--red);}
.status-msg.sending{background:rgba(242,169,59,.08); border:1px solid rgba(242,169,59,.35); color:var(--amber);}