/* ============================================================
   ESTILOS GENERALES
============================================================ */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #000; /* Fondo gris claro */
    color: #fff; /* Texto gris oscuro */
    margin: 0;
    padding: 0;
}

/* ============================================================
   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;
}

/* 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;
}

/* Si tienes botones .btn-success o .btn-danger,
   también podrías personalizarlos. Ejemplo: */
.btn-success {
    background-color: #666; /* gris, ejemplo */
    border-color: #666;
}
.btn-success:hover {
    background-color: #444;
    border-color: #444;
}
/* Si no usas .btn-success, ajusta según tu criterio. */

/* ============================================================
   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;
}