/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/


/* 
    Created on : Dec 29, 2015, 12:50:08 PM
    Author     : ESOP>
*/


/*.form-group.required .control-label:after { 
    content:"*";
    color:red;
}*/

label.required:before {
    content: "* ";
    color: red;
}

legend.required:before {
    content: "* ";
    color: red;
}

.text-bold {
    font-weight: bold;
}

.text-black {
    color: #333;
}

.text-white {
    color: #FFF;
}

.text-dark-gray {
    color: #555;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}

#loading-indicator {
    position: fixed;
    left: 50%;
    top: 50%;
}

.zoom_in_image {
    cursor: zoom-in;
}

.label-purple {
    background-color: #8f5db7;
}

.label-purple[href]:hover,
.label-purple[href]:focus {
    background-color: #663399;
}

.label-brown {
    background-color: #604f42;
}

.label-brown[href]:hover,
.label-brown[href]:focus {
    background-color: #4f3c2e;
}

.label-black {
    background-color: #070604;
}

.label-black[href]:hover,
.label-black[href]:focus {
    background-color: #000000;
}

.label-yellow {
    background-color: #ffd700;
    color: #000000;
}

.label-yellow[href]:hover,
.label-yellow[href]:focus {
    background-color: #e5c100;
}

.no-decoration:hover {
    text-decoration: none;
}

.margin-top {
    margin-top: 5px;
}

.margin-bottom {
    margin-bottom: 5px;
}

.btn-rating {
    color: #fff;
    background-color: #ffd700;
    border-color: #eea236;
}

.btn-rating:hover,
.btn-rating:focus,
.btn-rating:active,
.btn-rating.active,
.open .dropdown-toggle.btn-rating {
    color: #fff;
    background-color: #ffd700;
    border-color: #d58512;
}

.btn-rating:active,
.btn-rating.active,
.open .dropdown-toggle.btn-rating {
    background-image: none;
}

.btn-rating.disabled,
.btn-rating[disabled],
fieldset[disabled] .btn-rating,
.btn-rating.disabled:hover,
.btn-rating[disabled]:hover,
fieldset[disabled] .btn-rating:hover,
.btn-rating.disabled:focus,
.btn-rating[disabled]:focus,
fieldset[disabled] .btn-rating:focus,
.btn-rating.disabled:active,
.btn-rating[disabled]:active,
fieldset[disabled] .btn-rating:active,
.btn-rating.disabled.active,
.btn-rating[disabled].active,
fieldset[disabled] .btn-rating.active {
    background-color: #ffd700;
    border-color: #eea236;
}

.btn-rating .badge {
    color: #f0ad4e;
    background-color: #fff;
}

.btn-rating-border {
    padding: 5px 7px;
}

.bg-modal {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.right-block {
    float: right;
}

.btn-white-shadow {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.loading-input {
    background: url('../images/ajax-loader.gif') no-repeat right center;
    background-color: white;
}

.color-blue {
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
}

/*.table-header-esop-list {
    color: #FFF;
    background-color: #003399;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
}

.table-content {
    border-bottom: 1px solid #999;
    margin-left: 2px;
    margin-right: 2px;
}

.table-content div {
    margin-bottom: 3px;
    margin-top: 3px;
    display: table-cell;
    vertical-align: middle;
    min-height: 20px;
}*/

.add-product {
    background-color: #003399;
    margin-left: 2px;
    margin-right: 2px;
    padding-bottom: 10px;
    padding-top: 5px;
    color: #FFF;
}

.add-product input {
    color: #000;
}

.add-product select {
    color: #000;
}

.document-header {
    font-size: 1.2em;
}

/* este codigo remplaza al original de bootstrap */
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: .375rem;
    font-size: 13px;
    vertical-align: middle;
}

/* este codigo remplaza al original de bootstrap */
.table-sm>thead>tr>th,
.table-sm>tbody>tr>th,
.table-sm>tfoot>tr>th,
.table-sm>thead>tr>td,
.table-sm>tbody>tr>td,
.table-sm>tfoot>tr>td {
    padding: .19rem;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;    
    font-size: 12px;
}

.table-hover tbody tr:hover, 
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th,
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th,
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th,
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  color: #212529;
  background-color: rgba(0,0,0,.15);
}

/*codigo para evento hover en menu superior derecho de empleado */

li:hover>ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100%;
    margin-top: 6px;
}


/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}


/*codigo para evento hover en menu superior derecho empleado*/


/* nuevo codigo */

.flotante{
    font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 20px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #5CB85C; /* Color de fondo */
	padding: 10px 20px; /* Relleno del boton */
	position: fixed;
	bottom: 40px;
	left: 20px;
	transition: all 300ms ease 0ms;
	z-index: 99;
  }

  @media only screen and (max-width: 600px) {
    .flotante {
       font-size: 14px;
       padding: 12px 20px;
       bottom: 20px;
       right: 20px;
   }
} 

.float{
    text-align: justify;
    font-size: 20px; /* Cambiar el tamaño de la tipografia */
	padding: 10px 20px; /* Relleno del boton */
	position: fixed;
	bottom: 40px;
	left: 20px;
	transition: all 300ms ease 0ms;
	z-index: 99;
  }

  @media only screen and (max-width: 600px) {
    .float {
       font-size: 20px;
       padding: 12px 20px;
       bottom: 20px;
       right: 20px;
   }
}

/** animacion cumpleaños */

.birthday-card {
    position: relative;
  }
  
  .cardBirthday {
    background-color: #ffd166;
    overflow: hidden;
    width: 360px;
    height: 380px;
    box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: .2s;
  }
  
  .cardBirthday:hover {
    transform: scale(1.1);
  }
  
  .cardBirthday:before {
    content:"";
    position: absolute;
    height: 5px;
    width: 250px;
    background-color: #fff;
    border-radius:10px;
    top:340px;
    left:65px;
  }
  
  .cake {
    position: relative;
    top:40px;
  }
  
  .cardBirthday:after {
    content:"";
    position: absolute;
    height: 5px;
    border-radius: 0 10px 10px 0;
    width: 122px;
    background-color: rgba(0,0,0,0.1);
    top:340px;
    left:193px;
  }
  
  .cake-bottom {
    position: absolute;
    width:200px;
    height: 60px;
    background-color: #06d6a0;
    top:240px;
    left:91px;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
  }
  
  .cake-bottom:after {
    content:"";
    position: absolute;
    width: 30px;
    height: 15px;
    left:-5px;
    border-radius: 0 0 50px 50px;
    background-color: white;
    box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white, 150px 0 white, 180px 0 white;
  }
  
  .cake-bottom:before {
    content:"";
    position: absolute;
    background-color: #ef476f;
    width: 30px;
    height: 60px;
    left:25px;
    box-shadow: 60px 0 #ef476f, 120px 0 #ef476f;
  }
  
  .cake-middle {
    position: absolute;
    width: 150px;
    height: 60px;
    background-color: #118ab2;
    border-radius: 7px 7px 0 0;
    top:180px;
    left:117px;
    box-shadow: inset 0 -20px #073b4c;
    overflow: hidden;
  }
  
  .cake-middle:before {
    content:"";
    position:absolute;
    background-color: #ef476f;
    border-radius:50%;
    width:10px;
    height: 10px;
    top:20px;
    left: 10px;
    box-shadow: 15px 10px #ffd166, 30px 0 #06d6a0, 45px 10px #ef476f, 60px 0 #ffd166, 75px 10px #06d6a0, 90px 0 #ef476f, 105px 10px #ffd166, 120px 0 #06d6a0;
  }
  
  .cake-middle:after {
    content:"";
    position: absolute;
    width: 30px;
    height: 15px;
    left:0;
    border-radius: 0 0 50px 50px;
    background-color: white;
    box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white;
  }
  
  .cake-top {
    position: absolute;
    width:100px;
    height: 60px;
    background-color: #ef476f;
    border-radius: 7px 7px 0 0;
    top:120px;
    left:143px;
    overflow: hidden;
    box-shadow: inset 0 20px #118ab2;
  }
  
  .cake-top:before {
    content:"";
    position: absolute;
    background-color: #118ab2;
    width: 15px;
    height:35px;
    left:-5px;
    border-radius:20px;
    box-shadow: 15px 10px #ef476f, 30px 5px #118ab2, 45px 5px #ef476f,60px -10px #118ab2, 75px 10px #ef476f, 90px 0 #118ab2; 
  }
  
  .cake-top:after {
    position: absolute;
    content:"";
    background-color: rgba(0,0,0,0.1);
    width:50px;
    border-radius: 0 7px 0 0;
    height: 60px;
    left:50px;
  }
  
  .candle {
    position: absolute;
    background: repeating-linear-gradient(-45deg, white, white 5px,
    #06d6a0 5px, #06d6a0 10px);
    width:10px;
    height: 40px;
    border-radius: 3px 3px 0 0;
    top:80px;
    left:188px;  
  }
  
  .candle:before {
    content:"";
    position: absolute;
    background-color: #333;
    width:1px;
    height:10px;
    top:-10px;
    left:4px;
  }
  
  .flame {
    position: absolute;
    opacity:0.7;
  }
  
  .flame:before {
    content:"";
    position: absolute;
    background-color: #fb5607;
    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    transform: rotate(-45deg);
    width:20px;
    height:20px;
    top:55px;
    left:183px;
    animation: scale .5s linear infinite;
  }
  
  .flame:after {
    content:"";
    position: absolute;
    border-radius: 50%;
    background-color: #ffbe0b;
    width: 11px;
    height: 11px;
    top:61px;
    left:187.5px;
    animation: scale .5s linear infinite;
  }
  
  @keyframes scale {
    0% {transform: scaleY(1) rotate(-45deg);}
    25% {transform: scaleY(1.3) rotate(-45deg);}
    50% {transform: scaleY(1) rotate(-45deg);}
    75% {transform: scaleY(1.3) rotate(-45deg);}
    100% {transform: scaleY(1) rotate(-45deg);}
  }
  
  .shadow {
    position: absolute;
    background-color: rgba(0,0,0,0.1);
    height: 60px;
    width: 74px;
    border-radius:0 7px 0 0;
    top:180px;
    left:193px;
  }
  
  .shadow:before, .shadow:after {
    content:"";
    position: absolute;
    background-color: rgba(0,0,0,0.1);
  }
  
  .shadow:before {
    height: 60px;
    width:98.5px;
    border-radius:0 7px 0 0;
    top:60px;
  }
  
  .shadow:after {
    height: 40px;
    width:5px;
    border-radius: 0 5px 0 0;
    top:-100px;
  }
  
  
  .confetti {
    position: absolute;
    width: 380px;
    height: 380px;
    overflow: hidden;
  }
  
  .squareOne, .squareTwo, .squareThree, .squareFour, .squareFive, .squareSix, .squareSeven, .squareEight, .squareNine, .squareTen {
    position: absolute;
    width: 10px;
    height: 25px;
    top:-110px;
  }
  
  .squareOne {
    background-color: #EF476F;
    animation: down 2.5s linear infinite;
    left:50px;
  }
  
  .squareTwo {
    background-color: #06d6a0;
    animation: down 2.3s linear infinite .2s;
    left:150px;
  }
  
  .squareThree {
    background-color: #118ab2;
    animation: down 2.4s linear infinite .4s;
    left:250px;
  }
  
  .squareFour {
    background-color: #ffbe0b;
    animation: down 2.7s linear infinite .1s;
    left:300px;
  }
  
  .squareFive {
    background-color: #118ab2;
    animation: down 2.6s linear infinite .7s;
    left:5px;
  }
  
  @keyframes down {
    0% {top:-110px; transform: rotate(0deg) rotateY(-90deg);opacity:1;}
    100% {top:400px; transform: rotate(360deg) rotateY(180deg);opacity:0.5;}
  }
  
  @keyframes downTwo {
    0% {top:-130px; transform: rotate(0deg) rotateY(90deg);opacity:1;}
    100% {top:400px; transform: rotate(-360deg) rotateY(-180deg);opacity:0.5;}
  }
  
  
  .squareSix {
    background-color: #ffbe0b;
    animation: downTwo 2.4s linear infinite .2s;
    left:70px;
  }
  
  .squareSeven {
    background-color: #ef476f;
    animation: downTwo 2.1s linear infinite .7s;
    left:170px;
  }
  
  .squareEight {
    background-color: #ef476f;
    animation: downTwo 2.4s linear infinite .9s;
    left:280px;
  }
  
  .squareNine {
    background-color: #06d6a0;
    animation: downTwo 2.9s linear infinite .9s;
    left:50px;
  }
  
  .squareTen {
    background-color: #118ab2;
    animation: downTwo 2.2s linear infinite 1.1s;
    left:350px;
  }
  
  #text {
    position: absolute;
    font-family: tahoma;
    font-size: 35px;
    z-index:1;
    font-weight: bold;
    width: 380px;
    text-align: center;
    top:30px;
    color: #073b4c;
  }
  /** diseño de clases para cards de pagina principal en front **/
  .imageCard {
      position: relative;
      margin: 10px auto;
      overflow: hidden;
      width: auto;
      height: 300px;
      user-select:none; 
  }
  .imageCard img {
      max-width: 100%;
      transition: all 0.3s;
      display: block;
      width: 100%;
      height: auto;
      transform: scale(1);
  }

  .imageCard:hover img {
      transform: scale(1.1);
  }

  /** clases para badge de oferta en los articulos */
  .badge-oferta {
      position: absolute;
      top: 0;
      left: 0;
      color: white;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: bolder;
  }
  /** clase para poner descuento en los detalles del articulo */
  .descuento {
      position: absolute;
      top: 0px;
      right: 0px;
      background-color: #f30000;
      color: white;
      padding: 5px 10px;
      font-size: 14px;
      font-weight: bold;
      /**transform: rotate(45deg);*/
      max-width: 350px;
      text-align: center;
      z-index: 10;
  }
  /** clase para poner descuento en los detalles del articulo */
  .buttonsShare {
      position: absolute;
      top: 0px;
      right: 0px;
      color: white;
      padding: 2px 5px;
      font-size: 14px;
      font-weight: bold;
      /**transform: rotate(45deg);*/
      max-width: 350px;
      text-align: center;
      z-index: 7;
  }
  /** clase para boton de agregar al carrito y pagar **/
  .btn-red{
    background-color: #f30000; 
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
  }

  .card-img-top {
      position: relative;
  }

/** clases darker para tablas para cuando se le da click a los tr de las tablas */
.table-darker,
.table-darker > th,
.table-darker > td {
  background-color: #abf4ff ;
}

.table-darker th,
.table-darker td,
.table-darker thead th,
.table-darker tbody + tbody {
  border-color: #abf4ff ;
}

.table-hover .table-darker:hover {
  background-color: #6aeafb;
}

.table-hover .table-darker:hover > td,
.table-hover .table-darker:hover > th {
  background-color: #6aeafb;
}

.table-darker th,
.table-darker td,
.table-darker thead th {
  border-color: #080203;
}

.table-darker.table-bordered {
  border: 0;
}

.table-darker.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-darker.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}
/** modal xxl */
@media (min-width: 1200px) {
  .modal-xxl {
    max-width: 1640px;
  }
}
/** css de boton flotante de ayuda */
#ayudaSistema {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: #000; /* azul ayuda */
  color: white;
  padding: 10px 12px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  cursor: pointer;
  box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
  z-index: 9;
  transition: background-color 0.3s;
}

#ayudaSistema:hover {
  background-color: #c3004b;
  width: 105px;
}

#ayudaSistema i {
  font-size: 24px;
}
/* Para pantallas más pequeñas */
@media screen and (max-height: 450px) {
  #ayudaSistema { font-size: 18px; }
}

/** estilos menu lateral (carrito) */
/* Estilo para el fondo oscuro del modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro */
  display: none; /* Oculto por defecto */
  z-index: 9; /* Superponer encima de otros elementos */
}
/* Estilos del menú lateral */
.sidenavLateral {
  height: 100%; /* Ocupa toda la altura de la pantalla */
  width: 0; /* Comienza cerrado (ancho 0) */
  position: fixed;
  z-index: 10; /* Aparece encima de otros elementos */
  top: 0;
  right: 0; /* Se alinea a la derecha */
  background-color: white; /* Color de fondo del menú */
  overflow-x: hidden; /* Oculta el desbordamiento horizontal */
  padding-top: 15px; /* Espacio superior */
  transition: 0.3s; /* Transición suave al abrir/cerrar */
}
/* Para pantallas más pequeñas */
@media screen and (max-height: 450px) {
  .sidenavLateral { padding-top: 15px; }
  .sidenavLateral a { font-size: 18px; }
}

/** imagen de navbar en celulares */
@media (max-width: 575.98px) {
  .img-navbar {
      max-width: 170px;
  }
}

/** banner para celulares */
@media (max-width: 575.98px) {
  .carousel-item img {
      height: 200px;
  }
}
/** banner de marcas para web */
.marcas img {
    width:250px;
    height:100px
}
/** banner marcas para celulares */
@media (max-width: 575.98px) {
  .marcas img {
      width:200px;
      height:70px
  }
}

/** Codigo de buscador flotante */
/* Estilo del buscador que se despliega */
#buscador-desplegable {
  position: fixed;
  top: 0%;
  right: 40%;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 300px;
  width: 500px;
  opacity: 0.9;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}
#input-buscar {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}