@import url("https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:wght@300;400;500;600;700&family=Montserrat:wght@300&family=Playfair+Display:wght@500&display=optional");

/*
  SISTEMA TIPOGRÁFICO CENTRALIZADO

  Bozon visual     -> Josefin Sans
  Acoustica visual -> Allura

  Criterio de uso:
  - Josefin Sans: lectura, navegación, botones, formularios, tablas, tarjetas,
    subtítulos y contenido funcional.
  - Allura: únicamente títulos principales y acentos decorativos.

  Este archivo debe cargarse al final de cada página para impedir que hojas de
  estilo anteriores cambien la jerarquía tipográfica entre módulos.
*/
:root {
  --font-bozon: "Josefin Sans", sans-serif;
  --font-acoustica: "Allura", cursive;
  --font-montserrat-light: "Montserrat", "Josefin Sans", sans-serif;

  /* Alias usados por los estilos históricos del proyecto. */
  --font: var(--font-bozon);
  --font-sans: var(--font-bozon);
  --font-serif: var(--font-bozon);
  --sans: var(--font-bozon);
  --font-body: var(--font-bozon);
  --font-display: var(--font-acoustica);
  --font-script: var(--font-acoustica);
  --display: var(--font-acoustica);
}

/* El panel de contenido web usa Montserrat Light en lugar de caligrafía. */
html body.web-admin-panel {
  --font-acoustica: var(--font-montserrat-light);
  --font-display: var(--font-montserrat-light);
  --font-script: var(--font-montserrat-light);
  --display: var(--font-montserrat-light);
}

html body.web-admin-panel .admin-topbar h2,
html body.web-admin-panel .admin-page-title,
html body.web-admin-panel .metric strong {
  font-family: var(--font-montserrat-light) !important;
  font-style: normal !important;
  font-weight: 300 !important;
}

html {
  font-family: var(--font-bozon);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
  BASE FUNCIONAL
  Todo parte de Bozon visual. Esto evita que títulos secundarios, preguntas,
  tarjetas o controles hereden accidentalmente la fuente caligráfica.
*/
html body,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body li,
html body dt,
html body dd,
html body blockquote,
html body figcaption,
html body small,
html body span,
html body a,
html body label,
html body legend,
html body input,
html body select,
html body textarea,
html body button,
html body table,
html body th,
html body td,
html body code,
html body pre,
html body .btn,
html body .eyebrow,
html body .panel-kicker,
html body .admin-topbar > div > span,
html body .admin-nav a,
html body .logout-btn,
html body .save-message,
html body .form-message,
html body .alert,
html body .toast,
html body .modal,
html body .promo-popup {
  font-family: var(--font-bozon) !important;
}

/*
  TÍTULOS DECORATIVOS PRINCIPALES
  Acoustica visual aparece solo donde aporta identidad sin perjudicar lectura.
*/
html body .section-heading .section-tag,
html body .section-heading > div > h1,
html body .section-heading > div > h2,
html body .product-list-title,
html body .services-list-title,
html body .contact-list-title,
html body .about-title-bar,
html body .about-copy > h2,
html body .home-highlight-grid .side-hero-card > h2,
html body .hero-accent,
html body .admin-page-title,
html body .admin-topbar h2 {
  font-family: var(--font-acoustica) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Hero completamente caligráfico */
html body .hero h1,
html body .hero h1 .hero-line,
html body .hero h1 .hero-accent,
html body .hero h1 .hero-strong {
  font-family: var(--font-acoustica) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 0.86 !important;
}

@media (max-width: 640px) {
  html body .hero h1 {
    font-family: var(--font-acoustica) !important;
    font-size: 7rem !important;
    line-height: 0.76 !important;
    max-width: 100% !important;
  }
}

/* La web pública usa Playfair Display solo donde antes había escritura manuscrita. */
html body.public-site {
  --font-acoustica: "Playfair Display", Georgia, serif;
  --font-display: var(--font-acoustica);
  --font-script: var(--font-acoustica);
  --display: var(--font-acoustica);
}

html body.public-site .section-heading .section-tag,
html body.public-site .section-heading > div > h1,
html body.public-site .section-heading > div > h2,
html body.public-site .product-list-title,
html body.public-site .services-list-title,
html body.public-site .contact-list-title,
html body.public-site .about-title-bar,
html body.public-site .about-copy > h2,
html body.public-site .home-highlight-grid .side-hero-card > h2,
html body.public-site .hero-accent,
html body.public-site .hero h1,
html body.public-site .hero h1 .hero-line,
html body.public-site .hero h1 .hero-accent,
html body.public-site .hero h1 .hero-strong {
  font-family: var(--font-acoustica) !important;
  font-weight: 500 !important;
}
/* Jerarquía pública equilibrada. */
html body .section-heading .section-tag,
html body .product-list-title,
html body .services-list-title,
html body .contact-list-title,
html body .about-title-bar {
  font-size: clamp(2.55rem, 4.4vw, 4.5rem) !important;
  line-height: .92 !important;
}

html body .section-heading > div > h2,
html body .about-copy > h2,
html body .home-highlight-grid .side-hero-card > h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.65rem) !important;
  line-height: .95 !important;
}

/*
  ADMINISTRADOR
  Solo el título principal de cada módulo es caligráfico. Encabezados internos,
  tablas, formularios y tarjetas permanecen en Bozon visual para ser legibles.
*/
html body .admin-topbar h2,
html body .admin-page-title {
  margin: 0 !important;
  color: #5e9da4 !important;
  font-size: clamp(2.75rem, 4vw, 4rem) !important;
  line-height: .9 !important;
}

html body .admin-main .panel > h3,
html body .admin-main .form-section-title,
html body .admin-main .clinical-panel-heading h3,
html body .admin-main .clinical-mode-card h3,
html body .admin-main .clinical-paper-title,
html body .admin-main .clinical-paper h4,
html body .admin-main fieldset > legend {
  font-family: var(--font-bozon) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

html body .admin-main .panel > h3,
html body .admin-main .form-section-title,
html body .admin-main .clinical-panel-heading h3,
html body .admin-main .clinical-mode-card h3 {
  color: #4b858b !important;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
}

/* Menú administrativo completamente estable. */
.admin-nav a,
.logout-btn,
.admin-nav a:hover,
.logout-btn:hover,
.admin-nav a:focus,
.logout-btn:focus,
.admin-nav a:focus-visible,
.logout-btn:focus-visible,
.admin-nav a:active,
.logout-btn:active,
.admin-nav a.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 13px !important;
  border-width: 1px !important;
  font-family: var(--font-bozon) !important;
  font-size: .84rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
  scale: 1 !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.admin-nav a.active {
  background: #ffffff !important;
  color: #397b82 !important;
}

/* Botón Agendar cita: dimensiones invariantes en navegación, scroll y estados. */
.site-header .header-actions {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.site-header .btn-header,
.site-header .btn-header:hover,
.site-header .btn-header:focus,
.site-header .btn-header:focus-visible,
.site-header .btn-header:active {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 176px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 28px !important;
  border-width: 1px !important;
  font-family: var(--font-bozon) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  text-align: center !important;
  transform: none !important;
  scale: 1 !important;
}

/* Navegación estable y legible. */
.site-header .nav-links a,
.site-header .nav-links a:hover,
.site-header .nav-links a:focus,
.site-header .nav-links a:active {
  font-family: var(--font-bozon) !important;
  font-size: clamp(1rem, 1.08vw, 1.12rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* Controles uniformes y legibles. */
input,
select,
textarea,
button,
.btn {
  font-style: normal !important;
  font-variant: normal !important;
}

@media (max-width: 760px) {
  .site-header .btn-header,
  .site-header .btn-header:hover,
  .site-header .btn-header:focus,
  .site-header .btn-header:active {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .section-heading .section-tag,
  html body .product-list-title,
  html body .services-list-title,
  html body .contact-list-title,
  html body .about-title-bar {
    font-size: clamp(2.25rem, 12vw, 3.35rem) !important;
  }

  html body .admin-topbar h2,
  html body .admin-page-title {
    font-size: clamp(2.35rem, 13vw, 3.25rem) !important;
  }

  html body .admin-main .panel > h3,
  html body .admin-main .form-section-title,
  html body .admin-main .clinical-panel-heading h3,
  html body .admin-main .clinical-mode-card h3 {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .btn-header,
  .site-header .nav-links a,
  .admin-nav a,
  .logout-btn {
    transition: none !important;
  }
}