/**
* ScoreInmuebles theme — 2026-06-08.
*
* Applies the PropTech palette across the whole app via a single
* stylesheet. Mounted from bootstrap_cdn.php right AFTER Bootstrap's
* own CSS so the cascade lets these overrides win without !important
* spam. Every view that includes bootstrap_cdn.php (which is every
* authed view + most public pages) gets the new look automatically.
*
* Distribution intent (per the design brief):
* ~70% white / off-white (backgrounds, cards)
* ~20% petroleum blue (headers, primary actions, links)
* ~10% emerald green (CTAs, positive scores, success)
*
* The palette goes through TWO layers of variables:
* 1. :root --primary / --secondary / etc. — our app-level tokens
* that custom CSS in modules/*/views/partials/*.css can reach
* via var(--primary).
* 2. Bootstrap variable overrides (--bs-primary, --bs-success, etc.)
* so EVERY existing .btn-primary / .text-success / etc. across
* the codebase picks up the new colors WITHOUT touching the
* markup. ~70% of the visual lift comes from this layer alone.
*
* What we explicitly DO NOT change:
* - Bootstrap's neutral grayscale on tables, forms, etc. — they
* already match the new graphite tones closely enough.
* - The danger / warning red & amber — Bootstrap's defaults
* (dc3545 / ffc107) read correctly against this palette and the
* brief didn't specify replacements.
*/
:root {
/* ────────── Brand palette ────────── */
--si-primary: #0A5A8F; /* petroleum blue — headers, primary actions */
--si-primary-dark: #08476F; /* hover state on primary */
--si-secondary: #12B886; /* emerald — CTAs, success */
--si-secondary-dark: #0F9D73; /* hover on secondary */
--si-text: #3A3F46; /* main copy graphite */
--si-text-light: #6B7280; /* secondary copy / muted */
--si-border: #E5E7EB; /* card / divider borders */
--si-bg: #FFFFFF; /* card / page main */
--si-bg-alt: #F8FAFC; /* page wrapper, subtle stripe */
/* Score scale — quintile bins for property scoring badges + chips */
--si-score-90: #12B886; /* excellent (matches secondary) */
--si-score-75: #34D399; /* good */
--si-score-60: #FBBF24; /* fair */
--si-score-40: #F97316; /* weak */
--si-score-0: #EF4444; /* poor */
/* ────────── Bootstrap variable overrides ────────── */
/* Re-skin the entire Bootstrap component library by remapping
the framework's CSS custom properties. .btn-primary,
.text-primary, .border-primary, .alert-primary, .badge.bg-primary,
.nav-pills .nav-link.active, etc. all consume these — single
declaration block covers ~90% of the visual surface. */
--bs-primary: var(--si-primary);
--bs-primary-rgb: 10, 90, 143;
--bs-success: var(--si-secondary);
--bs-success-rgb: 18, 184, 134;
--bs-info: var(--si-primary);
--bs-info-rgb: 10, 90, 143;
--bs-body-color: var(--si-text);
--bs-body-color-rgb: 58, 63, 70;
--bs-body-bg: var(--si-bg);
--bs-secondary-color: var(--si-text-light);
--bs-secondary-bg: var(--si-bg-alt);
--bs-tertiary-bg: var(--si-bg-alt);
--bs-border-color: var(--si-border);
--bs-border-color-translucent: rgba(58, 63, 70, 0.1);
--bs-link-color: var(--si-primary);
--bs-link-color-rgb: 10, 90, 143;
--bs-link-hover-color: var(--si-primary-dark);
--bs-link-hover-color-rgb: 8, 71, 111;
}
/* ────────── Body + global typography ────────── */
body {
background-color: var(--si-bg-alt);
color: var(--si-text);
-webkit-font-smoothing: antialiased;
}
/* ────────── Button hover states ──────────
Bootstrap's built-in hover darkens via filter() which produces a
muddy gray-blue from our petroleum. Override with the explicit
--si-primary-dark / --si-secondary-dark from the brief. */
/* 2026-06-08 (round 3) — Hardened against every possible cascade
path. Previous attempt used var(--si-primary) + !important; user
reported it still rendered white-on-light in incognito. Likely
causes ruled out one by one:
- Variable resolution: switched to literal hex so undefined
--si-* would be irrelevant
- Specificity: bumped to .btn.btn-primary (0,2,0) so even if a
Bootstrap rule had higher specificity than .btn-primary alone,
this still wins
- Selector reach: explicit tag prefixes (button. / a. / input.)
to catch all the variants Bootstrap targets in different
components (submit buttons, link buttons, etc.)
- !important on all 4 properties to end any cascade tie
Same hardening applied to .btn.btn-success. */
/* 2026-06-08 (round 4) — BOTH Bootstrap's variable-redefinition
approach AND direct !important overrides. The previous round had
the right CSS theoretically but the user still reported white-on-
light. So we hit both rails:
Rail 1: Redefine every --bs-btn-* variable that Bootstrap's .btn
rule reads. This is the Bootstrap-canonical way to customize and
should work even if the direct overrides somehow get filtered.
Rail 2: Direct !important on background-color / color / border-
color with elevated specificity. Same as round 3.
If neither rail wins, it's not CSS — it's a browser-level cache
issue. */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
--bs-btn-color: #ffffff;
--bs-btn-bg: #0A5A8F;
--bs-btn-border-color: #0A5A8F;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #08476F;
--bs-btn-hover-border-color: #08476F;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #08476F;
--bs-btn-active-border-color: #08476F;
--bs-btn-disabled-color: #ffffff;
--bs-btn-disabled-bg: #0A5A8F;
--bs-btn-disabled-border-color: #0A5A8F;
background-color: #0A5A8F !important;
border-color: #0A5A8F !important;
color: #ffffff !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active,
button.btn-primary:hover, button.btn-primary:focus, button.btn-primary:active,
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active {
background-color: #08476F !important;
border-color: #08476F !important;
color: #ffffff !important;
}
.btn-success,
.btn.btn-success,
button.btn-success,
a.btn-success,
input.btn-success {
--bs-btn-color: #ffffff;
--bs-btn-bg: #12B886;
--bs-btn-border-color: #12B886;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #0F9D73;
--bs-btn-hover-border-color: #0F9D73;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #0F9D73;
--bs-btn-active-border-color: #0F9D73;
--bs-btn-disabled-color: #ffffff;
--bs-btn-disabled-bg: #12B886;
--bs-btn-disabled-border-color: #12B886;
background-color: #12B886 !important;
border-color: #12B886 !important;
color: #ffffff !important;
}
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active,
button.btn-success:hover, button.btn-success:focus, button.btn-success:active,
a.btn-success:hover, a.btn-success:focus, a.btn-success:active {
background-color: #0F9D73 !important;
border-color: #0F9D73 !important;
color: #ffffff !important;
}
.btn-outline-primary {
color: var(--si-primary);
border-color: var(--si-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
background-color: var(--si-primary);
border-color: var(--si-primary);
color: #fff;
}
.btn-outline-success {
color: var(--si-secondary);
border-color: var(--si-secondary);
}
.btn-outline-success:hover,
.btn-outline-success:focus {
background-color: var(--si-secondary);
border-color: var(--si-secondary);
color: #fff;
}
/* 2026-06-08 — Bootstrap 5.3 ships .btn-info with --bs-btn-color:#000
on the assumption --bs-info is cyan (#0dcaf0). We remapped --bs-info
to petroleum blue, so the default black text becomes unreadable on
the dark background. Force white text on every .btn-info variant. */
/* 2026-06-08 (round 4) — Same nuclear treatment as btn-primary +
btn-success. The user reported the "Gestionar clientes" .btn-info
button still rendering white-on-light. Apply literal hex,
variable redefinition, and !important on every property. */
.btn-info,
.btn.btn-info,
button.btn-info,
a.btn-info,
input.btn-info {
--bs-btn-color: #ffffff;
--bs-btn-bg: #0A5A8F;
--bs-btn-border-color: #0A5A8F;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #08476F;
--bs-btn-hover-border-color: #08476F;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #08476F;
--bs-btn-active-border-color: #08476F;
--bs-btn-disabled-color: #ffffff;
--bs-btn-disabled-bg: #0A5A8F;
--bs-btn-disabled-border-color: #0A5A8F;
background-color: #0A5A8F !important;
border-color: #0A5A8F !important;
color: #ffffff !important;
}
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:active,
button.btn-info:hover, button.btn-info:focus, button.btn-info:active,
a.btn-info:hover, a.btn-info:focus, a.btn-info:active {
background-color: #08476F !important;
border-color: #08476F !important;
color: #ffffff !important;
}
.btn-outline-info {
color: var(--si-primary);
border-color: var(--si-primary);
}
.btn-outline-info:hover,
.btn-outline-info:focus {
background-color: var(--si-primary);
border-color: var(--si-primary);
color: #fff;
}
/* Same defensive override for .btn-warning + .btn-light — Bootstrap
sets black text by default and our overrides leave that brittle
if the palette ever shifts. Keep explicit. */
.btn-warning { --bs-btn-color: #1a2433; }
.btn-light { --bs-btn-color: var(--si-text); }
/* ────────── Links ────────── */
a { color: var(--si-primary); }
a:hover { color: var(--si-primary-dark); }
/* ────────── Cards ──────────
Soft border + 12px radius per brief. Bootstrap's default is 0.375rem
which is too tight for a PropTech feel. */
.card {
border: 1px solid var(--si-border);
border-radius: 12px;
background-color: var(--si-bg);
}
/* ────────── Navbar dark variant (still used by /admin/*) ──────────
The admin views use .navbar-dark.bg-dark which is plain black —
keep that as-is since it's an internal-only surface. The main
user nav (mqm-main-nav, in main_nav.css) gets a separate update. */
/* ────────── Floating feedback widget overrides ──────────
The widget shipped with hardcoded #0d6efd. Repaint via :root vars
to keep it on-palette. Selector specificity matches the original. */
.fb-fab {
background: var(--si-secondary);
box-shadow: 0 4px 12px rgba(18, 184, 134, .35);
}
.fb-fab:hover { background: var(--si-secondary-dark); }
.fb-cat-btn.is-active {
background: rgba(10, 90, 143, .08);
border-color: var(--si-primary);
color: var(--si-primary);
}
.fb-submit { background: var(--si-primary); }
.fb-submit:disabled { background: #adb5bd; }
/* ────────── Hero / gradient panel ──────────
Generic class any landing/hero can opt into:
...
— matches the brief's gradient. */
.si-hero {
background: linear-gradient(135deg,
var(--si-primary-dark) 0%,
var(--si-primary) 60%,
var(--si-secondary) 100%);
color: #fff;
}
.si-hero h1, .si-hero h2, .si-hero .lead { color: #fff; }
.si-hero a:not(.btn) { color: #fff; text-decoration: underline; }
/* ────────── Score badges (utility classes) ──────────
Five quintile bins. Apply to any pill/badge that should color-code
a 0-100 numeric score:
Or directly:
87
The numeric data-score variant requires the small JS in
theme-init.js (not built yet — start with the manual bin class). */
.si-score-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
color: #fff;
line-height: 1.4;
background: var(--si-score-0); /* default poor */
}
.si-score-bin-90 { background: var(--si-score-90) !important; color: #fff; }
.si-score-bin-75 { background: var(--si-score-75) !important; color: #08321f; }
.si-score-bin-60 { background: var(--si-score-60) !important; color: #4a2e02; }
.si-score-bin-40 { background: var(--si-score-40) !important; color: #fff; }
.si-score-bin-0 { background: var(--si-score-0) !important; color: #fff; }
/* ────────── Text utilities matching brief ────────── */
.si-text { color: var(--si-text) !important; }
.si-text-light { color: var(--si-text-light) !important; }
.si-bg { background-color: var(--si-bg) !important; }
.si-bg-alt { background-color: var(--si-bg-alt) !important; }
.si-border { border-color: var(--si-border) !important; }