/* Overwave · Apps y herramientas web (estilo compartido con overwave.cl) */
:root {
  --bg:#060810; --bg-2:#080b15; --surface:#0d1119; --surface-2:#11161f; --surface-3:#161d29;
  --line:rgba(120,200,230,0.10); --line-strong:rgba(0,229,255,0.28);
  --text:#E8F1F5; --text-dim:#8fa0ad; --text-faint:#808e9b;
  --accent:#00E5FF; --accent-deep:#00b4cc; --accent-soft:rgba(0,229,255,0.10); --accent-glow:rgba(0,229,255,0.35);
  --hot:#FF3D7F; --gold:#FFC94A; --ok:#4ade80; --bad:#ff5c7a;
  --field:#070a11; --chk1:#141b27; --chk2:#0f141e; --panel-a:rgba(17,22,31,0.92); --panel-b:rgba(11,15,22,0.92); --shadow:0 20px 60px rgba(0,0,0,0.35);
  --radius:10px; --maxw:1180px;
  --font-display:'Chakra Petch',sans-serif; --font-body:'Sora',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:300; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
body::before { content:''; position:fixed; inset:0; z-index:-3; pointer-events:none; background:radial-gradient(1000px 600px at 75% -10%, rgba(0,229,255,0.10), transparent 60%), radial-gradient(800px 700px at 0% 110%, rgba(0,120,160,0.07), transparent 55%); }
body::after { content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:0.45; background-image:linear-gradient(rgba(0,229,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.035) 1px, transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 85%); -webkit-mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 85%); }
::selection { background:var(--accent); color:#060810; }
a { color:inherit; text-decoration:none; }
img, video, canvas { display:block; max-width:100%; }
main { flex:1; padding-top:66px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
h1, h2, h3 { font-family:var(--font-display); font-weight:600; letter-spacing:0.01em; line-height:1.15; }
.eyebrow { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before { content:''; width:22px; height:1px; background:var(--accent); box-shadow:0 0 6px var(--accent-glow); }

/* navegación */
nav.ow { position:fixed; top:0; left:0; width:100%; z-index:50; height:66px; display:flex; align-items:center; background:rgba(6,8,16,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
nav.ow .wrap { display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; }
.logo { display:inline-flex; align-items:center; gap:12px; }
.logo svg { height:30px; width:auto; filter:drop-shadow(0 0 10px rgba(0,229,255,0.18)); }
.logo .tag { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; color:var(--accent); border:1px solid var(--line-strong); padding:3px 8px; border-radius:3px; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-family:var(--font-display); font-size:0.78rem; font-weight:500; color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; transition:color .25s; }
.nav-links a:hover, .nav-links a.current { color:var(--text); }
.nav-links a.cta { color:var(--accent); }
@media (max-width:760px) { .nav-links a:not(.keep) { display:none; } .logo .tag { display:none; } }

/* cabecera de herramienta */
.tool-hero { padding:44px 0 18px; }
.crumbs { font-size:0.78rem; color:var(--text-faint); margin-bottom:14px; }
.crumbs a { color:var(--text-dim); } .crumbs a:hover { color:var(--accent); }
.tool-hero h1 { font-size:clamp(1.9rem, 4.2vw, 2.9rem); margin:10px 0 10px; }
.tool-hero h1 em { font-style:normal; color:var(--accent); text-shadow:0 0 22px var(--accent-glow); }
.tool-hero p.lead { color:var(--text-dim); max-width:720px; font-size:1.02rem; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.badge { font-size:0.74rem; color:var(--text-dim); background:var(--surface); border:1px solid var(--line); padding:4px 10px; border-radius:99px; display:inline-flex; align-items:center; gap:6px; }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); }

/* tarjetas y formularios */
.panel { background:linear-gradient(180deg, var(--panel-a), var(--panel-b)); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.panel + .panel { margin-top:18px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:860px) { .grid2 { grid-template-columns:1fr; } }
label.f { display:block; font-size:0.8rem; color:var(--text-dim); margin:0 0 6px; }
.field { margin-bottom:16px; }
input[type=text], input[type=number], input[type=url], textarea, select {
  width:100%; background:var(--field); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:11px 13px; font:inherit; font-weight:400; outline:none; transition:border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color:var(--line-strong); box-shadow:0 0 0 3px var(--accent-soft); }
textarea { resize:vertical; min-height:140px; line-height:1.5; }
input[type=range] { width:100%; accent-color:var(--accent); }
input[type=color] { width:46px; height:38px; border:1px solid var(--line); border-radius:8px; background:var(--field); padding:3px; cursor:pointer; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn { font-family:var(--font-display); font-weight:600; font-size:0.86rem; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; border-radius:8px; padding:11px 18px; border:1px solid var(--line-strong); background:transparent; color:var(--accent); transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.btn:hover { background:var(--accent-soft); box-shadow:0 0 18px var(--accent-glow); }
.btn.primary { background:var(--accent); color:#04121a; border-color:var(--accent); }
.btn.primary:hover { background:#5ef0ff; }
.btn.ghost { color:var(--text-dim); border-color:var(--line); }
.btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.seg { display:inline-flex; background:var(--field); border:1px solid var(--line); border-radius:8px; padding:3px; gap:3px; }
.seg button { font:inherit; font-size:0.84rem; color:var(--text-dim); background:transparent; border:0; padding:7px 14px; border-radius:6px; cursor:pointer; }
.seg button.on { background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px var(--line-strong); }
.result { font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--accent); text-shadow:0 0 18px var(--accent-glow); }
.kv { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.kv:last-child { border-bottom:0; } .kv span { color:var(--text-dim); } .kv b { font-family:var(--font-mono); font-weight:500; }
.note { font-size:0.78rem; color:var(--text-faint); margin-top:12px; }
.drop { border:1.5px dashed var(--line-strong); border-radius:var(--radius); padding:38px 20px; text-align:center; cursor:pointer; transition:all .2s; background:rgba(0,229,255,0.02); }
.drop:hover, .drop.over { background:var(--accent-soft); box-shadow:0 0 30px rgba(0,229,255,0.12) inset; }
.drop strong { font-family:var(--font-display); font-size:1.15rem; display:block; margin-bottom:4px; }
.drop span { color:var(--text-dim); font-size:0.86rem; }
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--surface-3); border:1px solid var(--line-strong); color:var(--text); padding:10px 18px; border-radius:99px; font-size:0.88rem; opacity:0; pointer-events:none; transition:all .3s; z-index:99; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* contenido SEO, FAQ y relacionadas */
.content { padding:46px 0 10px; }
.content h2 { font-size:1.45rem; margin:6px 0 14px; }
.content p, .content li { color:var(--text-dim); max-width:780px; }
.content ol, .content ul { padding-left:20px; } .content li { margin:6px 0; }
.faq details { border:1px solid var(--line); border-radius:8px; padding:14px 18px; margin:10px 0; background:var(--surface); max-width:860px; }
.faq summary { cursor:pointer; font-weight:500; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::after { content:'+'; color:var(--accent); font-family:var(--font-mono); } .faq details[open] summary::after { content:'–'; }
.faq details p { margin-top:10px; }
.related { padding:40px 0 60px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.card { position:relative; background:linear-gradient(180deg, var(--panel-a), var(--panel-b)); border:1px solid var(--line); border-radius:var(--radius); padding:20px; transition:all .25s; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.card:hover { border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,0.4), 0 0 24px rgba(0,229,255,0.08); }
.card .ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--line-strong); color:var(--accent); }
.card .ico svg { width:24px; height:24px; }
.card .ico img { width:46px; height:46px; border-radius:12px; }
.card h3 { font-size:1.05rem; } .card p { color:var(--text-dim); font-size:0.88rem; }
.card .chip { position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line-strong); padding:2px 7px; border-radius:3px; }
.card .chip.soon { color:var(--gold); border-color:rgba(255,201,74,0.35); }
.card .chip.hot { color:var(--hot); border-color:rgba(255,61,127,0.4); }

footer.ow { border-top:1px solid var(--line); padding:26px 0; color:var(--text-faint); font-size:0.8rem; }
footer.ow .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer.ow a { color:var(--text-dim); } footer.ow a:hover { color:var(--accent); }
[hidden] { display:none !important; }
.grid2 > .panel + .panel { margin-top:0; }
.grid2 > * { min-width:0; }
.seg { flex-wrap:wrap; }
.feat { flex-direction:row; align-items:center; gap:22px; margin-bottom:26px; padding:22px 26px; border-color:rgba(255,61,127,.35); background:linear-gradient(110deg,rgba(255,61,127,.12),rgba(0,229,255,.10)); }
.feat .btn { margin-left:auto; flex:none; }
@media (max-width:640px) { .feat { flex-direction:column; align-items:flex-start; } .feat .btn { margin-left:0; } .panel { padding:16px; } .wrap { padding:0 16px; } }

/* ---------- tema claro (por página, botón en la barra) ---------- */
html[data-theme="light"] {
  --bg:#f3f6f9; --bg-2:#eef2f6; --surface:#ffffff; --surface-2:#f4f7fa; --surface-3:#ffffff;
  --line:rgba(15,40,60,0.12); --line-strong:rgba(0,150,180,0.42);
  --text:#0a1422; --text-dim:#243140; --text-faint:#3b4756;
  --accent:#006d84; --accent-deep:#005a6d; --accent-soft:rgba(0,160,195,0.10); --accent-glow:rgba(0,170,200,0.20);
  --hot:#e0336f; --ok:#15a34a; --bad:#d9264a; --gold:#b7791f;
  --field:#f7fafc; --chk1:#e3e9ef; --chk2:#f4f7fa; --panel-a:#ffffff; --panel-b:#fbfdfe; --shadow:0 10px 30px rgba(15,40,60,0.08);
}
html[data-theme="light"] body::before { background:radial-gradient(1000px 600px at 75% -10%, rgba(0,200,230,0.10), transparent 60%), radial-gradient(800px 700px at 0% 110%, rgba(0,120,160,0.05), transparent 55%); }
html[data-theme="light"] body::after { opacity:0.6; background-image:linear-gradient(rgba(0,120,160,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,120,160,0.05) 1px, transparent 1px); }
html[data-theme="light"] .tool-hero h1 em, html[data-theme="light"] .result { text-shadow:none; }
html[data-theme="light"] .btn.primary { background:#00d3ee; border-color:#00c2dc; color:#04121a; }
html[data-theme="light"] .btn.primary:hover { background:#3ee3f7; box-shadow:0 6px 18px rgba(0,190,220,0.30); }
html[data-theme="light"] .badge::before { box-shadow:none; }
html[data-theme="light"] .card:hover { box-shadow:0 14px 34px rgba(15,40,60,0.12); }
html[data-theme="light"] .toast { background:#0d1726; color:#fff; }
html[data-theme="light"] ::selection { color:#fff; }

/* la barra de navegación siempre conserva los colores de la marca */
nav.ow { --text:#E8F1F5; --text-dim:#8fa0ad; --accent:#00E5FF; --line:rgba(120,200,230,0.10); --line-strong:rgba(0,229,255,0.28); --accent-soft:rgba(0,229,255,0.10); --accent-glow:rgba(0,229,255,0.35); color:var(--text); }
.theme-btn { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line-strong); background:transparent; color:var(--accent); cursor:pointer; transition:all .2s; }
.theme-btn:hover { background:var(--accent-soft); box-shadow:0 0 14px var(--accent-glow); }
.theme-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* el ícono muestra a qué tema se cambia: luna en claro, sol en oscuro */
.theme-btn .i-moon { display:none; }
html[data-theme="light"] .theme-btn .i-moon { display:block; } html[data-theme="light"] .theme-btn .i-sun { display:none; }
html[data-theme="light"] nav.ow { background:#060810; border-bottom-color:#060810; }
.checker { background:repeating-conic-gradient(#1a2130 0 25%, #121823 0 50%) 0 0/20px 20px; }
html[data-theme="light"] .checker { background:repeating-conic-gradient(#e6ebf0 0 25%, #f5f7fa 0 50%) 0 0/20px 20px; }
/* encabezado compacto de las herramientas */
.tool-hero.compact { padding:22px 0 16px; }
.tool-hero.compact .hero-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.tool-hero.compact .crumbs { margin:0; }
.tool-hero.compact .badges { margin:0; }
.tool-hero.compact .badge { font-size:.7rem; padding:3px 9px; }
.tool-hero.compact h1 { font-size:clamp(1.5rem, 3vw, 2.1rem); margin:0 0 4px; }
.tool-hero.compact p.lead { font-size:.95rem; }
.rl-layout > .panel, .qr-layout > .panel, .qr-left > .panel { margin-top:0; }
html[data-theme="light"] .rl-ico { background:#ffffff; border-color:var(--line-strong); color:var(--accent); }

/* ---------- herramientas con aspecto de app ---------- */
.app-sec { padding:18px 0 10px; }
.app-crumbs { margin:0 0 10px; }
.app-shell { border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg, var(--shell-a), var(--shell-b)); box-shadow:var(--shell-shadow); }
.app-bar { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); border-radius:20px 20px 0 0; background:var(--bar-bg); flex-wrap:wrap; }
.app-ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; color:#04121a;
  background:linear-gradient(140deg, #5ef0ff, #00b4cc); box-shadow:0 6px 18px rgba(0,200,230,.25), inset 0 1px 0 rgba(255,255,255,.5); }
.app-ico.sm { width:40px; height:40px; border-radius:12px; }
.app-title { flex:1; min-width:220px; }
.app-title h1 { font-size:clamp(1.15rem, 2.2vw, 1.45rem); margin:0; }
.app-title h1 em { font-style:normal; color:var(--accent); }
.app-title p { color:var(--text-dim); font-size:.86rem; margin-top:2px; }
.app-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.app-meta .badge { font-size:.7rem; padding:3px 9px; }
.app-help { font-size:.78rem; font-weight:500; color:var(--accent); border:1px solid var(--line-strong); border-radius:99px; padding:4px 12px; transition:all .2s; }
.app-help:hover { background:var(--accent-soft); }
.app-body { padding:18px; }
.app-body .panel { box-shadow:none; }
@media (max-width:640px) { .app-body { padding:12px; } .app-bar { padding:12px; } .app-meta .badge { display:none; } }
:root { --shell-a:rgba(13,17,25,.75); --shell-b:rgba(8,11,18,.75); --bar-bg:rgba(255,255,255,.02); --shell-shadow:0 30px 80px rgba(0,0,0,.45); }
html[data-theme="light"] { --shell-a:#ffffffcc; --shell-b:#f7fafccc; --bar-bg:#ffffff; --shell-shadow:0 18px 50px rgba(15,40,60,.10); }
html[data-theme="light"] .app-body .panel { background:var(--surface); }

/* ayuda ordenada */
.help { padding:40px 0 10px; }
.help-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:34px; align-items:start; }
@media (max-width:860px) { .help-grid { grid-template-columns:1fr; gap:20px; } }
.help h2 { font-size:1.15rem; margin-bottom:12px; }
.steps { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.steps li { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.steps li span { width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:.8rem; color:var(--accent); background:var(--accent-soft); border:1px solid var(--line-strong); }
.steps li p { font-size:.88rem; color:var(--text-dim); margin:2px 0 0; }
.help .faq details { margin:8px 0; padding:12px 16px; }
.help .faq summary { font-size:.92rem; }
.help .faq details p { font-size:.86rem; color:var(--text-dim); }

/* dock de otras apps */
.dock-sec { padding:30px 0 56px; }
.dock-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-family:var(--font-display); }
.dock-head a { font-size:.82rem; color:var(--accent); font-family:var(--font-body); }
.dock { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.dock-app { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface); transition:all .2s; }
.dock-app:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.dock-app b { font-size:.84rem; font-weight:500; }

/* categorías: Tools (rosado/violeta) y Apps web (celeste) */
.cat-tag { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:6px; font-weight:500; }
.cat-tag.tool { color:#ff5a93; background:rgba(255,61,127,.12); border:1px solid rgba(255,61,127,.35); }
.cat-tag.app { color:var(--accent); background:var(--accent-soft); border:1px solid var(--line-strong); }
.app-ico.tool { background:linear-gradient(140deg, #ff7aa8, #7c5cff); color:#fff; box-shadow:0 6px 18px rgba(160,80,255,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.card .ico.ico-tool { color:#ff5a93; background:rgba(255,61,127,.10); border-color:rgba(255,61,127,.35); }
.card .chip.cat-tool { color:#ff5a93; border-color:rgba(255,61,127,.4); }
.cat-head { margin:6px 0 16px; } .cat-head h2 { font-size:1.4rem; margin:10px 0 4px; } .cat-head p { color:var(--text-dim); font-size:.9rem; }
.dock-app small { display:block; font-size:.68rem; color:var(--text-faint); }
html[data-theme="light"] .cat-tag.tool, html[data-theme="light"] .card .ico.ico-tool, html[data-theme="light"] .card .chip.cat-tool { color:#d6286a; }

/* apps de trabajo que necesitan más espacio (p. ej. visor de PDF): usan casi todo el ancho de la pantalla */
.wrap.wide { max-width:min(1880px, 100%); padding:0 20px; }
@media (min-width:1500px) { .wrap.wide .pdf-main { grid-template-columns:170px minmax(0,1fr) 320px; } }
@media (min-width:1500px) { .wrap.wide .pg-th { height:140px; } }
.wrap.md { max-width:min(1380px, 100%); padding:0 20px; }

/* ---------- portal /apps/ ---------- */
.hub-hero { padding:46px 0 22px; }
.hub-hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:end; }
.hub-hero h1 { font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.12; margin:12px 0 10px; max-width:760px; }
.hub-hero h1 em { font-style:normal; color:var(--accent); text-shadow:0 0 22px var(--accent-glow); }
.hub-hero .lead { color:var(--text-dim); max-width:620px; font-size:1.02rem; }
.hub-search { margin-top:22px; max-width:620px; display:flex; align-items:center; gap:10px; padding:0 14px; border-radius:14px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text-dim); box-shadow:0 10px 30px rgba(0,0,0,.18); transition:box-shadow .2s, border-color .2s; }
.hub-search:focus-within { box-shadow:0 0 0 4px var(--accent-soft), 0 10px 30px rgba(0,0,0,.18); color:var(--accent); }
.hub-search input { border:0 !important; background:transparent !important; box-shadow:none !important; padding:15px 0; font-size:1rem; }
.hub-search kbd { font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.hub-stats { display:grid; grid-template-columns:repeat(3, auto); gap:10px; }
.hub-stats div { min-width:112px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:var(--surface); text-align:center; }
.hub-stats b { display:block; font-family:var(--font-display); font-size:1.6rem; line-height:1.1; color:var(--accent); }
.hub-stats span { font-size:.76rem; color:var(--text-dim); }
.hub-sec { padding:8px 0 30px; }
.hub-filters { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 26px; }
.hub-filters button { font:inherit; font-size:.86rem; font-weight:500; cursor:pointer; color:var(--text-dim); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:7px 15px; display:inline-flex; align-items:center; gap:7px; transition:all .2s; }
.hub-filters button small { font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); }
.hub-filters button:hover { border-color:var(--line-strong); color:var(--text); }
.hub-filters button.on { color:var(--text); border-color:var(--line-strong); background:var(--accent-soft); }
.hub-filters .dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(140deg, #5ef0ff, #00b4cc); }
.hub-filters .dot.tool { background:linear-gradient(140deg, #ff7aa8, #7c5cff); }
.hub-block { margin-bottom:38px; }
.hub-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.hub-head h2 { font-size:1.3rem; margin:0; }
.hub-head p { color:var(--text-dim); font-size:.88rem; }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.hub-grid.hub-feat { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.hub-card { position:relative; display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--surface); transition:transform .22s, box-shadow .22s, border-color .22s; overflow:hidden; }
.hub-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.hub-card .hub-txt b { display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--text); margin-bottom:3px; }
.hub-card .hub-txt span { font-size:.86rem; color:var(--text-dim); line-height:1.5; }
.hub-card .hub-go { margin-top:auto; font-size:.8rem; font-weight:500; color:var(--accent); }
.hub-card .hub-go i { font-style:normal; display:inline-block; transition:transform .2s; }
.hub-card:hover .hub-go i { transform:translateX(4px); }
.hub-card[data-cat="tool"] .hub-go { color:#ff5a93; }
.hub-tag { position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:99px; color:#fff; background:linear-gradient(140deg, #ff7aa8, #7c5cff); }
.hub-card.big { padding:24px; min-height:220px; }
.hub-card.big .app-ico { width:60px; height:60px; border-radius:18px; }
.hub-card.big .hub-txt b { font-size:1.3rem; }
.hub-card.big .hub-txt span { font-size:.92rem; }
.hub-card.big::before { content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(124,92,255,.22), transparent 70%); pointer-events:none; }
.hub-card.big[data-cat="app"]::before { background:radial-gradient(circle, rgba(0,200,230,.22), transparent 70%); }
.hub-empty { text-align:center; padding:50px 20px; border:1.5px dashed var(--line-strong); border-radius:18px; color:var(--text-dim); }
.hub-empty b { display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--text); margin-bottom:4px; }
.hub-perks { padding:10px 0 60px; }
.hub-perks .wrap { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.hub-perks .wrap > div { padding:20px; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
.hub-perks .pk { font-size:1.4rem; display:block; margin-bottom:6px; }
.hub-perks b { font-family:var(--font-display); font-size:1rem; }
.hub-perks p { font-size:.86rem; color:var(--text-dim); margin-top:3px; }
html[data-theme="light"] .hub-card:hover { box-shadow:0 16px 36px rgba(15,40,60,.12); }
html[data-theme="light"] .hub-search { box-shadow:0 10px 30px rgba(15,40,60,.08); }
html[data-theme="light"] .hub-hero h1 em { text-shadow:none; }
html[data-theme="light"] .hub-card[data-cat="tool"] .hub-go { color:#d6286a; }
@media (max-width:900px) { .hub-hero .wrap { grid-template-columns:1fr; gap:22px; } .hub-perks .wrap { grid-template-columns:1fr; } }
@media (max-width:520px) { .hub-stats div { min-width:0; padding:10px; } .hub-stats b { font-size:1.25rem; } .hub-search kbd { display:none; } }
.hub-search input { flex:1; min-width:0; }
.hub-block[data-cat="app"] .hub-grid { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
.hub-search input[type=search] { color:var(--text); font:inherit; font-size:1rem; outline:none; width:100%; -webkit-appearance:none; appearance:none; }
.hub-search input::placeholder { color:var(--text-faint); }
.hub-search input::-webkit-search-cancel-button { filter:grayscale(1); opacity:.6; }

/* ---------- guías ---------- */
.guide { padding:18px 0 40px; }
.guide-wrap { max-width:820px; }
.guide-head { margin:14px 0 22px; }
.guide-head h1 { font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.15; margin:10px 0 10px; }
.guide-head .lead { color:var(--text-dim); font-size:1.06rem; }
.guide-body { font-size:1.02rem; line-height:1.75; color:var(--text); }
.guide-body h2 { font-size:1.35rem; margin:34px 0 10px; }
.guide-body p { margin:0 0 14px; color:var(--text-dim); }
.guide-body b { color:var(--text); font-weight:600; }
.guide-body ul, .guide-body ol { margin:0 0 16px 22px; color:var(--text-dim); }
.guide-body li { margin:6px 0; padding-left:4px; }
.guide-body table { width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:.95rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.guide-body th { text-align:left; background:var(--surface-2); font-weight:600; font-family:var(--font-display); }
.guide-body th, .guide-body td { padding:10px 14px; border-bottom:1px solid var(--line); }
.guide-body td { color:var(--text-dim); background:var(--surface); }
.guide-body .tip, .guide-body .warn { padding:14px 16px; border-radius:12px; border:1px solid var(--line-strong); background:var(--accent-soft); color:var(--text); font-size:.95rem; }
.guide-body .warn { border-color:rgba(255,170,60,.45); background:rgba(255,170,60,.10); }
.guide-cta { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); margin:20px 0 26px; transition:transform .2s, box-shadow .2s; flex-wrap:wrap; }
.guide-cta:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.18); }
.guide-cta > span:nth-child(2) { flex:1; min-width:200px; }
.guide-cta b { display:block; font-family:var(--font-display); font-size:1.08rem; color:var(--text); }
.guide-cta small { color:var(--text-dim); font-size:.86rem; }
.guide-faq { margin-top:30px; } .guide-faq h2 { font-size:1.3rem; margin-bottom:8px; }
.guide-more { margin-top:34px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.guide-more b { width:100%; font-family:var(--font-display); margin-bottom:4px; }
.guide-more a { font-size:.84rem; padding:6px 12px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); }
.guide-more a:hover { border-color:var(--line-strong); color:var(--text); }
.guide-link { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:12px; border:1px dashed var(--line-strong); background:var(--accent-soft); font-size:.9rem; }
.guide-link small { display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.guide-link > span:nth-child(2) { flex:1; } .guide-link i { font-style:normal; color:var(--accent); }
.guide-card .app-ico { font-size:1.2rem; }
.hub-head .hub-all { margin-left:auto; font-size:.85rem; color:var(--accent); }

/* guías en el portal: desplegable de texto, separado de las apps */
.hub-guides { padding:0 0 50px; }
.guides-dd { border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.guides-dd summary { list-style:none; display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; }
.guides-dd summary::-webkit-details-marker { display:none; }
.guides-dd .gd-ic { font-size:1.3rem; }
.guides-dd .gd-t { flex:1; min-width:0; } .guides-dd .gd-t b { display:block; font-family:var(--font-display); font-size:1rem; }
.guides-dd .gd-t small { color:var(--text-dim); font-size:.84rem; }
.guides-dd .gd-n { font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim); border:1px solid var(--line); border-radius:99px; padding:2px 9px; }
.guides-dd .gd-ch { font-style:normal; color:var(--text-dim); transition:transform .2s; }
.guides-dd[open] .gd-ch { transform:rotate(180deg); }
.guides-list { list-style:none; margin:0; padding:4px 20px 6px; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:2px 24px; border-top:1px solid var(--line); }
.guides-list a { display:flex; flex-direction:column; padding:10px 0; border-bottom:1px dashed var(--line); }
.guides-list a span { color:var(--text); font-size:.92rem; } .guides-list a:hover span { color:var(--accent); }
.guides-list a small { color:var(--text-faint); font-size:.76rem; }
.guides-dd .hub-all { display:inline-block; margin:8px 20px 16px; }

/* secciones temáticas: color propio por tema (ícono, punto y etiqueta) */
.app-ico.s-img { background:linear-gradient(140deg, #ff7aa8, #c04cff); color:#fff; box-shadow:0 6px 18px rgba(200,70,220,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.app-ico.s-doc { background:linear-gradient(140deg, #ffb35c, #ff6a3d); color:#fff; box-shadow:0 6px 18px rgba(255,120,60,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.app-ico.s-av  { background:linear-gradient(140deg, #8f7bff, #5146ff); color:#fff; box-shadow:0 6px 18px rgba(90,80,255,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.app-ico.s-mus { background:linear-gradient(140deg, #4ff0b0, #12a87a); color:#04121a; box-shadow:0 6px 18px rgba(20,180,130,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.app-ico.s-fin { background:linear-gradient(140deg, #5ef0ff, #00a6c2); color:#04121a; box-shadow:0 6px 18px rgba(0,190,220,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.app-ico.s-dia { background:linear-gradient(140deg, #ffe26a, #f2a900); color:#2a1a00; box-shadow:0 6px 18px rgba(240,170,0,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.dot.s-img, .sec-dot.s-img { background:#e05ad8; } .dot.s-doc, .sec-dot.s-doc { background:#ff8a45; } .dot.s-av, .sec-dot.s-av { background:#6a5cff; }
.dot.s-mus, .sec-dot.s-mus { background:#1fc792; } .dot.s-fin, .sec-dot.s-fin { background:#00b8d4; } .dot.s-dia, .sec-dot.s-dia { background:#f2b400; }
.sec-dot { width:12px; height:12px; border-radius:4px; flex:none; align-self:center; }
.cat-tag.s-img, .cat-tag.s-doc, .cat-tag.s-av, .cat-tag.s-mus, .cat-tag.s-fin, .cat-tag.s-dia { color:var(--text); background:var(--surface-2, rgba(127,127,127,.1)); border:1px solid var(--line); text-transform:none; letter-spacing:.02em; font-family:var(--font-body); font-size:.72rem; }
.cat-tag[class*="s-"]::before { content:''; width:7px; height:7px; border-radius:50%; margin-right:6px; background:currentColor; }
.cat-tag.s-img::before { background:#e05ad8; } .cat-tag.s-doc::before { background:#ff8a45; } .cat-tag.s-av::before { background:#6a5cff; }
.cat-tag.s-mus::before { background:#1fc792; } .cat-tag.s-fin::before { background:#00b8d4; } .cat-tag.s-dia::before { background:#f2b400; }
.hub-card .hub-go, .hub-card[data-cat] .hub-go { color:var(--accent); }
.hub-filters { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:4px; }
.hub-filters button { flex:none; }
@media (min-width:1100px) { .hub-filters { flex-wrap:wrap; } }
.hub-filters .f-ia { font-weight:600; }
.hub-filters .f-ia.on { background:linear-gradient(135deg, rgba(168,85,247,.16), rgba(0,229,255,.14)); border-color:rgba(168,85,247,.45); }

/* legibilidad: placeholders con contraste suficiente en ambos temas */
input::placeholder, textarea::placeholder { color:#808e9b; opacity:1; }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color:#5f6b78; }
/* botones deshabilitados legibles (sin opacidad baja sobre el texto) */
.btn:disabled, .btn[disabled] { opacity:1; color:var(--text-dim); border-color:var(--line); background:transparent; cursor:not-allowed; box-shadow:none; }
.btn.primary:disabled, .btn.primary[disabled] { background:var(--field); color:var(--text-dim); border-color:var(--line); }