﻿/** Estilo header MenuSeleccion **/

/* 12px móvil → 14px ≥576px */
.text-12-14 {
    font-size: 0.75rem; /* 12px */
}

@media (min-width: 576px) {
    .text-12-14 {
        font-size: 0.875rem; /* 14px */
    }
}

/* 14px móvil → 16px ≥576px */
.text-14-16 {
    font-size: 0.875rem; /* 14px */
}

@media (min-width: 576px) {
    .text-14-16 {
        font-size: 1rem; /* 16px */
    }
}

/* 20px móvil → 30px ≥576px */
.text-20-30 {
    font-size: 1.25rem; /* 20px */
}

@media (min-width: 576px) {
    .text-20-30 {
        font-size: 1.875rem; /* 30px */
    }
}

/* 16px móvil → 18px ≥576px */
.text-16-18 {
    font-size: 1rem; /* 16px */
}

@media (min-width: 576px) {
    .text-16-18 {
        font-size: 1.125rem; /* 18px */
    }
}

/* Hover de las cards */
.card-hover-sm {
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (min-width: 576px) {
    .card-hover-sm:hover {
        transform: scale(1.01);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
    }
}

/* Hover del botón de la casita o volver atras */
.back-btn {
    background-color: rgba(0, 0, 0, 0.05);
}

@media (min-width: 576px) {
    .back-btn:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
}


/** Estilo header Información Explotación **/
.bg-verde-personalizado {
    background-color: #28af60;
}

.bg-gris-suave {
    background-color: #ebeced;
}

/* Estilos para el tamaño de los iconos */
.icono-aplicacion {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

.icono-aplicacion-30 {
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
}

/* Estilos de Index */
.info-badge {
    transition: all 0.2s ease;
}

    .info-badge:hover {
        background-color: #7aaaf3 !important;
        color: white !important;
    }

/* Estilos menu lateral - hamburguesa */
.nav-link.active {
    background-color: var(--bs-primary);
    color: white !important;
}

.nav-link:hover:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}
