/* =================================================================
   BOTONES GLOBALES DEL PROGRAMA — inmopc
   Font Awesome 5 Free (local)  |  Iconos definidos via CSS (::before)
   Extraído y generalizado desde fichaInmueble2Style.css
   ================================================================= */





/* ---- Carga Font Awesome 7.2 (local) ------------------------------ */
@import url("../assets/fontawesome/7.2.0/css/all.min.css");

/* =================================================================
   VARIABLES DE COLOR
   ================================================================= */
:root {
    /* --- Comunicación --- */
    --btn-email-color:      #5bc0de;   
    --btn-sms-color:        #5cb85c;   
    --btn-print-color:      #000000;   
    --btn-whatsapp-color:   #24cc63;   
    --btn-call-color:       #334155;   
    --btn-enviar-color:     #f59e0b;   
    --btn-url-color:      #d89210;  
    --btn-guardar-color:   #0c9623;
    --btn-calc-color:     #f0ad4e;
    /* --- Acciones generales --- */
    --btn-alarma-color:     #d97706;
    --btn-trash-color:      #e53935;
    --btn-duplicate-color:  #e5be01;   
    --btn-sign-color:       #9d4f82;   
    --btn-edit-color:       #0369a1;   
    --btn-exit-color:       #555555;   
    --btn-nueva-color:      #22c55e;
    --btn-actualizar-color: #0d9488;   
    --btn-buscar-color:     #6366f1;
    --btn-check-color:     #16a34a;   
    --btn-x-color:          #ef4444;
    --btn-mls-color:        #2563eb;

    --btn-renovar-color:    #1e3a8a;
    --btn-remesaBancaria-color:    #3b82f6;  
    --btn-filtros-color: #6366f1;
    --btn-filtrosx-color: #6366f1;

    /* --- Gestiones --- */
    --btn-visitas-color:    #20c997;   
    --btn-citas-color:      #6f42c1;   
    --btn-grupo-color:      #fd7e14;
    --btn-comercial-color:  #8b7e73;    
    /* --- Documentos y archivos --- */
    --btn-descargar-color:  #2e9421;
    --btn-subir-color:      #dc2626;
    /* --- Finanzas (FIJOS) --- */
    --btn-extractos-color:  #17a2b8;   
    --btn-cobros-color:     #818181;   
    --btn-euro-color:       #d4a017;
    --btn-usd-color:        #2e8b57;
    --btn-preciocambio-color: #e53935;
    /* --- Tecnología --- */
    --btn-video-color:      #337ac4;
    --btn-ia-color:         #10a37f;   
    --btn-traducir-color:   #0ea5e9;   
    --btn-geolocalizacion-color: #84cc16; 
    --btn-googleMaps-color: #4285f4;   
    --btn-camara-color: #694e2f;   
    --btn-info-color:       #312e81;   
    /* --- Valoraciones --- */
    --btn-pulgarArriba-color: #16a34a; 
    --btn-pulgarAbajo-color:  #b91c1c; 
    --btn-historial-color:  #7952b3;
    --btn-ie-color:         #1ebbee;
    /* --- Fichas (FIJOS o derivados) --- */
    --btn-cliente-color:    #ef6d00;
    --btn-inmueble-color:   #1565c0;   
    --btn-demanda-color:    #009846;   
    --btn-operaciones-color:#417054;
    --btn-financiacion-color:#375778; 
    --btn-contacto-color:   #A08464;     
    --btn-cerrar-color:     #aaaaaa;
    --btn-vistaprevia-color: #337ac4;
    --btn-catalogo-color:   #d9534f;
    --btn-avalista-color:   #b45309;
    --btn-valoracion-color: #f97316;
    --btn-facturas-color:   #990066;
    --btn-llaves-color:     #06b6d4;
    --btn-publicidad-color: #fc9980;
    --btn-listar-color:     #217346;
    --btn-operacion-color:  #16A34A;
    --btn-objetivos-color:  #021e4b;

    --btn-transition:       background-color 0.18s ease, color 0.18s ease,
                            border-color 0.18s ease, transform 0.12s ease;
    --btn-icon-ratio:       0.42;        /* ratio icono/botón — sobreescribir en inline style */

    /* --- Configuración --- */
    --btn-estadisticasConfig-color:     #10b981;   
    --btn-copiaSeguridadConfig-color:   #ef4444;   
    --btn-usuariosConfig-color:         #3b82f6;
    --btn-datosEmpresaConfig-color:     #60a5fa;    
    --btn-emailConfig-color:            #8b5cf6;   
    --btn-smsWhatappConfig-color:       #14b8a6;   
    --btn-datosConfig-color:            #f59e0b;   
    --btn-contratosConfig-color:        #eab308;   
    --btn-marcaDeAguaConfig-color:      #db2777;   
    --btn-portalesConfig-color:         #06b6d4;   
    --btn-condicionesFinancierasConfig-color: #2563eb; 
    --btn-tarifasAlquilerConfig-color:  #f97316;  
    --btn-publicidadConfig-color:       #fc9980;
    --btn-listarConfig-color:           #217346;
    --btn-operacionConfig-color:        #16A34A;  
    --btn-colaboradoresConfig-color:    #84cc16;  
    --btn-parametrosConfig-color:       #c026d3; 
    --btn-videosConfig-color:           #ef4444; 
    --btn-blogConfig-color:             #0ea5e9;  
    --btn-escaparateVirtConfig-color:   #1e40af;  
    --btn-importarDatosConfig-color:    #d97706;  
    --btn-editorWebConfig-color:        #0891b2;  
    --btn-autorizacionesConfig-color:   #16a34a;
    --btn-appPersonalizadaConfig-color: #6366f1;
    --btn-checkInConfig-color:          #22c55e;
    --btn-creditosIAConfig-color:       #10a37f;
    --btn-cuentaIAConfig-color:         #6d28d9;

}

/* =================================================================
   RESET ICONO HEREDADO (<i> inline FA 4.x)
   Permite migrar el HTML gradualmente sin romper nada.
   ================================================================= */
.botonesOpc i,
.btnPanelDerecho i,
.btnPanelDerechoSalir i,
.btnConfig i, 
.iconBtnPanelDerecho {
    display: none;
}


/* =================================================================
   BASE — BOTONES CONFIGURACIÓN (botonesConfig)
   Cuadrados, solo icono, usados en la configuración del programa 
   ================================================================= */
.btnConfig {
    height: var(--btn-size, 98px) !important;
    width: var(--btn-size, 98px) !important;
    min-width: var(--btn-size, 98px) !important;
    border-radius: 13px !important;
    background-color: #ffffff;
    border: none;
    padding: 0 !important;
    margin-right: 5px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}
.btnConfig::before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    font-size: calc(var(--btn-size, 98px) * var(--btn-icon-ratio, 0.42));
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.18s ease;
}
.btnConfig:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}


/* =================================================================
   BASE — BOTONES ICONO (botonesOpc)
   Cuadrados, solo icono, usados en la cabecera de ficha
   ================================================================= */
.botonesOpc {
    height: var(--btn-size, 38px) !important;
    width: var(--btn-size, 38px) !important;
    min-width: var(--btn-size, 38px) !important;
    border-radius: 6px !important;
    background-color: #ffffff;
    border: 1px solid;
    padding: 0 !important;
    margin-right: 5px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: var(--btn-transition);
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Icono embebido via pseudo-elemento */
.botonesOpc::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: calc(var(--btn-size, 38px) * var(--btn-icon-ratio, 0.42));
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.botonesOpc:hover {
    transform: scale(1.07);
}

/* -----------------------------------------------------------------
   MODIFICADOR .conTexto — icono a la izquierda + texto
   Uso: <button class="botonesOpc visitas conTexto">Visitas</button>
   ----------------------------------------------------------------- */
.botonesOpc.conTexto {
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    padding: 0 12px 0 8px !important;
    gap: 7px;
    white-space: nowrap;
    overflow: visible !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: var(--btn-ic, #374151) !important;
}
.botonesOpc.conTexto::before {
    flex-shrink: 0;
}
.botonesOpc.conTexto:hover {
    color: #ffffff !important;
}

/* -----------------------------------------------------------------
   MODIFICADOR .redondo — forma circular
   Uso básico:    <button class="botonesOpc visitas redondo"></button>
   Tamaño custom: <button class="botonesOpc visitas redondo" style="--btn-size: 50px;"></button>
   ----------------------------------------------------------------- */
.botonesOpc.redondo {
    border-radius: 50% !important;
}

/* -----------------------------------------------------------------
   MODIFICADOR .plano — fondo blanco siempre, sin borde, icono con color
   El icono mantiene su color en reposo Y en hover (no se vuelve blanco).
   Uso: <button class="botonesOpc nueva plano"></button>
   Combina: <button class="botonesOpc nueva plano redondo" style="--btn-size:45px;"></button>
   ----------------------------------------------------------------- */
.botonesOpc.plano {
    background-color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.botonesOpc.plano:hover {
    background-color: #f3f4f6 !important;
    border-color: transparent !important;
}
.botonesOpc.plano:hover::before {
    color: var(--btn-ic, currentColor) !important;
}

/* -----------------------------------------------------------------
   Color del icono por variante — usado por .plano:hover
   ::before
   para mantener el color original en hover (sin volverse blanco).
   ----------------------------------------------------------------- */
.botonesOpc.email          { --btn-ic: var(--btn-email-color); }
.botonesOpc.camara          { --btn-ic: var(--btn-camara-color); }
.botonesOpc.sms            { --btn-ic: var(--btn-sms-color); }
.botonesOpc.imprimir       { --btn-ic: var(--btn-print-color); }
.botonesOpc.whatsapp       { --btn-ic: var(--btn-whatsapp-color); }
.botonesOpc.trash          { --btn-ic: var(--btn-trash-color); }
.botonesOpc.alarma         { --btn-ic: var(--btn-alarma-color); }
.botonesOpc.duplicar       { --btn-ic: var(--btn-duplicate-color); }
.botonesOpc.call           { --btn-ic: var(--btn-call-color); }
.botonesOpc.fdigital       { --btn-ic: var(--btn-sign-color); }
.botonesOpc.editar         { --btn-ic: #009846; }
.botonesOpc.pdf            { --btn-ic: #d9534f; }
.botonesOpc.calc           { --btn-ic: #f0ad4e; }
.botonesOpc.gestion        { --btn-ic: #2f6edb; }
.botonesOpc.actualizar     { --btn-ic: var(--btn-actualizar-color); }
.botonesOpc.video          { --btn-ic: var(--btn-video-color); }
.botonesOpc.videoFicha     { --btn-ic: var(--btn-video-color); }
.botonesOpc.historial      { --btn-ic: var(--btn-historial-color); }
.botonesOpc.pulgarArriba   { --btn-ic: var(--btn-pulgarArriba-color); }
.botonesOpc.pulgarAbajo    { --btn-ic: var(--btn-pulgarAbajo-color); }
.botonesOpc.ia             { --btn-ic: var(--btn-ia-color); }
.botonesOpc.traducir       { --btn-ic: var(--btn-traducir-color); }
.botonesOpc.geolocalizacion{ --btn-ic: var(--btn-geolocalizacion-color); }
.botonesOpc.googleMaps     { --btn-ic: var(--btn-googleMaps-color); }
.botonesOpc.descargar      { --btn-ic: var(--btn-descargar-color); }
.botonesOpc.subir          { --btn-ic: var(--btn-subir-color); }
.botonesOpc.info           { --btn-ic: var(--btn-info-color); }
.botonesOpc.extractos      { --btn-ic: var(--btn-extractos-color); }
.botonesOpc.cobros         { --btn-ic: var(--btn-cobros-color); }
.botonesOpc.visitas        { --btn-ic: var(--btn-visitas-color); }
.botonesOpc.citas          { --btn-ic: var(--btn-citas-color); }
.botonesOpc.seguimientoGrupo { --btn-ic: var(--btn-grupo-color); }
.botonesOpc.enviar         { --btn-ic: var(--btn-enviar-color); }
.botonesOpc.buscar         { --btn-ic: var(--btn-buscar-color); }
.botonesOpc.nueva          { --btn-ic: var(--btn-nueva-color); }
.botonesOpc.llaves         { --btn-ic: var(--btn-llaves-color); }
.botonesOpc.publicidad     { --btn-ic: var(--btn-publicidad-color); }
.botonesOpc.listar     { --btn-ic: var(--btn-listar-color); }
.botonesOpc.operacion     { --btn-ic: var(--btn-operacion-color); }
.botonesOpc.renovar        { --btn-ic: var(--btn-renovar-color); }
.botonesOpc.remesaBancaria        { --btn-ic: var(--btn-remesaBancaria-color); }
.botonesOpc.filtros        { --btn-ic: var(--btn-filtros-color); }
.botonesOpc.filtrosx       { --btn-ic: var(--btn-filtrosx-color); }
.botonesOpc.cerrar         { --btn-ic: var(--btn-cerrar-color); }
.botonesOpc.vistaprevia    { --btn-ic: var(--btn-vistaprevia-color); }
.botonesOpc.catalogo       { --btn-ic: var(--btn-catalogo-color); }
.botonesOpc.objetivos      { --btn-ic: var(--btn-objetivos-color); }



/* -----------------------------------------------------------------
   EMAIL  — fa-envelope  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.email {
    border-color: var(--btn-email-color);
}
.botonesOpc.email::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0e0";          /* fa-envelope */
    color: var(--btn-email-color);
}
.botonesOpc.email:hover {
    background-color: var(--btn-email-color);
    border-color: var(--btn-email-color);
}
.botonesOpc.email:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   CAMARA  — fa-camera  (regular)
   ----------------------------------------------------------------- */
.botonesOpc.camara {
    border-color: var(--btn-camara-color);
}
.botonesOpc.camara::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f030";          /* fa-camera */
    color: var(--btn-camara-color);
}
.botonesOpc.camara:hover {
    background-color: var(--btn-camara-color);
    border-color: var(--btn-camara-color);
}
.botonesOpc.camara:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   CERRAR  — fa-xmark  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.cerrar {
    border-color: var(--btn-cerrar-color);
}
.botonesOpc.cerrar::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f00d";          /* fa-xmark */
    color: var(--btn-cerrar-color);
}
.botonesOpc.cerrar:hover {
    background-color: var(--btn-cerrar-color);
    border-color: var(--btn-cerrar-color);
}
.botonesOpc.cerrar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   VISTA PREVIA  — fa-eye  (solid)  — fondo suave azul
   ----------------------------------------------------------------- */
.botonesOpc.vistaprevia {
    background-color: color-mix(in srgb, var(--btn-vistaprevia-color) 12%, white);
    border-color: color-mix(in srgb, var(--btn-vistaprevia-color) 35%, white);
}
.botonesOpc.vistaprevia::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f06e";          /* fa-eye */
    color: var(--btn-vistaprevia-color);
}
.botonesOpc.vistaprevia:hover {
    background-color: var(--btn-vistaprevia-color);
    border-color: var(--btn-vistaprevia-color);
}
.botonesOpc.vistaprevia:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   CATÁLOGO PDF  — fa-file-pdf  (solid)  — fondo suave rojo
   ----------------------------------------------------------------- */
.botonesOpc.catalogo {
    background-color: color-mix(in srgb, var(--btn-catalogo-color) 12%, white);
    border-color: color-mix(in srgb, var(--btn-catalogo-color) 35%, white);
}
.botonesOpc.catalogo::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f1c1";          /* fa-file-pdf */
    color: var(--btn-catalogo-color);
}
.botonesOpc.catalogo:hover {
    background-color: var(--btn-catalogo-color);
    border-color: var(--btn-catalogo-color);
}
.botonesOpc.catalogo:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   URL  — fa-link  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.url {
    border-color: var(--btn-url-color);
}
.botonesOpc.url::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f0c1";          /* fa-link */
    color: var(--btn-url-color);
}
.botonesOpc.url:hover {
    background-color: var(--btn-url-color);
    border-color: var(--btn-url-color);
}
.botonesOpc.url:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   Financiacion  - fa-piggy-bank  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.financiacion {
    border-color: var(--btn-financiacion-color);
}
.botonesOpc.financiacion::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f4d3";          /* fa-piggy-bank */
    color: var(--btn-financiacion-color);
}
.botonesOpc.financiacion:hover {
    background-color: var(--btn-financiacion-color);
    border-color: var(--btn-financiacion-color);
}
.botonesOpc.financiacion:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   Contacto  - fa-addres  (regular)
   ----------------------------------------------------------------- */
.botonesOpc.contacto {
    border-color: var(--btn-contacto-color);
}
.botonesOpc.contacto::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f2b9";          /* fa-addres */
    color: var(--btn-contacto-color);
}
.botonesOpc.contacto:hover {
    background-color: var(--btn-contacto-color);
    border-color: var(--btn-contacto-color);
}
.botonesOpc.contacto:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   SMS  — fa-mobile-screen  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.sms {
    border-color: var(--btn-sms-color);
}
.botonesOpc.sms::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f3cd";          /* fa-mobile-screen */
    color: var(--btn-sms-color);
    font-size: 20px;
}
.botonesOpc.sms:hover {
    background-color: var(--btn-sms-color);
    border-color: var(--btn-sms-color);
}
.botonesOpc.sms:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   IMPRIMIR  — fa-print  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.imprimir {
    border-color: var(--btn-print-color);
}
.botonesOpc.imprimir::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f02f";          /* fa-print */
    color: var(--btn-print-color);
}
.botonesOpc.imprimir:hover {
    background-color: #333333;
    border-color: #333333;
}
.botonesOpc.imprimir:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   WHATSAPP  — fa-whatsapp  (brands)
   ----------------------------------------------------------------- */
.botonesOpc.whatsapp {
    border-color: var(--btn-whatsapp-color);
}
.botonesOpc.whatsapp::before {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
    content: "\f232";          /* fa-whatsapp */
    color: var(--btn-whatsapp-color);
    font-size: calc(var(--btn-size, 38px) * var(--btn-icon-ratio, 0.42)) !important;
}
.botonesOpc.whatsapp:hover {
    background-color: var(--btn-whatsapp-color);
    border-color: var(--btn-whatsapp-color);
}
.botonesOpc.whatsapp:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   PAPELERA  — fa-trash  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.trash {
    border-color: var(--btn-trash-color);
}
.botonesOpc.trash::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1f8";          /* fa-trash */
    color: var(--btn-trash-color);
}
.botonesOpc.trash:hover {
    background-color: var(--btn-trash-color);
    border-color: var(--btn-trash-color);
}
.botonesOpc.trash:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   ALARMA (quitar alarma)  — fa-bell-slash  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.alarma {
    border-color: var(--btn-alarma-color);
}
.botonesOpc.alarma::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1f6";          /* fa-bell-slash */
    color: var(--btn-alarma-color);
}
.botonesOpc.alarma:hover {
    background-color: var(--btn-alarma-color);
    border-color: var(--btn-alarma-color);
}
.botonesOpc.alarma:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   DUPLICAR  — fa-copy  (regular)   [era fa-files-o en FA4]
   ----------------------------------------------------------------- */
.botonesOpc.duplicar {
    border-color: var(--btn-duplicate-color);
}
.botonesOpc.duplicar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f0c5";          /* fa-copy */
    color: var(--btn-duplicate-color);
}
.botonesOpc.duplicar:hover {
    background-color: var(--btn-duplicate-color);
    border-color: var(--btn-duplicate-color);
}
.botonesOpc.duplicar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   LLAMAR  — fa-phone  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.call {
    border-color: var(--btn-call-color);
}
.botonesOpc.call::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f095";          /* fa-phone */
    color: var(--btn-call-color);
}
.botonesOpc.call:hover {
    background-color: var(--btn-call-color);
    border-color: var(--btn-call-color);
}
.botonesOpc.call:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   FIRMA DIGITAL  — fa-pen-to-square  (regular)   [era fa-pencil-square-o en FA4]
   ----------------------------------------------------------------- */
.botonesOpc.fdigital {
    border-color: var(--btn-sign-color);
}
.botonesOpc.fdigital::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f044";          /* fa-pen-to-square */
    color: var(--btn-sign-color);
}
.botonesOpc.fdigital:hover {
    background-color: var(--btn-sign-color);
    border-color: var(--btn-sign-color);
}
.botonesOpc.fdigital:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   renovar  — fa-solid fa-repeat
   ----------------------------------------------------------------- */
.botonesOpc.renovar {
    border-color: var(--btn-renovar-color);
}
.botonesOpc.renovar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f363";
    color: var(--btn-renovar-color);
}
.botonesOpc.renovar:hover {
    background-color: var(--btn-renovar-color);
    border-color: var(--btn-renovar-color);
}
.botonesOpc.renovar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   remesaBancaria  — fa-solid fa-hand-holding-dollar
   ----------------------------------------------------------------- */
.botonesOpc.remesaBancaria {
    border-color: var(--btn-remesaBancaria-color);
}
.botonesOpc.remesaBancaria::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f4c0";
    color: var(--btn-remesaBancaria-color);
}
.botonesOpc.remesaBancaria:hover {
    background-color: var(--btn-remesaBancaria-color);
    border-color: var(--btn-remesaBancaria-color);
}
.botonesOpc.remesaBancaria:hover::before {
    color: #ffffff;
}


/* -----------------------------------------------------------------
   filtros  — class="fa-solid fa-filter
   ----------------------------------------------------------------- */
.botonesOpc.filtros::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0b0"; /* fa-filter */
    color: var(--btn-filtros-color);
}

/* Estado normal */
.botonesOpc.filtros {
    color: var(--btn-filtros-color);
}

/* Hover */
.botonesOpc.filtros:hover {
    background-color: var(--btn-filtros-color);
    border-color: var(--btn-filtros-color);
}

/* Icono en hover */
.botonesOpc.filtros:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   filtrosx  — class="fa-solid fa-filter
   ----------------------------------------------------------------- */
.botonesOpc.filtrosx::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0b0"; /* fa-filter */
    color: var(--btn-filtrosx-color);
}

/* Estado normal */
.botonesOpc.filtrosx {
    color: var(--btn-filtrosx-color);
}

/* Hover */
.botonesOpc.filtrosx:hover {
    background-color: var(--btn-filtrosx-color);
    border-color: var(--btn-filtrosx-color);
}

/* Icono en hover */
.botonesOpc.filtrosx:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   EDITAR (botón valoración/calificación)
   ----------------------------------------------------------------- */
.botonesOpc.editar {
    border-color: #009846;
}
.botonesOpc.editar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f044";          /* fa-pen-to-square */
    color: #009846;
}
.botonesOpc.editar:hover {
    background-color: #009846;
    border-color: #009846;
}
.botonesOpc.editar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   PDF  — fa-file-pdf  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.pdf {
    border-color: #d9534f;
}
.botonesOpc.pdf::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1c1";          /* fa-file-pdf */
    color: #d9534f;
}
.botonesOpc.pdf:hover {
    background-color: #d9534f;
    border-color: #d9534f;
}
.botonesOpc.pdf:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   CALCULADORA  — fa-calculator  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.calc {
    border-color: #f0ad4e;
}
.botonesOpc.calc::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1ec";          /* fa-calculator */
    color: #f0ad4e;
}
.botonesOpc.calc:hover {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}
.botonesOpc.calc:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   GESTIÓN  — fa-calendar-check  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.gestion {
    border-color: #2f6edb;
}
.botonesOpc.gestion::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f274";          /* fa-calendar-check */
    color: #2f6edb;
}
.botonesOpc.gestion:hover {
    background-color: #2f6edb;
    border-color: #2f6edb;
}
.botonesOpc.gestion:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   ACTUALIZAR  — fa-sync  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.actualizar {
    border-color: var(--btn-actualizar-color);
}
.botonesOpc.actualizar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f021";          /* fa-sync / fa-arrows-rotate */
    color: var(--btn-actualizar-color);
}
.botonesOpc.actualizar:hover {
    background-color: var(--btn-actualizar-color);
    border-color: var(--btn-actualizar-color);
}
.botonesOpc.actualizar:hover::before {
    color: #ffffff;
    animation: spin 0.5s linear;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------
   VIDEO AYUDA  — fa-video  (solid)  |  forma REDONDA
   ----------------------------------------------------------------- */
.botonesOpc.video {
    border-radius: 50% !important;
    border-color: var(--btn-video-color);
}
.botonesOpc.video::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f03d";          /* fa-video */
    color: var(--btn-video-color);
    font-size: 15px;
}
.botonesOpc.video:hover {
    background-color: var(--btn-video-color);
    border-color: var(--btn-video-color);
}
.botonesOpc.video:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   VIDEO FICHA INMUEBLE  — igual que video pero height 29px
   ----------------------------------------------------------------- */
.botonesOpc.videoFicha {
    border-radius: 50% !important;
    border-color: var(--btn-video-color);
    height: 29px !important;
    width: 29px !important;
    min-width: 29px !important;
}
.botonesOpc.videoFicha::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f03d";          /* fa-video */
    color: var(--btn-video-color);
    font-size: 12px;
}
.botonesOpc.videoFicha:hover {
    background-color: var(--btn-video-color);
    border-color: var(--btn-video-color);
}
.botonesOpc.videoFicha:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   HISTORIAL  — fa-history  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.historial {
    border-color: var(--btn-historial-color);
}
.botonesOpc.historial::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1da";          /* fa-history */
    color: var(--btn-historial-color);
}
.botonesOpc.historial:hover {
    background-color: var(--btn-historial-color);
    border-color: var(--btn-historial-color);
}
.botonesOpc.historial:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   PULGAR ARRIBA  — fa-thumbs-up  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.pulgarArriba {
    border-color: var(--btn-pulgarArriba-color);
}
.botonesOpc.pulgarArriba::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f164";          /* fa-thumbs-up */
    color: var(--btn-pulgarArriba-color);
}
.botonesOpc.pulgarArriba:hover {
    background-color: var(--btn-pulgarArriba-color);
    border-color: var(--btn-pulgarArriba-color);
}
.botonesOpc.pulgarArriba:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   PULGAR ABAJO  — fa-thumbs-down  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.pulgarAbajo {
    border-color: var(--btn-pulgarAbajo-color);
}
.botonesOpc.pulgarAbajo::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f165";          /* fa-thumbs-down */
    color: var(--btn-pulgarAbajo-color);
}
.botonesOpc.pulgarAbajo:hover {
    background-color: var(--btn-pulgarAbajo-color);
    border-color: var(--btn-pulgarAbajo-color);
}
.botonesOpc.pulgarAbajo:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   IA (OpenAI)  — fa-openai  (brands FA7)
   ----------------------------------------------------------------- */
.botonesOpc.ia {
    border-color: var(--btn-ia-color);
}
.botonesOpc.ia::before {
    content: "\e2ca";          /* fa-openai */
    color: var(--btn-ia-color);
}
.botonesOpc.ia:hover {
    background-color: var(--btn-ia-color);
    border-color: var(--btn-ia-color);
}
.botonesOpc.ia:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   TRADUCIR  — fa-language  (solid FA7)
   ----------------------------------------------------------------- */
.botonesOpc.traducir {
    border-color: var(--btn-traducir-color);
}
.botonesOpc.traducir::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f1ab";          /* fa-language */
    color: var(--btn-traducir-color);
}
.botonesOpc.traducir:hover {
    background-color: var(--btn-traducir-color);
    border-color: var(--btn-traducir-color);
}
.botonesOpc.traducir:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   GEOLOCALIZACIÓN  — fa-location-crosshairs  (solid FA7)
   ----------------------------------------------------------------- */
.botonesOpc.geolocalizacion {
    border-color: var(--btn-geolocalizacion-color);
}
.botonesOpc.geolocalizacion::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f601";          /* fa-location-crosshairs */
    color: var(--btn-geolocalizacion-color);
}
.botonesOpc.geolocalizacion:hover {
    background-color: var(--btn-geolocalizacion-color);
    border-color: var(--btn-geolocalizacion-color);
}
.botonesOpc.geolocalizacion:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   GOOGLE MAPS  — fa-google  (brands FA7)
   ----------------------------------------------------------------- */
.botonesOpc.googleMaps {
    border-color: var(--btn-googleMaps-color);
}
.botonesOpc.googleMaps::before {
    font-family: "Font Awesome 7 Brands";
    font-weight: 400;
    content: "\f1a0";          /* fa-google */
    color: var(--btn-googleMaps-color);
}
.botonesOpc.googleMaps:hover {
    background-color: var(--btn-googleMaps-color);
    border-color: var(--btn-googleMaps-color);
}
.botonesOpc.googleMaps:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   DESCARGAR  — fa-arrow-down-to-bracket  (solid FA7)
   ----------------------------------------------------------------- */
.botonesOpc.descargar {
    border-color: var(--btn-descargar-color);
}
.botonesOpc.descargar::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f019";          /* fa-arrow-down-to-bracket */
    color: var(--btn-descargar-color);
}
.botonesOpc.descargar:hover {
    background-color: var(--btn-descargar-color);
    border-color: var(--btn-descargar-color);
}
.botonesOpc.descargar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   SUBIR  — fa-arrow-up-from-bracket  (solid FA7)
   ----------------------------------------------------------------- */
.botonesOpc.subir {
    border-color: var(--btn-subir-color);
}
.botonesOpc.subir::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\e09a";          /* fa-arrow-up-from-bracket */
    color: var(--btn-subir-color);
}
.botonesOpc.subir:hover {
    background-color: var(--btn-subir-color);
    border-color: var(--btn-subir-color);
}
.botonesOpc.subir:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   INFO  — fa-circle-info  (solid FA7)
   ----------------------------------------------------------------- */
.botonesOpc.info {
    border-color: var(--btn-info-color);
}
.botonesOpc.info::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f129";          /* fa-circle-info */
    color: var(--btn-info-color);
}
.botonesOpc.info:hover {
    background-color: var(--btn-info-color);
    border-color: var(--btn-info-color);
}
.botonesOpc.info:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   IR A EXTRACTOS  — fa-list  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.extractos {
    border-color: var(--btn-extractos-color);
}
.botonesOpc.extractos::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f03a";          /* fa-list */
    color: var(--btn-extractos-color);
}
.botonesOpc.extractos:hover {
    background-color: var(--btn-extractos-color);
    border-color: var(--btn-extractos-color);
}
.botonesOpc.extractos:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   IR A COBROS  — fa-coins  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.cobros {
    border-color: var(--btn-cobros-color);
}
.botonesOpc.cobros::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f51e";          /* fa-coins */
    color: var(--btn-cobros-color);
}
.botonesOpc.cobros:hover {
    background-color: var(--btn-cobros-color);
    border-color: var(--btn-cobros-color);
}
.botonesOpc.cobros:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   VISITAS  — fa-calendar  (regular)
   ----------------------------------------------------------------- */
.botonesOpc.visitas {
    border-color: var(--btn-visitas-color);
}
.botonesOpc.visitas::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f133";          /* fa-calendar */
    color: var(--btn-visitas-color);
    font-size: 17px;
}
.botonesOpc.visitas:hover {
    background-color: var(--btn-visitas-color);
    border-color: var(--btn-visitas-color);
}
.botonesOpc.visitas:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   CITAS  — fa-user  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.citas {
    border-color: var(--btn-citas-color);
}
.botonesOpc.citas::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";          /* fa-user */
    color: var(--btn-citas-color);
}
.botonesOpc.citas:hover {
    background-color: var(--btn-citas-color);
    border-color: var(--btn-citas-color);
}
.botonesOpc.citas:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   SEGUIMIENTO GRUPO  — fa-users  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.seguimientoGrupo {
    border-color: var(--btn-grupo-color);
}
.botonesOpc.seguimientoGrupo::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c0";          /* fa-users */
    color: var(--btn-grupo-color);
    font-size: 14px;
}
.botonesOpc.seguimientoGrupo:hover {
    background-color: var(--btn-grupo-color);
    border-color: var(--btn-grupo-color);
}
.botonesOpc.seguimientoGrupo:hover::before {
    color: #ffffff;
}


/* -----------------------------------------------------------------
   COMERCIAL  — fa-user-tie (solid)
   ----------------------------------------------------------------- */
.botonesOpc.comercial {
    border-color: var(--btn-comercial-color);
}
.botonesOpc.comercial::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f508";          /* fa-user-tie */
    color: var(--btn-comercial-color);
    font-size: 14px;
}
.botonesOpc.comercial:hover {
    background-color: var(--btn-comercial-color);
    border-color: var(--btn-comercial-color);
}
.botonesOpc.comercial:hover::before {
    color: #ffffff;
}


/* -----------------------------------------------------------------
   ENVIAR  — fa-paper-plane  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.enviar {
    border-color: var(--btn-enviar-color);
}
.botonesOpc.enviar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1d8";          /* fa-paper-plane */
    color: var(--btn-enviar-color);
}
.botonesOpc.enviar:hover {
    background-color: var(--btn-enviar-color);
    border-color: var(--btn-enviar-color);
}
.botonesOpc.enviar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   BUSCAR  — fa-magnifying-glass / fa-search  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.buscar {
    border-color: var(--btn-buscar-color);
}
.botonesOpc.buscar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";          /* fa-magnifying-glass (fa-search FA5) */
    color: var(--btn-buscar-color);
}
.botonesOpc.buscar:hover {
    background-color: var(--btn-buscar-color);
    border-color: var(--btn-buscar-color);
}
.botonesOpc.buscar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   NUEVA  — fa-plus  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.nueva {
    border-color: var(--btn-nueva-color);
}
.botonesOpc.nueva::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f067";          /* fa-plus */
    color: var(--btn-nueva-color);
}
.botonesOpc.nueva:hover {
    background-color: var(--btn-nueva-color);
    border-color: var(--btn-nueva-color);
}
.botonesOpc.nueva:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   GUARDAR  — fa-floppy-disk / fa-save  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.guardar { --btn-ic: var(--btn-guardar-color); }
.botonesOpc.guardar {
    border-color: var(--btn-guardar-color);
}
.botonesOpc.guardar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c7";          /* fa-floppy-disk / fa-save */
    color: var(--btn-guardar-color);
}
.botonesOpc.guardar:hover {
    background-color: var(--btn-guardar-color);
    border-color: var(--btn-guardar-color);
}
.botonesOpc.guardar:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   LLAVES  — fa-plus  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.llaves {
    border-color: var(--btn-llaves-color);
}
.botonesOpc.llaves::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f084";          /* fa-plus */
    color: var(--btn-llaves-color);
}
.botonesOpc.llaves:hover {
    background-color: var(--btn-llaves-color);
    border-color: var(--btn-llaves-color);
}
.botonesOpc.llaves:hover::before {
    color: #ffffff;
}
.botonesOpc.ie { --btn-ic: var(--btn-llaves-color); }

/* -----------------------------------------------------------------
   PUBLICIDAD  — fa-plus  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.publicidad {
    border-color: var(--btn-publicidad-color);
}
.botonesOpc.publicidad::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1ea";          /* fa-plus */
    color: var(--btn-publicidad-color);
}
.botonesOpc.publicidad:hover {
    background-color: var(--btn-publicidad-color);
    border-color: var(--btn-publicidad-color);
}
.botonesOpc.publicidad:hover::before {
    color: #ffffff;
}
.botonesOpc.ie { --btn-ic: var(--btn-publicidad-color); }

/* -----------------------------------------------------------------
   LISTAR
   ----------------------------------------------------------------- */
.botonesOpc.listar {
    border-color: var(--btn-listar-color);
}
.botonesOpc.listar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1ea";
    color: var(--btn-listar-color);
}
.botonesOpc.listar:hover {
    background-color: var(--btn-listar-color);
    border-color: var(--btn-listar-color);
}
.botonesOpc.listar:hover::before {
    color: #ffffff;
}
.botonesOpc.ie { --btn-ic: var(--btn-listar-color); }

/* -----------------------------------------------------------------
   OPERACION
   ----------------------------------------------------------------- */
.botonesOpc.operacion {
    border-color: var(--btn-operacion-color);
}
.botonesOpc.operacion::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f2b5";
    color: var(--btn-operacion-color);
}
.botonesOpc.operaion:hover {
    background-color: var(--btn-operacion-color);
    border-color: var(--btn-operacion-color);
}
.botonesOpc.operacion:hover::before {
    color: #ffffff;
}
.botonesOpc.ie { --btn-ic: var(--btn-operacion-color); }

/* -----------------------------------------------------------------
   INTERNET EXPLORER  — fa-internet-explorer  (brands FA7)
   ----------------------------------------------------------------- */
.botonesOpc.ie {
    border-color: var(--btn-ie-color);
}
.botonesOpc.ie::before {
    font-family: "Font Awesome 7 Brands";
    font-weight: 400;
    content: "\f26b";            /* fa-internet-explorer */
    color: var(--btn-ie-color);
}
.botonesOpc.ie:hover {
    background-color: var(--btn-ie-color);
    border-color: var(--btn-ie-color);
}
.botonesOpc.ie:hover::before {
    color: #ffffff;
}
.botonesOpc.ie { --btn-ic: var(--btn-ie-color); }

/* -----------------------------------------------------------------
   OBJETIVOS  — fa-bullseye  (solid)
   ----------------------------------------------------------------- */
.botonesOpc.objetivos {
    border-color: var(--btn-objetivos-color);
}
.botonesOpc.objetivos::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f140";          /* fa-bullseye */
    color: var(--btn-objetivos-color);
}
.botonesOpc.objetivos:hover {
    background-color: var(--btn-objetivos-color);
    border-color: var(--btn-objetivos-color);
}
.botonesOpc.objetivos:hover::before {
    color: #ffffff;
}


/* =================================================================
   BOTONES SUAVES (.botonSuave) — SIN BORDES
   Fondo suave del color del botón + iconos EXACTAMENTE IGUALES que botonesOpc
   ================================================================= */

.botonSuave {
    height: var(--btn-size, 38px) !important;
    width: var(--btn-size, 38px) !important;
    min-width: var(--btn-size, 38px) !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    border: none !important;
    padding: 0 !important;
    margin-right: 5px;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: var(--btn-transition);
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* -----------------------------------------------------------------
   MODIFICADOR .conTexto — icono a la izquierda + texto
   Uso: <button class="botonSuave video conTexto">Ver Vídeo</button>
   ----------------------------------------------------------------- */
.botonSuave.conTexto {
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    padding: 0 12px 0 8px !important;
    gap: 7px;
    white-space: nowrap;
    overflow: visible !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
}
.botonSuave.conTexto::before {
    flex-shrink: 0;
}

/* ================================================================
   ICONOS — EXACTAMENTE LOS MISMOS QUE EN .botonesOpc
   ================================================================ */
.botonSuave::before {
    font-family: "Font Awesome 5 Free" !important;   /* base */
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-size: calc(var(--btn-size, 38px) * var(--btn-icon-ratio, 0.42)) !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Forzamos que cada clase use su propio icono y color (heredado de botonesOpc) */
.botonSuave.email::before      { content: "\f0e0"; color: var(--btn-email-color) !important; }
.botonSuave.sms::before        { content: "\f3cd"; color: var(--btn-sms-color) !important; font-size: 20px; }
.botonSuave.print::before      { content: "\f02f"; color: var(--btn-print-color) !important; }
.botonSuave.whatsapp::before   { content: "\f232"; font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; color: var(--btn-whatsapp-color) !important; }
.botonSuave.call::before       { content: "\f095"; color: var(--btn-call-color) !important; }
.botonSuave.enviar::before     { content: "\f1d8"; color: var(--btn-enviar-color) !important; }
.botonSuave.url::before        { content: "\f0c1"; color: var(--btn-url-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.guardar::before    { content: "\f0c7"; color: var(--btn-guardar-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.salir::before    { content: "\f090"; color: var(--btn-exit-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.salir2::before    { content: "\f2f5"; color: #c0392b !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; margin-right: 6px; }

.botonSuave.trash::before      { content: "\f1f8"; color: var(--btn-trash-color) !important; }
.botonSuave.alarma::before     { content: "\f1f6"; color: var(--btn-alarma-color) !important; }
.botonSuave.duplicar::before   { content: "\f0c5"; color: var(--btn-duplicate-color) !important; font-weight: 400 !important; }
.botonSuave.fdigital::before,
.botonSuave.sign::before       { content: "\f044"; color: var(--btn-sign-color) !important; font-weight: 400 !important; }
.botonSuave.editar::before     { content: "\f044"; color: #009846 !important; }
.botonSuave.editar2::before     { content: "\f303"; color: #206ead !important; }

.botonSuave.nueva::before      { content: "\f067"; color: var(--btn-nueva-color) !important; }
.botonSuave.actualizar::before { content: "\f021"; color: var(--btn-actualizar-color) !important; }
.botonSuave.buscar::before     { content: "\f002"; color: var(--btn-buscar-color) !important; }
.botonSuave.check::before      { content: "\f00c"; color: var(--btn-check-color) !important; }
.botonSuave.x::before      { content: "\58"; color: var(--btn-x-color) !important; }
.botonSuave.mls::before  { content: "\e4e2"; color: var(--btn-mls-color) !important; }


.botonSuave.visitas::before    { content: "\f133"; color: var(--btn-visitas-color) !important; font-size: 17px; font-weight: 400 !important; }
.botonSuave.citas::before      { content: "\f007"; color: var(--btn-citas-color) !important; }
.botonSuave.seguimientoGrupo::before,
.botonSuave.grupo::before      { content: "\f0c0"; color: var(--btn-grupo-color) !important; font-size: 14px; }
.botonSuave.comercial::before      { content: "\f508"; color: var(--btn-comercial-color) !important; font-size: 14px; }

.botonSuave.descargar::before  { content: "\f019"; color: var(--btn-descargar-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.subir::before      { content: "\e09a"; color: var(--btn-subir-color) !important; font-family: "Font Awesome 7 Free" !important; }

.botonSuave.extractos::before  { content: "\f03a"; color: var(--btn-extractos-color) !important; }
.botonSuave.cobros::before     { content: "\f51e"; color: var(--btn-cobros-color) !important; }

.botonSuave.video::before      { content: "\f03d"; color: var(--btn-video-color) !important; }
.botonSuave.ia::before         { content: "\e2ca"; color: var(--btn-ia-color) !important; }
.botonSuave.traducir::before   { content: "\f1ab"; color: var(--btn-traducir-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.geolocalizacion::before { content: "\f601"; color: var(--btn-geolocalizacion-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.googleMaps::before { content: "\f1a0"; font-family: "Font Awesome 7 Brands" !important; color: var(--btn-googleMaps-color) !important; }
.botonSuave.camara::before     { content: "\f030"; color: var(--btn-camara-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.info::before       { content: "\f129"; color: var(--btn-info-color) !important; font-family: "Font Awesome 7 Free" !important; }

.botonSuave.pulgarArriba::before { content: "\f164"; color: var(--btn-pulgarArriba-color) !important; }
.botonSuave.pulgarAbajo::before  { content: "\f165"; color: var(--btn-pulgarAbajo-color) !important; }
.botonSuave.historial::before    { content: "\f1da"; color: var(--btn-historial-color) !important; }
.botonSuave.ie::before           { content: "\f26b"; font-family: "Font Awesome 7 Brands" !important; color: var(--btn-ie-color) !important; }
.botonSuave.reemplazar::before   { content: "\f2f1"; color: #2e7d32 !important; }
.botonSuave.antesDespues::before { content: "\f074"; color: #1565c0 !important; }
.botonSuave.lopd::before         { content: "\f0ea"; color: #7b5ea7 !important; }
.botonSuave.configuracion::before{ content: "\f013"; color: #546e7a !important; }
.botonSuave.volver::before       { content: "\f3e5"; color: #7a5456 !important; }
.botonSuave.horarios::before       { content: "\f017"; color: #bccf50 !important; }


.botonSuave.usuario::before    { content: "\f0c0"; color: #337ab7 !important; }
.botonSuave.cliente::before    { content: "\f0c0"; color: var(--btn-cliente-color) !important; }
.botonSuave.inmueble::before   { content: "\f015"; color: var(--btn-inmueble-color) !important; }
.botonSuave.inmueblePrivada::before {content: "\f015";color: #ca3b3b !important;}
.botonSuave.demanda::before    { content: "\e537"; color: var(--btn-demanda-color) !important; }
.botonSuave.operaciones::before{ content: "\f2b5"; color: var(--btn-operaciones-color) !important; }
.botonSuave.financiacion::before { content: "\f4d3"; color: var(--btn-financiacion-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.contacto::before   { content: "\f2b9"; color: var(--btn-contacto-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.avalista::before   { content: "\f505"; color: var(--btn-avalista-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.valoracion::before { content: "\f15c"; color: var(--btn-valoracion-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.facturas::before   { content: "\f570"; color: var(--btn-facturas-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.llaves::before     { content: "\f084"; color: var(--btn-llaves-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.publicidad::before { content: "\f1ea"; color: var(--btn-publicidad-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.listar::before { content: "\f03a"; color: var(--btn-listar-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.operacion::before { content: "\f2b5"; color: var(--btn-operacion-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.renovar::before    { content: "\f363"; color: var(--btn-renovar-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.remesaBancaria::before    { content: "\f4c0"; color: var(--btn-remesaBancaria-color) !important; font-family: "Font Awesome 7 Free" !important; }

.botonSuave.imprimir::before { content: "\f02f"; color: #6e6e6e !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.imprimir2::before    { content: "\f02f"; color: #2e7d32 !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; margin-right: 6px; }
.botonSuave.gestion::before { content: "\f274"; color: #477fdf !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.filtros::before { content: "\f0b0"; color: #6366f1 !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.filtrosx::before { content: "\e17b"; color: #6366f1 !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.filtrosAvanzados::before { content: "\f1de"; color: #6366f1 !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.preciocambio::before { content: "\f153"; color: var(--btn-preciocambio-color) !important; }
.botonSuave.vistaprevia { background-color: color-mix(in srgb, var(--btn-vistaprevia-color) 12%, white) !important; }
.botonSuave.vistaprevia::before  { content: "\f06e"; color: var(--btn-vistaprevia-color) !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.catalogo { background-color: color-mix(in srgb, var(--btn-catalogo-color) 12%, white) !important; }
.botonSuave.catalogo::before     { content: "\f1c1"; color: var(--btn-catalogo-color) !important; font-family: "Font Awesome 7 Free" !important; }

.botonSuave.pdf::before        { content: "\f1c1"; color: #d9534f !important; }
.botonSuave.calc::before       { content: "\f1ec"; color: var(--btn-calc-color) !important; }
.botonSuave.videoFicha::before { content: "\f03d"; color: var(--btn-video-color) !important; }
.botonSuave.cerrar::before     { content: "\f00d"; color: var(--btn-cerrar-color) !important; }
.botonSuave.cerrarFactura::before { content: "\f00d"; color: var(--btn-cerrar-color) !important; }
.botonSuave.ver::before        { content: "\f06e"; color: #17a2b8 !important; }
.botonSuave.ver2::before        { content: "\f06e"; color: #206ead !important; }
.botonSuave.euro::before       { content: "\f153"; color: var(--btn-euro-color) !important; }
.botonSuave.usd::before        { content: "\f155"; color: var(--btn-usd-color) !important; }
.botonSuave.opciones::before     { content: "\f0c9"; color: #17a2b8 !important; }
.botonSuave.objetivos::before { content: "\f140"; color: var(--btn-objetivos-color) !important; font-family: "Font Awesome 5 Free" !important; }
.botonSuave.excel::before  { content: "\f1c3"; color: #4ba071 !important; }
.botonSuave.graficoLineas::before { content: "\f201"; color: #4b96a0 !important; }
.botonSuave.graficoBarras::before { content: "\e473"; color: #a04b4b !important; }
.botonSuave.graficoDonut::before { content: "\f200"; color: #4c4ba0 !important; }
.botonSuave.graficoBurbujas::before { content: "\e29c"; color: #a09a4b !important; }
.botonSuave.fondo::before { content: "\f03e"; color: #2563eb !important; }
.botonSuave.formulario::before { content: "\f15c"; color: #1d4ed8 !important; }
.botonSuave.contratos::before { content: "\f2b5"; color: #ff81a7 !important; }
.botonSuave.clausulados::before { content: "\f4d6"; color: #ff7518 !important; }
.botonSuave.ver3::before { content: "\f06e"; color: var(--btn-nueva-color) !important; }
.botonSuave.verMas::before { content: "\f06e"; color: #2563eb !important; }
.botonSuave.cancelar::before { content: "\f05e"; color: #ef4444 !important; }
.botonSuave.editar3::before { content: "\f303"; color: #2563eb !important; }
.botonSuave.refrescar::before { content: "\f021"; color: #f59e0b !important; }
.botonSuave.lupa::before { content: "\f002"; color: #2563eb !important; }
.botonSuave.calcCuota::before { content: "\f1ec"; color:#2b5ea8 !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.calcPrestamo::before { content: "\f0d6"; color:#4a4a4a !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.avanzada::before { content: "\f201"; color:#b7791f !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.reunifica::before { content: "\f0ec"; color:#1f7a8c !important; font-family: "Font Awesome 7 Free" !important; }
.botonSuave.girarIzquierda::before {content: "\f2ea";color: #1f8c40 !important;font-family: "Font Awesome 7 Free" !important;}
.botonSuave.girarDerecha::before {content: "\f2f9";color: #1f8c40 !important;font-family: "Font Awesome 7 Free" !important;}
.botonSuave.internet::before {content: "\f0ac";color: #261f8c !important; font-family: "Font Awesome 7 Free" !important;}
.botonSuave.vistaPrevia::before { content: "\f06e";color: #2563eb !important; font-family: "Font Awesome 7 Free" !important;}
.botonSuave.aceptar::before {content: "\f00c";color: #16a34a !important;font-family: "Font Awesome 7 Free" !important;}
.botonSuave.facebook::before {content: "\f082";color: #2b16a3 !important;font-family: "Font Awesome 7 Brands" !important;}

/* Regla utilizada para subir un botonSuave que cargue una imagen en lugar de un icono de Font Awesome
width y height calculan el tamaño de la imagen con respecto al contenedor total del botón y en la URL
tenemos que incluir la ruta donde está alojada la imagen que vamos a usar. Como la imagen que hemos cargado es blanca
tenemos que ponerle un background oscuro para que haga contraste y se vea. También el color tiene que ser oscuro por si usamos
la variable conTexto */
.botonSuave.tourVirtual::before {
    content: "" !important;
    display: block;
    width: calc(var(--btn-size, 38px) * 0.85);
    height: calc(var(--btn-size, 38px) * 0.85);
    background-image: url("https://crm325.inmovirtual.es/INMOWEB-PHP/images/forms/360.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.botonSuave.beforeAfter::before {
    content: "" !important;
    display: block;
    width: calc(var(--btn-size, 38px) * 0.75);
    height: calc(var(--btn-size, 38px) * 0.75);
    background-image: url("https://crm325.inmovirtual.es/INMOWEB-PHP/images/forms/after_before.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ====================== FONDOS SUAVES PARA LOS BOTONES ====================== */
.botonSuave.email      { background-color: #e0f0f8 !important; }
.botonSuave.sms        { background-color: #e6f4e6 !important; }
.botonSuave.print      { background-color: #f0f0f0 !important; }
.botonSuave.whatsapp   { background-color: #e6f9ed !important; }
.botonSuave.call       { background-color: #f1f5f9 !important; }
.botonSuave.enviar     { background-color: #fef3e0 !important; }
.botonSuave.url        { background-color: #fdf4e3 !important; }
.botonSuave.guardar    { background-color: #d6f8da !important; }
.botonSuave.salir      { background-color: #cccccc !important; }
.botonSuave.salir2       { background-color: #f8d7da !important; }
.botonSuave.horarios    { background-color: #faffb9 !important; }

.botonSuave.trash      { background-color: #fce8e8 !important; }
.botonSuave.alarma     { background-color: #fdf1e0 !important; }
.botonSuave.duplicar   { background-color: #fdf8e6 !important; }
.botonSuave.fdigital,
.botonSuave.sign       { background-color: #f6edf4 !important; }
.botonSuave.editar     { background-color: #e6f0f8 !important; }
.botonSuave.editar2     { background-color: #cbe8ff !important; }
.botonSuave.nueva      { background-color: #e6f9ed !important; }
.botonSuave.actualizar { background-color: #e6f6f3 !important; }
.botonSuave.buscar     { background-color: #eeedff !important; }
.botonSuave.check      { background-color: #e7f7ee !important }
.botonSuave.x          { background-color: #fee2e2 !important; }
.botonSuave.mls         { background-color: #e8f0fe !important; }


.botonSuave.visitas    { background-color: #e6f8f3 !important; }
.botonSuave.citas      { background-color: #f0e9fc !important; }
.botonSuave.seguimientoGrupo,
.botonSuave.grupo      { background-color: #fff0e6 !important; }
.botonSuave.comercial      { background-color: #fff0e6 !important; }

.botonSuave.descargar  { background-color: #dbffe3 !important; }
.botonSuave.subir      { background-color: #fce9e9 !important; }

.botonSuave.extractos  { background-color: #e6f6f9 !important; }
.botonSuave.cobros     { background-color: #f5f5f5 !important; }

.botonSuave.video      { background-color: #e9f2fc !important; }
.botonSuave.ia         { background-color: #e6f7f2 !important; }
.botonSuave.traducir   { background-color: #e6f4fd !important; }
.botonSuave.geolocalizacion { background-color: #f2f9e6 !important; }
.botonSuave.googleMaps { background-color: #e9f0fd !important; }
.botonSuave.camara     { background-color: #f5f2eb !important; }
.botonSuave.info       { background-color: #edebf9 !important; }

.botonSuave.pulgarArriba { background-color: #e6f4eb !important; }
.botonSuave.pulgarAbajo  { background-color: #f9e6e6 !important; }
.botonSuave.historial    { background-color: #f2ecf9 !important; }
.botonSuave.ie           { background-color: #e6f6fc !important; }
.botonSuave.reemplazar   { background-color: #e8f5e9 !important; }
.botonSuave.antesDespues { background-color: #e3f0fb !important; }
.botonSuave.lopd         { background-color: #f0eafa !important; }
.botonSuave.configuracion{ background-color: #eceff1 !important; }
.botonSuave.volver       { background-color: #f0e5e6 !important; }

.botonSuave.usuario    { background-color: #e7f0fa !important; }
.botonSuave.cliente    { background-color: #fff1d5 !important; }
.botonSuave.inmueble   { background-color: #e6f0ff !important; }
.botonSuave.inmueblePrivada {background-color: #ffe3e3 !important;}
.botonSuave.demanda    { background-color: #e6f9ed !important; }
.botonSuave.operaciones{ background-color: #ebf2ed !important; }
.botonSuave.financiacion { background-color: #e9edf4 !important; }
.botonSuave.contacto   { background-color: #f6f2eb !important; }
.botonSuave.avalista   { background-color: #f9f0e6 !important; }
.botonSuave.valoracion { background-color: #fff0e6 !important; }
.botonSuave.facturas   { background-color: #f9e6f2 !important; }
.botonSuave.llaves     { background-color: #e6f8fb !important; }
.botonSuave.publicidad { background-color: #ffe0d8 !important; }
.botonSuave.listar { background-color: #E8F5E9 !important; }
.botonSuave.operacion { background-color: #DCFCE7 !important; }
.botonSuave.imprimir { background-color: #e4e4e4 !important; }
.botonSuave.imprimir2 { background-color: #d4edda !important; }
.botonSuave.gestion { background-color: #daebff !important; }
.botonSuave.filtros { background-color: #dcdcff !important; }
.botonSuave.filtrosx { background-color: #dcdcff !important; }
.botonSuave.filtrosAvanzados { background-color: #dcdcff !important; }
.botonSuave.renovar { background-color: #e0e7ff !important; }
.botonSuave.remesaBancaria { background-color: #e0e7ff !important; }
.botonSuave.preciocambio   { background-color: #fce8e8 !important; }
.botonSuave.pdf            { background-color: #fde8e8 !important; }
.botonSuave.calc           { background-color: #fef3e0 !important; }
.botonSuave.videoFicha     { background-color: #e9f2fc !important; }
.botonSuave.cerrar         { background-color: #f5f5f5 !important; }
.botonSuave.cerrarFactura  { background-color: #f5f5f5 !important; margin-left: 5px !important; }
.botonSuave.ver            { background-color: #e6f7fa !important; }
.botonSuave.ver2            { background-color: #cbe8ff !important; }
.botonSuave.euro           { background-color: #fdf5e0 !important; }
.botonSuave.usd            { background-color: #e6f5ec !important; }
.botonSuave.opciones     { background-color: #e6f6f9 !important; }
.botonSuave.objetivos    { background-color: #e0e6f0 !important; }
.botonSuave.excel        { background-color: #ebfff5 !important; }
.botonSuave.graficoLineas { background-color: #d0f0f5 !important; }
.botonSuave.graficoBarras { background-color: #f3dddd !important; }
.botonSuave.graficoDonut { background-color: #d2d1f0 !important; }
.botonSuave.graficoBurbujas { background-color: #eeeddc !important; }
.botonSuave.fondo { background-color: #dbeafe !important; }
.botonSuave.formulario { background-color: #dbeafe !important; }
.botonSuave.contratos { background-color: #fef3ff !important; }
.botonSuave.clausulados { background-color: #ffddb6 !important; }
.botonSuave.ver3      { background-color: #e6f9ed !important; }
.botonSuave.verMas { background-color: #dbeafe !important; }
.botonSuave.cancelar { background-color: #fee2e2 !important; }
.botonSuave.editar3 { background-color: #dbeafe !important; }
.botonSuave.refrescar { background-color: #fef3c7 !important; }
.botonSuave.lupa { background-color: #dbeafe !important; }
.botonSuave.calcCuota { background-color:#f0f6ff!important; }
.botonSuave.calcPrestamo { background-color:#f7f7f7 !important; }
.botonSuave.avanzada { background-color:#fff7e6 !important; }
.botonSuave.reunifica {  background-color:#e6f7fb !important; }
.botonSuave.girarIzquierda {background-color: #effaf2 !important;}
.botonSuave.girarDerecha {background-color: #effaf2 !important;}
.botonSuave.internet {background-color: #d5d9ff !important;}
.botonSuave.tourVirtual { background-color: #9143e6 !important; }
.botonSuave.beforeAfter { background-color: #166534 !important; }
.botonSuave.vistaPrevia { background-color: #dbeafe !important; }
.botonSuave.aceptar {background-color: #dcfce7 !important;}
.botonSuave.facebook {background-color: #eaebff !important;}

/* ====================== COLOR SUAVES PARA LOS BOTONES ====================== */
.botonSuave.call         { color: #334155 !important; }
.botonSuave.fdigital     { color: #9d4f82 !important; }
.botonSuave.duplicar     { color: #e5be01 !important; }
.botonSuave.email        { color: #5bc0de !important; }
.botonSuave.nueva        { color: #22c55e !important; }
.botonSuave.imprimir     { color: #6e6e6e !important; }
.botonSuave.imprimir2    { color: #2e7d32 !important; }
.botonSuave.gestion      { color: #477fdf !important; }
.botonSuave.enviar       { color: #f59e0b !important; }
.botonSuave.sms          { color: #5cb85c !important; }
.botonSuave.guardar      { color: #0c9623 !important; }
.botonSuave.salir        { color: #555555 !important; }
.botonSuave.salir2       { color: #c0392b !important; }
.botonSuave.whatsapp     { color: #24cc63 !important; }
.botonSuave.publicidad   { color: #fc9980 !important; }
.botonSuave.listar       { color: #217346 !important; }
.botonSuave.operacion    { color: #16A34A !important; }
.botonSuave.llaves       { color: #06b6d4 !important; }
.botonSuave.geolocalizacion { color: #84cc16 !important; }
.botonSuave.trash        { color: #e53935 !important; }
.botonSuave.alarma       { color: var(--btn-alarma-color) !important; }
.botonSuave.extractos    { color: #17a2b8 !important; }
.botonSuave.filtros      { color: #6366f1 !important; }
.botonSuave.filtrosx     { color: #6366f1 !important; }
.botonSuave.filtrosAvanzados { color: #6366f1 !important; }
.botonSuave.renovar      { color: #1e3a8a !important; }
.botonSuave.remesaBancaria { color: #3b82f6 !important; }
.botonSuave.buscar       { color: #6366f1 !important; }
.botonSuave.check        { color: #16a34a !important; }
.botonSuave.x            { color: #ef4444 !important; }
.botonSuave.mls           { color: #2563eb !important; }
.botonSuave.visitas      { color:#20c997 !important; }
.botonSuave.pdf          { color: #d9534f !important; }
.botonSuave.calc         { color: var(--btn-calc-color) !important; }
.botonSuave.videoFicha   { color: var(--btn-video-color) !important; }
.botonSuave.cerrar       { color: var(--btn-cerrar-color) !important; }
.botonSuave.cerrarFactura { color: var(--btn-cerrar-color) !important; }
.botonSuave.ver          { color: #17a2b8 !important; }
.botonSuave.ver2         { color: #206ead !important; }
.botonSuave.euro         { color: var(--btn-euro-color) !important; }
.botonSuave.usd          { color: var(--btn-usd-color) !important; }
.botonSuave.ia           { color: var(--btn-ia-color) !important; }
.botonSuave.traducir     { color: var(--btn-traducir-color) !important; }
.botonSuave.print        { color: var(--btn-print-color) !important; }
.botonSuave.url          { color: var(--btn-url-color) !important; }
.botonSuave.editar       { color: #009846 !important; }
.botonSuave.editar2      { color: #206ead !important; }
.botonSuave.actualizar   { color: var(--btn-actualizar-color) !important; }
.botonSuave.citas        { color: var(--btn-citas-color) !important; }
.botonSuave.seguimientoGrupo,
.botonSuave.grupo        { color: var(--btn-grupo-color) !important; }
.botonSuave.comercial    { color: var(--btn-comercial-color) !important; }
.botonSuave.objetivos    { color: var(--btn-objetivos-color) !important; }
.botonSuave.descargar    { color: var(--btn-descargar-color) !important; }
.botonSuave.subir        { color: var(--btn-subir-color) !important; }
.botonSuave.cobros       { color: var(--btn-cobros-color) !important; }
.botonSuave.video        { color: var(--btn-video-color) !important; }
.botonSuave.googleMaps   { color: var(--btn-googleMaps-color) !important; }
.botonSuave.camara       { color: var(--btn-camara-color) !important; }
.botonSuave.info         { color: var(--btn-info-color) !important; }
.botonSuave.pulgarArriba { color: var(--btn-pulgarArriba-color) !important; }
.botonSuave.pulgarAbajo  { color: var(--btn-pulgarAbajo-color) !important; }
.botonSuave.historial    { color: var(--btn-historial-color) !important; }
.botonSuave.ie           { color: var(--btn-ie-color) !important; }
.botonSuave.reemplazar   { color: #2e7d32 !important; }
.botonSuave.antesDespues { color: #1565c0 !important; }
.botonSuave.lopd         { color: #7b5ea7 !important; }
.botonSuave.configuracion{ color: #546e7a !important; }
.botonSuave.volver       { color: #7a5456 !important; }
.botonSuave.usuario      { color: #337ab7 !important; }
.botonSuave.cliente      { color: var(--btn-cliente-color) !important; }
.botonSuave.inmueble     { color: var(--btn-inmueble-color) !important; }
.botonSuave.inmueblePrivada {color: #ca3b3b !important;}
.botonSuave.demanda      { color: var(--btn-demanda-color) !important; }
.botonSuave.operaciones  { color: var(--btn-operaciones-color) !important; }
.botonSuave.financiacion { color: var(--btn-financiacion-color) !important; }
.botonSuave.contacto     { color: var(--btn-contacto-color) !important; }
.botonSuave.avalista     { color: var(--btn-avalista-color) !important; }
.botonSuave.valoracion   { color: var(--btn-valoracion-color) !important; }
.botonSuave.facturas     { color: var(--btn-facturas-color) !important; }
.botonSuave.preciocambio { color: var(--btn-preciocambio-color) !important; }
.botonSuave.sign         { color: #9d4f82 !important; }
.botonSuave.opciones     { color: #17a2b8 !important; }
.botonSuave.excel        { color: #6fc494 !important; }
.botonSuave.graficoLineas { color: #4b96a0 !important; }
.botonSuave.graficoBarras { color: #a04b4b !important; }
.botonSuave.graficoDonut  { color: #4c4ba0 !important; }
.botonSuave.graficoBurbujas { color: #a09a4b !important; }
.botonSuave.fondo { color: #2563eb !important; }
.botonSuave.formulario {     color: #1d4ed8 !important; }
.botonSuave.contratos {  color: #ff81a7 !important; }
.botonSuave.clausulados {  color: #ff7518 !important; }
.botonSuave.ver3        { color: #22c55e !important; }
.botonSuave.verMas { color: #2563eb !important; }
.botonSuave.horarios { color: #bccf50 !important; }
.botonSuave.cancelar { color: #ef4444 !important; }
.botonSuave.editar3 { color: #2563eb !important; }
.botonSuave.refrescar { color: #f59e0b !important; }
.botonSuave.lupa { color: #2563eb !important; }
.botonSuave.calcCuota { color:#2b5ea8!important;  }
.botonSuave.calcPrestamo { color:#444 !important; }
.botonSuave.avanzada { color:#b7791f !important; }
.botonSuave.reunifica {  color:#1f7a8c !important; }
.botonSuave.girarIzquierda {color: #1f8c40 !important;}
.botonSuave.girarDerecha {color: #1f8c40 !important;}
.botonSuave.internet {color: #261f8c !important;}
.botonSuave.tourVirtual { color: #d0bfec !important; }
.botonSuave.beforeAfter { color: #339c4e !important; }
.botonSuave.vistaPrevia { color: #2563eb !important; }
.botonSuave.aceptar {color: #16a34a !important;}
.botonSuave.facebook {color: #2b16a3 !important;}

/* EFECTO HOVER */
.botonSuave {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.botonSuave:hover {
    transform: scale(1) translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.04);
}

/* =================================================================
   MODIFICADORES
   ================================================================= */

.botonSuave.conTexto {
    width: auto !important;
    min-width: unset !important;
    padding: 0 14px 0 10px !important;
    gap: 7px;
    font-size: 13px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--btn-ic, #334155);
    white-space: nowrap;
    font-weight: 600;
}

.botonSuave.conTexto::before {
    flex-shrink: 0;
}

.botonSuave.redondo {
    border-radius: 50% !important;
}

/* =================================================================
   BASE — BOTONES FICHA (btnFicha)
   34px — misma estructura que botonesOpc, para uso en todas las fichas
   ================================================================= */
.btnFicha {
    height: var(--btn-size, 34px) !important;
    width: var(--btn-size, 34px) !important;
    min-width: var(--btn-size, 34px) !important;
    border-radius: 6px !important;
    background-color: #ffffff;
    border-width: 1px !important;
    border-style: solid !important;
    padding: 0 !important;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--btn-transition);
    vertical-align: middle;
    box-sizing: border-box;
}
.btnFicha i { display: none; }
.btnFicha::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    font-size: calc(var(--btn-size, 34px) * var(--btn-icon-ratio, 0.42));
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.btnFicha:hover {
    transform: scale(1.07);
}

/* -----------------------------------------------------------------
   MODIFICADOR .redondo — forma circular
   Uso: <button class="btnFicha llamada redondo"></button>
   ----------------------------------------------------------------- */
.btnFicha.redondo {
    border-radius: 50% !important;
}

/* -----------------------------------------------------------------
   CERRAR  — fa-times  (solid)  |  gris claro
   ----------------------------------------------------------------- */
.btnFicha.cerrar {
    border-color: var(--btn-cerrar-color);
    background-color: #f9f9f9;
}
.btnFicha.cerrar::before {
    content: "\f00d";          /* fa-times */
    color: var(--btn-cerrar-color);
    font-size: 16px;
}
.btnFicha.cerrar:hover {
    background-color: var(--btn-cerrar-color);
    border-color: var(--btn-cerrar-color);
}
.btnFicha.cerrar:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   CERRAR FACTURA  — fa-times (solid) — igual que cerrar + margin-left
   ----------------------------------------------------------------- */
.btnFicha.cerrarFactura {
    border-color: var(--btn-cerrar-color);
    background-color: #f9f9f9;
    margin-left: 5px;
}
.btnFicha.cerrarFactura::before {
    content: "\f00d";          /* fa-times */
    color: var(--btn-cerrar-color);
    font-size: 16px;
}
.btnFicha.cerrarFactura:hover {
    background-color: var(--btn-cerrar-color);
    border-color: var(--btn-cerrar-color);
}
.btnFicha.cerrarFactura:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   VER  — fa-eye  (solid)
   ----------------------------------------------------------------- */
.btnFicha.ver {
    border-color: #17a2b8;
    background-color: #f9f9f9;
}
.btnFicha.ver::before {
    content: "\f06e";          /* fa-eye */
    color: #17a2b8;
    font-size: 16px;
}
.btnFicha.ver:hover {
    background-image: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    border-color: transparent;
}
.btnFicha.ver:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   COBROS  — fa-coins  (solid)
   ----------------------------------------------------------------- */
.btnFicha.cobros {
    border-color: var(--btn-cobros-color);
}
.btnFicha.cobros::before {
    content: "\f51e";          /* fa-coins */
    color: var(--btn-cobros-color);
}
.btnFicha.cobros:hover {
    background-color: var(--btn-cobros-color);
    border-color: var(--btn-cobros-color);
}
.btnFicha.cobros:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   BUSCAR  — fa-magnifying-glass / fa-search  (solid)
   ----------------------------------------------------------------- */
.btnFicha.buscar {
    border-color: var(--btn-buscar-color);
}
.btnFicha.buscar::before {
    content: "\f002";          /* fa-search */
    color: var(--btn-buscar-color);
}
.btnFicha.buscar:hover {
    background-color: var(--btn-buscar-color);
    border-color: var(--btn-buscar-color);
}
.btnFicha.buscar:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   CONFIGURACIÓN — Botones y Fichas
   ----------------------------------------------------------------- */

/* --- Estadísticas --- */
.btnConfig.estadistica::before {
    content: "\f1fe";
    color: var(--btn-estadisticasConfig-color);
}
.btnConfig.estadistica:hover { background-color: var(--btn-estadisticasConfig-color) !important; }
.btnConfig.estadistica:hover::before { color: #ffffff; }

/* --- Copia de Seguridad --- */
.btnConfig.copiaSeguridad::before {
    content: "\f023";
    color: var(--btn-copiaSeguridadConfig-color);
}
.btnConfig.copiaSeguridad:hover { background-color: var(--btn-copiaSeguridadConfig-color) !important; }
.btnConfig.copiaSeguridad:hover::before { color: #ffffff; }

/* --- Usuarios --- */
.btnConfig.usuarios::before {
    content: "\f007";
    color: var(--btn-usuariosConfig-color);
}
.btnConfig.usuarios:hover { background-color: var(--btn-usuariosConfig-color) !important; }
.btnConfig.usuarios:hover::before { color: #ffffff; }

/* --- Datos empresa --- */
.btnConfig.datosEmpresa::before {
    content: "\f2bb";
    color: var(--btn-datosEmpresaConfig-color);
}
.btnConfig.datosEmpresa:hover { background-color: var(--btn-datosEmpresaConfig-color) !important; }
.btnConfig.datosEmpresa:hover::before { color: #ffffff; }

/* --- Email Config --- */
.btnConfig.emailConfig::before {
    content: "\f0e0";
    color: var(--btn-emailConfig-color);
}
.btnConfig.emailConfig:hover { background-color: var(--btn-emailConfig-color) !important; }
.btnConfig.emailConfig:hover::before { color: #ffffff; }

/* --- SMS / WhatsApp Config --- */
.btnConfig.smsWhatsapp::before {
    content: "\f7cd";
    color: var(--btn-smsWhatappConfig-color);
}
.btnConfig.smsWhatsapp:hover { background-color: var(--btn-smsWhatappConfig-color) !important; }
.btnConfig.smsWhatsapp:hover::before { color: #ffffff; }

/* --- Datos Generales --- */
.btnConfig.datos::before {
    content: "\f468";
    color: var(--btn-datosConfig-color);
}
.btnConfig.datos:hover { background-color: var(--btn-datosConfig-color) !important; }
.btnConfig.datos:hover::before { color: #ffffff; }

/* --- Contratos --- */
.btnConfig.contratos::before {
    content: "\f46d";
    color: var(--btn-contratosConfig-color);
}
.btnConfig.contratos:hover { background-color: var(--btn-contratosConfig-color) !important; }
.btnConfig.contratos:hover::before { color: #ffffff; }

/* --- Marca de Agua --- */
.btnConfig.marcaDeAgua::before {
    content: "\f03e";
    color: var(--btn-marcaDeAguaConfig-color);
}
.btnConfig.marcaDeAgua:hover { background-color: var(--btn-marcaDeAguaConfig-color) !important; }
.btnConfig.marcaDeAgua:hover::before { color: #ffffff; }

/* --- Portales --- */
.btnConfig.portales::before {
    content: "\f0ac";
    color: var(--btn-portalesConfig-color);
}
.btnConfig.portales:hover { background-color: var(--btn-portalesConfig-color) !important; }
.btnConfig.portales:hover::before { color: #ffffff; }

/* --- Condiciones Financieras --- */
.btnConfig.condicionesFinancieras::before {
    content: "\f51e";
    color: var(--btn-condicionesFinancierasConfig-color);
}
.btnConfig.condicionesFinancieras:hover { background-color: var(--btn-condicionesFinancierasConfig-color) !important; }
.btnConfig.condicionesFinancieras:hover::before { color: #ffffff; }

/* --- Tarifas de Alquiler --- */
.btnConfig.tarifasAlquiler::before {
    content: "\f3d1";
    color: var(--btn-tarifasAlquilerConfig-color);
}
.btnConfig.tarifasAlquiler:hover { background-color: var(--btn-tarifasAlquilerConfig-color) !important; }
.btnConfig.tarifasAlquiler:hover::before { color: #ffffff; }

/* --- Publicidad --- */
.btnConfig.publicidad::before {
    content: "\f1ea";
    color: var(--btn-publicidadConfig-color);
}
.btnConfig.publicidad:hover { background-color: var(--btn-publicidadConfig-color) !important; }
.btnConfig.publicidad:hover::before { color: #ffffff; }

/* --- Colaboradores --- */
.btnConfig.colaboradores::before {
    content: "\f4ce";
    color: var(--btn-colaboradoresConfig-color);
}
.btnConfig.colaboradores:hover { background-color: var(--btn-colaboradoresConfig-color) !important; }
.btnConfig.colaboradores:hover::before { color: #ffffff; }

/* --- Parámetros del Sistema --- */
.btnConfig.parametros::before {
    content: "\f013";
    color: var(--btn-parametrosConfig-color);
}
.btnConfig.parametros:hover { background-color: var(--btn-parametrosConfig-color) !important; }
.btnConfig.parametros:hover::before { color: #ffffff; }

/* --- Videos --- */
.btnConfig.videos::before {
    content: "\f008";
    color: var(--btn-videosConfig-color);
}
.btnConfig.videos:hover { background-color: var(--btn-videosConfig-color) !important; }
.btnConfig.videos:hover::before { color: #ffffff; }

/* --- Blog --- */
.btnConfig.blog::before {
    content: "\f781";
    color: var(--btn-blogConfig-color);
}
.btnConfig.blog:hover { background-color: var(--btn-blogConfig-color) !important; }
.btnConfig.blog:hover::before { color: #ffffff; }

/* --- Escaparate Virtual --- */
.btnConfig.escaparateVirtual::before {
    content: "\f00b";
    color: var(--btn-escaparateVirtConfig-color);
}
.btnConfig.escaparateVirtual:hover { background-color: var(--btn-escaparateVirtConfig-color) !important; }
.btnConfig.escaparateVirtual:hover::before { color: #ffffff; }

/* --- Importar Datos --- */
.btnConfig.importarDatos::before {
    content: "\f019";
    color: var(--btn-importarDatosConfig-color);
}
.btnConfig.importarDatos:hover { background-color: var(--btn-importarDatosConfig-color) !important; }
.btnConfig.importarDatos:hover::before { color: #ffffff; }

/* --- Editor Web --- */
.btnConfig.editorWeb::before {
    content: "\f121";
    color: var(--btn-editorWebConfig-color);
}
.btnConfig.editorWeb:hover { background-color: var(--btn-editorWebConfig-color) !important; }
.btnConfig.editorWeb:hover::before { color: #ffffff; }

/* --- Autorizaciones --- */
.btnConfig.autorizaciones::before {
    content: "\f2f7";
    color: var(--btn-autorizacionesConfig-color);
}
.btnConfig.autorizaciones:hover { background-color: var(--btn-autorizacionesConfig-color) !important; }
.btnConfig.autorizaciones:hover::before { color: #ffffff; }

/* --- App Personalizada --- */
.btnConfig.appPersonalizada::before {
    content: "\f3cd";
    color: var(--btn-appPersonalizadaConfig-color);
}
.btnConfig.appPersonalizada:hover { background-color: var(--btn-appPersonalizadaConfig-color) !important; }
.btnConfig.appPersonalizada:hover::before { color: #ffffff; }

/* --- Check-In --- */
.btnConfig.checkIn::before {
    content: "\e554";
    color: var(--btn-checkInConfig-color);
}
.btnConfig.checkIn:hover { background-color: var(--btn-checkInConfig-color) !important; }
.btnConfig.checkIn:hover::before { color: #ffffff; }

/* --- Créditos IA --- */
.btnConfig.creditosIA::before {
    content: "\f544";              /* fa-robot */
    color: var(--btn-creditosIAConfig-color);
}
.btnConfig.creditosIA:hover { background-color: var(--btn-creditosIAConfig-color) !important; }
.btnConfig.creditosIA:hover::before { color: #ffffff; }

/* --- Mi Cuenta IA (estadísticas y transacciones) --- */
.btnConfig.cuentaIA::before {
    content: "\e2ca";              /* fa-line-chart */
    color: var(--btn-cuentaIAConfig-color);
}
.btnConfig.cuentaIA:hover { background-color: var(--btn-cuentaIAConfig-color) !important; }
.btnConfig.cuentaIA:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   CFG-CARD — fondo suave y color del label según el botón (:has)
   ----------------------------------------------------------------- */
.cfg-card:has(.btnConfig.estadistica)            { background-color: color-mix(in srgb, var(--btn-estadisticasConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.estadistica)             .cfg-label { color: var(--btn-estadisticasConfig-color); }

.cfg-card:has(.btnConfig.copiaSeguridad)         { background-color: color-mix(in srgb, var(--btn-copiaSeguridadConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.copiaSeguridad)          .cfg-label { color: var(--btn-copiaSeguridadConfig-color); }

.cfg-card:has(.btnConfig.usuarios)               { background-color: color-mix(in srgb, var(--btn-usuariosConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.usuarios)                .cfg-label { color: var(--btn-usuariosConfig-color); }

.cfg-card:has(.btnConfig.datosEmpresa)           { background-color: color-mix(in srgb, var(--btn-datosEmpresaConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.datosEmpresa)            .cfg-label { color: var(--btn-datosEmpresaConfig-color); }

.cfg-card:has(.btnConfig.emailConfig)            { background-color: color-mix(in srgb, var(--btn-emailConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.emailConfig)             .cfg-label { color: var(--btn-emailConfig-color); }

.cfg-card:has(.btnConfig.smsWhatsapp)            { background-color: color-mix(in srgb, var(--btn-smsWhatappConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.smsWhatsapp)             .cfg-label { color: var(--btn-smsWhatappConfig-color); }

.cfg-card:has(.btnConfig.datos)                  { background-color: color-mix(in srgb, var(--btn-datosConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.datos)                   .cfg-label { color: var(--btn-datosConfig-color); }

.cfg-card:has(.btnConfig.contratos)              { background-color: color-mix(in srgb, var(--btn-contratosConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.contratos)               .cfg-label { color: var(--btn-contratosConfig-color); }

.cfg-card:has(.btnConfig.marcaDeAgua)            { background-color: color-mix(in srgb, var(--btn-marcaDeAguaConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.marcaDeAgua)             .cfg-label { color: var(--btn-marcaDeAguaConfig-color); }

.cfg-card:has(.btnConfig.portales)               { background-color: color-mix(in srgb, var(--btn-portalesConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.portales)                .cfg-label { color: var(--btn-portalesConfig-color); }

.cfg-card:has(.btnConfig.condicionesFinancieras) { background-color: color-mix(in srgb, var(--btn-condicionesFinancierasConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.condicionesFinancieras)  .cfg-label { color: var(--btn-condicionesFinancierasConfig-color); }

.cfg-card:has(.btnConfig.tarifasAlquiler)        { background-color: color-mix(in srgb, var(--btn-tarifasAlquilerConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.tarifasAlquiler)         .cfg-label { color: var(--btn-tarifasAlquilerConfig-color); }

.cfg-card:has(.btnConfig.publicidad)             { background-color: color-mix(in srgb, var(--btn-publicidadConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.publicidad)              .cfg-label { color: var(--btn-publicidadConfig-color); }

.cfg-card:has(.btnConfig.colaboradores)          { background-color: color-mix(in srgb, var(--btn-colaboradoresConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.colaboradores)           .cfg-label { color: var(--btn-colaboradoresConfig-color); }

.cfg-card:has(.btnConfig.parametros)             { background-color: color-mix(in srgb, var(--btn-parametrosConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.parametros)              .cfg-label { color: var(--btn-parametrosConfig-color); }

.cfg-card:has(.btnConfig.videos)                 { background-color: color-mix(in srgb, var(--btn-videosConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.videos)                  .cfg-label { color: var(--btn-videosConfig-color); }

.cfg-card:has(.btnConfig.blog)                   { background-color: color-mix(in srgb, var(--btn-blogConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.blog)                    .cfg-label { color: var(--btn-blogConfig-color); }

.cfg-card:has(.btnConfig.escaparateVirtual)      { background-color: color-mix(in srgb, var(--btn-escaparateVirtConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.escaparateVirtual)       .cfg-label { color: var(--btn-escaparateVirtConfig-color); }

.cfg-card:has(.btnConfig.importarDatos)          { background-color: color-mix(in srgb, var(--btn-importarDatosConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.importarDatos)           .cfg-label { color: var(--btn-importarDatosConfig-color); }

.cfg-card:has(.btnConfig.editorWeb)              { background-color: color-mix(in srgb, var(--btn-editorWebConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.editorWeb)               .cfg-label { color: var(--btn-editorWebConfig-color); }

.cfg-card:has(.btnConfig.autorizaciones)         { background-color: color-mix(in srgb, var(--btn-autorizacionesConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.autorizaciones)          .cfg-label { color: var(--btn-autorizacionesConfig-color); }

.cfg-card:has(.btnConfig.appPersonalizada)       { background-color: color-mix(in srgb, var(--btn-appPersonalizadaConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.appPersonalizada)        .cfg-label { color: var(--btn-appPersonalizadaConfig-color); }

.cfg-card:has(.btnConfig.checkIn)                { background-color: color-mix(in srgb, var(--btn-checkInConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.checkIn)                 .cfg-label { color: var(--btn-checkInConfig-color); }

.cfg-card:has(.btnConfig.creditosIA)             { background-color: color-mix(in srgb, var(--btn-creditosIAConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.creditosIA)              .cfg-label { color: var(--btn-creditosIAConfig-color); }

.cfg-card:has(.btnConfig.cuentaIA)               { background-color: color-mix(in srgb, var(--btn-cuentaIAConfig-color) 10%, white); }
.cfg-card:has(.btnConfig.cuentaIA)                .cfg-label { color: var(--btn-cuentaIAConfig-color); }


/* -----------------------------------------------------------------
   CLIENTE  — fa-users  (solid)  |  rojo vino
   ----------------------------------------------------------------- */
.btnFicha.cliente {
    border-color: var(--btn-cliente-color);
}
.btnFicha.cliente::before {
    content: "\f0c0";          /* fa-users */
    color: var(--btn-cliente-color);
}
.btnFicha.cliente:hover {
    background-color: var(--btn-cliente-color);
    border-color: var(--btn-cliente-color);
}
.btnFicha.cliente:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   INMUEBLE  — fa-home  (solid)  |  azul
   ----------------------------------------------------------------- */
.btnFicha.inmueble {
    border-color: var(--btn-inmueble-color);
}
.btnFicha.inmueble::before {
    content: "\f015";          /* fa-home */
    color: var(--btn-inmueble-color);
}
.btnFicha.inmueble:hover {
    background-color: var(--btn-inmueble-color);
    border-color: var(--btn-inmueble-color);
}
.btnFicha.inmueble:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   DEMANDA  — fa-people-roof  (solid, FA6+)  |  verde #009846
   ----------------------------------------------------------------- */
.btnFicha.demanda {
    border-color: var(--btn-demanda-color);
}
.btnFicha.demanda::before {
    content: "\e537";          /* fa-people-roof — requiere FA6+ */
    color: var(--btn-demanda-color);
}
.btnFicha.demanda:hover {
    background-color: var(--btn-demanda-color);
    border-color: var(--btn-demanda-color);
}
.btnFicha.demanda:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   OPERACIONES  — fa-handshake  (solid)  |  verde oscuro #417054
   ----------------------------------------------------------------- */
.btnFicha.operaciones {
    border-color: var(--btn-operaciones-color);
}
.btnFicha.operaciones::before {
    content: "\f2b5";          /* fa-handshake */
    color: var(--btn-operaciones-color);
}
.btnFicha.operaciones:hover {
    background-color: var(--btn-operaciones-color);
    border-color: var(--btn-operaciones-color);
}
.btnFicha.operaciones:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   EURO  — fa-euro-sign  (solid)  |  25px
   ----------------------------------------------------------------- */
.btnFicha.euro {
    height: 25px !important;
    width: 25px !important;
    min-width: 25px !important;
    border-color: var(--btn-euro-color);
    background-color: #f9f9f9;
}
.btnFicha.euro::before {
    content: "\f153";          /* fa-euro-sign */
    color: var(--btn-euro-color);
    font-size: 13px;
}
.btnFicha.euro:hover {
    background-color: var(--btn-euro-color);
    border-color: var(--btn-euro-color);
}
.btnFicha.euro:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   AVALISTA  — fa-user-shield  (solid FA7)  |  índigo #5c6bc0
   ----------------------------------------------------------------- */
.btnFicha.avalista {
    border-color: var(--btn-avalista-color);
}
.btnFicha.avalista::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f505";          /* fa-user-shield */
    color: var(--btn-avalista-color);
}
.btnFicha.avalista:hover {
    background-color: var(--btn-avalista-color);
    border-color: var(--btn-avalista-color);
}
.btnFicha.avalista:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   INFORME VALORACIÓN  — fa-file-chart-column  (solid FA7)
   ----------------------------------------------------------------- */
.btnFicha.valoracion {
    border-color: var(--btn-valoracion-color);
}
.btnFicha.valoracion::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f15c";            /* fa-file-chart-column */
    color: var(--btn-valoracion-color);
}
.btnFicha.valoracion:hover {
    background-color: var(--btn-valoracion-color);
    border-color: var(--btn-valoracion-color);
}
.btnFicha.valoracion:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   FACTURAS  — fa-file-invoice  (solid FA7)
   ----------------------------------------------------------------- */
.btnFicha.facturas {
    border-color: var(--btn-facturas-color);
}
.btnFicha.facturas::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f570";            /* fa-file-invoice */
    color: var(--btn-facturas-color);
}
.btnFicha.facturas:hover {
    background-color: var(--btn-facturas-color);
    border-color: var(--btn-facturas-color);
}
.btnFicha.facturas:hover::before { color: #ffffff; }

/* -----------------------------------------------------------------
   LLAVES  — fa-key  (solid FA7)
   ----------------------------------------------------------------- */
.btnFicha.llaves {
    border-color: var(--btn-llaves-color);
}
.btnFicha.llaves::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f084";            /* fa-key */
    color: var(--btn-llaves-color);
}
.btnFicha.llaves:hover {
    background-color: var(--btn-llaves-color);
    border-color: var(--btn-llaves-color);
}
.btnFicha.llaves:hover::before { color: #ffffff; }

/* =================================================================
   BOTÓN GUARDAR  (btn-success / btnGuardar)
   Fondo blanco + icono verde en reposo; invertido en hover
   ================================================================= */
.btn-success.btnGuardar,
.btnGuardar {
    height: 34px;
    width: auto !important;
    min-width: unset !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    border: 1px solid #5cb85c !important;
    line-height: 1;
    padding: 0 14px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 13px;
    color: #5cb85c;
    font-weight: bold;
    transition: var(--btn-transition);
    vertical-align: middle;
}
.btnGuardar::before {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    font-size: 18px;
    content: "\f0c7";          /* fa-floppy-disk */
    color: #5cb85c;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.btnGuardar i {
    display: none !important;
}
.btnGuardar:hover {
    background-color: #5cb85c !important;
    border-color: #4cae4c !important;
    color: #ffffff;
}
.btnGuardar:hover::before {
    color: #ffffff;
}
.btnGuardar:focus {
    outline: none;
}

/* =================================================================
   BASE — BOTONES CON TEXTO  (btnPanelDerecho / btnPanelDerechoSalir)
   ================================================================= */
.btnPanelDerecho,
.btnPanelDerechoSalir {
    height: 34px;
    border-radius: 5px !important;
    background-color: #ffffff;
    border-width: 1px !important;
    border-style: solid !important;
    line-height: 1;
    padding: 0 12px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 13px;
    transition: var(--btn-transition);
    vertical-align: middle;
}

/* Icono embebido */
.btnPanelDerecho::before,
.btnPanelDerechoSalir::before {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------
   EDITAR  — fa-pencil
   ----------------------------------------------------------------- */
.btnPanelDerecho {
    color: var(--btn-edit-color);
    border-color: var(--btn-edit-color) !important;
}
.btnPanelDerecho::before {
    content: "\f303";          /* fa-pencil */
    color: var(--btn-edit-color);
}
.btnPanelDerecho:hover {
    background-image: linear-gradient(135deg, rgb(51, 122, 183) 0%, rgb(32, 82, 132) 100%);
    color: #ffffff;
    border-color: transparent;
}
.btnPanelDerecho:hover::before {
    color: #ffffff;
}
.btnPanelDerecho:focus {
    outline: none;
}

/* -----------------------------------------------------------------
   SALIR  — fa-right-from-bracket  [era fa-sign-out en FA4]
   ----------------------------------------------------------------- */
.btnPanelDerechoSalir {
    color: #000000;
    border-color: #555555 !important;
}
.btnPanelDerechoSalir::before {
    content: "\f2f5";          /* fa-right-from-bracket */
    color: #000000;
}
.btnPanelDerechoSalir:hover {
    background-image: linear-gradient(135deg, rgb(93, 93, 93) 10%, rgb(39, 39, 39) 90%);
    color: #ffffff;
    border-color: transparent;
}
.btnPanelDerechoSalir:hover::before {
    color: #ffffff;
}
.btnPanelDerechoSalir:focus {
    outline: none;
}

/* -----------------------------------------------------------------
   VER MÁS  — fa-eye  (solid)
   Añadir clase .verMas al elemento HTML
   ----------------------------------------------------------------- */
.btnPanelDerecho.verMas {
    color: #0369a1;
    border-color: #0369a1;
}
.btnPanelDerecho.verMas::before {
    content: "\f06e";          /* fa-eye */
    color: #0369a1;
}
.btnPanelDerecho.verMas:hover {
    background-image: linear-gradient(135deg, #0369a1 0%, #0369a1 100%);
    color: #ffffff;
    border-color: transparent;
}
.btnPanelDerecho.verMas:hover::before {
    color: #ffffff;
}

/* -----------------------------------------------------------------
   NUEVO  — fa-plus  (solid)
   Añadir clase .nuevo al elemento HTML
   ----------------------------------------------------------------- */
.btnPanelDerecho.nuevo {
    color: #009846;
    border-color: #009846;
}
.btnPanelDerecho.nuevo::before {
    content: "\f067";          /* fa-plus */
    color: #009846;
}
.btnPanelDerecho.nuevo:hover {
    background-image: linear-gradient(135deg, #009846 0%, #006f34 100%);
    color: #ffffff;
    border-color: transparent;
}
.btnPanelDerecho.nuevo:hover::before {
    color: #ffffff;
}



/* -----------------------------------------------------------------
   Variante: btnPanelDerecho con icono de teléfono (panel datos)
   Añadir clase .btnLlamar al elemento HTML
   ----------------------------------------------------------------- */
.btnPanelDerecho.btnLlamar::before {
    content: "\f095";          /* fa-phone */
}

/* =================================================================
   BOTÓN OPCIONES (solo responsive SM/XS)
   Dropdown de navegación móvil en la barra superior
   ================================================================= */
/* oculta texto y caret, deja solo el ::before */
.botonesOpcMenu .caret {
    display: none !important;
}
.botonesOpcMenu {
    height: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    border-radius: 6px;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #1a5ca8 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
    transition: var(--btn-transition);
    vertical-align: middle;
}
.botonesOpcMenu::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    content: "\f0c9";          /* fa-bars */
    color: #1a5ca8 !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.botonesOpcMenu:hover,
.botonesOpcMenu[aria-expanded="true"] {
    background-color: #1a5ca8 !important;
    border-color: #1a5ca8 !important;
    transform: scale(1.07);
}
.botonesOpcMenu:hover::before,
.botonesOpcMenu[aria-expanded="true"]::before {
    color: #ffffff !important;
}
.botonesOpcMenu:disabled,
.botonesOpcMenu[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
}

/* =================================================================
   ESTADO DESHABILITADO
   ================================================================= */
.botonesOpc:disabled,
.botonesOpc[disabled],
.btnPanelDerecho:disabled,
.btnPanelDerecho[disabled],
.btnPanelDerechoSalir:disabled,
.btnPanelDerechoSalir[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media only screen and (min-width: 769px) {
    .botonesOpc,
    .botonesOpcMenu {
        height: var(--btn-size, 38px) !important;
        width: var(--btn-size, 38px) !important;
        min-width: var(--btn-size, 38px) !important;
        margin-right: 5px;
    }
    .btnBr {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .botonesOpc,
    .botonesOpcMenu {
        height: var(--btn-size, 32px) !important;
        width: var(--btn-size, 32px) !important;
        min-width: var(--btn-size, 32px) !important;
        margin-right: 4px;
        margin-bottom: 8px;
    }
    .botonesOpc::before,
    .botonesOpcMenu::before {
        font-size: calc(var(--btn-size, 32px) * 0.42);
    }
    .btnBr {
        display: block;
        content: "";
    }
}

/* =================================================================
   TOOLTIP PURO CSS — atributo data-tooltip
   Uso: <button class="botonesOpc nueva" data-tooltip="Nueva gestión"></button>
   Funciona en botonesOpc, btnFicha y btnPanelDerecho.
   No requiere JavaScript.
   ================================================================= */
[data-tooltip] {
    position: relative;
    overflow: visible !important;
}
[data-tooltip]:hover {
    z-index: 10000;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333333;
    color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 9999 !important;
    transform: translateX(-50%);
}
[data-tooltip]:hover::after {
    opacity: 1;
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 6px);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::after {
    opacity: 1;
}

/* =================================================================
   CHECKBOX GLOBAL — chkGlobal
   Uso básico:
     <input type="checkbox" class="chkGlobal">

   Con etiqueta:
     <label class="chkLabel">
         <input type="checkbox" class="chkGlobal">
         <span>Texto de la opción</span>
     </label>

   Tamaños:   sm  |  (defecto 18px)  |  lg
   Colores:   verde | rojo | naranja | morado  (defecto azul)
   ================================================================= */

/* --- Variables internas --- */
:root {
    --chk-size:        18px;
    --chk-radius:      5px;
    --chk-color:       var(--btn-edit-color, #0369a1);
    --chk-color-rgb:   3, 105, 161;
    --chk-border:      #cbd5e1;
    --chk-bg:          #f8fafc;
    --chk-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.2l3.5 3.5L11 1' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --chk-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 2'%3E%3Cpath d='M1 1h10' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Base --- */
.chkGlobal {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    display: inline-block;
    width: var(--chk-size);
    height: var(--chk-size);
    min-width: var(--chk-size);

    background-color: var(--chk-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0;

    border: 1.5px solid var(--chk-border);
    border-radius: var(--chk-radius);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);

    vertical-align: middle;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    flex-shrink: 0;

    transition: background-color 0.15s ease,
                border-color     0.15s ease,
                background-size  0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow       0.15s ease;
}

/* Hover sin marcar */
.chkGlobal:hover:not(:disabled):not(:checked):not(:indeterminate) {
    border-color: #94a3b8;
    background-color: #f1f5f9;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07), 0 0 0 3px rgba(var(--chk-color-rgb), 0.08);
}

/* Quitar outline negro del navegador al hacer clic con ratón */
.chkGlobal:focus {
    outline: none !important;
}
.chkGlobal:focus:not(:focus-visible) {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.chkGlobal:checked:focus:not(:focus-visible) {
    box-shadow: 0 1px 4px rgba(var(--chk-color-rgb), 0.35);
}

/* Focus solo con teclado (accesible) */
.chkGlobal:focus-visible {
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 3px rgba(var(--chk-color-rgb), 0.2);
}

/* Marcado */
.chkGlobal:checked {
    background-color: var(--chk-color);
    border-color: var(--chk-color);
    background-image: var(--chk-tick);
    background-size: 70% auto;
    background-position: center !important;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(var(--chk-color-rgb), 0.35);
}

/* Animación de "pop" al marcar */
.chkGlobal:checked {
    animation: chkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chkPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.82); }
    100% { transform: scale(1); }
}

/* Indeterminado (seleccionar todos parcial) */
.chkGlobal:indeterminate {
    background-color: var(--chk-color);
    border-color: var(--chk-color);
    background-image: var(--chk-dash);
    background-size: 65% auto;
    background-position: center !important;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(var(--chk-color-rgb), 0.35);
}

/* Deshabilitado */
.chkGlobal:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Etiqueta envolvente --- */
.chkLabel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
    user-select: none;
    line-height: 1.4;
}
.chkLabel:has(.chkGlobal:disabled) {
    opacity: 0.42;
    cursor: not-allowed;
}
/* El hover sobre la etiqueta activa el efecto del checkbox */
.chkLabel:hover .chkGlobal:not(:disabled):not(:checked):not(:indeterminate) {
    border-color: #94a3b8;
    background-color: #f1f5f9;
}

/* --- Tamaños --- */
.chkGlobal.sm {
    --chk-size:   14px;
    --chk-radius: 3px;
}
.chkGlobal.lg {
    --chk-size:   22px;
    --chk-radius: 6px;
}

/* --- Variantes de color --- */
.chkGlobal.verde {
    --chk-color:     var(--btn-nueva-color, #22c55e);
    --chk-color-rgb: 34, 197, 94;
}
.chkGlobal.rojo {
    --chk-color:     var(--btn-trash-color, #e53935);
    --chk-color-rgb: 229, 57, 53;
}
.chkGlobal.naranja {
    --chk-color:     var(--btn-grupo-color, #fd7e14);
    --chk-color-rgb: 253, 126, 20;
}
.chkGlobal.morado {
    --chk-color:     var(--btn-citas-color, #6f42c1);
    --chk-color-rgb: 111, 66, 193;
}

/* =================================================================
   TOGGLE — .toggle-group  (Bootstrap Toggle rediseñado)
   Estructura HTML:
     <div class="toggle-group">
         <label class="btn btn-success toggle-on">Si</label>
         <label class="btn btn-danger active toggle-off">No</label>
         <span class="toggle-handle btn btn-default"></span>
     </div>

   El componente es gestionado por Bootstrap Toggle JS.
   Este CSS solo sobreescribe el aspecto visual.
   ================================================================= */

/* --- Contenedor externo --- */
.toggle.btn {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    background-color: #f1f5f9 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08) !important;
    min-width: 58px !important;
    min-height: 26px !important;
    padding: 2px !important;
    transition: background-color 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease !important;
    overflow: hidden !important;
}

/* Estado ON — verde */
.toggle.btn-success {
    background-color: var(--btn-nueva-color, #22c55e) !important;
}

/* Estado OFF — azul grisáceo oscuro */
.toggle.btn-danger,
.toggle.off {
    background-color: #bd1e1e !important;
}

/* --- Grupo interno --- */
.toggle-group {
    border-radius: 6px !important;
}

/* --- Etiqueta ON --- */
.toggle-on.btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* --- Etiqueta OFF --- */
.toggle-off.btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* --- Handle (pastilla deslizante) --- */
.toggle-handle.btn {
    background-color: #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: 9px solid rgb(242 240 240) !important;
    border-right: 9px solid rgb(242 240 240) !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin: 1px !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* =================================================================
   SCROLL MODERNO — tablas del dashboard
   ================================================================= */
.scroll-moderno {
    scrollbar-width: thin;
    scrollbar-color: #c8cfe8 transparent;
}
.scroll-moderno::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.scroll-moderno::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-moderno::-webkit-scrollbar-thumb {
    background-color: #c8cfe8;
    border-radius: 10px;
}
.scroll-moderno::-webkit-scrollbar-thumb:hover {
    background-color: #a0aac8;
}


/* FONDO DE LISTA COLOR */

.fondoLista{
    background: #faf9ff;
}


/* =================================================================
   LOADER INMOPC — ola infinita
   ================================================================= */

#div_cargando {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(247, 247, 247, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.42s ease, visibility 0.42s ease;
}

#div_cargando.pg-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---- Word ---- */
.inmopc-word {
    display: flex;
    align-items: center;
    gap: 1px;
    letter-spacing: 2px;
}

.inmopc-letter {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    display: inline-block;
    animation: inmopc-wave 1.4s ease-in-out infinite;
}

.inmopc-letter.inmo { color: #337ac4; }
.inmopc-letter.pc   { color: #888888; }

/* delays escalonados — efecto ola */
.inmopc-letter:nth-child(1) { animation-delay: 0.00s; }
.inmopc-letter:nth-child(2) { animation-delay: 0.12s; }
.inmopc-letter:nth-child(3) { animation-delay: 0.24s; }
.inmopc-letter:nth-child(4) { animation-delay: 0.36s; }
.inmopc-letter:nth-child(5) { animation-delay: 0.52s; }
.inmopc-letter:nth-child(6) { animation-delay: 0.64s; }

@keyframes inmopc-wave {
    0%,  100% { transform: translateY(0);     opacity: 1;    }
    30%        { transform: translateY(-9px);  opacity: 1;    }
    60%        { transform: translateY(2px);   opacity: 0.75; }
}

/* ---- Bloque texto + barra del mismo ancho ---- */
.inmopc-block {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* ---- Barra — mismo ancho que el texto INMOPC ---- */
.inmopc-progress {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(51, 122, 196, 0.15);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 10px;
}

.inmopc-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background:  #337ac4;
    animation: inmopc-slide 1.6s ease-in-out infinite;
}

@keyframes inmopc-slide {
    0%   { left: -50%; }
    100% { left: 110%; }
}


/* ============================================================
   INMO-MODAL — diseño moderno y profesional (global)
   Uso: añadir clase "inmo-modal" al div.modal raíz
   ============================================================ */

/* 1 — Contenido */
.inmo-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(10, 20, 50, .22);
}

/* 4 — Header — usa --modal-color del módulo, fallback azul inmueble */
.inmo-modal .modal-header {
    background: var(--modal-color, #337ac4);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    border-bottom: none;
    border-radius: 0;
}

.inmo-modal .modal-header .modal-title {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* 5 — Botón cierre redondo */
.inmo-modal .modal-header .close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: none;
    color: rgba(255, 255, 255, .9);
    opacity: 1;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    float: none;
    padding: 0;
    transition: background .2s, color .2s;
}

.inmo-modal .modal-header .close:hover {
    background: rgba(255, 255, 255, .3);
    color: #ffffff;
}

/* 6 — Body y footer */
.inmo-modal .modal-body {
    padding: 28px 24px;
    background: #f8f9fc;
}

.inmo-modal .modal-footer {
    background: #f8f9fc;
    border-top: 1px solid #e8eaf0;
}

/* --- Grid de opciones --- */
.inmo-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 14px;
}

.inmo-option-card {
    --opt-color: var(--modal-color, #337ac4);
    background: color-mix(in srgb, var(--opt-color) 10%, white);
    border-radius: 12px;
    padding: 18px 10px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--opt-color) 14%, transparent);
    transition: border-color .2s, transform .18s, box-shadow .2s;
    text-align: center;
    user-select: none;
    aspect-ratio: 1 / 1;
    justify-content: center;
}

.inmo-option-card:hover {
    border-color: var(--opt-color);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--opt-color) 28%, transparent);
}

.inmo-option-card:active {
    transform: translateY(-1px) scale(1.01);
}

.inmo-option-icon {
    font-size: 4.2rem;
    color: var(--opt-color);
    line-height: 1;
}

.inmo-option-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--opt-color) 75%, #1a1a2e);
    line-height: 1.3;
}

/* ============================================================
   INMO-BTN — botones modernos reutilizables
   ============================================================ */

.inmo-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .2s, border-color .2s, color .2s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}

.inmo-btn:hover {
    text-decoration: none;
}

/* Primary — acción principal */
.inmo-btn.inmo-btn-primary {
    background: #337ac4;
    color: #ffffff;
    border-color: #337ac4;
    box-shadow: 0 2px 8px rgba(51,122,196,.25);
}

.inmo-btn.inmo-btn-primary:hover {
    background: #2563a8;
    border-color: #2563a8;
    box-shadow: 0 4px 14px rgba(51,122,196,.35);
    color: #ffffff;
}

/* Ghost — acción secundaria (cancelar) */
.inmo-btn.inmo-btn-ghost {
    background: color-mix(in srgb, #337ac4 8%, white);
    color: #337ac4;
    border-color: color-mix(in srgb, #337ac4 30%, white);
}

.inmo-btn.inmo-btn-ghost:hover {
    background: color-mix(in srgb, #337ac4 15%, white);
    border-color: #337ac4;
    color: #337ac4;
}

/* Link-soft — catálogo / acciones auxiliares */
.inmo-btn.inmo-btn-soft {
    background: #f0f4f8;
    color: #4a5568;
    border-color: #e2e8f0;
}

.inmo-btn.inmo-btn-soft:hover {
    background: #e2e8f0;
    border-color: #cbd5e0;
    color: #2d3748;
}

/* ============================================================
   FMT-SEGMENTED — selector Word / PDF estilo segmented control
   Uso: <div class="fmt-segmented">
           <label class="fmt-seg fmt-word"><input type="radio"> <i ...></label>
           <label class="fmt-seg fmt-pdf"><input type="radio"> <i ...></label>
        </div>
   ============================================================ */

.fmt-segmented {
    display: inline-flex;
    background: #e4e9f0;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    margin-top: 6px;
}

.fmt-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 16px;
    transition: background .2s, color .2s, box-shadow .2s;
    user-select: none;
    margin-bottom: 0 !important;
}

.fmt-seg input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Sin seleccionar — icono apagado */
.fmt-seg.fmt-word { color: #a0aec0; }
.fmt-seg.fmt-pdf  { color: #a0aec0; }

/* Seleccionado — segmento blanco con color vivo */
.fmt-seg.fmt-word:has(input:checked) {
    background: #ffffff;
    color: #4a7fc1;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
}
.fmt-seg.fmt-pdf:has(input:checked) {
    background: #ffffff;
    color: #d95b57;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
}

/* ============================================================
   FILT-PILLS — filtros tipo pill para el panel de plantillas
   ============================================================ */
.grupo-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.boton-filtro {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #337ac4;
    background: rgba(51,122,196,0.08);
    border: 1.5px solid rgba(51,122,196,0.2);
    border-radius: 50px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.boton-filtro:hover {
    background: rgba(51,122,196,0.15);
    border-color: rgba(51,122,196,0.4);
    box-shadow: 0 2px 8px rgba(51,122,196,0.15);
}
.boton-filtro.active {
    background: #337ac4;
    color: #ffffff;
    border-color: #337ac4;
    box-shadow: 0 4px 14px rgba(51,122,196,0.35);
}

/* ============================================================
   PLUS JAKARTA SANS — forzar en modales inmopc (solo texto, no iconos)
   ============================================================ */
.inmo-modal .modal-title,
.inmo-modal .modal-body,
.inmo-modal .modal-footer,
.inmo-modal p, .inmo-modal span, .inmo-modal td, .inmo-modal th,
.inmo-modal label, .inmo-modal button, .inmo-modal select,
.inmo-modal input, .inmo-modal a, .inmo-modal h1, .inmo-modal h2,
.inmo-modal h3, .inmo-modal h4, .inmo-modal h5,
#capa_cargandoNewImp td, #capa_cargandoNewImp th,
#capa_cargandoNewImp span, #capa_cargandoNewImp label,
#capa_cargandoNewImp button, #capa_cargandoNewImp select,
#capa_cargandoNewImp input, #capa_cargandoNewImp a,
#capa_cargandoNewImp p, #capa_cargandoNewImp strong,
#capa_cargandoNewImp h4, #capa_cargandoNewImp h5 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ====================== BOTONES HORARIO / CALENDARIO ====================== */

/* Anterior / Siguiente — navegación de mes */
.botonSuave.anterior    { background-color: #f1f5f9 !important; }
.botonSuave.siguiente   { background-color: #f1f5f9 !important; }
.botonSuave.anterior::before  { content: "\f053"; color: #6b7280 !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.siguiente::before { content: "\f054"; color: #6b7280 !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.anterior    { color: #6b7280 !important; }
.botonSuave.siguiente   { color: #6b7280 !important; }

/* Vacaciones */
.botonSuave.vacaciones            { background-color: #fef3c7 !important; }
.botonSuave.vacaciones::before    { content: "\f5ca"; color: #d97706 !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.vacaciones            { color: #d97706 !important; }

/* Baja */
.botonSuave.baja                  { background-color: #fee2e2 !important; }
.botonSuave.baja::before          { content: "\f469"; color: #dc2626 !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.baja                  { color: #dc2626 !important; }

/* Permiso */
.botonSuave.permiso               { background-color: #dbeafe !important; }
.botonSuave.permiso::before       { content: "\f00c"; color: #2563eb !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.permiso               { color: #2563eb !important; }

/* Festivo */
.botonSuave.festivo               { background-color: #dcfce7 !important; }
.botonSuave.festivo::before       { content: "\f005"; color: #16a34a !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.festivo               { color: #16a34a !important; }

/* Solicitudes horario */
.botonSuave.solicitudesHorario               { background-color: #ede9fe !important; }
.botonSuave.solicitudesHorario::before       { content: "\f0e0"; color: #7c3aed !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.solicitudesHorario               { color: #7c3aed !important; }

/* Expandir / Pantalla completa — el icono cambia a fa-compress cuando el botón lleva .activo */
.botonSuave.expandir                         { background-color: #f1f5f9 !important; }
.botonSuave.expandir::before                 { content: "\f065"; color: #64748b !important; font-family: "Font Awesome 7 Free" !important; font-weight: 900; }
.botonSuave.expandir.activo::before          { content: "\f066"; }
.botonSuave.expandir                         { color: #64748b !important; }