*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      display: flex; justify-content: center; align-items: center;
      background: #0e1013; font-family: Arial, sans-serif; padding: 1rem;
    }
    .card {
      width: 100%; max-width: 580px;
      background: rgba(61,61,61,0.32);
      border-radius: 15px; padding: 2rem;
      box-shadow: 0 0 20px #59d2ec, 0 0 40px #1385b3d7, 0 0 80px #029e99;
      border: 1px solid rgba(255,255,255,0.18);
      height: 590px;
    }
    h1 {
      text-align: center; color: #59d2ec; font-size: 2rem;
      margin-bottom: .5rem; text-shadow: 0 0 15px rgba(89,210,236,0.53);
      margin-top: -30px;

    }
    form { display: flex; flex-direction: column; gap: 0.8rem; }
    .input-container {
      display: flex; background: linear-gradient(173deg,#868686 0%,#3a3a3a 100%);
      border-radius: 1rem; box-shadow: 10px 10px 20px #1385b3d7, -10px -10px 40px #4d4c4c;
      padding: 0.2rem; color: #fff; flex-shrink: 1;
    }
    .input-container input, .input-container select {
      flex: 1; background: #515152; border-radius: 0.8rem;
      box-shadow: inset 5px 5px 10px #474747, inset -5px -5px 10px #ababac;
      padding: 0.5rem; border: none; color: #fff; font-size: .8rem;
      transition: all .2s ease-in-out; min-width: 0;
    }
    .input-container input::placeholder { opacity: 1; color: #fff; }
    .input-container input:focus, .input-container select:focus {
      outline: none; border: 1px solid #59d2ec;
      box-shadow: inset 0 0 10px #029e99, 0 0 10px #1385b3d7;
    }
    .row { display: flex; flex-wrap: wrap; }
    .fecha-genero { flex-wrap: nowrap; }
    .fecha-genero .input-container { min-width: 0; }
    .fecha-genero .date-picker { flex: 2; }
    .fecha-genero .input-container:not(.date-picker) { flex: 1; }

    /* Estilos para los enlaces bajo el registro */
    .registro-links {
      margin-top: -5px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 0.65rem;
    }

    .registro-links a {
      color: #029e99;
      text-decoration: none;
      transition: color 0.2s;
    }

    .registro-links a:hover {
      text-decoration: underline;
      color: #00fff7;
    }

    button.submit-btn {
      align-self: center; margin-top: -5px;
      background-color: #59d2ec; color: #14161a; font-weight: bold;
      padding: .8rem 2rem; border: none; border-radius: 2rem;
      cursor: pointer; transition: all .4s ease-in-out;
      box-shadow: 0 0 10px #59d2ec, 0 0 30px #029e99;
      width: 200px;
      height: 40px;
      align-items: center; display: flex; justify-content: center;
    }
    button.submit-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px #00ffc8, 0 0 40px #59d2ec; }

    .date-picker { position: relative; width: 100%; }
    .date-dropdown {
      display: none; position: absolute; top: calc(100% + .5rem); left: 0;
      background: #535353d8; border-radius: 1rem; box-shadow: 0 0 15px rgba(0,0,0,0.6);
      padding: 1rem; z-index: 10; width: 100%;
    }
    .date-dropdown label { font-size: .9rem; margin-bottom: .5rem; display: block; color: #fff; }
    .date-dropdown .row select { padding: .5rem; }
    #dp-ok { margin-top: .5rem; background:#59d2ec; color:#14161a; font-weight:bold; padding:.4rem 1rem; border:none; border-radius:1rem; cursor:pointer; transition:.3s; }
    #dp-ok:hover { box-shadow: 0 0 15px #59d2ec, 0 0 30px #029e99; }

    /* ===== Modal ===== */
    .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    }

    span.info-icon {
        margin-top: 5px;
    }

    .modal-content {
    background: #23272f;
    padding: 1.5rem;
    border-radius: 10px;
    max-width: 90%;
    width: 500px;
    box-shadow: 0 0 20px #59d2ec;
    color: #fff;
    position: relative;
    text-align: justify;
    }

    .modal-close {
    position: absolute;
    top: 0.5rem; right: 0.75rem;
    font-size: 1.5rem;
    cursor: pointer;
    }

    a.vinculo {
        color: #59d2ec; text-decoration: none;
        font-weight: bold; transition: color .3s ease;
    }

    
/* ==== Responsive ==== */

/* Móviles muy pequeños */
@media (max-width: 360px) {
  .card { padding: .8rem; }
  h1 { font-size: 1.5rem; margin-top: -10px; }
  .input-container input { font-size: .8rem; }
  button.submit-btn { width: 100%; font-size: .85rem; padding: .6rem 1rem; }
}

/* Smartphones (portrait hasta 480px) */
@media (max-width: 480px) {
  .card { padding: 1rem; }
  form { gap: .6rem; }
  .fecha-genero { flex-direction: column; gap: .6rem; }
  .fecha-genero .date-picker,
  .fecha-genero .input-container:not(.date-picker) { width: 100%; }
  .registro-links { font-size: .6rem; flex-direction: column; }
  .date-dropdown { width: calc(100% - .8rem); left: .4rem; }
}

/* Tablets (portrait 481–767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .card { max-width: 500px; }
  h1 { font-size: 1.8rem; }
  .input-container input { font-size: .9rem; padding: .6rem; }
  form { gap: .7rem; }
  button.submit-btn { padding: .7rem 1.8rem; font-size: .9rem; width: auto; }
}

/* Tablets landscape / small laptops (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .card { max-width: 600px; padding: 2rem; }
  h1 { font-size: 2.2rem; }
  .row { gap: 1rem; }
  .input-container input { padding: .7rem; font-size: 1rem; }
  button.submit-btn { width: 220px; height: 45px; }
  .registro-links { flex-direction: row; gap: 15px; font-size: .75rem; }
}

/* Laptops / Desktop medianos (1024–1439px) */
/* @media (min-width: 1024px) and (max-width: 1439px) {
  .card { max-width: 650px; padding: 2.5rem; }
  h1 { font-size: 2.5rem; }
  .input-container { padding: .3rem; }
  .input-container input { padding: .8rem; font-size: 1rem; }
  form { gap: 1rem; }
  button.submit-btn { width: 240px; height: 50px; }
} */

/* Pantallas grandes (>=1440px) */
/* @media (min-width: 1440px) {
  .card { max-width: 700px; padding: 3rem; }
  h1 { font-size: 2.8rem; }
  .input-container { padding: .4rem; }
  .input-container input { padding: 1rem; font-size: 1.1rem; }
  form { gap: 1.2rem; }
  button.submit-btn { width: 260px; height: 55px; }
} */