@charset "utf-8";
/* =================================================================
   ESTILOS GLOBALES — inmopc
   Hoja de estilos global para estructurar todas las pantallas.
   Usar estas clases en lugar de estilos inline.
   ================================================================= */

/* Evita que Bootstrap desplace el contenido al abrir un modal: al ocultar
   la barra de scroll del body añade un padding-right para compensar el
   hueco, lo que empuja la cabecera/botones hacia la izquierda. */
body.modal-open {
    padding-right: 0 !important;
}

/* =================================================================
   VARIABLES GLOBALES
   ================================================================= */
:root {
    --font-principal: 'Plus Jakarta Sans', sans-serif;

    /* Color principal de las cabeceras de panel/widget */
    --color-cabecera: #337ab7;
    --color-cabecera-fin: #337ab7;
    --color-cabecera-texto: #ffffff;
    --color-numero-badge: #006eff;
    --color-fondo-badge: #006eff28;

    /* Sombra de tarjeta */
    --sombra-panel: 0 2px 12px rgba(51, 122, 196, 0.13);

    /* Radio de bordes */
    --radio-panel: 12px;
}


/* =================================================================
   ETIQUETAS DE TÍTULO — jerarquía de cabeceras de ficha

   etiqueta-titulo  → título principal de página (h1): "Ficha Inmueble REF"
   etiqueta-menu    → barra azul de sección: "DATOS INMUEBLE", "ACTIVIDAD"...
   etiqueta-titulo2 → subtítulo de ficha: "Piso en venta en Madrid - REF123"

   El color se controla con variables; el azul por defecto usa --color-cabecera.
   Para cambiar el color en un elemento concreto: style="--et-color:#fff"
   ================================================================= */

/* Título principal de página */
.etiqueta-titulo {
    font-size: 26px !important;
    font-family: var(--font-principal) !important;
    color: var(--et-color, var(--color-cabecera)) !important;
    line-height: 1.2 !important;
}

.etiqueta-titulo i {
    color: var(--et-color, var(--color-cabecera)) !important;
    margin-right: 8px !important;
}

/* Barra de sección secundaria — cabeceras de sidebar: Ubicación, Portales, Características...
   Más compacta que etiqueta-menu. Color vía --etiqueta-menu2-color. */
.etiqueta-menu2 {
    background-color: var(--etiqueta-menu2-color, var(--color-cabecera)) !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-family: var(--font-principal) !important;
}

.etiqueta-menu2 i,
.etiqueta-menu2 span {
    color: #ffffff !important;
}


/* Barra de menú/sección — fondo azul + texto blanco en mayúsculas */
.etiqueta-menu {
    background: linear-gradient(135deg, var(--color-cabecera) 0%, var(--color-cabecera-fin) 100%) !important;
    color: #ffffff !important;
    padding: 11px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-family: var(--font-principal) !important;
}

.etiqueta-menu i {
    color: #ffffff !important;
}

/* Subtítulo de ficha: "Piso en venta en Ciudad - REF" */
.etiqueta-titulo2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: var(--font-principal) !important;
    color: var(--et2-color, #334155) !important;
    line-height: 1.3 !important;
}


/* =================================================================
   TEXTO PANEL IZQUIERDO — panel-izq-texto
   Clase para las etiquetas de navegación del panel lateral izquierdo:
   "DATOS INMUEBLE", "DATOS INTERNOS", "DATOS ECONÓMICOS", etc.
   Color controlado con --panel-izq-texto-color (por defecto hereda del td).
   ================================================================= */
.panel-izq-texto {
    font-size: 13px !important;
    font-family: var(--font-principal) !important;
    color: var(--panel-izq-texto-color, inherit) !important;
    padding-left: 4px !important;
}


/* =================================================================
   PANEL / WIDGET
   Tarjeta con sombra que envuelve cabecera + contenido.

   Uso:
   <div class="panel-widget">
       <div class="panel-cabecera">
           <div>
               <div class="panel-titulo">Notas de Escritorio</div>
               <div class="panel-subtitulo">Últimos 15 días</div>
           </div>
           ... acciones a la derecha ...
       </div>
       <div class="panel-cuerpo"> ... </div>
   </div>
   ================================================================= */

.panel-widget {
    border-radius: var(--radio-panel) !important;
    box-shadow: var(--sombra-panel) !important;
    overflow: hidden !important;
}

/* Dos tarjetas apiladas una debajo de otra no deben tocarse. Solo aplica
   cuando hay un panel inmediatamente detrás de otro, asi que no afecta a
   los paneles sueltos ni a los que van dentro de columnas Bootstrap. */
.panel-widget + .panel-widget {
    margin-top: 15px;
}

/* Fila Provincia / Delegado / Google Calendar (datosUsuarioView.php) —
   el contenedor de la fila ya es flex con align-items:stretch, pero eso
   solo estira la columna Bootstrap; la tarjeta (.panel-widget) de dentro
   sigue midiendo su propio contenido, así que las tres no acababan a la
   misma altura. Aquí la tarjeta hereda el 100% de esa columna ya estirada. */
.fila-provincia-delegado-calendar > [class*="col-"] > .panel-widget {
    height: 100%;
}

/* -----------------------------------------------------------------
   CABECERA del panel — barra superior azul
   ----------------------------------------------------------------- */
.panel-cabecera {
    background-color: var(--color-cabecera) !important;
    color: var(--color-cabecera-texto) !important;
    border-radius: var(--radio-panel) var(--radio-panel) 0 0 !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: var(--font-principal) !important;
}

/* Título principal de la cabecera */
.panel-titulo {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: var(--color-cabecera-texto) !important;
    font-family: var(--font-principal) !important;
}

/* Subtítulo / rango de fechas bajo el título */
.panel-subtitulo {
    font-size: 10px !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
    margin-top: 1px !important;
    color: var(--color-cabecera-texto) !important;
    font-family: var(--font-principal) !important;
}

/* -----------------------------------------------------------------
   CUERPO del panel — zona blanca bajo la cabecera
   ----------------------------------------------------------------- */
.panel-cuerpo {
    border-radius: 0 0 var(--radio-panel) var(--radio-panel) !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}


/* =================================================================
   PANEL DE LISTADO / BÚSQUEDA LATERAL
   Clases para el panel izquierdo de búsqueda de listados.
   ================================================================= */

/* Título principal del panel (ej: "INMUEBLES") */
.listadoTitulo {
    font-size: 1.5em !important;
    font-weight: 800 !important;
    font-family: var(--font-principal) !important;
}

/* Texto dinámico bajo el título (ej: resultado búsqueda, últimos dados de alta...) */
.listadoAviso {
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--font-principal) !important;
    color: var(--color-cabecera) !important;
}

/* Etiquetas negrita de filtros (Dirección, Código, MLS, Oficina, Mostrar...) */
.listadoNegrita {
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: var(--font-principal) !important;
    color: #333 !important;
    margin: 0 !important;
}

/* Inputs, selects y campos de texto de los filtros */
.listadoTexto {
    font-size: 13px !important;
    font-family: var(--font-principal) !important;
    color: #333 !important;
}


/* =================================================================
   ETIQUETAS DE CAMPO — labels y valores de datos en fichas

   etiqueta-gris          → nombre del campo en gris pequeño (Dirección, Población...)
   etiqueta-gris-mayuscula → igual pero en mayúsculas
   etiqueta-negrita       → valor del campo en negrita (el dato en sí)

   Uso:
   <div class="etiqueta-gris">Dirección</div>
   <div class="etiqueta-negrita">Calle Mayor 12, Madrid</div>
   ================================================================= */

.etiqueta-gris {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    font-family: var(--font-principal) !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
}

.etiqueta-gris-mayuscula {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    font-family: var(--font-principal) !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
}

/* Línea separadora con texto gris en mayúsculas y línea a la derecha
   Uso: <div class="linea-separadora">SECCIÓN</div>
   Resultado: SECCIÓN ─────────────────────────────── */
.linea-separadora {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: var(--font-principal) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 12px 0 8px 0 !important;
    gap: 8px !important;
    border: none !important;
}

.linea-separadora::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background-color: #e2e8f0 !important;
}

.etiqueta-negrita {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    font-family: var(--font-principal) !important;
    line-height: 1.4 !important;
}

/* Valor/importe destacado — negrita en azul principal. Para precios, totales, importes. */
.etiqueta-valor {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-cabecera) !important;
    font-family: var(--font-principal) !important;
    line-height: 1.4 !important;
}


/* =================================================================
   SEPARADOR DE SECCIÓN
   Línea fina con título a la izquierda y acción opcional a la derecha.

   Uso:
   <div class="separador-seccion">
       <span class="separador-seccion__titulo">DISTRIBUCIÓN</span>
       <div class="separador-seccion__linea"></div>
       <button ...></button>   ← opcional
   </div>
   ================================================================= */

.separador-seccion {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 28px 0 18px !important;
}

.separador-seccion__titulo {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    font-family: var(--font-principal) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.separador-seccion__linea {
    flex: 1 !important;
    height: 1px !important;
    background-color: #e2e8f0 !important;
}


/* =================================================================
   CLASES DE CAMPO — modo vista de formularios (datosInmueble y similares)

   fichanegrita → etiqueta encima del dato: Tipo, Operación, Referencia, Precio...
                  Pequeña, azul, mayúsculas, con letra espaciada.
   fichatexto   → dato debajo de la etiqueta: el valor real del campo.
                  Más grande, oscuro, legible.

   Uso:
   <label class="fichanegrita">Tipo</label>
   <div class="fichatexto campo-vista">Piso</div>
   ================================================================= */

/* Etiqueta de campo — negrita negra */
.fichanegrita {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    font-family: var(--font-principal) !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Campo obligatorio — añade un asterisco rojo tras el texto de la etiqueta.
   Uso: <label class="fichanegrita campo-obligatorio">Razón social</label> */
.campo-obligatorio::after {
    content: " *";
    color: #d9534f;
    font-weight: 700;
}

/* Valor del campo — texto normal */
.fichatexto {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    font-family: var(--font-principal) !important;
    text-align: left !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.fichatextoCentrado {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    font-family: var(--font-principal) !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fichatextoPF {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    font-family: var(--font-principal) !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


.fichatextoTitulo {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    font-family: var(--font-principal) !important;
    text-align: left !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
    width: auto !important;
}

.fichatexto-sin-valor {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #999999 !important;
    font-family: var(--font-principal) !important;
    text-align: left !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;

    font-style: italic;
    opacity: 0.7;
}

/* Ancho fijo para inputs de fecha — combinar con fichatexto:
   <input class="fichatexto ficha-fecha" ...> */
.ficha-fecha {
    width: 9ch !important;
    display: block !important;
    margin: 0 !important;
}

/* =================================================================
   CAMPO READONLY — clase para aplicar a mano
   Uso: <input class="form-control campo-readonly" readonly ...>

   Mismas dimensiones que un .form-control normal de Bootstrap 3
   (height 34px, padding 6px 12px) para que no rompa el layout.
   ================================================================= */
.campo-readonly,
.campo-readonly.form-control {
    background-color: #f4f7fb !important;
    border: 1px solid #d5dce8 !important;
    border-radius: 6px !important;
    color: #4a5568 !important;
    cursor: default !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 6px 12px !important;
    height: 34px !important;
    font-size: 15px !important;
    line-height: 1.428571429 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.campo-readonly:focus,
.campo-readonly.form-control:focus {
    border-color: #b8c7d9 !important;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.07) !important;
    outline: none !important;
}

/* Variante textarea — misma clase, sin altura fija */
textarea.campo-readonly {
    height: auto !important;
    min-height: 80px !important;
    resize: vertical !important;
}

.resultado-json {
    max-height: 380px;
    overflow: auto;
    margin: 0;
    padding: 14px 16px;
    background-color: #ffffff;
    border: 1px solid #d5dce8;
    border-radius: 10px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

textarea.asistenteVoz-texto {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
}


/* precio-input y fichatextoPF — dentro de ficha-contenedor anulan
   el padding/height de form-control para equiparar el espaciado
   visual con los campos de fuente más pequeña. */
.ficha-contenedor .precio-input,
.ficha-contenedor-centrado .precio-input,
.ficha-contenedor .fichatextoPF,
.ficha-contenedor-centrado .fichatextoPF {
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Dentro de ficha-contenedor los inputs NO deben ser width:100% porque
   genera una dependencia circular con fit-content del contenedor:
   el hijo al 100% fuerza al padre a expandirse hasta el bloque disponible.
   field-sizing:content hace que el input se encoja al texto que contiene;
   width:auto actúa como mínimo. min-width evita que quede invisible vacío. */
.ficha-contenedor input,
.ficha-contenedor-centrado input {
    width: auto !important;
    field-sizing: content !important;
    min-width: 2ch !important;
}

/* =================================================================
   CLASES DE TAMAÑO DE INPUT — modo edición
   Equivalen al atributo size="" pero controladas desde CSS.

   caja1 → size 30 — campos de texto medianos (dirección, nombre...)

   Se puede usar como clase: <input class="caja1">
   O se aplica automáticamente a todos los inputs con data-val="1".
   ================================================================= */
/* Texto centrado */
.caja2,
.caja3,
.caja6,
.caja7,
input.cajaCodigo,
input[data-val="2"],
input[data-val="3"],
input[data-val="6"],
input[data-val="7"],
input[data-val="20"] {
    text-align: center !important;
}

.caja1,
.caja10,
input[data-val="1"],
input[data-val="10"] {
    width: 220px !important;
}

.caja12,
input[data-val="12"] {
    width: 140px !important;
    text-align: center !important;
}

.caja13,
.caja14,
input[data-val="13"],
input[data-val="14"] {
    width: 80px !important;
    text-align: center !important;
}

.caja15,
input[data-val="15"] {
    width: 100px !important;
}

.caja17,
.caja18,
input[data-val="17"],
input[data-val="18"] {
    width: 120px !important;
}

.caja19,
input[data-val="19"] {
    width: 70px !important;
    text-align: center !important;
}

/* data-val 20: mismo tamaño que el 2 pero texto libre de 5 caracteres */
.caja2,
input[data-val="2"],
input[data-val="20"] {
    width: 50px !important;
}

.caja3,
input[data-val="3"] {
    width: 90px !important;
}

.caja5,
input[data-val="5"] {
    width: 270px !important;
}

.caja6,
input[data-val="6"] {
    width: 130px !important;
}

.caja7,
input[data-val="7"] {
    width: 140px !important;
}

/* Variante código — sobreescribe el ancho de caja7 a ~6 caracteres */
input.cajaCodigo {
    width: 75px !important;
}

.caja8,
textarea[data-val="8"] {
    width: 100% !important;
    height: 90px !important;
    resize: vertical !important;
}

.caja9,
textarea[data-val="9"] {
    width: 100% !important;
    height: 112px !important;
    resize: vertical !important;
}

/* Variante alta — para pantallas cuyo unico contenido es el texto, donde la
   altura fija de data-val 8/9 se queda corta (ej. el modal de observaciones
   publicas por idioma). No toca el ancho ni la validacion del data-val.
   Altura a medida:  <textarea data-val="9" class="textarea-alto"
                               style="--textarea-alto:320px">
   El segundo selector sube la especificidad a (0,2,1) para ganar tambien a
   los bloques responsive del final de este fichero, que bajan la altura de
   data-val 8/9 y van despues en orden de cascada.                           */
textarea.textarea-alto,
textarea[data-val].textarea-alto {
    height: var(--textarea-alto, 260px) !important;
}

/* Texto largo en modo vista, plegado a una altura fija con boton "Ver mas".
   Plegado muestra --texto-plegable-alto; con .expandido se abre al alto
   completo del texto (o hasta --texto-plegable-max si se define).
   Uso:  <span class="texto-plegable scroll-moderno">...</span>
         el boton alterna la clase .expandido                                */
.texto-plegable {
    display: block;
    max-height: var(--texto-plegable-alto, 130px);
    overflow: hidden;
}

.texto-plegable.expandido {
    max-height: var(--texto-plegable-max, none);
    overflow-y: auto;
}

/* Todas las cajas nunca desbordan su contenedor */
.caja1,
.caja2,
.caja3,
.caja5,
.caja6,
.caja7,
.caja8,
.caja9,
.caja10,
.caja12,
.caja13,
.caja14,
.caja15,
input.cajaCodigo,
input[data-val="1"],
input[data-val="2"],
input[data-val="3"],
input[data-val="5"],
input[data-val="6"],
input[data-val="7"],
input[data-val="10"],
input[data-val="12"],
input[data-val="13"],
input[data-val="14"],
input[data-val="15"],
input[data-val="19"],
input[data-val="20"],
textarea[data-val="8"],
textarea[data-val="9"] {
    max-width: 100% !important;
}

/* =================================================================
   PANEL DE CAMPOS CON ANCHO FIJO — panel-campos
   (alias historico: .objetivos-comerciales-panel, de
   datosUsuarioObjetivosView.php / datosOficinaObjetivosView.php)

   Las columnas de Bootstrap (col-md-3 en %) son mucho más anchas que
   el tamaño fijo ya definido arriba para caja12/caja13 (140px/80px),
   dejando un hueco vacío enorme a la derecha de cada input. Aquí las
   columnas dejan de repartirse por porcentaje y se ajustan (ancho
   automático) al tamaño real de la etiqueta + el input.

   Úsalo en cualquier panel cuyos campos lleven data-val, en lugar de
   meter el input en un input-group de Bootstrap (que es display:table
   y empuja el símbolo — €, %, m² — al borde de la columna).

   Uso:
   <div class="panel-cuerpo panel-campos">
       <div class="row">
           <div class="col-md-3 form-group">
               <label class="fichanegrita">Importe (€)</label>
               <input type="text" data-val="12" class="form-control">
           </div>
       </div>
   </div>
   ================================================================= */
/* El cuerpo respira: .panel-cuerpo no trae padding propio y los campos
   quedarían pegados al borde del panel. */
.panel-campos {
    padding: 10px;
}

.panel-campos .row,
.objetivos-comerciales-panel .row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-left: 0;
    margin-right: 0;
}

/* El clearfix de Bootstrap (.row:before/:after { content:" "; display:table; })
   se sigue calculando como si fuera el primer elemento flex, desplazando 30px
   (el ancho del column-gap) el arranque de la primera línea respecto al resto. */
.panel-campos .row::before,
.panel-campos .row::after,
.objetivos-comerciales-panel .row::before,
.objetivos-comerciales-panel .row::after {
    content: none !important;
    display: none !important;
}

.panel-campos .row > [class*="col-"],
.objetivos-comerciales-panel .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
}

/* -----------------------------------------------------------------
   RESPONSIVE — mobile (≤ 767px)
   Las cajas anchas pasan a ocupar el 100% del contenedor.
   Las pequeñas (código, número, teléfono) mantienen su tamaño.
   ----------------------------------------------------------------- */
@media (max-width: 767px) {

    .caja1,
    .caja10,
    input[data-val="1"],
    input[data-val="10"] {
        width: 100% !important;
    }

    .caja5,
    input[data-val="5"] {
        width: 100% !important;
    }

    .caja8,
    textarea[data-val="8"] {
        width: 100% !important;
        height: 80px !important;
    }

    .caja9,
    textarea[data-val="9"] {
        width: 100% !important;
        height: 100px !important;
    }
}

/* -----------------------------------------------------------------
   RESPONSIVE — tablet (768px – 1024px)
   Las textareas grandes se limitan al ancho del contenedor.
   ----------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

    .caja8,
    textarea[data-val="8"] {
        width: 100% !important;
    }

    .caja9,
    textarea[data-val="9"] {
        width: 100% !important;
    }
}


/* =================================================================
   FILA DE CONTENEDORES — ficha-fila
   Wrapper flex que iguala el alto de todos los ficha-contenedor hijos.

   Uso:
   <div class="ficha-fila">
       <div class="ficha-contenedor">...</div>
       <div class="ficha-contenedor">...</div>
   </div>
   ================================================================= */
.ficha-fila {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
}

/* Dentro de ficha-fila los contenedores se estiran al alto del más alto.
   min-height garantiza que la segunda fila (ej: fechas) tenga
   el mismo alto que la primera (precio/referencia) aunque sean más bajas. */
.ficha-fila>.ficha-contenedor,
.ficha-fila>.ficha-contenedor-centrado {
    justify-content: flex-start !important;
    min-height: var(--ficha-fila-min-height, 64px) !important;
}


/* =================================================================
   CONTENEDOR DE CAMPO — ficha-contenedor
   Envuelve fichanegrita (label) + fichatexto (valor).
   Se adapta al contenido: ocupa lo que necesite el campo más ancho.
   El fondo se controla con --ficha-contenedor-bg.

   Uso:
   <div class="ficha-contenedor">
       <label class="fichanegrita">Tipo</label>
       <div class="fichatexto campo-vista">Piso</div>
   </div>
   ================================================================= */
.ficha-contenedor {
    background-color: var(--ficha-contenedor-bg, #37afff11);
    border-radius: 8px !important;
    padding: 10px 20px !important;
    margin-bottom: 10px !important;
    margin-right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: fit-content !important;
    min-width: 0 !important;
}

.ficha-contenedor-centrado {
    background-color: var(--ficha-contenedor-bg, #37afff11) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    margin-bottom: 10px !important;
    margin-right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: fit-content !important;
    min-width: 0 !important;
    text-align: center !important;
}

/* =================================================================
   CONTENEDOR AJUSTADO AL CONTENIDO — ajusta-contenido
   Clase utilitaria para cualquier div/contenedor que deba encogerse
   al tamaño de su contenido interior (input, select, etc.)
   ================================================================= */
.ajusta-contenido {
    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
}


/* =================================================================
   CABECERA DE TABLA DE LISTADO
   Fila de cabecera azul sticky de la tabla de resultados.
   Poner la clase en el <tr>; los <a> y <span> internos heredan el estilo.

   Uso:
   <tr class="listadoTablaCab visible-lg visible-md">
       <td>...</td>
   </tr>
   ================================================================= */
.listadoTablaCab {
    background-color: var(--color-cabecera) !important;
    color: #ffffff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9 !important;
}

.listadoTablaCab a,
.listadoTablaCab span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    font-family: var(--font-principal) !important;
}


/* =================================================================
   INPUT DE PRECIO
   Input grande y centrado para campos de precio/importe.
   Usar dentro de un input-group Bootstrap para añadir el símbolo de moneda.

   Uso:
   <div class="input-group">
       <span class="input-group-addon precio-simbolo"><?php echo $_SESSION['simbolo_moneda']; ?></span>
       <input type="text" class="form-control precio-input" ... />
   </div>
   ================================================================= */
.precio-input,
.referencia-input {
    font-size: 20px !important;
    font-weight: 600 !important;
    text-align: center !important;
    font-family: var(--font-principal) !important;
    color: #333 !important;
}

/* -----------------------------------------------------------------
   PRECIO BADGE — precio en display de ficha (no input).
   Fondo circular/pill con el color del módulo vía variable.
   El color del fondo se controla con --precio-badge-color.
   Por defecto usa el azul principal.

   Uso:
   <div class="precio-badge">350.000 €</div>
   Con color: <div class="precio-badge" style="--precio-badge-color:#20c997">350.000 €</div>
   ----------------------------------------------------------------- */
.precio-badge {
    display: inline-block !important;
    background-color: var(--precio-badge-color, #deeaf7) !important;
    color: var(--precio-badge-texto, #000000) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    font-family: var(--font-principal) !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    box-shadow: 0 4px 14px rgba(51, 122, 183, 0.15) !important;
}


.precio-simbolo {
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: var(--font-principal) !important;
    color: #555 !important;
    background-color: #eef0f8 !important;
    border-color: #ccc !important;
}


/* =================================================================
   CÍRCULOS / BADGES DE ESTADO Y ETIQUETAS

   circulo3  → badge de estado del inmueble (Disponible, Alquilado...).
               Color de fondo dinámico vía --circulo3-color (se pasa inline desde PHP).
   circulo1  → tarjeta pill del captador / propietario. Fondo suave vía --circulo1-color.

   Uso circulo3:
   <div class="circulo3" style="--circulo3-color:<?echo $bgColorEstado;?>">Disponible</div>

   Uso circulo1:
   <div class="circulo1">Gestor → Juan García</div>
   ================================================================= */

.circulo3 {
    display: inline-block !important;
    background-color: var(--circulo3-color, var(--color-cabecera)) !important;
    border: 2px solid var(--circulo3-color, var(--color-cabecera)) !important;
    color: var(--circulo3-texto, #ffffff) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: var(--font-principal) !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    letter-spacing: 0.2px !important;
}

.circulo1 {
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--circulo1-color, #f8fafc) !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--font-principal) !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    min-height: 32px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.18s !important;
    box-sizing: border-box !important;
}

.circulo1:hover {
    background-color: var(--circulo1-hover, #e2e8f0) !important;
    transform: scale(1.04) !important;
}

/* Características del inmueble — misma forma pill que circulo1, cada una con su color original */
.tarjetasCarac1,
.tarjetasCarac2,
.tarjetasCarac3 {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--font-principal) !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    min-height: 32px !important;
    line-height: 1 !important;
    margin: 5px 6px 5px 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
}

.tarjetasCarac1,
.tarjetasCarac2,
.tarjetasCarac3 {
    background-color: #f8fafc !important;
    color: #334155 !important;
}


/* =================================================================
   TÍTULO DE SECCIÓN
   Texto de cabecera de un bloque o panel (no dentro de panel-cabecera).
   El color se controla con la variable --seccion-titulo-color.
   Por defecto usa el azul principal. Para blanco: style="--seccion-titulo-color:#fff"

   Uso:
   <div class="seccion-titulo">Solicitud Rápida</div>
   <div class="seccion-titulo" style="--seccion-titulo-color:#ffffff">Otras Utilidades</div>
   ================================================================= */
.seccion-titulo {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    font-family: var(--font-principal) !important;
    color: var(--seccion-titulo-color, var(--color-cabecera)) !important;
}


/* =================================================================
   TABLAS DE DATOS
   Clases globales para cualquier tabla de listado del programa.

   Uso básico:
   <table>
     <tr>
       <td class="tbl-th">Fecha</td>
       <td class="tbl-th">Tipo</td>
       <td class="tbl-th">Asunto</td>
     </tr>
     <tr>
       <td class="tbl-td tbl-td-fecha">12/05/2026</td>
       <td class="tbl-td"><span class="badge-tipo">Llamada</span></td>
       <td class="tbl-td">Consulta precio</td>
     </tr>
   </table>
   ================================================================= */

/* -----------------------------------------------------------------
   CELDA DE CABECERA — columnas de cualquier tabla
   ----------------------------------------------------------------- */
.tbl-th {
    background-color: #eef0f8 !important;
    color: #555 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    padding: 7px 8px !important;
    border-bottom: 1px solid #d0d0e0 !important;
    font-family: var(--font-principal) !important;
    vertical-align: middle !important;
}

/* -----------------------------------------------------------------
   CELDA DE DATO — celda estándar de cualquier tabla
   Usar para: asunto, nombre cliente/contacto, referencia, etc.
   ----------------------------------------------------------------- */
.tbl-td {
    font-size: 14px !important;
    color: #333 !important;
    padding: 7px 8px !important;
    border-bottom: 1px solid #ebebf2 !important;
    vertical-align: middle !important;
    font-family: var(--font-principal) !important;
    cursor: pointer !important;
}

.tbl-td:hover {
    background-color: #f5f7ff !important;
}

/* -----------------------------------------------------------------
   HORA bajo la fecha — texto pequeño en gris
   Uso: <span class="tbl-hora">14:30</span>
   ----------------------------------------------------------------- */
.tbl-hora {
    font-size: 11px !important;
    color: #888 !important;
}

/* -----------------------------------------------------------------
   BADGE TIPO — pequeño pill redondeado con color de fondo
   El color se controla con la variable --badge-color en inline style.
   Por defecto usa el color principal de la aplicación.

   Uso: <span class="badge-tipo">Llamada</span>
   Con color: <span class="badge-tipo" style="--badge-color:#20c997">Visita</span>
   ----------------------------------------------------------------- */
.badge-tipo {
    display: inline-block !important;
    background-color: var(--badge-color, var(--color-cabecera)) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    font-family: var(--font-principal) !important;
    letter-spacing: 0.2px !important;
}


/* =================================================================
   CÓDIGOS Y REFERENCIAS ESPECÍFICAS
   Clases para mostrar identificadores clave del sistema.

   Uso:
   <span class="refInmueble">REF-000123</span>
   ================================================================= */


.codUniversalBadge {
    text-align: center;
    font-size: 13px !important;
    color: var(--color-numero-badge) !important;
    font-family: var(--font-principal) !important;
    font-weight: 900;
    justify-self: anchor-center;
    padding: 5px;
    background: var(--color-fondo-badge) !important;
    border-radius: 10px;
    border: none;
    min-width: 40px;
    white-space: nowrap;
}


/* =================================================================
   MENÚ DESPLEGABLE DE OPCIONES — menu-opciones
   Uso base:       <ul class="dropdown-menu menu-opciones">
   Para cliente: añadir también menu-opciones-cli
   Para contacto: añadir también menu-opciones-con
   Para prospección: añadir también menu-opciones-pros
   ================================================================= */
.menu-opciones {
    border: 1px solid rgba(51, 122, 183, 0.15) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 36px rgba(51, 122, 183, 0.13), 0 2px 10px rgba(0,0,0,0.08) !important;
    padding: 8px 0 !important;
    min-width: 205px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    animation: menuOpcFadeIn 0.14s ease;
}

@keyframes menuOpcFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.menu-opciones > li {
    height: auto !important;
}

.menu-opciones > li > a {
    font-family: var(--font-principal) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    color: #334155 !important;
    padding: 9px 18px 9px 16px !important;
    display: block !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: background-color 0.13s, border-color 0.13s, color 0.13s !important;
    line-height: 1.3 !important;
    background-color: transparent !important;
}

.menu-opciones > li > a:hover,
.menu-opciones > li > a:focus {
    background-color: rgba(51, 122, 183, 0.07) !important;
    border-left-color: var(--color-cabecera) !important;
    color: var(--color-cabecera) !important;
    outline: none !important;
}

.menu-opciones > li.divider {
    height: 0 !important;
    margin: 6px 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: none !important;
}

/* --- Variante cliente --- */
.menu-opciones.menu-opciones-cli > li > a:hover,
.menu-opciones.menu-opciones-cli > li > a:focus {
    background-color: rgba(234, 141, 43, 0.09) !important;
    border-left-color: rgba(234, 141, 43, 1) !important;
    color: rgba(200, 110, 10, 1) !important;
}

/* --- Variante contacto --- */
.menu-opciones.menu-opciones-con > li > a:hover,
.menu-opciones.menu-opciones-con > li > a:focus {
    background-color: rgba(160, 132, 100, 0.09) !important;
    border-left-color: #A08464 !important;
    color: #7a6040 !important;
}

/* --- Variante prospección --- */
.menu-opciones.menu-opciones-pros > li > a:hover,
.menu-opciones.menu-opciones-pros > li > a:focus {
    background-color: rgba(98, 161, 255, 0.09) !important;
    border-left-color: #62A1FF !important;
    color: #2f5fa0 !important;
}

/* --- Variante demanda --- */
.menu-opciones.menu-opciones-dem > li > a:hover,
.menu-opciones.menu-opciones-dem > li > a:focus {
    background-color: rgba(0, 152, 70, 0.10) !important;
    border-left-color: #009846 !important;
    color: #007a38 !important;
}

/* --- Variante inmueble --- */
.menu-opciones.menu-opciones-inm > li > a:hover,
.menu-opciones.menu-opciones-inm > li > a:focus {
    background-color: rgba(160, 132, 100, 0.09) !important;
    border-left-color: #6cb0ec !important;
    color: #2b6aa0 !important;
}

/* --- Variante operaciones --- */
.menu-opciones.menu-opciones-oper > li > a:hover,
.menu-opciones.menu-opciones-oper > li > a:focus {
    background-color: rgba(65, 112, 84, 0.09) !important;
    border-left-color: #417054 !important;
    color: #2f4d3d !important;
}


/* =================================================================
   SWEETALERT — reskin visual global
   Sobreescribe únicamente el aspecto de las alertas SweetAlert (v1,
   sweetalert-master) que ya se usan en toda la app: mismo JS/lógica
   (swal({...})), solo se retocan las clases estándar de la librería
   (.sweet-alert, .sa-icon, botones .confirm/.cancel...) para que
   coincidan con el resto del sistema de diseño (--font-principal,
   --color-cabecera, --radio-panel).
   ================================================================= */
.sweet-overlay {
    background-color: rgba(15, 23, 42, 0.55) !important;
}

.sweet-alert {
    border-radius: 20px !important;
    padding: 34px 30px 30px !important;
    box-shadow: 0 24px 60px rgba(20, 35, 60, .28) !important;
    font-family: var(--font-principal) !important;
}

.sweet-alert h2 {
    font-family: var(--font-principal) !important;
    font-weight: 700 !important;
    font-size: 21px !important;
    color: #1e293b !important;
    margin-top: 10px !important;
}

.sweet-alert p {
    font-family: var(--font-principal) !important;
    font-size: 14.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

.sweet-alert button {
    border-radius: var(--radio-panel, 10px) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 24px !important;
    font-family: var(--font-principal) !important;
    box-shadow: none !important;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}

.sweet-alert button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 35, 60, .18) !important;
}

.sweet-alert button.confirm {
    background-color: var(--color-cabecera) !important;
}

.sweet-alert button.confirm:hover {
    filter: brightness(0.9);
}

.sweet-alert button.cancel {
    background-color: #eef1f7 !important;
    color: #1e293b !important;
}

.sweet-alert button.cancel:hover {
    background-color: #e2e7f0 !important;
}

.sweet-alert .sa-icon.sa-warning {
    border-color: #f59e0b !important;
}

.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
    background-color: #f59e0b !important;
}

.sweet-alert .sa-icon.sa-error {
    border-color: #ef4444 !important;
}

.sweet-alert .sa-icon.sa-error .sa-line {
    background-color: #ef4444 !important;
}

.sweet-alert .sa-icon.sa-success {
    border-color: #22c55e !important;
}

.sweet-alert .sa-icon.sa-success .sa-line {
    background-color: #22c55e !important;
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
    border-color: rgba(34, 197, 94, .3) !important;
}


.aviso {
    --aviso-bg: #eef4fb;
    --aviso-borde: #cfe0f2;
    --aviso-texto: #3c4a60;
    --aviso-acento: #2b6aa0;
    --aviso-vacio: #b5cde6;

    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--aviso-bg);
    border: 1px solid var(--aviso-borde);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font-principal);
    color: var(--aviso-texto);
}

.aviso[data-usadas="2"],
.aviso[data-estado="pago"] {
    --aviso-bg: #fdf3e3;
    --aviso-borde: #f0d3a0;
    --aviso-texto: #6b4c12;
    --aviso-acento: #c77d0a;
    --aviso-vacio: #e2c48f;
}

.aviso[data-estado="bloqueado"] {
    --aviso-bg: #fdecec;
    --aviso-borde: #f3c2c2;
    --aviso-texto: #7a2020;
    --aviso-acento: #c0392b;
    --aviso-vacio: #e6a8a8;
}

.aviso__extra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.aviso__texto {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.45;
}

.aviso__texto p {
    margin: 0;
}

.aviso__texto span {
    font-weight: 700;
    color: var(--aviso-acento);
}

.aviso__medidor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.aviso__medidor span {
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--aviso-vacio);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.aviso[data-usadas="1"] .aviso__medidor span:first-child,
.aviso[data-usadas="2"] .aviso__medidor span {
    background-color: var(--aviso-acento);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .aviso__medidor span {
        transition: none;
    }
}

@media (max-width: 480px) {
    .aviso {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* -----------------------------------------------------------------
   .mls-lock
   Aviso de restriccion de la bolsa MLS junto a un check de publicacion.
   Se muestra u oculta desde actualizarRestriccionesMls() en
   scripts/ajax_tabs_inmueble.js.

   Uso: <span id="mls_lock_web" class="mls-lock"><i class="fa fa-lock"></i> MLS: no permitido</span>
   ----------------------------------------------------------------- */
.mls-lock {
    font-size: 11px;
    color: #e07000;
    margin-left: 4px;
}

/* -----------------------------------------------------------------
   .moduloOff
   Aviso centrado que sustituye al contenido de una pantalla cuando el
   modulo no esta contratado. Reemplaza al <h4> rojo suelto que se
   usaba antes. El telefono va como enlace tel: para que funcione en
   movil.

   Uso: <div class="moduloOff">
            <div class="moduloOff__icono"><i class="fa fa-lock"></i></div>
            <div class="moduloOff__cuerpo">
                <div class="moduloOff__titulo">Modulo desactivado</div>
                <div class="moduloOff__texto">Para activarlo ...</div>
            </div>
            <a class="moduloOff__telefono" href="tel:902010951">
                <i class="fa fa-phone"></i> 902 010 951</a>
        </div>
   ----------------------------------------------------------------- */
.moduloOff {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 880px;
    margin: 8px auto 16px;
    padding: 14px 18px;
    background-color: #ffffff;
    border: 1px solid #e4e9f0;
    border-left: 4px solid #e04f4f;
    border-radius: var(--radio-panel, 12px);
    box-shadow: var(--sombra-panel, 0 2px 12px rgba(51, 122, 196, .13));
    font-family: var(--font-principal, 'Plus Jakarta Sans', sans-serif);
    text-align: left;
}

.moduloOff__icono {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fdecec;
    color: #e04f4f;
    font-size: 17px;
    line-height: 1;
}

.moduloOff__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.moduloOff__titulo {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.moduloOff__texto {
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

a.moduloOff__telefono,
a.moduloOff__telefono:link,
a.moduloOff__telefono:visited {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background-color: #e04f4f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease;
}

a.moduloOff__telefono:hover,
a.moduloOff__telefono:focus,
a.moduloOff__telefono:active {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.moduloOff__telefono i {
    color: #ffffff;
}

@media (max-width: 767px) {
    .moduloOff {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin: 8px 10px 14px;
        padding: 16px;
        border-left: 1px solid #e4e9f0;
        border-top: 4px solid #e04f4f;
    }

    .moduloOff__telefono {
        width: 100%;
        justify-content: center;
    }
}


/* =================================================================
   BARRA DE VERSIÓN — barra-version
   Franja bajo la navbar con la razón social de la inmobiliaria (izq.)
   y el producto + versión (dcha.). Se muestra si mostrar_version = 1.

   <div class="barra-version">
       <div class="barra-version__empresa"><i class="fa fa-building-o"></i><span>RAZÓN SOCIAL</span></div>
       <div class="barra-version__producto">CRM INMOPC <span class="barra-version__badge">Premium 9.3</span></div>
   </div>
   ================================================================= */
.barra-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    clear: both;
    width: 100%;
    min-height: 40px;
    margin: 0 0 12px;
    padding: 6px 20px;
    background: transparent;
    border-bottom: 1px solid #e8eaf0;
    font-family: var(--font-principal);
}

.barra-version__empresa {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #334155;
}

.barra-version__empresa i {
    color: var(--color-cabecera);
    font-size: 15px;
}

.barra-version__empresa span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.barra-version__producto {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-cabecera);
}

.barra-version__badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-fondo-badge);
    color: var(--color-numero-badge);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

@media (max-width: 767px) {
    .barra-version {
        padding: 6px 12px;
    }

    .barra-version__producto {
        font-size: 11px;
    }
}