/* =========================================================
   SERASA DE HAWKINS — o balcão de proteção ao crédito (serasa.js), na Melvald's.
   Só existe em Hawkins (.t-h). Prefixo próprio: .srs-
   Um terminal de consulta de 2003: placa bege de plástico, e as listas saindo
   em formulário contínuo de impressora matricial (faixas verdes e furinhos de
   tração nas bordas), com carimbo vermelho de "negativado".
   Celular: bloco "SERASA" no mobile.css (só dentro das consultas de celular).
   ========================================================= */
.srs {
  --srs-ink: #1d2620; --srs-muted: #4d5a51; --srs-paper: #fbfbf4; --srs-bar: #e3efdf; --srs-hole: #c9cdbd;
  --srs-red: #a8231b; --srs-red-soft: rgba(168, 35, 27, 0.1); --srs-green: #1d6237; --srs-green-soft: rgba(29, 98, 55, 0.12);
  --srs-beige: #d9d3c1; --srs-beige-2: #c4bda8; --srs-dark: #23262a; --srs-amber: #f2b33d;
  --srs-cond: "Barlow Condensed", "Arial Narrow", var(--font-ui);
  margin-top: 30px; color: var(--srs-ink);
}
.srs[hidden] { display: none; }
.srs :focus-visible { outline: 2px solid var(--srs-amber); outline-offset: 2px; }
.srs-desk {
  padding: 0 clamp(12px, 2.2vw, 24px) 20px; border-radius: 4px; background: var(--srs-beige);
  box-shadow: 0 0 0 1px #8e8774, inset 0 0 0 4px #e7e1cf, inset 0 -6px 0 var(--srs-beige-2), 0 24px 50px rgba(0, 0, 0, 0.5);
}

/* ---------- a placa do terminal ---------- */
.srs-head {
  display: flex; flex-direction: column; align-items: center; margin: 0 calc(-1 * clamp(12px, 2.2vw, 24px)) 18px;
  padding: 16px 16px 12px; background: var(--srs-dark); border-bottom: 3px solid var(--srs-red); border-radius: 4px 4px 0 0; text-align: center;
}
.srs-kicker, .srs-sub { font: 700 11px var(--font-small); letter-spacing: 0.2em; text-transform: uppercase; color: #c9cbc4; }
.srs-name { margin: 6px 0 4px; font: 800 clamp(34px, 5.4vw, 52px)/1 var(--srs-cond); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.srs-name span { color: var(--srs-amber); }

/* ---------- o formulário contínuo ---------- */
.srs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
.srs-paper {
  position: relative; min-width: 0; padding: 14px 30px 18px;
  background:
    radial-gradient(circle, var(--srs-hole) 0 3.5px, transparent 4px) left 9px top 8px / 12px 24px repeat-y,
    radial-gradient(circle, var(--srs-hole) 0 3.5px, transparent 4px) right 9px top 8px / 12px 24px repeat-y,
    repeating-linear-gradient(var(--srs-paper) 0 48px, var(--srs-bar) 48px 96px);
  box-shadow: inset 20px 0 0 -18px #d7dbcb, inset -20px 0 0 -18px #d7dbcb, 0 2px 0 #b5b09c, 0 10px 22px rgba(0, 0, 0, 0.3);
  font-family: var(--font-type);
}
.srs-paper-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--srs-ink); }
.srs-paper-head h3 { margin: 0; font: 800 20px var(--srs-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--srs-ink); }
.srs-paper-meta { font: 700 12px var(--font-type); color: var(--srs-muted); }
.srs-empty, .srs-lead { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; }
.srs-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--srs-muted); }
.srs-foot { margin: 10px 0 0; font-size: 13px; color: var(--srs-muted); }

/* o mural */
.srs-lista { margin: 0; padding: 0; list-style: none; counter-reset: srs; }
.srs-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0 7px 26px; position: relative;
  border-bottom: 1px dotted #9aa595; counter-increment: srs;
}
.srs-linha::before { content: counter(srs, decimal-leading-zero); position: absolute; left: 0; top: 7px; font-weight: 700; color: var(--srs-muted); }
.srs-quem { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.srs-quem small { font-weight: 400; color: var(--srs-muted); }
.srs-quanto { font-weight: 700; color: var(--srs-red); white-space: nowrap; }
.srs-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--srs-muted); }
.srs-tag-pol { color: var(--srs-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.srs-eu { background: var(--srs-red-soft); }

/* carimbos */
.srs-carimbo {
  display: inline-block; margin: 2px 0 12px; padding: 4px 12px; border: 3px solid currentColor; border-radius: 3px;
  font: 800 20px var(--srs-cond); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-2deg);
}
.srs-sujo { color: var(--srs-red); }
.srs-limpo { color: var(--srs-green); }
.srs-aviso { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--srs-red); background: var(--srs-red-soft); font-size: 13px; line-height: 1.45; }
.srs-ok { margin: 8px 0 0; padding: 6px 10px; border-left: 4px solid var(--srs-green); background: var(--srs-green-soft); font-size: 13px; font-weight: 700; }

/* o montador do acordo */
.srs-montador { margin-bottom: 4px; }
.srs-campo { margin: 0 0 12px; padding: 8px 10px 10px; border: 1px solid #a7b1a2; background: rgba(255, 255, 255, 0.55); min-width: 0; }
.srs-campo legend { padding: 0 6px; font: 800 15px var(--srs-cond); letter-spacing: 0.08em; text-transform: uppercase; }
.srs-campo legend small { font: 400 12px var(--font-type); letter-spacing: 0; text-transform: none; color: var(--srs-muted); }
.srs-campo-solto { padding: 8px 10px; }
.srs-stepper { display: inline-flex; align-items: center; gap: 6px; }
.srs-step {
  width: 34px; height: 34px; padding: 0; border: 1.5px solid var(--srs-ink); border-radius: 2px; background: var(--srs-paper);
  font: 700 18px/1 var(--font-type); color: var(--srs-ink); cursor: pointer;
}
.srs-step:hover:not(:disabled) { background: var(--srs-bar); }
.srs-step:disabled { opacity: 0.4; cursor: default; }
.srs-step-n { min-width: 74px; text-align: center; font-weight: 700; }
.srs-stepper-mini .srs-step-n { min-width: 28px; }
.srs-itens { margin: 0; padding: 0; list-style: none; }
.srs-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dotted #b3bcae; }
.srs-item:last-child { border-bottom: 0; }
.srs-item-nome { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.srs-item-nome small { display: block; color: var(--srs-muted); font-size: 12px; }
.srs-check { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.4; cursor: pointer; }
.srs-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--srs-red); }
.srs-check input:disabled + span { color: var(--srs-muted); }

/* o recibo do acordo */
.srs-recibo { margin: 14px 0 6px; padding: 12px 14px; background: #fff; border: 1px dashed #8d988a; }
.srs-recibo h4, .srs-recompra h4 { margin: 0 0 8px; font: 800 17px var(--srs-cond); letter-spacing: 0.1em; text-transform: uppercase; }
.srs-recompra h4 small { font: 400 12px var(--font-type); letter-spacing: 0; text-transform: none; color: var(--srs-muted); }
.srs-recibo-l { margin: 0 0 8px; padding: 0; list-style: none; }
.srs-recibo-l li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.srs-recibo-l li span { min-width: 0; overflow-wrap: anywhere; }
.srs-recibo-l li b { white-space: nowrap; color: var(--srs-green); }
.srs-recibo-tot { margin: 0 0 10px; padding-top: 6px; border-top: 1px solid var(--srs-ink); }
.srs-recibo-tot div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 14px; }
.srs-recibo-tot dt { font-weight: 400; }
.srs-recibo-tot dd { margin: 0; font-weight: 700; white-space: nowrap; }
.srs-depois { font-size: 16px !important; }
.srs-confirma { margin-top: 10px; padding: 10px; border: 2px solid var(--srs-red); background: var(--srs-red-soft); }
.srs-confirma p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.srs-confirma .srs-btn { margin: 0 8px 6px 0; }

/* botões (teclas do terminal) */
.srs-btn {
  min-height: 38px; padding: 7px 16px; border: 0; border-radius: 3px; background: var(--srs-dark); color: #fff;
  font: 700 14px var(--font-ui); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.45);
}
.srs-btn:hover:not(:disabled) { background: #383c41; }
.srs-btn:disabled { opacity: 0.5; cursor: default; }
.srs-btn-alt { background: transparent; color: var(--srs-ink); border: 1.5px solid var(--srs-ink); box-shadow: none; }
.srs-btn-alt:hover:not(:disabled) { background: var(--srs-bar); }
.srs-btn-perigo { background: var(--srs-red); }
.srs-btn-perigo:hover:not(:disabled) { background: #8a1c15; }
.srs-link { padding: 0; border: 0; background: none; font: inherit; color: var(--srs-ink); text-decoration: underline; cursor: pointer; }

/* recompra e histórico */
.srs-recompra { margin-top: 16px; padding-top: 10px; border-top: 2px solid var(--srs-ink); }
.srs-recompra-l { margin: 0; padding: 0; list-style: none; }
.srs-recompra-l li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #9aa595; font-size: 14px; }
.srs-recompra-l li > span { min-width: 0; overflow-wrap: anywhere; }
.srs-recompra-l small { display: block; font-size: 12px; color: var(--srs-muted); }
.srs-recompra-l .srs-btn { flex: none; min-height: 34px; padding: 5px 12px; font-size: 13px; }
.srs-hist { margin-top: 14px; font-size: 13px; }
.srs-hist summary { cursor: pointer; font-weight: 700; }
.srs-hist ul { margin: 8px 0 0; padding: 0; list-style: none; }
.srs-hist li { padding: 5px 0; border-bottom: 1px dotted #9aa595; line-height: 1.4; }
.srs-hist small { color: var(--srs-muted); overflow-wrap: anywhere; }

/* mensagem, regras, painel do dono */
.srs-msg { margin: 12px 0 0; min-height: 0; font: 700 14px var(--font-type); }
.srs-msg:empty { display: none; }
.srs-msg[data-tipo="ok"] { color: #10421f; }
.srs-msg[data-tipo="bad"] { color: #7c140e; }
.srs-regras { margin-top: 14px; padding: 10px 14px; background: var(--srs-paper); border: 1px solid #a49e8a; font-size: 14px; }
.srs-regras summary { cursor: pointer; font: 800 16px var(--srs-cond); letter-spacing: 0.08em; text-transform: uppercase; }
.srs-regras-l { margin: 10px 0 0; padding-left: 20px; line-height: 1.5; }
.srs-regras-l li { margin-bottom: 6px; }
.srs-dono { margin-top: 14px; padding: 12px 14px; background: var(--srs-dark); color: #f1f1ec; border-radius: 3px; }
.srs-dono h3 { margin: 0 0 10px; font: 800 18px var(--srs-cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--srs-amber); }
.srs-dono h3 small { font: 400 12px var(--font-small); letter-spacing: 0; text-transform: none; color: #c9cbc4; }
.srs-dono-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.srs-dono label { display: flex; flex-direction: column; gap: 4px; font: 700 13px var(--font-small); color: #ecece5; }
.srs-dono input { width: 150px; min-height: 36px; padding: 4px 8px; border: 1px solid #8b8f95; border-radius: 2px; background: #111316; color: #fff; font: 700 15px var(--font-type); }
.srs-dono .srs-btn { background: var(--srs-amber); color: #1b1b1b; }
.srs-dono .srs-btn:hover:not(:disabled) { background: #ffc85e; }
.srs-dono .srs-hint { color: #c9cbc4; }

@media (max-width: 980px) {
  .srs-grid { grid-template-columns: minmax(0, 1fr); }
}
