:root {
    --color-background: #130e30;
    --color-surface: #130e30;
    --color-surface-dim: #130e30;
    --color-surface-container-lowest: #0e082b;
    --color-surface-container-low: #1b1739;
    --color-surface-container: #201b3d;
    --color-surface-container-high: #2a2548;
    --color-surface-container-highest: #353053;
    --color-surface-bright: #3a3558;
    --color-on-surface: #e5deff;
    --color-on-surface-variant: #e5bcc4;
    --color-primary: #ffb1c3;
    --color-primary-container: #ff4b89;
    --color-on-primary: #66002c;
    --color-secondary: #a5e7ff;
    --color-secondary-container: #00d2ff;
    --color-on-secondary: #003543;
    --color-tertiary: #f1c100;
    --color-on-tertiary: #3d2f00;
    --color-tertiary-container: #d0a600;
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-display: "Syne", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-title: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
}
@font-face {
  font-family: 'textos';
  src: url('fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'titulos';
  src: url('fonts/Gilroy-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body, html{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    color: var(--color-on-surface);
    font-family: 'textos', sans-serif;
}
span{
    font-family: 'textos', sans-serif;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'titulos', sans-serif;
    width: 100%;
}
a {
    text-decoration: none;
}
& form{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    
    & label{

        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;

    }

    & h1,
    & h2,
    & h3,
    & p {
            width: 100%;
        }

    & input[type=text],
    & input[type=email]{
        width: 100%;
        height: 30px;

    }
    & input[type=number],
    & input[type=date],
    & input[type=number],
    & input[type=submit],
    & select{
        width: 100%;
        height: 30px;

    }
    & input[type=submit]{
        margin:100px ;
        border-radius: 5px;
        height: 30px;
        background: var(--color-tertiary);
        border: solid 1px var(--color-tertiary-container);
        color:#eef6ff;

    }

    & textarea{
        width: 100%;
        height: 200px;
        border-radius: 10px;

    } 

}
& table , tr , td,th {
    border-collapse: collapse;                   
}
tr:nth-child(even){background-color:var(--color-surface-bright);}
.contenedor{ 
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: var(--color-background);
    align-items: start;
}
header{
    width: 100%;
    height: 70px;
    justify-content: space-between;
    position: fixed;
    display: flex;
    align-items: center;
    background: var(--color-on-secondary);
    z-index: 3;
    
    
    & .icono{
        display: flex;
        width: 10%;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        

        & a{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            color: var(--color-tertiary);
            margin: 5px;
            padding: 5px;

            & img{
                width: 40px ;
                padding: 5px;
                margin: 5px;
            }
            & samp {
                width:100%;
                text-align: center;
                color: var(--color-on-surface-variant);
            }
        }
       
    }
    & .enlaces{
        display: flex;
        width: 90%;
        justify-content: space-around;
        align-items: center;
        
        & a{
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--color-tertiary);
            margin: 5px;
            padding: 5px;

            
        }
    }
}
main {
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    width: 100%;
    min-height: 80%;

    & div{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    & .baner{
        display: flex;
        flex-wrap: wrap;
        height: 600px;
        background: var(--color-surface);
        background-image: url(../img/baner.png); 
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover; 
        align-content: space-between;
        position: relative;
    
        & .compuestosbaner{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;   
            
            & img{
                width: 10px;
            }
           
            & canvas{
                width: 100%;
                height: 100%;
                display: flex;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                
            }
        }

        & .datosbaner{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            & span {
                width: 150px;
                background: var(--color-on-surface);
                color: var(--color-surface);
                padding: 5px;
                margin: 5px;
                border-radius: 3px;
                text-align: center;
            }

        }
        .diasresponsive{
            display:none;
            background: rgba(0, 0, 0, 0.8);
            & a{
                background:var(--color-on-secondary); 
                width:100%;
                padding:10px;
                margin: 2px;
                display: flex;
                flex-wrap: wrap;
                border-radius: 10px;
                position: relative;
                color:rgb(255,255,255);

                & span {
                    width: 100%;
                    border-radius: 3px;
                }
                .dia{
                    font-size: 15px;
                    color:var(--color-on-surface-variant);
                }
                .num{
                    font-size: 25px;
                    color:var(--color-on-surface);
                }
                .mes{
                    font-size: 10px;
                    color: var(--color-primary);
                }
                .hoy{
                    width: 30px;
                    font-size: 10px;
                    padding: 5px;
                    margin: 5px;
                    border-radius: 3px;
                    background: var(--color-secondary-container);
                    color: var(--color-primary-container);
                    position: absolute;
                    top: -15px;
                    right: 0px;
                    text-align: center;
                    display: none;
                    z-index: 2;
                }
            }
        }
        & .infobaner{  
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(0, 0, 0, 0.8);
            
            & article {
                display: flex;
                flex-wrap: wrap;
                width: 250px;
                color: var(--color-surface);
                padding: 5px;
                margin: 5px;
                border-radius: 3px;
                font-size: 12px;

                & span{
                    width:100%;
                }

                & .t1{
                    color: var(--color-secondary-container);
                    font-family: var(--font-family-base);
                }
                & .nom{
                    color: var(--color-on-surface);
                    font-family: var();
                }
                & .autor{
                    color: var(--color-primary);
                    font-family: var();
                    & a{
                        color: var(--color-tertiary);
                    }
                }
            }
        }
    }
    & .fechas{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background: var(--color-surface-container-low);

        & .infofechas{
            width: 95%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            & span {
                width: 150px;
                background: var(--color-on-surface);
                color: var(--color-surface);
                padding: 5px;
                margin: 5px;
                border-radius: 3px;
                text-align: center;
            }
        }
        & .dias{
            width: 90%;
            display: flex;
            justify-content:start;
            align-items: center;

            & a{
                background:var(--color-on-secondary); 
                width:20%;
                padding:10px;
                margin: 2px;
                display: flex;
                flex-wrap: wrap;
                border-radius: 10px;
                position: relative;

                & span {
                    width: 100%;
                    border-radius: 3px;
                }
                .dia{
                    font-size: 15px;
                    color:var(--color-on-surface-variant);
                }
                .num{
                    font-size: 25px;
                    color:var(--color-on-surface);
                }
                .mes{
                    font-size: 10px;
                    color: var(--color-primary);
                }
                .hoy{
                    width: 30px;
                    font-size: 10px;
                    padding: 5px;
                    margin: 5px;
                    border-radius: 3px;
                    background: var(--color-secondary-container);
                    color: var(--color-primary-container);
                    position: absolute;
                    top: -15px;
                    right: 0px;
                    text-align: center;
                    display: none;
                    z-index: 2;
                }
            }
        }
        & .btncronograma{
                width: 90%;
                height: 70px;
                text-align: center;
                display: none;
                justify-content: start;
                align-items: center;
                background: var(--color-surface-container-low);

                & a {
                    width:15%;
                    height: 50px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    background: var(--color-primary);
                    margin: 5px;
                    padding: 5px;
                    border-radius: 10px;

                    & img {
                        height: 70px; 
                    }
                    & span {
                        width: 100%;
                        color: var(--color-on-tertiary);
                    }  
                }
        }
    }
    & .Cronograma{
            width: 100%; 
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            & h1{
               width: 100%;  
               text-align: center;
            }

            & .imperdible{
                width: 90%;
                height: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                

                & img {
                        height: 300px; 
                }
            }
            & .vistatalleres{
                display: flex;
                width: 70%;
                justify-content: center;
                flex-wrap: wrap;
                padding: 10px;
                margin: 10px;
                border-radius: 10px;
                background:var(--color-on-surface) ;
                color: var(--color-on-primary);

                & .targetavistataller{
                    border-top: solid 1px rgb(168, 163, 157);
                    display: flex;
                    width: 80%;
                    min-height:50px;
                    flex-wrap: wrap;
                    padding: 5px;
                    margin: 5px;

                    & .fechataller{
                        width: 20%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: start;
                        justify-content: center;
                        padding: 5px;
                        margin: 5px;
                          
                            & .diataller{
                                width: 100%;
                                font-size: 20px;

                            }
                           
                            & .mestaller{
                                width: 100%;
                            } 
                    }
                    & .inforcompletaller{
                       
                        width: 70%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        padding: 5px;
                        margin: 5px;
                        align-items: center;

                        & .nomtaller{
                            width: 100%;
                            font-size: 17px;

                        }
                        &  samp{
                                    width: 100%;
                        }
                        & span{
                                width: 100%;
                        }
                    }
                
                }
            }
           
                 
    }

    & .vistacronograma{
            width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            & table{
                    width:100% ;   
            }
            & tr{
                min-height: 50px;
            } 
            & .horatd{
                width: 50px;
                
            }
            & td{
                    width: 200px;
                    
                

                & .num{
                        font-size: 15px;
                        color:var(--color-on-surface);
                        justify-content: center;
                        text-align: center;
                        width: 50px;
                    }
                & .enlacetd {
                        display: flex;
                        flex-wrap: wrap;
                        background: var(--color-on-secondary);
                        padding: 5px;
                        margin: 5px;
                        border-radius: 10px;

                        & .evento{
                            width:100%;
                            display: flex;
                            justify-content: space-between;
                            color: var(--color-on-surface);
                            border-radius: 5px;
                            
                            & .nomeve{
                                    padding: 5px;
                                    margin: 5px;
                                    background: var(--color-tertiary-container);
                                        border-radius: 5px;
                            }
                            & .ico {
                                    padding: 5px;
                                    margin: 5px;
                                        border-radius: 5px;
                            }
                        }
                        & .artista{
                            width:100%;
                            display: none;
                            justify-content: space-between;
                            color: var(--color-primary); 
                            padding: 2px;
                            margin: 2px;
                        }
                        & .zona{
                            width:100%;
                            display: none;
                            justify-content: space-between;
                            color: var(--color-primary);
                            padding: 2px;
                            margin: 2px;
                        }
                        & .aforo{
                            width:100%;
                            display: flex;
                            justify-content: space-between;
                            color: var(--color-primary);
                            padding: 2px;
                            margin: 2px;

                            & a {
                                width:auto;
                                padding: 2px;
                                margin: 2px;
                                background: var(--color-secondary-container);
                            }

                            
                        }
                        
                    } 
                    & .conbtn{
                        width: 100%;
                        height: 70px;
                        display: flex;
                        justify-content: end;
                        align-items: center;

                        & .btnvermas{
                            width: 50px;
                            height: 50px;
                            font-size: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: var(--color-primary-container);
                            position: relative;

                                & b {
                                        
                                        width: 20px;
                                        font-size: 18px;
                                        padding: 5px;
                                        margin: 5px;
                                        border-radius: 3px;
                                        background: var(--color-secondary-container);
                                        color: var(--color-primary-container);
                                        position: absolute;
                                        top: -20px;
                                        right: -20px;
                                        text-align: center;
                                        z-index: 1;
                                }

                        }
                    }
               
            }
            & th { 
                width:50px ;
                height: 100px;
                        
                & article {
                    width:100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    & img {
                        height: 70px; 
                    }
                    & span {
                        width: 100%;
                    }  
                }
                    
            }



        .aviso {

                padding: 16px 24px;
                border-radius: 8px;
                font-size: 16px;
                text-align: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                max-width: 400px;

                 & p {
                        margin: 0;
                    }

                 & h3 {

                        margin: 0 0 8px;
                        font-size: 18px;

                    }

        }

        .corre {

            background-color: #e6f7ee;         /* Verde suave */
            color: #107c41;                    /* Verde principal */
            border: 1px solid #b5e0c1;

        }

        .nega {

            background-color: #ffb26aff;         /* Verde suave */
            color: #7c4d10ff;                  /* Verde principal */
            border: 1px solid #f54a07ff;

        }
    }
    

}

    & .tablaasis{
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100px;
        background: var(--color-primary);

        & samp{
            display: flex;
            justify-content: center;
            width: 100%;
            color: var(--color-on-primary);

        }
    }

 footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width:100% ;
    height: 10%;
    background: var(--color-background);

    & p{
        width:70% ;
        text-align: center;
    }
 }   

@media screen and (max-width: 863px)  {
        header{
        
            
        }
        main {
        

            & div{
                width: 100%;
            }
            & .baner{
                height: 800px;
                background-image: url(../img/banerresponsive3.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                & .compuestosbaner{
                    
                    
                    & img{
                        width: 10px;
                    }
                
                    & canvas{
                    
                        
                    }
                }
                .diasresponsive{
                    width: 100%;
                    display:flex;
                    flex-wrap: wrap;
                    background: rgba(0, 0, 0, 0.8);
                    & a{
                        background:#003543c4; 
                        width:60%;
                        padding:10px;
                        margin: 2px;
                        display: flex;
                        flex-wrap: wrap;
                        border-radius: 10px;
                        position: relative;

                        & span {
                            width: 100%;
                            border-radius: 3px;
                        }
                        .dia{
                            font-size: 15px;
                            color:var(--color-on-surface-variant);
                        }
                        .num{
                            font-size: 25px;
                            color:var(--color-on-surface);
                        }
                        .mes{
                            font-size: 10px;
                            color: var(--color-primary);
                        }
                        .vereven{
                             width:100%;
                             text-align: center;
                        }
                        .hoyrespon{
                            width: 30px;
                            font-size: 10px;
                            padding: 5px;
                            margin: 5px;
                            border-radius: 3px;
                            background: var(--color-secondary-container);
                            color: var(--color-primary-container);
                            position: absolute;
                            top: -15px;
                            right: 0px;
                            text-align: center;
                            display: none;
                            z-index: 2;
                        }
                    }
                }
                & .datosbaner{
                    
                    
                    & span {
                    
                    }

                }
                & .infobaner{  
                    
                    
                    & article {
                        

                        & .t1{
                        
                        }
                        & .nom{
                        
                        }
                        & .autor{
                        
                            & a{
                            
                            }
                        }
                    }
                }
            }
            & .fechas{
                

                & .infofechas{
                
                    
                    & span {
                    
                    }
                }
                & .dias{
                    display: none;
                    flex-wrap: wrap;
                        & a{
                            width: 15%;
                            & span {
                                width: 100%;
                                border-radius: 3px;
                            }
                            .dia{
                                font-size: 10px;
                                
                            }
                            .num{
                                font-size: 15px;
                                color:var(--color-on-surface);
                            }
                            .mes{
                                font-size: 7px;
                                color: var(--color-primary);
                            }
                            .hoy{
                            
                            }
                        }
                    }
          

        }
         & .btncronograma{
                width: 90%;
                font-size: 10px;

                & a {
                    

                    & img {
                       
                    }
                    & span {
                        
                    }  
                }
        }
         & .Cronograma{
           

            & h1{
            
            }

            & .imperdible{
                height: 200px;
                flex-wrap: wrap;
                

                & img {
                        height: 150px; 
                }
            }
            & .vistatalleres{
                display: flex;
                width: 90%;
                justify-content: center;
                flex-wrap: wrap;
                padding: 5px;
                margin: 5px;
                border-radius:5px;
                

                & .targetavistataller{
                    
                    width: 100%;
                    min-height:50px;
                    

                    & .fechataller{
                        width: 100%;
                        
                            & .diataller{
                                width: 100%;
                                font-size: 12px;

                            }
                           
                            & .mestaller{
                                width: 100%;
                            } 
                    }
                    & .inforcompletaller{
                       
                        width: 100%;
                        

                        & .nomtaller{
                            width: 100%;
                            font-size: 15px;

                        }
                        &  samp{
                                    width: 100%;
                        }
                        & span{
                                width: 100%;
                        }
                    }
                
                }
            }
           
                 
    }
    }
}