/* =========================
   IMPORTACIÓN DE FUENTES
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* =========================
   VARIABLES DE MARCA
   ========================= */
:root {
  --naranja: #F3921D;
  --azul-cielo: #00AEEF;
  --azul-oscuro: #005EAA;
  --verde-lima: #A7C943;
  --verde-oscuro: #2F5E1C;
  --verde-pastel: #D1DBAD;
  --blanco: #FFFFFF;
  --default-font: "Tilt Neon", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Tilt Neon", "Open Sans", sans-serif;
  --nav-font: "Inter", "Open Sans", sans-serif;
}

/* =========================
   ESTILOS GENERALES
   ========================= */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--verde-pastel);
  font-family: var(--default-font);
}

.logo {
  max-width: 380px;
}

input,
select {
  margin-bottom: 1rem;
  font-family: var(--default-font);
}

/* Opcional: marcar opciones deshabilitadas en gris */
select option:disabled {
  color: #999 !important;
}

/* =========================
   BOTONES Y HORARIOS
   ========================= */
.btn-primary {
  background-color: var(--azul-cielo);
  border-color: var(--azul-cielo);
}

.btn-primary:hover {
  background-color: var(--naranja);
  border-color: var(--naranja);
}

.horario-btn.active {
  background-color: var(--naranja);
  color: var(--azul-cielo);
}

.horario-btn.ocupado {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #adb5bd !important; /* gris Bootstrap */
  color: #fff !important;
  border: none;
}

/* Espaciado para el contenido principal */
.py-4 {
  margin-top: 70px;
  padding-bottom: 2rem;
}

/* =========================
   NAVBAR Y NAVEGACIÓN
   ========================= */

/* Header transparente por defecto */
#navbarMain {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  font-family: var(--nav-font);
}

/* Navbar al hacer scroll */
.navbar.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled .nav-link {
  color: #005EAA !important;
}

.navbar.scrolled .nav-link:hover {
  color: var(--naranja) !important;
}

/* Links del navbar */
.navbar-nav .nav-link {
  color: var(--blanco);
  font-weight: 500;
  margin: 0 0.5rem;
  font-family: var(--nav-font);
}

.navbar-nav .nav-link:hover {
  color: var(--naranja);
}

/* Botón hamburguesa personalizado */
.navbar-toggler {
  border-color: var(--verde-lima);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='%23F3921D' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* =========================
   BOTONES FLOTANTES
   ========================= */
.btn-float {
  position: fixed;
  bottom: 20px;
  z-index: 1000;
  background-color: var(--azul-oscuro);
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
}

.btn-float img {
  width: 35px;
  height: 35px;
}

/* Posición individual de WhatsApp */
#btnWhatsapp {
  right: 20px;
  background-color: transparent;
  border: 2px solid #128C7E;
}

/* Hover para ambos botones flotantes */
.btn-float:hover {
  background-color: var(--naranja);
  transform: scale(1.1);
}

/* =========================
   FOOTER
   ========================= */
.footer {
  margin-top: auto;
  background-color: var(--azul-oscuro);
  color: #ffffff;
  font-size: 0.85rem;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================
   TIPOGRAFÍA PERSONALIZADA
   ========================= */
/* Aplica la fuente Tilt Neon a todos los encabezados */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
}

/* Aplica Tilt Neon también al texto animado y títulos destacados */
#typedText, .display-5, .fw-semibold {
  font-family: var(--heading-font);
}

/* Botones usan Inter */
.btn, .horario-btn, .btn-primary {
  font-family: var(--nav-font);
}

/* =========================
   ICONOS REDES Y FOOTER
   ========================= */
.siguenos img, .comunicate img {
  max-height: 30px;
}

.copyright {
  font-size: 1rem;
  color: #ffffff;
  text-align: center;
  margin-top: 1rem;
}