#scrollBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
#skills i {
  height: 100px;
  width: 100px;
  background-color: whitesmoke;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#skills i:hover {
  cursor: pointer;
  transform: scale(1.03);
}
#projects .col-lg-4 {
  padding: 20px;
}
#projects .card {
  border: none;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 10px auto;
  cursor: pointer;
  position: relative;
  color: white;
}
#projects .card-body {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: none;
}
#projects .card:hover .card-body {
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
}

#education .education {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: rgba(46, 223, 193, 0.5);
}
#education .education:hover {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  #home img {
    margin-bottom: 30px;
    width: 200px;
  }
  #home .col-md-8 {
    align-items: center;
    text-align: center;
    padding: 0px;
  }
  #home p {
    width: 100%;
    font-size: 18px;
  }
}
@media (max-width: 370px) {
  #home h1 {
    font-size: 25px;
  }
}
        /* Personal CSS */
        .my-custom-scrollbar {
            position: relative;
            height: 200px;
            overflow: auto;
        }
        .table-wrapper-scroll-y {
            display: block;
        }
        .ti {
            font-size: 14px;
            font-family: 'Times New Roman';
        }
        /* Additional styles here */
        /* Truncated for brevity */

        /* MODIFICADO POR: ING.GAMALIEL LUNA   */
      .my-custom-scrollbar {
        position: relative;
        height: 200px;
        overflow: auto;
        }
        .table-wrapper-scroll-y {
        display: block;
        }
        .ti {
            font-size: 14px;
            font-family: 'Times New Roman';
        }

        td.tick,
        th.tick,
        tr.tick,
        table.tick {
            border-top: 1px solid black;
            border-collapse: collapse;
            font-size: 14px;
        }

        td.description,
        th.description {
            width: 75px;
            max-width: 75px;
        }

        td.quantity,
        th.quantity {
            width: 40px;
            max-width: 40px;
            word-break: break-all;
        }

        td.price,
        th.price {
            width: 40px;
            max-width: 40px;
            word-break: break-all;
            text-align:right;
        }

        .centered {
            text-align: center;
            align-content: center;
        }
        
        .lineas {
            text-align: center;
            align-content: center;
            line-height: 15px;
        }

        .ticket {
    width: 80mm; /* Ancho fijo del ticket */
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Incluye el padding y el border en el tamaño total del div */
    margin: 0; /* Elimina el margen para evitar expansión */
    overflow: hidden; /* Evita que el contenido desborde */
}
    

        @media (max-width: 850px) {
  #principe{
    width: 100% !important;
  }
  .titulos{
    width: 90% !important;
  }

  .container-fluid{
    padding-right: 5px !important;
    margin-left: 5px !important
  }
 
}

@media (max-width: 600px) {
  #principe{
    width: 100% !important;
  }

  .titulos{
    width: 90% !important;
  }

  .container-fluid{
    padding-right: 5px !important;
    margin-left: 5px !important
  }
}

.container2 {
    width: 100%; /* Ajusta según tus necesidades */
    background-color: #1e272e;
    position: relative; /* Cambiado a relative */
    border-radius: 4rem;
    padding: 10px;
    margin-top: 10px; /* Separación opcional */
    box-sizing: border-box;
}


.search__received_burricard {
    width: calc(100% - 50px); /* Ajusta el ancho del input */
    padding: 0.5rem;
    border-radius: 2rem;
    border: 1px solid #ccc;
    outline: none;
    box-sizing: border-box;
}

/* .search__box:focus, .search__box:hover {
  background-color: #f1f2f6;
} */

.search__icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #fa983a;
    cursor: pointer;
}

.container2:hover > .search__received_burricard {
  width: 90%;
  
}

.container2:hover > .search__icon {
  background-color: #eee;
  border-radius: 10px;
  padding: 5px;
  margin-left: 5px;
}

@media (max-width: 768px) {
    .search__received_burricard {
        width: calc(100% - 40px); /* Más espacio para el input en pantallas pequeñas */
    }

    .search__icon {
        right: 10px; /* Reduce el margen para ajustarse a pantallas pequeñas */
        font-size: 1.3rem; /* Ícono más pequeño */
    }
}

@media (max-width: 480px) {
    .search__received_burricard {
        font-size: 0.9rem; /* Ajusta el tamaño del texto en teléfonos pequeños */
        padding: 0.4rem; /* Reduce el padding */
    }

    .search__icon {
        font-size: 1.2rem;
    }
}

.show {
  width: 100%;
  border: 1px solid red;
}


:root {
  --clr-blk: #000;
  --clr-bkg-clr: #cfa020;
  --clr-txt: #f9e589;
  --clr-txt1: #5c4003;
  --clr-txt-sha: #ffcc00;
  --clr-bord1: #fadc88;
  --clr-bord2: #9c7625;
  --cl-boxsha1: #fafac4;
  --cl-boxsha2: #fdd832;
  --cl-boxsha3: #f7b42f;
}

.oro {
  position: relative;
  
  padding: 10px;
  color: var(--clr-txt);
  text-decoration: none;
  text-align: center;
  vertical-align: center;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  border: none;
  border-radius: 0.375em;
  text-shadow: 0 0.063em 0.125em var(--clr-blk);
  border-top: 0.031em solid var(--clr-bord1);
  border-left: 0.031em solid var(--clr-bord2);
  border-right: 0.031em solid var(--clr-bord2);
  border-bottom: 0.031em solid var(--clr-bord2);
  /*   outline-color: transparent; */
  overflow: hidden;
  z-index: 1;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 7.5px rgba(255, 223, 0, 0.5), 
              0 0 15px rgba(255, 223, 0, 0.6),
              0 0 22.5px rgba(255, 223, 0, 0.7), 
              0 0 30px rgba(255, 223, 0, 0.8),
              0 0 32.5px rgba(255, 223, 0, 0.9); /* Sombra neón dorada */
}

.oro .waves {
  position: absolute;
  width: 100%;
  /* height: 6.250em;
  top: -3.75em; */
  height: 200px;
  top: -60px;
  left: 0;
  background-color: var(--clr-bkg-clr);
  box-shadow: inset 0 0 3.125em rgba(0, 0, 0, 0.5);
  z-index: -1;
  transition: 0.5s;
  
}

.oro .waves::after,
.oro .waves::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.oro .waves::before {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 5s linear infinite;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.oro .waves::after {
  border-radius: 40%;
  background: rgba(20, 20, 20, 0.5);
  animation: animate 10s linear infinite;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.oro:hover,
.oro:focus,
.oro:active {
  
  border: 0.5px solid var(--clr-bord1);
  
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

.bg-gradient-success{
    background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-info {
    background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}

.hilight {
    border: 2px solid red;
    background-color: #ffe6e6;
} 









/*  Boton para cerrar sesion  */

    .BtnLogout {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition-duration: .3s;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
        background-color: rgb(255, 65, 65);
      }
      
      /* plus sign */
      .signLogout {
        width: 100%;
        transition-duration: .3s;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .signLogout svg {
        width: 17px;
      }
      
      .signLogout svg path {
        fill: white;
      }
      /* text */
      .textLogout {
        position: absolute;
        right: 0%;
        width: 0%;
        opacity: 0;
        color: white;
        font-size: 1.2em;
        font-weight: 600;
        white-space: nowrap;
        display: flex;
        align-items: center;
        transition-duration: .3s;
      }
      /* hover effect on button width */
      .BtnLogout:hover {
        width: 125px;
        border-radius: 40px;
        transition-duration: .3s;
      }
      
      .BtnLogout:hover .signLogout {
        width: 30%;
        transition-duration: .3s;
        padding-left: 20px;
      }
      /* hover effect button's text */
      .BtnLogout:hover .textLogout {
        opacity: 1;
        width: 70%;
        font-size: small;
        transition-duration: .3s;
        padding-right: 10px;
      }
      /* button click effect*/
      .BtnLogout:active {
        transform: translate(2px ,2px);
      }







main {
            flex: 1;
        }


        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }