/* La red de Aequorea. Tokens --bs-* del brandbook; el violeta de personas es w0/w0 claro del brandbook, que no tiene token CSS. */
.red-page,.red-app{--red-concept:var(--bs-primary);--red-entity:var(--bs-cold-0);--red-person:#8D63D4;--red-milestone:var(--bs-life-2);--red-video:var(--bs-life-0);--red-glow:color-mix(in srgb,var(--bs-primary) 45%,transparent)}
html[data-theme=light] .red-page,html[data-theme=light] .red-app{--red-person:#7040A8}
.red-page{padding-top:2rem;padding-bottom:3rem}
.red-page h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:.7rem}
.red-page h1+p{max-width:60ch;color:var(--bs-text-1);font-size:1.02rem;line-height:1.7}
.red-app{color:var(--bs-text-0)}
.red-app :focus-visible,.red-directory a:focus-visible,.red-document a:focus-visible{outline:2px solid var(--bs-primary);outline-offset:3px}
.red-label{display:block;float:none;width:auto;margin:0 0 .5rem;padding:0;font:500 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--bs-text-2)}

/* Barra */
.red-tools{position:relative;z-index:4;display:grid;grid-template-columns:minmax(12rem,1fr) auto;align-items:end;gap:1rem 1.5rem;margin-top:1.75rem;padding:1.1rem 1.35rem 1.2rem;border:1px solid var(--bs-border);border-radius:1.5rem;background:var(--bs-surface-0)}
.red-search{position:relative;min-width:0}
.red-tools .red-search input{width:100%;min-height:44px;padding:.55rem 1.1rem .55rem 2.75rem;border:1px solid var(--bs-border);border-radius:999px;background:var(--bs-page-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23829499' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1.05rem 50%/17px;color:var(--bs-text-0);font:inherit;font-size:.95rem;transition:border-color .2s ease,box-shadow .2s ease}
.red-tools .red-search input:hover{border-color:color-mix(in srgb,var(--bs-primary) 45%,var(--bs-border))}
.red-tools .red-search input:focus-visible{outline:none;border-color:var(--bs-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--bs-primary) 18%,transparent)}
/* Dos filas equilibradas: búsqueda y profundidad arriba, tipos y «solo conexiones» abajo. */
.red-search{grid-area:1/1}.red-depth{grid-area:1/2}.red-types{grid-area:2/1}.red-toggle{grid-area:2/2}
.red-types{min-width:0;margin:0;padding:0;border:0}
.red-chip-row{display:flex;flex-wrap:wrap;gap:.4rem}
.red-chip{--c:var(--red-concept);position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;border:1px solid var(--bs-border);border-radius:999px;color:var(--bs-text-1);font-size:.88rem;white-space:nowrap;transition:background .2s ease,border-color .2s ease,color .2s ease}
.red-chip--entity{--c:var(--red-entity)}
.red-chip--person{--c:var(--red-person)}
.red-chip--milestone{--c:var(--red-milestone)}
.red-chip--video{--c:var(--red-video)}
.red-chip input,.red-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.red-chip-icon{flex:none;width:17px;height:17px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.red-chip:hover{border-color:var(--c)}
.red-chip:has(input:checked){border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--bs-text-0)}
.red-chip:has(input:not(:checked)) .red-chip-icon{opacity:.5;filter:none}
.red-chip:has(input:focus-visible),.red-toggle:has(input:focus-visible){outline:2px solid var(--bs-primary);outline-offset:3px}
.red-toggle{position:relative;display:flex;align-items:center;gap:.7rem;min-height:44px;max-width:13rem;border-radius:.8rem;color:var(--bs-text-1);font-size:.85rem;line-height:1.35}
.red-switch{position:relative;flex:none;width:40px;height:24px;border:1px solid var(--bs-border);border-radius:999px;background:var(--bs-page-bg);transition:background .2s ease,border-color .2s ease}
.red-switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--bs-text-2);transition:transform .2s ease,background .2s ease}
.red-toggle:has(input:checked){color:var(--bs-text-0)}
.red-toggle:has(input:checked) .red-switch{border-color:var(--bs-primary);background:color-mix(in srgb,var(--bs-primary) 22%,transparent)}
.red-toggle:has(input:checked) .red-switch::after{transform:translateX(16px);background:var(--bs-primary);box-shadow:0 0 10px var(--red-glow)}
.red-tools .red-depth select{appearance:none;min-height:44px;padding:0 2.4rem 0 1.05rem;border:1px solid var(--bs-border);border-radius:999px;background:var(--bs-page-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23829499' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center/13px;color:var(--bs-text-0);font:inherit;font-size:.88rem;cursor:pointer}
.red-depth option{background:var(--bs-surface-0);color:var(--bs-text-0)}

/* Resultados de búsqueda */
#red-results{position:absolute;top:calc(100% + .5rem);left:0;right:0;z-index:20;min-width:min(20rem,86vw);max-height:50vh;overflow:auto;padding:.4rem;border:1px solid var(--bs-border);border-radius:1.1rem;background:var(--bs-surface-0);box-shadow:0 28px 60px -24px rgba(0,0,0,.75)}
html[data-theme=light] #red-results{box-shadow:0 24px 50px -24px rgba(26,48,64,.4)}
#red-results [role=option]{display:flex;align-items:center;min-height:44px;padding:.5rem .9rem;border-radius:.75rem;font-size:.92rem;cursor:pointer}
#red-results [aria-selected=true],#red-results [role=option]:hover{background:color-mix(in srgb,var(--bs-primary) 14%,transparent);color:var(--bs-text-0)}
.red-result-group{padding:.7rem .9rem .3rem;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--bs-text-2)}

/* Lienzo */
.red-workspace{display:flex;gap:1rem;align-items:stretch;margin-top:1rem}
.red-stage{position:relative;flex:1;min-width:0}
.red-canvas{position:relative;height:clamp(440px,70vh,740px);overflow:hidden;border:1px solid var(--bs-border);border-radius:1.75rem;background:var(--bs-surface-0);isolation:isolate;box-shadow:inset 0 0 90px -40px rgba(0,0,0,.7)}
/* Trama de puntos: el color va en background-color (anima con el cambio de tema) y el patrón en una máscara.
   Como degradado saltaba de golpe mientras el resto tardaba .35s. z-index:-1 la deja bajo el SVG. */
.red-canvas::before,.red-app.is-full::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:color-mix(in srgb,var(--bs-text-2) 26%,transparent);-webkit-mask:radial-gradient(circle at 1px 1px,#000 1px,transparent 1.5px) 0 0/26px 26px;mask:radial-gradient(circle at 1px 1px,#000 1px,transparent 1.5px) 0 0/26px 26px}
html[data-theme=light] .red-canvas{box-shadow:inset 0 0 70px -40px rgba(26,48,64,.3)}
.red-svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.red-svg:active{cursor:grabbing}
/* El lienzo tiene tabindex para el teclado: al pulsar con el ratón no debe dibujarse el anillo del navegador.
   Con teclado sí, hacia dentro, porque .red-canvas recorta lo que sale (overflow:hidden). */
.red-svg:focus{outline:none}
.red-svg:focus-visible{outline:2px solid var(--bs-primary);outline-offset:-2px}
.red-compact .red-svg{touch-action:pan-y;cursor:default}
.red-buttons{position:absolute;top:.85rem;right:.85rem;z-index:2;display:flex;gap:.4rem}
.red-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 1rem;border:1px solid var(--bs-border);border-radius:999px;background:color-mix(in srgb,var(--bs-surface-0) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--bs-text-0);font:500 .82rem/1 Outfit,sans-serif;letter-spacing:.01em;cursor:pointer;transition:border-color .2s ease,color .2s ease,box-shadow .2s ease}
.red-btn:hover{border-color:var(--bs-primary);color:var(--bs-primary);box-shadow:0 0 22px -8px var(--red-glow)}
.red-btn--icon{width:40px;padding:0;font-size:1.15rem}
/* Animación histórica: el video en curso y un eje proporcional al tiempo con un punto por video y marcas
   de año, así mide lo mismo con 4 videos que con 200. Sin animaciones CSS continuas (parpadeaban en
   Android): el avance lo escribe app.js paso a paso. */
.red-story{position:absolute;left:50%;bottom:.85rem;z-index:2;width:min(40rem,calc(100% - 1.7rem));padding:.55rem .9rem .35rem;border:1px solid var(--bs-border);border-radius:1.1rem;background:color-mix(in srgb,var(--bs-surface-0) 88%,transparent);transform:translateX(-50%);pointer-events:none}
.red-story-now{display:flex;align-items:baseline;gap:.6rem;min-width:0;min-height:1.1rem;margin:0 0 .45rem}
.red-story-date{flex:none;font:500 10px/1.3 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--bs-primary)}
.red-story-title{min-width:0;overflow:hidden;font-size:.8rem;line-height:1.35;color:var(--bs-text-0);white-space:nowrap;text-overflow:ellipsis}
/* La línea, el avance y los puntos van dentro de un margen de 5 px: el primero y el último no se cortan. */
.red-story-axis{position:relative;height:1.5rem;margin:0 5px}
.red-story-axis::before,.red-story-fill{content:'';position:absolute;left:0;right:0;top:4px;height:2px;border-radius:1px;background:var(--bs-border)}
.red-story-fill{background:var(--bs-primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.red-story-dot{position:absolute;top:1px;width:8px;height:8px;margin-left:-4px;border:1.5px solid var(--bs-text-2);border-radius:50%;background:var(--bs-surface-0);transition:background .25s ease,border-color .25s ease}
.red-story-dot.is-past{border-color:var(--bs-primary);background:var(--bs-primary)}
.red-story-dot.is-on{border-color:var(--bs-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--bs-primary) 30%,transparent)}
.red-story-year{position:absolute;top:.85rem;font:400 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--bs-text-2);transform:translateX(-50%)}
/* El botón flotante de volver arriba tapaba la línea de tiempo. */
body.red-story-open #back-to-top{display:none}
@media(max-width:480px){.red-story{padding:.45rem .7rem .3rem}.red-story-title{font-size:.74rem}}
.red-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.5rem;margin-top:.8rem}
.red-help,.red-status{margin:0;font:400 10.5px/1.6 'JetBrains Mono',monospace;letter-spacing:.03em;color:var(--bs-text-2)}
.red-status{color:var(--bs-text-1)}

/* Nodos y aristas */
.red-node{--c:var(--red-concept);cursor:pointer}
.red-entity{--c:var(--red-entity)}
.red-person{--c:var(--red-person)}
.red-milestone{--c:var(--red-milestone)}
.red-video{--c:var(--red-video)}
.red-node:focus,.red-edge:focus{outline:none}
.red-node-hit{fill:transparent;stroke:none}
.red-node-halo{fill:var(--c);opacity:.1;pointer-events:none;transition:opacity .25s ease}
.red-node-body{fill:color-mix(in srgb,var(--c) 18%,var(--bs-surface-0));stroke:var(--c);stroke-width:1.6;transition:fill .25s ease,stroke-width .2s ease}
.red-node.is-principal .red-node-body{stroke-width:2.2}
.red-icon{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.red-node text{font:400 12.5px Lexend,sans-serif;fill:var(--bs-text-1);paint-order:stroke;stroke:var(--bs-surface-0);stroke-width:4.5px;stroke-linejoin:round;pointer-events:none;transition:fill .2s ease}
.red-node.is-principal text{font:600 14.5px Outfit,sans-serif;fill:var(--bs-text-0)}
.red-node:hover .red-node-halo,.red-node:focus-visible .red-node-halo,.red-node.is-related .red-node-halo{opacity:.22}
.red-node:hover .red-node-body,.red-node:focus-visible .red-node-body{stroke-width:2.8}
.red-node:hover text,.red-node:focus-visible text,.red-node.is-related text{fill:var(--bs-text-0)}
.red-node:focus-visible .red-node-hit{stroke:var(--bs-text-0);stroke-width:1.5;stroke-dasharray:3 4}
.red-node.is-selected .red-node-body{fill:var(--c);stroke:color-mix(in srgb,var(--c) 45%,var(--bs-text-0));stroke-width:2.5}
.red-node.is-selected .red-icon{stroke:var(--bs-page-bg);stroke-width:2.2}
.red-node.is-selected .red-node-halo{opacity:.3;transition:none}
.red-node.is-selected text{font:600 15px Outfit,sans-serif;fill:var(--bs-text-0)}
/* Atenuado en las piezas y no en el grupo: un grupo translúcido que se mueve cada frame se pinta en una capa aparte. */
.red-node.is-dimmed :is(.red-node-body,.red-icon,text){opacity:.4;transition:opacity .2s ease}
.red-node.is-dimmed .red-node-halo{opacity:.04}
.red-node.is-dimmed:hover :is(.red-node-body,.red-icon,text){opacity:1}
.red-edge-line{fill:none;stroke:var(--bs-text-2);transition:stroke .2s ease}
.red-edge-hit{fill:none;stroke:transparent;stroke-width:16;cursor:help}
.red-arrow{fill:var(--bs-text-2)}
.red-arrow.is-on{fill:var(--bs-primary)}
.has-selection .red-edge:not(.is-related) .red-edge-line{opacity:.35}
.red-edge.is-related .red-edge-line{stroke:var(--bs-primary);stroke-opacity:.95;stroke-dasharray:6 6}
.red-edge:hover .red-edge-line,.red-edge:focus .red-edge-line{stroke:var(--bs-primary);stroke-opacity:1}
.red-edge-label{font:400 11px Lexend,sans-serif;fill:var(--bs-text-1);paint-order:stroke;stroke:var(--bs-surface-0);stroke-width:4px;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .2s ease}
.red-edge:hover .red-edge-label,.red-edge:focus .red-edge-label,.red-edge.is-related .red-edge-label{opacity:1}

/* Ficha */
/* La ficha crece con la pantalla: a 360 px fijos, en un monitor grande el texto quedaba en unos 38 caracteres por línea. */
.red-panel{--c:var(--red-concept);position:relative;flex:0 0 clamp(360px,34%,440px);min-width:0;height:clamp(440px,70vh,740px);overflow:auto;padding:0 1.4rem 1.4rem;border:1px solid var(--bs-border);border-radius:1.75rem;background:var(--bs-surface-0);overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--bs-border) transparent}
.red-panel[data-kind=entity]{--c:var(--red-entity)}
.red-panel[data-kind=person]{--c:var(--red-person)}
.red-panel[data-kind=milestone]{--c:var(--red-milestone)}
.red-panel[data-kind=video]{--c:var(--red-video)}
.red-watch{display:inline-flex;align-items:center;min-height:44px;margin:.2rem 0 .4rem;padding:0 1.1rem;border:1px solid color-mix(in srgb,var(--c,var(--red-video)) 55%,transparent);border-radius:999px;font:600 .82rem/1 Outfit,sans-serif;color:var(--c,var(--red-video));text-decoration:none;transition:background .22s ease}
.red-watch:hover{background:color-mix(in srgb,var(--c,var(--red-video)) 14%,transparent)}
.red-panel[hidden]{display:none}
.red-sheet-handle{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;gap:.4rem;margin:0 -1.4rem;padding:1rem 1rem .6rem}
/* El fundido va en una máscara y el color en background-color: un degradado no interpola y, animado con @property, Chrome no lo repinta en cada fotograma. */
.red-sheet-handle::after{content:'';position:absolute;inset:0;z-index:-1;background-color:var(--bs-surface-0);-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent);pointer-events:none}
.red-sheet-handle [data-red-expand]{display:none}
.red-kind{display:inline-flex;align-items:center;gap:.55rem;margin:0;font:500 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--c)}
.red-kind svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.red-panel h2{margin:.45rem 0 .7rem;font:700 clamp(1.6rem,2.4vw,2.05rem)/1.1 Outfit,sans-serif;letter-spacing:-.015em;color:var(--bs-text-0)}
.red-panel h2:focus{outline:none}
.red-panel h2+p,.red-panel-details>p{color:var(--bs-text-1);font-size:.92rem;line-height:1.65}
.red-panel h2+p+.red-panel-details>p{margin-top:.7rem}
.red-panel h3{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 .7rem;font:500 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--bs-text-2)}
.red-panel h3::after{content:'';flex:1;height:1px;background:var(--bs-border)}
.red-panel .red-relation-group{margin:0 0 1rem;padding:0}
.red-relation-group h4{margin:0 0 .4rem;font:400 .8rem/1.45 Lexend,sans-serif;color:var(--bs-text-2)}
.red-relation-group ul{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}
.red-relation-group li{padding:.6rem .85rem;border:1px solid var(--bs-border);border-radius:.95rem;background:color-mix(in srgb,var(--bs-surface-1) 55%,transparent);transition:border-color .2s ease}
.red-relation-group li:hover{border-color:color-mix(in srgb,var(--bs-primary) 45%,var(--bs-border))}
.red-relation-group li>a{font:500 .98rem/1.3 Outfit,sans-serif;color:var(--bs-text-0);text-decoration:none}
.red-relation-group li>a:hover{color:var(--bs-primary)}
.red-panel details summary{display:inline-flex;align-items:center;gap:.4rem;min-height:32px;margin-top:.15rem;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--bs-primary);list-style:none;cursor:pointer}
.red-panel details summary::-webkit-details-marker{display:none}
.red-panel details summary::before{content:'+';font-size:13px;letter-spacing:0}
.red-panel details[open] summary::before{content:'−'}
.red-panel details .red-sources{margin-bottom:.3rem}
.red-panel-details>a{display:inline-flex;margin-top:1rem;color:var(--bs-primary);font:500 .9rem Outfit,sans-serif}
.red-sources{display:grid;gap:.75rem;margin:.4rem 0 0;padding:0;list-style:none}
/* Los li de las rejillas no deben crecer al ancho del título completo: así el botón se ajusta y el título se desplaza. */
.red-sources>li,.red-relation-group li{min-width:0}
.red-sources li>a{display:inline-flex;align-items:center;gap:.6rem;max-width:100%;min-height:32px;padding:0 .8rem;border:1px solid color-mix(in srgb,var(--bs-primary) 40%,transparent);border-radius:999px;color:var(--bs-primary);text-decoration:none;transition:background .2s ease}
.red-source-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 .78rem/1.3 Lexend,sans-serif;color:var(--bs-text-0)}
.red-marquee{display:inline-block;white-space:nowrap}
.red-source-title.is-overflowing{text-overflow:clip;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.1rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 1.1rem),transparent)}
.red-source-title.is-overflowing .red-marquee{animation:red-marquee var(--marquee-time,8s) ease-in-out infinite alternate}
.red-source-time{flex:none;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--bs-primary)}
@keyframes red-marquee{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--shift,0))}}
@media(prefers-reduced-motion:reduce){.red-source-title.is-overflowing{text-overflow:ellipsis;-webkit-mask-image:none;mask-image:none}}
.red-sources li>a:hover{background:color-mix(in srgb,var(--bs-primary) 12%,transparent)}
.red-sources blockquote{margin:.5rem 0 0;padding:.1rem 0 .1rem .9rem;border-left:2px solid color-mix(in srgb,var(--c,var(--bs-primary)) 60%,transparent);color:var(--bs-text-1);font-size:.85rem;font-style:italic;line-height:1.7}
.red-history{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0}
.red-history a{display:inline-flex;align-items:center;min-height:32px;padding:0 .8rem;border:1px solid var(--bs-border);border-radius:999px;color:var(--bs-text-1);font-size:.8rem;text-decoration:none}
.red-history a:last-child{border-color:color-mix(in srgb,var(--bs-primary) 50%,transparent);color:var(--bs-text-0)}
.red-history a:hover{color:var(--bs-primary)}

/* Sin JS, índice y portada */
.red-static-node article{max-width:75ch;margin:2rem 0}
.red-static-node[hidden]{display:none}
.red-static-node a{color:var(--bs-text-0);text-decoration:underline;text-decoration-color:var(--bs-primary);text-underline-offset:4px}
.red-directory{margin:2.5rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--bs-border)}
.red-directory summary{display:flex;align-items:center;min-height:44px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--bs-text-2);cursor:pointer}
.red-node-list{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:.75rem 0;list-style:none}
.red-node-list a{display:inline-flex;align-items:center;min-height:40px;padding:0 .95rem;border:1px solid var(--bs-border);border-radius:999px;color:var(--bs-text-1);font-size:.86rem;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.red-node-list a:hover{border-color:var(--bs-primary);color:var(--bs-text-0)}
.red-compact{margin:1.5rem 0}
.red-compact .red-canvas{height:400px}
.red-compact .red-status{margin-top:.8rem}
.red-compact .red-status:empty{display:none}
.red-compact .red-edge{pointer-events:none}
.red-documents{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1rem;margin:1.5rem 0}
.red-document{padding:1.4rem;border:1px solid var(--bs-border);border-radius:1.5rem;background:var(--bs-surface-0);transition:border-color .2s ease,transform .2s ease}
.red-document:hover{border-color:color-mix(in srgb,var(--bs-primary) 50%,var(--bs-border));transform:translateY(-2px)}
.red-document h3{font-size:1.05rem;line-height:1.5}
.red-document a{color:var(--bs-text-0);text-decoration:none}
.red-document p{margin-top:.8rem;color:var(--bs-text-1);font-size:.85rem}

@media(max-width:760px){
.red-page{padding-bottom:4rem}
.red-page .container{padding-left:1rem;padding-right:1rem}
.red-tools{grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.25rem;padding:1rem;border-radius:1.25rem}
.red-search,.red-types{grid-column:1/-1}
.red-toggle{max-width:none;font-size:.8rem}
.red-toggle,.red-depth{grid-column:1/-1}
.red-search,.red-types,.red-toggle,.red-depth{grid-row:auto}
.red-depth{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.red-depth .red-label{margin:0}
.red-chip-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.red-chip{min-height:40px;gap:.45rem;padding:0 .8rem;font-size:.82rem}
.red-workspace{display:block;margin-top:.8rem}
.red-canvas{height:64vh;min-height:400px;border-radius:1.4rem}
.red-buttons{top:.6rem;right:.6rem}
.red-help{display:none}
.red-panel{position:fixed;z-index:90;left:0;right:0;bottom:0;height:auto;max-height:36dvh;padding:0 1.15rem calc(1.1rem + env(safe-area-inset-bottom));border-bottom:0;border-radius:1.5rem 1.5rem 0 0;box-shadow:0 -24px 48px -20px rgba(0,0,0,.65);overscroll-behavior:contain;transition:max-height .3s ease}
.red-panel.is-expanded{max-height:84dvh}
.red-sheet-handle{justify-content:space-between;margin:0 -1.15rem;padding:1.35rem 1rem .6rem;touch-action:none}
.red-sheet-handle::before{content:'';position:absolute;top:.55rem;left:50%;width:42px;height:4px;border-radius:2px;background:var(--bs-border);transform:translateX(-50%)}
.red-sheet-handle [data-red-expand]{display:inline-flex}
/* En la hoja móvil Expandir va a la izquierda; Compartir se agrupa con Cerrar a la derecha. */
.red-sheet-handle [data-red-share]{margin-left:auto}
.red-panel:not(.is-expanded) .red-panel-details{display:none}
.red-compact .red-canvas{height:320px}
}
/* Vista expandida: la red ocupa todo bajo el header sticky. Búsqueda y filtros siguen arriba y la
   trama de puntos del lienzo pasa a ser el fondo entero. --red-top lo mide app.js con el header. */
.red-max-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.red-max-close,.red-app.is-full .red-max-open{display:none}
.red-app.is-full .red-max-close{display:inline}
/* styles.css pone overflow-x:hidden en <html>, que así pasa a ser el que hace scroll: bloquear solo el body
   no basta y la rueda sobre el header o la barra desplazaba la página y dejaba un hueco. */
html:has(body.red-full-open),body.red-full-open{overflow:hidden;overscroll-behavior:none}
/* main y footer comparten z-index:1 (bs-base) y el footer va después: sin esto se pinta encima del lienzo. */
body.red-full-open main{z-index:60}
body.red-full-open #back-to-top{display:none}
.red-app.is-full{--red-gap:clamp(.75rem,2vw,1.5rem);position:fixed;inset:var(--red-top,0px) 0 0;z-index:50;display:block;padding:0;background:var(--bs-surface-0);isolation:isolate}
/* El lienzo ocupa todo, también detrás de la barra: así la trama y los nodos no se cortan. */
.red-app.is-full .red-workspace,.red-app.is-full .red-stage{position:absolute;inset:0;display:block;margin:0}
.red-app.is-full .red-canvas{height:100%;min-height:0;border:0;border-radius:0;background:none;box-shadow:none}
.red-app.is-full .red-canvas::before{display:none}
/* Barra compacta y translúcida flotando encima; las etiquetas quedan solo para lectores de pantalla. */
.red-app.is-full .red-tools{position:absolute;z-index:6;top:var(--red-gap);left:var(--red-gap);display:grid;grid-template-columns:auto auto;align-items:center;gap:.45rem .7rem;width:fit-content;max-width:calc(100% - 2*var(--red-gap));margin:0;padding:.45rem .55rem;border-radius:1.2rem;background:color-mix(in srgb,var(--bs-page-bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto}
.red-app.is-full .red-tools .red-label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Con sitio de sobra, todo en una fila: la barra es lo más baja posible. */
@media(min-width:1280px){
.red-app.is-full .red-tools{grid-template-columns:15rem auto auto auto}
.red-app.is-full .red-search{grid-area:1/1}.red-app.is-full .red-types{grid-area:1/2}.red-app.is-full .red-toggle{grid-area:1/3}.red-app.is-full .red-depth{grid-area:1/4}
}
.red-app.is-full .red-tools .red-search input,.red-app.is-full .red-tools .red-depth select{min-height:36px}
.red-app.is-full .red-chip-row{flex-wrap:wrap;gap:.3rem}
.red-app.is-full .red-chip{min-height:36px;gap:.4rem;padding:0 .7rem;font-size:.8rem}
.red-app.is-full .red-toggle{max-width:11.5rem;min-height:36px;gap:.5rem;font-size:.72rem;line-height:1.25}
.red-app.is-full .red-buttons{top:auto;right:auto;bottom:var(--red-gap);left:var(--red-gap)}
.red-app.is-full .red-panel{position:absolute;z-index:5;top:calc(var(--red-tools-h,64px) + 2*var(--red-gap));right:var(--red-gap);bottom:var(--red-gap);width:clamp(360px,30vw,640px);height:auto;background:color-mix(in srgb,var(--bs-surface-0) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.red-app.is-full .red-foot,.red-app.is-full .red-history{display:none}
@media(max-width:760px){
.red-app.is-full{--red-gap:.5rem}
.red-app.is-full .red-tools{right:var(--red-gap);display:flex;flex-wrap:wrap;width:auto;gap:.4rem;padding:.45rem}
.red-app.is-full .red-search,.red-app.is-full .red-types{flex:1 1 100%;min-width:0}
/* En móvil la barra entera se come el lienzo: queda la búsqueda y los chips en una fila deslizable. */
.red-app.is-full .red-toggle,.red-app.is-full .red-depth{display:none}
.red-app.is-full .red-chip-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.red-app.is-full .red-chip-row::-webkit-scrollbar{display:none}
.red-app.is-full .red-chip{flex:none}
.red-app.is-full .red-buttons{bottom:auto;left:auto;top:calc(var(--red-tools-h,96px) + 2*var(--red-gap));right:var(--red-gap)}
.red-app.is-full .red-panel{position:fixed;z-index:7;top:auto;left:0;right:0;bottom:0;width:auto;height:auto}
/* Expandida, la hoja se detiene bajo la barra: si la cruzaba, la búsqueda tapaba Expandir y Cerrar. */
.red-app.is-full .red-panel.is-expanded{max-height:calc(100dvh - var(--red-top,0px) - var(--red-tools-h,96px) - 3*var(--red-gap))}
}
@media(prefers-reduced-motion:reduce){.red-app *,.red-app *::before,.red-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}