body {
  font-family: 'Open Sans';
  letter-spacing: 0.15em;
  background-color: #f3f3f3e2 !important;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/gestioniza-telecomunicaciones.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.2; /* solo la imagen */
  z-index: -1;
}

#barra-navegacion {
  background: #e02b20!important;
  color: white;
  box-shadow:none !important;
}

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

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

#sidebar-wrapper {
  background: transparent;
  height: -webkit-fill-available;
  top: 64px;
  display: block;
  width: 66px;
  position: fixed;
  z-index:1000000;
}

#sidebar-wrapper li.active div:not(.submenu_visible) {
  background: rgb(58, 58, 58) !important;
}


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

.lista-movil{
  height: fit-content !important;
  opacity:0;
  background-color: rgb(58, 58, 58) !important;
}

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

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

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

#sidebar-wrapper .titulo {
  display: none !important ;
  width: fit-content;
  left: 85px;
  border-top: 1px solid #484346;
  border-left: 1px solid #484346;
  z-index: 100000;
  border-left: 3px solid #484346;
  padding-right: 30px;
}

#sidebar-wrapper .titulo:not(.multiple) {
  background: #d6eaf8 url('/assets/img/dropdown-bg.gif') repeat-x left top;
}


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

.multiple p {
  width: max-content !important;
  margin: 0px;
}
.multiple li{
  display: flex;
  align-items: center;
}



.submenu_visible{
  position:fixed;
  display: flex !important;
  width: fit-content;
  max-width: max-content !important;
  padding-right: 0px;
  left:68px  !important;
  justify-content: center;
  max-height: min-content;
  height: -webkit-fill-available !important;
  overflow:auto;
  border-radius: 0px 5px 5px 0px !important;
  background-color: black;

}

.submenu_visible p{
  margin-bottom: 0px;
  height:50px !important;
  overflow: hidden;
  display:flex;
  align-items: center;
  width: 100% !important;
  padding-right: 20px;
}

.submenu_visible p:hover{
  background-color: rgb(58, 58, 58)  !important;
}

.multiple li a{
  width:100% !important;
}

.multiple ul li{
  border-bottom:1px solid rgb(117, 117, 117);
}

/* Si la altura de la pantalla es menor a 768px */
@media (max-height: 768px) {
  #sidebar-wrapper {
    width: 70px; /* más ancho con scroll y pantalla baja */
  }
  .submenu_visible{
    left:70px !important;
  }

  #lista_informes,#lista_control{
    height:100% !important;
  }
}

#barra-superior h4 {
  font-family: 'Helvetica';
  width: 25px;
  color: white;
  text-shadow: none !important;
  text-transform: uppercase;
  font-size: 1.6em;
}

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

#wrapper {
  padding-left: 100px;

}

.card {
  width: 80%;
  border-radius: 5px !important;
  border-color: #dcdcdc;
  box-shadow:none !important;
}

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

input, select {
  background: #f1f1f1 !important;
  height: 35px !important;
  border-bottom: 0px !important;
  font-family: 'Helvetica';
  border-radius: 5px !important;
  box-shadow: none !important;
  height: 30px !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: black;
  width: fit-content;
  font-weight: bold;
  border-radius: 5px !important;

}

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

.btn:hover {
  background: #484848;
}

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

input.valid[type=text]:not(.browser-default) {
  box-shadow: 0 1px 0 0 #e51c23;
}

.card-header {
  background: #e02b20;
  color: white;
  border-radius: 5px 5px 0px 0px  !important;
  border:1px solid #e02b20 !important;
}

.card-header h6 {
  font-weight: bold;
  text-shadow: 1px 1px 1px black !important;

}

.card-header i{
  font-size:1.5em;
}

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

select {
  display: block !important;
  border: 0px !important;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px !important;
}

.datepicker-modal {
  height: auto;
}

.input-field.col label {
  top: -5px !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;
}

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

.card-operarios {
  width: 80%;
}

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

.tabla-tareas tr td:last-of-type input {
  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, .tabla-material 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, .tabla-material 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: 30%;
}

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

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

}

.tabla-tareas th:nth-child(1) {
  width: 1% !important;
}

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

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


.tabla-tareas th:nth-child(4) {
  width: 23%;
}

.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: 15%;
}

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

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

.tabla-maquinaria th:nth-child(5) {
  width: 15%;
}

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

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

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

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

.input-field > label {
  -webkit-transform: translateY(8px);
}

.card-operarios
 label {
  display: none;
}

.btn.add {
  background: rgb(174, 255, 174) !important;
  width: 100% !important;
  color: black;
  border-radius: 0px !important;
  box-shadow: 1px 1px 1px 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 1px 1px 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;
}

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) {
  .card-operarios label {
    display: block;
    text-align: left !important;
    font-size: 1.1em;
    font-weight: bold;
  }
}
#sidebar-wrapper ul li a span{
  display: none;
}


@media only screen and (max-width: 480px) {
  
  #sidebar-wrapper:hover {
    width: 100%;
  }

  #wrapper {
    display: none;
  }

  #sidebar-wrapper,#sidebar-wrapper ul{
    width: 100%;
  }
  #sidebar-wrapper li ul{
    display:  none;
  }

  li.sidebar-brand {
    justify-content: start;
  }

  #sidebar-wrapper ul li a span{
    display: block;
    color: white !important;
  }
  #sidebar-wrapper div{
    justify-content: start;
  }

  #sidebar-wrapper span{
    display: block !important;
    color: white !important;
  }

  #barra-superior h4{
    font-size: 1em;
  }
  
  #sidebar-wrapper span:hover{
    border-bottom:0px !important;
  }

  .sidebar-nav{
    height: fit-content !important; 
    width: 100vw !important;
  }

  .icono-caret{
    display: block !important;
    margin-left: auto;
    margin-right: 10px;
  }

  .icono-caret.gira {
    transform: rotate(180deg); /* para rotar ▼ hacia arriba */
  }

  .lista-movil .fa{
    display: inline !important;
    margin-left:10px;
  }

}

.lista-movil{
  display: none;
}

#sidebar-wrapper span{
  display: none;
}

.icono-caret{
  display: none;
}

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

    .contenedor-partes{
      height:auto !important;
    }

    .contenedor-partes .d-flex{
      flex-wrap:wrap;
    }
}

/* 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) {
  .tabla-operarios thead,.tabla-tareas thead,.tabla-maquinaria thead,.tabla-material thead,.tabla-vehiculo thead,.tabla-albaran thead{
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .tabla-operarios td,.tabla-tareas td,.tabla-maquinaria td ,.tabla-material td,.tabla-vehiculo td,.tabla-albaran 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) {
  .tabla-operarios td,.tabla-tareas td,.tabla-maquinaria td,.tabla-material td,.tabla-vehiculo td,.tabla-albaran td, .tabla-operarios td,.tabla-tareas th,.tabla-maquinaria th,.tabla-material th,.tabla-vehiculo th,.tabla-albaran th{
    margin-bottom: 10px;
  }

  .input-field{
    margin-bottom: 10px !important;
  }

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

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

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


}


@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) {
  td.collapsar {
    display: block !important;
  }

  .botones-accion{
    text-align: center;
  }
}

/* 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 */

input, select {
  padding-left: 3px !important;
}


.cabecera-filtros {
  padding: 12px;
  border-bottom: 1px solid #d7d7d7;
}

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

.btn-primary i{
  color:white !important;
}



.pagination{
  justify-content: center;
  margin:5px !important;
}

.titulo-tabla{
  background-color: #e02b20 !important;
  color:white !important;
}

.total-tabla{
  background-color: rgb(238, 238, 238) !important;
  color:rgb(0, 0, 0) !important;
  font-weight: bold;
}

.subtotal-tabla{
  background-color: rgb(247, 238, 238) !important;
  color:rgb(83, 82, 82) !important;
  font-weight: bold;
}

td,th{
  border-radius:0px !important;
}

.fila-vacia{
  background:rgb(238, 238, 238) !important;
  border:0px !important;
}

.tabla-expediente tr{

  border:0px !important;

}

.tabla-expediente th{
  border-bottom: 1px solid rgb(211, 211, 211);
}

.pastilla-home{
  text-align:center; 
  padding-top:20px;
  margin:20px;
  border:solid #cccccc 1px;
  border-radius:15px;
}

.link-pastilla-home{
  display: inline-block; 
  padding:10px; 
  width:80%; 
  background-color:#cccccc; 
  color: black; 
  text-decoration: none;
}

.contenedor{
  height:fit-content !important;
}

@media (max-width: 767.98px) {
  .contenedor {
    padding-right: 0px !important;
  }
}


@media (max-width: 767.98px) {
  .card {
    width:99% !important;
  }
}

.select2{
  width:-webkit-fill-available !important;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

strong.select2-results__group{
  font-weight: bold !important;
}

.despliegue{
    color:white !important;
}

.tabla-permisos-subproyectos i{
  font-size: 1.3em !important;
}

.badge-alerta{
  color:white !important;
  background:#e02b20 !important;
  width:auto !important;
  min-width: auto !important;
  border-radius: 100%;
  position:absolute;
  left:6px;
  top:10px;
  font-size:0.7em !important;
}

/* Tooltip general */
.material-tooltip {
    background-color: #dc625bff !important; /* color de fondo */
    color: #fff !important;               /* color del texto */
    font-size: 14px !important;           /* tamaño de fuente */
    font-weight: bold !important;         /* grosor del texto */
    border-radius: 8px !important;        /* bordes redondeados */
    padding: 8px 12px !important;         /* espacio interno */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* sombra */
    z-index:99999999 !important;
    position: absolute;
    top:-30px;
}

/* Cuando el tooltip está activo */
.material-tooltip.active {
    opacity: 1 !important; /* asegurarse de que se vea */
    transform: scale(1) !important; /* animación de entrada */
}



.modal{
  background:transparent;
  border:0px !important;
  box-shadow:none !important;
  
}

#modal_documentos_bloqueados{
  overflow:auto;
  padding: 0px !important;
  width: 100% !important;
}

#modal_documentos_bloqueados table thead{
  background-color: #e02b20 !important;
  color:white !important;
}

#modal_documentos_bloqueados table tr{
  border:0px !important;
}

#modal_documentos_bloqueados .modal-title{
  font-weight: bold  !important;
}

#modal_documentos_bloqueados .modal-dialog{
  width: fit-content;
}

.modal-open{
  padding-right: 0px  !important;
}


.dz-icon-thumbnail{
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain; /* ajusta dentro del contenedor sin deformar */
    display: block;
}

.dz-details{
    cursor:pointer;
}

a,button,.add{
  box-shadow:none !important;
}

form{
  margin-bottom: 0px !important;
}

.input-field.d-flex{
  align-items: center !important;
}

.card-footer{
  border:0px !important;
  background-color: #f5f5f5 !important;
  padding:10px 10px !important;
}

.table-striped tr{
  border-bottom:0px !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: rgb(247 247 247);
}

.pagination li{
  border-radius: 5px !important;
}

.pagination li a{
  padding-left:12px !important;
}

a.btn,.card-footer .btn{
  display: inline-flex;
  align-items: center;
  gap:5px;
}

.select2-selection__rendered{
  text-align: left  !important;
}