/*Alertas*/

/* Estilos generales de los párrafos */
p {
  font-size: 16px;
  color: black;
  font-family: arial;
  padding: 10px;
}

/* Ajuste para el popup de SweetAlert */
div:where(.swal2-container).swal2-center > .swal2-popup {
  width: 28%;
  /* Se ajusta automáticamente */
  max-width: 350px;
  /* Define un límite de ancho */

}

body.swal2-shown.swal2-height-auto{
  background-color: rgba(255, 0, 0, 0) !important;
  z-index: 100000 !important;
}

.custom-alert .tornillo,
.custom-alert .moto,
.custom-alert .llave {
  width: 128px;
  height: 114px;
}

/* Contenedor de la imagen */
.contenedor-imagen {
  position: relative;
  display: inline-block;
}

.titulo-alerta {
  font-size: 30px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
  font-family: "Arial Black", sans-serif;
  
}
.titulo-alerta.text{
   font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #464646;
  margin: auto;
  font-weight: 800;
}

.titulo-alerta.confirmacion {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #464646;
  margin: auto;
  font-weight: 800;
}

.titulo-alerta.error {
font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #464646;
  margin: auto;
   font-weight: 800;
}

.titulo-alerta.advertencia {
 font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #464646;
  margin: auto;
   font-weight: 800;
}
.custom-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  color: #333;
}

.custom-alert label {
  font-weight: 600;
  margin-bottom: 5px;
  text-align: center;
}

.swal2-input {
  width: 150px !important;
  text-align: center;
  padding: 8px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #000000;
  transition: border-color 0.3s ease;
}

.swal2-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* Quitar flechas en Chrome, Safari y Edge */
.swal2-input::-webkit-outer-spin-button,
.swal2-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Quitar flechas en Firefox */
.swal2-input[type=number] {
  -moz-appearance: textfield;
}

.btn-aceptar {
  background-color: #007bff !important;
  color: white;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 16px;
}
.btn-aceptar:hover {
  background-color: #074180;
}

.swal2-border-radius {
  border-radius: 20px !important;
}

.fondo-oscuro {
  background-color: rgba(0, 0, 0, 0.7) !important;
  /* Fondo oscuro */
  backdrop-filter: blur(2px);
  /* Opcional: desenfoque sutil */
}

.swal2-popup {
  border-radius: 20px;
}

.btn-eliminar {
  background-color: #bd2d3b;
  border-radius: 10px;
}
.btn-eliminar:hover {
  background-color: #a01a1f;
}
.btn-cancelar {
  background-color: rgb(73, 73, 73);
  border-radius: 10px;
}
.btn-cancelar:hover {
  background-color: rgb(63, 63, 63) !important;
}

/* Textarea de observación dentro de SweetAlert2 */
.swal2-textarea#swal-input-obs {
  width: 94%;             /* ocupa todo el ancho del popup */
  max-width: 24rem;        /* ancho máximo razonable */
  padding: 0.75rem;        /* espacio interno */
  font-size: 1rem;         /* legible */
  line-height: 1.4;        /* altura de línea cómoda */
  border: 2px solid #dc3545;  /* borde rojo acorde al botón */
  border-radius: 0.5rem;   /* esquinas redondeadas */
  background-color: #fff;  /* fondo blanco puro */
  resize: vertical;        /* sólo cambio de altura */
  min-height: 6rem;        /* altura inicial */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1); /* ligero relieve interno */
  transition: border-color 0.2s; /* efecto suave al enfocar */
  margin-left: 3%;
}

.swal2-textarea#swal-input-obs:focus {
  outline: none;
  border-color: #a71d2a;   /* rojo más oscuro al enfocar */
}
/* Estilo del mensaje de validación dentro de SweetAlert2 */
.swal2-validation-message {
  color: #dc3545;               /* rojo intenso como tu botón */
  font-size: 0.95rem;           /* tamaño legible, por debajo del texto principal */
  margin: 0.5rem 0 0;           /* separa un poco del textarea */
  text-align: center;           /* centrado bajo el input */
  font-weight: 500;             /* un poco más de presencia */
  line-height: 1.3;    
  font-family: Arial, Helvetica, sans-serif;         /* altura de línea cómoda */
}

/* Si quieres que aparezca con una pequeña animación de entrada */
.swal2-validation-message {
  animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MÓVILES - VISTA HORIZONTAL */
@media screen and (max-width: 870px) and (orientation: landscape) {
  /* Estilo general para párrafos */
  p {
    font-size: 14px;
    color: black;
    font-family: Arial, sans-serif;
    padding: 1px;
    margin: 0 5px;
  }

  /* Ajuste para popup de SweetAlert más angosto */
  div:where(.swal2-container).swal2-center > .swal2-popup {
    width: 32vw;
    max-width: 85vh;
    height: 32vw;
    max-height: 85vh;
    box-sizing: border-box;
  }
  div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 9px;
    color: inherit;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
    cursor: initial;
  }

  /* Iconos personalizados dentro del popup */
  .custom-alert .tornillo,
  .custom-alert .moto,
  .custom-alert .llave {
    width: 14vw;
    height: 8vw;
    max-width: 70px;
    max-height: 70px;
  }

  /* Contenedor para imagen */
  .contenedor-imagen {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  /* Título común */
  .titulo-alerta {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    font-family: "Arial Black", sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
  }

  /* Título tipo confirmación */
  .titulo-alerta.confirmacion {
    font-family: "Metal Mania", system-ui;
    font-size: 22px;
    letter-spacing: 1px;
    color: #9b9496;
    text-shadow: 2px 2px 0 #000;
    text-align: center;
  }

  /* Título tipo error */
  .titulo-alerta.error {
    font-family: "Metal Mania", system-ui;
    font-size: 22px;
    letter-spacing: 2px;
    color: #af3b3b;
    text-shadow: 2px 2px 0 #000;
    text-align: center;
  }
  .llave p {
    font-size: 12px;
  }

  /* Título tipo advertencia */
  .titulo-alerta.advertencia {
    font-family: "Metal Mania", system-ui;
    font-size: 24px;
    letter-spacing: 2px;
    color: #e09804;
    text-shadow: 2px 2px 0 #000;
    text-align: center;
  }

  /* Botones en el alert */
  div:where(.swal2-container) div:where(.swal2-actions) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Botón aceptar */
  .btn-aceptar {
    background-color: #007bff !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 15px;
  }
  .btn-aceptar:hover {
    background-color: #074180;
  }

  /* Botón eliminar */
  .btn-eliminar {
    background-color: #bd2d3b !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
  }

  .btn-eliminar:hover {
    background-color: #a01a1f;
  }

  /* Botón cancelar */
  .btn-cancelar {
    background-color: #537c5a !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
  }
  .btn-cancelar:hover {
    background-color: #3c5e4d;
  }

  /* Fondo oscuro del popup */
  .fondo-oscuro {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(2px);
  }

  /* Bordes del popup */
  .swal2-popup {
    border-radius: 20px !important;
  }

}

/* Vertical Responsive */
@media screen and (max-width: 767px) and (orientation: portrait) {
  /* Párrafos */
  p {
    font-size: 3.5vw; /* Se adapta al ancho de la pantalla */
    color: black;
    font-family: Arial, sans-serif;
    padding: 1vw;
  }

  /* Popup de SweetAlert */
  div:where(.swal2-container).swal2-center > .swal2-popup {
    width: 90vw; /* Usamos unidades relativas para responsividad */
    max-width: 250px;
    height: auto;
  }

  /* Iconos personalizados */
  .custom-alert .tornillo,
  .custom-alert .moto,
  .custom-alert .llave {
    width: 19vw;
    height: 17vw;
    max-width: 70px;
    max-height: 70px;
  }

  /* Imagen contenida */
  .contenedor-imagen {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  /* Título de alerta general */
  .titulo-alerta {
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 2vw;
    font-family: "Arial Black", sans-serif;
    letter-spacing: 1px;
    text-align: center;
  }

  /* Estilos específicos según tipo de alerta */
  .titulo-alerta.confirmacion,
  .titulo-alerta.error,
  .titulo-alerta.advertencia {
    font-family: "Metal Mania", system-ui;
    font-size: 22px;
    letter-spacing: 2px;
    margin: auto;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
      1px 1px 0 #000;
  }

  .titulo-alerta.confirmacion {
    color: #9b9496;
  }
  .titulo-alerta.error {
    color: #af3b3b;
  }
  .titulo-alerta.advertencia {
    color: #e09804;
  }

  /* Botón aceptar */
  .btn-aceptar {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 10px;
    padding: 2vw 5vw;
    font-size: 4vw;
  }
  .btn-aceptar:hover {
    background-color: #074180;
  }
  /* Redondeo general */
  .swal2-border-radius,
  .swal2-popup {
    border-radius: 5vw !important;
  }

  /* Fondo oscurecido */
  .fondo-oscuro {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(2px);
  }

  /* Acciones de SweetAlert (botones) */
  div:where(.swal2-container) div:where(.swal2-actions) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-eliminar,
  .btn-cancelar {
    padding: 2.5vw 2vw;
    font-size: 4vw;
    border-radius: 10px;
    color: white;
  }

  .btn-eliminar {
    background-color: #bd2d3b;
  }
  .btn-eliminar:hover {
    background-color: #a01a1f;
  }
  .btn-cancelar {
    background-color: #537c5a;
  }
  .btn-cancelar:hover {
    background-color: #3c5e4d;
  }
}

/* TABLETS */
/* Horizontal */
@media (min-width: 871px) and (max-width: 1023px) and (orientation: landscape) {
}

/* Vertical */
@media screen and (min-width: 870px) and (max-width: 1023px) and (orientation: portrait) {
  /* Párrafos */
  p {
    font-size: 2vw;
    color: black;
    font-family: Arial, sans-serif;
    padding: 3vw;
  }

  /* Popup de SweetAlert */
  div:where(.swal2-container).swal2-center > .swal2-popup {
    width: 38%;
    max-width: 70%;
    height: 55%;
  }

  /* Iconos personalizados */
  .custom-alert .tornillo,
  .custom-alert .moto,
  .custom-alert .llave {
    width: 11vw;
    height: 10vw;
    max-width: 200px;
    max-height: 200px;
  }

  /* Imagen contenida */
  .contenedor-imagen {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  /* Título de alerta general */
  .titulo-alerta {
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 2vw;
    font-family: "Arial Black", sans-serif;
    letter-spacing: 1px;
    text-align: center;
  }

  /* Estilos específicos según tipo de alerta */
  .titulo-alerta.confirmacion,
  .titulo-alerta.error,
  .titulo-alerta.advertencia {
    font-family: "Metal Mania", system-ui;
    font-size: 22px;
    letter-spacing: 2px;
    margin: auto;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
      1px 1px 0 #000;
  }

  .titulo-alerta.confirmacion {
    color: #9b9496;
  }
  .titulo-alerta.error {
    color: #af3b3b;
  }
  .titulo-alerta.advertencia {
    color: #e09804;
  }

  /* Botón aceptar */
  .btn-aceptar {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 13px;
    padding: 1vw 3vw;
    font-size: 2vw;
  }
  .btn-aceptar:hover {
    background-color: #074180;
  }
  /* Redondeo general */
  .swal2-border-radius,
  .swal2-popup {
    border-radius: 5vw !important;
  }

  /* Fondo oscurecido */
  .fondo-oscuro {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(2px);
  }

  /* Acciones de SweetAlert (botones) */
  div:where(.swal2-container) div:where(.swal2-actions) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-eliminar,
  .btn-cancelar {
    padding: 1vw 2vw;
    font-size: 2vw;
    border-radius: 10px;
    color: white;
  }

  .btn-eliminar {
    background-color: #bd2d3b;
  }

  .btn-eliminar:hover {
    background-color: #a01a1f;
  }
  .btn-cancelar {
    background-color: #537c5a;
  }
  .btn-cancelar:hover {
    background-color: #3c5e4d;
  }
}