/* LOGIN */

@font-face {
  font-family: Poppins-Regular;
  src: url('fuentes/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('fuentes/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('fuentes/poppins/Poppins-Bold.ttf'); 
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('fuentes/poppins/Poppins-SemiBold.ttf'); 
}

*{
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
}

body, html {
	height: 100%;
	font-family: Poppins-Regular, sans-serif;
}


input {
	outline: none;
	border: none;
}

button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

/*-- contenedor del Login--*/

.container-login {
  width: 100%;  
  min-height: 100vh;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: -webkit-linear-gradient(to right, #3076d6, #3797e4);
  background: linear-gradient(to right, #3076d6, #3797e4);
}

.wrap-login {
  width: 400px;
  background: #eceff1;
  border-radius: 20px;
  overflow: hidden;
  padding: 77px 55px 53px 55px;
  -webkit-box-shadow: 25px 40px 28px 0px rgba(0, 0, 0, 0.38);
 /* box-shadow: eje-x | eje-y | blur-radius | color */
}


/*----Formulario de user y password----*/

.login-form {
  width: 100%;
}

.login-form-title {
  display: block;
  font-family: Poppins-Bold;
  font-size: 40px;
  color: #333333;
  line-height: 1.5;
  text-align: center;
}


/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #adadad;
  margin-bottom: 37px;
}

.input100 {
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #555555;
  line-height: 1.2;

  display: block;
  width: 100%;
  height: 45px;
  background: transparent;
  padding: 0 5px;
}

/*---------------------------------------------*/ 
.focus-efecto {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-efecto::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 4px; /*ancho de la linea que hace el efecto de barra de progeso en el input al hacer foco*/

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #6a7dfe;
  background: -webkit-linear-gradient(left, #21d4fd, #b721ff);
  background: -o-linear-gradient(left, #21d4fd, #b721ff);
  background: -moz-linear-gradient(left, #21d4fd, #b721ff);
  background: linear-gradient(left, #21d4fd, #b721ff);
}

.focus-efecto::after {
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #999999;
  line-height: 1.2;

  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  top: 16px;
  left: 0px;
  padding-left: 5px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus + .focus-efecto::after {
  top: -15px;
}

.input100:focus + .focus-efecto::before {
  width: 100%;
}

.has-val.input100 + .focus-efecto::after {
  top: -15px;
}

.has-val.input100 + .focus-efecto::before {
  width: 100%;
}

/*---------------------------------------------*/


/*------------------------------------------------------------------
[ Button ]*/
.container-login-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.wrap-login-form-btn {
  width: 100%;
  display: block;
  position: relative;
  border-radius: 40px 5px;
  overflow: hidden;
  margin: 0 auto;
}

.login-form-btn {
  font-family: Poppins-Medium;
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
}

.wrap-login-form-btn:hover .login-form-bgbtn {
  left: 0;
}


/*--- Para dispositivos small responsive ---*/

@media (max-width: 576px) {
  .wrap-login {
    padding: 77px 15px 33px 15px;
  }
}
.swal2-popup {
font-size: 0.8rem !important;
}
.oculto{
    visibility:hidden;
}

.chart-box{
max-width:480px;
height:480px;
}
.chart-h480{
height:480px;
}
.progress-25{
height:25px;
}
.btn-iniciados{
background-color:#fff3cd !important;
border:1px solid #ffc107;
}

.btn-pendientes{
background-color:#f8d7da !important;
border:1px solid #dc3545;
}

.btn-aprobados{
background-color:#d4edda !important;
border:1px solid #28a745;
}
.btn-aprobadas{
background-color:#68ec86 !important;
border:1px solid #28a745;
}

.btn-cotizadas{
background-color:#3be2eb !important;
border:1px solid #17a2b8;
}
.logo-150{
max-width:150px;
}

.modal-400{
  max-width:400px;}
.modal-600{
 max-width:600px;}
.modal-800{
  max-width:800px;}
.modal-900{
  max-width:900px;}
.modal-1000{
  max-width:1000px;}


.footer-tools::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(to right, transparent, #00c6ff, transparent);
  opacity: 0.7;
}

/* FOOTER MECÁNICO */
/* ===== FOOTER MECÁNICO PRO ===== */
.footer-tools {
  position: fixed;
  bottom: 0;
  left: 5%;
  width: 95%;
  height: 90px;

  background: linear-gradient(
    to top,
    rgba(40, 42, 55, 1),
    rgba(90, 92, 105, 0.6)
  );

  backdrop-filter: blur(4px); /* efecto vidrio */
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  box-shadow: 0 -5px 15px rgba(0,0,0,0.6); /* sombra superior */
}
.sidebar { z-index: 10; }

/* capa herramientas */
.tools-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}

/* ===== TEXTO PRO ===== */
.footer-text {
  position: relative;
  z-index: 3;

  width: 100%;
  text-align: center;

  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;

  color: #ffffff !important;

  /* efecto glow */
  text-shadow:
    0 0 5px rgba(255,255,255,0.8),
    0 0 10px rgba(0,0,0,0.8),
    0 0 15px rgba(0,0,0,0.6);

  margin-top: 20px;

  font-family: "Poppins-Bold", Arial, sans-serif;
}

.tool {
  position:absolute;
  width:50px;
  height:50px;
  left: -200px; /* IMPORTANTE */
}

/* ===== HERRAMIENTAS MÁS PRO ===== */
.tool div {
  width: 100%;
  height: 100%;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  filter: brightness(0.8) contrast(1.2);
  opacity: 0.5;
}

/* efecto brillo al pasar */
.tool:hover div {
  filter: brightness(1.2);
  opacity: 1;
}

/* ===== ANIMACIÓN MEJORADA ===== */
.mover {
  animation: mover 60s linear infinite;
}

@keyframes mover {
  0% { transform: translateX(-200px) translateY(0); }
  50% { transform: translateX(60vw) translateY(-5px); }
  100% { transform: translateX(120vw) translateY(0); }
}

/* giro más suave */
@keyframes girar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== FOOTER MOBILE PRO ===== */
.footer-mobile {
  width: 100%;
  background: rgba(40, 42, 55, 0.95);
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 14px;

  box-shadow: 0 -3px 10px rgba(0,0,0,0.6);
}

/* ===== RESPONSIVE ===== */

/* ocultar escritorio en móvil */
@media (max-width: 991.98px) {
  .footer-tools {
    display: block !important;
  left: 5%;
  width: 95%;
  height: 40px;
  }
}
@media (max-width: 991.98px) {
  .tool {
    width: 25px;
    height: 25px;
  }
}

/* ocultar móvil en escritorio */
@media (min-width: 992px) {
  .footer-mobile {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .footer-text {
    font-size: 12px;
    margin-top: 15px;
    letter-spacing: 1px;
  }
}
@media (max-width: 991.98px) {
  .tool div {
    opacity: 0.5;
  }
}

/* texto adaptable */
@media (max-width: 768px) {
  .footer-text {
    font-size: 16px;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .footer-text {
    font-size: 14px;
    margin-top: 8px;
  }
}

/* ===== MENOS OBJETOS SEGÚN PANTALLA ===== */
@media (max-width: 1024px) {
  .tool:nth-child(n+30) { display: none; }
}

@media (max-width: 991.98px) {
  .tool:nth-child(n+30) {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .tool:nth-child(1){bottom:2px;}
  .tool:nth-child(2){bottom:5px;}
  .tool:nth-child(3){bottom:8px;}
  .tool:nth-child(4){bottom:10px;}
  .tool:nth-child(5){bottom:3px;}
  .tool:nth-child(6){bottom:6px;}
  .tool:nth-child(7){bottom:9px;}
  .tool:nth-child(8){bottom:4px;}
  .tool:nth-child(9){bottom:7px;}
  .tool:nth-child(10){bottom:2px;}
  .tool:nth-child(11){bottom:5px;}
  .tool:nth-child(12){bottom:8px;}
  .tool:nth-child(13){bottom:10px;}
  .tool:nth-child(14){bottom:3px;}
  .tool:nth-child(15){bottom:6px;}
  .tool:nth-child(16){bottom:9px;}
  .tool:nth-child(17){bottom:4px;}
  .tool:nth-child(18){bottom:7px;}
    .tool:nth-child(19){bottom:2px;}
  .tool:nth-child(20){bottom:5px;}
  .tool:nth-child(21){bottom:8px;}
  .tool:nth-child(22){bottom:10px;}
  .tool:nth-child(23){bottom:3px;}
  .tool:nth-child(24){bottom:6px;}
  .tool:nth-child(25){bottom:9px;}
  .tool:nth-child(26){bottom:4px;}
  .tool:nth-child(27){bottom:7px;}
  .tool:nth-child(28){bottom:2px;}
  .tool:nth-child(29){bottom:5px;}
  .tool:nth-child(30){bottom:8px;}
}

@media (max-width: 480px) {
  .tool:nth-child(n+15) { display: none; }
}

/* ===== HERRAMIENTAS ===== */

.martillo{
  background-image:url("img/herramientas/martillo.svg");
  animation:girar 20s linear infinite;
}

.llave{
  background-image:url("img/herramientas/llave.svg");
  animation:girar 23s linear infinite;
}

.llave-inglesa{
  background-image:url("img/herramientas/llave-inglesa.svg");
  animation:girar 22s linear infinite;
}

.tuerca{
  background-image:url("img/herramientas/tuerca.svg");
  animation:girar 18s linear infinite;
}

.engranaje{
  background-image:url("img/herramientas/engranaje.svg");
  animation:girar 26s linear infinite;
}

.ship{
  background-image:url("img/herramientas/ship.svg");
  animation:girar 21s linear infinite;
}

.diagram{
  background-image:url("img/herramientas/diagram.svg");
  animation:girar 19s linear infinite;
}


/* ===== POSICIONES ===== */

.tool:nth-child(1){bottom:5px; animation-delay:-2s;}
.tool:nth-child(2){bottom:15px; animation-delay:-4s;}
.tool:nth-child(3){bottom:25px; animation-delay:-6s;}
.tool:nth-child(4){bottom:35px; animation-delay:-8s;}
.tool:nth-child(5){bottom:45px; animation-delay:-10s;}
.tool:nth-child(6){bottom:10px; animation-delay:-12s;}
.tool:nth-child(7){bottom:20px; animation-delay:-14s;}
.tool:nth-child(8){bottom:30px; animation-delay:-16s;}
.tool:nth-child(9){bottom:40px; animation-delay:-18s;}
.tool:nth-child(10){bottom:50px; animation-delay:-20s;}

.tool:nth-child(11){bottom:5px; animation-delay:-22s;}
.tool:nth-child(12){bottom:15px; animation-delay:-24s;}
.tool:nth-child(13){bottom:25px; animation-delay:-26s;}
.tool:nth-child(14){bottom:35px; animation-delay:-28s;}
.tool:nth-child(15){bottom:45px; animation-delay:-30s;}
.tool:nth-child(16){bottom:10px; animation-delay:-32s;}
.tool:nth-child(17){bottom:20px; animation-delay:-34s;}
.tool:nth-child(18){bottom:30px; animation-delay:-36s;}
.tool:nth-child(19){bottom:40px; animation-delay:-38s;}
.tool:nth-child(20){bottom:50px; animation-delay:-40s;}

.tool:nth-child(21){bottom:5px; animation-delay:-42s;}
.tool:nth-child(22){bottom:15px; animation-delay:-44s;}
.tool:nth-child(23){bottom:25px; animation-delay:-46s;}
.tool:nth-child(24){bottom:35px; animation-delay:-48s;}
.tool:nth-child(25){bottom:45px; animation-delay:-50s;}
.tool:nth-child(26){bottom:10px; animation-delay:-52s;}
.tool:nth-child(27){bottom:20px; animation-delay:-54s;}
.tool:nth-child(28){bottom:30px; animation-delay:-56s;}
.tool:nth-child(29){bottom:40px; animation-delay:-58s;}
.tool:nth-child(30){bottom:50px; animation-delay:-60s;}




/* ===== MOBILE AJUSTE FINO ===== */
@media (max-width: 991.98px) {



  /* tamaño más chico */
  .tool {
    width: 22px;
    height: 22px;
  }

  /* movimiento más corto (clave para que no se junten) */
  @keyframes mover {
    0% { transform: translateX(-80px); }
    100% { transform: translateX(120vw); }
  }

  /* posiciones más bajas */
  .tool:nth-child(1){bottom:2px;}
  .tool:nth-child(2){bottom:5px;}
  .tool:nth-child(3){bottom:8px;}
  .tool:nth-child(4){bottom:10px;}
  .tool:nth-child(5){bottom:3px;}
  .tool:nth-child(6){bottom:6px;}
  .tool:nth-child(7){bottom:9px;}
  .tool:nth-child(8){bottom:4px;}
  .tool:nth-child(9){bottom:7px;}
  .tool:nth-child(10){bottom:2px;}
  .tool:nth-child(11){bottom:5px;}
  .tool:nth-child(12){bottom:8px;}
  .tool:nth-child(13){bottom:10px;}
  .tool:nth-child(14){bottom:3px;}
  .tool:nth-child(15){bottom:6px;}
  .tool:nth-child(16){bottom:9px;}
  .tool:nth-child(17){bottom:4px;}
  .tool:nth-child(18){bottom:7px;}
    .tool:nth-child(19){bottom:2px;}
  .tool:nth-child(20){bottom:5px;}
  .tool:nth-child(21){bottom:8px;}
  .tool:nth-child(22){bottom:10px;}
  .tool:nth-child(23){bottom:3px;}
  .tool:nth-child(24){bottom:6px;}
  .tool:nth-child(25){bottom:9px;}
  .tool:nth-child(26){bottom:4px;}
  .tool:nth-child(27){bottom:7px;}
  .tool:nth-child(28){bottom:2px;}
  .tool:nth-child(29){bottom:5px;}
  .tool:nth-child(30){bottom:8px;}
}

@media (max-width: 576px) {
  .btn-sm {
    font-size: 11px;
    padding: 2px 6px !important;
  }

  input[type="date"] {
    font-size: 11px;
    padding: 2px 4px;
  }
}