/* 
 * Responsive fixes for Stock Data component in Inversionistas page
 * 2 columnas: logo PLANI | valor de la acción
 * Consistente con el estilo de index.html
 */

/* Desktop pequeño (1025px to 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .main__hero {
        height: 250px !important;
    }
    
    .main__hero__downbar {
        top: 250px !important;
    }
    
    .main__hero_downbar__text {
        padding-left: 10% !important;
    }
    
    .main__hero__text__p-bar {
        font-size: 28px !important;
    }
    
    .main__hero__databursatil--desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .main__hero__databursatil--mobile {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: 500px !important;
        height: 150px !important;
        margin: 100px auto 40px !important;
        grid-template-columns: 2fr 3fr !important;
        grid-template-rows: 1fr !important;
        background-color: #9cdbd9 !important;
        z-index: 1 !important;
        padding: 10px !important;
    }
    
    .main__hero__databursatil__item {
        padding: 5px 10px !important;
    }
    
    .main__hero__databursatil__item--1 img {
        height: 110px !important;
    }
    
    .main__hero__databursatil__item__value {
        font-size: 28px !important;
    }
    
    .main__hero__databursatil__item__text {
        font-size: 10px !important;
    }
    
    .main__hero__databursatil__item--1::after {
        display: none !important;
    }
    
    .main__hero__databursatil__item--1 {
        border-right: 2px solid #545859;
    }
}

/* Desktop grande (1200px and above) */
@media (min-width: 1200px) {
    .main__hero__databursatil--desktop {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        width: 500px !important;
        height: 150px !important;
        right: 0 !important;
        top: calc(50% - 90px) !important;
        transform: translateY(-50%) !important;
        grid-template-columns: 2fr 3fr !important;
        grid-template-rows: 1fr !important;
        background-color: #9cdbd9 !important;
        z-index: 10 !important;
        padding: 5px !important;
        left: auto !important;
        bottom: auto !important;
    }
    
    .main__hero__databursatil--mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .main__hero__databursatil__item--1::after {
        content: '' !important;
        width: 1px !important;
        height: 80% !important;
        background: #545859 !important;
        position: absolute !important;
        right: 0 !important;
        top: 10% !important;
    }
}

/* Tablet styles (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .main__hero__databursatil--desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .main__hero__databursatil--mobile {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: 500px !important;
        height: 150px !important;
        margin: 100px auto 20px !important;
        grid-template-columns: 2fr 3fr !important;
        grid-template-rows: 1fr !important;
        background-color: #9cdbd9 !important;
        z-index: 10;
        padding: 10px !important;
    }
    
    .main__hero__databursatil__item {
        padding: 5px 10px !important;
    }
    
    .main__hero__databursatil__item--1 img {
        height: 110px !important;
    }
    
    .main__hero__databursatil__item__value {
        font-size: 28px !important;
    }
    
    .main__hero__databursatil__item__text {
        font-size: 10px !important;
    }
    
    .main__hero__databursatil__item--1::after {
        display: none !important;
    }
    
    .main__hero__databursatil__item--1 {
        border-right: 2px solid #545859;
    }
}

/* Mobile styles (768px and below) */
@media (max-width: 768px) {
    .main__hero__databursatil--desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .main__hero__databursatil--mobile {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: 85% !important;
        max-width: 400px !important;
        height: auto !important;
        margin: 100px auto 20px !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr !important;
        background-color: #9cdbd9 !important;
        z-index: 10;
        padding: 10px !important;
    }
    
    .main__hero__databursatil__item {
        padding: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .main__hero__databursatil__item--1 img {
        height: 60px !important;
        width: auto !important;
    }
    
    .main__hero__databursatil__item__value {
        font-size: 18px !important;
        margin: 5px 0 !important;
    }
    
    .main__hero__databursatil__item__text {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
    
    .main__hero__databursatil__item span {
        font-size: 10px !important;
        margin: 2px 0 !important;
    }
    
    .main__hero__databursatil__item--1::after {
        display: none !important;
    }
    
    .main__hero__databursatil__item--1 {
        border-right: 1px solid #545859;
    }
}

/* Extra small mobile (480px and below) */
@media (max-width: 480px) {
    .main__hero__databursatil {
        width: 95% !important;
        padding: 8px !important;
    }
    
    .main__hero__databursatil__item {
        padding: 3px !important;
    }
    
    .main__hero__databursatil__item--1 img {
        height: 50px !important;
    }
    
    .main__hero__databursatil__item__value {
        font-size: 16px !important;
    }
    
    .main__hero__databursatil__item__text {
        font-size: 8px !important;
    }
    
    .main__hero__databursatil__item span {
        font-size: 9px !important;
    }
}

/* Ensure hero is relative for absolute positioning */
@media (min-width: 769px) {
    .main__hero {
        position: relative;
    }
}