/* StoringMedical - color base: rgb(86, 121, 153) - #567999 */
#logo img { max-width: 210px; margin-bottom: 0; }

/* Logo en login: responsive */
#login-logo img { max-width: 300px; width: 60vw; height: auto; }
@media (max-width: 576px) {
  #login-logo img { max-width: 220px; width: 70vw; }
}

/* Slider: flechas mas grandes */
#slider .slick-prev, #slider .slick-next { width: 40px; height: 40px; }
#slider .slick-prev:before, #slider .slick-next:before { font-size: 40px; }

:root {
  --cliente-color-base: rgb(86, 121, 153);
  --cliente-color-base-dark: rgb(60, 90, 120);
  --cliente-color-base-light: rgb(120, 150, 180);
  --cliente-color-btn-text: #fff;
  --cliente-color-estrella: #f5b301;
  /* Pisamos bs-primary para que links, paginador y footer usen color del cliente */
  --bs-primary: var(--cliente-color-base);
  --bs-primary-dark: var(--cliente-color-base-dark);
}

#slider .slick-list{ border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; -ms-border-radius:25px; -o-border-radius:25px; }
#noticias-wide .card{background-color:transparent; border-bottom: 2px solid #ccc;padding: 0 0 7px 0;}
#noticias-wide .wide-ver-mas{display: none;}
#noticias-wide p.card-text{margin-bottom: 0;}
#noticias-wide h3{font-weight: bold;}

.sidebar .card-body{ padding: 0;}
.sidebar .card{ padding: 10px; background-color: #ddd; border-radius:10px; }
.sidebar .card h4{
  background-color: var(--cliente-color-base);
  color: white;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.sidebar .card .datos{padding: 0 15px;}
.sidebar .card .btn {
  margin-left: 10px;
  color: var(--cliente-color-btn-text);
  background-color: var(--cliente-color-base);
  border-color: var(--cliente-color-base);
}
.sidebar .card .btn:hover {
  color: var(--cliente-color-btn-text);
  background-color: var(--cliente-color-base-dark);
  border-color: var(--cliente-color-base-dark);
}

/* Sistema de estrellas para votar en recomendados */
.rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 28px; }
.rating-stars input { display: none; }
.rating-stars label { cursor: pointer; color: #ccc; transition: color .15s; }
.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input:checked ~ label { color: var(--cliente-color-estrella); }
.rating-stars input:checked + label,
.rating-stars input:checked + label ~ label { color: var(--cliente-color-estrella); }
.rating-promedio { font-size: 14px; color: #666; margin-top: 8px; }
.rating-promedio .estrella { color: var(--cliente-color-estrella); font-size: 18px; vertical-align: middle; }
#cumples .card{padding: 20px;}
.header{ background-color: var(--cliente-color-base); }

a { color: var(--cliente-color-base); }
a:hover { color: var(--cliente-color-base-dark); }
.btn-primary, .btn-danger { background-color: var(--cliente-color-base); border-color: var(--cliente-color-base); }
.btn-primary:hover, .btn-danger:hover { background-color: var(--cliente-color-base-dark); border-color: var(--cliente-color-base-dark); }