@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body{
  font-family: 'Roboto', cursive;
}
.fondoFirma{
  background-color: #dc35459c;
  padding: 2px 0;
}
label{
  font-family: system-ui;
}

.file-select {
    position: relative;
    display: inline-block;
    content: 'Foto seleccionada'; /* texto por defecto */
    width: 100%;
  }
  
  .file-select::before {
    background-color: #5678EF;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    height: 80px;
    content: attr(texto); /* texto por defecto */
    position: absolute;
    margin-bottom: 5px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;

  }
  
  .file-select input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 85px;
    display: inline-block;
    content: 'foto recibida'; /* texto por defecto */
  }

  #aviso{
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    opacity: 0.6;
    background:#000;
    z-index: 2; 
 }
 
 #mensaje{
     display: block;
     top: 30%; 
     left: 50%;
     margin-left: -30%;
     width: 0%;
     max-height: 50%;
     font-size: 20px;
     padding: 12px; 
     position: fixed;
     border-radius: 3px;
     text-align: center;
     background-color:#ffffff;
     opacity: 0.9;
     scroll-behavior: auto;
     z-index: 5;
 }

 #main{
     max-width: 1000px;
     z-index: 1;
 }

 .navbar-left{
     position: absolute;
     right: 5px;
     margin-right: 2px;
     z-index:4;
     
 }

 #contenido{
     height: 100%;
     background-color: gray;
     padding-bottom: 900px;
     width: 100%;

 }
 #contenidoTrabajador{
  height: 100%;
  background-color: white;
  padding-bottom: 900px;
  width: 100%;

}

 .letrero{
  font-family: 'Bebas Neue', cursive;
  position: fixed;
  z-index: 100;
  bottom: 5px;
  left: 5px;
  width: 60%;

 }

 .box{

  background: linear-gradient(to left, green, white); 
 }

 .reloj{
  font-family: 'Orbitron', sans-serif;
  color: #333;
 }

 /* VISTA PREVIA */

 .preview .col-md-6 {
  position: relative;
  margin-bottom: 20px;
}
.preview img, .preview .pdf-icon {
  max-width: 100%;
  height: auto;
}
.preview .remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  width: 25px;
  height: 25px;
  text-align: center;
}
.pdf-icon {
  font-size: 50px;
  color: red;
}

.previewPermiso .col-md-6 {
  position: relative;
  margin-bottom: 20px;
}
.previewPermiso img, .preview .pdf-icon {
  max-width: 100%;
  height: auto;
}
.previewPermiso .remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  width: 25px;
  height: 25px;
  text-align: center;
}

.tabulator-row {
  border: 3px solid black;
  margin-bottom: 2px;
  border-radius: 2px 2px 2px 2px;
  background-color: whitesmoke;
  /* Borde negro grueso */
}

/* Estilo personalizado para la fila */
.fila-personalizada {
  /* height: 80px; */
  /* Establece la altura fija deseada */
  width: 100% !important;
}

.tabulator-row .tabulator-responsive-collapse table tr td {
  position: relative;
  display: flex;
  width: 100%;
}

.tabulator-row .tabulator-responsive-collapse {
  box-sizing: border-box;
  padding: 5px;
  border-top: 0px;
  width: 100%;
  border-bottom: 1px solid #aaa;
  border-right: 0px ;
  overflow-wrap: break-word;
  /* Permite que las palabras largas se dividan y bajen a una nueva línea */
  white-space: normal;
}

.tabulator-row .tabulator-cell {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: auto;
  border-right: 0px !important;
  */
  /* vertical-align: middle; */
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  height: 40px !important;
  overflow-wrap: break-word;
  /* Permite que las palabras largas se dividan y bajen a una nueva línea */
  white-space: normal;
}

/* .tabulator .tabulator-tableHolder .tabulator-table{
  display: block;
} */

.tabulator .tabulator-tableHolder .tabulator-table {
  position: relative;
  display: inline-block;
  background-color: #fff;
  white-space: nowrap;
  overflow: visible;
  color: #333;
  width: 100%;
}

.overflow {
  word-wrap: break-word;
  white-space: normal;
}

.swal2-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.notification-icon {
  font-size: 50px;
  color: #ffde59;
  margin-bottom: 15px;
}

.notification-icon::after {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4d4d;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.swal2-title {
  margin-bottom: 15px;
}

.buttonColor {
  background: linear-gradient(45deg, red, black);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease-in-out, transform 0.2s;
}

.buttonColor:hover {
  transform: scale(1.05);
}

.buttonColor:focus {
  outline: none;
}