/* ==========================================================================
   Lastur — estilos propios de la plantilla
   --------------------------------------------------------------------------
   Helix3 carga este fichero automaticamente si existe, y lo hace DESPUES de
   template.css, asi que gana sin necesidad de !important salvo donde haya que
   pisar el CSS en linea de los parametros de la plantilla.

   Todo lo de aqui esta acotado a .bfFormDiv y .bfElemWrap, que son de
   BreezingForms, de modo que no afecta a ningun otro formulario del sitio.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Por que hacia falta esto
   --------------------------------------------------------------------------
   BreezingForms genera el marcado con clases de Bootstrap 2 (row-fluid,
   control-group, controls, input-append, form-actions, icon-*) y esta
   plantilla es Bootstrap 3. El legacy.css de Helix3 cubre casi todas, pero:

   - Los input reciben "display: block" de template.css SIN ancho, asi que se
     quedaban en su tamano intrinseco (~20 caracteres). Por eso el campo de
     fecha salia estrecho mientras los demas parecian anchos.
   - El boton del calendario va envuelto en un <span> extra, asi que no es
     :last-child de .input-append y no recibia las esquinas redondeadas.
   - .icon-calendar y .icon-asterisk son glifos de Bootstrap 2 que no existen
     ni en font-awesome.min.css ni en legacy.css: no se pintaba nada.
   - .controls.form-inline ponia las etiquetas en linea con los campos, que es
     lo que descolocaba el textarea de comentarios y la casilla de aceptacion.
   -------------------------------------------------------------------------- */


/* --- El panel del formulario --------------------------------------------- */

/* Sin esto los campos quedan pegados a los bordes del panel translucido */
.bfFormDiv {
    padding: 28px 30px 0;
    border-radius: 4px;
}


/* --- Estructura de cada campo: etiqueta arriba, campo debajo -------------- */

.bfFormDiv .bfElemWrap {
    margin-bottom: 18px;
}

/* form-inline es lo que alineaba etiqueta y campo en la misma linea */
.bfFormDiv .bfElemWrap .controls,
.bfFormDiv .bfElemWrap .controls.form-inline {
    display: block;
}

.bfFormDiv .bfElemWrap .control-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

/* El asterisco de campo obligatorio: icon-asterisk no tiene glifo, se pinta */
.bfFormDiv .bfElemWrap .control-label .icon-asterisk {
    font-style: normal;
    color: #c0392b;
    font-size: .8em;
    vertical-align: super;
    margin-left: 2px;
}

.bfFormDiv .bfElemWrap .control-label .icon-asterisk:before {
    content: "*";
    font-family: inherit;
}


/* --- Campos de texto ------------------------------------------------------ */

.bfFormDiv .bfElemWrap input[type="text"],
.bfFormDiv .bfElemWrap input[type="email"],
.bfFormDiv .bfElemWrap input[type="tel"],
.bfFormDiv .bfElemWrap input[type="number"],
.bfFormDiv .bfElemWrap input[type="password"],
.bfFormDiv .bfElemWrap select,
.bfFormDiv .bfElemWrap textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid #b6c2c0;
    border-radius: 4px;
    box-shadow: none;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* El textarea no puede heredar los 44px de altura fija de los campos de una
   linea: necesita crecer */
.bfFormDiv .bfElemWrap textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

/* El CSS en linea de los parametros pone los input a rgba(255,255,255,.2),
   que sobre el panel blanco translucido los dejaba casi invisibles. Se sube
   la opacidad para que se lean, conservando el aire del diseno original.
   Necesita !important y mas especificidad porque esa regla ya lo lleva. */
.bfFormDiv .bfElemWrap input.ff_elem,
.bfFormDiv .bfElemWrap textarea.ff_elem,
.bfFormDiv .bfElemWrap select.ff_elem {
    background-color: rgba(255, 255, 255, .92) !important;
}

/* Foco en el color de la marca en lugar del azul por defecto de Bootstrap */
.bfFormDiv .bfElemWrap input[type="text"]:focus,
.bfFormDiv .bfElemWrap input[type="email"]:focus,
.bfFormDiv .bfElemWrap input[type="tel"]:focus,
.bfFormDiv .bfElemWrap input[type="number"]:focus,
.bfFormDiv .bfElemWrap select:focus,
.bfFormDiv .bfElemWrap textarea:focus {
    border-color: #00a99d;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 169, 157, .18);
    background-color: #fff !important;
}

.bfFormDiv .bfElemWrap ::-webkit-input-placeholder { color: #8a9391; }
.bfFormDiv .bfElemWrap ::-moz-placeholder          { color: #8a9391; opacity: 1; }
.bfFormDiv .bfElemWrap :-ms-input-placeholder      { color: #8a9391; }


/* --- Campo de fecha: input + boton de calendario como un solo grupo ------- */

.bfFormDiv .bfElemWrap .input-append {
    display: flex;
    width: 100%;
    margin: 0;

    /* ESTO ARREGLA EL TEXTO INVISIBLE.
       legacy.css trae ".input-append, .input-prepend { font-size: 0 }", el
       truco de Bootstrap 2 para eliminar el hueco entre elementos
       inline-block. Bootstrap 2 lo compensaba con
       ".input-append input { font-size: 14px }", pero sppagebuilder.css lo
       pisa con "#sp-page-builder input { font-size: inherit }", que gana
       porque lleva un ID. Resultado: el input heredaba 0 y lo que se
       escribia era invisible. Afectaba al campo de fecha y al del captcha.

       Se devuelve el tamano AL CONTENEDOR: como el input hereda de el, basta
       con esto y no hay que pelearse con la especificidad del ID.
       Ya no hace falta el font-size: 0 porque este contenedor es flex y los
       nodos de texto en blanco no generan elementos flex. */
    font-size: 16px;
}

.bfFormDiv .bfElemWrap .input-append > input,
.bfFormDiv .bfElemWrap .input-append > input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;              /* sin esto flex no deja encoger el input */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

/* BreezingForms envuelve el boton en un <span> sin clase */
.bfFormDiv .bfElemWrap .input-append > span {
    display: flex;
    flex: 0 0 auto;
}

/* Vale tanto para el boton del calendario (.bfCalendar) como para el de
   recargar el captcha, que no lleva clase propia */
.bfFormDiv .bfElemWrap .input-append .btn,
.bfFormDiv .bfElemWrap .input-append .bfCalendar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #00a99d;
    border-radius: 0 4px 4px 0;
    background: #00a99d;
    color: #fff;
    box-shadow: none;
    text-shadow: none;
    transition: background-color .15s ease-in-out;
}

.bfFormDiv .bfElemWrap .input-append .btn:hover,
.bfFormDiv .bfElemWrap .input-append .btn:focus,
.bfFormDiv .bfElemWrap .input-append .bfCalendar:hover,
.bfFormDiv .bfElemWrap .input-append .bfCalendar:focus {
    background: #008c82;
    border-color: #008c82;
    color: #fff;
}

/* icon-calendar e icon-refresh son glifos de Bootstrap 2 que no existen ni en
   font-awesome.min.css ni en legacy.css, asi que no se pintaba nada. La
   plantilla carga Font Awesome 4.4.0: se usan sus glifos. */
.bfFormDiv .bfElemWrap .input-append .icon-calendar:before,
.bfFormDiv .bfElemWrap .input-append .icon-refresh:before {
    font-family: 'FontAwesome';
    font-size: 16px;
    line-height: 1;
}

.bfFormDiv .bfElemWrap .input-append .icon-calendar:before { content: "\f073"; }
.bfFormDiv .bfElemWrap .input-append .icon-refresh:before  { content: "\f021"; }


/* --- Casillas de verificacion y radios ----------------------------------- */

/* Sin esto heredan los 44px de altura y el ancho del 100% de los campos de
   texto. Se les da un tamano comodo de pulsar, sobre todo en movil. */
.bfFormDiv .bfElemWrap input[type="checkbox"],
.bfFormDiv .bfElemWrap input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    vertical-align: middle;
    accent-color: #00a99d;
    cursor: pointer;
    flex: 0 0 auto;
}

/* Casilla y su texto en la misma linea, con la casilla delante.
   :has() no lo soporta todo navegador; si falla, queda la etiqueta encima y
   la casilla debajo, que tambien es legible. */
.bfFormDiv .bfElemWrap:has(input[type="checkbox"]) .controls > div {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.bfFormDiv .bfElemWrap:has(input[type="checkbox"]) .control-label {
    margin-bottom: 0;
    font-weight: 400;
}

.bfFormDiv .bfElemWrap:has(input[type="checkbox"]) .control-label a {
    text-decoration: underline;
}


/* --- Pie del formulario y boton de envio --------------------------------- */

.bfFormDiv .form-actions {
    margin: 22px 0 0;
    padding: 18px 20px;
    background: rgba(0, 0, 0, .03);
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0 0 4px 4px;
    text-align: right;
}

/* El color ya viene del CSS en linea (#bfSubmitButton); aqui solo se anade
   el comportamiento al pasar por encima y un tamano mas comodo. */
.bfFormDiv .form-actions #bfSubmitButton,
.bfFormDiv .form-actions .btn {
    min-width: 130px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease-in-out, transform .05s ease-in-out;
}

.bfFormDiv .form-actions #bfSubmitButton:hover,
.bfFormDiv .form-actions #bfSubmitButton:focus {
    background: #008c82;
}

.bfFormDiv .form-actions #bfSubmitButton:active {
    transform: translateY(1px);
}


/* --- Mensajes de error --------------------------------------------------- */

/* alert-error es de Bootstrap 2; en Bootstrap 3 es alert-danger y por eso
   el aviso salia sin color. */
.bfFormDiv .bfErrorMessage,
.bfFormDiv .alert-error {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    background-color: #f2dede;
    color: #a94442;
}

.bfFormDiv .bfElemWrap.control-group.error .control-label {
    color: #a94442;
}

.bfFormDiv .bfElemWrap.control-group.error input,
.bfFormDiv .bfElemWrap.control-group.error textarea,
.bfFormDiv .bfElemWrap.control-group.error select {
    border-color: #a94442;
}


/* --- Calendario emergente (pickadate) ----------------------------------- */

/* Sobre el maquetador de paginas hay elementos con z-index alto; sin esto el
   calendario puede quedar por debajo. */
.bfFormDiv .picker,
.picker--opened {
    z-index: 1200;
}

.picker__frame {
    border-radius: 4px;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background: #00a99d;
    color: #fff;
}

.picker__day--today:before {
    border-top-color: #00a99d;
}


/* --- Movil --------------------------------------------------------------- */

@media (max-width: 767px) {
    .bfFormDiv .bfElemWrap {
        margin-bottom: 14px;
    }

    .bfFormDiv .form-actions {
        padding: 14px;
        text-align: center;
    }

    .bfFormDiv .form-actions #bfSubmitButton,
    .bfFormDiv .form-actions .btn {
        width: 100%;
    }
}