/* Farmácias: cabeçalho da seção, métricas, filtros, grade de cards, ficha
   completa (modal), drawer de campos e glossário-gatilho. Extraído do antigo
   painel.html, com o cartão renomeado para .pharmacy-card (o admin.html já
   usa .card para os cartões genéricos do painel administrativo). */

.pharma-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 6px }
.pharma-head .actions { display: flex; gap: 10px; flex-wrap: wrap }
.glossary-btn { background: var(--blue) !important }

.metrics { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 10px; margin: 14px 0 20px }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px }
.metric span { display: flex; align-items: center; color: var(--muted); font-size: 12px }
.metric strong { display: block; font-size: 21px; margin-top: 3px }

.controls { margin-bottom: 6px }
.control-grid { display: grid; grid-template-columns: minmax(250px, 2fr) repeat(5, minmax(150px, 1fr)); gap: 10px }
.filter-row { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap }
.chip { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-weight: 650; font-size: 13px }
.chip.active { background: var(--ink); color: white; border-color: var(--ink) }
.result-line { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 10px; color: var(--muted); font-size: 14px }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px }
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 11px }

.pharmacy-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px var(--radius) var(--radius) 6px;
  padding: 17px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: .18s transform, .18s box-shadow, .18s border-color;
  position: relative;
  overflow: visible;
  z-index: 1;
}
.pharmacy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(10, 20, 30, .13);
  border-color: #bfcbd0;
  z-index: 2;
}
.pharmacy-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -1px; top: -1px; bottom: -1px; width: 5px;
  background: linear-gradient(var(--green), var(--blue), var(--magenta));
  border-radius: var(--radius) 0 0 var(--radius);
  pointer-events: none;
}
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start }
.card-name { font-weight: 850; font-size: 17px; line-height: 1.2; margin: 0 0 6px; padding-left: 2px }
.card-city { color: var(--muted); font-size: 13px }
.favorite { border: 0; background: transparent; font-size: 21px; cursor: pointer; line-height: 1; color: #aab2b8 }
.favorite.on { color: #f0a500 }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 }
.badge.yellow { background: #fdf3d8; color: #8a6a12 }
.fields { display: grid; gap: 7px; margin-top: 10px }
.field { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed #e4e9eb; padding-top: 7px; font-size: 13px }
.field-label { color: var(--muted); display: flex; align-items: center }
.field-value { font-weight: 750; text-align: right; overflow-wrap: anywhere }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line) }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted) }
.status-dot i { width: 8px; height: 8px; border-radius: 50%; background: #abb4ba }
.status-dot.validado i { background: var(--green) }
.status-dot.revisar i { background: #f0a500 }
.open-label { font-size: 12px; font-weight: 800; color: var(--green-dark) }
.empty { background: white; border: 1px dashed #bdc7cc; border-radius: 18px; padding: 50px; text-align: center; color: var(--muted) }

/* Overlay compartilhado por drawer, glossário e ficha completa */
.overlay { position: fixed; z-index: 40; inset: 0; background: rgba(0, 0, 0, .42); display: none }
.overlay.show { display: block }

/* Drawer: escolher campos dos cards */
.drawer { position: fixed; z-index: 50; top: 0; right: -430px; width: min(420px, 92vw); height: 100vh; background: white; box-shadow: -16px 0 45px rgba(0, 0, 0, .2); transition: .25s right; display: flex; flex-direction: column }
.drawer.open { right: 0 }
.drawer-head { padding: 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center }
.drawer-body { padding: 18px; overflow: auto }
.drawer-footer { padding: 15px 18px; border-top: 1px solid var(--line); display: flex; gap: 9px }
.field-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 10px; margin-bottom: 8px; cursor: pointer }
.field-option input { accent-color: var(--green) }

/* Modal: glossário e ficha completa da farmácia */
.modal { position: fixed; z-index: 60; inset: 18px; display: none; align-items: center; justify-content: center }
.modal.show { display: flex }
.modal-panel { width: min(1180px, 100%); height: min(92vh, 900px); background: white; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); overflow: hidden; display: flex; flex-direction: column }
.modal-head { padding: 20px 23px; background: #0e1113; color: white; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start }
.modal-title h2 { margin: 0 0 5px; font-size: 25px }
.modal-title p { margin: 0; color: #b7c0c5 }
.close { border: 0; background: rgba(255, 255, 255, .12); color: white; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; cursor: pointer }
.modal-body { overflow: auto; padding: 22px }

.detail-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; margin-bottom: 18px }
.hero-box { border-radius: 16px; padding: 17px; background: linear-gradient(135deg, var(--soft-green), var(--soft-blue)); border: 1px solid #d9ebe2 }
.hero-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px }
@media (max-width: 380px) { .hero-score { grid-template-columns: 1fr 1fr } }
.score { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 13px; text-align: center }
.score strong { display: block; font-size: 24px }
.score span { font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 2px }
.sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.detail-section { border: 1px solid var(--line); border-radius: 16px; padding: 16px }
.detail-section h3 { margin: 0 0 12px; font-size: 15px; color: var(--green-dark) }
.detail-row { display: grid; grid-template-columns: 175px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e3e8ea; font-size: 13px }
.detail-row:last-child { border-bottom: 0 }
.detail-row .k { color: var(--muted); display: flex; align-items: center }
.detail-row .v { font-weight: 650; overflow-wrap: anywhere }
.linkbtn { display: inline-block; text-decoration: none; background: #101416; color: white; padding: 8px 10px; border-radius: 9px; margin: 4px 5px 4px 0; font-size: 12px; font-weight: 750 }
.linkbtn.green { background: var(--green-dark) }
.validation { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fafbfb }
.validation-grid { display: grid; grid-template-columns: 220px 1fr; gap: 12px }
.validation textarea { width: 100%; min-height: 86px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical }
.validation select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: white }
.save-note { margin-top: 10px }

/* Linha validável inline (field-row.js) */
.freview-section { display: flex; flex-direction: column; gap: 0 }
.freview-row { border-top: 1px dashed #e4e9eb; padding: 10px 0 }
.freview-row:first-of-type { border-top: 0; padding-top: 0 }
.freview-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.freview-label { color: var(--muted); font-size: 13px; min-width: 150px }
.freview-value { font-weight: 750; overflow-wrap: anywhere; flex: 1 }
.freview-value em { color: var(--muted); font-style: italic; font-weight: 400 }
.freview-state { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 9px; white-space: nowrap }
.freview-gray { background: #f0f2f3; color: #576168 }
.freview-yellow { background: #fdf3d8; color: #8a6a12 }
.freview-green { background: var(--soft-green); color: #0d7746 }
.freview-red { background: var(--soft-pink); color: #a80f45 }
.freview-blue { background: var(--soft-blue); color: #24617e }
.freview-dashed { background: transparent; color: #93989c; border: 1px dashed #c3c9cc }
.freview-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px }
.freview-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; cursor: pointer }
.freview-check.disabled { opacity: .5; cursor: not-allowed }
.freview-meta { font-size: 12px; color: var(--muted); margin-top: 6px }
.freview-inline-error { font-size: 12px; color: #a80f45; background: var(--soft-pink); border-radius: 8px; padding: 6px 9px; margin-top: 6px }
.freview-conflict-alert { font-size: 12px; color: #a80f45; background: var(--soft-pink); border: 1px solid #a80f45; border-radius: 10px; padding: 9px 11px; margin-bottom: 8px }
.freview-conflict-alert strong { display: block; margin-bottom: 4px }
.freview-conflict-alert ul { margin: 4px 0 0 18px; padding: 0 }
.freview-conflict-alert li { margin-bottom: 2px }
.freview-resolve-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px }
.freview-resolve-form select { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: white; font-size: 12px }
.freview-resolve-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 7px; resize: vertical; font-size: 12px }
.inline-feedback { font-size: 12px; margin-top: 6px; display: block }
.inline-feedback.is-error { color: #a80f45 }
.inline-feedback.is-ok { color: #0d7746 }

.freview-match-detail { font-size: 12px; background: #f7f8f8; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px }
.freview-match-message { margin: 0 0 8px; color: #576168 }
.freview-match-candidate { line-height: 1.6; margin-bottom: 6px }
.freview-match-conflicts { margin: 0 0 8px 18px; padding: 0; color: #a80f45 }
.freview-match-conflicts li { margin-bottom: 2px }
.freview-tech-details { margin-top: 8px }
.freview-tech-table { width: 100%; border-collapse: collapse; font-size: 12px }
.freview-tech-table td { padding: 5px 6px; border-top: 1px dashed #e4e9eb; vertical-align: top }
.freview-tech-table td:first-child { color: var(--muted); width: 180px }
.freview-tech-table .hint { margin-top: 2px }

.human-potential-box { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: white }
.human-potential-box h4 { margin: 0; font-size: 12px; color: var(--muted); font-weight: 700 }
.human-potential-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px }
.human-potential-item { border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px }
.human-potential-item select { border: 1px solid var(--line); border-radius: 8px; padding: 5px; background: white; font-size: 12px }
@media (max-width: 1000px) { .human-potential-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 650px) { .human-potential-grid { grid-template-columns: 1fr } }
.freview-editform { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfb }
.freview-editgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px }
@media (max-width: 900px) { .freview-editgrid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .freview-editgrid { grid-template-columns: 1fr } }
.freview-editform textarea { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 9px; padding: 8px; resize: vertical; margin-bottom: 8px }
.freview-editform select { border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: white; width: 100% }
.freview-editbtns { display: flex; gap: 8px }
.google-maps-cta { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--soft-green); border: 1px solid #bfe4d2; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px }

/* Progresso de validação + indicadores finais */
.validation-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px }
@media (max-width: 900px) { .validation-progress { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 420px) { .validation-progress { grid-template-columns: 1fr } }
.vp-item { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-align: center }
.vp-item span { display: block; font-size: 11px; color: var(--muted) }
.vp-item strong { display: block; font-size: 18px; margin-top: 3px }
.finalize-reasons { background: var(--soft-pink); border: 1px solid #f3c4d6; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #a80f45; margin-bottom: 10px }
.finalize-reasons ul { margin: 4px 0 0; padding-left: 18px }
.indicators-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; flex-wrap: wrap; gap: 8px }
.indicators-head h3 { margin: 0 }
.priority-inline { font-size: 12px; color: #66717a; display: flex; align-items: center; gap: 4px }
.priority-inline select { border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: white; font-size: 12px }

.indicator-bar { height: 5px; border-radius: 999px; background: #eef1f2; overflow: hidden; margin: 0 }
.indicator-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)) }

/* 3 indicadores lado a lado (~30% cada), sempre abertos (SEM acordeão) —
   cabeçalho com score/classificação e a composição completa sempre
   visível abaixo. align-items:start + grid-auto-rows:max-content evita
   que a composição maior (ex: Completude) estique os outros dois */
.indicator-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: start; grid-auto-rows: max-content }
.ind-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: white; height: auto; min-height: 0 }
@media (max-width: 650px) {
  .indicator-list { grid-template-columns: 1fr }
}
.ind-item-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.ind-item-name { font-size: 12px; color: var(--muted); font-weight: 700; flex: 1 1 auto; display: flex; align-items: center; gap: 4px }
.ind-item-score { font-size: 18px; font-weight: 850; line-height: 1 }
.ind-item-label { font-size: 11px; color: var(--muted); white-space: nowrap }
.ind-item .indicator-bar { margin-top: 6px }
.ind-item-body { display: flex; flex-direction: column; gap: 0; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e4e9eb }
.detail-row {
  font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 0; border-top: 1px dashed #e4e9eb;
}
.detail-row:first-of-type { border-top: 0 }
.detail-row span:last-child { font-weight: 650; color: #3a4348; white-space: nowrap }

/* Acordeão só nas seções "Identificação e cadastro" e "Sócios e contatos
   oficiais" (pedido do usuário) — cada uma colapsa/expande independente */
.acc-section-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 8px }
.acc-section-header h3 { margin: 0 }
.acc-chevron { font-size: 16px; color: var(--muted); transition: transform .15s ease; flex-shrink: 0 }
.acc-section.open .acc-chevron { transform: rotate(90deg) }
.acc-section-body { display: none; margin-top: 10px }
.acc-section.open .acc-section-body { display: block }

/* Sócios e contatos */
.partner-row, .contact-row { border-top: 1px dashed #e4e9eb; padding: 9px 0; display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap }
.partner-row:first-of-type, .contact-row:first-of-type { border-top: 0; padding-top: 0 }
.partner-info strong, .contact-info strong { display: block; font-size: 13px }
.partner-info span, .contact-info span { font-size: 12px; color: var(--muted) }

/* Preenchimento manual de campos ausentes */
.manual-fields-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap }
.manual-form { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; background: white }
.manual-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px }
.manual-form textarea { width: 100%; min-height: 60px; border: 1px solid var(--line); border-radius: 10px; padding: 9px; resize: vertical; margin-bottom: 10px }
.manual-form select { border: 1px solid var(--line); border-radius: 10px; padding: 9px; background: white; width: 100% }
.manual-confirm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 10px }
.manual-group { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: #fcfdfd }
.manual-group h4 { margin: 0 0 8px; font-size: 14px }
.manual-group-auto { font-size: 12px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px }
.manual-entry { border-top: 1px dashed #e4e9eb; padding: 10px 0 }
.manual-entry:first-of-type { border-top: 0; padding-top: 0 }
.manual-entry-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap }
.manual-entry-value { font-weight: 800; font-size: 14px }
.manual-entry-badges { display: flex; gap: 6px; flex-wrap: wrap }
.manual-entry-meta { font-size: 12px; color: var(--muted); margin-top: 4px }
.manual-entry-note { font-size: 12px; color: var(--ink); margin-top: 4px; font-style: italic }
.manual-entry-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }

@media (max-width: 1000px) {
  .metrics { grid-template-columns: repeat(3, 1fr) }
  .control-grid { grid-template-columns: 1fr 1fr 1fr }
  .detail-hero, .sections { grid-template-columns: 1fr }
  .manual-form-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 650px) {
  .metrics { grid-template-columns: 1fr 1fr }
  .control-grid { grid-template-columns: 1fr 1fr }
  .control-grid .search { grid-column: 1 / -1 }
  .grid, .grid.compact { grid-template-columns: 1fr }
  .modal { inset: 0 }
  .modal-panel { height: 100vh; border-radius: 0 }
  .detail-row { grid-template-columns: 1fr; gap: 3px }
  .validation-grid { grid-template-columns: 1fr }
  .manual-form-grid { grid-template-columns: 1fr }
}