/* public/css/style.css (versión final y ganadora) */

@keyframes flash {
  from {
    /* Usamos !important para anular temporalmente los estilos de Bootstrap */
    background-color: #ffc107 !important; /* Amarillo de Bootstrap */
    color: black !important;
    transform: scale(1.1);
  }
  to {
    /* No necesitamos !important aquí, dejamos que Bootstrap recupere el control */
    transform: scale(1);
  }
}

.badge.flash-update {
  animation: flash 0.6s ease-out;
}

/* Estilos para el carousel de tarjetas de Presión Arterial */
.bp-carousel {
    display: flex;
    overflow-x: auto; /* Habilita el scroll horizontal */
    padding-bottom: 1rem;
    gap: 1rem; /* Espacio entre tarjetas */
}

.bp-card {
    flex: 0 0 280px; /* Evita que las tarjetas se encojan y les da un ancho fijo */
    border-left-width: 5px;
}

/* Colores basados en la clasificación de Hipertensión */
.bp-normal { border-left-color: #28a745; } /* Verde */
.bp-prehypertension { border-left-color: #ffc107; } /* Amarillo */
.bp-warning { border-left-color: #fd7e14; } /* Naranja */
.bp-stage1 { border-left-color: #fd7e14; } /* Naranja */
.bp-stage2 { border-left-color: #dc3545; } /* Rojo */
.bp-low { border-left-color: #17a2b8; } /* Cian */


.bp-chart-wrapper {
    position: relative; /* Contenedor principal que tendrá las escalas */
    padding-left: 35px; /* Espacio para la escala Y */
    padding-bottom: 25px; /* Espacio para la escala X */
    margin-top: 1rem;
}

.bp-chart-canvas {
    position: relative; /* El "lienzo" donde se dibujan las zonas y el punto */
    width: 100%;
    height: 150px;
    background-color: #f8f9fa;
    border-radius: .25rem;
}

.bp-chart-zone {
    position: absolute;
    opacity: 0.6;
    border: 2px solid white;
    box-sizing: border-box;
}

.zone-stage2 { background-color: #dc3545; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.zone-stage1 { background-color: #fd7e14; top: 11.1%; left: 0; width: 85.7%; height: 88.9%; z-index: 2; }
.zone-prehypertension { background-color: #ffc107; top: 22.2%; left: 0; width: 71.4%; height: 77.8%; z-index: 3; }
.zone-normal { background-color: #28a745; top: 44.4%; left: 0; width: 57.1%; height: 55.6%; z-index: 4; }
.zone-low { background-color: #17a2b8; top: 66.7%; left: 0; width: 28.6%; height: 33.3%; z-index: 5; }

.bp-chart-point {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #000;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 6; /* ¡Siempre por encima de las zonas! */
}

/* Escalas posicionadas absolutamente RELATIVAS AL WRAPPER */
.bp-chart-scale-y {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 150px; /* Misma altura que el canvas */
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}
.bp-chart-scale-y li {
    position: absolute;
    transform: translateY(-50%);
    width: 100%;
    text-align: right;
    padding-right: 5px;
}

.bp-chart-scale-x {
    position: absolute;
    bottom: 0;
    left: 35px; /* Empieza donde empieza el canvas */
    right: 0;
    height: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}
.bp-chart-scale-x li {
    position: absolute;
    transform: translateX(-50%);
}

.ecg-card {
    flex: 0 0 280px; /* Evita que las tarjetas se encojan y les da un ancho fijo */
    border-left-width: 5px;
}

/* Colores basados en la clasificación de Hipertensión */
.ecg-normal { border-left-color: #28a745; } /* Verde */
.ecg-danger { border-left-color: #dc3545; } /* Rojo */


/* Estilos para el contenedor de sugerencias de dirección */
#sugerenciasDiv {
    position: absolute; /* Para que flote sobre el contenido */
    background-color: white;
    border: 1px solid #ced4da; /* Color de borde similar a Bootstrap */
    border-top: none; /* Sin borde superior, ya que va pegado al input */
    border-radius: 0 0 0.25rem 0.25rem; /* Bordes redondeados abajo */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    max-height: 250px; /* Evita que sea demasiado largo */
    overflow-y: auto; /* Scroll si hay muchas sugerencias */
    width: 100%; /* Ocupa el ancho del contenedor padre */
    box-sizing: border-box; /* Para que el borde no añada ancho extra */
}

/* Estilo para cada item de sugerencia */
.suggestion-item {
    padding: 10px 15px; /* Más espaciado */
    cursor: pointer;
    border-bottom: 1px solid #e9ecef; /* Separador sutil */
    font-size: 0.95rem; /* Un poco más pequeño */
    white-space: nowrap; /* Evita saltos de línea */
    overflow: hidden; /* Oculta texto largo */
    text-overflow: ellipsis; /* Añade "..." al final si es muy largo */
    transition: background-color 0.15s ease-in-out; /* Transición suave */
}

/* Eliminar borde inferior del último item */
.suggestion-item:last-child {
    border-bottom: none;
}

/* Efecto Hover: Cambia el color de fondo */
.suggestion-item:hover {
    background-color: #e9ecef; /* Un gris claro de Bootstrap */
    color: #000; /* Asegura buen contraste */
}

/* Estilo para mensajes como "Sin resultados" o "Error" */
.suggestion-item.muted {
    color: #6c757d; /* Gris de Bootstrap */
    cursor: default;
    background-color: white !important; /* Evita el hover en estos items */
}

/* Estilos del Modal de Preferencias de Usuario*/
.settings-modal-content {
    border-radius: 16px; /* Bordes muy redondeados */
    border: none;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    min-height: 500px;
}

.settings-sidebar {
    width: 260px;
    background-color: #f9f9f9; /* Gris muy suave */
    border-right: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.settings-content {
    background-color: #ffffff;
}

/* Estilo de los botones de navegación (Pills) */
.settings-sidebar .nav-pills .nav-link {
    color: #333;
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.settings-sidebar .nav-pills .nav-link:hover {
    background-color: #e9ecef;
}

.settings-sidebar .nav-pills .nav-link.active {
    background-color: #e0e0e0; /* Gris un poco más oscuro para activo */
    color: #000;
    font-weight: 600;
}

.settings-sidebar .nav-pills .nav-link i {
    color: #666;
}

/* Form inputs estilo minimalista */
.settings-content .form-control {
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #ddd;
}

.settings-content .form-control:focus {
    border-color: #10a37f; /* Color verde tipo ChatGPT o tu primario */
    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.2);
}