:root {
    --primario: #F4F4F4;
    --secondary: #3ec2d2;
    --terciary: #fd6500;
    --terciary-ligth: #FF7E33;

    --accent: #0080dd;
    --dark-accent: #002f61;

    --white: #f4f4f4;
    --black: #002f61;
    --purple: #3ec2d2;
    --gray: #F4F4F4;

    --bg-opacity: 1;
    --text-opacity: 1;
}

/* Reset Global y Prevención de Overflow */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Global Styles */
main {
    background-color: #F4F4F4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px;
    margin: 0;
    font-size: 16px;
}

@media (max-width: 768px) {
    main {
        height: auto;
    }
}

.input-row.provincia-row {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.provincia-row {
    display: flex;
    align-items: center;      
    justify-content: space-between;
    flex-wrap: wrap;
}

.provincia-row p {
    flex: 1;                  
    text-align: center;       
    margin: 0;                
}

.provincia-row .input-group {
    flex: 1;                 
}

.form-container {
    padding: 30px;
    border-radius: 10px;
    width: 100%;
    max-width: 768px;
    animation: fadeIn 1s ease-out;
    box-sizing: border-box;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

.secondary-border {
    border: 2px solid #D8D0FD !important;
}

.no-border {
    border: none !important;
}

.no-border2 {
    border: none !important;
}

.no-border2.selected {
    background-color: #F4F4F4 !important;
    color: var(--terciary) !important;
}

.no-border2.selected i.step-icon {
    color: var(--terciary) !important;
}

.no-border3 {
    border: none !important;
    color: black !important;
    background-color: #F4F4F4 !important;
}

.no-border3.selected {
    background-color: #F4F4F4 !important;
    color: black !important;
}

.hide {
    display: none !important;
}

.disabledBtn {
    color: #F4F4F4 !important;
    background-color: darkgray !important;
}

/* Input Group Styles */
.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    color: #aaa;
    pointer-events: none;
    z-index: 9;
}

.input-group label[for="message"] {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-200%);
    transition: all 0.2s ease;
    color: #aaa;
    pointer-events: none;
    z-index: 9;
}

.input-group input:focus ~ label:not(.checkbox-group label),
.input-group textarea:focus ~ label:not(.checkbox-group label),
.input-group input:not(:placeholder-shown) ~ label:not(.checkbox-group label),
.input-group textarea:not(:placeholder-shown) ~ label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: var(--terciary);
}

.input-group input,
.input-group textarea {
    padding: 18px 15px;
    padding-top: 18px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: var(--terciary);
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
    outline: none;
}
/* Focused State for Labels */
.input-group label.focused:not(.checkbox-group label) {
    top: -10px;
    left: 0px;
    font-size: 12px;
    color: var(--terciary);
}

.input-group label[for="message"].focused:not(.checkbox-group label) {
    top: 17px;
    left: 0px;
    font-size: 12px;
    color: var(--terciary);
}

/* Valid/Invalid Input Styles */
.input-group input.valid,
.input-group textarea.valid {
    border-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.25);
}

.input-group input.invalid,
.input-group textarea.invalid {
    border-color: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.25);
}

.input-group .input-icon i {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #aaa;
}

.input-group input:focus + i,
.input-group textarea:focus + i {
    color: var(--terciary);
}

.checkbox-group {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.checkbox-group input {
    margin-right: 10px;
    width: auto;
}
.checkbox-group label {
    color: #555;
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 0;
    margin-left: 10px;
}

.only-check {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.only-check input {
    margin-right: 10px;
    width: auto;
}
.only-check label {
    color: #555;
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 0;
    margin-left: 10px;
}

/* Button Styles */
.button-control {
    background-color: #F4F4F4;
    max-width: 1010px;
    text-align: center;
}
@media (max-width: 767.98px) {
    .button-control {
        background: #F4F4F4;
        bottom: 0;
        -webkit-box-shadow: 0 -2px 15px hsla(200, 6%, 90%, .8);
        box-shadow: 0 -2px 15px hsla(200, 6%, 90%, .8);
        left: 0;
        padding: 12px 0 32px;
        position: fixed;
        width: 100%;
    }
}

button {
    margin: 0 10px;
    min-width: 200px;
    padding: 15px;
    background-color: #002f61;
    color: #f4f4f4;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
    background-color: #002f61;
}

button.back-btn {
    background-color: transparent;
    color: #002f61;
}
button.back-btn:focus {
    background-color: transparent;
    color: #002f61;
}

button:active {
    background-color: #0080dd;
    transform: translateY(0);
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #444;
    color: #f4f4f4;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInDown 0.5s forwards;
    font-size: 14px;
}

.notification.success {
    background-color: #28a745;
}

.notification.error {
    background-color: #dc3545;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .form-container {
        padding: 20px;
    }

    button {
        padding: 12px;
        font-size: 16px;
    }
}

/* Asegurar que cada step se mantenga dentro del viewport */
.form-step {
    opacity: 0;
    position: relative;
    transition: opacity 0.5s ease-in-out;
    visibility: hidden;
    height: 0;
    overflow-x: hidden;
}

.form-step p {
    text-align: center;
}

.form-step.active {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow-x: hidden;
}

/* Indicador de pasos */
#form-steps-indicator {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
    color: #3ec2d2;
}

.hidden-step {
    display: none !important;
}

/* Estilos de Input Row y Grupos */
.input-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.half-width {
    width: 48%;
}

.input-row .input-group {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .half-width {
        width: 100%;
    }
    
    .input-row {
        flex-direction: column;
    }
}

/* Opciones y Steps */
.option-step {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 30px;
    column-gap: 20px;
    row-gap: 10px;
}

hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin: 12px 30px 24px;
}

.option {
    background: #f4f4f4;
    padding: 20px;
    border: 1px solid var(--terciary-ligth);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    min-width: 180px;
    font-weight: 500;
}

.option.firma-sin-bordes {
    background: #f4f4f4;
    padding: 20px 0;
    border: #f4f4f4 !important;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    min-width: 180px;
    font-weight: 500;
}

.option:hover {
    background-color: #f4f4f4;
}

.option.ophover:hover {
    background-color: var(--terciary-ligth);
    color: #f4f4f4;
}

.option span {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.option i {
    font-size: 34px;
    color: #3ec2d2;
}

.option i + span {
    margin-top: 0;
}

.option i.step-icon {
    display: inline-block;
    width: 54px;
    height: 54px;
    color: var(--terciary);
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.option.ophover:hover i.step-icon {
    color: #F4F4F4; 
  }

.option.selected {
    background-color: var(--terciary-ligth);
    color: #f4f4f4;
    border-color: var(--terciary-ligth);
}

.option.firma-sin-bordes.selected {
    background-color: #f4f4f4;
    color: #f4f4f4;
    border-color: #f4f4f4;
}

.option.selected i.step-icon {
    color: #F4F4F4;
}

/* Íconos y SVGs */
.mdi--user {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4'/%3E%3C/svg%3E");
}

.mdi--users {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 17v2H2v-2s0-4 7-4s7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.4 3.4 0 0 0-1.93.59a5 5 0 0 1 0 5.82A3.4 3.4 0 0 0 15 11a3.5 3.5 0 0 0 0-7'/%3E%3C/svg%3E");
}

.fa6-solid--users {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23000' d='M144 0a80 80 0 1 1 0 160a80 80 0 1 1 0-160m368 0a80 80 0 1 1 0 160a80 80 0 1 1 0-160M0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96H21.3C9.6 320 0 310.4 0 298.7M405.3 320h-.7c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7c58.9 0 106.7 47.8 106.7 106.7c0 11.8-9.6 21.3-21.3 21.3H405.4zM768 1920v-832q0-53-20-99t-55-82t-81-55t-100-20q-53 0-99 20t-82 55t-55 81t-20 100v832zM644 727q62 23 113 65t85 99l530-546q36-38 36-89q0-27-10-50t-27-40t-41-28t-50-10q-55 0-92 39zm845-324q-18 29-44 53t-50 49l197 441l117-50zm236 749q29 0 46-19t17-46q0-20-9-38t-18-36l-117 50q6 15 12 31t15 29t21 21t33 8M512 1024q27 0 50 10t40 27t28 41t10 50q0 27-10 50t-27 40t-41 28t-50 10q-27 0-50-10t-40-27t-28-41t-10-50q0-27 10-50t27-40t41-28t50-10'/%3E%3C/svg%3E");
}

.ph--users-four-fill {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M230.4 219.19A8 8 0 0 1 224 232H32a8 8 0 0 1-6.4-12.8A67.9 67.9 0 0 1 53 197.51a40 40 0 1 1 53.93 0a67.4 67.4 0 0 1 21 14.29a67.4 67.4 0 0 1 21-14.29a40 40 0 1 1 53.93 0a67.85 67.85 0 0 1 27.54 21.68M27.2 126.4a8 8 0 0 0 11.2-1.6a52 52 0 0 1 83.2 0a8 8 0 0 0 12.8 0a52 52 0 0 1 83.2 0a8 8 0 0 0 12.8-9.61A67.85 67.85 0 0 0 203 93.51a40 40 0 1 0-53.93 0a67.4 67.4 0 0 0-21 14.29a67.4 67.4 0 0 0-21-14.29a40 40 0 1 0-53.93 0A67.9 67.9 0 0 0 25.6 115.2a8 8 0 0 0 1.6 11.2'/%3E%3C/svg%3E");
}

.fa6-solid--users-viewfinder {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23000' d='M48 48h88c13.3 0 24-10.7 24-24S149.3 0 136 0H32C14.3 0 0 14.3 0 32v104c0 13.3 10.7 24 24 24s24-10.7 24-24zm127.8 176a48 48 0 1 0 0-96a48 48 0 1 0 0 96m-26.5 32c-29.4 0-53.3 23.9-53.3 53.3c0 14.7 11.9 26.7 26.7 26.7h56.1c8-34.1 32.8-61.7 65.2-73.6c-7.5-4.1-16.2-6.4-25.3-6.4h-69.3zm368 80c-14.7 0-26.7-11.9-26.7-26.7c0-29.5-23.9-53.3-53.3-53.3h-69.3c-9.2 0-17.8 2.3-25.3 6.4c32.4 11.9 57.2 39.5 65.2 73.6h56.1zm-89.4 0c-8.6-24.3-29.9-42.6-55.9-47c-3.9-.7-7.9-1-12-1h-80c-4.1 0-8.1.3-12 1c-26 4.4-47.3 22.7-55.9 47c-2.7 7.5-4.1 15.6-4.1 24c0 13.3 10.7 24 24 24h176c13.3 0 24-10.7 24-24c0-8.4-1.4-16.5-4.1-24M464 224a48 48 0 1 0 0-96a48 48 0 1 0 0 96m-80-32a64 64 0 1 0-128 0a64 64 0 1 0 128 0M504 48h88v88c0 13.3 10.7 24 24 24s24-10.7 24-24V32c0-17.7-14.3-32-32-32H504c-13.3 0-24 10.7-24 24s10.7 24 24 24M48 464v-88c0-13.3-10.7-24-24-24S0 362.7 0 376v104c0 17.7 14.3 32 32 32h104c13.3 0 24-10.7 24-24s-10.7-24-24-24zm456 0c-13.3 0-24 10.7-24 24s10.7 24 24 24h104c17.7 0 32-14.3 32-32V376c0-13.3-10.7-24-24-24s-24 10.7-24 24v88z'/%3E%3C/svg%3E");
}

.fluent--building-retail-20-regular {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M5.5 7a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm.5 3V8h8v2zm5.5 2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zm.5 2v-1h2v1zM2 4.5A1.5 1.5 0 0 1 3.5 3h13a1.5 1.5 0 0 1 .5 2.915V16.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V5.915A1.5 1.5 0 0 1 2 4.5M3.5 4a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1zM4 6v10h1v-3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5V16h6V6zm2 10h3v-3H6z'/%3E%3C/svg%3E");
}

.fluent-mdl2--manufacturing {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23000' d='M2048 1317v219h-128v-165l-109-110l3-3q-40 22-89 22q-44 0-81-18l-108 109v165h-128v-219l145-144l-3-7l-251-562l-408 421q2 16 3 31t2 32v832h128v128H0v-128h128v-832q0-76 28-143t76-119t114-84t142-37l608-627q36-38 84-58t100-20q35 0 70 10t67 30t57 46t40 60l384 858q9 20 13 41t4 42q0 24-5 47t-17 45l8-8zM768 1920v-832q0-53-20-99t-55-82t-81-55t-100-20q-53 0-99 20t-82 55t-55 81t-20 100v832zM644 727q62 23 113 65t85 99l530-546q36-38 36-89q0-27-10-50t-27-40t-41-28t-50-10q-55 0-92 39zm845-324q-18 29-44 53t-50 49l197 441l117-50zm236 749q29 0 46-19t17-46q0-20-9-38t-18-36l-117 50q6 15 12 31t15 29t21 21t33 8M512 1024q27 0 50 10t40 27t28 41t10 50q0 27-10 50t-27 40t-41 28t-50 10q-27 0-50-10t-40-27t-28-41t-10-50q0-27 10-50t27-40t41-28t50-10'/%3E%3C/svg%3E");
}

.material-symbols--linked-services-outline {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 9q-1.425 0-2.475-.85T15.125 6H8.85q-.275 1.05-1.037 1.813T6 8.85v6.275q1.3.35 2.15 1.4T9 19q0 1.65-1.175 2.825T5 23t-2.825-1.175T1 19q0-1.425.85-2.475t2.15-1.4V8.85q-1.3-.35-2.15-1.4T1 5q0-1.65 1.175-2.825T5 1q1.4 0 2.45.85T8.85 4h6.275q.35-1.3 1.4-2.15T19 1q1.65 0 2.825 1.175T23 5t-1.175 2.825T19 9M5 21q.825 0 1.413-.6T7 19q0-.825-.587-1.412T5 17q-.8 0-1.4.588T3 19q0 .8.6 1.4T5 21M5 7q.825 0 1.413-.587T7 5t-.587-1.412T5 3q-.8 0-1.4.588T3 5t.6 1.413T5 7m14 16q-1.65 0-2.825-1.175T15 19t1.175-2.825T19 15t2.825 1.175T23 19t-1.175 2.825T19 23m0-2q.825 0 1.413-.6T21 19q0-.825-.587-1.412T19 17t-1.412.588T17 19q0 .8.588 1.4T19 21m0-14q.825 0 1.413-.587T21 5t-.587-1.412T19 3t-1.412.588T17 5t.588 1.413T19 7m0-2'/%3E%3C/svg%3E");
}

.streamline--medical-cross-sign-healthcare {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M9 .5H5V5H.5v4H5v4.5h4V9h4.5V5H9z'/%3E%3C/svg%3E");
}

.material-symbols--devices-other {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 20H4q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16v2H4v12h3zm4-2.5q.625 0 1.063-.437T12.5 16t-.437-1.062T11 14.5t-1.062.438T9.5 16t.438 1.063T11 17.5M9 20v-1.775q-.475-.425-.737-1T8 16t.263-1.225t.737-1V12h4v1.775q.475.425.738 1T14 16t-.262 1.225t-.738 1V20zm12 0h-5q-.425 0-.712-.288T15 19v-9q0-.425.288-.712T16 9h5q.425 0 .713.288T22 10v9q0 .425-.288.713T21 20'/%3E%3C/svg%3E");
}

.mdi--help {
    --svg: url("/static/imgs/help.svg");
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #0d6efd;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mdi--me {
    --svg: url("/static/imgs/me.svg");
}

.mdi--other {
    --svg: url("/static/imgs/other.svg");
}

.mdi--check2-square {
    --svg: url("/static/imgs/checkmark.svg");
}

.mdi--check3-square {
    --svg: url("/static/imgs/empty_checkbox.svg");
}

.mdi--male {
    --svg: url("/static/imgs/male.svg");
}

.mdi--female {
    --svg: url("/static/imgs/female.svg");
}

.checkbox-group,
.radio-group {
    margin-bottom: 5px;
}

.option.checkbox-group {
    padding: 20px;
    box-sizing: border-box;
    
}

.input-row {
    display: flex;
    justify-content: space-between;
}

.half-width {
    width: 48%; 
}

.input-row .input-group {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .half-width {
        width: 100%;
    }
    
    .input-row {
        flex-direction: column;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subscription-btn {  
    transition: all .5s ease; 
    padding:10px 20px; 
    border-radius:0 20px 20px 20px !important; 
    border:none;
    font-weight:normal;
    background-color: #002f61;
    color: white;
}

.subscription-btn:hover{ border-radius:20px 20px 20px 20px !important;}

/* Progress Bar */
.progress {
    height: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    margin-bottom: 20px;
}

.progress-bar {
    height: 100%;
    background-color: #3ec2d2;
    border-radius: 5px;
}

.progress-bar-purple {
    background-color: #3ec2d2 !important;
}

#newProgressTarget {
    color: #002f61 !important;
    font-weight: 900;
    font-size: large;
}

.hidden-step {
    display: none !important;
}