/* HELP.CSS – Centro de Ayuda (paleta Eligemicasa) */ /* Objetivo: que SIEMPRE se vea perfecto (fallbacks + safe-area + sticky robusto) */ /* ========================= 1) VARIABLES ========================= */ :root{ /* Colores topbar */ --brand-1:#7c3aed; /* morado */ --brand-2:#2563eb; /* azul */ /* Oscuro por defecto */ --ec-bg:#0b1220; --ec-surface:#0f172a; --ec-text:#e5e7eb; --ec-text-dim:#9aa4b2; --ec-border:rgba(148,163,184,.18); --ec-shadow:0 20px 40px -20px rgba(2,6,23,.65); --ec-radius-xl:1.1rem; /* Altura topbar (si tu topbar la setea, perfecto; si no, fallback) */ --emc-topbar-h: 64px; /* Safe area (iPhone notch) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Capas */ --ec-z-sticky: 10; --ec-z-hero: 1; } /* Claro (antiguo: activado añadiendo .help-light al ) */ :root.help-light{ --ec-bg:#f6f8fb; --ec-surface:#ffffff; --ec-text:#0f172a; --ec-text-dim:#465569; --ec-border:rgba(2,6,23,.08); --ec-shadow:0 24px 48px -28px rgba(15,23,42,.18); } /* ===== Alias nuevo: tu topbar usa :root.light ===== */ :root.light{ --ec-bg:#f6f8fb; --ec-surface:#ffffff; --ec-text:#0f172a; --ec-text-dim:#465569; --ec-border:rgba(2,6,23,.08); --ec-shadow:0 24px 48px -28px rgba(15,23,42,.18); } /* Respetar esquema de color del navegador */ :root{ color-scheme: dark; } :root.help-light{ color-scheme: light; } :root.light{ color-scheme: light; } :root:not(.light):not(.help-light){ color-scheme: dark; } /* ========================= 2) BASE ========================= */ html,body{ background:var(--ec-bg); color:var(--ec-text); /* Evita “saltos” de scroll horizontal por sombras */ overflow-x:hidden; } .container{ max-width:1120px; } /* Tipografía más estable (opcional) */ body{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding-bottom: var(--safe-bottom); } /* ========================= 3) HERO (con fallback si no hay color-mix) ========================= */ .ec-hero{ position:relative; z-index:var(--ec-z-hero); padding-top: calc(var(--safe-top) + var(--emc-topbar-h,64px) + 10px); /* Fallback simple */ background: radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.18), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(124,58,237,.16), transparent 42%); border-bottom:1px solid var(--ec-border); border-radius:0 0 1rem 1rem; } /* Si el navegador soporta color-mix, usamos la versión “fina” */ @supports (background: color-mix(in oklab, white 10%, black)) { .ec-hero{ background: radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 60%), radial-gradient(900px 420px at 100% 0%, color-mix(in oklab, var(--brand-1) 16%, transparent), transparent 42%); } } .brand{ background:linear-gradient(90deg, var(--brand-2), var(--brand-1)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ========================= 4) STICKY BAR (robusta bajo topbar) ========================= */ .ec-sticky-bar{ position: sticky; top: calc(var(--safe-top) + var(--emc-topbar-h,64px)); z-index: var(--ec-z-sticky); padding:.75rem; border-bottom:1px solid var(--ec-border); /* Fallback */ background: rgba(15,23,42,.92); /* Efecto cristal si se puede */ backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); border-radius: 0 0 1rem 1rem; } /* Gradiente “pro” si hay soporte */ @supports (background: color-mix(in oklab, white 10%, black)) { .ec-sticky-bar{ background: linear-gradient( 180deg, color-mix(in oklab, var(--ec-surface) 96%, transparent), color-mix(in oklab, var(--ec-surface) 86%, transparent) ); } } /* ========================= 5) INPUTS / SELECTS (contraste + focus visible) ========================= */ .input,.select{ background:var(--ec-surface)!important; border:1px solid var(--ec-border)!important; color:var(--ec-text)!important; } .input::placeholder{ color: rgba(154,164,178,.85); } /* select: mejor legibilidad */ .select{ color:var(--ec-text-dim)!important; } .input:focus,.select:focus{ outline:none!important; border-color: rgba(37,99,235,.55)!important; box-shadow:0 0 0 6px rgba(37,99,235,.18)!important; } /* Mejora accesibilidad cuando se navega con teclado */ .input:focus-visible,.select:focus-visible, .btn:focus-visible,.btn-primary:focus-visible, a:focus-visible{ outline: 2px solid rgba(37,99,235,.75); outline-offset: 2px; } /* ========================= 6) TARJETAS (estables + hover suave) ========================= */ .card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border:1px solid var(--ec-border)!important; border-radius:var(--ec-radius-xl)!important; box-shadow:var(--ec-shadow)!important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; will-change: transform; } /* Evita “jitter” en algunos móviles */ @media (hover:hover){ .card:hover{ transform:translateY(-3px); border-color: rgba(37,99,235,.40); box-shadow:0 28px 60px -28px rgba(37,99,235,.25); } } /* ========================= 7) VÍDEO / MEDIA ========================= */ .aspect-video{ position:relative; width:100%; padding-bottom:56.25%; } .aspect-video>*{ position:absolute; inset:0; width:100%; height:100%; } .ec-video{ border-radius:1rem; overflow:hidden; border:1px solid var(--ec-border); box-shadow:var(--ec-shadow); } /* ========================= 8) BADGES / BREADCRUMB ========================= */ .badge,.badge-outline{ border-radius:999px!important; border:1px solid var(--ec-border)!important; color:var(--ec-text-dim)!important; background: rgba(15,23,42,.7); } /* Si hay color-mix, se ve más fino */ @supports (background: color-mix(in oklab, white 10%, black)) { .badge,.badge-outline{ background: color-mix(in oklab, var(--ec-surface) 94%, transparent); } } .ec-breadcrumb a{ color:var(--ec-text-dim); text-decoration:none; } .ec-breadcrumb a:hover{ color:var(--brand-2); } /* ========================= 9) CLAMPS ========================= */ .line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ========================= 10) BOTONES ========================= */ .btn{ border-color:var(--ec-border)!important; } .btn-primary{ background: linear-gradient(135deg, var(--brand-2), var(--brand-1)) !important; border:none!important; color:#fff!important; } /* ========================= 11) MODO CLARO: matices ========================= */ :root.help-light .ec-sticky-bar, :root.light .ec-sticky-bar{ background:#ffffffcc; border-bottom:1px solid var(--ec-border); } @supports (background: color-mix(in oklab, white 10%, black)) { :root.help-light .ec-sticky-bar, :root.light .ec-sticky-bar{ background: linear-gradient( 180deg, color-mix(in oklab, #ffffff 98%, transparent), color-mix(in oklab, #ffffff 88%, transparent) ); } } :root.help-light .badge, :root.help-light .badge-outline, :root.light .badge, :root.light .badge-outline{ background:#fff; color:#475569!important; } /* Enlaces / texto en modo claro (por si typography mete estilos raros) */ :root.help-light .prose, :root.light .prose{ color: var(--ec-text) !important; } :root.help-light .prose :where(h1,h2,h3,h4), :root.light .prose :where(h1,h2,h3,h4){ color: var(--ec-text) !important; } :root.help-light .prose :where(a), :root.light .prose :where(a){ color: color-mix(in oklab, var(--brand-2) 70%, var(--ec-text)) !important; } /* ========================= 12) OVERRIDES DaisyUI (para que NO “blanquee” tu layout) ========================= */ html, body{ background:var(--ec-bg) !important; color:var(--ec-text) !important; } .bg-base-100{ background:var(--ec-bg) !important; } .bg-base-200{ background:var(--ec-surface) !important; } .text-base-content{ color:var(--ec-text) !important; }