/* 

============ PARALLAX ============

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 60vh;
}

.parallax-container .parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.parallax-container .parallax img {
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  transform: translate3d(0, 0, 0);
  transform: translateX(-50%);
}

main {
  overflow: hidden;
}

============ HTML ============

<div class="parallax-container">
  <div class="parallax"><img src="img/imagen.jpg"></div>
</div>

*/

/**************************************/
/************** CUSTOM ****************/
/**************************************/

body {
  font-family: 'Outfit', sans-serif;
}

h1, h2, h3 {
  color: #554e78;
}

.h-100vh {
  height: 100vh;
}

.bg-black {
  background-color: #000000;
}

.bg-celeste {
  background-color: #8dcfcb;
}

.bg-naranja {
  background-color: #cc474a;
}

.bg-morado {
  background-color: #554e78;
}

.bg-verde {
  background-color: #8dcfcb;
}

.bg-verde-oscuro, .tabs-semana .btn-activo {
  background-color: #8dcfcb;
}

.text-verde, .tabs-semana button {
  color: #000000;
}

.text-morado {
  color: #554e78;
}

.text-gris {
  color: #6E726E;
}

.text-naranja {
  color: #EA5B3A !important;
}

.text-negro {
  color: #000000;
}

.tabs-semana .btn-activo {
  color: #fff;
}

.bg-patron, body, .page-index, .page-semanas, .page-semana {
  background-image: url("../img/fondo.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.logo-menu {
  width: 80px;
}

.food {
  width: 45px;
  margin-right:10px;
}

.hvr-grow-custom {
  transition: 0.5s;
}

.hvr-grow-custom:hover {
  transform: scale(1.05);
}

.form-control {
  font-size: 1.5rem;
}

.form-control-registro {
  border: 1px solid #B2D8AC;
  background-color: #F4F9F3;
  font-size: 1.5rem;
}

.thumb-perfil-salud {
  height: 250px;
  object-fit: cover;
}

.feedback {
  position:absolute;
  left:-13px;
  bottom:30px;
}

.feedback img {
  width:60px
}
/* =========================
   Submenu Clínicos
========================= */

.clinicos-submenu {
  min-height: 44px;           /* reserva espacio fijo */
  transition: opacity 0.2s ease;
}

.clinicos-submenu.hidden {
  visibility: hidden;
  opacity: 0;
}

.clinicos-submenu.visible {
  visibility: visible;
  opacity: 1;
}

.grafico-switch-main{
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.clinicos-submenu{
  min-height: 44px; /* reserva espacio para que no “salte” el layout */
}

.invisible{
  visibility: hidden;
  pointer-events: none; /* para que no se pueda clicar cuando está oculto */
}

.visible{
  visibility: visible;
  pointer-events: auto;
}

/* =========================
   BOTÓN SCOREBOARD HOME
========================= */

.btn-morado {
  display: inline-block;
  background-color: #554e78;
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-morado:hover {
  background-color: #463f66;
  color: #ffffff !important;
  text-decoration: none;
}
/* Fuerza color blanco en mobile */
@media (max-width: 768px) {
  .btn-morado,
  .btn-morado:link,
  .btn-morado:visited,
  .btn-morado:hover,
  .btn-morado:active {
    color: #ffffff !important;
  }
}
.select-con-flecha {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #fff;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;

  padding-right: 44px; /* espacio para la flecha */
}
/* Botones colapsables (lila claro) */
.btn-kalcu-lila {
  background-color: #B8AEDC;
  color: #ffffff;
  border: none;
}
.btn-kalcu-lila:hover {
  background-color: #A79DD3;
  color: #ffffff;
}

/* Botón primario Kalcu */
.btn-kalcu-primary {
  background-color: #5B4EA1;
  color: #ffffff;
  border: none;
}
.btn-kalcu-primary:hover {
  background-color: #4a3f8c;
  color: #ffffff;
}

/* Botón secundario Kalcu */
.btn-kalcu-outline {
  background-color: #ffffff;
  color: #5B4EA1;
  border: 2px solid #5B4EA1;
}
.btn-kalcu-outline:hover {
  background-color: #F4F3FA;
}
.btn-primary {
  background-color: #5B4EA1;
  border-color: #5B4EA1;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #4a3f8a;
  border-color: #4a3f8a;
}