#dynamic-tooltip {
  display: none; /* Oculta el tooltip por defecto */
  position: absolute;
  /* Agrega estilos de fondo, borde, etc. */
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  z-index: 500;
  text-align: left;
}

/* Estilos básicos para el input */
#direccion-input {
    box-sizing: border-box;
    width: 300px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#sugerencias {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 300px;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    display: none; /* Oculto por defecto */
}
#sugerencias li {
    padding: 10px;
    cursor: pointer;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}
#sugerencias li:hover {
    background-color: #e9e9e9;
}

.container { margin: 50px; }
  #direccion-input {
      width: 300px;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
  }
  #sugerencias {
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 300px;
      border: 1px solid #ccc;
      border-top: none;
      max-height: 200px;
      overflow-y: auto;
      display: none; /* Oculto por defecto */
      position: absolute; /* Para que aparezca sobre el resto del contenido */
      background: white;
      z-index: 1000;
  }
  #sugerencias li {
      padding: 10px;
      cursor: pointer;
      background-color: #f9f9f9;
      border-bottom: 1px solid #eee;
  }
  #sugerencias li:hover {
      background-color: #e9e9e9;
  }

.emergencias {
    font-weight: bold;
    color: #ff0000 !important; /* Color rojo para resaltar */
}

.metric-card {
    border-left: 5px solid #0d6efd; /* Borde izquierdo azul primario */
}


.bg-rojo { background-color: #dc3545; color: white; } /* Para código Rojo */
.bg-amarillo { background-color: #ffc107; color: black; } /* Para código Amarillo */
.bg-verde { background-color: #198754; color: white; } /* Para código Verde */

/* Estilos para el color de las etiquetas */
.label-rojo {
    color: #dc3545; /* Rojo de Bootstrap */
    font-weight: bold;
}
.label-amarillo {
    color: #ffc107; /* Amarillo/Ámbar de Bootstrap */
    font-weight: bold;
}
.label-verde {
    color: #198754; /* Verde de Bootstrap */
    font-weight: bold;
}
.label-negro {
    color: #000000; /* Negro de Bootstrap */
    font-weight: bold;
}

/* Estilos para el cambio de color del radio button (la bolita) */
/* Por defecto, si no está chequeado, no tendrá color de acento,
   pero definimos el radio button */
.radio-codigo {
    /* Opcional: ajustar tamaño del radio button */
    width: 2em;
    height: 2em;
    margin-top: 0;
    vertical-align: middle;
    /* Ajustes para centrar verticalmente con el texto */
    margin-top: -0.25em; /* Sube ligeramente para centrar mejor */
    vertical-align: middle;
    
    /* Aseguramos que la opacidad y cursor sean correctos */
    opacity: 1; 
    cursor: pointer;
}

/* 1. Radio ROJO */
#rojo:checked {
    accent-color: #dc3545; 
}
/* 2. Radio AMARILLO */
#amarillo:checked {
    /* El color amarillo es claro, quizás necesites un tono más oscuro en algunos navegadores,
       pero usaremos el de Bootstrap */
    accent-color: #ffc107; 
}
/* 3. Radio VERDE */
#verde:checked {
    accent-color: #198754;
}
/* 3. Radio VERDE */
#negro:checked {
    accent-color: #000000;
}

/* CLASES CSS para colorear las filas de la tabla (<tr>) */
/* Código 3: ROJO (Urgencia Máxima) */
.fila-rojo {
    background-color: #f8d7da; /* Rojo muy claro para el fondo */
    border-left: 5px solid #dc3545; /* Barra lateral roja fuerte */
}
.fila-rojo-historial{
    background-color: #f5c6cb; /* Rojo claro para el fondo del historial */
    border-left: 5px solid #dc3545; /* Barra lateral roja fuerte */
}

/* Código 2: AMARILLO (Urgencia) */
.fila-amarillo {
    background-color: #fff3cd; /* Amarillo/Naranja muy claro */
    border-left: 5px solid #ffc107; /* Barra lateral amarilla fuerte */
}

.fila-amarillo-historial {
    background-color: #ffe8a1; /* Amarillo/Naranja claro para el fondo del historial */
    border-left: 5px solid #ffc107; /* Barra lateral amarilla fuerte */
}   

/* Código 1: VERDE (Baja Urgencia/Programado) */
.fila-verde {
    background-color: #d1e7dd; /* Verde muy claro */
    border-left: 5px solid #198754; /* Barra lateral verde fuerte */
}

.fila-verde-historial {
    background-color: #a3cfbb; /* Verde claro para el fondo del historial */
    border-left: 5px solid #198754; /* Barra lateral verde fuerte */
}   

/* Código 4: NEGRO (Fallecimiento/Otro) */
.fila-negro {
    background-color: #e9ecef; /* Gris claro (opcional: o un negro muy claro si se prefiere) */
    border-left: 5px solid #343a40; /* Barra lateral gris oscuro/negro */
}
.fila-negro-historial{
    background-color: #e9ecef; /* Gris claro (opcional: o un negro muy claro si se prefiere) */
    border-left: 5px solid #343a40; /* Barra lateral gris oscuro/negro */
}

/* Opcional: Para asegurar que el texto sea legible en cualquier fila */
.fila-rojo, .fila-amarillo, .fila-verde, .fila-negro {
    color: #212529; /* Color de texto oscuro para buen contraste */
}

/* Nota: Los colores de código (fila-verde, etc.) deben tener !important si quieres que sobrescriban el estilo de Bootstrap */
.fila-verde, .fila-amarillo, .fila-rojo, .fila-negro {
    /* Asegúrate de que tus clases de color sean más específicas si es necesario */
}