/* -----------------------------------------------------------
   0. Reset y tipografía
----------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* -----------------------------------------------------------
   1. Fondo y centrar contenedor (A: permitir scroll de página)
----------------------------------------------------------- */
body,
html {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #2a826d, #0C5C4C);

    /*  A: si la card crece más que la pantalla, scroll normal de página */
    overflow-y: auto;
}

/* -----------------------------------------------------------
   2. Contenedor principal (A: que pueda crecer)
----------------------------------------------------------- */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    /*  A: ya no amarramos a 100vh; permite crecer */
    min-height: 100vh;
    height: auto;

    padding: 1.25rem; /* 20px */
}

/* -----------------------------------------------------------
   3. Card paso a paso
----------------------------------------------------------- */
.card-step {
    display: flex;
    width: 80%;
    min-width: 70rem; /* 1120px */
    height: var(--stepCardHeight, auto);
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.2);
    margin: auto;
}

.measuring-step {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* -----------------------------------------------------------
   4. Columnas izquierda y derecha
----------------------------------------------------------- */
.card-left,
.card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
}

.card-left {
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(45deg, rgba(0, 77, 64, 0.8), transparent),
        radial-gradient(circle at top left, #4caf50, transparent);
    color: white;
}

.card-right {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f8f9fa;
}

/* -----------------------------------------------------------
   5. Títulos
----------------------------------------------------------- */
.titulo_card_left {
    font-size: 2.5rem;
    margin-bottom: .2rem;
}

.subtitulo_card_left {
    font-size: 1.2rem;
    margin-bottom: 2.25rem;
}

/* -----------------------------------------------------------
   6. Form-groups
----------------------------------------------------------- */
.form-group {
    width: 100%;
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    position: relative;
}

label {
    display: block;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
    font-size: 0.875rem;
    color: #333;
}

/* -----------------------------------------------------------
   7. Inputs y selects
----------------------------------------------------------- */
input,
select {
    width: 85%;
    padding: 0.5rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: inset 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
}

input:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 0.125rem #49a942;
}

/* -----------------------------------------------------------
   8. Mensajes de error
----------------------------------------------------------- */
.error-message {
    color: #ff3333;
    font-size: 0.9rem;
    visibility: hidden;
    height: 1.25rem;
}

input.error+.error-message,
select.error+.error-message {
    visibility: visible;
}

/* -----------------------------------------------------------
   9. Botones
----------------------------------------------------------- */
button {
    padding: 0.75rem 1.5rem;
    background-color: #0C5C4C;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 0.625rem;
}

button:hover {
    background-color: #2a826d;
}

.buttons {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

/* -----------------------------------------------------------
   10. Modales
----------------------------------------------------------- */
#loadingModal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 58, 28, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

#loadingModal div {
    padding: 20px 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

#loadingModal h2 {
    font-weight: 500;
    color: #333;
    margin: 0;
}

#modalExito {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    width: 30%;
    padding: 1.25rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
}

.modal-content span {
    display: block;
    margin-bottom: 1.25rem;
    color: #333;
}

.modal-content button {
    padding: 0.625rem 1.25rem;
    background-color: #0C5C4C;
    color: white;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
    font-size: 1rem;
}

.modal-content button:hover {
    background-color: #0C5C4C;
}

#modalError {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

#modalError .modal-content.error-modal {
    background-color: #e0f2f1;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
}

#modalError .modal-header {
    background-color: #b65e44;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #80cbc4;
}
#modalError .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #fdfdfd;
    text-align: center;
}

#modalError .modal-body {
    padding: 1rem;
    color: #004d40;
    font-size: 1rem;
    text-align: center;
    line-height: 1.4;
}

#modalError .modal-footer {
    padding: 0.75rem;
    text-align: center;
    border-top: 1px solid #80cbc4;
}

#modalErrorBtn {
    padding: 0.6rem 1.5rem;
    background-color: #388e3c;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}
#modalErrorBtn:hover {
    background-color: #2e7d32;
}

.toggle-password-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  color: #000;
}
.toggle-password-btn .bi {
  font-size: 1rem;
  color: inherit;
}
#password {
  padding-right: 2.25rem;
}

/* -----------------------------------------------------------
   11. Media queries
----------------------------------------------------------- */
@media (min-width: 1200px) {
    /*  A: quitamos max-height para que pueda crecer si hace falta */
    .card-step { max-height: none; }
    .titulo_card_left { font-size: 3rem; }
    .subtitulo_card_left { font-size: 1.5rem; }
    .form-group label { font-size: 1rem; }
    .buttons button { padding: 1rem 2rem; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .card-step { width: 80%; min-width: 50rem; }
    .titulo_card_left { font-size: 2.75rem; }
    .subtitulo_card_left { font-size: 1.4rem; }
    .form-group label { font-size: 0.95rem; }
    .buttons button { padding: 0.85rem 1.75rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .card-step { width: 85%; min-width: 40rem; }
    .titulo_card_left { font-size: 2.5rem; }
    .subtitulo_card_left { font-size: 0.95rem; text-align: center; }
    input, select { width: 90%; }
    .buttons button { padding: 0.75rem 1.5rem; }
}

@media (min-width: 576px) and (max-width: 767px) {
    .card-step { flex-direction: column; min-width: 0; width: 95%; }
    .card-left, .card-right { width: 100%; padding: 1.5rem; }
    .titulo_card_left { font-size: 2rem; }
    .subtitulo_card_left { font-size: 1.1rem; margin-bottom: 1.25rem; text-align: center; }
    .buttons button { padding: 0.65rem 1.25rem; }
}

@media (max-width: 575px) {
    .card-step { flex-direction: column; width: 95%; min-width: 0; }
    .card-left, .card-right { padding: 1rem; }
    .titulo_card_left { font-size: 1.75rem; margin-bottom: 0.15rem; }
    .subtitulo_card_left { font-size: 1rem; margin-bottom: 1rem; text-align: center; }
    .form-group { padding-left: 0; }
    input, select { width: 100%; }
    .buttons button { padding: 0.5rem 1rem; }
}

/* -----------------------------------------------------------
   12. B: Compactación SOLO en Step 2 cuando hay "Otro"
   - Evita que crezca tanto la card, sin scroll interno
----------------------------------------------------------- */
#step2.compact-step2 .card-right {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#step2.compact-step2 .form-group {
    margin-bottom: 0.1rem;
}

#step2.compact-step2 label {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

#step2.compact-step2 input,
#step2.compact-step2 select {
    padding: 0.45rem;
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
}

/* En móvil ya estás más compacto, así que no lo apretamos de más */
@media (max-width: 575px) {
    #step2.compact-step2 .card-right {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* -----------------------------------------------------------
   13.  FIX MÓVIL: Scroll interno SOLO en móvil + botones siempre visibles
   - Evita que se corten inputs/botones por overflow:hidden del card
   - Mantiene UX: scroll dentro de la card, botones sticky
----------------------------------------------------------- */
@media (max-width: 767px) {

    /* En móvil, evitar “centrado” que puede bloquear scroll/click */
    body,
    html {
        align-items: flex-start;
    }

    .container {
        align-items: flex-start;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    /* Card con altura máxima de viewport (sin crecer infinito) */
    .card-step {
        height: calc(100vh - 2.5rem);
        max-height: calc(100vh - 2.5rem);
    }

    /* En móvil la card se apila: left arriba, right abajo.
       Hacemos que right sea el área scrolleable real. */
    .card-left {
        flex: 0 0 auto;
    }

    .card-right {
        flex: 1 1 auto;
        width: 100%;

        /*  Scroll interno SOLO aquí */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* Espacio para que el sticky de botones no tape el último campo */
        padding-bottom: 5rem;
    }

    /* Botonera siempre visible */
    .buttons {
        position: sticky;
        bottom: 0;
        width: 100%;
        justify-content: center;

        /* Fondo para que no “transparente” sobre campos */
        background-color: #f8f9fa;

        /* Separación y zona táctil */
        padding: 0.75rem 0;

        /* Que quede por arriba del contenido */
        z-index: 5;

        /* Línea sutil superior para separar del formulario */
        box-shadow: 0 -0.25rem 0.5rem rgba(0,0,0,0.06);
    }

    /* Botones más fáciles de tocar */
    .buttons button {
        min-height: 2.75rem;
        padding: 0.75rem 1.25rem;
    }
}