/* Numeración o viñetas */
.menu-list {
    list-style:decimal ;
    /* Elimina los puntos o viñetas de la lista */
    padding-left: 3rem;
    /* deja espacio para las viñetas */
    font-weight: bold;
    /* Hace el texto en negrita para destacarlo */
    font-size: 1.1rem;
    /* Ajusta el tamaño de la fuente al 110% del base */
    color: #7A2E32;
    /* Color del texto */
}

/* Cada <li> del menú: separa visualmente los ítems */
.menu-item {
    margin-bottom: 2rem;
    /* Añade espacio debajo de cada elemento para separarlos */
}

/* Estilo base de los enlaces del menú */
.menu-link {
    text-decoration: none;
    /* Quita el subrayado predeterminado de los enlaces */
    font-weight: bold;
    /* Hace el texto en negrita para destacarlo */
    font-size: 1.1rem;
    /* Ajusta el tamaño de la fuente al 110% del base */
    color: #7A2E32;
    /* Color del texto */
    cursor: pointer;
    /* Muestra una mano al pasar el puntero por encima */
}

/* Estado hover de los enlaces: animación visual al pasar el ratón */
.menu-link:hover {
    color: #00B050;
    /* Cambia a un azul más oscuro al hacer hover */
}

/* Descripción debajo de cada enlace */
.menu-desc {
    list-style-position: inside;
    /* o "outside" */
    padding-left: 2rem;
    /* Indenta solo la primera línea 2rem */
    font-style: italic;
    /* Renderiza el texto en cursiva */
    font-size: 0.75rem;
    /* Tamaño de fuente al 90% del base para diferenciarlo */
    color: #555;
    /* Color gris medio para que sea discreto */
    margin-top: 0.25rem;
    /* Espacio arriba para separar la descripción del título */
}

/* Estado hover de los enlaces: animación visual al pasar el ratón */
.menu-desc:hover {
    color: #7A2E32;
    /* Cambia a un azul más oscuro al hacer hover */
}

/*
Estilos para las tarjetas KPI con fondo de imagen y overlay de texto
Estas tarjetas contienen enlaces que llevan a las diferentes páginas de la app
*/
/* Estilo base para cada tarjeta KPI */
.menu-kpi-card-main {
    height: 275px;  /* Altura fija, puedes usar auto, 100%, o vh según diseño */
    color: white;  /* Color del texto dentro de la tarjeta */
    background-size: cover;  /* Ajusta la imagen para cubrir todo el fondo sin distorsión */
    background-position: center;  /* Centra la imagen */
    border-radius: 0px;  /* Bordes redondeados, puedes usar 0px o 50% para círculo */
    position: relative;  /* Necesario para posicionar el overlay absolutamente */
    overflow: hidden;  /* Oculta el contenido que sobresalga de los bordes */
    cursor: pointer;  /* Cambia el cursor al pasar por encima */
    /*box-shadow: 0 4px 12px rgb(0, 0, 0);   Sombra suave inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Animación suave para zoom y sombra */
}

/* Estilo al pasar el mouse por encima (hover) */
.menu-kpi-card-main:hover {
    transform: scale(1.03);  /* Zoom leve, otros valores: 1.01–1.1 */
    box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.5);  /* Sombra más fuerte y profunda */
}

/* Estilo para el texto superpuesto en la parte inferior de la card */
.menu-kpi-card-overlay {
    position: absolute;  /* Posicionamiento absoluto respecto al .kpi-card */
    bottom: 0;  /* Anclado al borde inferior */
    left: 0;  /* Alineado a la izquierda */
    width: 100%;  /* Ocupa todo el ancho de la tarjeta */
    background: #7a2e3295;  /* Fondo oscuro semi-transparente */
    padding: 0px;  /* Espaciado interior */
    text-align: center;  /* Centrado del texto */
}

/* Estilo base para los títulos y subtítulos */
.menu-kpi-card-title {
    font-size: 25px;       /* Tamaño del título */
    font-weight: bold;     /* Negrita */
    margin-bottom: 5px;    /* Espacio inferior */
}

.menu-kpi-card-subtitle {
    font-size: 12px;       /* Tamaño del subtítulo */
    opacity: 1;         /* Transparencia leve */
}