/* ============================================================================ MQVIST · Tema corporativo para el PORTAL DEL INQUILINO (template "bootstrap") ---------------------------------------------------------------------------- CSS global de sobrescritura para las páginas de portal.php (För hyresgäster: Felanmälan, Kontaktuppgifter, Mina hyresobjekt, Mina avier, Avtal/dokument). Pegar en la hoja CSS personalizada del portal (Portaladmin ▸ Bilder/Css del portal → custom.css, o el campo equivalente). Se carga DESPUÉS de bootstrap.css + custom.css. NOTA: el Portal usa Bootstrap + Pure.css; por eso es una hoja distinta de mqvist-real.css (que cubre el back-office real_flat.css). Misma marca. Paleta: azul #293348 · verde #10824F · beige #EEE0D3 Tipos: titulares serif (Ivar Display → Newsreader) · texto Calibri ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700&display=swap'); :root{ --mq-blue: #293348; --mq-blue-700: #1f2738; --mq-blue-300: #5b6981; --mq-green: #10824F; --mq-green-700: #0c633c; --mq-beige: #EEE0D3; --mq-beige-200: #f6efe7; --mq-ink: #1a1f2b; --mq-paper: #ffffff; --mq-canvas: #f4f1ec; --mq-line: #dcd3c6; --mq-serif: 'Ivar Display','Newsreader',Georgia,'Times New Roman',serif; --mq-sans: 'Calibri','Carlito','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --mq-radius: 10px; --mq-radius-sm: 6px; --mq-shadow: 0 1px 2px rgba(41,51,72,.06), 0 6px 20px rgba(41,51,72,.08); --mq-ring: 0 0 0 3px rgba(16,130,79,.22); } /* ============================================================================ 1 · BASE ============================================================================ */ /* IMPORTANTE: rem se calcula desde , no desde . Bootstrap 3 y Pure CSS usan `1rem` internamente. Si solo ponemos font-size en body, los elementos Pure/Bootstrap siguen resolviendo rem contra el root del navegador (16px). Solución: fijar font-size en html + body con !important. */ html{ font-size: 16px !important; /* 1rem = 16px — estándar web universal */ } body{ background: var(--mq-canvas) !important; color: var(--mq-ink) !important; font-family: var(--mq-sans) !important; font-size: 16px !important; line-height: 1.6; -webkit-font-smoothing: antialiased; } #portalwrapper{ background: var(--mq-canvas); min-height: 100vh; } /* Propaga el tamaño base a todo el árbol */ #content-container, #leftMenu, footer, .maincontent, .container, .row, [class*="col-"], [class*="pure-u"]{ font-size: 16px; } h1,h2,h3,h4,h5, .pageHeadline,.navbar-brand{ font-family: var(--mq-serif) !important; color: var(--mq-blue) !important; font-weight: 600 !important; } .pageHeadline{ font-size: 1.7rem !important; margin: 4px 0 20px !important; } /* ~27px */ h3{ font-size: 1.35rem; } /* ~22px */ h4{ font-size: 1.15rem; } /* ~18px */ h5{ font-size: 1rem; } /* 16px = párrafo */ a{ color: var(--mq-green); text-decoration: none; } a:hover{ color: var(--mq-green-700); text-decoration: underline; } ::selection{ background: var(--mq-beige); color: var(--mq-blue); } /* ============================================================================ 2 · CABECERA (#header) Azul corporativo, logo e iconos en blanco (zona de seguridad alrededor). ============================================================================ */ #header{ background: var(--mq-blue) !important; color: #fff !important; border: 0 !important; box-shadow: var(--mq-shadow); padding: 12px 28px !important; display: flex !important; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 16px !important; /* header: escala propia, compacta y proporcional */ } #headerlogo{ display: flex; align-items: center; } #headerlogo img.logo{ height: 44px !important; width: auto !important; filter: none !important; /* logo_999.png: ya es blanco sobre caja oscura */ } #headerHead .navbar-brand, .navbar-brand{ color: #fff !important; font-family: var(--mq-serif) !important; font-size: 1.2rem !important; /* ~19px sobre base 16px del header */ font-weight: 600 !important; padding-left: 20px; margin: 0 !important; border-left: 1px solid rgba(255,255,255,.28); line-height: 1.1; height: auto !important; white-space: nowrap; } /* Menú principal del portal (För hyresgäster …) */ #headermenu{ margin-left: 8px; } #menulinks{ display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; } #menulinks > li{ list-style: none; } #menulinks .menulink, #menulinks > li > a{ color: rgba(255,255,255,.82) !important; font-weight: 600; font-size: 1rem; /* 16px sobre la base del header */ padding: 8px 16px !important; border-radius: var(--mq-radius-sm); display: inline-block; } #menulinks .menulink:hover, #menulinks > li > a:hover{ color:#fff !important; background: rgba(255,255,255,.10); text-decoration: none; } #menulinks > li.active > a{ color:#fff !important; background: rgba(255,255,255,.06); box-shadow: inset 0 -3px 0 var(--mq-green); } /* Bloque de usuario / cerrar sesión (a la derecha) */ #logindiv{ margin-left: auto !important; display: flex !important; align-items: center !important; flex-direction: row !important; } #userDiv{ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; flex-wrap: nowrap !important; white-space: nowrap; } #password_change, #password_change:hover{ color:#fff !important; text-decoration: none; display: flex !important; align-items: center; } #loggedInUser{ color:#fff !important; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; } #loggedInUser img{ width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .9; } #password_change, #password_change:hover{ color:#fff !important; text-decoration: none; } #logoutForm .btn, #userDiv .btn{ background: transparent !important; color:#fff !important; border: 1.5px solid rgba(255,255,255,.45) !important; border-radius: 999px !important; padding: 7px 18px !important; font-size: 1rem !important; font-weight: 600; } #logoutForm .btn:hover{ background: rgba(255,255,255,.14) !important; border-color:#fff !important; } /* Elimina height:2.25em que custom.css del servidor aplica a input[type=submit] */ input[type="submit"]{ height: auto !important; min-height: 0 !important; } input[type="submit"].btn, input[type="submit"].button, input[type="submit"].btn-primary, input[type="submit"].button-primary{ -webkit-appearance: none !important; appearance: none !important; height: auto !important; min-height: 0 !important; font-family: var(--mq-sans) !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.4 !important; padding: 11px 24px !important; border-radius: var(--mq-radius-sm) !important; box-sizing: border-box !important; cursor: pointer !important; vertical-align: middle !important; display: inline-block !important; } /* Logga ut: flex para que quede en línea con el usuario */ #logoutForm{ display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* ============================================================================ 3 · LAYOUT (.container / .row / columnas) Ancho completo alineado a la izquierda. Sobreescribe el max-width de Bootstrap 3 (1170px) con !important para pantallas anchas (27"). ============================================================================ */ .maincontent{ background: var(--mq-canvas); } /* Neutraliza TODOS los max-width que Bootstrap asigna en media queries */ .container, .maincontent .container, .maincontent > .container{ max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 20px 32px 0 32px !important; box-sizing: border-box !important; } #menucontent-container{ margin: 0 !important; } /* También anula los media-query breakpoints de Bootstrap 3 */ @media (min-width: 768px) { .container{ max-width: 100% !important; } } @media (min-width: 992px) { .container{ max-width: 100% !important; } } @media (min-width: 1200px) { .container{ max-width: 100% !important; } } /* ============================================================================ 4 · MENÚ LATERAL IZQUIERDO (#leftMenu / .nav-pills) Sobrio y alineado a la izquierda, con separador vertical (como el original). ============================================================================ */ #leftMenu{ border-right: 1px solid var(--mq-line); padding-right: 18px !important; max-width: 320px; } #leftMenu .nav-pills{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; list-style: none; } #leftMenu .nav-header{ font-family: var(--mq-serif) !important; color: var(--mq-blue) !important; font-size: 1.1rem !important; /* ~22px */ font-weight: 600 !important; text-transform: none !important; padding: 4px 10px 12px !important; border-bottom: 1px solid var(--mq-line); margin-bottom: 10px; } #leftMenu .nav-pills > li{ list-style: none; } #leftMenu .nav-pills > li > a{ color: var(--mq-blue) !important; font-weight: 600; font-size: 1rem; /* 20px — legible en 27" */ padding: 11px 14px !important; border-radius: var(--mq-radius-sm) !important; display: block; line-height: 1.3; } #leftMenu .nav-pills > li > a:hover{ background: var(--mq-beige-200) !important; text-decoration: none; } #leftMenu .nav-pills > li.active > a{ background: var(--mq-green) !important; color:#fff !important; } #leftMenu .trMargin{ height: 2px; } #horizontalLineActive{ display: none; } /* marcador heredado innecesario */ .verticalLine{ display: none; } /* ============================================================================ 5 · BOTONES (Bootstrap .btn + Pure .button) Verde = primaria · contorno azul = secundaria ============================================================================ */ .btn, .button{ font-family: var(--mq-sans) !important; font-weight: 600 !important; font-size: 1rem !important; /* 20px */ border-radius: var(--mq-radius-sm) !important; padding: 11px 24px !important; color: var(--mq-blue) !important; background: #fff !important; border: 1.5px solid var(--mq-blue-300) !important; box-shadow: none !important; text-shadow: none !important; transition: all .15s ease; } .btn:hover, .button:hover{ background: var(--mq-beige-200) !important; border-color: var(--mq-blue) !important; } .btn-primary, .button-primary{ color:#fff !important; background: var(--mq-green) !important; border-color: var(--mq-green) !important; } .btn-primary:hover, .button-primary:hover{ background: var(--mq-green-700) !important; border-color: var(--mq-green-700) !important; } /* Pestañas (Felanmälan: Hyresobjekt / Byggnad) */ .nav-tabs{ border-bottom: 2px solid var(--mq-line) !important; } .nav-tabs > li > a{ color: var(--mq-blue) !important; font-weight: 600; border: 0 !important; border-radius: var(--mq-radius-sm) var(--mq-radius-sm) 0 0 !important; padding: 12px 22px !important; font-size: 1rem; /* 20px */ } .nav-tabs > li > a:hover{ background: var(--mq-beige-200) !important; } .nav-tabs > li.active > a{ color: var(--mq-green) !important; background: transparent !important; border-bottom: 3px solid var(--mq-green) !important; } /* ============================================================================ 6 · FORMULARIOS (Bootstrap form-control + Pure + campos propios) ============================================================================ */ .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea{ font-family: var(--mq-sans) !important; font-size: 1rem !important; /* 16px — estándar */ color: var(--mq-ink) !important; background:#fff !important; border: 1.5px solid var(--mq-line) !important; border-radius: var(--mq-radius-sm) !important; padding: 10px 14px !important; box-shadow: none !important; height: auto !important; min-height: 44px !important; } .form-control:focus, input:focus, select:focus, textarea:focus{ outline: none !important; border-color: var(--mq-green) !important; box-shadow: var(--mq-ring) !important; } textarea{ resize: vertical !important; } label, .field-group > label, .field-row label{ color: var(--mq-ink) !important; font-weight: 600; font-size: 1rem; /* 20px */ } .field-group{ margin-top: 16px !important; margin-right: 24px !important; } .field-group .fields{ margin-top: 7px; } input[type="checkbox"], input[type="radio"]{ accent-color: var(--mq-green); width: 17px; height: 17px; vertical-align: middle !important; margin-right: 7px !important; flex-shrink: 0; } /* Espacio entre círculo del radio y su texto (override del inline style del template) */ .radio input[type="radio"], .field-row .radio input[type="radio"], .field-group .fields .radio input[type="radio"]{ margin-right: 8px !important; margin-left: 0 !important; vertical-align: middle !important; position: static !important; flex-shrink: 0 !important; } .radio, .field-group .fields .radio, .field-row .radio{ font-weight: 500 !important; font-size: 1rem !important; display: inline-flex !important; align-items: center; gap: 8px !important; /* espacio entre círculo y texto */ margin-right: 26px !important; /* espacio entre opciones */ line-height: 1.4; white-space: nowrap; } .field-row{ display: flex !important; flex-wrap: wrap !important; gap: 0 !important; align-items: flex-start; } /* Encabezados de bloque del portal */ .pageContainer{ background:#fff; border:1px solid var(--mq-line); border-radius: var(--mq-radius); box-shadow: var(--mq-shadow); padding: 22px 24px; margin-top: 6px; } #hyresObjektHeadline h3, .horizontalLineHeadline + *{ color: var(--mq-blue) !important; } .horizontalLineHeadline, #hyresObjektHeadline .horizontalLineHeadline{ height: 3px; background: var(--mq-green); width: 56px; border-radius: 999px; margin: 6px 0 14px; } .pageFlexContainer{ display: flex; flex-wrap: wrap; gap: 24px; } .pageFlexContainer > .col-md-6{ flex: 1 1 320px; } #hyresObjektInfo h3, #hyraInfo h3{ font-family: var(--mq-serif) !important; color: var(--mq-blue) !important; border-bottom: 1px solid var(--mq-line); padding-bottom: 8px; margin-bottom: 10px; } .kontaktuppg-username .bold, .bold{ font-weight: 700; } .infoText{ color: var(--mq-blue-300); } /* ============================================================================ 7 · TABLAS (.datatable.table, .aviTable, .infoTable, .aviRaderTable) ============================================================================ */ .datatable.table, .aviTable, table.table{ width: 100% !important; border-collapse: separate !important; border-spacing: 0; background:#fff !important; border: 1px solid var(--mq-line) !important; border-radius: var(--mq-radius) !important; overflow: hidden; box-shadow: var(--mq-shadow) !important; margin-bottom: 18px; } .datatable th, .aviTable th, table.table th, .aviRaderTable th{ background: var(--mq-blue) !important; color:#fff !important; font-family: var(--mq-sans) !important; font-weight: 600 !important; font-size: .9rem !important; /* ~18px — cabeceras ligeramente más compactas */ text-align: left; padding: 13px 16px !important; border: 0 !important; white-space: nowrap; } .datatable td, .aviTable td, table.table td{ padding: 13px 16px !important; border: 0 !important; border-bottom: 1px solid var(--mq-line) !important; font-size: 1rem; /* 20px */ color: var(--mq-ink); vertical-align: middle; } .datatable tr.odd td{ background:#fff !important; } .datatable tr.even td{ background: var(--mq-beige-200) !important; } .alignRight, td.alignRight, th.alignRight, .numberbox{ text-align: right !important; } tr.bold td, tr[style*="bold"] td, .bold{ font-weight: 700 !important; } /* Info simple sin marco (Mina hyresobjekt) */ .infoTable{ width: 100%; } .infoTable td{ padding: 12px 14px !important; border-bottom: 1px solid var(--mq-line) !important; font-size: 1rem; } .infoTable tr td:first-child{ color: var(--mq-blue-300); } /* —— Avier expandibles (acordeón) —— */ .aviTable tr.parent-row{ cursor: pointer; } .aviTable tr.parent-row td{ font-weight: 600; } .aviTable tr.parent-row:hover td{ background: var(--mq-beige) !important; } .dropdownArrowDiv{ display: grid; place-items: center; } .dropdownArrow{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--mq-green); transition: transform .2s ease; } .parent-row.open .dropdownArrow, .parent-row[aria-expanded="true"] .dropdownArrow{ transform: rotate(-90deg); } .aviInfoExpanded{ background: var(--mq-beige-200) !important; border-radius: var(--mq-radius-sm); padding: 18px 20px !important; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; /* centra la col derecha (Visa avi) respecto a la tabla izquierda */ border: 1px solid var(--mq-line); } .aviInfoExpanded > .col-md-6{ flex: 1 1 320px; } .aviInfoExpanded h5{ font-family: var(--mq-serif) !important; color: var(--mq-blue) !important; margin-bottom: 10px; } .aviRaderTable{ width: 100%; background:#fff; border:1px solid var(--mq-line); border-radius: var(--mq-radius-sm); overflow: hidden; } .aviRaderTable th{ background: var(--mq-blue-300) !important; } .aviRaderTable td{ padding: 8px 10px !important; border-bottom: 1px solid var(--mq-line) !important; } .aviPrintDiv a{ display: inline-flex; align-items: center; gap: 8px; background: var(--mq-green) !important; color:#fff !important; padding: 9px 16px; border-radius: var(--mq-radius-sm); font-weight: 600; } .aviPrintDiv a:hover{ background: var(--mq-green-700) !important; text-decoration: none; } .aviPrintDiv img{ filter: brightness(0) invert(1); } #inbetDetaljer table{ width: auto; margin-top: 8px; min-width: 220px; } #inbetDetaljer th{ background: transparent !important; color: var(--mq-blue-300) !important; padding: 4px 6px !important; } #inbetDetaljer td{ padding: 4px 6px !important; border: 0 !important; } /* ============================================================================ 8 · PIE (footer .footer) ============================================================================ */ footer{ margin-top: 36px; } footer .footer{ background: var(--mq-blue) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-start; list-style: none; margin: 0 !important; padding: 22px 32px !important; font-size: .9rem; /* ~18px — pie ligeramente más compacto */ } footer .footer li{ color: rgba(255,255,255,.85) !important; } footer .footer li.muted{ color: rgba(255,255,255,.4) !important; } footer .footer a{ color:#fff !important; } /* ────────────────────────────────────────────────── LOGIN PAGE — Fix botón Bank-ID desbordado en móvil El problema es #loginDropdown en custom.css que tiene height: 260px fijo — no suficiente para el botón Bank-ID. Override: eliminamos la altura fija y dejamos que la caja crezca con su contenido. ────────────────────────────────────────────────── */ /* Altura fija eliminada: la caja crece con su contenido */ #loginDropdown { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* Todos los botones dentro del dropdown de login deben ser 100% del contenedor */ #loginDropdown .btn, #loginDropdown button, #loginDropdown a.btn { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; display: block !important; } /* Inputs del login */ #loginDropdown input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ============================================================================ 9 · RESPONSIVE — Móvil y Tablet ============================================================================ */ /* — Hamburger: oculto siempre (sin funcionalidad) — */ #hamburgerMenu, .navbar-toggle, button.navbar-toggle { display: none !important; } /* ────────────────────────────────────────────────── TABLET ≤ 900px (portal-base.css ya apila col-md-3 / col-md-9 al 100%) ────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Menú lateral → fila de pills horizontales */ #leftMenu { max-width: 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--mq-line); padding: 0 0 14px !important; margin-bottom: 10px; } #leftMenu .nav-pills { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #leftMenu .nav-header { flex: 0 0 100% !important; width: 100%; padding: 8px 0 10px !important; border-bottom: 1px solid var(--mq-line) !important; margin-bottom: 6px !important; } #leftMenu .trMargin { display: none !important; } #leftMenu .nav-pills > li { flex: 0 0 auto; } #leftMenu .nav-pills > li > a { padding: 8px 16px !important; white-space: nowrap; border: 1px solid var(--mq-line) !important; border-radius: 999px !important; font-size: .9rem !important; } #leftMenu .nav-pills > li.active > a { background: var(--mq-green) !important; border-color: var(--mq-green) !important; color: #fff !important; } /* Ocultar menú top (duplicado en menú lateral) */ #headermenu { display: none !important; } /* Contenedor: menos padding en tablet */ .maincontent .container, .container { padding: 14px 18px 0 18px !important; } /* Tablas: scroll horizontal en tablet */ .aviTable, .datatable.table, table.table { display: block !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; max-width: 100%; } /* thead y tbody como display:table al 100% del bloque: evita la esquina blanca a la derecha cuando el contenido no llena el ancho completo del contenedor scrollable */ .aviTable > thead, .datatable.table > thead, table.table > thead, .aviTable > tbody, .datatable.table > tbody, table.table > tbody { display: table !important; width: 100% !important; } } /* ────────────────────────────────────────────────── MÓVIL ≤ 600px ────────────────────────────────────────────────── */ @media (max-width: 600px) { /* — Cabecera — */ #header { padding: 10px 14px !important; gap: 10px; flex-wrap: wrap; } /* Ocultar texto de marca, mostrar solo logo */ .navbar-brand { display: none !important; } #headerlogo { display: flex !important; } #headerlogo img.logo { height: 36px !important; display: block !important; } #userDiv { gap: 8px !important; } #loggedInUser { font-size: .85rem; } #logoutForm .btn, #userDiv .btn { padding: 6px 12px !important; font-size: .85rem !important; } } /* ──────────────────────────────────────────────── MÓVIL PEQUEÑO ≤ 480px — cabecera de una línea ──────────────────────────────────────────────── */ @media (max-width: 480px) { /* Ocultar nombre de usuario — solo queda el botón Logga ut */ #password_change { display: none !important; } /* Ocultar texto de marca — mostrar solo el logo */ .navbar-brand { display: none !important; } /* Asegurar logo visible y con tamaño correcto */ #headerlogo { display: flex !important; } #headerlogo img.logo { height: 36px !important; display: block !important; } } @media (max-width: 600px) { /* — Container — */ .maincontent .container, .container { padding: 10px 10px 0 10px !important; } /* — Menú lateral: pills más compactas — */ #leftMenu .nav-pills > li > a { padding: 7px 12px !important; font-size: .85rem !important; } /* — Formularios: eliminar todos los anchos fijos — */ .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } textarea { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .input-block { display: block !important; width: 100% !important; max-width: 100% !important; } .field-group { margin-right: 0 !important; width: 100%; box-sizing: border-box; } /* Field-row: apilar verticalmente en móvil */ .field-row { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; } /* Radios: cada uno en su propia línea */ .radio { white-space: normal !important; margin-right: 0 !important; width: 100%; margin-bottom: 4px; } /* — Tablas: scroll horizontal — */ .aviTable, .datatable.table, table.table, .infoTable { display: block !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Padding más compacto en celdas */ .datatable th, .aviTable th, table.table th { padding: 10px 10px !important; font-size: .8rem !important; white-space: nowrap; } .datatable td, .aviTable td, table.table td { padding: 10px 10px !important; font-size: .85rem !important; } /* — Avier expandido: columna — */ .aviInfoExpanded { flex-direction: column !important; gap: 14px !important; } .aviInfoExpanded .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0 !important; } /* — Mina hyresobjekt: columna — */ .pageFlexContainer { flex-direction: column !important; gap: 16px !important; } .pageFlexContainer > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; } /* — pageContainer: menos padding — */ .pageContainer { padding: 14px 14px !important; } /* — pageHeadline — */ .pageHeadline { font-size: 1.35rem !important; } /* — Footer — */ footer .footer { padding: 14px 12px !important; font-size: .8rem !important; gap: 6px !important; } /* — Barra de controles (previsualización) — */ .mq-hint { display: none !important; } .mq-controls { gap: 8px; } .mq-tabs button { padding: 6px 10px; font-size: 11.5px; } }