/* ============================================================ TURIVEX · Design System v7 (identidad visual global) Estética alineada 1:1 con la landing de propietarios: Satoshi · paleta neutra #0B0B0B/#FFFFFF · acento dorado #C9A16B · botones pill · sombras suaves · modo oscuro #0B0B0B. Reescribe SOLO la apariencia usando variables + reglas globales. No cambia estructura, componentes, lógica ni JavaScript. Debe cargarse de ÚLTIMO en el de cada página. ============================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap'); :root{ /* --- Paleta (remapea la marca anterior) --- */ --teal:#0B0B0B; --teal-2:#1A1A1A; --teal2:#1A1A1A; --teal-soft:#F5F5F5; /* Dorado landing (acento cálido de la marca) */ --gold:#C9A16B; --gold-2:#8A6A43; --gold-soft:#F5EDE1; --ink:#0B0B0B; --bg:#FFFFFF; --muted:#6B6B6B; --line:#EAEAEA; --danger:#DC2626; /* Tipografía */ --font:'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; /* Tokens del sistema */ --ds-surface:#F8F8F8; --ds-radius-sm:12px; --ds-radius:16px; --ds-radius-lg:24px; --ds-shadow-sm:0 1px 2px rgba(11,11,11,.05); --ds-shadow:0 1px 3px rgba(11,11,11,.06), 0 10px 30px rgba(11,11,11,.05); --ds-shadow-lg:0 20px 60px -20px rgba(11,11,11,.18); --ds-grad:linear-gradient(100deg,#C9A16B 0%,#E8C99B 50%,#8A6A43 100%); } /* --- Tipografía global --- */ body{ font-family:var(--font) !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-.01em; } h1,h2,h3,h4,h5,button,input,select,textarea,.btn,.logo{ font-family:var(--font) !important; } h1,h2,h3{ letter-spacing:-.022em; } h1{ font-weight:900; } h2,h3{ font-weight:700; } /* --- Selección de texto: dorado landing --- */ ::selection{ background:#C9A16B; color:#0B0B0B; } ::-moz-selection{ background:#C9A16B; color:#0B0B0B; } /* --- Botones: pill, negros, con lift al hover (como la landing) --- */ .btn{ border-radius:999px; padding:12px 22px; font-weight:700; box-shadow:none; transition:background .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; } .btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(.5px); } .btn.sm{ padding:8px 16px; } .nav-login{ border-radius:999px; padding:10px 18px; font-weight:700; } .nav-fav{ border-radius:999px; } .search-btn{ border-radius:999px !important; } .search-btn:hover{ box-shadow:0 12px 30px -12px rgba(201,161,107,.55); } /* --- Inputs: bordes claros, foco dorado --- */ input,select,textarea,.field input,.field select,.field textarea{ border-radius:var(--ds-radius-sm); } input::placeholder,textarea::placeholder{ color:var(--muted); opacity:1; } input:focus,select:focus,textarea:focus{ border-color:#C9A16B !important; box-shadow:0 0 0 3px rgba(201,161,107,.18) !important; } /* --- Cards: blancas, borde sutil, sombra ligera, radios landing --- */ .card{ border-radius:var(--ds-radius); box-shadow:var(--ds-shadow-sm); } .card-media{ border-radius:18px !important; } /* Lift solo en las tarjetas de propiedades del sitio público */ .grid .card{ transition:transform .35s cubic-bezier(.2,.8,.2,1); } .grid .card:hover{ transform:translateY(-4px); } /* --- Tablas --- */ th{ background:transparent !important; color:var(--muted); font-weight:600; letter-spacing:.02em; } th,td{ padding:14px 16px; } /* ==================== SITIO PÚBLICO (index.php) ==================== */ /* Hero: negro puro con brillo dorado superior (idéntico a la landing) */ .hero{ background:#0B0B0B !important; } .hero::before{ background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,161,107,.16), transparent 60%) !important; } .hero h1 .g{ background:var(--ds-grad) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } .trust .ti i{ color:#C9A16B !important; } /* Eyebrow dorado sobre títulos de sección (firma visual de la landing) */ .section .wrap > h2::before, .section > .wrap h2:first-child::before{ content:""; display:block; width:26px; height:2px; background:#C9A16B; margin-bottom:12px; } /* Search bar y chips */ .search{ border-radius:22px; box-shadow:var(--ds-shadow-lg); } .chip{ font-weight:600; } .chip.active{ background:#0B0B0B; border-color:#0B0B0B; } /* Cómo funciona + footer en neutro landing */ .how{ background:#F5F5F5 !important; } .how .step p{ color:#6B6B6B !important; } .step .n{ border-radius:50% !important; background:#0B0B0B !important; } footer{ background:#0B0B0B !important; } .badge.new{ color:#8A6A43 !important; } /* ==================== ADMIN (panel) ==================== */ .side{ background:#0B0B0B; } .side .dot{ background:#C9A16B; } /* Fix: item activo era teal→negro (invisible sobre sidebar negro) */ .side a.nav.on{ background:rgba(255,255,255,.12) !important; color:#fff !important; box-shadow:inset 3px 0 0 #C9A16B; } .side a.nav:hover{ background:rgba(255,255,255,.08); } /* Enlace CRM del sidebar (traía fondo teal inline) */ .side a.nav[style*="15,182,166"]{ background:rgba(201,161,107,.18) !important; color:#C9A16B !important; } .stp.on{ background:#0B0B0B !important; } .stp.done{ color:#8A6A43 !important; } .pill.published,.pill.approved{ background:#F1F1F1; color:#0B0B0B; } /* Flash/avisos: de teal a dorado suave */ .flash{ background:rgba(201,161,107,.16) !important; color:#8A6A43 !important; } /* --- Login admin (pantalla de acceso): teal → dorado --- */ .ripple .cell{ border-right-color:rgba(201,161,107,.10) !important; border-bottom-color:rgba(201,161,107,.10) !important; } .ripple .cell:hover{ background:rgba(201,161,107,.16) !important; } @keyframes rip{ 0%{background:rgba(201,161,107,.45)} 100%{background:transparent} } .dia span{ background:linear-gradient(90deg,#0B0B0B 0%,#4A4A4A 28%,#C9A16B 55%,#0B0B0B 85%) !important; background-size:280% 100% !important; -webkit-background-clip:text !important; background-clip:text !important; } .beam-card::before{ background:conic-gradient(from 0deg, rgba(201,161,107,0) 0deg, rgba(201,161,107,0) 250deg, #C9A16B 298deg, #E8C99B 330deg, rgba(201,161,107,0) 360deg) !important; } /* ==================== CRM (tema claro) ==================== */ :root{ --bg2:#F8F8F8; --surface:#FFFFFF; --surface2:#F8F8F8; --surface3:#F0F0F0; --border:#EAEAEA; --border2:#E2E2E2; --text:#0B0B0B; --text2:#6B6B6B; --text3:#9AA0A0; --accent:#0B0B0B; --accent-dim:#F3F3F3; --accent-border:#EAEAEA; --accent-text:#0B0B0B; --green:#16A34A; --green-dim:rgba(22,163,74,.10); --green2:#15803D; } .nav-item.active{ background:#F1F1F1 !important; color:#0B0B0B !important; border-left-color:#C9A16B !important; } .btn-primary, .sb-btn-green{ background:#0B0B0B !important; border-color:#0B0B0B !important; color:#fff !important; } .btn-primary:hover, .sb-btn-green:hover{ background:#1A1A1A !important; border-color:#1A1A1A !important; } .card-dot.filled, .fu-dot.active{ background:#0B0B0B !important; border-color:#0B0B0B !important; } /* Montos/acentos índigo inline → neutro */ [style*="#818cf8" i], [style*="#6366f1" i], [style*="#a5b4fc" i], [style*="#4f46e5" i], [style*="99,102,241" i], [style*="129,140,248" i]{ color:#0B0B0B !important; } /* Fondos teal inline residuales → dorado suave */ [style*="15,182,166" i]{ background-color:rgba(201,161,107,.14) !important; } /* ==================== MODO OSCURO (negro landing #0B0B0B) ==================== El sitio público usa html.dark; el CRM usa body.dark. Cubrimos ambos. */ .dark, body.dark{ --ink:#F5F5F5; --muted:#9A9A9A; --line:#252525; --bg:#0B0B0B; --teal:#FFFFFF; --teal-2:#E9E9E9; --teal2:#E9E9E9; --gold:#C9A16B; --gold-2:#E8C99B; --gold-soft:#241C12; --text:#F5F5F5; --text2:#9A9A9A; --text3:#6B6B6B; --surface:#141414; --surface2:#1A1A1A; --surface3:#222222; --border:#252525; --border2:#333333; --accent:#FFFFFF; --accent-dim:#1F1F1F; --accent-border:#333333; --accent-text:#FFFFFF; --bg2:#111111; --green:#4ADE80; --green-dim:rgba(34,197,94,.14); --green2:#4ADE80; --ds-surface:#141414; --ds-shadow-sm:0 1px 2px rgba(0,0,0,.4); --ds-shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45); --ds-shadow-lg:0 30px 80px -30px rgba(0,0,0,.8); } /* En oscuro el acento es blanco -> texto del botón oscuro para que se lea */ .dark .nav-login, .dark .btn{ color:#0B0B0B !important; } .dark .btn.ghost, .dark .btn-ghost{ color:#F5F5F5 !important; } body.dark .btn-primary, body.dark .sb-btn-green{ background:#FFFFFF !important; border-color:#FFFFFF !important; color:#0B0B0B !important; } body.dark .nav-item.active{ background:#1F1F1F !important; color:#FFFFFF !important; border-left-color:#C9A16B !important; } body.dark .card-dot.filled, body.dark .fu-dot.active{ background:#FFFFFF !important; border-color:#FFFFFF !important; } body.dark [style*="#818cf8" i], body.dark [style*="#6366f1" i], body.dark [style*="#a5b4fc" i], body.dark [style*="#4f46e5" i], body.dark [style*="99,102,241" i], body.dark [style*="129,140,248" i]{ color:#F5F5F5 !important; } body.dark [style*="15,182,166" i]{ background-color:rgba(201,161,107,.18) !important; } body.dark .ticket-badge.confirmed{ background:rgba(34,197,94,.14) !important; color:#4ADE80 !important; } .dark .flash, body.dark .flash{ background:rgba(201,161,107,.16) !important; color:#E8C99B !important; }