:root{--fondo:#fff;--texto:#1b1f24;--suave:#5b6573;--linea:#d8dee6;--acento:#0b5fff;--aviso:#fff7e0}
@media (prefers-color-scheme:dark){:root{--fondo:#101419;--texto:#e6eaf0;--suave:#9aa5b4;--linea:#2a323d;--acento:#7aa7ff;--aviso:#2b2512}}
*{box-sizing:border-box}body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.6 system-ui,sans-serif}
.cabecera{padding:12px 16px;border-bottom:1px solid var(--linea)}.marca{font-weight:700;text-decoration:none;color:var(--texto)}.miga{color:var(--suave)}
a{color:var(--acento)}.contenido{max-width:46rem;margin:0 auto;padding:16px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:12px}
.tarjeta{display:block;padding:16px;border:1px solid var(--linea);border-radius:8px;text-decoration:none}
.secciones{margin-bottom:16px}.secciones a,.secciones .actual{margin-right:12px}.actual{font-weight:700}
.aviso{background:var(--aviso);border-left:4px solid var(--acento);padding:4px 12px;margin:12px 0}
pre{overflow-x:auto;padding:12px;border:1px solid var(--linea);border-radius:6px}code{font-family:ui-monospace,monospace}
.tabla{border-collapse:collapse;display:block;overflow-x:auto}.tabla th,.tabla td{border:1px solid var(--linea);padding:6px 10px;text-align:left}
.buscador{margin:12px 0}.buscador input{padding:8px;min-width:14rem;border:1px solid var(--linea);border-radius:6px;background:var(--fondo);color:var(--texto)}.buscador button{padding:8px 14px}
.pasos{list-style:none;margin:16px 0;padding:0}.pasos figure{margin:0 0 16px}.pasos figcaption{color:var(--suave);font-size:14px;margin-top:4px}
.pasos.activa li{display:none}.pasos.activa li.visible{display:block}
.reproductor{margin:16px 0;padding:12px;border:1px solid var(--linea);border-radius:8px}.reproductor:focus-visible{outline:2px solid var(--acento)}
.reproductor .avance{display:block;width:100%;height:6px;margin:8px 0;accent-color:var(--acento)}
.controles{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.controles button{padding:6px 14px}.controles .cuenta{margin-left:auto;color:var(--suave);font-size:14px}
.formulario{display:grid;gap:10px;max-width:40rem}.formulario input,.formulario textarea{padding:8px;border:1px solid var(--linea);border-radius:6px;background:var(--fondo);color:var(--texto);font:inherit}.formulario textarea{min-height:24rem;font-family:ui-monospace,monospace}.formulario button{padding:8px 14px;justify-self:start}
img{max-width:100%;height:auto}.pie{padding:16px;color:var(--suave);text-align:center;font-size:14px}