html,body{
  height:100%;
}

@font-face {
  font-family: 'Plateia';
  src: url('../fonts/PlateiaBold.ttf') format('truetype');
}


body {
  background-image: url('../../assets/img/ondas.png');
  font-family: 'Helvetica';
}

body.login{

  background-image: url('../../assets/img/ondas.png') !important;

  background-size: cover; /* Escalar la imagen de fondo para cubrir todo el contenedor */
  background-repeat: no-repeat; /* No repetir la imagen de fondo */
  background-position: center; /* Centrar la imagen de fondo */
}

td
{
  background-color: inherit !important;
  background:inherit !important;
}

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

  td{
    padding-bottom: 0px !important;
    padding-top: 10px !important;
  }

  td span{
    text-align: end !important;
  }

  td{
    width:100%;
    display:flex !important;
    justify-content:space-between !important;
    align-items: center;
    text-align: left !important;
  }

  #modal_horas_sub td{
    justify-content:flex-start !important;
  }

  td b{
    text-align: left !important;
  }

  #modal_historico_sub table tbody td {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .card-usuario{
    width:100% !important;
  }
}

@media only screen and (min-width: 480px) {
  .card-usuario{
    width:75% !important;
  }
}

@media only screen and (min-width: 1200px) {
  .card-usuario{
    width:60% !important;
  }
}

#barra-navegacion {
  background: #3E8CE4!important;
  color: white;
}

#barra-navegacion svg {
  height: 50px;
}

#barra-superior {
  display: flex;
  align-items: center;
  justify-content: end;
}

#sidebar-wrapper {
  background: transparent;
  height: 100%;
  top: 64px;
  display: block;
  width: 66px;
}

#sidebar-wrapper li.active div {
  border: 1px solid #484346!important;
}



#sidebar-wrapper ul {
  width: 65px;
  height: 100%;
  background: #3371b7;
}

#sidebar-wrapper div {
  width: 100%;
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #3E8CE4;
}

#sidebar-wrapper svg {
  color: white;
  height: 50px;
  width: 30px;
  margin-left: -3px;
}

#sidebar-wrapper li {
  padding: 0px;
  height: 50px;
  cursor: pointer;
}

#sidebar-wrapper .titulo {
  position: absolute;
  width: 0px;
  display: none !important;
  overflow: hidden;
  left: 65px;
  transition: width 0.5s ease;
  border-top: 1px solid #484346;
  border-left: 1px solid #484346;
  z-index: 100;
}

#sidebar-wrapper .titulo p {
  width: 100%;
  margin: 0px;
}



#barra-superior h4 {
  font-family: 'Helvetica';
  width: auto;
  color: white;
  letter-spacing:1px;
}

#barra-superior svg {
  width: 25px;
}

#wrapper {
  padding-left: 100px;
}

.card {
  width: 40%;
  border-radius: 0px !important;
  border-color: #eeeeee;
}

.card-usuario {
  width: 60% ;
}

input, select {
  background: white !important;
  border:1px solid #eaeaea !important;
  font-family: 'Helvetica';
  border-radius: 10px !important;
  height:35px !important;
  padding-top:0px !important;  
  padding-bottom:0px !important;  

}


input[type='text'],input[type='number'],input[type='week'],input[type='email'],input[type='password']{
  text-indent:10px !important; 
}

.form-label {
  margin-left: 5px;
  margin-bottom: 0px;
  color: black !important;
}

input[type='checkbox'] {
  border: 1px solid red;
}

span {
  color: black;
}

[type="checkbox"].filled-in:checked + span:not(.lever):before {
  border: 2px solid #2196F3;
}

[type="checkbox"]:checked + span:not(.lever):before {
  border-right: 2px solid #e51c23;
  border-bottom: 2px solid #e51c23;
}

[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
  border: 2px solid #d6d6d6;
}

.btn {
  background: #3E8CE4;
  width: fit-content;
  font-weight: bold;
}

.btn svg {
  width: 20px;
  height: 20px;
}

.btn:hover {
  background: #70b0fa;
  color:white !important;
}

.row {
  margin-bottom: 0px !important;
}


.card-header {
  background: #3E8CE4;
  color: white;
  border-radius: 0px !important;
}

.card-header h6 {
  font-weight: bold;
  text-shadow: 3px 3px 3px black;
}

.contenedor {
  margin-left: 100px;
  margin-top: 1%;
}


.datepicker-modal {
  height: auto;
}

.input-field.col label {
  left: 0px !important;
}

.titulo {
  color: white;
  border: 0px;
  background: #3E8CE4;
  font-weight: bold;
  padding: 15px;
  text-shadow: 3px 3px 3px black !important;
}

.contenedor-operario, .contenedor-maquinarias {
  background: rgba(149,149,149,0.05) !important;
  border: 1px solid #ededed;
}

.tabla-operarios td, .tabla-operarios tr, .tabla-operarios th {
  background: transparent !important;
  border: 0px;
}

.tabla-tareas td, .tabla-tareas tr, .tabla-tareas th {
  background: transparent !important;
  border: 0px;
}

.tabla-maquinaria td, .tabla-maquinaria tr, .tabla-maquinaria th {
  background: transparent !important;
  border: 0px;
}

.card-operarios {
  width: 60%;
}

.card-operarios input {
  margin-bottom: 0px !important;
}

.tabla-tareas td:last-child input {
  margin-right: auto;
  width: 75%;
}

.tabla-operarios thead tr, .tabla-maquinaria thead tr {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 5px;
}

.tabla-operarios td:first-child {
  text-align: center;
}

.tabla-operarios td:first-child i, .tabla-maquinaria td:first-child i, .tabla-tareas td:first-child i {
  vertical-align: middle;
  cursor: pointer;
}

.tabla-operarios td:first-child svg, .tabla-maquinaria td:first-child svg, .tabla-tareas td:first-child svg {
  width: 25px;
  height: 25px;
}

.tabla-tareas td:last-child div {
  display: flex;
  align-items: center;
}

.tabla-operarios .form-label {
  margin-left: 0px;
  text-align: center;
}

.tabla-operarios th {
  text-align: center;
  vertical-align: middle;
}

.tabla-operarios th:nth-child(2) {
  width: 40%;
}

.tabla-tareas th:nth-child(2) {
  width: 70%;
}

.tabla-operarios th:nth-child(3) {
  width: 40%;
}

.btn-agregar-operario, .btn-agregar-maquinaria, .btn-agregar-tareas {
  margin-left: -3px;
  cursor: pointer;
}

.tabla-maquinaria th:nth-child(2) {
  width: 20%;
}

.tabla-maquinaria th:nth-child(3) {
  width: 30%;
}

.tabla-maquinaria th:nth-child(4) {
  width: 30%;
}

div.switch {
  padding-left: 0px;
  margin-left: 0px;
}

div.switch span {
  font-size: 1.2em;
}

.switch label input[type=checkbox]:checked + .lever {
  background-color: #3E8CE4 !important;
}

.switch label input[type=checkbox]:checked + .lever:after {
  background-color: #3E8CE4 !important;
}

.input-field > label {
  -webkit-transform: translateY(8px);
  color:#3E8CE4 !important;
  padding-left: 10px;
}

td label {
  display: none;
}

.btn.add {
  background: rgb(174, 255, 174) !important;
  width: 100% !important;
  color: black;
  border-radius: 0px !important;
  box-shadow: 1px 2px 4px rgb(198, 198, 198) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.remove {
  background: rgb(243, 149, 149) !important;
  width: 100% !important;
  color: black;
  border-radius: 0px !important;
  box-shadow: 1px 2px 4px rgb(198, 198, 198) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler {
  margin-right: 10px;
  color: white !important;
  border: 0px;
}

svg.colapsar {
  height: 25px;
  width: 25px;
  margin: 0 auto;
}

td:has(svg.colapsar) {
  cursor: pointer;
}

.div-colapsar {
  background-color: rgb(228, 228, 228);
  margin-top: 10px;
  display: none;
}

td.collapsar {
  display: none;
}

/* Estilos para smartphones pequeños en modo retrato */

@media only screen and (max-width: 480px) {
  .card-operarios {
    width: 100% !important;
  }
}

@media only screen and (max-width: 480px) {
  td label {
    display: block;
    text-align: left !important;
    font-size: 1.1em;
    font-weight: bold;
  }
}

@media only screen and (max-width: 480px) {
  #wrapper {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .contenedor {
    margin-left: 0px;
  }
}

/* Colocar inputs unos debajo de otro */

/*@media only screen and (max-width: 480px) {
  .d-flex:not(.card-header) {
    display: block !important;
  }
}*/

/* Mostrar las celdas de las tablas unas debajos de otras */

@media only screen and (max-width: 480px) {
  table thead {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
}

/* Asegura que las celdas tengan un margen inferior para separarlas */

@media only screen and (max-width: 480px) {
  table td, table th {
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 480px) {
  td:has(svg), td:has(i) {
    text-align: center !important;
  }
}

@media only screen and (max-width: 480px) {
  tbody tr:not(:has(.btn-agregar-operario)):not(:has(.btn-agregar-maquinaria)):not(:has(.btn-agregar-tareas)) {
    border-bottom: 1px solid rgb(186, 186, 186) !important;
  }
}

@media only screen and (max-width: 480px) {
  table td:first-child {
    order: 1;
  }
}

@media only screen and (max-width: 480px) {
  #barra-navegacion {
    display: inline-table;
  }
}

@media only screen and (max-width: 480px) {
  .contenedor {
    padding: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .div-colapsar {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  td.collapsar {
    display: block !important;
  }
}

/* Estilos para smartphones pequeños en modo paisaje */

@media only screen and (min-width: 481px) and (max-width: 767px) {
  .card-operarios {
    width: 100% !important;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  #barra-navegacion {
    display: inline-table;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  .contenedor {
    padding: 10px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  #wrapper {
    display: none;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  .contenedor {
    margin-left: 0px;
  }
}

/* Estilos para tabletas */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .card-operarios {
    width: 100%;
  }
}

/* Estilos para pantallas más grandes, como laptops y escritorios */


.card-listado {
  width: 75% !important;
}

.cabecera-filtros {
  padding: 12px;
  border-bottom: 1px solid #d7d7d7;
  position: sticky !important;
  top:0px;
}

.cabecera-filtros .input-field {
  margin-top: 0px;
}


h4{
  margin:0px;
}

.cabecero-tabla h4{
  width:auto;
  text-align: left;
  color:#3E8CE4;
  font-size:35px;
  border-bottom: 2px solid #3E8CE4;
  padding-left: 20px;
  padding-right: 95px;
  padding-bottom: 5px;
}

.card{
  border-radius: 10px !important;
}

td i,td svg{
  color:#3E8CE4 !important;
}


.icono-categoria{
  width:70px;
  height:65px;
  background: #3E8CE4;
  border-radius: 200px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle{
  border-radius:100% !important;
  height: 20%;
}
th{
  border-bottom: 1px solid #d7d7d7;
  font-weight: bold !important;
}
tr,td{
  border:0px !important;
}

.card table tr:hover td{
  background: #f6f6f6 !important;
}

.card table{
  border-bottom: 1px solid #d7d7d7;
}

ul.pagination{
  justify-content: center;
  width: 75%;
}


.pagination li{
  margin-right:4px;
}

.pagination li.active {
  background-color: #e8e8e8;
  border-radius: 100%;
}

.pagination li.active a{
  color:rgb(59, 57, 57) !important;
}

.pagination .waves-effect{
  border-radius: 50% !important;
}

.btn{
  border-radius: 3px;
}

.modal-content h4{
  color:#3E8CE4;
  border-bottom:1px solid #3E8CE4;
  padding-left:5px;
  padding-bottom:1.5px;
}

.modal-footer{
  border-top:1px solid #e8e8e8;
}

.modal-content div{
  margin-top: 10px;
  background-color: #f6f6f6;
  padding: 10px;
  border-radius:3px;
}

.modal-insertar-horas input{
  width:40% !important;
}

/* Ocultar flechas en navegadores webkit */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

td:has(table){
  vertical-align: baseline;
}

td>table{
  border-bottom:0px !important;
}

.contenedor{
  height: 100%;
}

@media only screen and (max-width: 480px) {
  .cabecero-tabla h4{
    padding-right:30%;
    font-size:1.5em
  }

  .cabecero-tabla img{
    width:32px !important;
    height:32px !important;
  }

  .icono-categoria {
    height: 60px;
    width:60px;
  }

  .cabecero-tabla{
    justify-content: center;
  }

  table{
    font-size: 0.9em;
  }

  .cabecera-filtros input{
    height: 30px !important;
  }

  ul.pagination{
    width: 100% !important;
    margin-top:10px;
  }
}

@media only screen and (min-width: 480px) {
  td b{
    display: none;
  }
}

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

  .card-listado{
    width: 90% !important;
    margin:0 auto;
    max-height: 70%;
    overflow-y:auto;
  }
}