/*Tipografia de letra*/
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

    :root {
      --primary: #001B44;
      --primary-hover: #002a6b;
      --background-overlay: rgba(0, 0, 0, 0.1);
      --glass-bg: rgba(255, 255, 255, 0.1);
      --glass-border: rgba(255, 255, 255, 0.3);
      --input-bg: rgba(162, 157, 153, 0.4);
      --font-main: 'Poppins', sans-serif;
    }

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

    /*Login*/
    .bg-main-layout {
      font-family: var(--font-main);
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image:
        linear-gradient(rgba(0, 27, 68, 0.2), rgba(0, 27, 68, 0.2)),
        url('/uesg-seguimiento-rectorado/assets/img/colegio.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      overflow-x: hidden;
    }

    .bg-main-layout2 {
      font-family: var(--font-main);
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image:
        linear-gradient(rgba(0, 27, 68, 0.5), rgba(0, 27, 68, 0.5)),
        url('/uesg-seguimiento-rectorado/assets/img/colegio.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      overflow-x: hidden;
    }

    .swal-boton-azul {
  background-color: #09457b;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.swal-boton-azul:hover {
  opacity: 0.9;
}

    /* Clase para el contenedor del formulario */
    .container-login {
      width: 100vw;
      max-width: 450px;
      padding: 0 24px;
      position: relative;
      z-index: 10;
    }

    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border);
      border-radius: 2rem;
      padding: 80px 40px 60px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    }

    .logo-container {
      position: absolute;
      top: -64px;
      width: 128px;
      height: 128px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease
    }

    .logo-container:hover {
      transform: scale(1.05);
      border-color: rgba(255, 255, 255, 0.5);
    }

    .logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .h1-prsn {
      color: var(--primary);
      text-align: center;
      font-weight: 700;
      letter-spacing: 0.05em;
      font-size: 4rem;
      margin-bottom: 45px;
      line-height: 2;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 1);
      ;
    }

    .h2-prsn {
      color: var(--primary);
      text-align: center;
      font-weight: 700;
      letter-spacing: 0.05em;
      font-size: 1.125rem;
      margin-bottom: 10px;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .h3-prsn {
      color: var(--primary);
      text-align: center;
      font-weight: 700;
      letter-spacing: 0.05em;
      font-size: 1rem;
      margin-bottom: 10px;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .form-prsn {
      width: 100%;
    }

    /* Input Personalizado */
    .input-group {
      margin-bottom: 16px;
    }

    .icon-inside {
      position: relative;
      width: 100%;
    }

    .icon-left {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(0, 27, 68, 0.8);
      font-size: 22px;
      pointer-events: none;
    }

    .icon-right {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(0, 27, 68, 0.8);
      font-size: 22px;
      cursor: pointer;
      user-select: none;
    }

    .input-prsn {
      width: 100%;
      background: var(--input-bg);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 0.75rem;
      padding: 14px 20px 14px 48px;
      color: white;
      font-size: 0.75rem;
      outline: none;
      transition: all 0.3s ease;
      font-family: inherit;
      box-sizing: border-box;
    }

    .input-prsn::placeholder {
      color: rgba(255, 255, 255, 0.8);
    }

    .input-prsn:focus {
      border-color: white;
      box-shadow: 0 0 0 2px rgba(0, 27, 68, 0.3);
    }

    /* Bot�n Personalizado */
    .btn-prsn {
      width: 100%;
      background-color: var(--primary);
      color: white;
      padding: 16px;
      border: none;
      border-radius: 0.75rem;
      font-weight: 700;
      font-size: 0.875rem;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      font-family: inherit;
    }

    .btn-prsn:hover {
      background-color: var(--primary-hover);
    }

    .btn-prsn:active {
      transform: scale(0.98);
    }

    /* Footer Login */
    .footer-login {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      z-index: 1;
    }

    .footer-login a {
      display: flex;
      align-items: center;
    }

    .footer-login a:first-child {
      justify-content: flex-start;
    }

    .footer-login a:last-child {
      justify-content: flex-end;
    }

    .logo-jesuita,
    .logo-ruei {
      width: 40%;
      height: auto;
      object-fit: contain;
      display: block;
    }

    /* ======= CONTENEDOR DE IMÁGENES ======= */
    .image-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      text-align: center;
      flex-wrap: wrap;
    }

    .image-container h1 {
      color: white;
    }

    /*Menu*/
    .menu_modulos {
      display: flex;
      flex-wrap: wrap;
      width: 70%;
      gap: 40px;
      padding: 0;
      margin-top: 2%;
      margin-bottom: 2%;
      justify-content: center;
    }

    .modulo {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      padding: 0;
      margin: 0;
      border-radius: 5px;
      transition: 0.3s;
      min-width: 300px;
    }

    .modulo:hover {
      transform: scale(1.1);
    }

    .modulo-icono {
      height: 150px;
      max-width: 100%;
      display: block;
      padding: 10%;
    }

    .modulo-enlace {
      text-decoration: none;
      color: white;
      font-weight: bold;
      background-color: #09457b;
      font-size: 16px;
      word-wrap: break-word;
      margin: 0;
      padding: 5px 10px;
      border-radius: 5px;
      transition: 0.3s;
    }

    .modulo-enlace:hover {
      background-color: #f8ae27;
      color: black;
    }

    /*Obra de teatro*/
    .banner {
      max-width: 100vw;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      background-color: rgba(208, 0, 0, 0.9);
      color: white;
      font-family: 'Poppins', sans-serif;
      margin-bottom: 2vh;
    }

    .banner img {
      max-width: 60vw;
      border-radius: 10px;
      display: block;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);

      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      margin-bottom: 2vh;
    }

    /*Formulario Serenata*/
    .formulario_serenata,
    .formulario_colaborador {
      display: flex;
      background-color: #efefef;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      width: 30vw;
      max-width: 800px;
      margin: 0 auto 2% auto;
      padding: 2rem;
      border-radius: 10px;
      margin-top: 2%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .formulario_serenata p,
    .formulario_colaborador p {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(20px, 3vw, 35px);
      padding: 0;
      margin: 0;
      text-align: center;
    }

    .formulario_colaborador p {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(14px, 3vw, 16);
      padding: 0;
      margin: 0;
      text-align: center;
    }

    .formulario_colaborador h3 {
      color: #09457b;
      text-align: center;
    }

    .contenedor-doble {
      display: flex;
      gap: 10px;
    }

    .contenedor-doble2 {
      display: flex;
      gap: 20px;
      align-items: flex-end;
      width: 100%;
      flex-wrap: wrap;
    }

    .campo {
      display: flex;
      flex-direction: column;
      flex: 1;
      position: relative;
      min-width: 150px;
    }

    /*Inputs*/
    .input-container {
      color: #084063 !important;
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 400px;
      margin: auto;
    }

    .input-container input[type="text"],
    .input-container input[type="email"],
    .input-container input[type="number"],
    .input-container input[type="password"] {
      font-size: clamp(14px, 2vw, 16px);
      width: 100%;
      border: none;
      border-bottom: 2px solid rgba(9, 69, 123, 0.40);
      padding: 10px 5px;
      background-color: transparent;
      outline: none;
      transition: border-color 0.3s ease-in-out;
    }

    .input-container .label {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(14px, 1.5vw, 16px);
      position: absolute;
      top: 10px;
      left: 5px;
      color: rgba(9, 69, 123, 0.40);
      transition: all 0.3s ease;
      pointer-events: none;
      box-sizing: border-box;
      padding: 7px 0;
      z-index: 2;
    }

    .input-container input:not(:placeholder-shown)~.label,
    .input-container input:focus~.label {
      top: -15px;
      font-size: 14px;
      color: rgba(9, 69, 123, 1);
      z-index: 2;
    }

    .input-container .underline {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background-color: rgba(9, 69, 123, 1);
      transform: scaleX(0);
      transition: all 0.3s ease;
    }

    .input-container input:not(:placeholder-shown)~.underline,
    .input-container input:focus~.underline,
    .input-container input:valid~.underline {
      transform: scaleX(1);
    }

    .campo label:not(.input-container label) {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(14px, 1.5vw, 16px);
      color: rgba(9, 69, 123, 1);
      margin-bottom: 5px;
    }


    .input-container input {
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(14px, 1.5vw, 16px);
      border: none;
      border-bottom: 2px solid rgba(9, 69, 123, 0.40);
      background-color: transparent;
      padding: 7px 0;
      outline: none;
      color: black;
      height: 40px;
      line-height: 40px;
    }

    .input-container label {
      position: absolute;
      top: 10px;
      left: 5px;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(14px, 1.5vw, 16px);
      color: rgba(9, 69, 123, 0.40);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .input-container input:focus~label,
    .input-container input:not(:placeholder-shown)~label {
      top: -20px;
      font-size: clamp(12px, 1.5vw, 16px);
      color: rgba(9, 69, 123, 1);
    }

    .input-container .underline {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background-color: rgba(9, 69, 123, 1);
      transform: scaleX(0);
      transition: all 0.3s ease;
    }

    .input-container input:focus {
      color: black;
    }

    /*Select*/
    .select-container {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .select-container select {
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(14px, 1.5vw, 16px);
      border: none;
      border-bottom: 2px solid rgba(9, 69, 123, 0.40);
      background-color: transparent;
      outline: none;
      appearance: none;
      color: rgba(9, 69, 123, 0.40);
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      position: relative;
      z-index: 2;
    }

    .select-container select:valid {
      color: black;
    }

    .select-container::after {
      content: '▼';
      position: absolute;
      right: 10px;
      bottom: 12px;
      font-size: clamp(12px, 1.5vw, 16px);
      color: rgba(9, 69, 123, 1);
      pointer-events: none;
      z-index: 2;
    }

    .select-container .underline {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background-color: rgba(9, 69, 123, 1);
      transform: scaleX(0);
      transition: all 0.3s ease;
      z-index: 1;
    }

    .select-container select:focus~.underline,
    .select-container select:valid~.underline {
      transform: scaleX(1);
    }

    .select-container.valid::after {
      content: none;
    }

    /*Asientos*/
    .select-planta {
      background: white;
      color: #09457b;
      border: none;
      padding: 12px;
      font-size: 16px;
      border-radius: 12px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      width: 220px;
      background-image: url("data:image/svg+xml;utf8,<svg fill='%2309457b' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px;
    }

    .container-teatro {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 2%;
    }

    .escenario {
      min-width: 95vw;
      max-width: 95vw;
      text-align: center;
      font-size: 1.5em;
      font-weight: bold;
      background: #92FD70;
      color: black;
      padding: 10px;
      border-radius: 10px;
    }

    .container {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ddd;
      padding: 15px;
      border-radius: 10px;
      max-width: 95vw;
      width: 100%;
      justify-content: center;
      overflow-x: auto;
    }

    .container_superior {
      display: flex;
      gap: 10px;
      max-height: 70vh;
      background: #ddd;
      padding: 15px;
      border-radius: 10px;
      max-width: 95vw;
      width: 100%;
      justify-content: center;
      height: auto;
      overflow-x: auto;
    }

    .butaca,
    .zona-central {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .corredor {
      width: 40px;
      background: lightblue;
      border-radius: 5px;
      flex-shrink: 0;
      height: calc(35px * 24);
    }

    .corredor_sup {
      width: 40px;
      background: lightblue;
      border-radius: 5px;
      flex-shrink: 0;
    }

    .corredor_sup_h {
      width: auto;
      height: 20px;
      background: red;
      border-radius: 5px;
      flex-shrink: 0;
    }

    .fila-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 5px;
      margin-top: 1%;
    }

    .info_asientos {
      display: flex;
      flex-direction: row;
      background-color: #efefef;
      align-items: flex-start;
      justify-content: center;
      gap: 2rem;
      width: fit-content;
      margin: 2% auto;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      pointer-events: none;
    }

    .asiento_info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
      text-align: center;
      width: 100px;
      word-wrap: break-word;
      color: #09457b;
    }

    .asientosvg {
      width: 30px;
      height: 35px;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .asientosvg:hover {
      transform: scale(1.1);
      cursor: pointer;
    }

    .asientosvg::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 250"><rect x="50" y="30" width="100" height="120" rx="20" stroke="%23000000" stroke-width="3" fill="%2309457b"/><rect x="20" y="80" width="20" height="60" rx="10" fill="%2309457b" stroke="%23000000" stroke-width="3"/><rect x="160" y="80" width="20" height="60" rx="10" fill="%2309457b" stroke="%23000000" stroke-width="3"/><rect x="50" y="150" width="100" height="50" rx="15" fill="%2309457b" stroke="%23000000" stroke-width="3"/><rect x="60" y="200" width="20" height="30" fill="%2309457b" stroke="%23000000" stroke-width="3"/><rect x="120" y="200" width="20" height="30" fill="%2309457b" stroke="%23000000" stroke-width="3"/></svg>');
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    .asientosvg.verde::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 250"><rect x="50" y="30" width="100" height="120" rx="20" stroke="black" stroke-width="5" fill="green"/><rect x="20" y="80" width="20" height="60" rx="10" fill="green" stroke="black" stroke-width="3"/><rect x="160" y="80" width="20" height="60" rx="10" fill="green" stroke="black" stroke-width="3"/><rect x="50" y="150" width="100" height="50" rx="15" stroke="black" stroke-width="3" fill="green"/><rect x="60" y="200" width="20" height="30" fill="green" stroke="black" stroke-width="3"/><rect x="120" y="200" width="20" height="30" fill="green" stroke="black" stroke-width="3"/></svg>');
    }

    .asientosvg.verdeseleccion::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 250"><rect x="50" y="30" width="100" height="120" rx="20" stroke="black" stroke-width="5" fill="green"/><rect x="20" y="80" width="20" height="60" rx="10" fill="green" stroke="black" stroke-width="3"/><rect x="160" y="80" width="20" height="60" rx="10" fill="green" stroke="black" stroke-width="3"/><rect x="50" y="150" width="100" height="50" rx="15" stroke="black" stroke-width="3" fill="green"/><rect x="60" y="200" width="20" height="30" fill="green" stroke="black" stroke-width="3"/><rect x="120" y="200" width="20" height="30" fill="green" stroke="black" stroke-width="3"/></svg>');
    }

    .asientosvg.amarillo::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 250"><rect x="50" y="30" width="100" height="120" rx="20" stroke="black" stroke-width="5" fill="%23f8ae27"/><rect x="20" y="80" width="20" height="60" rx="10" fill="%23f8ae27" stroke="black" stroke-width="5"/><rect x="160" y="80" width="20" height="60" rx="10" fill="%23f8ae27" stroke="black" stroke-width="5"/><rect x="50" y="150" width="100" height="50" rx="15" stroke="black" stroke-width="5" fill="%23f8ae27"/><rect x="60" y="200" width="20" height="30" fill="%23f8ae27" stroke="black" stroke-width="5"/><rect x="120" y="200" width="20" height="30" fill="%23f8ae27" stroke="black" stroke-width="5"/></svg>');
    }

    .asientosvg.gris::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 250"><rect x="50" y="30" width="100" height="120" rx="20" stroke="black" stroke-width="5" fill="%23808080"/><rect x="20" y="80" width="20" height="60" rx="10" fill="%23808080" stroke="black" stroke-width="5"/><rect x="160" y="80" width="20" height="60" rx="10" fill="%23808080" stroke="black" stroke-width="5"/><rect x="50" y="150" width="100" height="50" rx="15" stroke="black" stroke-width="5" fill="%23808080"/><rect x="60" y="200" width="20" height="30" fill="%23808080" stroke="black" stroke-width="5"/><rect x="120" y="200" width="20" height="30" fill="%23808080" stroke="black" stroke-width="5"/></svg>');
    }

    .asientosvg::after {
      content: attr(data-num);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-55%, -55%);
      font-size: 10px;

      color: white;
    }

    .asientosvg.amarillo::after {
      color: black;
    }

    .asientosvg.gris::after {
      color: white;
      cursor: not-allowed;
    }

    .asientosvg:not(.gris):not(.verdeseleccion) {
      cursor: pointer;
    }

    /*Botones*/
    .button {
      position: relative;
      padding: 10px 22px;
      border-radius: 6px;
      border: none;
      color: #fff;
      cursor: pointer;
      background-color: #09457b;
      transition: all 0.2s ease;
      z-index: 2;
      font-family: 'Poppins', sans-serif;
    }

    .button:active {
      transform: scale(0.96);
    }

    .button:before,
    .button:after {
      position: absolute;
      content: "";
      width: 150%;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
      z-index: -1000;
      background-repeat: no-repeat;
    }

    .button:hover:before {
      top: -70%;
      background-image: radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #09457b 20%, transparent 30%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #09457b 15%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%);
      background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%;
      background-position: 50% 120%;
      animation: greentopBubbles 0.6s ease;
    }

    @keyframes greentopBubbles {
      0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
          40% 90%, 55% 90%, 70% 90%;
      }

      50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
          50% 50%, 65% 20%, 90% 30%;
      }

      100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
          50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
      }
    }

    .button:hover::after {
      bottom: -70%;
      background-image: radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #09457b 15%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%),
        radial-gradient(circle, #09457b 20%, transparent 20%);
      background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
      background-position: 50% 0%;
      animation: greenbottomBubbles 0.6s ease;
    }

    @keyframes greenbottomBubbles {
      0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
          70% -10%, 70% 0%;
      }

      50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
          105% 0%;
      }

      100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
          110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
      }
    }

    .button_salir {
      position: relative;
      padding: 10px 22px;
      border-radius: 6px;
      border: none;
      color: #fff;
      cursor: pointer;
      background-color: #d9534f;
      transition: all 0.2s ease;
      z-index: 2;
      font-family: 'Poppins', sans-serif;
    }

    .button_salir:active {
      transform: scale(0.96);
    }

    .button_salir:before,
    .button_salir:after {
      position: absolute;
      content: "";
      width: 150%;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
      z-index: -1000;
      background-repeat: no-repeat;
    }

    .button_salir:hover:before {
      top: -70%;
      background-image: radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #d9534f 20%, transparent 30%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #d9534f 15%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%);
      background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%;
      background-position: 50% 120%;
      animation: greentopBubbles 0.6s ease;
    }

    @keyframes greentopBubbles {
      0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
          40% 90%, 55% 90%, 70% 90%;
      }

      50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
          50% 50%, 65% 20%, 90% 30%;
      }

      100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
          50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
      }
    }

    .button_salir:hover::after {
      bottom: -70%;
      background-image: radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #d9534f 15%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%),
        radial-gradient(circle, #d9534f 20%, transparent 20%);
      background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
      background-position: 50% 0%;
      animation: greenbottomBubbles 0.6s ease;
    }

    @keyframes greenbottomBubbles {
      0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
          70% -10%, 70% 0%;
      }

      50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
          105% 0%;
      }

      100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
          110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
      }
    }

    /*Salir*/
    .boton-salir {
      background-color: #09457b;
      color: white;
      font-weight: bold;
      padding: 5px;
      border-radius: 5px;
      border: none;
      width: auto;
      transition: 0.3s;
    }

    .boton-salir img {
      width: 40px;
      height: 40px;
    }

    .boton-salir:hover {
      cursor: pointer;
      transform: scale(1.1);
    }

    /*General*/
    .centrar-fila {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .image-container img {
      width: 12%;
      min-width: 150px;
      height: auto;
    }

    @media (max-width: 480px) {
      .footer-login a {
        display: flex;
        justify-content: space-around;
      }

      .bg-main-layout {
        background-attachment: scroll;
        height: 100dvh;
      }

      .glass-card {
        padding: 70px 25px 40px 25px;
      }

      .logo-jesuita {
        width: 100%;
        height: auto;
      }

      .logo-ruei {
        width: 90%;
        height: auto;
      }


      .banner img {
        max-width: 100vw;
      }

      .info_asientos {
        justify-content: center;
        padding: 1rem;
        gap: 1rem;
        box-sizing: border-box;
        max-width: 95dvw;
      }

      .asiento_info {
        width: 80px;
      }

      .input-container {
        padding: 0 15px;
      }

      .contenedor-doble {
        flex-direction: column;
        gap: 15px;
      }

      .campo {
        min-width: 100%;
      }

      .input-container,
      .select-container {
        padding: 0 15px;
      }

      .contenedor-doble2 {
        flex-direction: column;
        gap: 15px;
      }

      .campo {
        min-width: 100%;
        margin-bottom: 10px;
      }



      /* Ajustar tamaño del texto para móviles */
      .input-container input,
      .input-container label {
        font-size: 14px;
        padding: 0px 12px;
      }

      .select-container select,
      .select-container::after {
        font-size: 14px;
      }

      /* Posicionar correctamente la flecha del select en pantallas pequeñas */
      .select-container::after {
        right: 5px;
        bottom: 10px;
      }

      /* Ajuste fino para celulares muy pequeños */
      .formulario_colaborador {
        padding: 1rem;
        width: 80vw;
        margin-top: 2%;
      }

      .formulario_serenata {
        padding: 1rem;
        width: 80vw;
        margin-top: 10%;
      }

      .image-container img {
        width: 20%;
        min-width: 50px;
      }

      .titulo-datos {
        font-size: 16px;
      }

      .login-container {
        gap: 2rem;
      }

      .titulo_serenata {
        font-size: clamp(12px, 5vw, 24px);
      }

      .input-container input:focus~.underline,
      .input-container input:valid~.underline,
      .select-container select:focus~.underline,
      .select-container select:valid~.underline {
        transform: scaleX(0.90);
      }

      .campo label:not(.input-container label) {
        padding: 0px 15px;
      }

      .container,
      .container_superior {
        justify-content: start;
      }

      .input-container .label {
        padding: 0 12px;
      }
    }