/* ============================================================
   ESTILOS GENERALES
============================================================ */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco por defecto */
    margin: 0;
    padding: 0;
    padding-top: 110px; /* Espacio para navbar fijo (logo 90px + padding) */
}

/* Hero sections que se extienden hasta el navbar (con fondo de color) */
.hero-full-top {
    margin-top: -110px;
    padding-top: 170px; /* 110px navbar + 60px espacio extra para título */
}

/* Secciones con fondo claro necesitan texto oscuro */
.bg-light,
.bg-white,
.card,
.card-body {
    color: #333 !important;
}

.bg-light p,
.bg-white p,
.bg-light h5,
.bg-white h5,
.card p,
.card-body p {
    color: #555;
}

/* Fix: text-muted visible en fondos oscuros */
.text-muted {
    color: #adb5bd !important; /* Gris más claro para fondos oscuros */
}

/* En fondos claros, text-muted más oscuro */
.bg-light .text-muted,
.bg-white .text-muted {
    color: #6c757d !important;
}

/* Títulos blancos en secciones con fondo de color */
.text-white h2,
.text-white h3,
.text-white h4,
section.text-white h2,
section.text-white h3 {
    color: #fff !important;
}

/* ============================================================
   ENCABEZADO (NAVBAR) 
   => Se asume que usarás la clase .navbar-dark en tu navbar.
   => Si quieres la navbar negra con texto blanco, ajusta:
============================================================ */

/* Navbar negra */
.navbar-dark {
    background-color: #000 !important;
    transition: all 0.3s ease;
}

/* Navbar con efecto al hacer scroll */
.navbar-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Links del navbar en blanco */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
    color: #fff !important;
    transition: color 0.3s ease;
}

/* Hover en links del navbar: resaltar en rojo */
.navbar-dark .navbar-nav .nav-link:hover {
    color: #cc0000 !important; /* Rojo oscuro */
}

/* Para el toggler (icono de hamburguesa) en navbar-dark */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' "
      + "xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' "
      + "stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22' "
      + "/%3E%3C/svg%3E");
}

/* ============================================================
   BRAND / LOGO
============================================================ */
.navbar-brand img {
    margin-right: 10px;
}

/* ============================================================
   TITULARES
   => Si quieres los H2, H3, H4 en rojo de marca
============================================================ */
section h2,
section h3,
section h4 {
    color: #cc0000; /* Rojo de marca */
    font-weight: 700;
}

/* ============================================================
   CARRUSEL
============================================================ */
.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

/* ============================================================
   SECCIONES
============================================================ */
section {
    padding: 60px 0;
}

/* ============================================================
   MAPA
============================================================ */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* ============================================================
   FOOTER
============================================================ */
footer {
    background: #222; /* Negro/gris muy oscuro */
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: #fff;
    text-decoration: underline;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #cc0000; /* rojo en hover */
    text-decoration: none;
}

/* ============================================================
   TABLA DE TURNOS O LISTADOS
============================================================ */
#tablaTurnos {
    font-size: 14px;
    text-align: center;
}

.table thead th {
    background-color: #cc0000; /* Encabezado rojo */
    color: #fff;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

/* ============================================================
   BOTONES Y OTROS ELEMENTOS
   => Ajusta las clases de Bootstrap a tu paleta
============================================================ */

/* Ejemplo: si usas .btn-primary, cámbiala a rojo */
.btn-primary {
    background-color: #cc0000;
    border-color: #cc0000;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #990000;
    border-color: #990000;
}

/* Botón WhatsApp verde */
.btn-success {
    background-color: #25D366;
    border-color: #25D366;
}
.btn-success:hover {
    background-color: #1da851;
    border-color: #1da851;
}

/* ============================================================
   FORMULARIOS BOOTSTRAP 5
============================================================ */
.form-control:focus,
.form-select:focus {
    border-color: #cc0000;
    box-shadow: 0 0 0 0.25rem rgba(204, 0, 0, 0.25);
}

/* ============================================================
   ACORDEÓN BOOTSTRAP 5
============================================================ */
.accordion-button:not(.collapsed) {
    background-color: #cc0000;
    color: #fff;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(204, 0, 0, 0.25);
}

/* ============================================================
   EXTRAS / ANIMACIONES
============================================================ */
/* =========================================================
   BLOQUE DE SERVICIO TIPO BANNER
========================================================= */
/* 
   BANNER PRINCIPAL DEL SERVICIO
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   - Usamos 'min-height' para que crezca si el texto es más largo.
   - El degradado + imagen se especifica (general o en línea style).
   - Quitamos display: flex si vamos a posicionar el texto de forma absoluta.
*/

/* Ajusta la altura a ~15% menos de lo que tenías antes.
   Si antes usabas min-height: 300px, ahora ~255px. */
/***********************************************************
  CONFIGURACIÓN DEL BLOQUE RECTANGULAR
***********************************************************/
/* 
   BLOQUE PRINCIPAL (rectángulo con imagen de fondo)
   - No ocupa todo el ancho: max-width de 900px
   - Altura fija de 300px
   - Degradado negro (40%) y luego la imagen
*/
/* 
  Contenedor principal del banner:
  900x255 px, centrado, con posición relativa
*/
/* Bloque principal (900x255) */
/* BANNER PRINCIPAL */
.service-banner {
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 900px; /* Limita el ancho máximo */
  height: 250px; /* Ajusta la altura del rectángulo */
  margin: 0 auto 30px; /* Centrar + margen abajo */
  position: relative; /* Para ubicar overlay y textos */
  border-radius: 10px; /* Bordes redondeados */
  overflow: hidden; /* Para que el contenido no sobresalga */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover opcional */
  background-position: center;
  background-size: cover; /* Asegura que la imagen cubra todo el área */
  background-repeat: no-repeat; /* Evita la repetición de la imagen */
}

.service-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
}

/* CAPA DEGRADADA DESDE ABAJO HACIA ARRIBA */
.overlay-bottom {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 80px; /* Ajusta la altura que quieres para el degradado */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); /* Degradado más oscuro */
}

/* TÍTULO ARRIBA IZQUIERDA */
.top-left {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #fff; /* Texto blanco */
}

/* EJEMPLO de BADGE URGENCIAS (amarillo c/ texto negro) */
.badge-urgencias {
  background-color: #ffcc00; /* Amarillo más suave */
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 20px; /* Bordes redondeados */
  text-transform: uppercase;
  margin-bottom: 5px;
  display: inline-block;
  font-size: 0.9rem; /* Tamaño de fuente más pequeño */
}

/* Título en rojo */
.service-title {
  margin: 0;
  color: #ff2300; /* Rojo más vibrante */
  font-size: 1.5rem; /* Aumentar tamaño del título */
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); /* Sombra para mejorar la legibilidad */
}

/* SUBTÍTULO ABAJO DERECHA */
.bottom-right {
  position: absolute;
  bottom: 20px;
  right: 20px;
  text-align: center;
}

.service-subtitle {
  margin: 0;
  font-weight: normal; /* Normal */
  color: #fff; /* Blanco */
  line-height: 1.4; /* Espaciado más amplio */
  font-size: 1.2rem; /* Tamaño de fuente más pequeño */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); /* Sombra para mejorar la legibilidad */
}
/* Caja del título con fondo negro
   y un “cartucho” redondeado a la derecha */
.title-box {
  position: relative;  /* Para ubicar el pseudo-elemento dentro */
  display: inline-block;
  padding: 10px 20px;  
  /* El texto en blanco por defecto */
  color: #000;
  z-index: 1;          /* Para que el texto quede delante del pseudo-elemento */
}

/* Pseudo-elemento que crea la burbuja curva */
.title-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  
  /* Ajusta un poco más para que crezca y cree un borde “curvo” */
  border-bottom-right-radius: 40px; 
  /* Podrías usar border-bottom-left-radius, border-top-right-radius, etc., 
     según la forma que busques */
  
  /* Dibuja un degradado seminegro. Ejemplo:
     - abajo: negro opaco
     - arriba: algo transparente (para “difuminar”) */
  background: linear-gradient(
                to top,
                rgba(0,0,0,0.9) 70%,
                rgba(0,0,0,0) 100%
              );
  
  /* Haz que se expanda un poco más allá para una forma “orgánica” */
  transform: translate(-10px, -10px);
  width: calc(100% + 20px);
  height: calc(100% + 20px);

  /* Z-index por detrás del texto .title-box */
  z-index: -1;
  /* Sombra sutil si quieres */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

/* Título en rojo (o el color que quieras) */
.title-box .service-title {
  margin: 5px 0 0;
  color: red;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}

/* ============================================================
   RESPONSIVE - MÓVILES
============================================================ */

/* Tablets y móviles grandes (max 992px) */
@media (max-width: 992px) {
  .service-banner {
    height: 200px;
    max-width: 100%;
  }

  .service-title {
    font-size: 1.2rem;
  }

  .service-subtitle {
    font-size: 1rem;
  }

  section {
    padding: 40px 0;
  }
}

/* Móviles (max 768px) */
@media (max-width: 768px) {
  body {
    padding-top: 80px;
  }

  /* Hero ajuste móvil */
  .hero-full-top {
    margin-top: -80px;
    padding-top: 130px; /* 80px navbar + 50px espacio extra para título */
  }

  /* Logo más pequeño en móvil */
  .navbar-brand img {
    width: 120px;
    height: auto;
  }

  /* Navbar colapsado */
  .navbar-collapse {
    background-color: #000;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
  }

  .service-banner {
    height: 180px;
  }

  .service-title {
    font-size: 1rem;
  }

  .service-subtitle {
    font-size: 0.9rem;
    max-width: 150px;
  }

  .bottom-right {
    bottom: 10px;
    right: 10px;
  }

  .top-left {
    top: 10px;
    left: 10px;
  }

  .carousel-caption h3 {
    font-size: 1.2rem;
  }

  .carousel-caption p {
    font-size: 0.9rem;
  }

  section h2 {
    font-size: 1.8rem;
  }

  section h3 {
    font-size: 1.4rem;
  }

  .display-4 {
    font-size: 2rem;
  }

  /* Footer más compacto en móvil */
  footer p {
    font-size: 0.85rem;
  }

  /* Mapa responsive */
  .map-responsive {
    padding-bottom: 75%;
  }
}

/* Móviles pequeños (max 576px) */
@media (max-width: 576px) {
  .service-banner {
    height: 160px;
  }

  .title-box {
    padding: 5px 10px;
  }

  .title-box::before {
    border-bottom-right-radius: 20px;
  }

  .service-title {
    font-size: 0.9rem;
  }

  .service-subtitle {
    font-size: 0.8rem;
    max-width: 120px;
  }

  .badge-urgencias {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .carousel-item {
    height: 50vh;
    min-height: 250px;
  }

  .display-4 {
    font-size: 1.6rem;
  }

  .lead {
    font-size: 1rem;
  }

  /* Botones más pequeños */
  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }

  /* Iconos más pequeños */
  .fa-3x {
    font-size: 2em;
  }
}