@charset "utf-8";
/* CSS Document */

/* 1. Estilo base de la palabra botánica */
.glosario {
    color: #2e7d32; /* Tu color verde */
    cursor: help; /* Cambia el cursor a un icono de ayuda */
    position: relative; /* Crucial para que el bocadillo sepa dónde anclarse */
    border-bottom: 1px dotted #2e7d32; /* Subrayado sutil opcional */
    transition: color 0.3s ease;
}

/* 2. Color azul al pasar el ratón (o al pulsar en móvil) */
.glosario:hover,
.glosario.activo {
    color: #1565c0; /* Tu color azul */
    border-bottom-color: #1565c0;
}

/* 3. Diseño del bocadillo amarillo */
.glosario::after {
    content: attr(data-definicion); /* ¡Extrae el texto directamente del HTML! */
    position: absolute;
    bottom: 130%; /* Posicionado justo encima de la palabra */
    left: 50%;
    transform: translateX(-50%); /* Centrado perfectamente */
    
    /* Estética del bocadillo */
    background-color: #fff9c4; /* Amarillo claro */
    color: #333;
    padding: 6px 12px;
    border: 1px solid #d4c15c;
    border-radius: 4px;
    font-size: 14px;
	text-align: left !important;/* Obliga al texto a alinearse a la izquierda, clave para la lectura */
    line-height: 1.4;     /* Añade un poco de espacio entre las líneas para que "respiren" */
    padding: 8px 12px;
    font-family: Arial, sans-serif;
	 font-weight: normal;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    /* ULtima propuesta 
	font-size: 14px;      
    text-align: left;    
    line-height: 1.4;    
    padding: 8px 12px;   
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: normal;  /* Evita que herede negritas sin querer */
    /* Tamaño y comportamiento del texto */
   
    /* REEMPLAZA LAS MEDIDAS POR ESTAS: */
    width: max-content; /* Obliga al bocadillo a estirarse a lo ancho del texto */
	max-width: min(600px, 90vw);  /* Le pone un límite máximo para que no ocupe toda la pantalla */
    white-space: normal; /* Asegura que el texto baje de línea al chocar con el límite */
       /* min-width: 150px;
    max-width: 250px; */
    text-align: center;
    z-index: 100;
    
    /* Oculto por defecto */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Evita que el ratón interactúe con el bocadillo */
}

/* 4. Mostrar el bocadillo al pasar el ratón o tocar */
.glosario:hover::after,
.glosario.activo::after {
    visibility: visible;
    opacity: 1;
}
/* ============================================================== */
/* ADAPTACIÓN PARA MÓVILES (Pantallas de menos de 768px de ancho) */
/* ============================================================== */

@media (max-width: 768px) {
    
    /* 1. Ocultamos el "triangulito" amarillo porque en el móvil el bocadillo estará desvinculado de la palabra */
    .glosario::before {
        display: none !important; 
    }

    /* 2. Reposicionamos el bocadillo principal */
    .glosario::after {
        /* Lo fijamos a la pantalla del móvil, sin importar dónde esté la palabra */
        position: fixed !important;
        
        /* Lo centramos horizontalmente en la pantalla */
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Lo colocamos en la parte baja de la pantalla (muy cómodo para leer en el móvil) */
        bottom: 10% !important; 
        top: auto !important; /* Anula cualquier posición 'top' que tuviera en el ordenador */
        
        /* Ajustamos el tamaño para que ocupe casi todo el ancho, pero con margen */
        width: 90vw !important;
        max-width: 400px !important;
        
        /* Opcional: Un poco más de sombra para que destaque como una ventana flotante */
        box-shadow: 0px 8px 16px rgba(0,0,0,0.3) !important;
    }
}