@keyframes skeleton-loading { 0% { background-position: -100px; } 40%, 100% { background-position: 270px; } } .skeleton-base { background: linear-gradient( 90deg, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 25%, var(--skeleton-color-mid, rgba(0, 0, 0, 0.15)) 50%, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite ease-in-out; } .skeletonButton { display: inline-block; border: none; } @keyframes skeleton-loading { 0% { background-position: -100px; } 40%, 100% { background-position: 270px; } } .skeleton-base { background: linear-gradient( 90deg, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 25%, var(--skeleton-color-mid, rgba(0, 0, 0, 0.15)) 50%, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite ease-in-out; } .skeletonPagination-container { display: flex; justify-content: flex-start; gap: 5px; margin-top: 0.5rem; padding: 0.5rem 0; padding-left: 30px; } .skeletonPagination-pageButton { height: 1.4rem; min-width: 0.5rem; border-radius: 4px; background: linear-gradient( 90deg, var(--skeleton-color-light) 25%, var(--skeleton-color-mid) 50%, var(--skeleton-color-light) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite ease-in-out; }@keyframes skeleton-loading { 0% { background-position: -100px; } 40%, 100% { background-position: 270px; } } .skeleton-base { background: linear-gradient( 90deg, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 25%, var(--skeleton-color-mid, rgba(0, 0, 0, 0.15)) 50%, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite ease-in-out; } .skeletonPlaceholder { width: 100%; border-radius: 3px; } @keyframes skeleton-loading { 0% { background-position: -100px; } 40%, 100% { background-position: 270px; } } .skeleton-base { background: linear-gradient( 90deg, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 25%, var(--skeleton-color-mid, rgba(0, 0, 0, 0.15)) 50%, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite ease-in-out; } .skeletonRadio { width: 1rem; height: 1rem; border-radius: 50%; display: block; }@keyframes skeleton-loading { 0% { background-position: -100px; } 40%, 100% { background-position: 270px; } } .skeleton-base { background: linear-gradient( 90deg, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 25%, var(--skeleton-color-mid, rgba(0, 0, 0, 0.15)) 50%, var(--skeleton-color-light, rgba(0, 0, 0, 0.1)) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite ease-in-out; } .skeletonText { border-radius: 4px; }/*! ------------------------------------------------------------------ * bronson-compact.css * Capa de densidad sobre Bronson (VWFS Blue Label). * * Bloques 1-7: solo geometría. Tamaño de raíz, espaciados, alturas de * control y paddings. Ni un color, ni una sombra, ni un radio: todo eso * lo sigue resolviendo Bronson tal cual. * * Bloques 8-9: superficie y caja de detalle. Aquí sí hay color, porque * el contraste entre el lienzo y las tarjetas no se puede conseguir con * geometría. Son cuatro variables, agrupadas aparte para que puedas * borrar los dos bloques y quedarte con la capa geométrica pura. * * Uso: cargar después de style.css de Bronson y añadir la clase * `bo-compact` a (o a , ver bloque 1). * ------------------------------------------------------------------ */ .bo-compact { /* Altura única para todo control interactivo. Es la palanca principal: cámbiala y se mueven botones, inputs, selects y addons a la vez. */ --boc-control-h: 36px; --boc-control-h-sm: 28px; /* Escala de espaciado en múltiplos de 4, frente a los 7/14/28/56 de Bronson. */ --boc-space-1: 4px; --boc-space-2: 8px; --boc-space-3: 12px; --boc-space-4: 16px; --boc-space-5: 24px; /* Tipografía de trabajo. */ --boc-text-xs: 0.6875rem; --boc-text-sm: 0.8125rem; --boc-text-md: 0.875rem; /* --- Superficie (bloques 8-9). Los únicos colores del archivo. --- */ /* Lienzo hundido: el fondo sobre el que flotan las tarjetas. */ --boc-surface-sunken: #f2f2f2; /* Superficie elevada: tarjetas, tablas, paneles. */ --boc-surface: #fff; /* Línea divisoria. Si Bronson expone un token de borde, úsalo aquí. */ --boc-border: #dce3eb; /* Texto de apoyo: etiquetas, códigos, valores vacíos. */ --boc-text-muted: #67788c; } /* Densidad máxima: para listados con mucho volumen por pantalla. */ .bo-compact[data-boc-density="high"] { --boc-control-h: 30px; --boc-control-h-sm: 24px; --boc-text-md: 0.8125rem; --boc-space-3: 8px; --boc-space-4: 12px; --boc-space-5: 16px; } /* ================================================================== 1. ESCALA DE RAÍZ — el cambio que más se nota Bronson arranca en 18px y dimensiona todo en rem. Bajar la raíz reescala tipografía, espaciados y componentes de una sola vez, sin tocar ni un selector suyo. ================================================================== */ html.bo-compact, :root:has(body.bo-compact) { font-size: 16px; line-height: 1.45; } /* Si prefieres un punto intermedio, 15px conserva algo más de aire: html.bo-compact { font-size: 15px; } */ /* ================================================================== 2. RITMO VERTICAL Los objetos de Bronson separan bloques con 28 y 56px, pensados para una página de scroll largo. Aquí se recortan usando las custom properties que el propio Bronson expone. ================================================================== */ .bo-compact .o-content-section { padding-block: var(--boc-space-5); } .bo-compact .o-component-wrapper:not(:last-child) { margin-bottom: var(--boc-space-4); } .bo-compact .o-layout { --layout-item-gutter-inline: var(--boc-space-4); --layout-item-gutter-block: var(--boc-space-4); } .bo-compact .o-layout--divider { --layout-item-gutter-inline: var(--boc-space-5); --layout-item-gutter-block: var(--boc-space-5); } .bo-compact .o-fieldset:not(:last-child), .bo-compact .o-fieldset__row:not(:last-child) { margin-bottom: var(--boc-space-4); } .bo-compact .o-inline-group { column-gap: var(--boc-space-4); row-gap: var(--boc-space-2); } .bo-compact .o-inline-group--small { column-gap: var(--boc-space-2); row-gap: var(--boc-space-1); } /* Botones: sin ese ancho mínimo de 300px pensado para móvil. */ .bo-compact .o-button-container { column-gap: var(--boc-space-3); row-gap: var(--boc-space-3); } .bo-compact .o-button-container__button { width: auto; max-width: none; min-width: 0; } .bo-compact hr { margin-block: var(--boc-space-4); } /* Ancho de página: un backoffice aprovecha la pantalla entera. Borra estas dos líneas si prefieres el contenedor centrado. */ .bo-compact { --page-wrap-width: 100%; --page-wrap-padding-horizontal: 20px; } /* ================================================================== 3. TEXTO El reescalado de raíz ya encoge todo proporcionalmente; esto ajusta además la proporción entre títulos y cuerpo, que en Bronson es de página editorial. ================================================================== */ .bo-compact h1, .bo-compact h2, .bo-compact h3, .bo-compact h4, .bo-compact h5, .bo-compact h6 { margin-bottom: var(--boc-space-2); line-height: 1.25; } .bo-compact h1 { font-size: 1.375rem; } .bo-compact h2 { font-size: 1.125rem; } .bo-compact h3 { font-size: 1rem; } .bo-compact h4 { font-size: 0.9375rem; } .bo-compact h5, .bo-compact h6 { font-size: var(--boc-text-md); } .bo-compact p, .bo-compact ul, .bo-compact ol, .bo-compact dl, .bo-compact address, .bo-compact table { margin-bottom: var(--boc-space-1); } .bo-compact li { margin-bottom: var(--boc-space-1); } .bo-compact ul, .bo-compact ol { margin-left: var(--boc-space-4); } .bo-compact label { margin-bottom: var(--boc-space-1); font-size: var(--boc-text-sm); } /* Iconos: 2rem es tamaño de portada. */ .bo-compact .c-icon { font-size: 1.25rem; } .bo-compact .c-btn .c-icon { font-size: 1rem; } /* ================================================================== 4. CONTROLES Bronson declara alturas propias en varios campos, a veces desde selectores de tres clases. Como el tamaño es justo lo que esta capa viene a cambiar, aquí se impone. Es el único bloque con !important y solo sobre propiedades de dimensión. ================================================================== */ .bo-compact .c-btn { height: var(--boc-control-h) !important; min-height: 0 !important; padding-block: 0 !important; padding-inline: var(--boc-space-4) !important; font-size: var(--boc-text-sm) !important; line-height: 1 !important; display: inline-flex; align-items: center; justify-content: center; gap: var(--boc-space-2); white-space: nowrap; } .bo-compact .c-btn--small { height: var(--boc-control-h-sm) !important; padding-inline: var(--boc-space-3) !important; font-size: var(--boc-text-xs) !important; } .bo-compact .c-btn--link, .bo-compact .c-btn--text { height: auto !important; padding-inline: var(--boc-space-2) !important; } .bo-compact .c-input__input, .bo-compact .c-select__input, .bo-compact input[type="text"], .bo-compact input[type="search"], .bo-compact input[type="email"], .bo-compact input[type="number"], .bo-compact input[type="tel"], .bo-compact input[type="password"], .bo-compact input[type="date"], .bo-compact input[type="time"], .bo-compact select { height: var(--boc-control-h) !important; min-height: 0 !important; padding-block: 0 !important; padding-inline: var(--boc-space-3) !important; font-size: var(--boc-text-md) !important; line-height: calc(var(--boc-control-h) - 2px) !important; } .bo-compact textarea, .bo-compact .c-textarea { height: auto !important; min-height: calc(var(--boc-control-h) * 2) !important; padding: var(--boc-space-2) var(--boc-space-3) !important; font-size: var(--boc-text-md) !important; line-height: 1.5 !important; } /* El envoltorio no debe reservar más alto que el control. */ .bo-compact .c-input, .bo-compact .c-select, .bo-compact .c-form-field__box { height: auto; min-height: 0; } .bo-compact .c-input__addon { height: var(--boc-control-h); display: inline-flex; align-items: center; padding-inline: var(--boc-space-3); } .bo-compact .c-form-field { margin-bottom: var(--boc-space-3); } .bo-compact .c-form-field__label { margin-bottom: var(--boc-space-1); font-size: var(--boc-text-sm); } .bo-compact .c-form-field__message, .bo-compact .c-error-message { margin-top: var(--boc-space-1); font-size: var(--boc-text-xs); line-height: 1.4; } .bo-compact .c-checkbox__label, .bo-compact .c-radio__label { font-size: var(--boc-text-md); } /* ================================================================== 5. TABLAS ================================================================== */ .bo-compact .c-table { margin-bottom: 0; font-size: var(--boc-text-sm); font-variant-numeric: tabular-nums; /* alinea los importes por columna */ } .bo-compact .c-table th, .bo-compact .c-table td { padding: var(--boc-space-2) var(--boc-space-3); vertical-align: middle; } .bo-compact .c-table th { white-space: nowrap; } .bo-compact .c-table p, .bo-compact .c-table ul, .bo-compact .c-table ol { margin-bottom: 0; } /* Cabecera fija: envuelve la tabla en
. Fija el alto con --boc-table-max-h si quieres scroll vertical. */ .bo-compact-scroll { overflow: auto; max-height: var(--boc-table-max-h, none); } .bo-compact-scroll thead th { position: sticky; top: 0; z-index: 2; } /* ================================================================== 6. CONTENEDORES ================================================================== */ .bo-compact .c-card { padding: 0; } .bo-compact .c-card__header { padding: var(--boc-space-3) var(--boc-space-4); } .bo-compact .c-card__body { padding: var(--boc-space-4); } .bo-compact .c-card__footer { padding: var(--boc-space-3) var(--boc-space-4); } .bo-compact .c-card__title { margin-bottom: 0; font-size: var(--boc-text-md); } .bo-compact .c-notification { padding: var(--boc-space-3) var(--boc-space-4); font-size: var(--boc-text-sm); } .bo-compact .c-notification__title { margin-bottom: 2px; font-size: var(--boc-text-sm); } .bo-compact .c-modal__header { padding: var(--boc-space-3) var(--boc-space-4); } .bo-compact .c-modal__body { padding: var(--boc-space-4); font-size: var(--boc-text-md); } .bo-compact .c-modal__footer { padding: var(--boc-space-3) var(--boc-space-4); } .bo-compact .c-modal__title { margin-bottom: 0; font-size: 1rem; } .bo-compact .c-tabs__link { padding: var(--boc-space-2) var(--boc-space-3); font-size: var(--boc-text-sm); } .bo-compact .c-accordion__title, .bo-compact .c-accordion__header { padding-block: var(--boc-space-3); font-size: var(--boc-text-md); } .bo-compact .c-accordion__body { padding-bottom: var(--boc-space-3); font-size: var(--boc-text-md); } .bo-compact .c-pagination__link { min-width: var(--boc-control-h); height: var(--boc-control-h); font-size: var(--boc-text-sm); } .bo-compact .c-header { min-height: 0; padding-block: 0; } .bo-compact .c-footer { padding-block: var(--boc-space-4); font-size: var(--boc-text-xs); } /* ================================================================== 7. TERCEROS QUE BRONSON EMPAQUETA ================================================================== */ .bo-compact .tippy-content { padding: var(--boc-space-2) var(--boc-space-3); } .bo-compact .flatpickr-calendar { padding: var(--boc-space-2); } .bo-compact .awesomplete [role="option"] { padding: var(--boc-space-2) var(--boc-space-3); font-size: var(--boc-text-md) !important; } /* ================================================================== 8. SUPERFICIE A partir de aquí hay color. Aplica `bo-surface-sunken` al contenedor de los paneles de tabs; los selectores de Bronson van como red de seguridad, verifica cuál usa tu versión y borra los que no apliquen. ================================================================== */ .bo-compact .bo-surface-sunken, .bo-compact .c-tabs__content, .bo-compact .c-tabs__panel { background: var(--boc-surface-sunken); padding: var(--boc-space-4); } /* Sobre el lienzo hundido, la tarjeta necesita fondo propio para despegarse. El borde es opcional: con el contraste de fondo ya se distingue, y quitarlo aligera bastante una pantalla con ocho cajas. */ .bo-compact .c-card { background: var(--boc-surface); border: 1px solid var(--boc-border); } /* ================================================================== 9. CAJA DE DETALLE Ficha de solo lectura: título en versalitas, pares etiqueta/valor en rejilla y escalera de importes. Todo dimensionado con las variables de arriba, así que responde a data-boc-density="high" sin tocar nada. ================================================================== */ /* Evita cabecera duplicada en la tarjeta "Precio del vehiculo". Solo afecta al acordeon marcado con esta clase. */ .bo-compact .c-detail-card__price-accordion .c-accordion__title, .bo-compact .c-detail-card__price-accordion h3 { display: none; margin: 0; } .bo-compact .c-detail-card__price-accordion .c-accordion__header { padding: 0; border: 0; min-height: 0; margin: 0; background: transparent; } .bo-compact .c-detail-card { height: 100%; background: var(--boc-surface); border: 1px solid var(--boc-border); } .bo-compact .c-detail-card__head { padding: var(--boc-space-3) var(--boc-space-4); border-bottom: 1px solid var(--boc-border); } /* Sin color propio: hereda el de los encabezados de Bronson. */ .bo-compact .c-detail-card__title { margin: 0; font-size: var(--boc-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25; } .bo-compact .c-detail-card__note { margin: var(--boc-space-1) 0 0; font-size: var(--boc-text-xs); color: var(--boc-text-muted); } .bo-compact .c-detail-card__body { padding: var(--boc-space-4); } .bo-compact .c-detail-card__subhead { margin: var(--boc-space-5) 0 var(--boc-space-2); font-size: var(--boc-text-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--boc-text-muted); } .bo-compact .c-detail-card__subhead:first-child { margin-top: 0; } /* --- Rejilla de pares etiqueta / valor --- */ .bo-compact .c-detail-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--boc-space-3) var(--boc-space-5); margin: 0; } .bo-compact .c-detail-fields__label { margin-bottom: 0; font-size: var(--boc-text-sm); font-weight: 400; line-height: 1.3; color: var(--boc-text-muted); } /* La jerarquía la marcan el peso y el color, no el tamaño: con la raíz en 14px no hay recorrido para diferenciar por escala. */ .bo-compact .c-detail-fields__value { margin: 0; font-size: var(--boc-text-md); font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; word-break: break-word; } .bo-compact .c-detail-fields__value.is-empty { font-weight: 400; color: var(--boc-text-muted); } .bo-compact .c-detail-fields__hint { margin-left: var(--boc-space-1); font-size: var(--boc-text-sm); font-weight: 400; color: var(--boc-text-muted); } /* --- Escalera de importes --- */ .bo-compact .c-amount-ladder { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--boc-text-sm); font-variant-numeric: tabular-nums; } .bo-compact .c-amount-ladder td { padding: var(--boc-space-1) 0; vertical-align: middle; } .bo-compact .c-amount-ladder__op { width: var(--boc-space-5); text-align: center; color: var(--boc-text-muted); } .bo-compact .c-amount-ladder__value { text-align: right; white-space: nowrap; font-weight: 600; } .bo-compact .c-amount-ladder__subtotal > td { border-top: 1px solid var(--boc-border); font-weight: 700; } .bo-compact .c-amount-ladder__total > td { border-top: 1px solid var(--boc-border); font-weight: 700; } /* ================================================================== 10. DETALLE RENTING Cabecera sticky + tabs visualmente integradas, encapsuladas para no afectar al resto de pantallas. ================================================================== */ .bo-compact .c-renting-detail-screen { margin-bottom: var(--boc-space-3); } .bo-compact .c-renting-detail-screen__summary { position: sticky; top: 0; z-index: 5; } .bo-compact .c-renting-detail-header { background: var(--boc-surface); border: 1px solid var(--boc-border); border-bottom: 0; padding: var(--boc-space-4) var(--boc-space-4) var(--boc-space-3); display: flex; gap: var(--boc-space-5); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .bo-compact .c-renting-detail-header__identity { min-width: min(100%, 22rem); flex: 1 1 24rem; } .bo-compact .c-renting-detail-header__identity-row { display: flex; align-items: center; gap: var(--boc-space-3); flex-wrap: wrap; } .bo-compact .c-renting-detail-header__title { margin: 0; font-size: 1.25rem; color: #00437a; } .bo-compact .c-renting-detail-header__subtitle { margin: var(--boc-space-1) 0 0; font-size: var(--boc-text-sm); color: var(--boc-text-muted); } .bo-compact .c-renting-detail-header__status { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: var(--boc-text-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .bo-compact .c-renting-detail-header__status--ok { background: #e3f3ea; color: #1d7a4d; } .bo-compact .c-renting-detail-header__status--warn { background: #fbf1dc; color: #9a6b00; } .bo-compact .c-renting-detail-header__hero { display: flex; gap: var(--boc-space-5); align-items: flex-end; flex-wrap: wrap; } .bo-compact .c-renting-detail-header__metrics { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; flex-wrap: wrap; } .bo-compact .c-renting-detail-header__metrics li { margin: 0; padding: 0 var(--boc-space-4); border-left: 1px solid var(--boc-border); } .bo-compact .c-renting-detail-header__metrics li:first-child { border-left: 0; padding-left: 0; } .bo-compact .c-renting-detail-header__metrics span { display: block; font-size: var(--boc-text-xs); color: var(--boc-text-muted); } .bo-compact .c-renting-detail-header__metrics b { display: block; font-size: var(--boc-text-sm); color: var(--ink, #0b1f3a); font-variant-numeric: tabular-nums; } .bo-compact .c-renting-detail-header__figure { text-align: right; } .bo-compact .c-renting-detail-header__value { margin: 0; font-size: 1.625rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink, #0b1f3a); } .bo-compact .c-renting-detail-header__label { margin: var(--boc-space-1) 0 0; font-size: var(--boc-text-xs); color: var(--boc-text-muted); } .bo-compact .c-renting-detail-screen__tabs .c-tabs { border: 1px solid var(--boc-border); } .bo-compact .c-renting-detail-screen__tabs .c-tabs__header, .bo-compact .c-renting-detail-screen__tabs .c-tabs__head, .bo-compact .c-renting-detail-screen__tabs .c-tabs__list { margin: 0; border-bottom: 1px solid var(--boc-border); background: var(--boc-surface); } .bo-compact .c-renting-detail-screen__tabs .c-tabs__link { margin-top: 0; } .bo-compact .c-renting-detail-screen__tabs .c-tabs__link:focus-visible { outline: 2px solid #00437a; outline-offset: -2px; } .bo-compact .c-renting-detail-screen__tabs .c-tabs__content, .bo-compact .c-renting-detail-screen__tabs .c-tabs__panel { border-top: 0; } @media (max-width: 760px) { .bo-compact .c-renting-detail-header { padding: var(--boc-space-3); } .bo-compact .c-renting-detail-header__hero { width: 100%; justify-content: space-between; } .bo-compact .c-renting-detail-header__figure { text-align: left; } .bo-compact .c-renting-detail-header__metrics li { padding-right: var(--boc-space-3); } }