/* ═══════════════════════════════════════════════════════════════ SPDX-License-Identifier: GPL-3.0-or-later Ruleta Adrià — guía de uso · estilos del documento Se apoya en styles.css (fuentes, variables, fondo y cristal) y sólo añade lo propio de una página que se lee y se desplaza. ═══════════════════════════════════════════════════════════════ */ /* styles.css deja el a pantalla completa y sin scroll porque la app es una sola vista. Un documento necesita lo contrario. */ body.doc{ display:block; overflow:visible; height:auto; min-height:100dvh; } /* ── Cabecera pegada ───────────────────────────────────────────── */ .doc .topbar{ position:sticky; top:0; z-index:5; flex-wrap:wrap; row-gap:10px; /* en móvil los botones bajan a su propia línea */ background:linear-gradient(180deg,rgba(8,72,130,.62),rgba(8,72,130,.14)); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,.28); } .doc .brand-title{font-size:clamp(20px,2.4vw,32px);} .doc .brand-orb{width:46px;height:46px;} .doc .brand-orb img{width:28px;height:28px;} a.tool{text-decoration:none;} a.tool .tool-txt{display:inline;} /* nunca se oculta: es el único texto */ /* ── Rejilla del documento ─────────────────────────────────────── */ .doc-wrap{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:clamp(18px,3vw,40px) clamp(14px,2.4vw,30px) 120px; display:grid; grid-template-columns:246px minmax(0,1fr); gap:clamp(18px,2.6vw,38px); align-items:start; } /* ── Índice lateral ────────────────────────────────────────────── */ .toc{ position:sticky; top:96px; padding:14px; border-radius:var(--radius); border:1px solid var(--stroke); background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10) 45%,rgba(255,255,255,.18)); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--shadow-lg); } .toc h2{ font-size:13px; letter-spacing:1.6px; text-transform:uppercase; opacity:.9; margin:2px 0 10px 6px; font-family:var(--font-ui); text-shadow:0 1px 2px rgba(2,40,72,.5); } .toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} .toc a{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:11px; color:#fff; text-decoration:none; font-size:14px; font-weight:700; text-shadow:0 1px 2px rgba(2,40,72,.55); border:1px solid transparent; transition:background .15s ease, transform .15s ease, border-color .15s ease; } .toc a:hover{ background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10)); border-color:rgba(255,255,255,.55); transform:translateX(3px); } .toc a.is-here{ background:linear-gradient(180deg,rgba(143,226,34,.55),rgba(79,179,28,.30)); border-color:rgba(255,255,255,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); } .toc-ico{font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));} /* ── Columna de contenido ──────────────────────────────────────── */ .doc-main{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);min-width:0;} .lede{ padding:clamp(18px,2.4vw,30px); border-radius:var(--radius); border:1px solid var(--stroke); background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.12) 42%,rgba(255,255,255,.22)); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--shadow-lg); } .lede h1{ font-size:clamp(30px,4.4vw,52px); line-height:1.05; margin-bottom:10px; background:linear-gradient(180deg,#ffffff 0%,#ffffff 48%,#c9f0ff 52%,#8ed8f8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 6px rgba(2,40,74,.5)); } .lede p{margin:0;font-size:clamp(15px,1.5vw,18px);line-height:1.6; text-shadow:0 1px 3px rgba(2,40,72,.55);} .lede .btn-row{margin-top:18px;} .lede .btn{flex:0 1 auto;text-decoration:none;padding:12px 20px;font-size:15px;} /* Tarjeta de sección */ .card{ scroll-margin-top:92px; padding:clamp(16px,2.1vw,26px); border-radius:var(--radius); border:1px solid var(--stroke); background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.09) 42%,rgba(255,255,255,.17)); backdrop-filter:blur(15px) saturate(1.28); -webkit-backdrop-filter:blur(15px) saturate(1.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-md); } .card > h2{ display:flex; align-items:center; gap:12px; font-size:clamp(21px,2.4vw,28px); margin-bottom:6px; text-shadow:0 2px 6px rgba(2,40,74,.5); } .card > h2 .sec-ico{ display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; font-size:20px; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,.22) 44%, transparent 64%), linear-gradient(180deg,#7fe2ff,#0d78c4); border:1px solid rgba(255,255,255,.8); box-shadow:inset 0 -6px 12px rgba(0,40,80,.35), inset 0 2px 5px rgba(255,255,255,.9), var(--shadow-md); } .card h3{ font-size:17px; margin:20px 0 6px; text-shadow:0 1px 3px rgba(2,40,72,.55); } .card p, .card li{line-height:1.62;text-shadow:0 1px 2px rgba(2,40,72,.5);} .card p{margin:8px 0;font-size:15px;} .card ul, .card ol{margin:8px 0;padding-left:22px;font-size:15px;display:flex;flex-direction:column;gap:6px;} .card a{color:#dcff9e;font-weight:700;text-underline-offset:3px;} .card a:hover{color:#fff;} .card strong{color:#eaffc4;} /* Teclas */ kbd{ display:inline-block; min-width:26px; text-align:center; padding:3px 9px; margin:0 1px; border-radius:8px; font-family:var(--font-ui); font-size:13px; font-weight:700; color:var(--ink); background:linear-gradient(180deg,#ffffff,#dff2fd 52%,#b9def3); border:1px solid rgba(255,255,255,.9); box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(4,60,105,.55), 0 4px 8px rgba(2,32,60,.3); text-shadow:none; } /* Tablas */ .tbl-scroll{overflow-x:auto;margin:12px 0;border-radius:14px; border:1px solid rgba(255,255,255,.45);} table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px;} th, td{padding:10px 13px;text-align:left;vertical-align:top; border-bottom:1px solid rgba(255,255,255,.20);text-shadow:0 1px 2px rgba(2,40,72,.5);} thead th{ font-family:var(--font-display); font-weight:700; font-size:14px; background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12)); border-bottom:1px solid rgba(255,255,255,.5); } tbody tr:nth-child(odd){background:rgba(255,255,255,.07);} tbody tr:last-child td{border-bottom:none;} td:first-child{white-space:nowrap;font-weight:700;} /* Aviso / nota */ .note{ display:flex; gap:12px; align-items:flex-start; margin:14px 0 0; padding:13px 15px; border-radius:14px; border:1px solid rgba(255,255,255,.55); background:linear-gradient(180deg,rgba(143,226,34,.28),rgba(79,179,28,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .note.warn{background:linear-gradient(180deg,rgba(255,168,90,.30),rgba(214,59,18,.12));} .note-ico{font-size:19px;flex:none;line-height:1.4;} .note p{margin:0;font-size:14.5px;} /* Código */ pre{ margin:12px 0; padding:14px 16px; overflow-x:auto; border-radius:14px; border:1px solid rgba(255,255,255,.35); background:linear-gradient(180deg,rgba(3,48,93,.62),rgba(3,32,64,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); } pre code{font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace; font-size:13.5px;line-height:1.65;color:#dff4ff;text-shadow:none;} p code, li code, td code{ padding:2px 7px; border-radius:7px; font-size:13px; font-family:ui-monospace,'Cascadia Code',Consolas,monospace; background:rgba(3,44,86,.45); border:1px solid rgba(255,255,255,.25); color:#e6f8ff; text-shadow:none; } /* Rejilla de fichas */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin:14px 0 2px;} .tile{ padding:14px 15px; border-radius:15px; border:1px solid rgba(255,255,255,.5); background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.07)); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 5px 14px rgba(2,32,60,.2); } .tile b{display:block;font-family:var(--font-display);font-size:15.5px;margin-bottom:4px;} .tile span{font-size:14px;opacity:.92;line-height:1.55;} .tile-ico{font-size:22px;display:block;margin-bottom:6px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));} /* Pie */ .doc-foot{ margin-top:8px; padding:18px clamp(16px,2vw,24px); border-radius:var(--radius); border:1px solid rgba(255,255,255,.45); background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between; font-size:13.5px; text-shadow:0 1px 2px rgba(2,40,72,.5); } .doc-foot a{color:#dcff9e;font-weight:700;} /* Volver arriba */ .to-top{ position:fixed; right:20px; bottom:20px; z-index:6; display:grid; place-items:center; width:50px; height:50px; border-radius:50%; font-size:20px; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.8); background:linear-gradient(180deg,#7fd6ff 0%,#2b9fe0 47%,#1174b8 53%,#4fbdf0 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-md); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .22s ease, transform .22s ease, filter .15s ease; } .to-top.on{opacity:1;pointer-events:auto;transform:translateY(0);} .to-top:hover{filter:brightness(1.12);} /* ── Adaptación ────────────────────────────────────────────────── */ @media (max-width:940px){ .doc-wrap{grid-template-columns:1fr;} .toc{position:static;} .toc ol{flex-direction:row;flex-wrap:wrap;} .toc a{font-size:13px;padding:7px 11px;} .toc a:hover{transform:none;} } @media (max-width:520px){ .doc .brand-title{font-size:22px;} .doc .brand-orb{width:38px;height:38px;} .doc .brand-orb img{width:23px;height:23px;} a.tool{padding:9px 13px;font-size:13px;} .doc-wrap{padding-bottom:90px;} .to-top{right:12px;bottom:12px;width:44px;height:44px;} } @media (prefers-reduced-motion:reduce){ .toc a, .to-top{transition:none;} .toc a:hover{transform:none;} html{scroll-behavior:auto;} }