/* ===================================================================== Propy — Brand tokens & component layer Identidad oficial Variante 1: navy + red + white, Inter. Light mode + Dark mode (versión secundaria del manual: fondo navy). ===================================================================== */ :root { /* Brand (constantes en ambos modos) */ --propy-navy: #0B132B; --propy-red: #E31E24; --propy-red-hover: #C91A20; --propy-white: #FFFFFF; --propy-blue: #1E5CC8; /* Slate scale (constantes — útiles para refs absolutas) */ --propy-slate-900: #0F172A; --propy-slate-700: #334155; --propy-slate-500: #64748B; --propy-slate-400: #94A3B8; --propy-slate-300: #CBD5E1; --propy-slate-200: #E2E8F0; --propy-slate-100: #F1F5F9; --propy-slate-50: #F8FAFC; /* Semantic (constantes; backgrounds suben opacidad en dark) */ --propy-success: #10B981; --propy-success-bg: rgba(16, 185, 129, 0.10); --propy-warning: #F59E0B; --propy-warning-bg: rgba(245, 158, 11, 0.10); --propy-error: #EF4444; --propy-error-bg: rgba(239, 68, 68, 0.10); --propy-info: #1E5CC8; --propy-info-bg: rgba(30, 92, 200, 0.10); /* === LIGHT MODE (default) === */ /* Surfaces */ --propy-bg: #F8FAFC; --propy-surface: #FFFFFF; --propy-surface-soft: #F1F5F9; --propy-border: #E2E8F0; --propy-border-strong: #CBD5E1; /* Text — secondary subido a slate-600 (7.4:1) y muted a slate-500 (4.6:1) para pasar WCAG AA en todos los pesos. */ --propy-text-primary: #0B132B; --propy-text-secondary: #475569; --propy-text-muted: #64748B; /* Accent / link */ --propy-link: #1E5CC8; /* Texto semántico (sobre badge-bg respectivo). En light usamos los tonos dark-700 que dan ~5:1 sobre el bg suave. */ --propy-success-fg: #047857; --propy-warning-fg: #B45309; --propy-error-fg: #B91C1C; --propy-info-fg: #1E5CC8; /* Logo isotype (pin azul navy, casa+flecha blancas) */ --propy-logo-pin: #0B132B; --propy-logo-fg: #FFFFFF; --propy-logo-window: #0B132B; /* Color scheme hint para form controls + scrollbars nativos */ color-scheme: light; } /* === DARK MODE — fondo navy, surfaces más oscuras, texto blanco. === Activar con ``. */ [data-theme="dark"] { /* Surfaces — escalera de navy */ --propy-bg: #0B132B; /* fondo principal = navy oficial */ --propy-surface: #131A33; /* cards (un nivel arriba) */ --propy-surface-soft: #1B2347; /* paneles secundarios (más arriba que bg para que se distingan en navy) */ --propy-border: #1F2A4A; --propy-border-strong: #2A375E; /* Text — secondary slate-300 (~11:1) y muted slate-400 (~5.5:1). En dark queremos que los "secundarios" sigan siendo bien legibles. */ --propy-text-primary: #F8FAFC; --propy-text-secondary: #CBD5E1; --propy-text-muted: #94A3B8; /* Link más claro para contraste sobre navy */ --propy-link: #7CA8F0; /* Backgrounds semánticos con más opacidad para que se lean en dark */ --propy-success-bg: rgba(16, 185, 129, 0.16); --propy-warning-bg: rgba(245, 158, 11, 0.16); --propy-error-bg: rgba(239, 68, 68, 0.16); --propy-info-bg: rgba(124, 168, 240, 0.18); /* Texto semántico — versiones claras (400/300) para contraste sobre dark. */ --propy-success-fg: #34D399; --propy-warning-fg: #FBBF24; --propy-error-fg: #F87171; --propy-info-fg: #93B7F4; /* Logo isotype invertido: pin blanco, casa+flecha navy */ --propy-logo-pin: #F8FAFC; --propy-logo-fg: #0B132B; --propy-logo-window: #F8FAFC; color-scheme: dark; } /* Radii + shadows (mismos en ambos modos, salvo intensidad de shadow) */ :root { --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(11, 19, 43, 0.06); --shadow-md: 0 8px 24px rgba(11, 19, 43, 0.08); --shadow-lg: 0 18px 45px rgba(11, 19, 43, 0.12); --shadow-red: 0 8px 20px rgba(227, 30, 36, 0.18); } [data-theme="dark"] { /* Sombras más densas en dark para diferenciar surfaces sin perder profundidad */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.45); --shadow-red: 0 8px 20px rgba(227, 30, 36, 0.30); } /* === Base layer ===================================================== */ html, body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--propy-bg); color: var(--propy-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--propy-link); text-decoration: none; } a:hover { color: var(--propy-link); text-decoration: underline; } /* Scrollbar (adapta a light/dark via tokens) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--propy-bg); } ::-webkit-scrollbar-thumb { background: var(--propy-border-strong); border-radius: 999px; border: 2px solid var(--propy-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--propy-text-secondary); } /* === Botones ======================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font-weight: 600; font-size: 14px; padding: 11px 18px; line-height: 1; transition: all 150ms ease; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--propy-red); color: var(--propy-white); box-shadow: var(--shadow-red); } .btn-primary:hover { background: var(--propy-red-hover); color: var(--propy-white); } .btn-secondary { background: var(--propy-surface); color: var(--propy-text-primary); border-color: var(--propy-border-strong); } .btn-secondary:hover { border-color: var(--propy-text-primary); background: var(--propy-surface-soft); color: var(--propy-text-primary); } .btn-tertiary { background: transparent; color: var(--propy-text-primary); padding: 8px 12px; } .btn-tertiary:hover { color: var(--propy-red); background: var(--propy-surface-soft); } /* En dark, btn-navy se invierte: surface elevada en vez de navy puro (porque el bg ya es navy). */ .btn-navy { background: var(--propy-navy); color: var(--propy-white); } .btn-navy:hover { background: #1A2244; color: var(--propy-white); } [data-theme="dark"] .btn-navy { background: var(--propy-surface); border: 1px solid var(--propy-border-strong); } [data-theme="dark"] .btn-navy:hover { background: var(--propy-surface-soft); } .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; } .btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 16px; } /* === Inputs ========================================================= */ .input, input[type="text"]:not(.no-propy), input[type="email"]:not(.no-propy), input[type="password"]:not(.no-propy), input[type="number"]:not(.no-propy), input[type="search"]:not(.no-propy), input[type="url"]:not(.no-propy), select:not(.no-propy), textarea:not(.no-propy) { background: var(--propy-surface); border: 1px solid var(--propy-border-strong); border-radius: 14px; padding: 11px 14px; color: var(--propy-text-primary); font-size: 14px; width: 100%; transition: border 120ms ease, box-shadow 120ms ease; } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--propy-text-secondary); } .input:focus, input:not(.no-propy):focus, select:not(.no-propy):focus, textarea:not(.no-propy):focus { outline: none; border-color: var(--propy-blue); box-shadow: 0 0 0 4px rgba(30, 92, 200, 0.12); } /* === Cards ========================================================== */ .card { background: var(--propy-surface); border: 1px solid var(--propy-border); border-radius: 20px; box-shadow: var(--shadow-sm); } .card-hover { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--propy-border-strong); } /* === Chips / filtros ================================================ */ .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--propy-border-strong); background: var(--propy-surface); color: var(--propy-text-primary); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 120ms ease; } .chip:hover { background: var(--propy-surface-soft); border-color: var(--propy-text-secondary); } .chip.active, .chip-active { background: var(--propy-navy); color: var(--propy-white); border-color: var(--propy-navy); } /* En dark, chip activo usa rojo (el navy se confunde con el bg) */ [data-theme="dark"] .chip.active, [data-theme="dark"] .chip-active { background: var(--propy-red); border-color: var(--propy-red); } /* === Badges ========================================================= */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .badge-sale, .badge-red { background: rgba(227, 30, 36, 0.10); color: var(--propy-red); border-color: rgba(227, 30, 36, 0.18); } [data-theme="dark"] .badge-sale, [data-theme="dark"] .badge-red { background: rgba(227, 30, 36, 0.20); color: #FCA5A5; border-color: rgba(227, 30, 36, 0.40); } .badge-opportunity, .badge-success { background: var(--propy-success-bg); color: var(--propy-success-fg); border-color: rgba(16, 185, 129, 0.22); } .badge-review, .badge-warning { background: var(--propy-warning-bg); color: var(--propy-warning-fg); border-color: rgba(245, 158, 11, 0.22); } .badge-risk, .badge-error { background: var(--propy-error-bg); color: var(--propy-error-fg); border-color: rgba(239, 68, 68, 0.22); } .badge-info { background: var(--propy-info-bg); color: var(--propy-info-fg); border-color: rgba(30, 92, 200, 0.22); } .badge-navy { background: var(--propy-navy); color: var(--propy-white); border-color: var(--propy-navy); } .badge-soft { background: var(--propy-surface-soft); color: var(--propy-text-primary); border-color: var(--propy-border); } /* === Alerts (banners de error / warning / info, theme-aware) ======== */ .alert { display: block; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; border: 1px solid transparent; } .alert-error { background: var(--propy-error-bg); color: var(--propy-error-fg); border-color: rgba(239, 68, 68, 0.30); } .alert-warning { background: var(--propy-warning-bg); color: var(--propy-warning-fg); border-color: rgba(245, 158, 11, 0.30); } .alert-info { background: var(--propy-info-bg); color: var(--propy-info-fg); border-color: rgba(30, 92, 200, 0.30); } .alert strong { color: inherit; } .alert code { background: var(--propy-surface); border: 1px solid var(--propy-border); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--propy-text-primary); } /* === Header / Navbar ================================================ */ .propy-header { background: var(--propy-surface); border-bottom: 1px solid var(--propy-border); position: sticky; top: 0; /* Leaflet controls usan z-index: 1000 (panes 200-700, controls 1000). El header debe quedar arriba para que los dropdowns no queden tapados. */ z-index: 1100; backdrop-filter: saturate(180%) blur(8px); } /* Logo dark mode: el isotipo viene en navy + texto navy; en fondo dark se confunde. invert(1) hace navy -> light cyan/blue claro, hue-rotate ajusta el tono al blanco/claro adecuado. El rojo del techo se preserva. */ .propy-logo-img { transition: filter 200ms ease; } [data-theme="dark"] .propy-logo-img { filter: invert(1) hue-rotate(180deg) brightness(1.12); } .propy-nav-link { color: var(--propy-text-primary); padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: all 120ms ease; } .propy-nav-link:hover { background: var(--propy-surface-soft); color: var(--propy-text-primary); } .propy-nav-link.nav-active, .nav-active { background: rgba(227, 30, 36, 0.10) !important; color: var(--propy-red) !important; } [data-theme="dark"] .propy-nav-link.nav-active, [data-theme="dark"] .nav-active { background: rgba(227, 30, 36, 0.18) !important; } /* Dropdown nav (Explorar / Mi cuenta / Sistema / User) */ .propy-nav-dropdown { position: relative; display: inline-block; } .propy-nav-trigger { display: inline-flex; align-items: center; cursor: pointer; background: transparent; border: none; font-family: inherit; } .propy-nav-trigger.is-open { background: var(--propy-surface-soft); } .propy-nav-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: var(--propy-surface); border: 1px solid var(--propy-border-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); padding: 6px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease; /* Por encima de Leaflet panes (200-700) y controls (1000). */ z-index: 1200; } [data-theme="dark"] .propy-nav-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); } .propy-nav-menu-right { left: auto; right: 0; } .propy-nav-dropdown.is-open .propy-nav-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .propy-nav-item { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--propy-text-primary); transition: background 120ms ease; } .propy-nav-item:hover { background: var(--propy-surface-soft); } .propy-nav-item-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; } .propy-nav-item-desc { display: block; font-size: 11px; color: var(--propy-text-muted); margin-top: 2px; line-height: 1.3; } /* Active state: si la URL actual cae dentro del grupo, marcar el trigger */ .propy-nav-trigger.has-active { background: rgba(227, 30, 36, 0.10); color: var(--propy-red); } [data-theme="dark"] .propy-nav-trigger.has-active { background: rgba(227, 30, 36, 0.18); } /* === Tipografía utilidades ========================================== */ /* Color literal (no cambia con tema) */ .text-navy { color: var(--propy-navy); } .text-red { color: var(--propy-red); } .text-blue { color: var(--propy-blue); } /* Color theme-aware (ideal para texto sobre surfaces que cambian con tema): - light: navy - dark: white */ .text-fg { color: var(--propy-text-primary); } .text-secondary { color: var(--propy-text-secondary); } .text-muted { color: var(--propy-text-muted); } .bg-navy { background: var(--propy-navy); color: var(--propy-white); } .bg-soft { background: var(--propy-bg); } .bg-surface { background: var(--propy-surface); } .bg-surface-soft { background: var(--propy-surface-soft); } .border-propy { border-color: var(--propy-border); } .border-propy-strong { border-color: var(--propy-border-strong); } /* === Loading skeleton (light) ====================================== */ @keyframes propy-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--propy-surface-soft) 0%, var(--propy-border) 50%, var(--propy-surface-soft) 100% ); background-size: 200% 100%; animation: propy-shimmer 1.6s linear infinite; border-radius: 8px; } /* === Hero (dashboard) =============================================== */ /* En dark mode el hero gana borde + glow rojo para destacar sobre el bg navy. */ [data-theme="dark"] .propy-hero { border: 1px solid var(--propy-border); box-shadow: 0 0 0 1px rgba(227, 30, 36, 0.10), var(--shadow-lg); } /* === Evaluación Propy module ======================================= */ .evaluation-module { background: var(--propy-surface-soft); border: 1px solid var(--propy-border); border-radius: 20px; padding: 24px; } .evaluation-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--propy-navy); color: var(--propy-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* === Tabla zebra (escritorio) ====================================== */ @media (min-width: 769px) { .table-zebra tbody tr:nth-child(even) { background: var(--propy-surface-soft); } .table-zebra tbody tr:hover { background: rgba(227, 30, 36, 0.06); } .table-sticky thead { position: sticky; top: 64px; z-index: 10; background: var(--propy-surface); box-shadow: 0 1px 0 var(--propy-border); } } /* === Tablas como cards en mobile =================================== */ @media (max-width: 768px) { .table-as-cards thead { display: none; } .table-as-cards tr { display: block; background: var(--propy-surface); border: 1px solid var(--propy-border); border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .table-as-cards td { display: flex; justify-content: space-between; align-items: center; padding: 5px 0 !important; border: none !important; text-align: right !important; max-width: none !important; } .table-as-cards td::before { content: attr(data-label); color: var(--propy-text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } .table-as-cards td:first-child::before { display: none; } .table-as-cards td:first-child { display: block; text-align: left !important; font-weight: 600; margin-bottom: 8px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; color: var(--propy-navy); } } /* === Mobile UX rules ================================================= */ /* Reglas globales para que la app se sienta nativa en celular sin tener que retocar template por template. */ @media (max-width: 640px) { /* Touch targets minimos: WCAG/Apple recomienda 44x44 px. Aplicamos a todos los botones e inputs no-flow para que en mobile se puedan tappear sin pifiar. */ button:not(.peer):not(.no-touch-min), a.btn, a.propy-btn-primary, a.propy-btn-secondary, .popup-btn-primary, .popup-btn-secondary, .popup-btn-ghost, input[type="submit"], input[type="button"] { min-height: 40px; } /* Inputs/selects: 16px font-size evita el zoom auto de iOS Safari al focus. La mayoria de templates usa text-xs (12px) que dispara el zoom. Solo afectamos inputs de form, no badges/labels. */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], select, textarea { font-size: 16px; } /* Heroes con padding mas chico en mobile para no comerse la pantalla. Aplicamos solo a heroes legacy (.opp-hero, h1 con margin grande). */ h1 { font-size: 1.5rem; line-height: 2rem; } h2 { font-size: 1.25rem; line-height: 1.75rem; } /* Padding lateral mas chico en main para aprovechar viewport. */ main { padding-left: 12px; padding-right: 12px; } /* Cards: bordes y padding mas chicos en mobile */ .card, .opp-card { border-radius: 12px; } /* Tablas que no se convirtieron a cards: forzar overflow scroll */ table:not(.table-as-cards) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* iOS safe area: bottom drawer respeta home indicator */ @supports (padding: env(safe-area-inset-bottom)) { .sidebar { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } .mobile-fab-bar { bottom: calc(16px + env(safe-area-inset-bottom)); } } /* === Escala tipografica oficial Propy =============================== */ /* 4 niveles + helper para numericos (precios USD/m²). Uso recomendado: - .propy-display: hero stats / KPIs grandes (dashboard, /zonas/{id}) - .propy-heading: titulos de seccion en cards/paginas - .propy-body: parrafos y texto general - .propy-caption: labels chicos, metadata, footnotes, table headers - .propy-numeric: monospace tabular para precios y porcentajes */ .propy-display { font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ font-weight: 800; letter-spacing: -0.025em; } .propy-heading { font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ font-weight: 700; letter-spacing: -0.015em; } .propy-body { font-size: 0.875rem; /* 14px */ line-height: 1.5rem; /* 24px */ font-weight: 400; } .propy-caption { font-size: 0.75rem; /* 12px */ line-height: 1.25rem; /* 20px */ font-weight: 500; color: var(--propy-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .propy-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* Mobile: bajar display un poco para no romper layout */ @media (max-width: 640px) { .propy-display { font-size: 1.5rem; line-height: 2rem; } /* 24/32 */ .propy-heading { font-size: 1.125rem; line-height: 1.5rem; } /* 18/24 */ } /* === Line clamp helpers ============================================ */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* === Logo isotype (theme-aware) ===================================== */ /* El SVG inline usa estas clases en sus paths para que el pin se invierta en dark (pin blanco con casa navy) y siga legible sobre el bg navy. */ .propy-isotype .pin { fill: var(--propy-logo-pin); } .propy-isotype .pin-fg { fill: var(--propy-logo-fg); } .propy-isotype .pin-window { fill: var(--propy-logo-window); } /* Ventanas accent: top row del logo nuevo es rojo brand en ambos modos (constante de marca, no theme-dependent) */ .propy-isotype .pin-window-accent { fill: var(--propy-red); } /* === Compatibilidad: tailwind dark-mode legacy mappings ============ */ /* Las 17 templates del repo usan clases tipo bg-slate-900 / text-slate-400 del tema oscuro previo. Las mapeamos a tokens Propy (que cambian con el tema), así templates no migrados respetan el modo claro/oscuro. Mapping con jerarquía visible: - bg-slate-950 → bg (body level, ej totp_challenge full-page) - bg-slate-900 → surface (cards, sidebars — el uso mas comun) - bg-slate-800 → surface-soft (inputs, paneles secundarios) - bg-slate-700 → border-strong (controles activos, hover) En dark mode los tokens bg < surface < surface-soft < border-strong tienen shades distintas para mantener jerarquía. En light mode también. */ .bg-slate-950 { background-color: var(--propy-bg) !important; } .bg-slate-900 { background-color: var(--propy-surface) !important; } .bg-slate-800 { background-color: var(--propy-surface-soft) !important; } .bg-slate-700 { background-color: var(--propy-border-strong) !important; } /* Variants con opacidad reducida (rgba en cards) — mapean al mismo bg. Cobertura completa de las opacidades usadas en templates: 20-95. En light mode esto evita que un /80 quede medio transparente sobre fondo blanco mostrando el bg del padre. */ .bg-slate-900\/20, .bg-slate-900\/30, .bg-slate-900\/40, .bg-slate-900\/50, .bg-slate-900\/60, .bg-slate-900\/70, .bg-slate-900\/80, .bg-slate-900\/90, .bg-slate-900\/95 { background-color: var(--propy-surface) !important; } .bg-slate-800\/10, .bg-slate-800\/20, .bg-slate-800\/30, .bg-slate-800\/40, .bg-slate-800\/50, .bg-slate-800\/60, .bg-slate-800\/70, .bg-slate-800\/80 { background-color: var(--propy-surface-soft) !important; } .bg-slate-700\/20, .bg-slate-700\/30, .bg-slate-700\/40, .bg-slate-700\/50 { background-color: var(--propy-border) !important; } /* Borders con opacidad legacy */ .border-slate-800\/20, .border-slate-800\/30, .border-slate-800\/40, .border-slate-800\/50, .border-slate-800\/60 { border-color: var(--propy-border) !important; } .border-slate-700\/30, .border-slate-700\/40, .border-slate-700\/50, .border-slate-700\/60 { border-color: var(--propy-border-strong) !important; } /* Hover variants con opacidad */ .hover\:bg-slate-900\/40:hover, .hover\:bg-slate-900\/60:hover, .hover\:bg-slate-900\/80:hover { background-color: var(--propy-surface-soft) !important; } .hover\:bg-slate-800\/30:hover, .hover\:bg-slate-800\/40:hover, .hover\:bg-slate-800\/50:hover, .hover\:bg-slate-800\/60:hover { background-color: var(--propy-border) !important; } .text-slate-100, .text-slate-50, .text-white\/90 { color: var(--propy-text-primary) !important; } .text-slate-200 { color: var(--propy-text-primary) !important; } .text-slate-300 { color: var(--propy-text-secondary) !important; } .text-slate-400 { color: var(--propy-text-secondary) !important; } .text-slate-500 { color: var(--propy-text-muted) !important; } .text-slate-600 { color: var(--propy-text-muted) !important; } .text-slate-700 { color: var(--propy-text-muted) !important; } .border-slate-950, .border-slate-900, .border-slate-800 { border-color: var(--propy-border) !important; } .border-slate-700 { border-color: var(--propy-border-strong) !important; } .border-slate-600 { border-color: var(--propy-border-strong) !important; } .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--propy-border) !important; } .divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--propy-border) !important; } /* Hover legacy: sube un nivel desde el bg base del elemento */ .hover\:bg-slate-900:hover { background-color: var(--propy-surface-soft) !important; } .hover\:bg-slate-800:hover { background-color: var(--propy-border) !important; } .hover\:bg-slate-700:hover { background-color: var(--propy-border-strong) !important; } .hover\:text-white:hover { color: var(--propy-text-primary) !important; } .hover\:border-slate-700:hover, .hover\:border-slate-600:hover { border-color: var(--propy-border-strong) !important; } /* === Tailwind gradients legacy ====================================== */ /* Templates con `bg-gradient-to-br from-slate-900 to-brand-900/40` quedan como gradient navy → red-tinted, que en light mode se ve como un panel oscuro contrastando con el bg claro. Eso es OK como hero/destacado. Necesitamos forzar el gradiente con colores explicitos porque nuestros mappings de bg-slate-900 → propy-surface (blanco en light) lo romperian. Las clases gradient-from/to de Tailwind setean CSS vars que NO podemos sobreescribir desde .from-slate-900 directamente sin pelearle al JIT. Solucion: target la combinacion `.bg-gradient-to-br.from-slate-900` y forzar background-image directo. */ .bg-gradient-to-br.from-slate-900 { background-image: linear-gradient(135deg, #0F172A 0%, #1A2244 100%) !important; } .bg-gradient-to-br.from-slate-800 { background-image: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important; } .bg-gradient-to-t.from-slate-950 { background-image: linear-gradient(to top, #020617 0%, rgba(2, 6, 23, 0.85) 50%, transparent 100%) !important; } /* Cualquier texto adentro de un gradient navy queda forzado claro. Cobertura completa de la escala slate (50-700) + brand-400/300 que se usan como text inside hero gradients. Sin esto, en light mode los text-slate-500/600 internos eran texto oscuro sobre fondo navy oscuro y quedaban ilegibles. */ .bg-gradient-to-br.from-slate-900 .text-slate-50, .bg-gradient-to-br.from-slate-900 .text-slate-100, .bg-gradient-to-br.from-slate-900 .text-slate-200, .bg-gradient-to-br.from-slate-900 .text-slate-300, .bg-gradient-to-br.from-slate-900 .text-slate-400, .bg-gradient-to-br.from-slate-900 .text-brand-300, .bg-gradient-to-br.from-slate-900 .text-brand-400, .bg-gradient-to-br.from-slate-800 .text-slate-50, .bg-gradient-to-br.from-slate-800 .text-slate-100, .bg-gradient-to-br.from-slate-800 .text-slate-200, .bg-gradient-to-br.from-slate-800 .text-slate-300, .bg-gradient-to-br.from-slate-800 .text-slate-400 { color: rgba(248, 250, 252, 0.95) !important; } .bg-gradient-to-br.from-slate-900 .text-slate-500, .bg-gradient-to-br.from-slate-900 .text-slate-600, .bg-gradient-to-br.from-slate-900 .text-slate-700, .bg-gradient-to-br.from-slate-800 .text-slate-500, .bg-gradient-to-br.from-slate-800 .text-slate-600 { color: rgba(203, 213, 225, 0.85) !important; /* slate-300 visible sobre navy */ } /* Score letter inside gradient hero */ .bg-gradient-to-br.from-slate-900 .text-emerald-400, .bg-gradient-to-br.from-slate-900 .text-teal-400, .bg-gradient-to-br.from-slate-900 .text-lime-400, .bg-gradient-to-br.from-slate-900 .text-amber-400, .bg-gradient-to-br.from-slate-900 .text-orange-400, .bg-gradient-to-br.from-slate-900 .text-rose-400 { /* Mantener color semantico — son tonos brillantes diseñados pa dark */ /* No override, ya son legibles sobre navy. */ } .bg-gradient-to-br.from-slate-900 h1, .bg-gradient-to-br.from-slate-900 h2, .bg-gradient-to-br.from-slate-900 h3, .bg-gradient-to-br.from-slate-800 h1, .bg-gradient-to-br.from-slate-800 h2 { color: #FFFFFF !important; } /* === Page transitions ============================================== */ /* Cross-document view transitions (Chrome/Edge 126+, Safari TP). En browsers viejos no se renderiza nada raro, simplemente sin animacion. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: propy-vt-fade-out 80ms ease-out forwards; } ::view-transition-new(root) { animation: propy-vt-fade-in 200ms ease-in forwards; } @keyframes propy-vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes propy-vt-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Fallback: fade-in del main al cargar (browsers sin View Transitions) */ main { animation: propy-fade-in 240ms ease-out; } @keyframes propy-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Respetar prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { main { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* === Leaflet popup helpers (theme-aware) ============================ */ /* Popups del mapa usan estas clases en lugar de styles inline. Asi cambian con el theme: en light mode el popup se ve light (no oscuro contra el fondo claro del basemap OSM) y en dark mode oscuro acorde al navy bg. */ .popup-card { font-family: 'Inter', sans-serif; color: var(--propy-text-primary); min-width: 220px; } .popup-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--propy-text-primary); } .popup-coords { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--propy-text-muted); margin-bottom: 10px; } .popup-stack { display: flex; flex-direction: column; gap: 6px; } .popup-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .popup-row-price { display: grid; grid-template-columns: 1fr 80px; gap: 6px; } /* Botones del popup del mapa. Antes el primary era rojo solido + texto blanco. En el popup oscuro se veia "rojo sobre rojo". Ahora primary es navy (color de marca) con texto white -> contraste alto. Secondary se mantiene info (azul). */ .popup-btn-primary, a.popup-btn-primary { background: var(--propy-navy); color: #ffffff !important; padding: 8px 12px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: opacity 120ms ease, transform 120ms ease; } .popup-btn-primary:hover { opacity: 0.92; transform: translateY(-1px); color: #ffffff !important; } [data-theme="dark"] .popup-btn-primary, [data-theme="dark"] a.popup-btn-primary { /* En dark mode, navy se confunde con el bg. Usamos el rojo de marca. */ background: var(--propy-red); color: #ffffff !important; } .popup-btn-secondary, a.popup-btn-secondary { background: transparent; color: var(--propy-info-fg); border: 1px solid var(--propy-info); padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 120ms ease; } .popup-btn-secondary:hover { background: var(--propy-info-bg); color: var(--propy-info-fg); } .popup-btn-ghost, button.popup-btn-ghost { background: var(--propy-surface-soft); color: var(--propy-text-secondary); border: 1px solid var(--propy-border-strong); padding: 6px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; transition: background-color 120ms ease; } .popup-btn-ghost:hover { background: var(--propy-border); color: var(--propy-text-primary); } .popup-input, .popup-card input, .popup-card select, .popup-card textarea { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--propy-border-strong); font-size: 12px; background: var(--propy-surface); color: var(--propy-text-primary); font-family: inherit; } .popup-card textarea { resize: vertical; } .popup-card input::placeholder, .popup-card textarea::placeholder { color: var(--propy-text-muted); opacity: 0.7; } .popup-status { font-size: 11px; color: var(--propy-text-muted); min-height: 14px; } /* Stat tiles dentro de popups (rect aggregates etc.) */ .popup-stat-info { background: var(--propy-info-bg); border: 1px solid var(--propy-info); padding: 6px; border-radius: 6px; color: var(--propy-info-fg); } .popup-stat-muted { background: var(--propy-surface-soft); border: 1px solid var(--propy-border-strong); padding: 6px; border-radius: 6px; color: var(--propy-text-secondary); } .popup-stat-label { font-size: 10px; color: var(--propy-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .popup-stat-info .popup-stat-label { color: var(--propy-info-fg); opacity: 0.85; } .popup-stat-value { font-weight: 700; font-size: 18px; color: inherit; } .popup-stat-value-sm { font-weight: 700; font-size: 14px; color: inherit; } .popup-stat-aux { font-size: 11px; color: var(--propy-text-muted); margin-bottom: 8px; } /* Leaflet popup container theme-aware: en dark mode el fondo blanco default destruye la jerarquia visual del navy. Forzamos surface. */ .leaflet-popup-content-wrapper { background: var(--propy-surface) !important; color: var(--propy-text-primary) !important; border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; } .leaflet-popup-tip { background: var(--propy-surface) !important; } .leaflet-popup-close-button { color: var(--propy-text-muted) !important; } .leaflet-popup-close-button:hover { color: var(--propy-text-primary) !important; } /* === Form controls legacy ============================================= */ /* Inputs/selects que en dark eran bg-slate-800 con border-slate-700. Ya los mapeamos arriba al surface-soft, pero el text-color necesita asegurarse de ser legible. */ input.bg-slate-800, select.bg-slate-800, textarea.bg-slate-800, input.bg-slate-900, select.bg-slate-900, textarea.bg-slate-900 { color: var(--propy-text-primary) !important; } input.bg-slate-800::placeholder, select.bg-slate-800::placeholder, textarea.bg-slate-800::placeholder, input.bg-slate-900::placeholder { color: var(--propy-text-muted) !important; opacity: 0.7; } /* Brand color legacy → red Propy */ .text-brand-500, .text-brand-600 { color: var(--propy-red) !important; } .bg-brand-500, .bg-brand-600 { background-color: var(--propy-red) !important; color: var(--propy-white) !important; } .border-brand-500 { border-color: var(--propy-red) !important; } .hover\:text-brand-500:hover { color: var(--propy-red) !important; } .hover\:border-brand-500:hover { border-color: var(--propy-red) !important; } /* Teal legacy → red */ .bg-teal-500, .bg-teal-600 { background-color: var(--propy-red) !important; color: var(--propy-white) !important; } .text-teal-400, .text-teal-500 { color: var(--propy-red) !important; }