* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;                               /* Convertido a fluido para adaptarse al viewport. Original: 1480px. */
    max-width: 1480px;                         /* Conserva el tamaño original máximo de 1480px para evitar expansiones desmedidas en pantallas muy grandes. */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

nav {
    width: 20.27%;                             /* Original: 300px. Referencia: body de 1480px. Operación: (300px / 1480px) * 100 = 20.27% */
    text-align: center;                
    background-color: rgb(2, 50, 14);  
    height: 700px;                             /* Se mantiene en px para asegurar la estabilidad vertical del layout y evitar colapsos visuales. */
    float: left;                       
    display: flex;                     
    flex-direction: column;            

    .container-icon {
        /*
          CÁLCULO DEL PADDING VERTICAL EN PORCENTAJE:
          - padding vertical: 13.33%. Original: 40px. Referencia: nav de 300px. Operación: (40px / 300px) * 100 = 13.33%
        */
        padding: 13.33% 0%;                     

        .container-logo {
            width: 21.33%;                     /* Original: 64px. Referencia: nav de 300px. Operación: (64px / 300px) * 100 = 21.33% */
            margin: 0 auto;            

            img {
                width: 100%;           
            }
        }

        .container-title-logo {
            margin: 0 auto;

            h3 {
                font-size: 1.5rem;
                color: white;          
                /*
                  CÁLCULO DEL PADDING VERTICAL EN PORCENTAJE:
                  - padding vertical: 6.67%. Original: 20px. Referencia: nav de 300px. Operación: (20px / 300px) * 100 = 6.67%
                */
                padding: 6.67% 0%;             
            }
        }
    }

    ul {
        /*
          PROPIEDADES DE FLEXBOX EXPLICADAS:
          - flex-grow: 1; -> Permite al contenedor crecer para ocupar todo el espacio vertical del sidebar.
          - flex-shrink: 1; -> Permite encogerse proporcionalmente.
          - flex-basis: 28.57%; -> Altura base inicial de 200px respecto a la altura vertical de nav (700px). Operación: (200px / 700px) * 100 = 28.57%
        */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 28.57%;
        display: flex;                 
        flex-direction: column;        
        justify-content: space-evenly; 
        /*
          CÁLCULO DEL PADDING EN PORCENTAJE:
          - padding: 16.67%. Original: 50px en todos los lados. Referencia: nav de 300px. Operación: (50px / 300px) * 100 = 16.67%
        */
        padding: 16.67%;                  

        .container-list {
            text-align: left;          
            list-style: none;          

            a {
                display: block;                  
                color: white;                  
                text-decoration: none;          
                /*
                  CÁLCULO DE LOS PADDINGS DEL BOTÓN EN PORCENTAJE:
                  - Relleno vertical y lateral derecho (10px): (10px / 200px) * 100 = 5.00% respecto a la caja del enlace de 200px útiles.
                  - Relleno lateral izquierdo (20px): (20px / 200px) * 100 = 10.00% respecto a la caja del enlace de 200px útiles.
                */
                padding: 5% 5% 5% 10%; 
                background-color: rgb(12, 145, 0);
                border-radius: 20px;            /* Se mantiene en px ya que los bordes redondeados no deben deformarse con el tamaño de la pantalla. */
            }            
        }
    }
}

main {
    width: 72.97%;                             /* Original: 1080px (ancho útil). Referencia: body de 1480px. Operación: (1080px / 1480px) * 100 = 72.97% */
    height: 650px;                             /* Se mantiene en px para mantener la proporción de altura exacta del nav y evitar desajustes verticales. */
    /*
      CÁLCULO DE PADDING DEL MAIN EN PORCENTAJE:
      - padding horizontal y bottom: 3.38%. Original: 50px. Referencia: body de 1480px. Operación: (50px / 1480px) * 100 = 3.38%
    */
    padding: 0px 3.38% 3.38% 3.38%;             
    margin-left: 20.27%;                       /* Original: 300px (ancho del nav). Referencia: body de 1480px. Operación: (300px / 1480px) * 100 = 20.27% */
    background-color: antiquewhite;

    .container-header {
        display: flex;                 
        justify-content: space-between;
        height: 50px;                          /* Se mantiene en px por ser una sección superior horizontal de altura de texto fija. */
    }

    .container-stadistics {
        display: flex;                 
        justify-content: space-between;
        align-items: center;           
        width: 100%;                           /* Ocupa el 100% de la zona de contenido del main (1080px / 1080px). */
        height: 150px;                         /* Se mantiene en px según las cotas verticales fijas del diseño. */
       
        .stadistic{
            /*
              CÁLCULO DEL MODELO DE CAJA ESTÁNDAR (content-box):
              - width: 18.52%; -> Original: 200px (ancho útil). Referencia: main de 1080px. Operación: (200px / 1080px) * 100 = 18.52%
              - padding horizontal: 2.31%; -> Original: 25px. Referencia: main de 1080px. Operación: (25px / 1080px) * 100 = 2.31%
              - Ancho total de la tarjeta = 18.52% + 2.31% (izq) + 2.31% (der) = 23.14% de main.
                Verificación: 23.14% de 1080px = 250px de ancho total, coincidiendo con el boceto.
            */
            width: 18.52%;
            height: 100px;                     /* Se mantiene en px de acuerdo con la cota de altura de tarjeta. */
            background-color: aliceblue;
            border-radius: 20px;               /* Se mantiene en px por ser una propiedad estética fija. */
            display: flex;              
            align-items: center;        
            padding: 0px 2.31%;                

            .container-text-stadistic{
                display: flex;          
                flex-direction: column; 
                flex-grow: 2;
            }
            
            div {
                width: 32%;                    /* Original: 64px. Referencia: ancho útil de tarjeta .stadistic de 200px. Operación: (64px / 200px) * 100 = 32% */

                img {
                    width: 100%;        
                    border-radius: 50px; 
                }
            }
        }
    }

    .container-last-updates{
        width: 100%;                           /* Ocupa el 100% de la zona de contenido de main (1080px / 1080px). */
        height: 400px;                         /* Se mantiene en px para asegurar que se encuadra con la altura total. */
        
        /* 
          Nota: En CSS, las propiedades de padding vertical expresadas en porcentaje se calculan 
          respecto al ANCHO del elemento padre contenedor (main de 1080px).
          - padding vertical: 4.63%. Original: 50px. Operación: (50px / 1080px) * 100 = 4.63%
        */
        padding: 4.63% 0%;     
        display: flex;                 
        justify-content: space-between;

        .card-info-pedidos{
            /*
              CÁLCULO DEL MODELO DE CAJA ESTÁNDAR (content-box):
              - width: 55.56%; -> Original: 600px (ancho útil). Referencia: main de 1080px. Operación: (600px / 1080px) * 100 = 55.56%
              - padding completo: 4.63%; -> Original: 50px en todos los lados. Referencia: main de 1080px. Operación: (50px / 1080px) * 100 = 4.63%
              - Ancho total = 55.56% + 4.63% (izq) + 4.63% (der) = 64.82% de main (700px respecto a 1080px). Coincide con el boceto.
            */
            width: 55.56%;
            height: 300px;                     /* Se mantiene en px por estabilidad del bloque de pedidos. */
            padding: 4.63%;               
            background-color: aliceblue;
            border-radius: 20px;        
            overflow-y: auto;           
            text-align: justify;        
        }

        .card-productos-populares{
            /*
              CÁLCULO DEL MODELO DE CAJA ESTÁNDAR (content-box):
              - width: 18.52%; -> Original: 200px (ancho útil). Referencia: main de 1080px. Operación: (200px / 1080px) * 100 = 18.52%
              - padding completo: 4.63%; -> Original: 50px en todos los lados. Referencia: main de 1080px. Operación: (50px / 1080px) * 100 = 4.63%
              - Ancho total = 18.52% + 4.63% (izq) + 4.63% (der) = 27.78% de main (300px respecto a 1080px). Coincide con el boceto.
            */
            width: 18.52%;
            height: 300px;                     /* Se mantiene en px por estabilidad del bloque de productos. */
            padding: 4.63%;               
            display: flex;              
            flex-direction: column;     
            justify-content: space-between;
            background-color: aliceblue;
            border-radius: 20px;        
            overflow-y: auto;           

            .producto-item{
                display: flex;          
                justify-content: space-around;

                .producto-imagen-contenedor{
                    flex: 0 0 25%;             /* Original: 50px de ancho de imagen. Referencia: ancho útil de tarjeta (200px). Operación: (50px / 200px) * 100 = 25% */

                    img {
                        width: 100%;    
                        border-radius: 50px;
                    }
                }

                .producto-texto{
                    flex: 0 0 75%;             /* Original: 150px de ancho de texto. Referencia: ancho útil de tarjeta (200px). Operación: (150px / 200px) * 100 = 75% */
                    text-align: justify;
                }
            }
        }
    }
}

footer {
    clear: both;                       
    color: aliceblue;                  

    /*
      CÁLCULO DEL MODELO DE CAJA ESTÁNDAR (content-box):
      - width: 93.24%; -> Original: 1380px (ancho útil). Referencia: body de 1480px. Operación: (1380px / 1480px) * 100 = 93.24%
      - padding horizontal: 3.38%; -> Original: 50px. Referencia: body de 1480px. Operación: (50px / 1480px) * 100 = 3.38%
      - padding vertical superior: 1.69%; -> Original: 25px. Referencia: body de 1480px. Operación: (25px / 1480px) * 100 = 1.69%
      - Ancho total = 93.24% + 3.38% + 3.38% = 100% de la página (1480px).
    */
    width: 93.24%;
    height: 75px;                              /* Se mantiene en px para asegurar el alto total de 100px (75px + 25px padding). */
    padding: 1.69% 3.38% 0% 3.38%;
    background-color: rgb(67, 97, 70); 
    display: flex;                     
    justify-content: space-between;    

    .container-footer-title-logo {
        /*
          EXPLICACIÓN DE PROPIEDADES FLEXBOX:
          - flex-grow: 1; y flex-shrink: 1; -> Permiten expandirse y encogerse proporcionalmente.
          - flex-basis: 33.33%; -> Original: 460px. Referencia: ancho de footer de 1380px. Operación: (460px / 1380px) * 100 = 33.33%
        */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 33.33%;

        h3 {
            font-size: 1rem;            
        }

        p {
            font-size: 0.8rem;          
        }
    }

    .container-footer-info {
        /*
          EXPLICACIÓN DE PROPIEDADES FLEXBOX:
          - flex-basis: 33.33%; -> Original: 460px. Referencia: ancho de footer de 1380px. Operación: (460px / 1380px) * 100 = 33.33%
        */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 33.33%;

        h3 {
            font-size: 1rem;
        }

        p {
            font-size: 0.8rem;
        }
    }

    .container-footer-social-media {
        /*
          EXPLICACIÓN DE PROPIEDADES FLEXBOX:
          - flex-basis: 33.33%; -> Original: 460px. Referencia: ancho de footer de 1380px. Operación: (460px / 1380px) * 100 = 33.33%
        */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 33.33%;

        .social-links {
            display: flex;             
            justify-content: space-evenly;

            .social-logo {
                /*
                  CÁLCULO DEL ANCHO DE ICONO:
                  - width: 33.33%; -> Original: 153.3px. Referencia: ancho útil de columna de 460px. Operación: (153.3px / 460px) * 100 = 33.33%
                */
                width: 33.33%;        
                display: flex;         
                justify-content: center;

                img {
                    width: 41.75%;             /* Original: 64px. Referencia: .social-logo de 153.3px. Operación: (64px / 153.3px) * 100 = 41.75% */
                    border-radius: 50px;
                }
            }
        }
    }
}