/* ============================================
   SGL – Clínicas & Hospitais | Styles
   ============================================ */

/* ---- Hero ---- */
.clinicas-hero {
  background: linear-gradient(135deg, #064E3B 0%, #065F46 50%, #059669 100%);
  padding: calc(var(--navbar-height) + 3rem) 0 3rem;
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.clinicas-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 60%, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(16,185,129,0.2) 0%, transparent 50%);
  pointer-events: none;
}
.clinicas-hero .container { position: relative; z-index: 1; }
.clinicas-hero-content { max-width: 780px; }

.hero-badge-green {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: .4rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: 1.25rem;
}
.clinicas-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-extrabold);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.text-accent-green {
  background: linear-gradient(90deg, #6EE7B7, #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clinicas-hero p {
  font-size: var(--text-lg);
  opacity: .88;
  margin-bottom: 2rem;
  line-height: 1.65;
}

/* Search bar */
.clinicas-search-bar {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  max-width: 860px;
  margin-bottom: 2rem;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-xl);
  padding: .75rem;
}
.cs-field {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.2);
}
.cs-field-sm { flex: 0 1 180px; }
.cs-field i { color: rgba(255,255,255,0.7); font-size: .9rem; flex-shrink: 0; }
.cs-field input, .cs-field select {
  flex: 1; background: none; border: none;
  color: #fff; font-size: var(--text-sm);
}
.cs-field input::placeholder { color: rgba(255,255,255,0.65); }
.cs-field select option { color: var(--gray-800); background: #fff; }
.btn-cs-search {
  background: #10B981; color: #fff;
  padding: .65rem 1.5rem;
  border-radius: var(--radius);
  border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-bold);
  display: flex; align-items: center; gap: .5rem;
  transition: var(--transition); white-space: nowrap;
}
.btn-cs-search:hover { background: #059669; }

/* Counters */
.clinicas-hero-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.hc-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-sm); opacity: .9;
}
.hc-item i { color: #6EE7B7; }
.hc-item strong { font-size: var(--text-lg); font-weight: var(--font-extrabold); }

/* ---- Filters ---- */
.clinicas-filters {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: var(--navbar-height);
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}
.cf-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  gap: 1rem;
  overflow-x: auto;
}
.cf-types { display: flex; gap: .5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cf-types::-webkit-scrollbar { display: none; }
.cf-btn {
  display: flex; align-items: center; gap: .4rem;
  white-space: nowrap;
  padding: .45rem 1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--gray-200);
  background: none; color: var(--gray-600);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  cursor: pointer; transition: var(--transition);
}
.cf-btn:hover { border-color: #059669; color: #059669; }
.cf-btn.active { background: #059669; color: #fff; border-color: #059669; }
.cf-sort { display: flex; align-items: center; gap: .5rem; }
.cf-sort label { color: var(--gray-400); }
.cf-sort select {
  padding: .4rem .7rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--gray-700);
  background: var(--white);
  cursor: pointer;
}

/* ---- Main Layout ---- */
.clinicas-main { padding: 2.5rem 0 4rem; }
.clinicas-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}

/* ---- Results Header ---- */
.clinicas-results-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.clinicas-results-header h3 { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--gray-900); }
.results-count { font-size: var(--text-sm); color: var(--gray-400); }

/* ---- Clinicas Grid ---- */
.clinicas-grid { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.clinica-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid var(--gray-100);
}
.clinica-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); border-color: #D1FAE5; }
.clinica-card.premium { border-left: 4px solid #F59E0B; }
.clinica-card.featured { border-left: 4px solid #059669; }

/* Card accent strip */
.clinica-card-accent { width: 6px; background: #059669; border-radius: var(--radius-full) 0 0 var(--radius-full); }
.clinica-card.hospital .clinica-card-accent { background: var(--primary); }
.clinica-card.laboratorio .clinica-card-accent { background: #7C3AED; }
.clinica-card.centro-diagnostico .clinica-card-accent { background: #F59E0B; }

/* Card logo */
.clinica-card-logo {
  width: 88px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1rem;
}
.clinica-logo-placeholder {
  width: 60px; height: 60px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.bg-green { background: #D1FAE5; color: #059669; }
.bg-blue { background: var(--primary-lighter); color: var(--primary); }
.bg-purple { background: #EDE9FE; color: #7C3AED; }
.bg-orange { background: #FEF3C7; color: #D97706; }
.bg-red { background: #FEE2E2; color: #EF4444; }
.bg-cyan { background: #CFFAFE; color: #0891B2; }

/* Card body */
.clinica-card-body { padding: 1.25rem 1rem; }
.clinica-card-top { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.clinica-name-wrap { flex: 1; }
.clinica-name {
  font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--gray-900); display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
}
.clinica-type-badge {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  padding: .2rem .65rem; border-radius: var(--radius-full);
}
.badge-clinica { background: #D1FAE5; color: #065F46; }
.badge-hospital { background: var(--primary-lighter); color: var(--primary-dark); }
.badge-laboratorio { background: #EDE9FE; color: #5B21B6; }
.badge-diagnostico { background: #FEF3C7; color: #92400E; }
.badge-premium { background: #FEF3C7; color: #92400E; }

.clinica-rating { display: flex; align-items: center; gap: .3rem; font-size: var(--text-sm); color: var(--gray-600); }
.stars { color: #F59E0B; }
.rating-count { color: var(--gray-400); font-size: var(--text-xs); }

.clinica-address { font-size: var(--text-sm); color: var(--gray-500); display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.clinica-address i { color: var(--gray-400); font-size: .875rem; }

.clinica-specialties { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.spec-pill {
  padding: .2rem .65rem; border-radius: var(--radius-full);
  background: var(--gray-100); color: var(--gray-600);
  font-size: var(--text-xs); font-weight: var(--font-medium);
}
.spec-pill.more { background: none; color: var(--primary); font-weight: var(--font-semibold); }

.clinica-card-info { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.clinica-info-item {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--text-xs); color: var(--gray-500);
}
.clinica-info-item i { color: var(--gray-400); }
.info-green i { color: #059669; }
.info-green { color: #059669; font-weight: var(--font-medium); }

/* Card actions */
.clinica-card-actions {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  padding: 1.25rem;
  min-width: 140px;
}
.clinica-plan-badge {
  padding: .25rem .7rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  white-space: nowrap;
}
.plan-inst2 { background: linear-gradient(90deg, #F59E0B, #D97706); color: #fff; }
.plan-inst1 { background: #EDE9FE; color: #5B21B6; }
.plan-ind { background: var(--primary-lighter); color: var(--primary-dark); }

.clinica-btn-group { display: flex; flex-direction: column; gap: .5rem; }
.btn-clinica-schedule {
  background: #059669; color: #fff;
  padding: .55rem 1rem; border-radius: var(--radius);
  border: none; cursor: pointer; font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  display: flex; align-items: center; gap: .4rem;
  transition: var(--transition); white-space: nowrap;
}
.btn-clinica-schedule:hover { background: #047857; }
.btn-clinica-profile {
  background: none; color: var(--primary);
  padding: .5rem 1rem; border-radius: var(--radius);
  border: 1.5px solid var(--primary); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  display: flex; align-items: center; gap: .4rem;
  transition: var(--transition); white-space: nowrap;
}
.btn-clinica-profile:hover { background: var(--primary-lighter); }

/* ---- Load More ---- */
.load-more-wrap { text-align: center; padding: 1rem 0 2rem; }
.btn-load-more {
  background: var(--white); border: 2px solid #059669; color: #059669;
  font-weight: var(--font-semibold); padding: .75rem 2rem;
  border-radius: var(--radius-full); cursor: pointer;
  font-size: var(--text-sm);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: var(--transition);
}
.btn-load-more:hover { background: #059669; color: #fff; }
.btn-load-more:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Sidebar ---- */
.clinicas-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

/* Map placeholder */
.sidebar-map-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 200px;
}
.map-placeholder {
  height: 200px; background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; color: #065F46;
}
.map-placeholder i { font-size: 2.5rem; opacity: .6; }
.map-placeholder span { font-weight: var(--font-semibold); font-size: var(--text-base); }
.map-placeholder small { font-size: var(--text-xs); opacity: .7; }

/* Filter Card */
.sidebar-filter-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.sidebar-filter-card h4 {
  font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--gray-800); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.sidebar-filter-card h4 i { color: #059669; }
.sf-group { margin-bottom: 1rem; }
.sf-group label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--gray-700); display: block; margin-bottom: .4rem; }
.sf-select {
  width: 100%; padding: .5rem .75rem;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  font-size: var(--text-sm); color: var(--gray-700); background: var(--white);
}
.sf-checkboxes { display: flex; flex-direction: column; gap: .4rem; }
.sf-check {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-sm); color: var(--gray-600); cursor: pointer;
}
.sf-check input[type="checkbox"] { accent-color: #059669; width: 15px; height: 15px; }
.rating-filter { display: flex; gap: .4rem; }
.rating-btn {
  flex: 1; padding: .35rem .5rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: none; color: var(--gray-600);
  font-size: var(--text-xs); cursor: pointer;
  transition: var(--transition);
}
.rating-btn:hover, .rating-btn.active { border-color: #F59E0B; color: #D97706; background: #FEF3C7; }
.btn-apply-filters {
  width: 100%; padding: .65rem;
  background: #059669; color: #fff; border: none;
  border-radius: var(--radius); font-size: var(--text-sm);
  font-weight: var(--font-semibold); cursor: pointer;
  transition: var(--transition);
}
.btn-apply-filters:hover { background: #047857; }

/* CTA Card */
.sidebar-cta-card {
  background: linear-gradient(135deg, #065F46, #059669);
  color: #fff; border-radius: var(--radius-lg);
  padding: 1.5rem; text-align: center;
  box-shadow: var(--shadow-card);
}
.scta-icon { font-size: 2rem; margin-bottom: .75rem; opacity: .85; }
.sidebar-cta-card h4 { font-size: var(--text-base); font-weight: var(--font-bold); margin-bottom: .5rem; }
.sidebar-cta-card p { font-size: var(--text-sm); opacity: .85; margin-bottom: 1rem; line-height: 1.5; }
.btn-scta {
  display: block; background: #fff; color: #065F46;
  padding: .6rem 1rem; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-bold);
  text-align: center; margin-bottom: .5rem;
  transition: var(--transition);
}
.btn-scta:hover { background: #D1FAE5; }
.btn-scta-outline {
  display: block; background: none;
  border: 1.5px solid rgba(255,255,255,0.5); color: #fff;
  padding: .55rem 1rem; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  text-align: center; transition: var(--transition);
}
.btn-scta-outline:hover { background: rgba(255,255,255,0.15); }

/* Stats Card */
.sidebar-stats-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow-card);
}
.sidebar-stats-card h4 {
  font-size: var(--text-sm); font-weight: var(--font-bold);
  color: var(--gray-700); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.sidebar-stats-card h4 i { color: #059669; }
.stats-list { display: flex; flex-direction: column; gap: .65rem; }
.stats-list li {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-sm);
}
.stats-list li span { color: var(--gray-500); }
.stats-list li strong { font-weight: var(--font-bold); color: var(--gray-800); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; opacity: 0; visibility: hidden; transition: var(--transition);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.clinica-modal-container {
  background: var(--white); border-radius: var(--radius-xl);
  max-width: 700px; width: 100%; max-height: 90vh;
  overflow-y: auto; position: relative;
  box-shadow: var(--shadow-2xl);
  animation: modalIn .3s ease forwards;
}
@keyframes modalIn { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
  position: sticky; top: 1rem; float: right;
  margin: 1rem 1rem 0 0;
  background: var(--gray-100); border: none;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600); cursor: pointer; font-size: 1rem;
  transition: var(--transition); z-index: 10;
}
.modal-close:hover { background: var(--gray-200); }
.clinica-modal-body { padding: 1.75rem 2rem 2rem; }
.modal-clinica-header { margin-bottom: 1.5rem; }
.modal-clinica-logo {
  width: 80px; height: 80px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 1rem;
}
.modal-clinica-name { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--gray-900); margin-bottom: .4rem; }
.modal-clinica-rating { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.modal-clinica-address { color: var(--gray-500); font-size: var(--text-sm); display: flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; }
.modal-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.modal-info-item { background: var(--gray-50); border-radius: var(--radius); padding: .75rem 1rem; }
.modal-info-label { font-size: var(--text-xs); color: var(--gray-400); margin-bottom: .2rem; }
.modal-info-value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--gray-800); }
.modal-specialties-section { margin-bottom: 1.5rem; }
.modal-section-title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--gray-800); margin-bottom: .75rem; }
.modal-specialties-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal-spec-pill {
  padding: .3rem .85rem; border-radius: var(--radius-full);
  background: #D1FAE5; color: #065F46;
  font-size: var(--text-xs); font-weight: var(--font-medium);
}
.modal-doctors-section { margin-bottom: 1.5rem; }
.modal-doctors-list { display: flex; flex-direction: column; gap: .75rem; }
.modal-doctor-item { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: var(--gray-50); border-radius: var(--radius); }
.modal-doctor-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--font-bold); font-size: .8rem;
  flex-shrink: 0;
}
.modal-doctor-info { flex: 1; }
.modal-doctor-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--gray-800); display: flex; align-items: center; gap: .3rem; }
.modal-doctor-spec { font-size: var(--text-xs); color: var(--gray-400); }
.modal-btn-schedule {
  background: #059669; color: #fff;
  padding: .4rem .85rem; border-radius: var(--radius-full);
  border: none; cursor: pointer; font-size: var(--text-xs);
  font-weight: var(--font-semibold); transition: var(--transition);
}
.modal-btn-schedule:hover { background: #047857; }
.modal-actions { display: flex; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.modal-btn-primary {
  flex: 1; padding: .65rem 1.5rem;
  background: #059669; color: #fff; border: none;
  border-radius: var(--radius); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-bold);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: var(--transition);
}
.modal-btn-primary:hover { background: #047857; }
.modal-btn-secondary {
  padding: .65rem 1.5rem;
  border: 1.5px solid var(--gray-200); background: none; color: var(--gray-700);
  border-radius: var(--radius); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  display: flex; align-items: center; gap: .5rem;
  transition: var(--transition);
}
.modal-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

/* ---- Toast ---- */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: .6rem; }
.toast {
  background: var(--gray-900); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--radius-lg);
  font-size: var(--text-sm); display: flex; align-items: center; gap: .6rem;
  box-shadow: var(--shadow-xl);
  animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--error); }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .clinicas-layout { grid-template-columns: 1fr; }
  .clinicas-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .clinica-card { grid-template-columns: 1fr; }
  .clinica-card-accent { width: 100%; height: 4px; border-radius: var(--radius-full); }
  .clinica-card-logo { display: none; }
  .clinica-card-actions { flex-direction: row; align-items: center; padding: 1rem; border-top: 1px solid var(--gray-100); }
  .clinicas-sidebar { grid-template-columns: 1fr; }
  .clinicas-search-bar { flex-direction: column; }
  .cs-field, .cs-field-sm { min-width: 100%; flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .modal-info-grid { grid-template-columns: 1fr; }
  .clinica-modal-body { padding: 1.25rem; }
}