@charset "UTF-8";
/* ============================================
   VARIABLES DE COLORES
   ============================================ */
:root {
  /* Colores principales */
  --color-blanco: #fff;
  --color-negro: #333;
  --color-gris-claro: #666;
  --color-gris-medio: #555;
  /* Colores de marca */
  --color-dorado: #D4A574;
  --color-dorado-hover: #C89960;
  --color-marron: #8B7355;
  --color-azul-oscuro: #2c3e50;
  /* Colores de fondo */
  --color-fondo-claro: #f5f7fa;
  --color-fondo-azul: #c3cfe2;
  /* Colores con transparencia */
  --color-blanco-transparente-10: rgba(255, 255, 255, 0.1);
  --color-blanco-transparente-30: rgba(255, 255, 255, 0.3);
  --color-blanco-transparente-95: rgba(255, 255, 255, 0.95);
  --color-negro-transparente-08: rgba(0, 0, 0, 0.08);
  --color-negro-transparente-10: rgba(0, 0, 0, 0.1);
  --color-negro-transparente-15: rgba(0, 0, 0, 0.15);
  --color-negro-transparente-20: rgba(0, 0, 0, 0.2);
  --color-negro-transparente-30: rgba(0, 0, 0, 0.3);
  --color-dorado-transparente-10: rgba(212, 165, 116, 0.1);
  --color-dorado-transparente-30: rgba(212, 165, 116, 0.3);
  --color-dorado-transparente-40: rgba(212, 165, 116, 0.4);
  --color-azul-oscuro-transparente-98: rgba(44, 62, 80, 0.98);
  --color-fondo-claro-transparente-80: rgba(245, 247, 250, 0.8);
}

/* ============================================
   ESTILOS GENERALES - VETERINARIA
   ============================================ */
/* Reset de estilos para empezar desde cero */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body con fondo degradado suave y una cuadrícula sutil */
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, var(--color-fondo-claro) 0%, var(--color-fondo-azul) 100%);
  background-image: linear-gradient(90deg, var(--color-blanco-transparente-10) 1px, transparent 1px), linear-gradient(var(--color-blanco-transparente-10) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
  color: var(--color-negro);
}

.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 11000;
  pointer-events: none;
}

@media (max-width: 600px) {
  .toast-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(90%, 320px);
  }
}
.toast-message {
  padding: 0.9rem 1.4rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: #2196F3;
  opacity: 0;
  transform: translateY(-10px);
  animation: toastIn 0.35s forwards ease;
}

.toast-message.toast-success {
  background: #4CAF50;
}

.toast-message.toast-error {
  background: #f44336;
}

.toast-message.toast-info {
  background: #2196F3;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
/* ============================================
   HEADER - NAVEGACIÓN PRINCIPAL
   ============================================ */
/* Header fijo y transparente para quedar sobre la imagen */
.encabezado {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  z-index: 1000;
  padding: 1rem 0;
  transition: all 0.4s ease;
  /* Header con fondo oscuro al hacer scroll */
}

.encabezado.scroll-activo {
  background: var(--color-azul-oscuro-transparente-98);
  backdrop-filter: blur(15px);
  box-shadow: 0 2px 20px var(--color-negro-transparente-20);
  padding: 0.7rem 0;
}

/* Contenedor de la navegación centrado */
.navegacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Icono de la huella blanco con sombra para visibilidad sobre la imagen */
.logo .icono-huella {
  font-size: 2rem;
  color: var(--color-blanco);
  cursor: pointer;
  transition: transform 0.3s ease;
  text-shadow: 0 2px 4px var(--color-negro-transparente-30);
}

/* Efecto de rotación al hacer hover sobre la huella */
.logo .icono-huella:hover {
  transform: scale(1.1) rotate(10deg);
}

/* Menú horizontal con espaciado entre enlaces */
.menu-navegacion {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

/* Enlaces del menú en blanco con sombra para legibilidad */
.menu-navegacion a {
  text-decoration: none;
  color: var(--color-blanco);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  position: relative;
  text-shadow: 0 2px 4px var(--color-negro-transparente-30);
}

/* Color dorado al hacer hover */
.menu-navegacion a:hover {
  color: var(--color-dorado);
}

/* Línea animada debajo de los enlaces */
.menu-navegacion a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-dorado);
  transition: width 0.3s ease;
}

/* Expansión de la línea al hacer hover */
.menu-navegacion a:hover::after {
  width: 100%;
}

/* ============================================
   MENÚ HAMBURGUESA - MÓVILES
   ============================================ */
/* Botón hamburguesa (oculto en desktop, visible en móviles) */
.menu-hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

/* Tres líneas del menú hamburguesa en blanco */
.menu-hamburguesa span {
  width: 100%;
  height: 3px;
  background-color: var(--color-blanco);
  border-radius: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--color-negro-transparente-30);
}

/* Primera línea transformada en parte de la X cuando está activo */
.menu-hamburguesa.activo span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}

/* Línea del medio oculta cuando está activo */
.menu-hamburguesa.activo span:nth-child(2) {
  opacity: 0;
}

/* Tercera línea transformada en la otra parte de la X */
.menu-hamburguesa.activo span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

/* ============================================
   SECCIÓN HERO - BANNER PRINCIPAL
   ============================================ */
/* Contenido principal sin padding superior para que la imagen llegue hasta arriba */
.contenido-principal {
  padding-top: 0;
}

/* Sección hero de altura completa con imagen de fondo */
.seccion-hero {
  height: 100vh;
  display: flex;
  align-items: center;
  background: url("../img/fondo.png") center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

/* Capa semitransparente sobre la imagen para mejorar legibilidad del texto */
.seccion-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, var(--color-fondo-claro-transparente-80), var(--color-blanco-transparente-30));
}

/* Contenedor del contenido hero centrado */
.contenedor-hero {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

/* Limitador de ancho para el contenido de texto */
.contenido-texto {
  max-width: 600px;
}

/* Logo principal sobre el título */
.logo-principal {
  width: 150px;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 8px 20px var(--color-negro-transparente-15);
  transition: transform 0.3s ease;
}

.logo-principal:hover {
  transform: scale(1.05);
}

/* Título principal grande y elegante */
.titulo-principal {
  font-size: 5rem;
  font-weight: 300;
  color: var(--color-azul-oscuro);
  margin-bottom: 1rem;
  letter-spacing: 2px;
  line-height: 1.1;
}

/* Subtítulo descriptivo */
.subtitulo {
  font-size: 1rem;
  color: var(--color-gris-medio);
  margin-bottom: 2.5rem;
  line-height: 1.8;
  max-width: 450px;
}

/* Contenedor de botones para alinearlos horizontalmente */
.contenedor-botones {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Botón de contacto con estilo dorado */
.boton-principal {
  background: var(--color-dorado);
  color: var(--color-blanco);
  border: none;
  padding: 0.9rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--color-dorado-transparente-30);
  text-decoration: none;
  display: inline-block;
}

/* Efecto hover con elevación del botón */
.boton-principal:hover {
  background: var(--color-dorado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-dorado-transparente-40);
}

/* Botón secundario con estilo outline */
.boton-secundario {
  background: transparent;
  color: var(--color-azul-oscuro);
  border: 2px solid var(--color-azul-oscuro);
  padding: 0.9rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Efecto hover del botón secundario */
.boton-secundario:hover {
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-negro-transparente-20);
}

/* ============================================
   SECCIÓN ACERCA DE NOSOTROS
   ============================================ */
.seccion-acerca {
  min-height: 100vh;
  padding: 8rem 2rem 6rem;
  background: linear-gradient(135deg, var(--color-fondo-claro) 0%, var(--color-blanco) 100%);
  display: flex;
  align-items: center;
}

.contenedor-acerca {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.contenido-acerca {
  text-align: center;
}

.etiqueta-seccion {
  display: inline-block;
  color: var(--color-dorado);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.titulo-seccion {
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--color-azul-oscuro);
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.linea-decorativa {
  width: 80px;
  height: 3px;
  background: var(--color-dorado);
  margin: 0 auto 3rem;
  border-radius: 2px;
}

.texto-acerca {
  text-align: left;
}

.texto-acerca p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-gris-medio);
  margin-bottom: 1.5rem;
}

.parrafo-destacado {
  font-size: 1.25rem !important;
  color: var(--color-azul-oscuro) !important;
  margin-bottom: 2rem !important;
}

.lista-servicios {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}

.servicio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.5rem;
  background: var(--color-blanco);
  border-radius: 15px;
  box-shadow: 0 5px 20px var(--color-negro-transparente-10);
  transition: all 0.3s ease;
  flex: 1;
  min-width: 150px;
}

.servicio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px var(--color-negro-transparente-15);
}

.servicio-item i {
  font-size: 2.5rem;
  color: var(--color-dorado);
}

.servicio-item span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  text-align: center;
}

.estadisticas {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  background: var(--color-blanco);
  border-radius: 20px;
  box-shadow: 0 10px 30px var(--color-negro-transparente-10);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-numero {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-dorado);
  line-height: 1;
}

.stat-texto {
  font-size: 0.9rem;
  color: var(--color-gris-medio);
  font-weight: 500;
  text-align: center;
}

/* ============================================
   SECCIÓN DE SERVICIOS
   ============================================ */
.seccion-servicios {
  min-height: 100vh;
  padding: 8rem 2rem 10rem;
  background: linear-gradient(135deg, var(--color-blanco) 0%, var(--color-fondo-claro) 100%);
}

.contenedor-servicios {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.encabezado-servicios {
  text-align: center;
  margin-bottom: 4rem;
}

.descripcion-servicios {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-gris-medio);
  max-width: 700px;
  margin: 2rem auto 0;
}

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.card-servicio {
  background: var(--color-blanco);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px var(--color-negro-transparente-10);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.card-servicio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-dorado), var(--color-marron));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.card-servicio:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px var(--color-negro-transparente-15);
  border-color: var(--color-dorado-transparente-30);
}

.card-servicio:hover::before {
  transform: scaleX(1);
}

.card-servicio:hover .icono-servicio {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, var(--color-dorado-transparente-30), var(--color-dorado-transparente-40));
}

.card-servicio.destacado {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.08) 0%, rgba(139, 115, 85, 0.05) 100%);
  border: 2px solid var(--color-dorado-transparente-30);
}

.card-servicio.destacado::before {
  transform: scaleX(1);
  height: 5px;
}

.etiqueta-destacado {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--color-dorado);
  color: var(--color-blanco);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  text-transform: uppercase;
}

.icono-servicio {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-dorado-transparente-10), var(--color-dorado-transparente-30));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
}

.icono-servicio i {
  font-size: 2.5rem;
  color: var(--color-dorado);
}

.titulo-servicio {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

.descripcion-servicio {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-gris-medio);
  margin-bottom: 1.5rem;
}

.lista-caracteristicas {
  list-style: none;
  margin-top: 1.5rem;
}

.lista-caracteristicas li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0;
  font-size: 0.95rem;
  color: var(--color-gris-medio);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.lista-caracteristicas li:last-child {
  border-bottom: none;
}

.lista-caracteristicas li i {
  font-size: 0.9rem;
  color: var(--color-dorado);
  flex-shrink: 0;
}

.cta-servicios {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, var(--color-dorado-transparente-10), var(--color-dorado-transparente-30));
  border-radius: 20px;
  margin-top: 2rem;
}

.texto-cta {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-azul-oscuro);
  margin-bottom: 1.5rem;
}

.boton-cta {
  background: var(--color-dorado);
  color: var(--color-blanco);
  border: none;
  padding: 1rem 3rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--color-dorado-transparente-30);
  text-decoration: none;
  display: inline-block;
}

.boton-cta:hover {
  background: var(--color-dorado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-dorado-transparente-40);
}

/* ============================================
   SECCIÓN DÓNDE ESTAMOS
   ============================================ */
.seccion-ubicacion {
  min-height: 100vh;
  padding: 8rem 2rem 10rem;
  background: linear-gradient(135deg, var(--color-fondo-claro) 0%, var(--color-blanco) 100%);
}

.contenedor-ubicacion {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.encabezado-ubicacion {
  text-align: center;
  margin-bottom: 4rem;
}

.descripcion-ubicacion {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-gris-medio);
  max-width: 700px;
  margin: 2rem auto 0;
}

.contenido-ubicacion {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contenedor-mapa {
  width: 100%;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px var(--color-negro-transparente-15);
  border: 3px solid var(--color-blanco);
}

.contenedor-mapa iframe {
  width: 100%;
  height: 100%;
}

.info-contacto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card-contacto {
  background: var(--color-blanco);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px var(--color-negro-transparente-10);
  display: flex;
  gap: 1.5rem;
  transition: all 0.3s ease;
  border-left: 4px solid var(--color-dorado);
}

.card-contacto:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 25px var(--color-negro-transparente-15);
}

.icono-contacto {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: linear-gradient(135deg, var(--color-dorado-transparente-10), var(--color-dorado-transparente-30));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-dorado);
}

.texto-contacto {
  flex: 1;
}

.texto-contacto h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 0.8rem;
}

.texto-contacto p {
  font-size: 0.95rem;
  color: var(--color-gris-medio);
  margin-bottom: 0.3rem;
  line-height: 1.6;
}

.texto-contacto p.mt-1 {
  margin-top: 0.8rem;
}

.texto-contacto a {
  color: var(--color-gris-medio);
  text-decoration: none;
  transition: color 0.3s ease;
}

.texto-contacto a:hover {
  color: var(--color-dorado);
}

.link-mapa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-dorado) !important;
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.link-mapa:hover {
  color: var(--color-dorado-hover) !important;
}

.nota-horario {
  font-size: 0.85rem !important;
  font-style: italic;
  color: var(--color-gris-claro) !important;
  margin-top: 0.8rem !important;
}

.acciones-contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.boton-llamar,
.boton-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--color-negro-transparente-10);
}

.boton-llamar {
  background: var(--color-dorado);
  color: var(--color-blanco);
}

.boton-llamar:hover {
  background: var(--color-dorado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-dorado-transparente-40);
}

.boton-whatsapp {
  background: #25D366;
  color: var(--color-blanco);
}

.boton-whatsapp:hover {
  background: #20BA5A;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* ============================================
   FOOTER PRINCIPAL
   ============================================ */
.footer-principal {
  background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, #1a252f 100%);
  color: var(--color-blanco);
  padding: 4rem 2rem 2rem;
  margin-bottom: 80px;
}

.contenedor-footer {
  max-width: 1400px;
  margin: 0 auto;
}

.grid-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.columna-footer h3 {
  color: var(--color-dorado);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.columna-footer h4 {
  color: var(--color-dorado);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.columna-footer p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  font-size: 0.95rem;
}

.logo-footer {
  width: auto;
  height: 100px;
  max-width: 120px;
  border-radius: 15px;
  margin-bottom: 1rem;
  box-shadow: 0 5px 15px var(--color-negro-transparente-30);
  object-fit: contain;
}

.lista-footer {
  list-style: none;
  padding: 0;
}

.lista-footer li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.6;
}

.lista-footer i {
  color: var(--color-dorado);
  font-size: 1.1rem;
  margin-top: 0.2rem;
  min-width: 20px;
}

.lista-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.lista-footer a:hover {
  color: var(--color-dorado);
}

.nota-footer {
  font-size: 0.85rem !important;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 1rem;
}

.redes-sociales-footer {
  display: flex;
  gap: 1rem;
}

.red-social {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  font-size: 1.3rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.red-social:hover {
  background: var(--color-dorado);
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-dorado-transparente-40);
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  text-align: center;
}

.copyright p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.creditos {
  font-size: 0.85rem !important;
}

.creditos strong {
  color: var(--color-dorado);
}

.creditos a {
  color: var(--color-dorado);
  text-decoration: none;
  transition: color 0.3s ease;
}

.creditos a:hover {
  color: var(--color-dorado-hover);
}

/* ============================================
   CONTENEDOR DE ANIMALES (USO FUTURO)
   ============================================ */
/* Contenedor para galería de animales */
.contenedor-animales {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Animal principal de la galería */
.animal-principal {
  margin-bottom: 2rem;
  z-index: 2;
}

/* Imagen principal con bordes redondeados y sombra */
.imagen-principal {
  width: 350px;
  height: 350px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px var(--color-negro-transparente-15);
  transition: transform 0.3s ease;
}

/* Efecto de zoom al hacer hover en imagen principal */
.imagen-principal:hover {
  transform: scale(1.05);
}

/* Contenedor de imágenes pequeñas */
.animales-pequenos {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Imágenes pequeñas de animales */
.animal-pequeno {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 8px 20px var(--color-negro-transparente-10);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Efecto de elevación en imágenes pequeñas */
.animal-pequeno:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 12px 25px var(--color-negro-transparente-20);
}

/* ============================================
   FOOTER - NAVEGACIÓN INFERIOR
   ============================================ */
/* Footer fijo en la parte inferior con fondo semitransparente */
.pie-pagina {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-blanco-transparente-95);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  box-shadow: 0 -2px 20px var(--color-negro-transparente-08);
  z-index: 999;
}

/* Navegación inferior centrada con padding para móviles */
.navegacion-inferior {
  display: flex;
  justify-content: center;
  gap: 3rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Icono de navegación con texto vertical */
.icono-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  text-decoration: none;
}

/* Efecto hover con fondo suave */
.icono-nav:hover {
  background: var(--color-dorado-transparente-10);
  transform: translateY(-2px);
}

/* Iconos en color marrón */
.icono-nav i {
  font-size: 1.4rem;
  color: var(--color-marron);
  margin-bottom: 0.4rem;
  transition: color 0.3s ease;
}

/* Color dorado al hacer hover en iconos */
.icono-nav:hover i {
  color: var(--color-dorado);
}

/* Texto descriptivo debajo de cada icono */
.icono-nav span {
  font-size: 0.65rem;
  color: var(--color-gris-claro);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ============================================
   ANIMACIONES
   ============================================ */
/* Animación de flotación para uso futuro */
@keyframes flotar {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
/* ============================================
   RESPONSIVE - TABLET (1024px y menos)
   ============================================ */
@media (max-width: 1024px) {
  .navegacion {
    padding: 0 1.5rem;
  }
  .contenedor-hero {
    padding: 0 2rem;
  }
  .titulo-principal {
    font-size: 4rem;
  }
  .subtitulo {
    font-size: 0.98rem;
  }
  .menu-navegacion {
    gap: 2rem;
  }
  .menu-navegacion a {
    font-size: 0.8rem;
  }
  .logo-principal {
    width: 120px;
  }
  .titulo-seccion {
    font-size: 2.5rem;
  }
  .estadisticas {
    gap: 1.5rem;
  }
  .stat-numero {
    font-size: 2.5rem;
  }
  .grid-servicios {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .card-servicio {
    padding: 2rem;
  }
  .titulo-servicio {
    font-size: 1.3rem;
  }
  .contenido-ubicacion {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .contenedor-mapa {
    height: 450px;
  }
  .grid-footer {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
  }
}
/* ============================================
   RESPONSIVE - MÓVIL (768px y menos)
   ============================================ */
@media (max-width: 768px) {
  .navegacion {
    padding: 0 1rem;
  }
  /* Mostrar menú hamburguesa en móviles */
  .menu-hamburguesa {
    display: flex;
  }
  /* Menú convertido en panel lateral deslizante */
  .menu-navegacion {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background: var(--color-azul-oscuro-transparente-98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    transition: right 0.4s ease;
    box-shadow: -5px 0 20px var(--color-negro-transparente-30);
  }
  /* Menú visible cuando está activo */
  .menu-navegacion.activo {
    right: 0;
  }
  .menu-navegacion li {
    width: 100%;
    text-align: center;
  }
  .menu-navegacion a {
    display: block;
    padding: 1rem;
    font-size: 1rem;
    color: var(--color-blanco);
  }
  .menu-navegacion a::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .contenedor-hero {
    padding: 0 1.5rem;
  }
  .titulo-principal {
    font-size: 3rem;
  }
  .subtitulo {
    font-size: 0.95rem;
  }
  .imagen-principal {
    width: 280px;
    height: 280px;
  }
  /* Navegación inferior ajustada para no salirse de los bordes */
  .navegacion-inferior {
    gap: 1.5rem;
    padding: 0 1.5rem;
    justify-content: space-between;
  }
  /* Imagen de fondo optimizada para móviles */
  .seccion-hero {
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
  }
  .pie-pagina {
    padding: 0.8rem 0;
  }
  .logo-principal {
    width: 100px;
  }
  .seccion-acerca {
    padding: 6rem 1.5rem 4rem;
  }
  .titulo-seccion {
    font-size: 2rem;
  }
  .texto-acerca p {
    font-size: 1rem;
  }
  .parrafo-destacado {
    font-size: 1.1rem !important;
  }
  .lista-servicios {
    gap: 1rem;
  }
  .servicio-item {
    min-width: 120px;
  }
  .estadisticas {
    flex-direction: column;
    gap: 1.5rem;
  }
  .seccion-servicios {
    padding: 6rem 1.5rem 8rem;
  }
  .grid-servicios {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .card-servicio {
    padding: 2rem 1.5rem;
  }
  .icono-servicio {
    width: 70px;
    height: 70px;
  }
  .icono-servicio i {
    font-size: 2rem;
  }
  .descripcion-servicios {
    font-size: 1rem;
  }
  .cta-servicios {
    padding: 2rem 1.5rem;
  }
  .texto-cta {
    font-size: 1.1rem;
  }
  .seccion-ubicacion {
    padding: 6rem 1.5rem 8rem;
  }
  .contenido-ubicacion {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contenedor-mapa {
    height: 400px;
  }
  .card-contacto {
    padding: 1.5rem;
    gap: 1rem;
  }
  .icono-contacto {
    width: 50px;
    height: 50px;
    min-width: 50px;
    font-size: 1.5rem;
  }
  .texto-contacto h3 {
    font-size: 1.1rem;
  }
  .texto-contacto p {
    font-size: 0.9rem;
  }
  .footer-principal {
    padding: 3rem 1.5rem 1.5rem;
    margin-bottom: 70px;
  }
  .grid-footer {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .columna-footer {
    text-align: center;
  }
  .logo-footer {
    margin: 0 auto 1rem;
  }
  .lista-footer li {
    justify-content: center;
  }
  .redes-sociales-footer {
    justify-content: center;
  }
}
/* ============================================
   RESPONSIVE - MÓVIL PEQUEÑO (480px y menos)
   ============================================ */
@media (max-width: 480px) {
  .titulo-principal {
    font-size: 2.5rem;
  }
  .subtitulo {
    font-size: 0.9rem;
    max-width: 100%;
  }
  .boton-principal {
    padding: 0.8rem 2rem;
    font-size: 0.8rem;
  }
  .boton-secundario {
    padding: 0.8rem 2rem;
    font-size: 0.8rem;
  }
  .contenedor-botones {
    gap: 0.8rem;
  }
  .seccion-acerca {
    padding: 5rem 1rem 3rem;
  }
  .titulo-seccion {
    font-size: 1.8rem;
  }
  .lista-servicios {
    flex-direction: column;
    gap: 1rem;
  }
  .servicio-item {
    min-width: 100%;
  }
  .servicio-item i {
    font-size: 2rem;
  }
  .stat-numero {
    font-size: 2rem;
  }
  .stat-texto {
    font-size: 0.8rem;
  }
  .animal-pequeno {
    width: 60px;
    height: 60px;
  }
  .animales-pequenos {
    gap: 0.5rem;
  }
  .imagen-principal {
    width: 250px;
    height: 250px;
  }
  .logo-principal {
    width: 80px;
    margin-bottom: 1rem;
  }
  /* Footer optimizado para que todos los iconos quepan sin salirse */
  .navegacion-inferior {
    gap: 0.5rem;
    padding: 0 0.8rem;
    justify-content: space-around;
    flex-wrap: nowrap;
  }
  /* Iconos con distribución uniforme */
  .icono-nav {
    padding: 0.2rem 0.3rem;
    flex: 1;
    min-width: 0;
  }
  .icono-nav i {
    font-size: 1.1rem;
  }
  .icono-nav span {
    font-size: 0.55rem;
    white-space: nowrap;
  }
  .menu-navegacion {
    width: 80%;
    max-width: 100%;
  }
  .navegacion {
    padding: 0 1rem;
  }
  .contenedor-hero {
    padding: 0 1rem;
  }
  /* Imagen de fondo con mejor posicionamiento para móviles pequeños */
  .seccion-hero {
    background-position: 60% center;
    background-size: cover;
    background-attachment: scroll;
    min-height: 100vh;
  }
  .pie-pagina {
    padding: 0.6rem 0;
  }
  .seccion-servicios {
    padding: 5rem 1rem 7rem;
  }
  .titulo-servicio {
    font-size: 1.2rem;
  }
  .descripcion-servicio {
    font-size: 0.95rem;
  }
  .lista-caracteristicas li {
    font-size: 0.9rem;
  }
  .boton-cta {
    padding: 0.9rem 2.5rem;
    font-size: 0.85rem;
  }
  .texto-cta {
    font-size: 1rem;
  }
  .seccion-ubicacion {
    padding: 5rem 1rem 7rem;
  }
  .contenedor-mapa {
    height: 350px;
  }
  .card-contacto {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .acciones-contacto {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .boton-llamar,
  .boton-whatsapp {
    padding: 0.9rem 1.2rem;
    font-size: 0.85rem;
  }
  .footer-principal {
    padding: 2.5rem 1rem 1.5rem;
  }
  .grid-footer {
    gap: 2rem;
  }
  .columna-footer h3 {
    font-size: 1.1rem;
  }
  .columna-footer h4 {
    font-size: 1rem;
  }
  .columna-footer p {
    font-size: 0.9rem;
  }
  .lista-footer li {
    font-size: 0.9rem;
  }
  .red-social {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}
/* ============================================
   RESPONSIVE - PANTALLAS MUY PEQUEÑAS (360px)
   ============================================ */
@media (max-width: 360px) {
  /* Footer comprimido para pantallas ultra pequeñas */
  .navegacion-inferior {
    gap: 0.3rem;
    padding: 0 0.5rem;
  }
  .icono-nav {
    padding: 0.2rem 0.2rem;
  }
  .icono-nav i {
    font-size: 1rem;
  }
  .icono-nav span {
    font-size: 0.5rem;
  }
  .titulo-principal {
    font-size: 2rem;
  }
  .subtitulo {
    font-size: 0.85rem;
  }
  .boton-principal,
  .boton-secundario {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
  }
  .contenedor-botones {
    flex-direction: column;
    gap: 0.6rem;
  }
}
/* ============================================
   MODAL DE LOGIN / REGISTRO
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 700px;
  margin: 0 20px;
  animation: modalSlideIn 0.5s ease;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.modal-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 45px;
  height: 45px;
  background: var(--color-dorado);
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.modal-close:hover {
  background: var(--color-dorado-hover);
  transform: rotate(90deg) scale(1.1);
}

.login-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.login-wrapper-bg {
  position: absolute;
  width: 100%;
  height: 200%;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  border-radius: 150px;
  left: -40%;
  top: -90%;
  transform-origin: right bottom;
  transform: rotateZ(-40deg);
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.modal-container.navigate .login-wrapper-bg {
  transform: rotateZ(130deg) translate(150px, 150px);
}

.login-wrapper-left,
.login-wrapper-right {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 40px;
  z-index: 2;
}

.login-wrapper-left {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.modal-container.navigate .login-wrapper-left {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s 1s ease;
}

.login-wrapper-right {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s 1s ease;
}

.modal-container.navigate .login-wrapper-right {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.form-header {
  text-align: center;
  margin-bottom: 20px;
}

.form-header i {
  font-size: 2.8rem;
  color: var(--color-dorado);
  margin-bottom: 12px;
  animation: pulse 2s ease-in-out infinite;
}

.form-header h2 {
  font-size: 2.3rem;
  color: var(--color-dorado);
  margin-bottom: 8px;
  font-weight: 700;
}

.form-header p {
  font-size: 0.95rem;
  color: var(--color-gris-claro);
  font-weight: 300;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.form-auth {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group {
  position: relative;
  width: 100%;
}

.input-group input {
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 2px solid rgba(212, 165, 116, 0.3);
  background: transparent;
  color: var(--color-negro);
  font-size: 1rem;
  padding: 0 40px 0 10px;
  transition: border-color 0.3s ease;
}

.input-group input::placeholder {
  color: var(--color-gris-claro);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 400;
}

.input-group input:focus {
  border-color: var(--color-dorado);
  outline: none;
}

.input-group i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-dorado);
  font-size: 1.1rem;
  pointer-events: none;
}

.forgot-password {
  display: block;
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-dorado);
  margin-top: -5px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: var(--color-dorado-hover);
  text-decoration: underline;
}

.form-btn {
  width: 100%;
  height: 50px;
  margin-top: 12px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.4);
  transition: all 0.3s ease;
}

.form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 165, 116, 0.6);
}

.form-btn:active {
  transform: translateY(0);
}

.toggle-link {
  position: absolute;
  bottom: 30px;
  font-size: 0.95rem;
  color: var(--color-dorado);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.toggle-link:hover {
  color: var(--color-dorado-hover);
  text-decoration: underline;
}

.signup-link {
  right: 40px;
}

.signin-link {
  left: 118px;
}

.login-wrapper-bg.intranet-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-wrapper-right.intranet-form {
  width: 100%;
  padding: 50px 40px;
}

.intranet-form .form-header i {
  color: #667eea;
}

.intranet-form .form-header h2 {
  color: #667eea;
}

.intranet-form .form-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.intranet-form .form-btn:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.intranet-form .input-group input:focus {
  border-bottom-color: #667eea;
}

.intranet-form .input-group input:focus + i {
  color: #667eea;
}

.intranet-form .input-group i {
  color: rgba(102, 126, 234, 0.5);
}

.alert-message {
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  display: none;
  width: 100%;
  max-width: 350px;
  text-align: center;
}

.alert-message.error {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
  display: block;
}

.alert-message.success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
  display: block;
}

.btn-volver-inicio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 20px;
  background: transparent;
  border: 2px solid var(--color-dorado);
  border-radius: 50px;
  color: var(--color-dorado);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-volver-inicio:hover {
  background: var(--color-dorado);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.4);
}

.btn-volver-inicio:active {
  transform: translateY(0);
}

.btn-volver-inicio i {
  font-size: 0.9rem;
}

/* Responsive para tablets */
@media (max-width: 768px) {
  .modal-container {
    height: 580px;
    max-width: 90%;
  }
  .login-wrapper-left,
  .login-wrapper-right {
    padding: 40px 30px;
  }
  .form-header h2 {
    font-size: 2rem;
  }
  .form-header i {
    font-size: 2.5rem;
  }
  .form-auth {
    max-width: 300px;
  }
}
/* Responsive para móviles */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 0;
  }
  .modal-container {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height para móviles */
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    animation: none; /* Desactivar animación en móviles para mejor rendimiento */
  }
  .login-wrapper {
    flex-direction: column;
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling en iOS */
  }
  .login-wrapper-bg {
    width: 200%;
    height: 100%;
    left: -90%;
    top: -50%;
    transform: rotateZ(-50deg);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .modal-container.navigate .login-wrapper-bg {
    transform: rotateZ(220deg) translate(80px, 80px);
  }
  .login-wrapper-left,
  .login-wrapper-right {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 25px 80px;
    justify-content: center; /* Centra el formulario verticalmente */
    overflow-y: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
  }
  /* Inicia mostrando el formulario de login centrado */
  .login-wrapper-right {
    padding-top: 60px;
  }
  /* El formulario de registro también centrado */
  .login-wrapper-left {
    padding-top: 60px;
  }
  .form-header {
    margin-bottom: 20px;
    margin-top: 15px;
  }
  .form-header h2 {
    font-size: 1.5rem;
    margin-bottom: 6px;
  }
  .form-header p {
    font-size: 0.85rem;
  }
  .form-header i {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .form-auth {
    max-width: 100%;
    gap: 8px;
    width: 100%;
  }
  .input-group {
    margin-bottom: 3px;
  }
  .input-group input {
    height: 46px;
    font-size: 0.9rem;
    padding: 0 45px 0 12px;
    border-bottom-width: 2px;
  }
  .input-group input::placeholder {
    font-size: 0.85rem;
  }
  .input-group i {
    right: 12px;
    font-size: 1rem;
  }
  .forgot-password {
    font-size: 0.8rem;
    margin-top: -3px;
    margin-bottom: 8px;
  }
  .form-btn {
    height: 46px;
    font-size: 0.9rem;
    margin-top: 15px;
    letter-spacing: 0.5px;
  }
  .toggle-link {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 20px;
    font-size: 0.85rem;
    display: block;
    text-align: center;
  }
  .signin-link,
  .signup-link {
    position: relative;
    left: auto;
    right: auto;
  }
  .btn-volver-inicio {
    width: 100%;
    margin-top: 20px;
    padding: 12px 20px;
    font-size: 0.85rem;
  }
  .modal-close {
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    border-width: 2px;
    z-index: 100;
    background: rgba(212, 165, 116, 0.95);
    backdrop-filter: blur(5px);
  }
  .modal-close:active {
    transform: rotate(90deg) scale(0.95);
  }
}
/* Ajustes adicionales para móviles muy pequeños */
@media (max-width: 400px) {
  .login-wrapper-left,
  .login-wrapper-right {
    padding: 15px 20px 70px;
    padding-top: 50px;
  }
  .form-header {
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .form-header h2 {
    font-size: 1.4rem;
  }
  .form-header i {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .form-header p {
    font-size: 0.8rem;
  }
  .input-group {
    margin-bottom: 4px;
  }
  .input-group input {
    height: 45px;
    font-size: 0.9rem;
  }
  .form-auth {
    gap: 8px;
  }
  .form-btn {
    height: 45px;
    font-size: 0.85rem;
    margin-top: 15px;
  }
  .toggle-link {
    margin-top: 36px;
    font-size: 0.8rem;
    left: 0 !important;
  }
  .modal-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
}
/* Ajustes para pantallas en landscape (horizontal) */
@media (max-width: 900px) and (orientation: landscape) {
  .modal-container {
    height: 100vh;
    overflow-y: auto;
  }
  .login-wrapper-left,
  .login-wrapper-right {
    min-height: 100vh;
    padding: 60px 30px 80px;
  }
  .form-header {
    margin-bottom: 20px;
  }
  .form-header h2 {
    font-size: 1.5rem;
  }
  .form-header i {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  .input-group {
    margin-bottom: 3px;
  }
  .form-auth {
    gap: 8px;
  }
}
/* ============================================
   OPTIMIZACIÓN PARA ORIENTACIÓN VERTICAL
   ============================================ */
/* Ajuste de imagen de fondo para móviles en modo portrait */
@media (max-width: 768px) and (orientation: portrait) {
  .seccion-hero {
    background-position: 55% center;
    background-size: auto 100%;
  }
}
/* ============================================
   ESTILOS DEL DASHBOARD - PANEL DE USUARIO
   ============================================ */
/* Header del Dashboard */
.dashboard-header {
  background: var(--color-azul-oscuro);
  padding: 1rem 0;
  box-shadow: 0 2px 10px var(--color-negro-transparente-20);
}

.dashboard-header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dashboard-header-title {
  color: var(--color-blanco);
  font-size: 1.5rem;
  font-weight: 600;
}

.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dashboard-user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-blanco);
}

.dashboard-user-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--color-dorado);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-blanco);
  font-weight: 600;
}

.dashboard-user-details h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.dashboard-user-details p {
  font-size: 0.85rem;
  color: var(--color-dorado);
}

/* Botón Cerrar Sesión */
.btn-logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--color-blanco);
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.btn-logout i {
  font-size: 1.1rem;
}

.btn-logout:hover {
  background: rgba(239, 83, 80, 0.9);
  border-color: rgb(239, 83, 80);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 83, 80, 0.3);
}

.btn-logout:active {
  transform: translateY(0);
}

/* Contenedor Principal del Dashboard */
.dashboard-container {
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

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

.dashboard-card {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px var(--color-negro-transparente-10);
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px var(--color-negro-transparente-20);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-dorado);
}

.dashboard-card-header i {
  font-size: 1.5rem;
  color: var(--color-dorado);
}

.dashboard-card-header h2 {
  font-size: 1.3rem;
  color: var(--color-negro);
  font-weight: 600;
}

.dashboard-profile-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.dashboard-info-item i {
  color: var(--color-dorado);
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

.dashboard-info-item-content h4 {
  font-size: 0.85rem;
  color: var(--color-gris-claro);
  font-weight: 500;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.dashboard-info-item-content p {
  font-size: 1rem;
  color: var(--color-negro);
  font-weight: 500;
}

/* Contenido Principal */
.dashboard-main-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Tabs */
.dashboard-tabs {
  display: flex;
  gap: 1rem;
  background: var(--color-blanco);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px var(--color-negro-transparente-10);
}

.dashboard-tab {
  flex: 1;
  padding: 1rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-gris-claro);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dashboard-tab:hover {
  background: var(--color-dorado-transparente-10);
  color: var(--color-dorado);
}

.dashboard-tab.active {
  background: var(--color-dorado);
  color: var(--color-blanco);
  border-color: var(--color-dorado);
}

.dashboard-tab i {
  font-size: 1.2rem;
}

.dashboard-content-section {
  display: none;
}

.dashboard-content-section.active {
  display: block;
}

/* Mascotas Grid */
.dashboard-mascotas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.dashboard-mascota-card {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px var(--color-negro-transparente-10);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dashboard-mascota-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-dorado);
}

.dashboard-mascota-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px var(--color-negro-transparente-20);
}

.dashboard-mascota-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-mascota-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-dorado), var(--color-marron));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-blanco);
}

.dashboard-mascota-info h3 {
  font-size: 1.2rem;
  color: var(--color-negro);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.dashboard-mascota-info span {
  font-size: 0.85rem;
  color: var(--color-gris-claro);
  font-weight: 500;
}

.dashboard-mascota-details {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1rem;
}

.dashboard-mascota-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-gris-claro);
}

.dashboard-mascota-detail i {
  color: var(--color-dorado);
  width: 20px;
}

.dashboard-mascota-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.dashboard-btn-small {
  flex: 1;
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.dashboard-btn-edit {
  background: var(--color-dorado-transparente-10);
  color: var(--color-dorado);
}

.dashboard-btn-edit:hover {
  background: var(--color-dorado);
  color: var(--color-blanco);
}

.dashboard-btn-delete {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.dashboard-btn-delete:hover {
  background: #e74c3c;
  color: var(--color-blanco);
}

/* Card para agregar mascota */
.dashboard-add-pet-card {
  border: 3px dashed var(--color-dorado);
  background: var(--color-dorado-transparente-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 250px;
}

.dashboard-add-pet-card:hover {
  background: var(--color-dorado);
  border-color: var(--color-dorado-hover);
  transform: translateY(-5px);
}

.dashboard-add-pet-card:hover i, .dashboard-add-pet-card:hover p {
  color: var(--color-blanco);
}

.dashboard-add-pet-card:hover i {
  transform: scale(1.1);
}

.dashboard-add-pet-card i {
  font-size: 3rem;
  color: var(--color-dorado);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.dashboard-add-pet-card p {
  font-size: 1.1rem;
  color: var(--color-dorado);
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Formulario de Reservar */
.dashboard-reservar-container {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px var(--color-negro-transparente-10);
}

.dashboard-form-group {
  margin-bottom: 1.5rem;
}

.dashboard-form-group label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-negro);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dashboard-form-group input,
.dashboard-form-group select,
.dashboard-form-group textarea {
  width: 100%;
  padding: 0.9rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  color: var(--color-negro);
  transition: all 0.3s ease;
}

.dashboard-form-group input:focus,
.dashboard-form-group select:focus,
.dashboard-form-group textarea:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px var(--color-dorado-transparente-10);
}

.dashboard-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.dashboard-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Historial */
.dashboard-historial-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-historial-item {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px var(--color-negro-transparente-10);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-historial-item:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 25px var(--color-negro-transparente-20);
}

.dashboard-historial-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dashboard-historial-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-dorado-transparente-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-dorado);
}

.dashboard-historial-info h4 {
  font-size: 1.1rem;
  color: var(--color-negro);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.dashboard-historial-info p {
  font-size: 0.9rem;
  color: var(--color-gris-claro);
}

.dashboard-historial-date {
  font-size: 0.9rem;
  color: var(--color-dorado);
  font-weight: 600;
}

.dashboard-historial-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dashboard-btn-delete-cita {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.dashboard-btn-delete-cita:hover {
  background: #e74c3c;
  color: white;
  transform: scale(1.1);
}

.dashboard-btn-delete-cita:active {
  transform: scale(0.95);
}

.dashboard-badge {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-badge-completado {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
}

.dashboard-badge-pendiente {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
}

.dashboard-badge-cancelado {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.dashboard-empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--color-gris-claro);
}

.dashboard-empty-state i {
  font-size: 4rem;
  color: var(--color-dorado);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.dashboard-empty-state h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.dashboard-empty-state p {
  font-size: 1rem;
}

/* Responsive Dashboard */
@media (max-width: 1024px) {
  .dashboard-container {
    grid-template-columns: 1fr;
  }
  .dashboard-form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .dashboard-header-container {
    flex-direction: column;
    gap: 1rem;
  }
  .dashboard-header-right {
    width: 100%;
    justify-content: space-between;
  }
  .dashboard-tabs {
    flex-direction: column;
  }
  .dashboard-mascotas-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-historial-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .dashboard-historial-right {
    width: 100%;
    justify-content: space-between;
  }
}
/* ============================================
   MODAL DE MASCOTA
   ============================================ */
.modal-mascota {
  max-width: 750px;
  width: 95%;
  max-height: 90vh;
  overflow: hidden;
  padding: 0;
  background: var(--color-blanco);
  border-radius: 20px;
  box-shadow: 0 20px 60px var(--color-negro-transparente-30);
  position: relative;
}

.modal-mascota .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-fondo-claro);
  border: 2px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-mascota .modal-close i {
  font-size: 1.2rem;
  color: var(--color-gris-claro);
}

.modal-mascota .modal-close:hover {
  background: var(--color-dorado);
  border-color: var(--color-dorado);
  transform: rotate(90deg);
}

.modal-mascota .modal-close:hover i {
  color: var(--color-blanco);
}

.modal-content-mascota {
  padding: 2.5rem;
  max-height: 90vh;
  overflow-y: auto;
  /* Estilos personalizados para scrollbar */
}

.modal-content-mascota::-webkit-scrollbar {
  width: 8px;
}

.modal-content-mascota::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-content-mascota::-webkit-scrollbar-thumb {
  background: var(--color-dorado);
  border-radius: 10px;
}

.modal-content-mascota::-webkit-scrollbar-thumb:hover {
  background: var(--color-marron);
}

@media (max-width: 600px) {
  .modal-content-mascota {
    padding: 1.5rem;
  }
}
.modal-header-mascota {
  text-align: center;
  margin-bottom: 2rem;
}

.modal-header-mascota i {
  font-size: 3rem;
  color: var(--color-dorado);
  margin-bottom: 1rem;
  display: block;
}

.modal-header-mascota h2 {
  font-size: 1.8rem;
  color: var(--color-negro);
  margin-bottom: 0.5rem;
}

.modal-header-mascota p {
  color: var(--color-gris-claro);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .modal-header-mascota {
    margin-bottom: 1.5rem;
  }
  .modal-header-mascota i {
    font-size: 2.5rem;
  }
  .modal-header-mascota h2 {
    font-size: 1.5rem;
  }
  .modal-header-mascota p {
    font-size: 0.9rem;
  }
}
.form-mascota {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.form-group-mascota {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group-mascota label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-negro);
  margin-left: 0.2rem;
}

.input-group-mascota {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group-mascota input,
.input-group-mascota select {
  width: 100%;
  padding: 0.8rem 2.8rem 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
  background: var(--color-blanco);
  color: var(--color-negro);
}

.input-group-mascota input:focus,
.input-group-mascota select:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px var(--color-dorado-transparente-10);
}

.input-group-mascota input::placeholder,
.input-group-mascota select::placeholder {
  color: #999;
}

.input-group-mascota select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
}

.input-group-mascota i {
  position: absolute;
  right: 1rem;
  color: var(--color-gris-claro);
  pointer-events: none;
  font-size: 1rem;
}

.input-group-mascota.input-radio {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.input-group-mascota.input-radio .radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-negro);
}

.input-group-mascota.input-radio .radio-label input[type=radio] {
  width: auto;
  cursor: pointer;
  accent-color: var(--color-dorado);
}

.input-group-mascota.input-radio .radio-label span {
  user-select: none;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: -0.5rem;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .form-actions {
    flex-direction: column-reverse;
  }
}
.form-actions button {
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .form-actions button {
    width: 100%;
  }
}
.form-actions button i {
  font-size: 1.1rem;
}

.form-actions button.btn-primary {
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  box-shadow: 0 4px 15px var(--color-dorado-transparente-30);
}

.form-actions button.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-dorado-transparente-40);
}

.form-actions button.btn-primary:active {
  transform: translateY(0);
}

.form-actions button.btn-secondary {
  background: #f5f5f5;
  color: var(--color-gris-claro);
}

.form-actions button.btn-secondary:hover {
  background: #e0e0e0;
}

/* ============================================
   BOTONES GLOBALES (para uso fuera de .form-actions)
   ============================================ */
.btn-primary {
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  box-shadow: 0 4px 15px var(--color-dorado-transparente-30);
}

.btn-primary i {
  font-size: 1.1rem;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-dorado-transparente-40);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f5f5f5;
  color: var(--color-gris-claro);
}

.btn-secondary:hover {
  background: #e0e0e0;
}

/* Ajustes específicos: botón Confirmar en Reservar Hora */
#formReservarHora .btn-primary {
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  #formReservarHora .btn-primary,
  #formReservarHora .btn-secondary {
    width: 100%;
  }
}
/* ============================================
   PANEL DE ADMINISTRACIÓN
   ============================================ */
/* Sidebar del panel admin */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
  padding: 20px;
  overflow-y: auto;
  z-index: 999;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.sidebar .logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-dorado);
}

.sidebar .logo i {
  margin-right: 8px;
}

.sidebar-close-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-blanco);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.sidebar-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.sidebar .menu-item {
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.sidebar .menu-item i {
  margin-right: 10px;
}

.sidebar .menu-item:hover {
  background: #34495e;
}

.sidebar .menu-item.active {
  background: #3498db;
}

/* Botón hamburguesa para móviles */
.hamburger-btn {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.hamburger-btn:hover {
  background: #34495e;
  transform: scale(1.05);
}

.hamburger-btn:active {
  transform: scale(0.95);
}

.hamburger-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay para cerrar el menú en móviles */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* Contenido principal del panel */
.main-content {
  margin-left: 250px;
  padding: 30px;
  min-height: 100vh;
}

/* Header del panel */
.panel-header {
  background: var(--color-blanco);
  padding: 20px 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px var(--color-negro-transparente-10);
}

.panel-header h1 {
  margin: 0;
  color: var(--color-azul-oscuro);
  font-size: 1.8rem;
}

/* Contenedor de usuario en panel header */
.panel-header-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.panel-header-user .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-header-user .user-info i {
  font-size: 2rem;
  color: #3498db;
}

.panel-header-user .user-info span {
  font-size: 1rem;
  color: var(--color-azul-oscuro);
  font-weight: 500;
}

.panel-header-user a {
  text-decoration: none;
  display: inline-block;
}

/* Botón de logout */
.btn-logout {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.btn-logout:hover {
  background: #c0392b;
}

/* Grid de estadísticas */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: var(--color-blanco);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 5px var(--color-negro-transparente-10);
}

.stat-card h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-card .number {
  font-size: 32px;
  font-weight: bold;
  color: var(--color-azul-oscuro);
}

.stat-card .trend {
  font-size: 14px;
  margin-top: 10px;
}

.trend.up {
  color: #27ae60;
}

.trend.down {
  color: #e74c3c;
}

/* Contenedor de gráficos */
.chart-container {
  background: var(--color-blanco);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 5px var(--color-negro-transparente-10);
  margin-bottom: 30px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-azul-oscuro);
}

.chart-legend {
  display: flex;
  gap: 15px;
  font-size: 0.85rem;
  color: var(--color-gris-medio);
}

.chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend .legend-item i {
  font-size: 0.9rem;
}

.chart-legend .legend-item.completadas i {
  color: #27ae60;
}

.chart-legend .legend-item.canceladas i {
  color: #c0392b;
}

.chart {
  position: relative;
  overflow-x: auto;
  padding-bottom: 15px;
}

.chart-inner {
  min-width: 720px;
}

.chart-svg {
  width: 100%;
  height: 240px;
}

.chart-grid-line {
  stroke: #ecf0f1;
  stroke-width: 1;
}

.chart-axis {
  stroke: #bdc3c7;
  stroke-width: 1.5;
}

.chart-path {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-path.completadas {
  stroke: #27ae60;
}

.chart-path.canceladas {
  stroke: #c0392b;
}

.chart-point {
  fill: #fff;
  stroke-width: 2.5;
}

.chart-point.completadas {
  stroke: #27ae60;
}

.chart-point.canceladas {
  stroke: #c0392b;
}

.chart-value-text {
  font-size: 0.75rem;
  font-weight: 600;
  text-anchor: middle;
}

.chart-value-text.completadas {
  fill: #27ae60;
}

.chart-value-text.canceladas {
  fill: #c0392b;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--color-gris-medio);
}

.chart-labels span {
  width: 60px;
  text-align: center;
}

/* Actividad reciente */
.recent-activity {
  background: var(--color-blanco);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 5px var(--color-negro-transparente-10);
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ecf0f1;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3498db;
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.activity-details {
  flex: 1;
}

.activity-time {
  color: #7f8c8d;
  font-size: 12px;
}

/* Responsive para panel admin */
@media (max-width: 768px) {
  /* Mostrar botón hamburguesa */
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Mostrar botón de cerrar en sidebar */
  .sidebar-close-btn {
    display: block;
  }
  /* Ocultar sidebar por defecto en móviles */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 280px;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
  }
  /* Mostrar sidebar cuando está activo */
  .sidebar.active {
    transform: translateX(0);
  }
  /* Ajustar contenido principal */
  .main-content {
    margin-left: 0;
    padding: 80px 20px 20px 20px;
    width: 100%;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  /* Ajustar header del panel */
  .panel-header {
    padding: 15px 20px;
  }
  .panel-header h1 {
    font-size: 1.4rem;
  }
}
@media (max-width: 600px) {
  /* Sidebar más estrecho en pantallas muy pequeñas */
  .sidebar {
    width: 250px;
  }
  .main-content {
    padding: 80px 15px 15px 15px;
  }
  /* Ajustes de botón hamburguesa para pantallas pequeñas */
  .hamburger-btn {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
    top: 15px;
    left: 15px;
  }
}
/* ============================================
   TABLAS DE DATOS - ADMIN PANEL
   ============================================ */
.table-container {
  background: var(--color-blanco);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 5px var(--color-negro-transparente-10);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table thead {
  background: linear-gradient(135deg, var(--color-azul-oscuro), #34495e);
  color: var(--color-blanco);
}

.data-table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 15px;
  border-bottom: 1px solid #ecf0f1;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-admin {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-normal {
  background: #e3f2fd;
  color: #1565c0;
}

.badge-success {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-danger {
  background: #ffebee;
  color: #c62828;
}

/* Botones de acción */
.actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-gris-medio);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: #f5f5f5;
  color: var(--color-azul-oscuro);
  transform: translateY(-2px);
}

.btn-icon[title=Eliminar]:hover {
  background: #ffebee;
  color: #c62828;
}

.btn-icon[title=Inactivar] {
  color: #e74c3c;
}

.btn-icon[title=Inactivar]:hover {
  background: #ffebee;
  color: #c62828;
}

.btn-icon[title=Activar] {
  color: #27ae60;
}

.btn-icon[title=Activar]:hover {
  background: #e8f5e9;
  color: #2e7d32;
}

.btn-icon[title="Eliminar Definitivamente"] {
  color: #999;
}

.btn-icon[title="Eliminar Definitivamente"]:hover {
  background: #ffebee;
  color: #c62828;
}

/* Modal para formularios */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.modal-overlay.show {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: var(--color-blanco);
  border-radius: 15px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  /* Estilos personalizados para scrollbar */
}

.modal-container::-webkit-scrollbar {
  width: 8px;
}

.modal-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-container::-webkit-scrollbar-thumb {
  background: var(--color-dorado);
  border-radius: 10px;
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-marron);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #ecf0f1;
  position: relative;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-azul-oscuro);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-gris-claro);
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}

.modal-close:hover {
  color: var(--color-negro);
  transform: rotate(90deg);
}

.modal-body {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  font-size: 0.95rem;
}

.form-group label i {
  margin-right: 8px;
  color: var(--color-dorado);
}

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=password],
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px var(--color-dorado-transparente-10);
}

.form-group input[type=checkbox] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--color-dorado);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 30px;
  border-top: 1px solid #ecf0f1;
}

/* Responsive para tablas */
@media (max-width: 768px) {
  .data-table {
    font-size: 0.85rem;
  }
  .data-table th,
  .data-table td {
    padding: 10px;
  }
  /* Ajustes del modal en tablets */
  .modal-container {
    max-width: 95%;
  }
  .modal-header {
    padding: 15px 20px;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-footer {
    padding: 15px 20px;
  }
}
@media (max-width: 600px) {
  /* Ajustes del modal en móviles */
  .modal-container {
    max-width: 98%;
    margin: 10px;
  }
  .modal-header h2 {
    font-size: 1.25rem;
  }
  .modal-close {
    top: 10px;
    right: 10px;
    font-size: 1.25rem;
  }
  .modal-header {
    padding: 12px 15px;
  }
  .modal-body {
    padding: 15px;
  }
  .modal-footer {
    padding: 12px 15px;
    flex-direction: column;
  }
  .modal-footer button {
    width: 100%;
  }
}
/* ============================================
   MODAL DE CONFIRMACIÓN - ACTIVAR/INACTIVAR MÉDICO
   ============================================ */
.modal-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-confirm-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-confirm-container {
  background: var(--color-blanco);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 480px;
  width: 90%;
  animation: modalConfirmSlideIn 0.4s ease;
  overflow: hidden;
}

.modal-confirm-container.modal-confirm-duracion {
  max-width: 550px;
}

@keyframes modalConfirmSlideIn {
  from {
    transform: translateY(-30px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.modal-confirm-content {
  padding: 40px 30px;
  text-align: center;
}

.modal-confirm-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2.5rem;
  color: var(--color-blanco);
}

.modal-confirm-icon.icon-inactivo {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 5px 20px rgba(231, 76, 60, 0.4);
}

.modal-confirm-icon.icon-activo {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4);
}

.modal-confirm-icon.icon-danger, .modal-confirm-icon.delete {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.modal-confirm-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 12px;
}

.modal-confirm-message {
  font-size: 1rem;
  color: var(--color-gris-medio);
  line-height: 1.6;
  margin-bottom: 8px;
}

.modal-confirm-medico {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-dorado);
  margin: 10px 0 20px;
}

.duracion-selector {
  margin: 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
}

.duracion-selector label {
  display: block;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.duracion-selector label i {
  color: var(--color-dorado);
  margin-right: 8px;
}

.duracion-selector select {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  color: var(--color-azul-oscuro);
  background-color: var(--color-blanco);
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D4A574' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.duracion-selector select:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.duracion-selector select:hover {
  border-color: var(--color-dorado);
}

.bloques-horarios {
  margin: 20px 0;
  padding: 15px;
  background: #e8f5e9;
  border-radius: 10px;
  border: 2px solid #4caf50;
}

.bloques-titulo {
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.bloques-titulo i {
  color: #4caf50;
  margin-right: 8px;
}

.bloques-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bloque-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-blanco);
  border-radius: 6px;
  font-weight: 500;
  color: var(--color-azul-oscuro);
  font-size: 0.9rem;
  border: 1px solid #c8e6c9;
}

.bloque-item i {
  color: #4caf50;
  font-size: 0.85rem;
}

.bloque-item:first-child {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  font-weight: 600;
}

.bloque-item:first-child i {
  color: #2e7d32;
}

.modal-confirm-buttons {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.modal-confirm-btn {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal-confirm-btn.modal-confirm-btn-cancel {
  background: #ecf0f1;
  color: var(--color-gris-medio);
}

.modal-confirm-btn.modal-confirm-btn-cancel:hover {
  background: #d5dbdb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-confirm-btn.modal-confirm-btn-confirm {
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

.modal-confirm-btn.modal-confirm-btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 165, 116, 0.5);
}

.modal-confirm-btn.modal-confirm-btn-confirm.btn-inactivo {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.modal-confirm-btn.modal-confirm-btn-confirm.btn-inactivo:hover {
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
}

.modal-confirm-btn.modal-confirm-btn-confirm.btn-activo {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.modal-confirm-btn.modal-confirm-btn-confirm.btn-activo:hover {
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}

.modal-confirm-btn.modal-confirm-btn-confirm.modal-confirm-btn-delete {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.modal-confirm-btn.modal-confirm-btn-confirm.modal-confirm-btn-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
}

.conteo-eliminacion {
  background: #ffebee;
  border-left: 3px solid #e74c3c;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
}

.conteo-eliminacion .conteo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.conteo-eliminacion .conteo-item:last-child {
  margin-bottom: 0;
}

.conteo-eliminacion .conteo-item i {
  color: #e74c3c;
  font-size: 1.1rem;
  width: 20px;
}

.conteo-eliminacion .conteo-item .conteo-numero {
  font-weight: 700;
  color: #c62828;
  font-size: 1.1rem;
}

/* Responsive para modal de confirmación */
@media (max-width: 600px) {
  .modal-confirm-container {
    width: 95%;
    max-width: none;
  }
  .modal-confirm-content {
    padding: 30px 20px;
  }
  .modal-confirm-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
  .modal-confirm-title {
    font-size: 1.25rem;
  }
  .modal-confirm-message {
    font-size: 0.95rem;
  }
  .modal-confirm-medico {
    font-size: 1rem;
  }
  .modal-confirm-buttons {
    flex-direction: column;
  }
  .modal-confirm-btn {
    width: 100%;
  }
}
/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: var(--color-blanco);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 16px 20px;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: toastSlideIn 0.4s ease-out;
  position: relative;
  overflow: hidden;
}

.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.toast.toast-success {
  border-left: 4px solid #27ae60;
}

.toast.toast-success::before {
  background: #27ae60;
}

.toast.toast-success .toast-icon {
  background: #27ae60;
}

.toast.toast-error {
  border-left: 4px solid #e74c3c;
}

.toast.toast-error::before {
  background: #e74c3c;
}

.toast.toast-error .toast-icon {
  background: #e74c3c;
}

.toast.toast-info {
  border-left: 4px solid var(--color-dorado);
}

.toast.toast-info::before {
  background: var(--color-dorado);
}

.toast.toast-info .toast-icon {
  background: var(--color-dorado);
}

@keyframes toastSlideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}
.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--color-blanco);
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-azul-oscuro);
  margin-bottom: 4px;
}

.toast-message {
  font-size: 0.875rem;
  color: var(--color-gris-medio);
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--color-gris-claro);
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.toast-close:hover {
  color: var(--color-negro);
}

/* Responsive para toasts */
@media (max-width: 600px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
  }
  .toast {
    min-width: 100%;
    max-width: 100%;
  }
}
/* ============================================
   BUSCADOR DE CLIENTES
   ============================================ */
.search-container {
  margin-bottom: 20px;
  background: var(--color-blanco);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box i.fa-search {
  position: absolute;
  left: 15px;
  color: var(--color-gris-medio);
  font-size: 1.1rem;
  pointer-events: none;
}

.search-box input {
  flex: 1;
  padding: 12px 45px 12px 45px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
  background: var(--color-blanco);
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.search-box input::placeholder {
  color: var(--color-gris-claro);
}

.search-box .search-clear {
  position: absolute;
  right: 50px;
  background: none;
  border: none;
  color: var(--color-gris-medio);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.search-box .search-clear:hover {
  background: #f5f5f5;
  color: var(--color-azul-oscuro);
}

.search-results-info {
  margin-top: 12px;
  padding: 10px 15px;
  background: #e3f2fd;
  border-left: 3px solid var(--color-azul-oscuro);
  border-radius: 5px;
  color: var(--color-azul-oscuro);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ============================================
   TABLA CLIENTES CON MASCOTAS DESPLEGABLES
   ============================================ */
.cliente-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cliente-row:hover {
  background-color: rgba(212, 165, 116, 0.05);
}

.expand-toggle {
  width: 40px;
  text-align: center;
}

.toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-gris-claro);
  transition: all 0.3s ease;
  padding: 5px;
  border-radius: 4px;
}

.toggle-btn:hover {
  color: var(--color-dorado);
  background: var(--color-dorado-transparente-10);
}

.toggle-btn i {
  transition: transform 0.3s ease;
}

.toggle-btn.active i {
  transform: rotate(180deg);
}

.mascotas-row {
  background-color: var(--color-fondo-claro);
}

.mascotas-row:hover {
  background-color: var(--color-fondo-claro) !important;
}

.mascotas-container {
  padding: 20px 40px !important;
  background-color: var(--color-fondo-claro);
}

.loading-spinner {
  text-align: center;
  padding: 20px;
  color: var(--color-gris-claro);
}

.loading-spinner i {
  font-size: 1.5rem;
  color: var(--color-dorado);
}

.mascotas-list {
  display: grid;
  gap: 15px;
}

.mascota-card {
  background: var(--color-blanco);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border-left: 3px solid var(--color-dorado);
}

.mascota-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateX(3px);
}

.mascota-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.mascota-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mascota-title i {
  font-size: 1.3rem;
  color: var(--color-dorado);
}

.mascota-title h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-azul-oscuro);
}

.mascota-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.mascota-badge.activo {
  background: #e8f5e9;
  color: #2e7d32;
}

.mascota-badge.inactivo {
  background: #ffebee;
  color: #c62828;
}

.mascota-badge.vacunado {
  background: #e3f2fd;
  color: #1565c0;
}

.mascota-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-gris-medio);
}

.mascota-info span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mascota-info span i {
  color: var(--color-dorado);
  width: 16px;
}

.mascota-info span strong {
  color: var(--color-azul-oscuro);
}

.mascota-observaciones {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  font-size: 0.85rem;
  color: var(--color-gris-claro);
  font-style: italic;
}

.no-mascotas {
  text-align: center;
  padding: 20px;
  color: var(--color-gris-claro);
}

.no-mascotas i {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

/* Responsive para tabla de clientes */
@media (max-width: 768px) {
  .mascotas-container {
    padding: 15px 20px !important;
  }
  .mascota-card {
    padding: 12px;
  }
  .mascota-header {
    flex-direction: column;
    gap: 8px;
  }
  .mascota-info {
    grid-template-columns: 1fr;
  }
}
/* Ajuste para textarea */
textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s;
  resize: vertical;
}

textarea:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px var(--color-dorado-transparente-10);
}

/* ============================================
   CALENDARIO DE CITAS
   ============================================ */
.calendar-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.calendar-controls select, .calendar-controls input {
  font-family: "Poppins", sans-serif;
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  background: var(--color-blanco);
  color: var(--color-azul-oscuro);
  cursor: pointer;
  transition: all 0.3s ease;
}

.calendar-controls select:focus, .calendar-controls input:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.calendar-container {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 0;
}

.calendar-day-header {
  padding: 15px;
  text-align: center;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  background: var(--color-dorado-transparente-10);
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-bottom: 1px solid #e0e0e0;
}

.calendar-week:last-child {
  border-bottom: none;
}

.calendar-day {
  border-right: 1px solid #e0e0e0;
  padding: 12px;
  min-height: 90px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: var(--color-blanco);
}

.calendar-day:last-child {
  border-right: none;
}

.calendar-day:hover {
  background: var(--color-dorado-transparente-10);
}

.calendar-day.today {
  background: #e3f2fd;
  border: 2px solid var(--color-azul-oscuro);
}

.calendar-day.today .day-number {
  color: var(--color-azul-oscuro);
  font-weight: 700;
}

.calendar-day.has-citas {
  background: #f1f8e9;
}

.calendar-day.has-citas:hover {
  background: #e8f5e9;
}

.calendar-day.empty {
  background: #fafafa;
  cursor: default;
}

.day-number {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-azul-oscuro);
}

.day-citas-count {
  margin-top: 5px;
  font-size: 0.85rem;
  color: var(--color-dorado);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-back {
  padding: 10px 20px;
  background: var(--color-dorado);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  margin-bottom: 15px;
}

.btn-back:hover {
  background: var(--color-marron);
  transform: translateX(-3px);
}

.calendar-day-view {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.day-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hour-slot {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 0;
}

.hour-label {
  font-weight: 600;
  color: var(--color-azul-oscuro);
  font-size: 1.1rem;
}

.hour-citas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.no-cita {
  color: var(--color-gris-claro);
  font-style: italic;
  padding: 10px;
  background: #fafafa;
  border-radius: 5px;
}

.cita-item {
  background: var(--color-blanco);
  border-left: 4px solid var(--color-dorado);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.cita-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.cita-item.estado-pendiente {
  border-left-color: #ff9800;
}

.cita-item.estado-confirmada {
  border-left-color: #4caf50;
}

.cita-item.estado-completada {
  border-left-color: #2196f3;
}

.cita-item.estado-cancelada {
  border-left-color: #e74c3c;
  opacity: 0.6;
}

.cita-header {
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 10px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cita-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--color-gris-medio);
}

.cita-info i {
  margin-right: 5px;
  color: var(--color-dorado);
}

.cita-motivo {
  margin: 10px 0;
  padding: 10px 12px;
  background: #f8f9fa;
  border-left: 3px solid var(--color-dorado);
  border-radius: 5px;
  font-size: 0.9rem;
  color: var(--color-gris-medio);
  line-height: 1.4;
  font-style: italic;
}

.cita-motivo i {
  color: var(--color-dorado);
  margin-right: 8px;
  font-size: 0.85rem;
}

.cita-motivo span {
  display: inline;
}

.cita-estado {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.badge-estado {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-block;
}

.badge-estado.estado-pendiente {
  background: #fff3e0;
  color: #e65100;
}

.badge-estado.estado-confirmada {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-estado.estado-completada {
  background: #e3f2fd;
  color: #1565c0;
}

.badge-estado.estado-cancelada {
  background: #ffebee;
  color: #c62828;
}

.cita-acciones {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn-accion-cita {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.btn-accion-cita.btn-editar {
  background: #3498db;
  color: var(--color-blanco);
}

.btn-accion-cita.btn-editar:hover {
  background: #2980b9;
  transform: scale(1.1);
}

.btn-accion-cita.btn-eliminar {
  background: #e74c3c;
  color: var(--color-blanco);
}

.btn-accion-cita.btn-eliminar:hover {
  background: #c0392b;
  transform: scale(1.1);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(3px);
}

.modal .modal-content {
  background: var(--color-blanco);
  border-radius: 15px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
}

.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 2px solid #ecf0f1;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  border-radius: 15px 15px 0 0;
}

.modal .modal-header h2 {
  margin: 0;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal .close-modal {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-blanco);
  font-size: 1.2rem;
}

.modal .close-modal:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.modal .modal-body {
  padding: 25px;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.info-cliente-mascota {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 4px solid var(--color-dorado);
}

.info-cliente-mascota .info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.info-cliente-mascota .info-item:last-child {
  margin-bottom: 0;
}

.info-cliente-mascota .info-item label {
  font-weight: 600;
  color: var(--color-azul-oscuro);
  min-width: 80px;
}

.info-cliente-mascota .info-item span {
  color: var(--color-gris-claro);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-azul-oscuro);
  font-size: 0.95rem;
}

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=number],
.form-group input[type=date],
.form-group input[type=time],
.form-group input[type=month],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  color: var(--color-azul-oscuro);
  background-color: var(--color-blanco);
  transition: all 0.3s ease;
  cursor: pointer;
}

.form-group input[type=text]:focus,
.form-group input[type=email]:focus,
.form-group input[type=tel]:focus,
.form-group input[type=number]:focus,
.form-group input[type=date]:focus,
.form-group input[type=time]:focus,
.form-group input[type=month]:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.form-group input[type=text]:hover,
.form-group input[type=email]:hover,
.form-group input[type=tel]:hover,
.form-group input[type=number]:hover,
.form-group input[type=date]:hover,
.form-group input[type=time]:hover,
.form-group input[type=month]:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--color-dorado);
}

.form-group input[type=date],
.form-group input[type=month] {
  position: relative;
  padding-right: 40px;
}

.form-group input[type=date]::-webkit-calendar-picker-indicator,
.form-group input[type=month]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.form-group input[type=date]::-webkit-calendar-picker-indicator:hover,
.form-group input[type=month]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D4A574' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.form-group select option {
  padding: 10px;
  color: var(--color-azul-oscuro);
}

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=number],
.form-group input[type=month] {
  cursor: text;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  cursor: text;
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.modal-buscar-cliente {
  max-width: 700px;
}

.search-box-container {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.search-box-container .search-box {
  flex: 1;
  min-width: 250px;
}

.search-box-container .btn-primary {
  flex-shrink: 0;
}

.resultados-busqueda {
  max-height: 450px;
  overflow-y: auto;
  padding: 10px 0;
}

.resultados-busqueda::-webkit-scrollbar {
  width: 8px;
}

.resultados-busqueda::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.resultados-busqueda::-webkit-scrollbar-thumb {
  background: var(--color-dorado);
  border-radius: 10px;
}

.resultados-busqueda::-webkit-scrollbar-thumb:hover {
  background: var(--color-marron);
}

.texto-info {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-gris-claro);
  font-size: 1rem;
}

.texto-info i {
  margin-right: 8px;
}

.texto-error {
  text-align: center;
  padding: 40px 20px;
  color: #e74c3c;
  font-size: 1rem;
}

.texto-error i {
  margin-right: 8px;
}

.lista-clientes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cliente-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: var(--color-blanco);
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.cliente-item:hover {
  border-color: var(--color-dorado);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
  transform: translateX(5px);
}

.cliente-info {
  flex: 1;
}

.cliente-nombre {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cliente-nombre i {
  color: var(--color-dorado);
}

.cliente-detalles {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.9rem;
  color: var(--color-gris-claro);
}

.cliente-detalles span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cliente-detalles span i {
  color: var(--color-dorado);
  font-size: 0.85rem;
}

.btn-accion-seleccionar {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-accion-seleccionar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4);
}

.btn-accion-seleccionar:active {
  transform: translateY(0);
}

.no-cita {
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

.no-cita:hover {
  background: var(--color-dorado-transparente-10);
  color: var(--color-dorado);
  font-weight: 600;
}

@media (max-width: 768px) {
  .calendar-day {
    min-height: 60px;
    padding: 8px;
  }
  .day-number {
    font-size: 0.95rem;
  }
  .day-citas-count {
    font-size: 0.75rem;
  }
  .hour-slot {
    grid-template-columns: 80px 1fr;
  }
  .calendar-controls {
    flex-wrap: wrap;
  }
  .modal .modal-content {
    width: 95%;
    max-height: 95vh;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-group input[type=text],
  .form-group input[type=email],
  .form-group input[type=tel],
  .form-group input[type=number],
  .form-group input[type=date],
  .form-group input[type=time],
  .form-group select,
  .form-group textarea {
    font-size: 16px;
    padding: 14px 15px;
  }
  .form-actions {
    flex-direction: column;
  }
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .btn-accion-cita {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  .search-box-container {
    flex-direction: column;
  }
  .search-box-container .search-box {
    min-width: 100%;
  }
  .search-box-container .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .cliente-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .cliente-detalles {
    flex-direction: column;
    gap: 8px;
  }
  .btn-accion-seleccionar {
    width: 100%;
    justify-content: center;
  }
}
/* ============================================
   AJUSTE MODAL DE LOGIN/REGISTRO
   ============================================ */
.toggle-link {
  bottom: 27px;
}

.signin-link {
  left: 52px;
}

/* ============================================
   SISTEMA DE REPORTES EN PDF
   ============================================ */
.reportes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.reporte-card {
  background: var(--color-blanco);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reporte-card:hover:not(.disabled) {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: var(--color-dorado);
}

.reporte-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.reporte-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.disabled .reporte-icon {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}

.reporte-content {
  flex: 1;
}

.reporte-content h3 {
  font-size: 1.2rem;
  color: var(--color-azul-oscuro);
  margin-bottom: 8px;
  font-weight: 600;
}

.reporte-content p {
  font-size: 0.9rem;
  color: var(--color-gris-medio);
  line-height: 1.4;
}

.btn-generar-reporte {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

.btn-generar-reporte:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 165, 116, 0.5);
}

.btn-generar-reporte:active:not(:disabled) {
  transform: translateY(0);
}

.btn-generar-reporte:disabled {
  background: #bdc3c7;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-generar-reporte i {
  font-size: 1rem;
}

.instrucciones-card {
  background: #e3f2fd;
  border-radius: 12px;
  padding: 25px;
  border-left: 4px solid var(--color-azul-oscuro);
}

.instrucciones-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.instrucciones-header i {
  font-size: 1.5rem;
  color: var(--color-azul-oscuro);
}

.instrucciones-header h3 {
  font-size: 1.1rem;
  color: var(--color-azul-oscuro);
  margin: 0;
}

.instrucciones-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.instrucciones-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: #1565c0;
  line-height: 1.5;
}

.instrucciones-lista li i {
  color: #4caf50;
  margin-top: 3px;
  flex-shrink: 0;
}

.info-box {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.info-box > i {
  color: #4caf50;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-box .info-text {
  flex: 1;
}

.info-box .info-text strong {
  color: #2e7d32;
  display: block;
  margin-bottom: 5px;
}

.info-box .info-text p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .reportes-grid {
    grid-template-columns: 1fr;
  }
  .reporte-card {
    padding: 20px;
  }
  .reporte-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  .instrucciones-card {
    padding: 20px;
  }
}
/* ============================================
   BOTONES PARA MODALES Y FORMULARIOS
   ============================================ */
.btn-primary {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 165, 116, 0.5);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary i {
  font-size: 1rem;
}

.btn-secondary {
  padding: 12px 24px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-blanco);
  color: var(--color-gris-medio);
}

.btn-secondary:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: var(--color-gris-medio);
  transform: translateY(-2px);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary i {
  font-size: 1rem;
}

/* ============================================
   PÁGINA DE DOCTORES
   ============================================ */
.seccion-hero-doctores {
  padding: 120px 0 80px;
  text-align: center;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(44, 62, 80, 0.05) 100%);
}

.seccion-hero-doctores .contenedor-hero-doctores {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.seccion-hero-doctores .contenedor-hero-doctores .etiqueta-seccion {
  display: inline-block;
  padding: 8px 24px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  color: var(--color-blanco);
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.seccion-hero-doctores .contenedor-hero-doctores .titulo-principal {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-azul-oscuro);
  margin-bottom: 20px;
  line-height: 1.2;
}

.seccion-hero-doctores .contenedor-hero-doctores .linea-decorativa {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.seccion-hero-doctores .contenedor-hero-doctores .subtitulo-doctores {
  font-size: 1.2rem;
  color: var(--color-gris-claro);
  line-height: 1.6;
}

.seccion-doctores {
  padding: 60px 20px;
}

.seccion-doctores .contenedor-doctores {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.card-doctor {
  background: var(--color-blanco);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  transition: all 0.3s ease;
}

.card-doctor:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.card-doctor .foto-doctor {
  background: linear-gradient(135deg, var(--color-dorado-transparente-30) 0%, var(--color-marron) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.card-doctor .foto-doctor .placeholder-foto {
  width: 100%;
  height: 300px;
  background: var(--color-blanco-transparente-30);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--color-blanco-transparente-95);
  color: var(--color-blanco);
}

.card-doctor .foto-doctor .placeholder-foto i {
  font-size: 4rem;
  margin-bottom: 15px;
  opacity: 0.8;
}

.card-doctor .foto-doctor .placeholder-foto span {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.9;
}

.card-doctor .foto-doctor img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 15px;
}

.card-doctor .info-doctor {
  padding: 40px;
}

.card-doctor .info-doctor .nombre-doctor {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-azul-oscuro);
  margin-bottom: 10px;
}

.card-doctor .info-doctor .titulo-profesional {
  font-size: 1.1rem;
  color: var(--color-dorado);
  font-weight: 600;
  margin-bottom: 20px;
}

.card-doctor .info-doctor .linea-separadora {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  margin-bottom: 30px;
  border-radius: 2px;
}

.card-doctor .info-doctor .formacion-academica {
  margin-bottom: 35px;
}

.card-doctor .info-doctor .formacion-academica h3 {
  font-size: 1.3rem;
  color: var(--color-azul-oscuro);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-doctor .info-doctor .formacion-academica h3 i {
  color: var(--color-dorado);
}

.card-doctor .info-doctor .formacion-academica .item-formacion {
  display: flex;
  gap: 15px;
  padding: 15px;
  margin-bottom: 15px;
  background: var(--color-fondo-claro);
  border-radius: 12px;
  border-left: 4px solid var(--color-dorado-transparente-40);
  transition: all 0.3s ease;
}

.card-doctor .info-doctor .formacion-academica .item-formacion:hover {
  background: var(--color-dorado-transparente-10);
  border-left-color: var(--color-dorado);
  transform: translateX(5px);
}

.card-doctor .info-doctor .formacion-academica .item-formacion.principal {
  background: linear-gradient(135deg, var(--color-dorado-transparente-10) 0%, var(--color-azul-oscuro-transparente-98) 100%);
  border-left-color: var(--color-dorado);
}

.card-doctor .info-doctor .formacion-academica .item-formacion.principal .titulo-grado {
  color: var(--color-azul-oscuro);
  font-weight: 600;
}

.card-doctor .info-doctor .formacion-academica .item-formacion .icono-item {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-marron) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  font-size: 1.2rem;
}

.card-doctor .info-doctor .formacion-academica .item-formacion .texto-item {
  flex: 1;
}

.card-doctor .info-doctor .formacion-academica .item-formacion .texto-item .titulo-grado {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-negro);
  margin-bottom: 5px;
  line-height: 1.4;
}

.card-doctor .info-doctor .formacion-academica .item-formacion .texto-item .institucion {
  font-size: 0.9rem;
  color: var(--color-gris-claro);
  margin-bottom: 3px;
}

.card-doctor .info-doctor .formacion-academica .item-formacion .texto-item .anio {
  font-size: 0.85rem;
  color: var(--color-dorado);
  font-weight: 600;
}

.card-doctor .info-doctor .especializaciones h3 {
  font-size: 1.3rem;
  color: var(--color-azul-oscuro);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-doctor .info-doctor .especializaciones h3 i {
  color: var(--color-dorado);
}

.card-doctor .info-doctor .especializaciones .lista-especializaciones {
  list-style: none;
  display: grid;
  gap: 12px;
}

.card-doctor .info-doctor .especializaciones .lista-especializaciones li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--color-blanco);
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

.card-doctor .info-doctor .especializaciones .lista-especializaciones li:hover {
  background: var(--color-dorado-transparente-10);
  border-color: var(--color-dorado);
  transform: translateX(5px);
}

.card-doctor .info-doctor .especializaciones .lista-especializaciones li i {
  color: var(--color-dorado);
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.card-doctor .info-doctor .especializaciones .lista-especializaciones li {
  font-size: 0.95rem;
  color: var(--color-negro);
  line-height: 1.5;
}

.cta-doctores {
  background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, var(--color-marron) 100%);
  padding: 60px 20px;
  text-align: center;
}

.cta-doctores .contenedor-cta {
  max-width: 800px;
  margin: 0 auto;
}

.cta-doctores .contenedor-cta h2 {
  font-size: 2.2rem;
  color: var(--color-blanco);
  margin-bottom: 15px;
  font-weight: 700;
}

.cta-doctores .contenedor-cta p {
  font-size: 1.2rem;
  color: var(--color-blanco-transparente-95);
  margin-bottom: 30px;
}

.cta-doctores .contenedor-cta .botones-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-doctores .contenedor-cta .botones-cta a, .cta-doctores .contenedor-cta .botones-cta button {
  padding: 15px 35px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

.cta-doctores .contenedor-cta .botones-cta a i, .cta-doctores .contenedor-cta .botones-cta button i {
  font-size: 1.2rem;
}

.cta-doctores .contenedor-cta .botones-cta .boton-principal {
  background: var(--color-blanco);
  color: var(--color-azul-oscuro);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-doctores .contenedor-cta .botones-cta .boton-principal:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cta-doctores .contenedor-cta .botones-cta .boton-secundario {
  background: #25D366;
  color: var(--color-blanco);
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.cta-doctores .contenedor-cta .botones-cta .boton-secundario:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  background: #20ba5a;
}

@media (max-width: 968px) {
  .card-doctor {
    grid-template-columns: 1fr;
  }
  .card-doctor .foto-doctor {
    padding: 30px;
  }
  .card-doctor .foto-doctor .placeholder-foto,
  .card-doctor .foto-doctor img {
    height: 250px;
  }
  .card-doctor .info-doctor {
    padding: 30px;
  }
}
@media (max-width: 768px) {
  .seccion-hero-doctores {
    padding: 100px 0 60px;
  }
  .seccion-hero-doctores .contenedor-hero-doctores .titulo-principal {
    font-size: 2.2rem;
  }
  .seccion-hero-doctores .contenedor-hero-doctores .subtitulo-doctores {
    font-size: 1rem;
  }
  .seccion-doctores {
    padding: 40px 15px;
  }
  .seccion-doctores .contenedor-doctores {
    gap: 40px;
  }
  .card-doctor .info-doctor {
    padding: 25px;
  }
  .card-doctor .info-doctor .nombre-doctor {
    font-size: 1.6rem;
  }
  .card-doctor .info-doctor .formacion-academica h3,
  .card-doctor .info-doctor .especializaciones h3 {
    font-size: 1.1rem;
  }
  .cta-doctores {
    padding: 40px 20px;
  }
  .cta-doctores .contenedor-cta h2 {
    font-size: 1.8rem;
  }
  .cta-doctores .contenedor-cta p {
    font-size: 1rem;
  }
  .cta-doctores .contenedor-cta .botones-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-doctores .contenedor-cta .botones-cta a, .cta-doctores .contenedor-cta .botones-cta button {
    width: 100%;
    justify-content: center;
  }
}


/*# sourceMappingURL=estilos.css.map */