/* IBM Plex Mono is loaded from the HTML , NOT with @import here.
An @import inside a stylesheet chains two blocking round-trips - the browser
must fetch style.css, parse it, and only then discover the font request -
which measured 1,115 ms of render blocking on mobile. */
:root {
--bg-color: #0F172A;
--card-bg: rgba(30, 41, 59, 0.7);
--border-color: rgba(255, 255, 255, 0.1);
--text-main: #F8FAFC;
/* Was #94A3B8/#64748B, which measured 4.34:1 against the light panel
background (#F1F5F9) - under the 4.5:1 WCAG AA minimum for body text and
the only thing keeping the accessibility audit off 100. Same muted
grey-blue look, but clears AA on white, off-white and panels. */
--text-muted: #5C6B7F;
--accent-blue: #2563EB;
--accent-hover: #1D4ED8;
--green-glow: #10B981;
--cyan-glow: #06B6D4;
--red-glow: #EF4444;
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}
body.light-theme {
--bg-color: #F1F5F9;
--card-bg: #FFFFFF;
--border-color: #E2E8F0;
--text-main: #0F172A;
/* Was #64748B, which measured 4.34:1 against the light panel background
(#F1F5F9) - just under the 4.5:1 WCAG AA minimum for body text, and the
one thing keeping the accessibility audit off 100. This shade keeps the
same muted grey-blue look but clears AA on white, off-white and panels. */
--text-muted: #5C6B7F;
--accent-blue: #2563EB;
--accent-hover: #1D4ED8;
--accent-amber: #F97316;
--header-bg: #16233F;
--header-text: #F8FAFC;
--header-text-muted: #94A3B8;
--overlay-soft: #F1F5F9;
--overlay-strong: #E2E8F0;
--overlay-input-bg: #F8FAFC;
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}
body:not(.light-theme) {
--header-bg: var(--card-bg);
--header-text: var(--text-main);
--header-text-muted: var(--text-muted);
--overlay-soft: rgba(255, 255, 255, 0.05);
--overlay-strong: rgba(255, 255, 255, 0.1);
--overlay-input-bg: rgba(0, 0, 0, 0.2);
--accent-amber: #FB923C;
}
/* Govtech light theme: navy header bar + white content cards + amber accent.
Kept scoped to body.light-theme so the original dark theme (default
fallback via :root) stays completely untouched. */
body.light-theme .top-nav {
background: var(--header-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light-theme .logo-title { color: var(--header-text); }
body.light-theme .logo-title strong { color: #60A5FA; }
body.light-theme .nav-links a { color: var(--header-text-muted); }
body.light-theme .nav-links a:hover, body.light-theme .nav-links a.active { color: var(--header-text); }
body.light-theme .theme-btn { color: var(--header-text); border-color: rgba(255, 255, 255, 0.15); }
body.light-theme .hero-badge { background: rgba(37, 99, 235, 0.1); color: #1D4ED8; border-color: rgba(37, 99, 235, 0.2); }
body.light-theme .search-tabs { background: var(--overlay-soft); }
body.light-theme .input-wrapper input { background: var(--overlay-input-bg); }
body.light-theme .live-check-row { background: var(--overlay-soft); }
body.light-theme .pill-btn { background: var(--overlay-soft); color: var(--text-muted); }
body.light-theme .pill-btn:hover { color: var(--text-main); }
body.light-theme .copy-pill-btn { background: var(--overlay-soft); }
body.light-theme .map-btn { background: rgba(37, 99, 235, 0.1); color: #1D4ED8; }
body.light-theme .source-badge { background: rgba(5, 150, 105, 0.1); color: #047857; }
body.light-theme .line-item { background: var(--overlay-soft); }
body.light-theme .tag-pill { background: var(--overlay-soft); }
body.light-theme .action-btn.secondary { background: var(--overlay-soft); }
body.light-theme .not-found-inner h3 { color: #DC2626; }
body.light-theme .not-found-msg { background: rgba(220, 38, 38, 0.08); color: #B91C1C; }
body.light-theme .ad-box { background: var(--overlay-soft); border-color: var(--border-color); }
body.light-theme .spinner { border-color: var(--overlay-strong); border-top-color: var(--accent-blue); }
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, .logo-title, .result-heading, .geo-hero h1, .hero-section h1,
.sidebar-card h4, .sidebar-card h3, .sidebar-card h2, .content-page h1, .content-page h2 {
font-family: 'Sora', 'Inter', system-ui, sans-serif;
letter-spacing: -0.02em;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
background-color: var(--bg-color);
color: var(--text-main);
transition: background-color 0.3s ease, color 0.3s ease;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* TOP NAVBAR */
.top-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--card-bg);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
}
.nav-container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.shield-badge {
display: flex;
width: 24px;
height: 24px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
}
.flag-red { flex: 1; background: #DC2626; }
.flag-white { flex: 1; background: #FFFFFF; }
.logo-title {
font-size: 1.35rem;
letter-spacing: -0.5px;
}
.logo-title strong {
color: var(--accent-blue);
}
.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent-blue);
}
.theme-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-main);
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
}
/* HEADER STAT COUNTER */
.header-stat {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--header-text);
}
.header-stat-icon { font-size: 1.3rem; }
.header-stat-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.header-stat-text strong {
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
color: var(--header-text);
}
.header-stat-text span {
color: var(--header-text-muted);
font-size: 0.72rem;
}
/* SECONDARY TAB NAV (page-level navigation, mockup style) */
.tab-nav {
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
}
.tab-nav-container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
gap: 0.25rem;
overflow-x: auto;
}
.tab-nav-link {
padding: 0.9rem 1.1rem;
color: var(--text-muted);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
border-bottom: 3px solid transparent;
white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
}
.tab-nav-link:hover { color: var(--text-main); }
.tab-nav-link.active { color: var(--accent-blue); border-bottom-color: var(--accent-amber, #F97316); }
/* TWO-COLUMN LAYOUT (search + results | sidebar) */
.layout-with-sidebar {
max-width: var(--container);
margin: 0 auto;
padding: 2.5rem 1.5rem;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 2rem;
align-items: start;
}
.sidebar-col {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sidebar-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 1.25rem;
}
.sidebar-card h4, .sidebar-card h3, .sidebar-card h2 {
font-size: 0.95rem;
margin-bottom: 0.9rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.sidebar-history-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid var(--border-color);
padding: 0.6rem 0;
cursor: pointer;
color: var(--text-main);
font-size: 0.85rem;
}
.sidebar-history-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-history-item strong { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; }
.sidebar-history-item span { color: var(--text-muted); font-size: 0.78rem; }
.sidebar-empty { color: var(--text-muted); font-size: 0.85rem; }
.sidebar-link-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0;
color: var(--text-main);
text-decoration: none;
font-size: 0.88rem;
border-bottom: 1px solid var(--border-color);
}
.sidebar-link-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-link-item:hover { color: var(--accent-blue); }
@media (max-width: 900px) {
.layout-with-sidebar { grid-template-columns: 1fr; }
}
/* SEGMENTED RUC INPUT (2 digits | 8 digits | 1 check digit) */
.ruc-segmented {
display: none;
gap: 0.5rem;
align-items: center;
}
.ruc-segmented.active { display: flex; }
.ruc-seg {
font-family: 'IBM Plex Mono', monospace;
font-weight: 600;
text-align: center;
border-radius: 12px;
border: 1px solid var(--border-color);
background: var(--overlay-input-bg);
color: var(--text-main);
font-size: 1.2rem;
padding: 0.9rem 0;
outline: none;
transition: border-color 0.2s;
}
.ruc-seg:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.ruc-seg-tipo { width: 3.2rem; letter-spacing: 1px; }
.ruc-seg-body { flex: 1; letter-spacing: 3px; }
.ruc-seg-check { width: 3.2rem; }
.ruc-seg-divider { color: var(--text-muted); font-weight: 700; font-size: 1.1rem; }
@media (max-width: 480px) {
.ruc-seg-body { letter-spacing: 1px; font-size: 1rem; }
}
/* HERO SECTION */
.main-content {
max-width: 900px;
margin: 0 auto;
padding: 3rem 1.5rem;
flex: 1;
width: 100%;
}
.hero-section {
text-align: center;
margin-bottom: 2.5rem;
}
.hero-badge {
display: inline-block;
background: rgba(37, 99, 235, 0.15);
color: #60A5FA;
padding: 0.35rem 1rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
border: 1px solid rgba(37, 99, 235, 0.3);
}
.hero-section h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.75rem;
letter-spacing: -1px;
}
.hero-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 2rem;
}
/* SEARCH CARD */
.search-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 1.75rem;
box-shadow: var(--shadow-lg);
backdrop-filter: blur(16px);
}
.search-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.25rem;
background: rgba(0, 0, 0, 0.15);
padding: 0.35rem;
border-radius: 12px;
}
.tab-btn {
flex: 1;
background: transparent;
border: none;
color: var(--text-muted);
padding: 0.65rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
}
.tab-btn.active {
background: var(--accent-blue);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.search-form {
display: flex;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 1.1rem;
font-size: 1.1rem;
color: var(--text-muted);
}
.input-wrapper input {
width: 100%;
padding: 1.1rem 2.8rem 1.1rem 3rem;
border-radius: 14px;
border: 1px solid var(--border-color);
background: rgba(0, 0, 0, 0.2);
color: var(--text-main);
font-size: 1.05rem;
outline: none;
transition: border-color 0.2s;
}
.input-wrapper input:focus {
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.clear-btn {
position: absolute;
right: 1rem;
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1.1rem;
}
.cta-search-btn {
background: var(--accent-blue);
color: white;
border: none;
padding: 0 2rem;
border-radius: 14px;
font-weight: 700;
font-size: 1.05rem;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.cta-search-btn:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}
.live-check-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.85rem;
margin-bottom: 1rem;
padding: 0.6rem 0.9rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
}
.live-check-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
cursor: pointer;
}
.live-check-toggle input { cursor: pointer; }
.live-quota-note {
color: var(--text-muted);
font-size: 0.78rem;
}
.sample-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.sample-label {
color: var(--text-muted);
}
.pill-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-muted);
padding: 0.35rem 0.75rem;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.pill-btn:hover {
border-color: var(--accent-blue);
color: var(--text-main);
}
/* RESULT CARD */
.result-section {
margin-top: 2rem;
}
.result-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 2rem;
box-shadow: var(--shadow-lg);
}
.result-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.source-badge {
display: inline-block;
background: rgba(16, 185, 129, 0.15);
color: #34D399;
font-size: 0.8rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 50px;
margin-bottom: 0.5rem;
}
.source-badge-live { background: rgba(37, 99, 235, 0.15); color: #60A5FA; }
body.light-theme .source-badge-live { background: rgba(37, 99, 235, 0.1); color: #1D4ED8; }
.result-header h2 {
font-size: 1.75rem;
font-weight: 800;
}
.status-badges {
display: flex;
gap: 0.5rem;
}
.status-pill {
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
}
.state-active { background: #059669; color: white; }
.state-inactive { background: #DC2626; color: white; }
.cond-habido { background: #1E3A8A; color: white; }
.cond-nohabido { background: #D97706; color: white; }
.data-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.grid-item.full-width {
grid-column: span 2;
}
.item-label {
display: block;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.item-value-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
}
.copy-pill-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
color: var(--text-main);
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 6px;
cursor: pointer;
}
.address-wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.map-btn {
background: rgba(37, 99, 235, 0.15);
color: #60A5FA;
text-decoration: none;
font-size: 0.85rem;
padding: 0.4rem 0.85rem;
border-radius: 8px;
font-weight: 600;
}
.tags-wrap {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.line-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.line-item {
font-weight: 600;
font-size: 0.95rem;
padding: 0.4rem 0.6rem;
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid var(--accent-color, #34D399);
border-radius: 4px;
}
.tag-pill {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
padding: 0.3rem 0.75rem;
border-radius: 8px;
font-size: 0.85rem;
}
.result-actions {
display: flex;
gap: 1rem;
}
.action-btn {
flex: 1;
padding: 0.85rem;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
border: none;
}
.action-btn.primary { background: var(--accent-blue); color: white; }
.action-btn.secondary { background: rgba(255, 255, 255, 0.1); color: var(--text-main); }
/* NOT FOUND CARD */
.not-found-card {
margin-top: 2rem;
background: rgba(220, 38, 38, 0.1);
border: 1px solid rgba(220, 38, 38, 0.3);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
}
.not-found-inner .not-found-icon {
font-size: 3rem;
display: block;
margin-bottom: 0.75rem;
}
.not-found-inner h3 {
font-size: 1.5rem;
color: #F87171;
margin-bottom: 0.5rem;
}
.not-found-inner p {
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.not-found-msg {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
padding: 0.4rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
color: #FCA5A5;
}
/* AD CONTAINER */
.ad-container {
margin: 3rem 0;
}
.ad-box {
background: rgba(0, 0, 0, 0.1);
border: 2px dashed var(--border-color);
border-radius: 14px;
padding: 2rem;
text-align: center;
color: var(--text-muted);
}
.ad-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
display: block;
}
/* DIRECTORY */
.directory-section { margin-top: 3rem; }
.directory-section h3 { margin-bottom: 1.25rem; }
.directory-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.dir-card {
display: block;
background: var(--card-bg);
border: 1px solid var(--border-color);
padding: 1.25rem;
border-radius: 14px;
cursor: pointer;
transition: transform 0.2s;
color: var(--text-main);
}
.dir-card:hover { transform: translateY(-3px); }
.dir-card strong { display: block; margin-bottom: 0.25rem; }
.dir-card span { font-size: 0.8rem; color: var(--text-muted); }
/* --- Empresas más consultadas (professional cards) --- */
.pop-wrap { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem 1rem; }
.pop-section { margin-top: 3rem; }
.pop-head { margin-bottom: 1.5rem; }
.pop-head h2 { font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--geo-navy); letter-spacing: -0.02em; margin: 0 0 0.45rem; }
.pop-head p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; max-width: 660px; margin: 0; }
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.pop-card { position: relative; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.25rem 1.35rem 1.15rem; background: var(--card-bg); border: 1px solid var(--border-color); border-left: 3px solid var(--geo-orange); border-radius: 14px; text-decoration: none; box-shadow: 0 1px 3px rgba(16,35,63,.05); transition: transform .18s, box-shadow .18s; }
.pop-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(16,35,63,.12); }
.pop-card-top { display: flex; align-items: center; gap: 0.75rem; }
.pop-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; background: var(--geo-navy); color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; letter-spacing: .5px; }
.pop-id { min-width: 0; }
.pop-id strong { display: block; font-size: 0.97rem; font-weight: 700; color: var(--text-main); line-height: 1.25; }
.pop-sector { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--geo-orange-text); }
.pop-ruc { display: flex; gap: 4px; }
.pop-ruc .seg { font-family: 'IBM Plex Mono', ui-monospace, monospace; background: color-mix(in srgb, var(--geo-navy) 5%, transparent); border: 1px solid var(--border-color); border-radius: 5px; padding: 2px 7px; font-size: 0.8rem; font-weight: 600; color: var(--geo-navy); letter-spacing: .5px; }
.pop-loc { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }
.pop-loc svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--geo-orange); }
.pop-pills { display: flex; gap: 0.4rem; }
.pop-pill { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.pop-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pop-pill.ok { color: #146C34; background: color-mix(in srgb, #16A34A 10%, transparent); }
.pop-cta { margin-top: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--geo-orange-text); display: inline-flex; align-items: center; gap: 0.35rem; }
.pop-cta span { transition: transform .18s; }
.pop-card:hover .pop-cta span { transform: translateX(3px); }
.pop-all { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.35rem; font-size: 0.9rem; font-weight: 600; color: var(--geo-navy); text-decoration: none; padding: 0.6rem 1.15rem; border: 1px solid var(--border-color); border-radius: 999px; transition: background .15s, color .15s, border-color .15s; }
.pop-all span { transition: transform .18s; }
.pop-all:hover { background: var(--geo-navy); color: #fff; border-color: var(--geo-navy); }
.pop-all:hover span { transform: translateX(3px); }
@media (max-width: 520px) { .pop-grid { grid-template-columns: 1fr; } }
/* FAQ */
.faq-section { margin-top: 3rem; }
.faq-section h3 { margin-bottom: 1.25rem; }
.faq-accordion details {
background: var(--card-bg);
border: 1px solid var(--border-color);
padding: 1rem 1.25rem;
border-radius: 12px;
margin-bottom: 0.75rem;
}
.faq-accordion summary { font-weight: 600; cursor: pointer; }
.faq-accordion p { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.95rem; }
/* STATIC CONTENT PAGES (legal, FAQ, guides) */
.content-page {
max-width: 860px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
line-height: 1.7;
}
.content-page h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.content-page .content-updated { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 2rem; }
.content-page h2 { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.content-page p { margin-bottom: 1rem; color: var(--text-main); }
.content-page ul, .content-page ol { margin: 0 0 1rem 1.5rem; color: var(--text-main); }
.content-page li { margin-bottom: 0.4rem; }
/* in-content link style is defined once, site-wide, at `.art-body a, .content-page a` */
.rate-card {
max-width: 860px;
margin: 0 auto 2rem;
padding: 0 1.5rem;
}
.rate-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 1.5rem 0;
}
.rate-box {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 1.5rem;
text-align: center;
}
.rate-box .rate-label {
display: block;
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.rate-box .rate-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--accent-blue, #60A5FA);
}
.rate-date-note {
text-align: center;
color: var(--text-muted);
font-size: 0.9rem;
margin-top: -0.5rem;
margin-bottom: 1.5rem;
}
.rate-history-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0 2rem;
}
.rate-history-table th, .rate-history-table td {
padding: 0.6rem 0.75rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.rate-history-table th {
color: var(--text-muted);
font-size: 0.85rem;
text-transform: uppercase;
}
@media (max-width: 600px) {
.rate-grid { grid-template-columns: 1fr; }
}
.breadcrumb {
font-size: 0.85rem;
color: var(--text-muted);
padding: 1rem 1.5rem 0;
max-width: 860px;
margin: 0 auto;
}
.breadcrumb a { color: var(--text-muted); }
/* FOOTER */
/* legacy centered footer (kept as fallback if any page still uses it) */
.main-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0; text-align: center;
color: var(--text-muted); font-size: 0.85rem; margin-top: 4rem;
}
.disclaimer { margin-top: 0.5rem; opacity: 0.7; }
/* ===== Directorio de Empresas por Rubro ===== */
.rubro-page { max-width: 1200px; margin: 0 auto; padding: 0.5rem 1.5rem 0; }
.rubro-hero { position: relative; padding: 1rem 0 1.75rem; overflow: hidden; }
.rubro-hero-map {
position: absolute; top: -10px; right: 0; width: 200px; height: 220px; z-index: 0; opacity: .5; pointer-events: none;
background-color: #c3d0e0;
-webkit-mask: url(/peru-map.svg) no-repeat center / contain; mask: url(/peru-map.svg) no-repeat center / contain;
}
body:not(.light-theme) .rubro-hero-map { background-color: #3a4d6a; opacity: .4; }
.rubro-hero h1 { position: relative; z-index: 1; font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 0.15rem; display: inline-block; }
.rubro-hero h1::after { content: ''; display: block; width: 62%; height: 4px; border-radius: 3px; background: var(--geo-orange); margin-top: 0.35rem; }
.rubro-hero p { position: relative; z-index: 1; color: var(--text-muted); font-size: 1.05rem; margin: 0.5rem 0 0; }
/* sticky sector sub-nav */
.rubro-nav {
position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem;
padding: 0.7rem 0; margin-bottom: 0.5rem;
background: var(--bg, #F4F6FA); border-bottom: 1px solid var(--border-color);
}
body.light-theme .rubro-nav, .rubro-nav { background: #F4F6FA; }
body:not(.light-theme) .rubro-nav { background: var(--bg-dark, #0f1729); }
.rubro-nav a {
color: var(--text-muted); text-decoration: none; font-size: 0.86rem; font-weight: 600;
padding: 0.28rem 0.7rem; border-radius: 999px; transition: color .15s, background .15s;
}
.rubro-nav a::after { content: '·'; margin-left: 0.55rem; color: var(--border-color); font-weight: 400; }
.rubro-nav a:last-child::after { content: ''; }
.rubro-nav a:hover { color: var(--text-main); }
.rubro-nav a.active { color: var(--geo-orange-text); }
/* sector section */
.rubro-section { scroll-margin-top: 64px; padding: 1.75rem 0 0.5rem; }
.rubro-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.rubro-icon {
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
background: rgba(249,115,22,.12); color: var(--geo-orange);
display: inline-flex; align-items: center; justify-content: center;
}
.rubro-icon .icon { width: 20px; height: 20px; }
.rubro-head h2 { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.rubro-count {
/* #2563EB measured 4.12:1 on its own tinted pill background. */
font-size: 0.72rem; font-weight: 700; color: #1D4FD8; font-family: var(--mono);
background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.18); border-radius: 999px; padding: 0.18rem 0.6rem;
}
/* card grid */
.rubro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.rubro-card {
display: flex; flex-direction: column; text-decoration: none; position: relative;
background: var(--card-bg); border: 1px solid var(--border-color); border-left: 3px solid var(--geo-orange);
border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(16,35,63,.05);
transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.rubro-card:hover { box-shadow: 0 18px 38px -20px rgba(16,35,63,.45); transform: translateY(-2px); border-color: var(--geo-orange); }
.rc-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.rc-avatar {
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; background: var(--overlay-soft);
border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-head, 'Sora', sans-serif); font-weight: 800; font-size: 1.1rem; color: var(--geo-navy);
}
body:not(.light-theme) .rc-avatar { color: #cdd8ec; }
.rc-ht { min-width: 0; flex: 1; }
.rc-name { display: block; font-size: 0.9rem; font-weight: 700; line-height: 1.25; color: var(--text-main); }
.rc-ruc { display: flex; gap: 4px; margin-top: 0.35rem; }
.dc-seg { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; color: #14213D; background: #EDF1F6; border-radius: 5px; padding: 0.08rem 0.42rem; letter-spacing: .5px; }
body:not(.light-theme) .dc-seg { background: rgba(255,255,255,.08); color: var(--text-main); }
.dc-seg-mid { letter-spacing: 1px; }
.rc-pills { display: flex; gap: 0.35rem; margin: 0.7rem 0 0; }
.dc-pill { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; padding: 0.16rem 0.5rem; border-radius: 999px; letter-spacing: .3px; }
.dc-pill.dc-active { background: rgba(22,163,74,.14); color: #136030; }
.dc-pill.dc-habido { background: rgba(37,99,235,.14); color: #1D4ED8; }
.rc-dom { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); margin: 0.7rem 0 0; }
.rc-dom .icon { width: 14px; height: 14px; color: var(--geo-orange); flex: 0 0 auto; }
.rc-act { align-self: flex-start; margin: 0.7rem 0 0; font-size: 0.72rem; font-weight: 600; color: #0A6F66; background: rgba(13,148,136,.10); border: 1px solid rgba(13,148,136,.20); border-radius: 7px; padding: 0.2rem 0.55rem; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--border-color); }
.rc-ref { font-family: var(--mono); font-size: 0.64rem; color: var(--text-muted); }
.rc-ver { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--geo-orange-text); white-space: nowrap; }
.rc-ver .icon { width: 14px; height: 14px; transition: transform .15s ease; }
.rubro-card:hover .rc-ver .icon { transform: translateX(3px); }
/* bottom CTA */
.rubro-cta { margin: 2.5rem -1.5rem 0; background: var(--geo-navy); background-image: radial-gradient(900px 300px at 80% -40%, rgba(249,115,22,.14), transparent 60%); }
.rubro-cta-inner { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.rubro-cta-inner p { margin: 0; color: rgba(255,255,255,.8); font-size: 0.95rem; }
.rubro-cta-inner strong { color: #fff; }
.rubro-cta-btn {
display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
background: var(--geo-orange); color: #fff; text-decoration: none; border-radius: 10px;
padding: 0.65rem 1.3rem; font-weight: 700; font-size: 0.9rem; transition: background .18s, transform .15s;
}
.rubro-cta-btn:hover { background: #d94e0f; transform: translateY(-1px); }
.rubro-cta-btn .icon { width: 16px; height: 16px; }
@media (max-width: 900px) { .rubro-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rubro-grid { grid-template-columns: 1fr; } .rubro-hero h1 { font-size: 1.9rem; } .rubro-cta-inner { flex-direction: column; align-items: flex-start; } }
/* ===== premium styling for the remaining tools (calculadora, tipo de cambio, sello) ===== */
/* brand navy→orange-accent button (calcBtn, generateBadgeBtn) */
.cta-search-btn {
background: linear-gradient(180deg, #24365c 0%, var(--geo-navy) 100%);
color: #fff; border: none; border-radius: 10px;
padding: 0.82rem 1.7rem; font-weight: 700; font-size: 0.88rem; letter-spacing: .5px;
cursor: pointer; box-shadow: 0 10px 24px -12px rgba(16,35,63,.55);
transition: transform .15s ease, box-shadow .15s ease, background .18s ease;
}
.cta-search-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #2a4576 0%, #1b2c4d 100%); box-shadow: 0 14px 30px -12px rgba(16,35,63,.65); }
/* text/number inputs inside tool cards */
.rate-box input[type="number"], .rate-box input[type="text"] {
width: 100%; border: 1.5px solid #c5cfdd; border-radius: 10px;
padding: 0.75rem 0.85rem; font: inherit; font-size: 1rem; margin-bottom: 1rem;
background: var(--card-bg); color: var(--text-main); outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.rate-box input:focus { border-color: var(--geo-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.10); }
body:not(.light-theme) .rate-box input { border-color: rgba(255,255,255,.18); }
/* tipo de cambio: premium compra/venta cards */
.rate-card { max-width: 720px; }
.rate-grid { gap: 1rem; }
.rate-box.rate-compra, .rate-box.rate-venta {
border-radius: 16px; padding: 1.5rem; text-align: left;
box-shadow: 0 10px 30px -18px rgba(16,35,63,.3);
}
.rate-box.rate-compra { background: linear-gradient(155deg, rgba(37,99,235,.07), transparent 70%); border-color: rgba(37,99,235,.28); }
.rate-box.rate-venta { background: linear-gradient(155deg, rgba(249,115,22,.10), transparent 70%); border-color: rgba(249,115,22,.32); }
.rate-box.rate-compra .rate-label, .rate-box.rate-venta .rate-label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; margin-bottom: 0.35rem; }
.rate-box.rate-compra .rate-label .icon { color: var(--accent-blue); width: 17px; height: 17px; }
.rate-box.rate-venta .rate-label .icon { color: var(--geo-orange); width: 17px; height: 17px; }
.rate-box.rate-compra .rate-value, .rate-box.rate-venta .rate-value { font-family: var(--mono); font-size: 2.7rem; letter-spacing: -1px; }
.rate-box.rate-compra .rate-value { color: var(--accent-blue); }
.rate-box.rate-venta .rate-value { color: var(--geo-orange-text); }
/* rate / calc history tables → navy header, mono values, hover */
.rate-history-table { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.rate-history-table th { background: var(--geo-navy); color: #fff; font-size: 0.72rem; letter-spacing: .5px; padding: 0.65rem; border: none; }
.rate-history-table td { border-bottom: 1px solid var(--border-color); }
.rate-history-table tbody tr:last-child td { border-bottom: none; }
.rate-history-table tbody tr:hover { background: var(--overlay-soft); }
#historyBody td { font-family: var(--mono); }
/* sello: embed textarea + preview polish */
#embedCode { font-family: var(--mono) !important; border-radius: 10px !important; transition: border-color .2s; }
#embedCode:focus { border-color: var(--geo-orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.10); outline: none; }
.badge-stage { border-radius: 14px; }
/* ===== búsqueda masiva: tool + results (on-brand) ===== */
.bulk-hero { padding-bottom: 2.25rem; }
.bulk-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,.10); color: #1D4FD8;
border: 1px solid rgba(37,99,235,.18); border-radius: 999px;
padding: 0.35rem 0.95rem; font-size: 0.78rem; font-weight: 600; margin-bottom: 1.1rem;
}
.bulk-badge .icon { width: 15px; height: 15px; }
.bulk-tool {
position: relative; z-index: 1;
max-width: 780px; margin: 1.9rem auto 0; text-align: left;
background: var(--card-bg); border: 1px solid var(--border-color);
border-radius: 18px; padding: 1.6rem;
box-shadow: 0 24px 60px -28px rgba(16,35,63,.4);
}
.bulk-grid { display: grid; grid-template-columns: 1fr auto 1.3fr; gap: 1.1rem; align-items: stretch; }
.bulk-drop {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 0.3rem; padding: 1.6rem 1rem;
border: 2px dashed #c5cfdd; border-radius: 14px; background: var(--overlay-soft);
cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.bulk-drop:hover { border-color: var(--geo-orange); background: rgba(249,115,22,.05); }
body:not(.light-theme) .bulk-drop { border-color: rgba(255,255,255,.18); }
.bulk-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bulk-drop-ic { color: var(--geo-orange); }
.bulk-drop-ic .icon { width: 30px; height: 30px; }
.bulk-drop-title { font-size: 0.95rem; color: var(--text-main); }
.bulk-drop-sub { font-size: 0.75rem; color: var(--text-muted); }
.bulk-drop-file { font-size: 0.78rem; color: var(--accent-blue); font-weight: 600; font-family: var(--mono); margin-top: 0.35rem; word-break: break-all; }
/* compact horizontal drop zone used in the homepage bulk widget */
.bulk-drop-row { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 0.7rem; padding: 0.8rem 1rem; margin-top: 0.6rem; }
.bulk-drop-row .bulk-drop-ic .icon { width: 22px; height: 22px; }
.bulk-drop-row .bulk-drop-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bulk-drop-row .bulk-drop-file { margin: 0 0 0 auto; text-align: right; }
.bulk-drop-row:has(.bulk-drop-file:not(:empty)) { border-style: solid; border-color: var(--geo-orange); }
.bulk-or { position: relative; display: flex; align-items: center; justify-content: center; }
.bulk-or::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-color); }
.bulk-or span {
position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
background: var(--card-bg); border: 1px solid var(--border-color);
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);
}
.bulk-paste { display: flex; flex-direction: column; }
.bulk-paste-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.5rem; }
.bulk-paste-label .icon { width: 15px; height: 15px; color: var(--geo-orange); }
.bulk-textarea {
flex: 1; min-height: 118px; width: 100%; resize: vertical;
border: 1.5px solid #c5cfdd; border-radius: 12px; padding: 0.8rem 0.9rem;
background: var(--card-bg); color: var(--text-main);
font-family: var(--mono); font-size: 0.9rem; line-height: 1.7; letter-spacing: .5px; outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.bulk-textarea::placeholder { color: var(--text-muted); opacity: .7; }
.bulk-textarea:focus { border-color: var(--geo-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.10); }
body:not(.light-theme) .bulk-textarea { border-color: rgba(255,255,255,.18); }
.bulk-paste-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.45rem; }
.bulk-go { margin: 1.4rem auto 0 !important; max-width: none !important; width: 100%; }
.bulk-status { text-align: center; margin: 0.85rem 0 0; color: var(--text-muted); font-size: 0.85rem; min-height: 1.1em; }
/* results */
.bulk-results { max-width: var(--container); margin: 2rem auto 0; padding: 0 1.5rem; }
.bulk-results-card {
background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px;
overflow: hidden; box-shadow: 0 14px 40px -22px rgba(16,35,63,.35);
}
.bulk-results-head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border-color);
background: linear-gradient(180deg, var(--overlay-soft), transparent);
}
.bulk-results-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.bulk-export-btn {
display: inline-flex; align-items: center; gap: 0.45rem;
background: var(--geo-orange); color: #fff; border: none; border-radius: 9px;
padding: 0.5rem 1rem; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.bulk-export-btn:hover { background: #d94e0f; transform: translateY(-1px); }
.bulk-export-btn .icon { width: 15px; height: 15px; }
.bulk-table-scroll { overflow-x: auto; }
.bulk-results-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.bulk-results-table thead th {
text-align: left; padding: 0.7rem 1.35rem; background: var(--geo-navy); color: #fff;
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.bulk-results-table tbody td { padding: 0.7rem 1.35rem; }
.bulk-results-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background .12s ease; }
.bulk-results-table tbody tr:hover { background: var(--overlay-soft); }
.bulk-results-table tbody tr:last-child { border-bottom: none; }
@media (max-width: 640px) {
.bulk-tool { padding: 1.15rem; }
.bulk-grid { grid-template-columns: 1fr; gap: 0.9rem; }
.bulk-or { padding: 0.15rem 0; }
.bulk-or::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}
/* ===== organization-style multi-column footer ===== */
.site-footer { margin-top: 4.5rem; font-size: 0.9rem; }
.footer-main {
background: var(--geo-navy);
background-image: radial-gradient(1200px 400px at 12% -20%, rgba(249,115,22,.10), transparent 60%);
color: rgba(255,255,255,.72);
padding: 3.25rem 1.5rem 2.75rem;
}
.footer-grid {
max-width: var(--container); margin: 0 auto;
display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 2rem 2.25rem;
}
/* brand column */
.footer-brand { max-width: 340px; }
.footer-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-bottom: 1rem; }
.footer-logo-mark {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
background: var(--geo-orange); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.footer-logo-mark .icon { width: 18px; height: 18px; }
.footer-logo-text { color: #fff; font-family: var(--font-head, 'Sora', sans-serif); font-weight: 500; font-size: 1.2rem; line-height: 1.05; letter-spacing: .2px; }
.footer-logo-text b { font-weight: 800; }
.footer-desc { margin: 0 0 1.25rem; color: rgba(255,255,255,.6); line-height: 1.6; font-size: 0.86rem; }
.footer-stat {
display: flex; align-items: center; gap: 0.7rem;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 1rem;
}
.footer-stat-ic { width: 20px; height: 20px; color: var(--geo-orange); flex: 0 0 auto; }
.footer-stat-ic .icon { width: 20px; height: 20px; }
.footer-stat strong { display: block; color: #fff; font-family: var(--mono, monospace); font-weight: 700; font-size: 1.05rem; letter-spacing: .5px; }
.footer-stat span { font-size: 0.72rem; color: rgba(255,255,255,.55); }
.footer-flag { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8rem; color: rgba(255,255,255,.6); }
.footer-flag-chip {
width: 22px; height: 14px; border-radius: 3px; flex: 0 0 auto;
background: linear-gradient(to right, #D91023 0 33%, #fff 33% 66%, #D91023 66%);
box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
/* social media row */
.footer-social { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.footer-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.7);
transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
transform: translateY(-2px);
background: var(--geo-orange, #F97316); border-color: var(--geo-orange, #F97316); color: #fff;
outline: none;
}
.footer-social svg { width: 18px; height: 18px; display: block; }
/* link columns */
.footer-col h4, .footer-col h3 {
color: #fff; font-family: var(--font-head, 'Sora', sans-serif);
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
margin: 0.2rem 0 0.9rem;
}
.footer-col a {
display: block; color: rgba(255,255,255,.66); text-decoration: none;
padding: 0.32rem 0; font-size: 0.86rem; line-height: 1.3;
transition: color .15s ease, transform .15s ease;
}
.footer-col a:hover { color: var(--geo-orange); transform: translateX(3px); }
/* bottom bar */
.footer-bottom { background: #0e1729; padding: 1.15rem 1.5rem; }
.footer-bottom-inner {
max-width: var(--container); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.footer-copy { margin: 0; color: rgba(255,255,255,.6); font-size: 0.8rem; }
.footer-copy strong { color: rgba(255,255,255,.9); }
.footer-disclaimer { margin: 0; color: rgba(255,255,255,.62); font-size: 0.74rem; line-height: 1.5; max-width: 620px; }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}
/* SPINNER */
.loader-container {
text-align: center;
padding: 3rem 0;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--accent-blue);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
.data-grid { grid-template-columns: 1fr; }
.grid-item.full-width { grid-column: span 1; }
.search-form { flex-direction: column; }
.cta-search-btn { padding: 1rem; }
}
/* ==========================================================================
CARTOGRAPHIC REDESIGN — "Peru administrative geography" record-terminal look
Matches the provided mockup: navy header, faint Peru map motifs, IBM Plex
Mono data, [REF: …] bracket tags, segmented RUC breakdown, cadastral field
boxes. Light theme is the design target; these styles assume body.light-theme.
========================================================================== */
:root {
--mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
--geo-navy: #16233F;
--geo-orange: #F97316;
--geo-green: #15803D;
--geo-line: #DDE4EE;
/* Text-only variants of the brand colours. The brand orange (#F97316) is
only 2.56:1 on a light panel and the green 4.34:1 - both fail WCAG AA for
text. Shapes (buttons, icons, the accent bar) keep the brand hues above;
these darker tones are for small text set ON a light background, where
the contrast rule actually applies. */
--geo-orange-text: #8F4307;
--geo-green-text: #146C34;
}
/* Header: logo + centered live stat + toggle (already navy). Refine stat. */
.header-stat-text strong { font-family: var(--mono); letter-spacing: -0.5px; }
/* Hero with faint Peru map behind it */
/* The search bar is mounted by site.js into [data-component="search-bar"],
so until JS runs that slot is 0px tall and everything below it sits too high.
When it mounts, the whole page jumps - measured as a 0.298 layout shift, the
single largest contributor to CLS on mobile.
Reserving the mounted height keeps the page still. The three variants differ:
the default has the tab strip, the tabs="false" one (ficha-ruc) does not.
min-height (not height) so a taller-than-expected render still just grows. */
[data-component="search-bar"] { min-height: 430px; }
[data-component="search-bar"][data-tabs="false"] { min-height: 380px; }
@media (min-width: 768px) {
[data-component="search-bar"] { min-height: 360px; }
[data-component="search-bar"][data-tabs="false"] { min-height: 315px; }
}
/* Once mounted the real content dictates the height. */
[data-component="search-bar"]:has(form) { min-height: 0; }
.geo-hero {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 3rem 1.5rem 1rem;
text-align: center;
overflow: hidden;
}
.geo-hero-map {
position: absolute;
left: 10px;
top: 30px;
width: 360px;
height: 360px;
background-color: #c3d0e0;
opacity: 0.32;
pointer-events: none;
z-index: 0;
-webkit-mask: url(/peru-map.svg) no-repeat center / contain;
mask: url(/peru-map.svg) no-repeat center / contain;
}
body:not(.light-theme) .geo-hero-map { background-color: #3a4d6a; opacity: 0.4; }
/* small orange Lima dot over the faint hero map (Lima ≈ 34%,58% of the 360px map box) */
.geo-hero-map-dot {
position: absolute;
left: 132px;
top: 238px;
width: 9px; height: 9px;
background: var(--geo-orange);
border-radius: 50%;
z-index: 0;
box-shadow: 0 0 0 3px rgba(249,115,22,0.25);
}
.geo-hero > * { position: relative; z-index: 1; }
/* Must come AFTER `.geo-hero > *` (equal specificity) so the map/dot stay
absolutely positioned and don't take flow space (which pushed the title
down). */
.geo-hero-map, .geo-hero-map-dot { position: absolute; z-index: 0; }
.geo-hero h1 {
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -1px;
margin-bottom: 0.6rem;
color: var(--text-main);
}
.geo-hero .geo-sub {
color: var(--text-muted);
max-width: 640px;
margin: 0 auto 2rem;
font-size: 1.02rem;
line-height: 1.6;
}
/* Search panel */
.search-panel {
max-width: 720px;
margin: 0 auto;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1.75rem;
box-shadow: var(--shadow-lg);
}
/* Restyle the segmented RUC boxes to the mockup: light fill, mono, search icon */
.geo-search-row { display: flex; gap: 0.6rem; align-items: stretch; margin-bottom: 1rem; }
.geo-search-row .ruc-segmented { flex: 1; margin: 0; }
.geo-search-row .ruc-segmented.active { display: flex; }
.geo-search-row .input-wrapper { flex: 1; }
.geo-search-icon-btn {
width: 54px;
border: 1px solid var(--border-color);
background: var(--overlay-soft);
border-radius: 12px;
font-size: 1.2rem;
cursor: pointer;
color: var(--text-muted);
}
.search-sub-links {
display: flex;
justify-content: center;
gap: 1.5rem;
font-size: 0.85rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.search-sub-links a { color: var(--accent-blue); text-decoration: none; font-weight: 600; }
.search-sub-links a:hover { text-decoration: underline; }
.btn-consultar {
width: 100%;
background: var(--geo-navy);
color: #fff;
border: none;
padding: 1rem;
border-radius: 12px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
transition: background 0.2s, transform 0.1s;
}
.btn-consultar:hover { background: #1e3358; transform: translateY(-1px); }
body:not(.light-theme) .btn-consultar { background: var(--accent-blue); }
body:not(.light-theme) .btn-consultar:hover { background: var(--accent-hover); }
.geo-live-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 0.5rem; font-size: 0.8rem; margin-top: 1rem; color: var(--text-muted);
}
.geo-live-row label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
/* ---- RESULT: cadastral record layout ---- */
.geo-result { max-width: var(--container); margin: 2.5rem auto 0; padding: 0 1.5rem; }
/* Ficha result page (): body is a flex column, and
auto side-margins on a flex item shrink-wrap it to its content — which made
the whole block jump wider on the Comprobantes tab (its 3-col grid is the
widest panel). Force full width to stop the shrink, then cap the stack to a
consistent, comfortable width so every tab renders identically. Homepage
result is a , so it is intentionally untouched. */
main.geo-result { width: 100%; }
main.geo-result > .ruc-page-h1,
main.geo-result > .breadcrumb,
main.geo-result > .rp,
main.geo-result > .ruc-summary { max-width: 1240px; margin-left: auto; margin-right: auto; }
.geo-result-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1.5rem; align-items: start; }
.result-heading {
font-size: 1.35rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.4rem;
}
.result-heading .rh-ruc { font-family: var(--mono); }
.ref-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-muted);
background: var(--overlay-soft);
border: 1px solid var(--border-color);
padding: 0.15rem 0.5rem;
border-radius: 5px;
letter-spacing: 0.3px;
}
.ruc-big { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; }
.ruc-big-seg {
font-family: var(--mono);
font-weight: 700;
font-size: 1.9rem;
background: var(--overlay-soft);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.35rem 0.9rem;
color: var(--text-main);
letter-spacing: 2px;
}
.ruc-big-seg.mid { letter-spacing: 4px; }
.ruc-breakdown { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; }
.estado-mono {
font-family: var(--mono);
font-weight: 700;
font-size: 0.9rem;
background: rgba(21,128,61,0.12);
color: var(--geo-green);
border: 1px solid rgba(21,128,61,0.35);
padding: 0.5rem 1rem;
border-radius: 8px;
white-space: nowrap;
}
.estado-mono.baja { background: rgba(220,38,38,0.12); color: #b91c1c; border-color: rgba(220,38,38,0.35); }
.record-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.record-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1.5rem;
box-shadow: var(--shadow-lg);
}
.record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.col-span { grid-column: 1 / -1; }
.field-label {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 0.4rem;
}
.field-value {
background: var(--overlay-soft);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0.6rem 0.75rem;
font-size: 0.9rem;
color: var(--text-main);
font-weight: 600;
word-break: break-word;
}
.field-value.mono { font-family: var(--mono); }
.field-value.with-dot::before {
content: "●"; color: var(--geo-green); margin-right: 0.5rem; font-size: 0.7rem; vertical-align: middle;
}
.field-value.with-dot.red::before { color: #dc2626; }
/* small result map */
.result-map-wrap { text-align: center; }
.result-map {
width: 100%; max-width: 200px; margin: 0.25rem auto 0; color: #c7d2e0; position: relative;
}
body:not(.light-theme) .result-map { color: #334660; }
.result-map svg { width: 100%; height: auto; }
.result-map .lima-dot { fill: var(--geo-orange); }
.result-map .lima-label { font-family: var(--mono); font-size: 34px; fill: var(--geo-orange); font-weight: 700; }
/* sidebar tweaks for mono refs */
.sidebar-history-item .ref-tag { margin-bottom: 0.3rem; }
/* Geographic footer tagline */
.geo-tagline { font-style: italic; opacity: 0.75; }
@media (max-width: 900px) {
.geo-result-layout { grid-template-columns: 1fr; }
.geo-hero-map { display: none; }
}
@media (max-width: 560px) {
.record-grid { grid-template-columns: 1fr; }
.ruc-big-seg { font-size: 1.4rem; }
}
/* ==========================================================================
POLISH LAYER — icons, depth, motion. Gives the flat cadastral layout "jaan".
========================================================================== */
/* Inline Lucide icons (injected by site.js from [data-icon]) */
.icon {
width: 1.05em;
height: 1.05em;
display: inline-block;
vertical-align: -0.15em;
flex-shrink: 0;
stroke-width: 2;
}
.ic { display: inline-flex; align-items: center; }
/* wrapper spans produced by the emoji→icon replacement */
.field-label .ic .icon { width: 15px; height: 15px; }
.field-label { gap: 0.45rem; }
.sidebar-card h4 .ic .icon, .sidebar-card h3 .ic .icon, .sidebar-card h2 .ic .icon { width: 17px; height: 17px; }
.sidebar-link-item .ic .icon { width: 16px; height: 16px; color: var(--accent-blue); }
.header-stat-icon .icon { width: 20px; height: 20px; }
.search-icon .icon { width: 18px; height: 18px; }
.geo-search-icon-btn .icon { width: 18px; height: 18px; }
.geo-live-row .ic .icon { width: 15px; height: 15px; }
.btn-consultar .ic .icon { width: 17px; height: 17px; }
.source-badge .icon { width: 14px; height: 14px; vertical-align: -0.2em; }
.map-btn .icon { width: 13px; height: 13px; }
.not-found-icon .icon { width: 44px; height: 44px; }
.result-actions .icon { width: 15px; height: 15px; }
.theme-btn .icon { width: 17px; height: 17px; }
/* Refined layered shadows */
body.light-theme {
--shadow-lg: 0 1px 2px rgba(16,33,61,0.04), 0 8px 24px -6px rgba(16,33,61,0.10);
--shadow-hover: 0 2px 4px rgba(16,33,61,0.05), 0 16px 40px -8px rgba(16,33,61,0.16);
}
/* Header: subtle vertical gradient + soft divider for depth */
body.light-theme .top-nav {
background: linear-gradient(180deg, #1b2c4d 0%, #16233F 100%);
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 6px 20px -12px rgba(0,0,0,0.6);
}
/* Cards lift gently on hover */
.record-card, .sidebar-card, .search-panel, .dir-card, .result-card {
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.dir-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: #cdd6e4; }
.sidebar-card:hover { box-shadow: var(--shadow-hover); }
/* Record card: subtle accent hairline on the left edge (cadastral document feel) */
.record-card { position: relative; overflow: hidden; }
.record-card::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--geo-orange), #f9a825);
opacity: 0.85;
}
/* Buttons: gradient + lift */
.btn-consultar {
background: linear-gradient(180deg, #223a63 0%, #16233F 100%);
box-shadow: 0 6px 16px -6px rgba(22,35,63,0.5);
gap: 0.55rem;
}
.btn-consultar:hover { background: linear-gradient(180deg, #2a4576 0%, #1b2c4d 100%); box-shadow: 0 10px 22px -8px rgba(22,35,63,0.55); }
.cta-search-btn { box-shadow: 0 6px 16px -6px rgba(37,99,235,0.5); }
/* Field value: crisper, with hover tint */
.field-value { transition: border-color 0.2s ease, background 0.2s ease; }
.field-value:hover { border-color: #cfd8e6; }
/* Tabs (search-type pills): smoother */
.tab-btn { transition: all 0.2s ease; }
/* Segmented RUC boxes: focus glow + hover */
.ruc-seg { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.ruc-seg:hover { border-color: #c2ccdb; }
/* Estado mono badge: gentle inner sheen */
.estado-mono { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
/* Nav active underline: thicker, rounded, animated */
.tab-nav-link { position: relative; transition: color 0.2s ease; }
.tab-nav-link.active { border-bottom-color: transparent; }
.tab-nav-link.active::after {
content: "";
position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 3px;
background: var(--geo-orange); border-radius: 3px 3px 0 0;
}
/* Hero heading: tighter, more presence */
.geo-hero h1 { font-weight: 800; font-size: 3rem; }
.geo-hero .geo-sub { font-size: 1.05rem; }
/* Sample pills + resource links: hover accent */
.pill-btn { transition: all 0.18s ease; }
.sidebar-link-item { transition: color 0.18s ease, transform 0.18s ease; border-radius: 6px; }
.sidebar-link-item:hover { transform: translateX(2px); }
/* Result heading RUC in mono, orange accent number */
.result-heading .rh-ruc { color: var(--geo-orange-text); }
/* Print-friendly: hide chrome */
/* Print-only branded header/footer for the ficha (hidden on screen). */
.print-only { display: none; }
.print-head { align-items: center; gap: 0.9rem; padding-bottom: 0.7rem; margin-bottom: 1.1rem; border-bottom: 3px solid var(--geo-orange); }
.print-logo { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.print-head-txt { flex: 1; }
.print-head-txt strong { display: block; font-family: 'Sora', sans-serif; font-size: 1.15rem; color: var(--geo-navy); line-height: 1.1; }
.print-head-txt span { font-size: 0.74rem; color: #555; }
.print-head-url { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--geo-orange-text); font-size: 1rem; }
.print-foot { margin-top: 1.3rem; padding-top: 0.7rem; border-top: 1.5px solid #d9d9d9; font-size: 0.72rem; color: #666; justify-content: center; text-align: center; }
.print-foot strong { color: var(--geo-navy); }
@media print {
/* keep the site's colors on paper (browsers strip backgrounds otherwise) */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
@page { margin: 1.3cm; }
body { background: #fff !important; }
/* hide everything that isn't the RUC data */
.top-nav, .tab-nav, .breadcrumb, .site-footer, .main-footer,
.rp-tabs, .rp-hero-actions, .ruc-summary, .sidebar-col, .ad-container,
.geo-hero, .geo-hero-map, .geo-hero-map-dot, #themeToggle, #menuToggle,
.drawer-overlay, .search-panel, .btn-consultar { display: none !important; }
/* show only the branded print header/footer */
.print-only { display: flex !important; }
/* full-width, no chrome offset */
main.geo-result { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
main.geo-result > .ruc-page-h1, main.geo-result > .rp { max-width: 100% !important; margin: 0 0 1rem !important; }
.ruc-page-h1 { font-size: 1.3rem !important; }
/* reveal ALL data tabs (print every panel, not just the active one) */
.rp-panels { display: block !important; }
.rp-panel { display: block !important; page-break-inside: avoid; border-top: 1px solid #e5e9f0; padding-top: 1rem; margin-top: 1rem; }
.rp-panel:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.rp, .rp-hero, .rp-profile { page-break-inside: avoid; }
.rp-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ==========================================================================
HERO — EXACT mockup match (no card, unified input shell, pipe sub-links,
navy button with orange left-triangle). Overrides the earlier hero styles.
========================================================================== */
.geo-hero { padding: 2.75rem 1.5rem 1.25rem; }
.geo-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.geo-hero .geo-sub {
font-size: 0.9rem;
max-width: 860px;
margin: 0 auto 1.5rem;
line-height: 1.5;
}
/* One bordered container holding the three segment chips + the search icon */
.ruc-input-shell {
display: flex;
align-items: center;
gap: 0.4rem;
max-width: 480px;
margin: 0 auto 0.7rem;
background: var(--card-bg);
border: 1.5px solid #c5cfdd;
border-radius: 10px;
padding: 0.4rem 0.45rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ruc-input-shell:focus-within { border-color: #8fa3c0; box-shadow: 0 0 0 3px rgba(37,99,235,0.10); }
body:not(.light-theme) .ruc-input-shell { border-color: rgba(255,255,255,0.18); }
/* Segment chips (override the old standalone .ruc-seg box styling) */
.ruc-input-shell .ruc-seg {
border: none;
background: #EDF1F6;
border-radius: 6px;
font-family: var(--mono);
font-weight: 600;
font-size: 1.15rem;
color: #14213D;
text-align: center;
padding: 0.35rem 0.25rem;
outline: none;
box-shadow: none;
}
body:not(.light-theme) .ruc-input-shell .ruc-seg { background: rgba(255,255,255,0.07); color: var(--text-main); }
.ruc-input-shell .ruc-seg:focus { box-shadow: none; border: none; }
.ruc-input-shell .ruc-seg-tipo { width: 2.9rem; letter-spacing: 1px; }
.ruc-input-shell .ruc-seg-body { flex: 1; letter-spacing: 2px; }
.ruc-input-shell .ruc-seg-check { width: 2.1rem; }
.ruc-search-btn {
margin-left: auto;
background: none;
border: none;
cursor: pointer;
color: #14213D;
display: flex;
align-items: center;
padding: 0 0.35rem;
}
body:not(.light-theme) .ruc-search-btn { color: var(--text-main); }
.ruc-search-btn .icon { width: 25px; height: 25px; }
/* Free-text shell (razón social / DNI mode) matched to the same frame */
.free-shell {
max-width: 680px;
margin: 0 auto 0.7rem;
border: 2px solid #c5cfdd;
border-radius: 13px;
background: var(--card-bg);
box-shadow: 0 7px 22px -10px rgba(16,35,63,.35);
}
.free-shell input {
background: transparent !important;
border: none !important;
padding: 1.15rem 2.5rem 1.15rem 2.9rem;
font-size: 1.02rem;
}
.free-shell input:focus { box-shadow: none !important; }
/* Sub-links: dark semibold with a thin pipe separator */
.search-sub-links {
display: flex;
justify-content: center;
align-items: center;
gap: 0.7rem;
font-size: 0.8rem;
margin: 0 auto 1rem;
}
.search-sub-links a { color: #24334f; font-weight: 600; text-decoration: none; }
.search-sub-links a:hover { color: var(--accent-blue); text-decoration: underline; }
.search-sub-links .sep { color: #b9c3d2; }
body:not(.light-theme) .search-sub-links a { color: var(--text-main); }
/* Navy button, orange left-pointing triangle AFTER the label */
.btn-consultar {
max-width: 680px;
margin: 0 auto;
border-radius: 10px;
padding: 0.95rem 1.15rem;
font-size: 0.92rem;
letter-spacing: 1.6px;
gap: 0.6rem;
}
.btn-consultar .tri {
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 9px solid var(--geo-orange);
display: inline-block;
}
/* Live-check + sample pills: small and centered under the button */
.geo-live-row {
justify-content: center;
gap: 1rem;
margin: 0.9rem auto 0;
max-width: 680px;
font-size: 0.82rem;
}
.geo-hero .sample-pills {
justify-content: center;
margin-top: 0.7rem;
font-size: 0.78rem;
}
.geo-hero .pill-btn { font-size: 0.74rem; padding: 0.28rem 0.6rem; }
/* history sidebar entries are anchors now (crawlable /ruc/ links) */
a.sidebar-history-item { display: block; text-decoration: none; }
a.sidebar-history-item:hover strong { color: var(--accent-blue); }
/* ==========================================================================
HEADER — exact mockup match: two-line wordmark, stat block sitting directly
beside it (not centred), with mini bar-chart + dashed trail + iso-cube.
========================================================================== */
.nav-container {
justify-content: flex-start;
gap: 1.6rem;
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
.logo { text-decoration: none; gap: 0; }
.logo .shield-badge { display: none; } /* mockup wordmark carries no flag mark */
.logo-title {
display: flex;
flex-direction: column;
line-height: 1.04;
font-weight: 800;
font-size: 1.18rem;
letter-spacing: -0.4px;
color: var(--header-text);
}
.logo-l1, .logo-l2 { display: block; }
.header-stat { gap: 0.55rem; align-items: center; }
.header-stat-text strong { font-size: 1.12rem; letter-spacing: -0.3px; }
.header-stat-text span { font-size: 0.68rem; letter-spacing: 0.1px; }
.header-stat-chart { width: 17px; height: 17px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.header-stat-deco {
width: 122px;
height: 34px;
flex-shrink: 0;
color: var(--header-text-muted);
}
/* toggle stays reachable at the far right of the bar */
.theme-btn { margin-left: auto; }
@media (max-width: 780px) {
.header-stat-deco { display: none; }
.nav-container { gap: 1rem; }
}
@media (max-width: 520px) {
.header-stat-text span { display: none; }
}
/* ==========================================================================
EXACT HEADER METRICS — measured against the mockup crop.
Container is narrower than the usual 1200px because the mockup's whole
layout is (~940px), which is what puts the wordmark at that left inset.
Applied site-wide via --container so the header stays aligned with the
content below it.
========================================================================== */
:root { --container: 1720px; }
/* header bar: 66px tall (was 77) */
.top-nav { padding: 0.9rem 0; }
.nav-container { padding-top: 0; padding-bottom: 0; }
/* nav bar: 47px tall (was 53) */
.tab-nav-link { padding: 0.72rem 1.05rem; }
/* type scale matched to the crop */
.logo-title { font-size: 1.32rem; }
.header-stat-text strong { font-size: 1.2rem; }
.header-stat-text span { font-size: 0.66rem; }
.tab-nav-link { font-size: 0.875rem; }
/* ==========================================================================
HEADER MENU — grouped dropdowns so all 19 pages are reachable while the
bar itself stays to 6 items.
========================================================================== */
/* The old `overflow-x: auto` created a clipping context that would cut the
dropdowns off. Wrap instead of scroll so they can overflow downward. */
.tab-nav-container { overflow: visible; flex-wrap: wrap; }
.tab-nav { position: relative; z-index: 90; }
.nav-group { position: relative; display: flex; }
/* Trigger is a