body {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   min-height: 100vh;
   font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  a {
    color: #9a1856;
    font-weight: bold;
  }

  /* Estilos para la tabla de agenda */
  table {
     width: 100%; /* La tabla ocupará el ancho completo del contenedor */
     max-width: 100%;
     border-collapse: separate;
  }

  table td{
    font-size: 1.2rem!important;
  }

  table td span{
    font-size: 1rem!important;
  }
  
  table tr:nth-child(even) th {
     color: #d77997;
     font-weight: normal;
  }

  table tr th {
     color: #e21e5d;
     font-weight: normal;
  }
  
  table th, table td {
     padding: 0.5rem 1rem;
  }
  
  table th {
     font-weight: normal;
     /*border-top: thin dotted #ccc;*/
  }
  
  table td {
     color: #f9fafb;
     font-size: 0.85rem;
     font-weight: bold;
     line-height: 1.4;
     /*border-radius: 0.2rem;*/
     transition: opacity 0.3s ease;
  }
  
  table td > span {
     font-size: 0.8em;
     font-weight: normal;
     display: block;
     width: 100%;
  }

  /* Estilos para la agenda */
  .text-center {
    text-align: center;
  }

  .speaker {
    color: #e21e5d;
    font-weight: 300;
    font-size: 0.75rem;
  }

  .stage {
    background-color: none;
    color: #9a1856;
    font-size: 1rem !important;
    font-weight: bold;
  }

  .stage-break {
    background-color: #ea5932;
    color: #ffffff;
    font-size: 1rem !important;
    font-weight: bold;
  }

  .stage_none {
    background-color: none;
    font-size: 1rem !important;
    font-weight: bold;
  }

  .platinum {
    font-size: 1rem !important;
    color: #9a1856;
    background-color: #ffffff;
  }

  .gold {
    font-size: 1rem !important;
    color: #;
    background-color: #ffffff;
  }

  

  .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    background-color: #e21e5d;
    color: #fff;
    font-weight: bold;
  }
  
  .nav-center{
    display: flex;
    justify-content: center;
  }


  .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border:none;
  }
  
  .nav-tabs{
    border: none;
    padding-bottom: 0.5rem;
  }

  .nav-tabs>li>a {
      border-radius: 4px;
  }

  .nav-tabs>li{
    margin-bottom:none;
  }

  .nav-tabs>li>a{
    border: none;
  }

  .nav-tabs>li>a:hover{
    background-color: rgb(226, 30, 93);
    color: #fff;
  }

  /* Estilos para la imagen del encabezado */
  .header-image {
    width: 100%; /* La imagen ocupará el ancho completo del contenedor */
    height: auto; /* Se ajustará automáticamente la altura para mantener la proporción */
    max-width: 100%; /* Para asegurarse de que la imagen no supere el ancho del contenedor */
  }

  /* Estilos para las celdas de la tabla (opcional) */
  .responsive-table td, .responsive-table th {
    padding: 10px; /* Ajusta el espaciado interior de las celdas según sea necesario */
    border: 1px solid #ccc; /* Agrega un borde a las celdas para mayor claridad */
  }

  .horario {
    font-size: 1.3rem !important;
    font-weight: bold;
    color: #ffffff;
    background-color: #f1981e;
    border-right: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
  }

  .titulo {
    font-size: 1.3rem !important;
    color:  #ffffff;
    background-color: #9a1856;
    text-align: center;
  }

  .horas {
    color: #e21e5d !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-align: center;
  }

  .escenario{
    font-size: 1.3rem !important;
    color:  #ffffff;
  }

  /* Estilos para el menu */
  #burger-menu {
    background-color: #000;
    border-radius: 50%;
    padding: 5px 5px 5px 5px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    margin-left: 30px;
    overflow: visible;
    position: absolute;
    z-index:2;
  }

  #burger-menu span,
  #burger-menu span:before,
  #burger-menu span:after {
    background: #9a1856;
    display: block;
    height: 4px;
    opacity: 1;
    position: absolute;
    transition: 0.3s ease-in-out;
  }
  #burger-menu span:before,
  #burger-menu span:after {
    content: "";
  }
  #burger-menu span {
    right: 0px;
    top: 13px;
    width: 27px;
  }
  #burger-menu span:before {
    left: 0px;
    top: -10px;
    width: 16px;
  }
  #burger-menu span:after {
    left: 0px;
    top: 10px;
    width: 20px;
  }

  #burger-menu.close span {
    transform: rotate(-45deg);
    top: 13px;
    width: 27px;
  }
  #burger-menu.close span:before {
    top: 0px;
    transform: rotate(90deg);
    width: 27px;
  }
  #burger-menu.close span:after {
    top: 0px;
    left:0;
    transform: rotate(90deg);
    opacity:0;
    width:0;
  }

  #menu{
    z-index:1;
    min-width:57%;
    min-height:100%;
    position: fixed;
    top:0;
    height:0;
    visibility: hidden;
    opacity: 0;
    text-align:center;
    padding-top:20px;
    transition: all 0.3s ease-in-out;
    
  }

  #menu.overlay{
    visibility: visible;
    opacity: 1;
    padding-top:100px;
    background:rgba(0,0,0,0.5);
  }

  #menu li{
    list-style:none;
  }
  #menu a{
    color:#fff;
    display:block;
    font-size: 32px;
    margin-bottom:30px;
    text-decoration:none;
  }


  /* Carrusel Patrocinadores */

  body .logo-grid {
     display: grid;
     grid-template-columns: 180px 180px 180px 180px;
     grid-template-rows: 100px;
  }
   body .logo-grid .column img {
     width: 100%;
  }
   body .logo-grid .column .grid-logo-wrapper {
     position: relative;
  }
   body .logo-grid .column .grid-logo-wrapper .grid-logo {
     position: absolute;
     top: 20px;
     left: 30px;
     width: 80%;
     transform: translateY(-30px);
     transition: all 0.3s ease-in-out;
     visibility: hidden;
     opacity: 0;
  }
   body .logo-grid .column .grid-logo-wrapper .grid-logo.active {
     transform: translateY(0px);
     visibility: visible;
     opacity: 1;
  }

  @media screen and (max-width: 480px) {

  body {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   min-height: 100vh;
   font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

    body .logo-grid {
     display: grid;
     grid-template-columns: 100px 100px 100px 100px;
     grid-template-rows: 70px;
    }
  }