/*
|--------------------------------------------------------------------------
| LC Medical Care - Public Dark Mode Controller
|--------------------------------------------------------------------------
| Global website-only dark mode. The toggle button is injected by
| assets/js/theme-controller.js so no individual public page needs changes.
|--------------------------------------------------------------------------
*/

:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

.lc-public-theme-toggle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(7, 31, 56, .12);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lc-public-theme-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .24);
  box-shadow: 0 14px 32px rgba(7, 31, 56, .18);
}

.lc-public-theme-toggle:focus-visible {
  outline: 3px solid rgba(184, 243, 106, .66);
  outline-offset: 3px;
}

.lc-public-theme-toggle.is-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: #071f38;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .online-page,
html[data-theme="dark"] .know-page,
html[data-theme="dark"] .register-page,
html[data-theme="dark"] .clinic-page,
html[data-theme="dark"] .appointment-page,
html[data-theme="dark"] .lc-sp-page {
  background:
    radial-gradient(circle at top left, rgba(184, 243, 106, .08), transparent 28%),
    linear-gradient(180deg, #061524 0%, #091b2e 100%) !important;
  color: #eaf4f2 !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .home-social-bar,
html[data-theme="dark"] .construction-bar {
  background: #041426 !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .brand-name-header,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .primary-nav a,
html[data-theme="dark"] .lang-switch,
html[data-theme="dark"] .lang-switch small {
  color: #ffffff !important;
}

html[data-theme="dark"] .nav-pill {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .nav-pill.is-active {
  background: #ffffff !important;
  color: #071f38 !important;
}

html[data-theme="dark"] .subscribe-pill,
html[data-theme="dark"] .lc-public-theme-toggle[aria-pressed="true"] {
  background: #b8f36a !important;
  color: #071f38 !important;
  border-color: rgba(184, 243, 106, .45) !important;
}

html[data-theme="dark"] .lc-hero-section,
html[data-theme="dark"] .lc-hero-card,
html[data-theme="dark"] .lc-hero-left {
  background: #071f38 !important;
}

html[data-theme="dark"] .lc-hero-title,
html[data-theme="dark"] .lc-hero-text,
html[data-theme="dark"] .lc-hero-kicker,
html[data-theme="dark"] .lc-hero-card h1,
html[data-theme="dark"] .lc-hero-card p {
  color: #ffffff !important;
}

html[data-theme="dark"] .lc-hero-left::before {
  opacity: .32 !important;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .lc-value-section,
html[data-theme="dark"] .lc-doctors-section,
html[data-theme="dark"] .practice-section,
html[data-theme="dark"] .team-section,
html[data-theme="dark"] .benefits-section,
html[data-theme="dark"] .register-form-section,
html[data-theme="dark"] .clinic-location-section,
html[data-theme="dark"] .clinic-services-section,
html[data-theme="dark"] .online-section,
html[data-theme="dark"] .appointment-section {
  background: transparent !important;
}

html[data-theme="dark"] .section-card,
html[data-theme="dark"] .media-card,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .lc-value-card,
html[data-theme="dark"] .lc-doctor-card,
html[data-theme="dark"] .online-card,
html[data-theme="dark"] .online-step,
html[data-theme="dark"] .guideline-box,
html[data-theme="dark"] .practice-card,
html[data-theme="dark"] .doctor-face,
html[data-theme="dark"] .doctor-back,
html[data-theme="dark"] .contact-page .contact-card,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .register-intro-card,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .register-step,
html[data-theme="dark"] .register-form-card,
html[data-theme="dark"] .appointment-card,
html[data-theme="dark"] .clinic-location-card,
html[data-theme="dark"] .clinic-map-card,
html[data-theme="dark"] .services-head,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .lc-sp-card {
  background: #0b2238 !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.24) !important;
  color: #eaf4f2 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .doctor-role,
html[data-theme="dark"] .service-summary,
html[data-theme="dark"] .appointment-head h2,
html[data-theme="dark"] .appointment-card h2,
html[data-theme="dark"] .register-section-head h2,
html[data-theme="dark"] .register-form-head h2,
html[data-theme="dark"] .online-section-head h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .doctor-back p,
html[data-theme="dark"] .service-details li,
html[data-theme="dark"] .register-section-head p,
html[data-theme="dark"] .register-form-head p,
html[data-theme="dark"] .online-section-head p,
html[data-theme="dark"] .appointment-head p,
html[data-theme="dark"] .appointment-card p,
html[data-theme="dark"] .contact-item p,
html[data-theme="dark"] .contact-item a,
html[data-theme="dark"] .guideline-list li {
  color: #c7d8e4 !important;
}

html[data-theme="dark"] .contact-item,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .clinic-notice,
html[data-theme="dark"] .register-notice,
html[data-theme="dark"] .medical-notice,
html[data-theme="dark"] .doctor-quote,
html[data-theme="dark"] .clinic-address,
html[data-theme="dark"] .appointment-notice,
html[data-theme="dark"] .date-option {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #eaf4f2 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #071f38 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(255,255,255,.58) !important;
}

html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
  background: #041426 !important;
  color: #c7d8e4 !important;
}

@media (max-width: 920px) {
  .lc-public-theme-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: .95rem;
  }
}
/* =========================================================
   LC Medical Care - Dark mode readability hotfix
   Corrige secciones blancas con texto claro en modo oscuro
   ========================================================= */

html[data-theme="dark"] .register-page,
html[data-theme="dark"] .online-page,
html[data-theme="dark"] .contact-page,
html[data-theme="dark"] .know-page,
html[data-theme="dark"] .clinic-page {
  background: #061524 !important;
  color: #eef7f6 !important;
}

/* Secciones internas que estaban quedando blancas */
html[data-theme="dark"] .register-section,
html[data-theme="dark"] .register-process,
html[data-theme="dark"] .register-benefits,
html[data-theme="dark"] .register-form-section,
html[data-theme="dark"] .online-section,
html[data-theme="dark"] .online-process,
html[data-theme="dark"] .online-services-section,
html[data-theme="dark"] .online-guidelines,
html[data-theme="dark"] section {
  background-color: #061524 !important;
}

/* Encabezados y textos descriptivos sobre fondos oscuros */
html[data-theme="dark"] .register-page h1,
html[data-theme="dark"] .register-page h2,
html[data-theme="dark"] .register-page h3,
html[data-theme="dark"] .online-page h1,
html[data-theme="dark"] .online-page h2,
html[data-theme="dark"] .online-page h3,
html[data-theme="dark"] .contact-page h1,
html[data-theme="dark"] .contact-page h2,
html[data-theme="dark"] .contact-page h3,
html[data-theme="dark"] .know-page h1,
html[data-theme="dark"] .know-page h2,
html[data-theme="dark"] .know-page h3,
html[data-theme="dark"] .clinic-page h1,
html[data-theme="dark"] .clinic-page h2,
html[data-theme="dark"] .clinic-page h3 {
  color: #ffffff !important;
}

/* Párrafos introductorios que se veían casi invisibles */
html[data-theme="dark"] .register-page p,
html[data-theme="dark"] .online-page p,
html[data-theme="dark"] .contact-page p,
html[data-theme="dark"] .know-page p,
html[data-theme="dark"] .clinic-page p,
html[data-theme="dark"] .register-section-head p,
html[data-theme="dark"] .online-section-head p,
html[data-theme="dark"] .section-head p {
  color: #d7e8f2 !important;
}

/* Cards oscuras legibles */
html[data-theme="dark"] .register-step,
html[data-theme="dark"] .online-step,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .online-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .practice-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .register-intro-card,
html[data-theme="dark"] .register-form-card {
  background: #0b2238 !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28) !important;
}

/* Textos dentro de cards */
html[data-theme="dark"] .register-step h3,
html[data-theme="dark"] .online-step h3,
html[data-theme="dark"] .benefit-card h3,
html[data-theme="dark"] .online-card h3,
html[data-theme="dark"] .service-card h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .register-step p,
html[data-theme="dark"] .online-step p,
html[data-theme="dark"] .benefit-card p,
html[data-theme="dark"] .online-card p,
html[data-theme="dark"] .service-card p {
  color: #e6f3f6 !important;
}

/* Números circulares de pasos */
html[data-theme="dark"] .step-number,
html[data-theme="dark"] .register-step-number,
html[data-theme="dark"] .online-step-number {
  background: #071f38 !important;
  color: #b8f36a !important;
}

/* Botones principales */
html[data-theme="dark"] .register-page .btn,
html[data-theme="dark"] .online-page .btn,
html[data-theme="dark"] .appointment-primary,
html[data-theme="dark"] .register-submit,
html[data-theme="dark"] .online-cta {
  background: #b8f36a !important;
  color: #071f38 !important;
}

/* Formularios en modo oscuro */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #071f38 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, .58) !important;
}