/**
 * Oral View Landing - Identidad institucional
 * Teal #00968F | Azul Sky #4BB5E8 | Verde Menta #92D0B4 | Slate 700/100/200
 */
:root {
  /* Tipografía: títulos Montserrat, cuerpo Open Sans (landing público) */
  --ov-font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ov-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ov-body-line-height: 1.65;
  --ov-heading-line-height: 1.22;
  --ov-heading-letter-spacing: -0.02em;

  --ov-primary: #00968F;
  --ov-primary-hover: #007a74;
  --ov-accent-sky: #4BB5E8;
  --ov-accent-mint: #92D0B4;
  --ov-text: #334155;
  --ov-ui-bg: #f1f5f9;
  --ov-ui-border: #e2e8f0;
  --ov-verde-azulado: var(--ov-primary);
  --ov-verde-azulado-hover: var(--ov-primary-hover);
  --ov-teal-deep: var(--ov-primary-hover);
  --ov-azul-brillante: var(--ov-accent-sky);
  --ov-verde-suave: var(--ov-accent-mint);
  --ov-blanco: #FFFFFF;
  --ov-slate-50: #f8fafc;
  --ov-slate-100: #f1f5f9;
  --ov-slate-200: #e2e8f0;
  --ov-slate-500: #64748b;
  --ov-slate-700: #334155;
  --ov-gris-texto: var(--ov-text);

  --bs-primary: #00968F;
  --bs-primary-rgb: 0, 150, 143;
  --bs-secondary: #64748b;
  --bs-dark: #334155;
  --bs-light: #f1f5f9;
}

/*
 * Bootstrap empaquetado: .text-primary { color: #3368c6 !important } (azul ajeno a la marca).
 * Unificar títulos y utilidades con el verde azulado institucional.
 */
.text-primary {
  color: var(--ov-primary) !important;
}

body {
  font-family: var(--ov-font-sans);
  font-weight: 400;
  line-height: var(--ov-body-line-height);
  color: var(--ov-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos y displays: misma familia y ritmo en todo el landing */
h1, h2, h3, h4, h5, h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.navbar-brand {
  font-family: var(--ov-font-heading);
  line-height: var(--ov-heading-line-height);
  letter-spacing: var(--ov-heading-letter-spacing);
  color: inherit;
}

.display-1,
.display-2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.display-3,
.display-4 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.display-5,
.display-6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

h1, .h1 {
  font-weight: 700;
}
h2, .h2,
h3, .h3 {
  font-weight: 600;
}
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 600;
}

.page-header h1,
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption .display-1 {
  font-family: var(--ov-font-heading);
}

/* Cuerpo “promo”: subtítulos y bloques destacados */
.lead {
  font-family: var(--ov-font-sans);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.65;
}

/* Hero carrusel: párrafos alineados al resto del sitio */
.carousel-caption p {
  font-family: var(--ov-font-sans);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
  max-width: 40rem;
}

.carousel-caption .text-end p {
  margin-left: auto;
}

/* UI que debe seguir el cuerpo (sin mezclar con la fuente del tema Bootstrap) */
.navbar .navbar-nav .nav-link,
.btn,
.form-control,
.form-select,
.form-floating > label,
.input-group-text,
.accordion-button,
.accordion-body {
  font-family: var(--ov-font-sans);
}

/* Migas de pan bajo cabeceras de página */
.page-header .breadcrumb,
.page-header .breadcrumb a,
.page-header .breadcrumb-item.active {
  font-family: var(--ov-font-sans);
  font-size: 1rem;
  font-weight: 500;
}

/* Listados y párrafos en secciones de contenido */
.page-section p,
.page-section li {
  font-family: var(--ov-font-sans);
  line-height: var(--ov-body-line-height);
}

.page-section .text-muted {
  color: #64748b !important;
}

.page-section .card-text {
  font-family: var(--ov-font-sans);
  line-height: 1.65;
}

.page-section .card-text.small {
  font-size: 0.9375rem;
}

/* Barra superior (brand) - fondo verde azulado ya aplicado vía bg-primary */
.container-fluid.bg-primary.text-white {
  background-color: var(--ov-verde-azulado) !important;
}

/* Logo "View" en acento azul brillante (como intranet) */
.container-fluid.bg-primary .h1 .text-dark {
  color: var(--ov-azul-brillante) !important;
}

/* Botones primarios: color institucional (Bootstrap trae #3368C6 fijo en .min) */
.btn-primary {
  background-color: var(--ov-primary);
  border-color: var(--ov-primary);
  color: #fff;
  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ov-primary-hover);
  border-color: var(--ov-primary-hover);
  color: #fff;
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 150, 143, 0.35);
}

/* Redes (navbar / footer): mismo color, timing y hover que btn-primary; anula el transition genérico .btn (0.5s) */
.oralview-social-nav .btn-sm-square.btn-primary {
  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
  background-color: var(--ov-primary);
  border-color: var(--ov-primary);
  color: #fff;
}

.oralview-social-nav .btn-sm-square.btn-primary:hover,
.oralview-social-nav .btn-sm-square.btn-primary:focus-visible {
  background-color: var(--ov-primary-hover);
  border-color: var(--ov-primary-hover);
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--ov-verde-azulado);
  color: var(--ov-verde-azulado);
}

.btn-outline-primary:hover {
  background-color: var(--ov-verde-azulado);
  border-color: var(--ov-verde-azulado);
  color: #fff;
}

/* Back to top */
.back-to-top {
  background-color: var(--ov-verde-azulado) !important;
  border-color: var(--ov-verde-azulado) !important;
}

.back-to-top:hover {
  background-color: var(--ov-verde-azulado-hover) !important;
  border-color: var(--ov-verde-azulado-hover) !important;
}

/* Page header (breadcrumb) - overlay en tono verde azulado */
.page-header {
  background: linear-gradient(rgba(0, 150, 143, .4), rgba(0, 150, 143, .4)), url(../img/testimonial.jpg) center center no-repeat !important;
  background-size: cover;
}

/* Carrusel caption overlay - tono verde azulado */
.carousel-caption {
  background: rgba(0, 150, 143, .35);
}

/* Sección IA (fondo primary): subtítulos alineados con Montserrat del display-6 principal */
.page-section.bg-primary.text-white .ov-ia-feature-title {
  font-family: var(--ov-font-heading);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: var(--ov-heading-letter-spacing);
  color: #fff;
  margin: 0 0 0.5rem;
}

.page-section.bg-primary.text-white .ov-ia-feature-text {
  font-family: var(--ov-font-sans);
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* Footer y formulario de contacto: encabezados alineados con el sistema */
.footer .footer-heading {
  font-family: var(--ov-font-heading);
  letter-spacing: var(--ov-heading-letter-spacing);
}

.footer .btn.btn-link {
  font-family: var(--ov-font-sans);
  font-weight: 500;
}

.contact-section .contact-heading {
  font-family: var(--ov-font-heading);
  letter-spacing: var(--ov-heading-letter-spacing);
}

/* Footer: layout y mapa en landing/footer.css */

/* Spinner de carga */
#spinner .spinner-border.text-primary {
  color: var(--ov-verde-azulado) !important;
}

/* Vista pública de verificación de orden */
.ov-public-wrap {
  background: linear-gradient(180deg, #f8fcfd 0%, #f1f5f9 100%);
}

.ov-public-card {
  border-radius: 16px;
  border: 1px solid var(--ov-ui-border) !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}

.ov-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .2px;
}

.ov-status--pendiente {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.ov-status--atendido {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #86efac;
}

.ov-status--anulado {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.ov-kpi-box {
  border: 1px solid var(--ov-ui-border);
  border-radius: 12px;
  background: #fff;
  padding: 0.75rem 0.9rem;
}

.ov-section-card {
  border: 1px solid var(--ov-ui-border);
  border-radius: 12px;
  background: #fff;
  padding: 0.95rem;
}