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

/* =========================
   VARIABLES
========================== */

:root{

    --circle-size:22px;
    --circle-border:4px;

    --line-height:9px;
    --dotted-height:4px;

    --icon-size:55px;
    --icon-font:24px;
}

#form{
    display:flex;
    justify-content:center;

}

/* =========================
   CARD
========================== */

.card-steps{

    width:100%;
    max-width:950px;

    position:relative;

    background:#ffffff;

    border-radius:18px;
    padding:20px 20px 20px 20px;
    border:1px solid #d9d9d9;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    overflow:hidden;
}

/* AREA VINO FIJA */
.card-steps::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    width:100%;
    /* ALTURA FIJA */
    height:140px;

    background:#691b32;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    z-index:0;
}

/* CONTENIDO ENCIMA */
.card-steps > *{
    position:relative;
    z-index:1;
}

/* =========================
   STEPPER
========================== */

.stepper{
    position:relative;
    width:100%;
}

.steps{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    position:relative;

    z-index:5;

    gap:10px;
}

.step{

    flex:1;

    min-width:0;

    text-align:center;

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;
}

/* =========================
   ICONOS
========================== */

.step-icon{

    width:var(--icon-size);
    height:var(--icon-size);

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:var(--icon-font);

    color:#ffffff;

    /* CIRCUNFERENCIA */
    border:2px solid #ffffff;

    border-radius:50%;

    background:transparent;

    margin-bottom:18px;

    transition:.3s ease;
}

/* ACTIVO / COMPLETADO */

.step.completed .step-icon,
.step.active .step-icon{

    color:#bc955b;

    border-color:#bc955b;

    /*background:rgba(255,255,255,.08);*/
}

/* =========================
   CIRCULOS
========================== */

.circle{

    width:var(--circle-size);
    height:var(--circle-size);

    border-radius:50%;

    background:#ECECEC;

    border:var(--circle-border) solid #bc955b;

    position:relative;

    z-index:10;

    transition:.3s ease;

    margin:auto;

    flex-shrink:0;
}

.step.completed .circle{
    background:#FFFFFF;
}

.step.active .circle{
    background:#ECECEC;
}

/* =========================
   LINEAS
========================== */

.line-base,
.line-active,
.line-dotted{

    position:absolute;

    left:0;

    border-radius:20px;
}

/*
   CENTRADO EXACTO
*/

.line-base,
.line-active{

    top:calc(
        var(--icon-size)
        + 18px
        + (var(--circle-size) / 2)
        - (var(--line-height) / 2)
    );
}

.line-dotted{

    top:calc(
        var(--icon-size)
        + 18px
        + (var(--circle-size) / 2)
        - (var(--dotted-height) / 2)
    );
}

/* linea gris */

.line-base{

    width:100%;

    height:var(--line-height);

    background:#ECECEC;

    z-index:1;
}

body.dark-theme .line-base{
    width:100%;
    height:var(--line-height);
    background:#505050;
    z-index:1;
}

/* linea amarilla */

.line-active{

    width:0;

    height:var(--line-height);

    z-index:2;

    border:3px solid #FFFFFF;

    background:#bc955b;

    transition:.4s ease;
}

body.dark-theme .line-active{
  width:0;
  height:var(--line-height);
  z-index:2;
  border:3px solid #606060;
  background:#bc955b;
  transition:.4s ease;
}

/* linea punteada */

.line-dotted{

    height:var(--dotted-height);

    z-index:3;

    background-image:
    radial-gradient(circle, #bc955b 2px, transparent 2px);

    background-size:12px 4px;

    background-repeat:repeat-x;

    transition:.4s ease;
}

/* =========================
   BOTONES
========================== */

.controls{

    margin-top:60px;

    display:flex;

    justify-content:space-between;

    gap:15px;
}

.controls .btn{
    min-width:140px;
}

/* =========================
   TABLET
========================== */

@media(max-width:768px){

    :root{

        --circle-size:22px;
        --circle-border:4px;

        --line-height:8px;
        --dotted-height:4px;

        --icon-size:55px;
        --icon-font:24px;
    }

    .card-steps{
        padding:35px 20px;
    }

    .steps{
        gap:6px;
    }

}

/* =========================
   MOBILE
========================== */

@media(max-width:480px){

    :root{

        --circle-size:18px;
        --circle-border:3px;

        --line-height:6px;
        --dotted-height:3px;

        --icon-size:42px;
        --icon-font:18px;
    }

    .card-steps{
        padding:25px 15px;
    }

    .steps{
        gap:4px;
    }

    .step-icon{
        margin-bottom:10px;
    }

    .line-dotted{
        background-size:10px 3px;
    }

    .controls{

        flex-direction:column;
    }

    .controls .btn{
        width:100%;
    }

}

/* =========================
   FORMULARIOS
========================= */

.form-steps{
    margin-top:50px;
}

.form-step{
    font-family: "Roboto", sans-serif;
    display:none;
    animation:fade .3s ease;
}

.form-step.active{
    display:block;
}

.form-step h3{
    color:#595959;
    margin-bottom:25px;
    display:flex;
    justify-content:center;
}

body.dark-theme .form-step h3{
    color:#323232;
    margin-bottom:25px;
    display:flex;
    justify-content:center;
}

.form-step label{
    color:#595959;
    margin-bottom:8px;
    display:block;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   DARK THEME
========================== */

body.dark-theme #form{
    background:#121212;
}

/* CARD */

body.dark-theme .card-steps{

    background:#1b1b1b;

    border:1px solid #333;

    box-shadow:0 8px 25px rgba(0,0,0,.35);
}

/* AREA SUPERIOR */

body.dark-theme .card-steps::before{

    background:#111111;
}

/* ICONOS */

body.dark-theme .step-icon{
    color:#777;
}

body.dark-theme .step.completed .step-icon,
body.dark-theme .step.active .step-icon{
    color:#bc955b;
}

/* CIRCULOS */

body.dark-theme .circle{

    background:#2a2a2a;

    border-color:#bc955b;
}

body.dark-theme .step.completed .circle{
    background:#ffffff;
}

body.dark-theme .step.active .circle{
    background:#ffffff;
}

/* LINEA BASE */

body.dark-theme .line-base{
    background:#333;
}

/* LINEA ACTIVA */

body.dark-theme .line-active{

    background:#bc955b;

    border-color:#626262;
}

/* LINEA PUNTEADA */

body.dark-theme .line-dotted{

    background-image:
    radial-gradient(circle, #bc955b 2px, transparent 2px);
}

/* FORMULARIOS */

body.dark-theme .form-step{
    color:#ffffff;
}

body.dark-theme .form-step h3{
    color:#ffffff;
}

body.dark-theme .form-step label{
    color:#d9d9d9;
}

/* INPUTS */

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme textarea{

    background:#242424;

    border:1px solid #444;

    color:#ffffff;
}

body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus,
body.dark-theme textarea:focus{

    background:#242424;

    color:#ffffff;

    border-color:#bc955b;

    box-shadow:0 0 0 .2rem rgba(188,149,91,.25);
}

/* PLACEHOLDER */

body.dark-theme .form-control::placeholder,
body.dark-theme textarea::placeholder{
    color:#999;
}

/* BOTONES */

.controls .btn-light{

    background:#ffffff;

}

body.dark-theme .controls .btn-light{

    background:#1b1b1b;

    border:1px solid #262626;

    color:#ffffff;
}

.controls .btn-light:hover{
    background:#f9f9f9;
}

.controls .btn-light i{
    transition:.3s ease;
    display:inline-block;
}

.controls .btn-light:hover i{
    transform:scale(1.2);
}

body.dark-theme .controls .btn-light:hover{
    background:#1d1d1d;
}

body.dark-theme .controls .btn-light i{
    transition:.3s ease;
    display:inline-block;
}

body.dark-theme .controls .btn-light:hover i{
    transform:scale(1.2);
}

body.dark-theme .controls .btn-warning{

    background:#bc955b;

    border-color:#bc955b;

    color:#ffffff;
}

body.dark-theme .controls .btn-warning:hover{

    background:#a8844f;

    border-color:#a8844f;
}


/* =========================
   ESTILOS FORMULARIOS
========================== */


.form-row-custom{
    margin-bottom:12px;
}

/* COLUMNA IZQUIERDA */

.form-label-box{

    background:#fcfcfc;

    height:100%;

    min-height:62px;

    display:flex;

    align-items:center;

    padding:15px 18px;

    font-weight:600;

    color:#333;

    border-top-left-radius:6px;
    border-bottom-left-radius:6px;

    border:1px solid #cfcfcf;
}


/* COLUMNA DERECHA */

.form-input-box{

    position:relative;

    background:#ffffff;

    padding:10px;

    border-top-right-radius:6px;
    border-bottom-right-radius:6px;

    border:1px solid #cfcfcf;

    border-left:0;
}

/* INPUT */

.custom-input{

    height:42px;

    padding-right:45px;

    border:1px solid #cfcfcf;

    border-radius:10px;
}

.custom-input:focus {
  border-color:#bc955b !important;
  box-shadow:
  0 0 0 4px rgba(188,149,91,.15);
  transition:.2s ease;
}

/* ICONO */

.input-check{

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    color:#808080;

    font-size:20px;
}

/* FILA COMPLETA */

.form-row-custom{

    border:1px solid #cfcfcf;

    border-radius:8px;

    overflow:hidden;

    background:#efefef;
}

/* ELIMINA BORDES INDIVIDUALES */

.form-label-box,
.form-input-box{

    border:none !important;

    border-radius:0 !important;
}

/* SEPARADORES INTERNOS */

.form-row-custom > div{

    border-right:1px solid #cfcfcf;
}

/* QUITAR ÚLTIMO BORDE */

.form-row-custom > div:last-child{
    border-right:none;
}

input[type="checkbox"]:hover{
  border-color: #bc955b;
  box-shadow: 0 0 0 4px rgba(188, 149, 91, 0.25);
  transition: all 0.2s ease;
}

input[type="checkbox"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(188, 149, 91, 0.35);
}

.form-row-custom{
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  overflow: hidden;
}

.textarea-label{
  height: 100%;
  min-height: 140px;

  display: flex;
  align-items: flex-start;   /* arriba */
  justify-content: center;   /* centrado horizontal */

  padding-top: 18px;

  background: #f5f5f5;
  font-weight: 600;
}

.textarea-container{
  padding: 12px;
  background: #fff;
  height: 100%;
}

.custom-textarea{
  resize: none;
  border-radius: 10px;
  min-height: 110px;
  border: 1px solid #cfcfcf;
  padding: 12px;
}

.custom-textarea:focus{
  border-color: #bc955b;
  box-shadow: 0 0 0 4px rgba(188,149,91,0.20);
}

.form-title{
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #691b32;
  transition: all 0.2s ease;
}

.btn-submit-survey{
    background: #6f1733;
    color: #fff;

    border: none;
    border-radius: 40px;

    padding: 14px 28px;

    font-size: 16px;
    font-weight: 700;

    min-width: 170px;

    transition: all 0.25s ease;

    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.btn-submit-survey:hover{
    background: #8a2144;
    transform: translateY(-1px);

    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

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

body.dark-theme .btn-submit-survey{
    background: #bc955b !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;
}

body.dark-theme .btn-submit-survey:hover{
    background: #c8ae87 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15) !important;
}

.centrado{
  display:flex;
  justify-content:center;
}

/* =========================
   DARK THEME FORMULARIOS
========================== */

body.dark-theme .form-row-custom{
    background:#1b1b1b;
    border:1px solid #333;
}

body.dark-theme .form-row-custom > div{
    border-right:1px solid #333;
}

/* LABEL */

body.dark-theme .form-label-box,
body.dark-theme .textarea-label{

    background:#232323;

    color:#f1f1f1;
}

/* INPUT CONTAINER */

body.dark-theme .form-input-box,
body.dark-theme .textarea-container{

    background:#1f1f1f;
}

/* INPUTS */

body.dark-theme .custom-input,
body.dark-theme .custom-textarea{

    background:#2a2a2a;
    color:#f5f5f5;
    border:1px solid #444;
}

/* PLACEHOLDER */

body.dark-theme .custom-input::placeholder,
body.dark-theme .custom-textarea::placeholder{

    color:#9d9d9d;
}

/* FOCUS */

body.dark-theme .custom-input:focus,
body.dark-theme .custom-textarea:focus{

    background:#2d2d2d;

    border-color:#bc955b !important;

    box-shadow:
    0 0 0 4px rgba(188,149,91,.20);
}

/* ICONOS */

body.dark-theme .input-check{
    color:#b5b5b5;
    accent-color:#bc955b !important;
}

body.dark-theme .form-check-input{
    accent-color:#bc955b !important;
}

/* CHECKBOX */

body.dark-theme input[type="checkbox"]{
    border-color:#cbcbcb;
    accent-color:#bc955b !important;
}

body.dark-theme input[type="checkbox"]:checked{
    border-color:#bc955b !important;
    accent-color:#bc955b !important;
    background-color:#bc955b !important;
}

body.dark-theme input[type="checkbox"]:hover{
    border-color:#bc955b !important;
    box-shadow:
    0 0 0 4px rgba(188,149,91,0.25);
    accent-color:#bc955b !important;
}

body.dark-theme input[type="checkbox"]:focus{
    outline: none;
    box-shadow:
    0 0 0 4px rgba(188,149,91,0.35);
    accent-color:#bc955b !important;
}

/* TITULO */

body.dark-theme .form-title{
    color:#d7b07a;
}

/* BOTON */

body.dark-theme .btn-submit-survey{

    background:#691b32;

    color:#fff;

    box-shadow:
    0 4px 10px rgba(0,0,0,0.35);
}

body.dark-theme .btn-submit-survey:hover{

    background:#8a2144;

    box-shadow:
    0 6px 16px rgba(0,0,0,0.45);
}

/* TEXTAREA */

body.dark-theme .custom-textarea{
    background:#2a2a2a;
}

/* SCROLLBAR TEXTAREA */

body.dark-theme .custom-textarea::-webkit-scrollbar{
    width:10px;
}

body.dark-theme .custom-textarea::-webkit-scrollbar-track{
    background:#1f1f1f;
}

body.dark-theme .custom-textarea::-webkit-scrollbar-thumb{
    background:#555;
    border-radius:10px;
}

body.dark-theme .custom-textarea::-webkit-scrollbar-thumb:hover{
    background:#777;
}


/* INPUT INVALIDO */

.custom-input.is-invalid,
.custom-textarea.is-invalid{

    border-color:#691b32 !important;

    box-shadow:
    0 0 0 4px rgba(220,53,69,0.15) !important;
}

/* ICONO INVALIDO */

.custom-input.is-invalid + .input-check{

    color:rgba(255, 255, 255, 0) !important;
}