@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:
Notas de Escritorio
Últimos 15 días
... acciones a la derecha ...
...
================================================================= */
.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:
Dirección
Calle Mayor 12, Madrid
================================================================= */
.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:
================================================================= */
.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:
Piso
================================================================= */
/* 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;
}
/* 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:
*/
.ficha-fecha {
width: 9ch !important;
display: block !important;
margin: 0 !important;
}
/* =================================================================
CAMPO READONLY — clase para aplicar a mano
Uso:
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;
}
/* 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:
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"] {
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;
}
.caja2,
input[data-val="2"] {
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;
}
/* 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"],
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:
================================================================= */
/* 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:
...
...
================================================================= */
.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:
Piso
================================================================= */
.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