:root {
      --bg-1: #e8f5ff;
      --bg-2: #fff4e8;
      --ink-1: #10233a;
      --ink-2: #55657a;
      --accent-1: #0f9dff;
      --accent-2: #0068b8;
      --accent-3: #ff8a3d;
      --panel: rgba(255, 255, 255, 0.86);
    }
    * {
      box-sizing: border-box;
    }
    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      margin: 0;
      font-family: 'Manrope', sans-serif;
      color: var(--ink-1);
      background:
        radial-gradient(70rem 35rem at 10% 20%, var(--bg-1) 0%, transparent 65%),
        radial-gradient(60rem 30rem at 90% 82%, var(--bg-2) 0%, transparent 63%),
        linear-gradient(145deg, #f8fcff 0%, #f2f7fd 48%, #eef4fb 100%);
      overflow: hidden;
      position: relative;
    }
    .bg-orb {
      position: fixed;
      border-radius: 999px;
      filter: blur(1px);
      opacity: .55;
      pointer-events: none;
      z-index: 0;
      animation: orbFloat 10s ease-in-out infinite;
    }
    .bg-orb.one {
      width: 18rem;
      height: 18rem;
      background: radial-gradient(circle at 35% 30%, #9ed9ff, #43a8ef);
      top: 10%;
      left: -4rem;
    }
    .bg-orb.two {
      width: 16rem;
      height: 16rem;
      background: radial-gradient(circle at 35% 30%, #ffd2ad, #ff9f57);
      right: -3rem;
      bottom: 8%;
      animation-delay: .8s;
    }
    .entry-card {
      width: min(94vw, 620px);
      border: 1px solid rgba(255, 255, 255, .78);
      border-radius: 26px;
      box-shadow: 0 24px 50px rgba(14, 36, 69, 0.18);
      padding: 2.4rem 2.1rem 2rem;
      text-align: center;
      background: var(--panel);
      backdrop-filter: blur(8px);
      position: relative;
      z-index: 1;
      animation: enterUp .7s ease-out both;
    }
    .hero-title {
      font-family: 'Sora', sans-serif;
      font-size: clamp(1.55rem, 2.8vw, 2rem);
      letter-spacing: -.02em;
      font-weight: 800;
      margin: 1rem 0 .45rem;
      animation: enterUp .7s ease-out both;
      animation-delay: .16s;
    }
    .hero-sub {
      color: var(--ink-2);
      margin-bottom: 1.45rem;
      font-size: .98rem;
      animation: enterUp .7s ease-out both;
      animation-delay: .24s;
    }
    .btn-servidor {
      font-family: 'Sora', sans-serif;
      font-size: clamp(1.15rem, 2.15vw, 1.65rem);
      padding: 1.05rem 1rem 1.15rem;
      border: none;
      border-radius: 18px;
      font-weight: 700;
      letter-spacing: .01em;
      background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 78%);
      box-shadow: 0 16px 26px rgba(6, 108, 184, .33);
      transform: translateY(0);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      animation: enterUp .7s ease-out both;
      animation-delay: .36s;
    }
    .btn-servidor:hover,
    .btn-servidor:focus {
      transform: translateY(-3px);
      box-shadow: 0 20px 30px rgba(6, 108, 184, .38);
      filter: brightness(1.02);
    }
    .btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .8rem;
    }
    .btn-content i {
      font-size: 1.45em;
    }
    .btn-note {
      display: block;
      font-size: .8rem;
      opacity: .85;
      font-weight: 500;
      margin-top: .15rem;
    }
    .btn-admin-discreto {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-size: .88rem;
      padding: .44rem .78rem;
      color: #4a5d73;
      text-decoration: none;
      border: 1px solid #cdd9e6;
      border-radius: 999px;
      background: #f6fbff;
      transition: all .18s ease;
      animation: enterUp .7s ease-out both;
      animation-delay: .48s;
    }
    .btn-admin-discreto:hover {
      color: #213b56;
      border-color: #90bddf;
      background: #eef8ff;
      transform: translateY(-1px);
    }
    .separator {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #d3e5f5 18%, #d3e5f5 82%, transparent);
      margin: 1rem 0 1.1rem;
      animation: enterUp .7s ease-out both;
      animation-delay: .42s;
    }
    @keyframes enterUp {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes orbFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @media (max-width: 575.98px) {
      .entry-card {
        padding: 1.6rem 1rem 1.4rem;
        border-radius: 20px;
      }
      .hero-sub {
        font-size: .92rem;
      }
    }
  


/* START_GRUPOS_2_4 */

.grupo-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

.grupo-selector form {
  margin: 0;
}

.grupo-selector .btn-servidor {
  height: 100%;
}

@media (max-width: 700px) {
  .grupo-selector {
    grid-template-columns: 1fr;
  }
}

/* Panel de ingreso escalable */
.grupo-selector {
    display: block;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    text-align: left;
}
.grupo-selector form {
    margin: 0;
}
.grupo-label {
    display: block;
    font-weight: 700;
    font-size: .94rem;
    margin: 0 0 .45rem;
    color: #203b58;
}
.grupo-campo {
    margin-bottom: 1.2rem;
    border-radius: 13px;
    border: 1px solid #c7d8e9;
    background: #f8fbff;
    min-height: 52px;
}
.grupo-campo:focus {
    border-color: #0f9dff;
    box-shadow: 0 0 0 .2rem rgba(15,157,255,.13);
}
.grupo-selector .btn-servidor {
    font-size: 1.15rem;
    margin-top: .3rem;
    padding: .9rem;
    width: 100%;
}
.grupo-selector .btn-content i {
    font-size: 1.2em;
}


/* SERVIDORES_DROPDOWN_VISIBLE_V1 */

.grupo-selector select.grupo-campo {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;
    font-weight: 700;
    color: #153a60;

    border: 2px solid #1686e5;
    border-radius: 14px;
    background-color: #f0f8ff;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 24px;

    padding-right: 58px;
    min-height: 58px;

    transition: border-color .2s,
                box-shadow .2s,
                background-color .2s;
}

.grupo-selector select.grupo-campo:hover {
    background-color: #e4f3ff;
    border-color: #0067bd;
    box-shadow: 0 3px 12px rgba(0, 103, 189, .12);
}

.grupo-selector select.grupo-campo:focus {
    border-color: #005ba8;
    box-shadow: 0 0 0 4px rgba(22, 134, 229, .18);
    outline: none;
}


/* SERVIDORES_CAJAS_GRUPOS_V2 */

.grupo-cajas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 1.2rem;
}

.grupo-caja {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.grupo-caja input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.grupo-caja-contenido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 10px;
    border: 2px solid #c7d9eb;
    border-radius: 13px;
    background: #f5faff;
    color: #173b60;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: background .2s, border-color .2s;
}

.grupo-caja:hover .grupo-caja-contenido {
    border-color: #1686e5;
    background: #e9f5ff;
}

.grupo-caja input:checked + .grupo-caja-contenido {
    background: linear-gradient(135deg,#159cff,#0068b8);
    border-color: #0874c9;
    color: white;
    box-shadow: 0 7px 15px rgba(0,105,185,.20);
}

.grupo-caja input:focus-visible + .grupo-caja-contenido {
    outline: 3px solid #ff9b40;
    outline-offset: 3px;
}

@media(max-width:360px) {
    .grupo-cajas {
        gap: 8px;
    }

    .grupo-caja-contenido {
        font-size: 14px;
        padding: 8px 5px;
    }
}