/* CondisApp - utilidades para los bloques HTML de Experience Builder: conmutador de
 * idioma (.cnd-es / .cnd-ca) y estilo de boton (.cnd-boton).
 *
 * (El nombre del recurso dice "I18n" por historia: nacio solo para el idioma.)
 *
 * Por que existe: el "HTML Editor" de Builder rechaza <style> y atributos data-*
 * ("The markup includes unsupported tags or attributes"), pero si admite class y
 * style inline. Este fichero aporta las reglas que el bloque no puede llevar dentro.
 *
 * Como se usa en un bloque:
 *     <span class="cnd-es">Atras</span>
 *     <span class="cnd-ca" style="display:none">Tornar</span>
 *
 * El castellano se ve por defecto (sin depender de este CSS, asi que no parpadea).
 * El catalan va oculto con style inline y se revela aqui con !important, que en CSS
 * gana a un style inline sin !important.
 *
 * Lo carga <ltng:require> desde CondisAppLoginForm, CondisAppForgotPassword y
 * CondisAppSelfRegister, de modo que esta disponible en las tres paginas del site.
 * Salesforce pone <html lang="ca"> cuando la URL lleva ?language=ca (en minuscula).
 */
html[lang="ca"] .cnd-es { display: none !important; }
html[lang="ca"] .cnd-ca { display: revert !important; }


/* -------------------------------------------------------------------------
 * .cnd-boton - boton de los bloques HTML de Builder
 *
 * Por que existe: las clases slds-button que trae Builder dan un boton mas bajo
 * y menos redondeado que los botones de dentro de los componentes, y se notaba
 * al ponerlos uno debajo del otro. Medido en UAT:
 *
 *     componente (.sfdc_button)  ->  47px de alto, radio 6px, 15px/600
 *     bloque con slds-button     ->  32px de alto, radio 4px, 14px/400
 *
 * Estos valores replican el boton del componente. Usar SOLO esta clase en el
 * enlace, sin las slds-button-*, para que no compitan. Lleva !important porque
 * no se puede garantizar el orden de carga de las hojas de estilo de SLDS.
 *
 * Si algun dia cambia la paleta, esto debe ir a la par con .sfdc_button y
 * .condisapp-back-button de los componentes.
 * ------------------------------------------------------------------------- */
.cnd-boton {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 5px 0 !important;
    padding: 12px !important;
    background-color: #1b3e7d !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer;
}

.cnd-boton:hover,
.cnd-boton:focus {
    background-color: #142f60 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
