/* ========================================================================== IDIOMASOFíA — Hub de Tests style.css — Estilos compartidos entre el tema oscuro y el tema claro. El tema se controla con el atributo data-theme en : (por defecto si se omite) ========================================================================== */ :root, [data-theme="dark"]{ --bg: #060B18; --bg-elevated: #0E1730; --bg-card: #101B38; --line: rgba(255,255,255,0.08); --text: #EAF0FF; --text-dim: #8FA0C7; --accent: #4C7FFF; --accent-soft: rgba(76,127,255,0.14); --live: #FFB454; --live-soft: rgba(255,180,84,0.14); --ok: #4ADE80; --maint: #F87171; --radial-glow: #101d40; --shadow-color: rgba(0,0,0,0.35); } [data-theme="light"]{ --bg: #FFFFFF; --bg-elevated: #F7F9FC; --bg-card: #FFFFFF; --line: rgba(10,20,50,0.09); --text: #0B1226; --text-dim: #667088; --accent: #2E5CE6; --accent-soft: rgba(46,92,230,0.08); --live: #B5760A; --live-soft: rgba(181,118,10,0.10); --ok: #17A567; --maint: #DC2626; --radial-glow: #EEF3FF; --shadow-color: rgba(10,20,50,0.09); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background: radial-gradient(ellipse 80% 48% at 50% -10%, var(--radial-glow) 0%, var(--bg) 55%); color: var(--text); font-family: 'Inter', system-ui, sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; } a{color:inherit; text-decoration:none;} .wrap{max-width:1080px; margin:0 auto; padding:0 24px;} /* Header */ header{ padding:24px 0 8px; display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex; align-items:center; gap:12px; } .brand-logo{ width:40px; height:40px; border-radius:10px; display:block; } .brand-name{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:0.02em; } .brand-name span{color:var(--accent);} .back-link{ font-size:0.85rem; color:var(--text-dim); border:1px solid var(--line); padding:8px 14px; border-radius:100px; transition:border-color .2s, color .2s; } .back-link:hover{border-color:var(--accent); color:var(--text);} /* Hero */ .hero{ padding:48px 0 40px; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--live); background:var(--live-soft); border:1px solid var(--live-soft); padding:6px 12px; border-radius:100px; margin-bottom:20px; } .pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); animation:pulse 2s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--live-soft); } 70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } h1{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.08; letter-spacing:-0.01em; max-width:720px; } h1 em{ font-style:normal; color:var(--accent); } .sub{ margin-top:16px; font-size:1.05rem; color:var(--text-dim); max-width:560px; line-height:1.6; } /* Filter bar */ .filters{ display:flex; gap:8px; flex-wrap:wrap; margin:32px 0 8px; } .chip{ font-size:0.82rem; padding:8px 16px; border-radius:100px; border:1px solid var(--line); color:var(--text-dim); cursor:pointer; background:transparent; font-family:'Inter', sans-serif; transition: all .15s; } .chip:hover{ color:var(--text); border-color:var(--accent); } .chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; } /* Grid */ .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; padding:32px 0 24px; } .card{ background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; box-shadow:0 1px 2px var(--shadow-color); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, var(--accent-soft), transparent 60%); opacity:0; transition:opacity .25s; } .card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 28px var(--shadow-color); } .card:hover::before{opacity:1;} .card-top{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; z-index:1; } .card-id{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; color:var(--accent); background:var(--accent-soft); padding:4px 9px; border-radius:6px; letter-spacing:0.03em; } .status{ display:flex; align-items:center; gap:6px; font-size:0.72rem; color:var(--text-dim); } .status-dot{width:6px; height:6px; border-radius:50%; background:var(--ok);} .status-dot.maint{background:var(--maint);} .card-name{ font-family:'Space Grotesk', sans-serif; font-size:1.25rem; font-weight:600; position:relative; z-index:1; } .card-cat{ font-size:0.82rem; color:var(--text-dim); position:relative; z-index:1; } .card-desc{ font-size:0.85rem; color:var(--text-dim); line-height:1.45; margin-top:8px; position:relative; z-index:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .activity{ display:flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--ok); position:relative; z-index:1; } .activity-dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 2s infinite; } .card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); position:relative; z-index:1; } .updated{ font-size:0.72rem; color:var(--text-dim); font-family:'JetBrains Mono', monospace; } .go{ font-size:0.82rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:4px; } .card:hover .go{gap:8px;} .go svg{transition:transform .2s;} /* Empty / loading / error states */ .state-msg{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-dim); } .state-msg .big{ font-family:'Space Grotesk', sans-serif; font-size:1.1rem; color:var(--text); margin-bottom:8px; } .skeleton{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:16px; height:172px; position:relative; overflow:hidden; } .skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--line), transparent); animation:shimmer 1.4s infinite; } @keyframes shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} } /* Footer sync bar */ .sync-bar{ margin-top:40px; padding:18px 0 40px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.78rem; color:var(--text-dim); font-family:'JetBrains Mono', monospace; } .sync-bar .refresh{ color:var(--accent); cursor:pointer; border:1px solid var(--line); padding:6px 12px; border-radius:100px; background:transparent; font-family:'JetBrains Mono', monospace; font-size:0.78rem; } .sync-bar .refresh:hover{border-color:var(--accent);} @media (prefers-reduced-motion: reduce){ .pulse-dot, .skeleton::after{ animation:none; } }