/* Estilo base */
body {
    background-color: #FFFFFF;  /* Fondo principal: Blanco */
    color: #333333;            /* Texto principal: Gris oscuro casi negro */
    font-family: 'Arial', sans-serif; /* Puedes usar la fuente que prefieras */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Esto asegura que tome al menos todo el alto de la ventana del navegador */
}

main {
    flex-grow: 1;
}

/* Enlaces */
a {
    color: #1A0DAB;            /* Enlaces: Azul oscuro clásico */
    text-decoration: none;    /* Elimina el subrayado por defecto */
}

a:hover, a:focus {
    color: #007BFF;            /* Al pasar el ratón o enfocar: Azul brillante */
    text-decoration: underline; /* Subrayado al pasar el ratón para indicar que es un enlace */
}

/* Resultados destacados o importantes */
.highlight {
    background-color: #FFFFE0; /* Fondo: Amarillo claro para resaltar */
    padding: 5px;              /* Espaciado interno para dar un poco de margen */
    border-radius: 5px;        /* Esquinas redondeadas para un aspecto suave */
}

/* Botones y acciones */
button {
    background-color: #007BFF; /* Fondo: Azul para botones primarios */
    color: #FFFFFF;            /* Texto: Blanco para contraste */
    padding: 10px 15px;        /* Espaciado interno para un tamaño adecuado */
    border: none;              /* Sin borde para un aspecto moderno */
    border-radius: 5px;        /* Esquinas redondeadas */
    cursor: pointer;           /* Indicar que es un elemento interactivo */
    transition: background-color 0.3s; /* Transición suave al cambiar colores */
}

button:hover, button:focus {
    background-color: #0056b3; /* Fondo más oscuro al pasar el ratón o enfocar */
}

button.secondary {
    background-color: #6C757D; /* Fondo gris para botones secundarios */
}

/* Bordes y separadores */
.separator {
    border-bottom: 1px solid #E0E0E0; /* Bordes sutiles para separar contenido */
    margin: 10px 0;                  /* Margen vertical para espacio entre separadores y contenido */
}

.card {
    margin-bottom: 20px;
}
.burbuja {
    background-color: transparent; /* Sin color de fondo */
    /*border: 2px solid #007BFF;  */   /* Borde azul celeste abrillantado tenue */
    border-radius: 3px;        /* Bordes redondeados */
    padding: 10px 15px;         /* Espaciado interior */
    margin-bottom: 10px;        /* Espacio entre burbujas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  /* Sombra ligera */
}
/* Puedes continuar agregando más estilos según tus necesidades */