/* ===== Design tokens ===== */
:root{
  --navy: #003f7a;
  --blue: #0056a4;
  --grey: #575756;
  --ink: #1c2733;
  --bg: #ffffff;
  --page-bg: #f2f4f7;
  --surface: #ffffff;
  --line: #d7dce2;
  --line-soft: #eaedf1;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(16,35,58,.05), 0 6px 18px -10px rgba(16,35,58,.15);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
h1,h2,h3{ font-family: var(--font-display); margin:0; }
button{ font-family: inherit; }
input, select{ font-family: inherit; }
:focus-visible{ outline: 2.5px solid var(--blue); outline-offset: 2px; }

/* ===== Logo bar (contained, matches card width) ===== */
.logo-bar{
  background: var(--navy);
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding: 22px 24px;
  max-width: 480px; margin: 0 auto 22px;
  box-shadow: var(--shadow-card);
}
.logo-bar__img{ height: 30px; width:auto; display:block; }
@media (min-width:480px){ .logo-bar__img{ height: 34px; } }

/* ===== Layout ===== */
.app{ max-width: 640px; margin: 0 auto; padding: 28px 20px 60px; }

/* ===== Centered search card ===== */
.search-card{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 28px 24px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.search-card__title{
  font-size: 14px; font-weight: 700; color: var(--navy);
  text-align: center; margin-bottom: 22px; letter-spacing: -0.2px;
  line-height: 1.3;
}

.field{ margin-bottom: 18px; }
.field:last-of-type{ margin-bottom: 0; }
.field label{
  display:block; font-weight: 700; color: #111; font-size: 14.5px; margin-bottom: 8px;
}
.field input[type="text"],
.field select{
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); font-size: 15px; color: var(--ink);
}
.field select{
  appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%23575756' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field input::placeholder{ color:#9aa6b2; }
.field select:disabled{ background-color:#f2f4f7; color:#a7afb8; cursor:not-allowed; }
.field input:focus, .field select:focus{ border-color: var(--blue); }

.form-actions{ margin-top: 22px; display:flex; flex-direction:column; gap: 12px; }
.btn-search, .btn-clear{
  width:100%; border:none; padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; cursor:pointer; color:#fff;
}
.btn-search{ background: var(--navy); }
.btn-search:hover{ background: var(--blue); }
.btn-clear{ background: var(--blue); }
.btn-clear:hover{ background: var(--navy); }

/* ===== Results ===== */
.results{ margin-top: 30px; }
.results__header{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-bottom: 16px;
}
.results__count{ display:flex; align-items:baseline; gap:8px; }
.count-number{ font-family: var(--font-mono); font-size: 24px; font-weight:600; color: var(--navy); }
.count-label{ font-size: 13px; color: var(--grey); }

.results__grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }

.card{
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 16px; box-shadow: var(--shadow-card); cursor:pointer;
  display:flex; flex-direction:column; gap:9px;
  transition: border-color .1s ease;
}
.card:hover{ border-color: var(--blue); }
.card__top{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.card__name{ font-family: var(--font-display); font-weight:700; font-size: 15px; color: var(--navy); line-height:1.3; }
.card__pessoa{
  flex-shrink:0; font-size: 10.5px; font-weight:700; padding: 3px 8px; border-radius: 6px;
  white-space:nowrap; background:#eaf1f8; color: var(--blue);
}
.card__meta{ font-size: 12.5px; color: var(--grey); display:flex; flex-wrap:wrap; gap: 4px 8px; align-items:center; }
.card__meta .dot{ opacity:.5; }
.card__contact{ font-size: 12.5px; color: var(--grey); display:flex; flex-direction:column; gap:2px; }
.card__contact .missing{ color:#a7afb8; font-style: italic; }
.card__contact a{ color: var(--blue); text-decoration: none; font-weight:600; }
.card__contact a:hover{ text-decoration: underline; }
.card__contact .maps-link{ white-space: nowrap; }
.card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tag{ font-size: 11.5px; background:#eef1f5; color: var(--grey); padding: 4px 9px; border-radius: 6px; font-weight:500; }
.tag.more{ background:none; color: var(--blue); font-weight:700; padding-left:2px; }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--grey); }
.empty-state svg{ color:#c3cbd4; margin-bottom: 14px; }
.empty-state p{ margin: 0 0 18px; font-size: 14.5px; }

.btn-loadmore{
  display:block; margin: 24px auto 0; background: var(--surface); border: 1px solid var(--line);
  color: var(--navy); padding: 12px 26px; border-radius: var(--radius-sm); font-size: 14px; font-weight:700; cursor:pointer;
}
.btn-loadmore:hover{ border-color: var(--blue); color: var(--blue); }

/* ===== Detail sheet ===== */
.sheet{ position:fixed; inset:0; z-index: 50; }
.sheet__backdrop{ position:absolute; inset:0; background: rgba(15,25,38,.45); }
.sheet__panel{
  position:absolute; right:0; top:0; bottom:0; width:min(440px, 100%);
  background: var(--surface); box-shadow: -10px 0 30px rgba(0,0,0,.15);
  padding: 26px 24px; overflow-y:auto;
  animation: slidein .18s ease;
}
@keyframes slidein{ from{ transform: translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet__close{
  position:absolute; top:16px; right:16px; border:none; background:#eef1f5; color:var(--grey);
  width:30px; height:30px; border-radius:50%; font-size:18px; cursor:pointer;
}
.sheet-name{ font-family: var(--font-display); font-size: 19px; font-weight:700; color: var(--navy); margin: 6px 30px 14px 0; }
.sheet-section{ margin-bottom: 18px; }
.sheet-section h4{ font-size: 11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--grey); margin: 0 0 8px; font-weight:700; }
.sheet-row{ display:flex; gap:8px; font-size: 14px; padding: 3px 0; }
.sheet-row .k{ color: var(--grey); min-width: 88px; flex-shrink:0; }
.sheet-row .missing{ color:#a7afb8; font-style: italic; }
.sheet-row a{ color: var(--blue); text-decoration: none; font-weight:600; }
.sheet-row a:hover{ text-decoration: underline; }
.btn-maps{
  display:inline-flex; align-items:center; gap:6px;
  margin: 2px 0 12px 96px; color: var(--blue); font-size: 13px; font-weight:700;
  text-decoration:none; border: 1.5px solid var(--blue); border-radius: 999px; padding: 6px 14px;
}
.btn-maps:hover{ background: var(--blue); color:#fff; }
.btn-maps::before{ content: "📍"; font-size: 12px; }
.sheet-tags{ display:flex; flex-wrap:wrap; gap:7px; }

@media (min-width: 640px){
  .results__grid{ grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .sheet__panel, .card{ animation:none; transition:none; }
}

/* Guarantee [hidden] always wins over any component's own display rule.
   Without this, a class like .btn-loadmore{display:block} can outrank the
   browser's default [hidden]{display:none} and show the element anyway. */
[hidden]{ display: none !important; }

/* ===== Badge de urgência/emergência (específico CASSI) ===== */
.card__badge-urgencia{
  display:inline-block; align-self:flex-start;
  font-size: 10.5px; font-weight:700; color: #a13b0c; background:#fdf1ec;
  padding: 3px 9px; border-radius: 6px; margin-top:-2px;
}