/* --- STRA FORMS WP: TEMA UNICO ---
   Corporativo y Legacy son ahora ajustes del mismo tema. Los colores
   llegan como variables en el style del contenedor, calculadas en PHP
   desde el panel "Diseño". Aqui solo viven sus valores de respaldo. */

.sfwp-wrapper[data-estilo] {
    all: initial; /* Reseteo severo para aislar de temas agresivos como Divi o Elementor */
    --sfwp-text: #1d2327;
    --sfwp-border: rgba(29, 35, 39, 0.28);
    --sfwp-line: rgba(29, 35, 39, 0.15);
    --sfwp-err: #d63638;
    --sfwp-solid: #ffffff;
    --sfwp-acento: var(--prb-color-primary, #0033a0);
    --sfwp-btn-text: #ffffff;
    --sfwp-prev: var(--sfwp-acento);
    --sfwp-acento-legible: var(--sfwp-acento);
    --sfwp-acento-suave: color-mix(in srgb, var(--sfwp-acento) 10%, transparent);
    --sfwp-acento-medio: color-mix(in srgb, var(--sfwp-acento) 20%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 20px 0;
    color: var(--sfwp-text);
    box-sizing: border-box;
}

.sfwp-wrapper[data-estilo] *,
.sfwp-wrapper[data-estilo] *::before,
.sfwp-wrapper[data-estilo] *::after {
    box-sizing: border-box;
}

/* Caja con fondo (lo que antes era Legacy) */
.sfwp-wrapper[data-fondo="color"] {
    background-color: var(--sfwp-bg, transparent);
    padding: 35px 30px;
    border: 1px solid var(--sfwp-line);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

/* =====================================================================
   Columnas: cada item ocupa su parte de una rejilla de 12. Se decide por
   el ancho del formulario, no de la pantalla, para que tambien se apile
   dentro de una columna estrecha.
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-form {
    container-type: inline-size;
}

/* :not([hidden]) para no pisar los pasos ocultos del formulario por pasos */
.sfwp-wrapper[data-estilo] .sfwp-paso:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
}

.sfwp-wrapper[data-estilo] .sfwp-paso > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.sfwp-wrapper[data-estilo] .sfwp-paso > .sfwp-ancho-75 { grid-column: span 9; }
.sfwp-wrapper[data-estilo] .sfwp-paso > .sfwp-ancho-66 { grid-column: span 8; }
.sfwp-wrapper[data-estilo] .sfwp-paso > .sfwp-ancho-50 { grid-column: span 6; }
.sfwp-wrapper[data-estilo] .sfwp-paso > .sfwp-ancho-33 { grid-column: span 4; }
.sfwp-wrapper[data-estilo] .sfwp-paso > .sfwp-ancho-25 { grid-column: span 3; }

/* Respaldo para navegadores sin consultas de contenedor */
@media (max-width: 600px) {
    .sfwp-wrapper[data-estilo] .sfwp-paso > [class*="sfwp-ancho-"] { grid-column: 1 / -1; }
}

@container (max-width: 480px) {
    .sfwp-wrapper[data-estilo] .sfwp-paso > [class*="sfwp-ancho-"] { grid-column: 1 / -1; }
}

/* =====================================================================
   Campos y etiquetas (comunes)
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-field-group {
    margin-bottom: 22px;
    display: block;
}

.sfwp-wrapper[data-estilo] label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--sfwp-text);
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Los titulos siguen el color del formulario, no el de los h2-h4 del tema */
.sfwp-wrapper[data-estilo] .sfwp-el-titulo {
    color: var(--sfwp-text);
}

.sfwp-wrapper[data-estilo] .sfwp-el-parrafo a {
    color: inherit;
}

.sfwp-wrapper[data-estilo] .sfwp-required-text {
    color: var(--sfwp-err);
    font-style: italic;
    font-weight: normal;
    font-size: 13px;
    margin-left: 4px;
}

.sfwp-wrapper[data-estilo] .sfwp-required-ast {
    font-style: normal;
    font-size: 14px;
    margin-left: 0;
}

.sfwp-wrapper[data-estilo] textarea {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

/* =====================================================================
   Estilo de campo: caja blanca (lo que antes era Corporativo)
   ===================================================================== */
.sfwp-wrapper[data-estilo="caja"] input[type="text"],
.sfwp-wrapper[data-estilo="caja"] input[type="email"],
.sfwp-wrapper[data-estilo="caja"] input[type="number"],
.sfwp-wrapper[data-estilo="caja"] input[type="tel"],
.sfwp-wrapper[data-estilo="caja"] input[type="date"],
.sfwp-wrapper[data-estilo="caja"] input[type="time"],
.sfwp-wrapper[data-estilo="caja"] input[type="url"],
.sfwp-wrapper[data-estilo="caja"] textarea,
.sfwp-wrapper[data-estilo="caja"] select {
    width: 100%;
    height: 44px; /* Altura ideal y accesible para pantallas táctiles móviles */
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #757575;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

.sfwp-wrapper[data-estilo="caja"] textarea {
    height: auto;
}

.sfwp-wrapper[data-estilo="caja"] input:focus,
.sfwp-wrapper[data-estilo="caja"] textarea:focus,
.sfwp-wrapper[data-estilo="caja"] select:focus {
    border-color: var(--sfwp-acento);
    box-shadow: 0 0 0 1px var(--sfwp-acento);
}

.sfwp-wrapper[data-estilo="caja"] input.sfwp-input-error {
    border-color: var(--sfwp-err) !important;
    background-color: #fff8f8;
}

.sfwp-wrapper[data-estilo="caja"] .iti__selected-flag {
    background-color: #f8f9fa;
    border-right: 1px solid #757575;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Etiqueta sobre el borde: solo en los campos que tienen caja */
.sfwp-wrapper[data-estilo="caja"][data-etiqueta="borde"] .sfwp-field-group:is([data-field-type="texto"], [data-field-type="area"], [data-field-type="email"], [data-field-type="tel"], [data-field-type="numero"], [data-field-type="date"], [data-field-type="time"], [data-field-type="url"], [data-field-type="select"], [data-field-type="pais"], [data-field-type="ciudad"], [data-field-type="unidad"]) {
    position: relative;
}

.sfwp-wrapper[data-estilo="caja"][data-etiqueta="borde"] .sfwp-field-group:is([data-field-type="texto"], [data-field-type="area"], [data-field-type="email"], [data-field-type="tel"], [data-field-type="numero"], [data-field-type="date"], [data-field-type="time"], [data-field-type="url"], [data-field-type="select"], [data-field-type="pais"], [data-field-type="ciudad"], [data-field-type="unidad"]) > label {
    position: absolute;
    top: -8px;
    left: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #4a4f55;
    background: #ffffff;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfwp-wrapper[data-estilo="caja"][data-etiqueta="borde"] .sfwp-field-group:focus-within > label {
    color: var(--sfwp-acento-legible);
}

.sfwp-wrapper[data-estilo="caja"][data-etiqueta="borde"] .sfwp-field-group input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.sfwp-wrapper[data-estilo="caja"][data-etiqueta="borde"] .sfwp-field-group select {
    height: 50px;
    padding-top: 12px;
}

.sfwp-wrapper[data-estilo="caja"][data-etiqueta="borde"] .sfwp-field-group textarea {
    padding-top: 16px;
}

/* =====================================================================
   Estilo de campo: linea inferior que toma el color del texto
   (lo que antes era Legacy)
   ===================================================================== */
.sfwp-wrapper[data-estilo="linea"] .sfwp-field-group {
    margin-bottom: 25px;
}

.sfwp-wrapper[data-estilo="linea"] label {
    font-weight: 700;
    margin-bottom: 8px;
}

.sfwp-wrapper[data-estilo="linea"] input[type="text"],
.sfwp-wrapper[data-estilo="linea"] input[type="email"],
.sfwp-wrapper[data-estilo="linea"] input[type="number"],
.sfwp-wrapper[data-estilo="linea"] input[type="tel"],
.sfwp-wrapper[data-estilo="linea"] input[type="date"],
.sfwp-wrapper[data-estilo="linea"] input[type="time"],
.sfwp-wrapper[data-estilo="linea"] input[type="url"],
.sfwp-wrapper[data-estilo="linea"] textarea,
.sfwp-wrapper[data-estilo="linea"] select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--sfwp-border);
    color: var(--sfwp-text);
    padding: 10px 0;
    font-size: 16px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.3s ease;
    border-radius: 0;
}

.sfwp-wrapper[data-estilo="linea"] input::placeholder,
.sfwp-wrapper[data-estilo="linea"] textarea::placeholder {
    color: var(--sfwp-text);
    opacity: 0.5;
}

.sfwp-wrapper[data-estilo="linea"] select option {
    background: var(--sfwp-solid);
    color: var(--sfwp-text);
}

.sfwp-wrapper[data-estilo="linea"] input:focus,
.sfwp-wrapper[data-estilo="linea"] textarea:focus,
.sfwp-wrapper[data-estilo="linea"] select:focus {
    border-bottom: 2px solid var(--sfwp-acento);
}

.sfwp-wrapper[data-estilo="linea"] input.sfwp-input-error {
    border-bottom-color: var(--sfwp-err) !important;
}

.sfwp-wrapper[data-estilo="linea"] .iti__arrow {
    border-top-color: currentColor;
}

.sfwp-wrapper[data-estilo="linea"] .iti__arrow--up {
    border-bottom-color: currentColor;
}

/* =====================================================================
   Radio y casillas: una opcion debajo de otra
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.sfwp-wrapper[data-estilo] .sfwp-option-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
}

.sfwp-wrapper[data-estilo] input[type="radio"],
.sfwp-wrapper[data-estilo] input[type="checkbox"] {
    flex: none;
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--sfwp-acento);
}

/* =====================================================================
   Errores
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-inline-error {
    margin-top: 5px;
    color: var(--sfwp-err);
}

.sfwp-wrapper[data-estilo] .sfwp-dup-error,
.sfwp-wrapper[data-estilo] .sfwp-file-error,
.sfwp-wrapper[data-estilo] .sfwp-paso-error {
    color: var(--sfwp-err);
}

.sfwp-wrapper[data-estilo] .sfwp-field-group.tiene-error input,
.sfwp-wrapper[data-estilo] .sfwp-field-group.tiene-error select,
.sfwp-wrapper[data-estilo] .sfwp-field-group.tiene-error textarea,
.sfwp-wrapper[data-estilo] .sfwp-field-group.tiene-error .sfwp-file-zona {
    border-color: var(--sfwp-err);
}

/* =====================================================================
   Botones
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-submit-group {
    margin-top: 30px;
}

.sfwp-wrapper[data-estilo] .sfwp-btn-submit {
    background-color: var(--sfwp-acento);
    color: var(--sfwp-btn-text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 36px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease;
    display: inline-block;
}

.sfwp-wrapper[data-estilo] .sfwp-btn-submit:hover {
    filter: brightness(0.9);
}

/* El verde de "enviado" de elements.css perdia contra el color del boton */
.sfwp-wrapper[data-estilo] .sfwp-btn-submit.sfwp-btn-enviado {
    background-color: #2e7d32;
    color: #ffffff;
}

.sfwp-wrapper[data-estilo] .sfwp-btn-prev,
.sfwp-wrapper[data-estilo] .sfwp-btn-next {
    font-family: inherit;
    border-color: var(--sfwp-acento);
}

.sfwp-wrapper[data-estilo] .sfwp-btn-prev {
    color: var(--sfwp-prev);
    border-color: var(--sfwp-prev);
}

.sfwp-wrapper[data-estilo] .sfwp-btn-next {
    background: var(--sfwp-acento);
    color: var(--sfwp-btn-text);
}

.sfwp-wrapper[data-boton="completo"] .sfwp-btn-submit {
    width: 100%;
    padding: 15px 30px;
    border-radius: 50px;
}

.sfwp-wrapper[data-boton="completo"] .sfwp-pasos-nav {
    flex-direction: column-reverse;
}

.sfwp-wrapper[data-boton="completo"] .sfwp-btn-prev,
.sfwp-wrapper[data-boton="completo"] .sfwp-btn-next {
    width: 100%;
    margin-left: 0;
}

/* =====================================================================
   Acentos de los elementos compartidos (elements.css trae el azul
   corporativo de respaldo; aqui pasan a seguir el color del boton)
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-progress-fill,
.sfwp-wrapper[data-estilo] .sfwp-pasos-fill {
    background: var(--sfwp-acento);
}

.sfwp-wrapper[data-estilo] .sfwp-paso-num {
    background: var(--sfwp-solid);
}

.sfwp-wrapper[data-estilo] .sfwp-paso-punto.esta-activo .sfwp-paso-num,
.sfwp-wrapper[data-estilo] .sfwp-paso-punto.esta-hecho .sfwp-paso-num {
    background: var(--sfwp-acento);
    border-color: var(--sfwp-acento);
    color: var(--sfwp-btn-text);
}

.sfwp-wrapper[data-estilo] .sfwp-paso-punto.esta-hecho .sfwp-paso-num::after {
    border-left-color: var(--sfwp-btn-text);
    border-bottom-color: var(--sfwp-btn-text);
}

.sfwp-wrapper[data-estilo] .sfwp-file-zona:hover,
.sfwp-wrapper[data-estilo] .sfwp-file-field.esta-encima .sfwp-file-zona {
    border-color: var(--sfwp-acento);
    background: var(--sfwp-acento-suave);
}

.sfwp-wrapper[data-estilo] .sfwp-file-input:focus-visible + .sfwp-file-zona,
.sfwp-wrapper[data-estilo] .sfwp-file-zona:focus-within {
    outline-color: var(--sfwp-acento);
}

.sfwp-wrapper[data-estilo] .sfwp-bk-dia.esta-libre,
.sfwp-wrapper[data-estilo] .sfwp-bk-elegido {
    background: var(--sfwp-acento-suave);
}

.sfwp-wrapper[data-estilo] .sfwp-bk-dia.esta-libre:hover {
    background: var(--sfwp-acento-medio);
}

.sfwp-wrapper[data-estilo] .sfwp-bk-hora:hover {
    border-color: var(--sfwp-acento);
    background: var(--sfwp-acento-suave);
}

.sfwp-wrapper[data-estilo] .sfwp-bk-dia.esta-elegido,
.sfwp-wrapper[data-estilo] .sfwp-bk-hora.esta-elegido {
    background: var(--sfwp-acento);
    border-color: var(--sfwp-acento);
    color: var(--sfwp-btn-text);
}

.sfwp-wrapper[data-estilo] .sfwp-combo-sug-btn,
.sfwp-wrapper[data-estilo] .sfwp-combo-sug-btn:hover,
.sfwp-wrapper[data-estilo] .sfwp-combo-sug-btn:focus-visible {
    color: inherit;
}

/* =====================================================================
   Telefono con intl-tel-input
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-phone-wrapper {
    display: block;
    width: 100%;
}

.sfwp-wrapper[data-estilo] .iti {
    width: 100%;
}

/* La lista de paises es blanca siempre; sin esto heredaba el texto
   blanco de un fondo oscuro y no se leia */
.sfwp-wrapper[data-estilo] .iti__country-list {
    color: #1d2327;
}

.sfwp-wrapper[data-estilo] .sfwp-phone-input-raw {
    width: 100% !important;
    min-width: 0 !important; /* Previene definitivamente el desbordamiento en móviles */
}

/* =====================================================================
   Mensajes de estado
   ===================================================================== */
.sfwp-wrapper[data-estilo] .sfwp-status-message {
    margin-top: 20px;
    padding: 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.sfwp-wrapper[data-estilo] .sfwp-status-message.sfwp-success {
    background-color: #edf7ed;
    color: #1e4620;
    border: 1px solid #c8e6c9;
}

.sfwp-wrapper[data-estilo] .sfwp-status-message.sfwp-error {
    background-color: #fdecea;
    color: #611a15;
    border: 1px solid #f8c1be;
}

/* Responsive nativo para móviles */
@media screen and (max-width: 768px) {
    .sfwp-wrapper[data-estilo] {
        padding: 10px;
    }

    .sfwp-wrapper[data-fondo="color"] {
        padding: 26px 18px;
    }

    .sfwp-wrapper[data-estilo] .sfwp-btn-submit {
        width: 100%;
        text-align: center;
    }
}