/* ============================================================   ESTILOS UNIFICADOS PARA EL COTIZADOR CDI MORELOS   Compatible con Bootstrap 5   ============================================================ */
:root {
  --lila: #9e79b4;
  --azul: #7197ab;
  --gris-suave: #f6f6f6;
  --gris-texto: #555;
} /* ============================================================    RESETEO Y BASE   ============================================================ */
body {
  background-color: var(--gris-suave);
  color: #333;
  font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}
a {
  text-decoration: none;
}
.btn-primary {
  background-color: var(--lila);
  border-color: var(--lila);
}
.btn-primary:hover {
  background-color: #8d69a0;
  border-color: #8d69a0;
}
.btn-outline-primary {
  border-color: var(--lila);
  color: var(--lila);
}
.btn-outline-primary:hover {
  background-color: var(--lila);
  color: white;
} /* ============================================================    PANTALLA 1 — SELECTOR DE ESTUDIOS   ============================================================ */
#search {
  border-radius: 12px;
}
.category-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--lila);
  color: var(--lila);
  transition: 0.25s;
  user-select: none;
}
.category-card:hover {
  background: var(--lila);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.study-card {
  background: white;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: 0.25s;
}
.study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.study-card h5 {
  font-size: 1.1rem;
  font-weight: 700;
} /* ============================================================    PANTALLA 2 — CONFIRMACIÓN DEL ESTUDIO   ============================================================ */
.card-confirm {
  background: white !important;
  padding: 32px;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.card-confirm h4 {
  font-size: 1.4rem;
  font-weight: 700;
} /* ============================================================    PANTALLA 3 — FORMULARIO DEL PACIENTE   ============================================================ */
.card-form {
  background: white;
  padding: 32px;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.card-form label {
  font-weight: 600;
}
.card-form input,
.card-form select {
  border-radius: 10px;
  padding: 12px 14px;
} /* ============================================================    RESPONSIVE (MÓVIL)   ============================================================ */
@media (max-width: 768px) {
  h2 {
    font-size: 1.4rem;
  }
  .category-card {
    padding: 14px;
    font-size: 0.95rem;
  }
  .study-card {
    padding: 18px;
  }
  .card-confirm,
  .card-form {
    padding: 22px;
  }
}