/* ==========================================
   DISEÑO ÚNICO DE INICIO DE SESIÓN (LOGIN)
   Estilo clonado del Módulo de Horarios
   ========================================== */

/* Contenedor Principal del Login */
#loginForm.login-container, #loginForm.form-container {
    background-color: #2b2d2e;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    width: 600px;
    max-width: 100%;
    margin: 50px auto;
    border: 1px solid #4d4f51;
    color: #ffffff;
}

/* Grupos de entrada con iconos */
#loginForm .input-group-text {
    background-color: #1a1a1a !important;
    border-color: #4d4f51 !important;
    color: #25BED4 !important; /* Iconos en Cian */
    border-radius: 10px 0 0 10px !important;
}

#loginForm .form-control {
    background-color: #ffffff !important;
    border: 1px solid #4d4f51 !important;
    color: black !important;
    padding: 12px !important;
}

#loginForm .form-control:focus {
    background-color: #f8f8f8 !important;
    color: black !important;
    border-color: #25BED4 !important;
    box-shadow: none !important;
}

/* Botón Primario en el Login (Cian) */
#loginForm .btn-primary, #loginForm .form-submit-btn {
    background-color: #25BED4 !important;
    border: none !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

#loginForm .btn-primary:hover, #loginForm .form-submit-btn:hover {
    background-color: #1e99ab !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 190, 212, 0.4);
}

/* Switches y Checkbox */
#loginForm .form-check-input:checked {
    background-color: #25BED4 !important;
    border-color: #25BED4 !important;
}

/* Etiquetas y Textos */
#loginForm .form-label, #loginForm .text-muted {
    font-weight: 600;
    color: #a0a0a0 !important;
}

/* Botones de transparencia (Toggle Password) */
.btn-outline-secondary {
    border-color: #4d4f51 !important;
    color: #a0a0a0 !important;
}

.btn-outline-secondary:hover {
    background-color: #4d4f51 !important;
    color: #ffffff !important;
}



/* LOGOUT BUTTON */
/* From Uiverse.io by cssbuttons-io */ 
.logout {
  width: 150px;
  height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: red;
  border: none;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
  background: #e62222;
 }
 
 .logout, .logout span {
  transition: 200ms;
 }
 
 .logout .text {
  transform: translateX(15px);
  color: white;
  font-weight: bold;
  font-size: small;
 }
 
 .logout .icon {
  position: absolute;
  border-left: 1px solid #c41b1b;
  transform: translateX(110px);
  height: 25px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 
 .logout i {
  width: 15px;
  fill: #eee;
 }
 
 .logout:hover {
  background: #ff3636;
 }
 
 .logout:hover .text {
  color: transparent;
 }
 
 .logout:hover .icon {
  width: 150px;
  border-left: none;
  transform: translateX(0);
 }
 
 .logout:focus {
  outline: none;
 }
 
 .logout:active .icon i {
  transform: scale(0.8);
 }
 
 
 
 
 
 /* LIST LOCAL CHECKBOX */
 /* From Uiverse.io by Yaya12085 */ 
 .radio-inputs {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   border-radius: 0.5rem;
   background-color: #2B2D2E;
   box-sizing: border-box;
   box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
   padding: 0.25rem;
   width: 300px;
   font-size: 14px;
 }
 
 .radio-inputs .radio {
   flex: 1 1 auto;
   text-align: center;
 }
 
 .radio-inputs .radio input {
   display: none;
 }
 
 .radio-inputs .radio .name {
   display: flex;
   cursor: pointer;
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
   border: none;
   padding: .5rem 0;
   transition: all .15s ease-in-out;
   color: whitesmoke;
 }
 
 .radio-inputs .radio input:checked + .name {
   background-color: #25BED4;
   font-weight: 600;
 }
 
 
 
 /* From Uiverse.io by adamgiebl */ 
 .cssbuttons-io-button {
   color: white;
   font-family: inherit;
   padding: 0.35em;
   padding-left: 1.2em;
   font-size: 17px;
   font-weight: 500;
   border-radius: 0.9em;
   border: none;
   letter-spacing: 0.05em;
   display: flex;
   align-items: center;
   box-shadow: inset 0 0 1.6em -0.6em rgb(65, 65, 65);
   overflow: hidden;
   position: relative;
   height: 2.8em;
   padding-right: 3.3em;
   cursor: pointer;
 }
 
 .cssbuttons-io-button .icon {
   background: white;
   margin-left: 1em;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 2.2em;
   width: 2.2em;
   border-radius: 0.7em;
   /* box-shadow: 0.1em 0.1em 0.6em 0.2em #0974f1; */
   right: 0.3em;
   transition: all 0.3s;
 }
 
 .cssbuttons-io-button:hover .icon {
   width: calc(100% - 0.6em);
 }
 
 .cssbuttons-io-button .icon i {
   width: 1.1em;
   transition: transform 0.3s;
   color: rgba(37,190,212,1);
 }
 
 .cssbuttons-io-button:hover .icon i {
   transform: translateX(0.1em);
 }
 
 .cssbuttons-io-button:active .icon {
   transform: scale(0.95);
 }
 
 
 
  /* STEP BUTTONS ON CARD */
 /* From Uiverse.io by andrew-demchenk0 */ 
 #cardStepBtns {
   width: 50%;
 }
 @media screen and (max-width: 1000px) {
   #cardStepBtns {
     width: 100%;
   }
 }
 .stepButton {
   --main-focus: #2d8cf0;
   --font-color: #323232;
   --bg-color-sub: #dedede;
   --bg-color: #eee;
   --main-color: #323232;
   position: relative;
   width: 50%;
   height: 40px;
   cursor: pointer;
   display: flex;
   align-items: center;
   border: transparent !important;
   background-color: var(--bg-color);
   overflow: hidden;
   font-size: 15px;
 }
 
 .stepButton, .button__icon, .button__text {
   transition: all 0.2s;
 }
 
 .stepButton .button__text {
   transform: translateX(10px);
   color: var(--font-color);
   font-weight: 600;
   font-size: 13px;
 }
 
 .stepButton .button__icon {
   position: absolute;
   right: 0;
   height: 100%;
   width: 39px;
   background-color: var(--bg-color-sub);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .stepButton:hover {
   background: var(--bg-color);
 }
 
 .stepButton:hover .button__text {
   color: transparent;
 }
 
 .stepButton:hover .button__icon {
   width: 100%;
   transform: translateX(0);
 }
 
 .stepButton:active {
   transform: translate(3px, 3px);
   box-shadow: 0px 0px var(--main-color);
 }
 
 
 
 
  /* ADD FILE BUTTON TICKET INFO */
 /* From Uiverse.io by SpatexDEV */ 
 .fileButton {
   border: none;
   display: flex;
   padding: 0.75rem 1.5rem;
   background-color: #0974f1;
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 700;
   text-align: center;
   cursor: pointer;
   text-transform: uppercase;
   vertical-align: middle;
   align-items: center;
   border-radius: 0.5rem;
   user-select: none;
   gap: 0.75rem;
   box-shadow:
     0 4px 6px -1px #488aec31,
     0 2px 4px -1px #488aec17;
   transition: all 0.6s ease;
 }
 
 .fileButton:hover {
   background-color: #488aec;
   box-shadow:
     0 10px 15px -3px #488aec4f,
     0 4px 6px -2px #488aec17;
   transform: scale(1.05);
 }
 
 .fileButton:focus,
 .fileButton:active {
   opacity: 0.85;
   box-shadow: none;
 }
 
 .fileButton svg {
   width: 1.25rem;
   height: 1.25rem;
 }
 
 
 
 
 /* MENU BUTTONS */
 .button {
   position: relative;
   width: 120px;
   height: 40px;
   background-color: #000;
   display: flex;
   align-items: center;
   color: white;
   flex-direction: column;
   justify-content: center;
   border: none;
   padding: 12px;
   gap: 12px;
   border-radius: 8px;
   cursor: pointer;
 }
 @media screen and (max-width: 768px) {
   .button:nth-child(3){
     margin-top: 15px;
   }
 }
 .button::before {
   content: '';
   position: absolute;
   inset: 0;
   left: -4px;
   top: -1px;
   margin: auto;
   width: auto;
   height: 48px;
   border-radius: 10px;
   background: rgba(37,190,212,1);
   z-index: -10;
   pointer-events: none;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .button::after {
   content: "";
   z-index: -1;
   position: absolute;
   inset: 0;
   background: rgba(37,190,212,1);
   transform: translate3d(0, 0, 0) scale(0.95);
   filter: blur(10px);
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .button:hover::after {
   filter: blur(15px);
 }
 
 .button:hover::before {
   transform: scale(1.008);
 }
 
 .button:active::before {
   scale: 0.98;
 }
 
 
 
 /* METODO PAGO TICKET */
 /* From Uiverse.io by gharsh11032000 */ 
 .radio-buttons-container {
   display: flex;
   align-items: center;
   gap: 24px;
 }
 
 .radio-button {
   display: inline-block;
   position: relative;
   cursor: pointer;
 }
 
 .radio-button__input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 .radio-button__label {
   display: inline-block;
   padding-left: 30px;
   margin-bottom: 10px;
   position: relative;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
 }
 
 .radio-button__custom {
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2px solid #555;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
 }
 
 .radio-button__input:checked + .radio-button__label .radio-button__custom {
   transform: translateY(-50%) scale(0.9);
   border: 5px solid #4c8bf5;
   color: #4c8bf5;
 }
 
 .radio-button__input:checked + .radio-button__label {
   color: #4c8bf5;
 }
 
 .radio-button__label:hover .radio-button__custom {
   transform: translateY(-50%) scale(1.2);
   border-color: #4c8bf5;
   box-shadow: 0 0 10px #4c8bf580;
 }
 
 
 
 
 
 /* TOGGLE SOCIO */
 /* From Uiverse.io by gharsh11032000 */ 
 /* The switch - the box around the slider */
 .switch {
   font-size: 17px;
   position: relative;
   display: inline-block;
   width: 3.5em;
   height: 2em;
 }
 
 /* Hide default HTML checkbox */
 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 /* The slider */
 .slider {
   position: absolute;
   cursor: pointer;
   inset: 0;
   border: 2px solid #414141;
   border-radius: 50px;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .slider:before {
   position: absolute;
   content: "";
   height: 1.4em;
   width: 1.4em;
   left: 0.2em;
   bottom: 0.2em;
   background-color: white;
   border-radius: inherit;
   transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
 }
 
 .switch input:checked + .slider {
   box-shadow: 0 0 20px rgba(37,190,212,0.8);
   border: 2px solid rgba(37,190,212,1);
 }
 
 .switch input:checked + .slider:before {
   transform: translateX(1.5em);
 }
 
 
 
 /* SAVE TICKET BUTTON */
 
 /* From Uiverse.io by eirikvold */ 
 .save-ticket {
   font-family: inherit;
   font-size: 18px;
   background: linear-gradient(to bottom, #4dc7d9 0%,#66a6ff 100%);
   color: white;
   padding: 0.8em 1.2em;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 25px;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
   transition: all 0.3s;
 }
 
 .save-ticket:hover {
   transform: translateY(-3px);
   box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
 }
 
 .save-ticket:active {
   transform: scale(0.95);
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
 }
 
 .save-ticket span {
   display: block;
   margin-left: 0.4em;
   transition: all 0.3s;
 }
 
 .save-ticket svg {
   width: 18px;
   height: 18px;
   fill: white;
   transition: all 0.3s;
 }
 
 .save-ticket .svg-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.2);
   margin-right: 0.5em;
   transition: all 0.3s;
 }
 
 .save-ticket:hover .svg-wrapper {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
 .save-ticket:hover svg {
   transform: rotate(45deg);
 }
 
 
 
 
 /* SEARCH TICKETS */
 .searchBox {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   background: #2f3640;
   border-radius: 50px;
   position: relative;
 }
 
 .searchButton {
   color: white;
   position: absolute;
   right: 8px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: linear-gradient(-45deg, rgba(37,190,212,1) 0%, #2d99ac 100% );
   border: 0;
   display: inline-block;
   transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
 }
 /*hover effect*/
 .searchButton:hover {
   color: #fff;
   background-color: #1A1A1A;
   box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
   transform: translateY(-3px) rotateZ(15deg);
 }
 /*button pressing effect*/
 .searchButton:active {
   box-shadow: none;
   transform: translateY(0);
 }
 
 .searchInput {
   border: none;
   background: none;
   outline: none;
   color: white;
   font-size: 15px;
   padding: 24px 46px 24px 26px;
 }
 
 
 
 
 /* AJAX LIST LOADING SPINNER */
 /* From Uiverse.io by xXJollyHAKERXx */ 
 .spinner {
   background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));
   width: 100px;
   height: 100px;
   animation: spinning82341 1.7s linear infinite;
   text-align: center;
   border-radius: 50px;
   filter: blur(1px);
   box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
 }
 
 .spinner1 {
   background-color: rgb(36, 36, 36);
   width: 100px;
   height: 100px;
   border-radius: 50px;
   filter: blur(10px);
 }
 
 @keyframes spinning82341 {
   to {
     transform: rotate(360deg);
   }
 }
 
 
 
 /* STEP AND INFO BTNS */
 .cardIcons {
   display: flex;
   justify-items: center;
   align-items: center;
   width: 100%;
   border-radius: 15px;
   overflow: hidden;
 }
 
 .cardBtn {
   border: none;
   width: 100%;
   height: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
 }