:root{ --bg:#0b0f14; --bg-elev:#121821; --bg-elev2:#1a2230; --border:#25303f; --text:#e8edf3; --text-dim:#8b97a8; --accent:#5b8cff; --accent2:#7ee0c0; --danger:#ff6b6b; --org:#f2a65a; --ok:#7ee0c0; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.45); --link:#5b8cff; --link-hover:#7ee0c0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; } /* Toggle claro/oscuro (Fase D #22, 13 jul 2026): overescribe las mismas variables CSS que ya usa todo el sitio, así que no hace falta duplicar ninguna regla — solo estos overrides sobre :root cuando el body lleva la clase .theme-light. "Persistido" significa durante esta sesión del navegador (en memoria, SITE.settings.themePreference) — coherente con la restricción de diseño del prototipo de no usar localStorage (sección 10 del documento maestro); se pierde al recargar, igual que el resto del estado de la demo. */ body.theme-light{ --bg:#f4f6f9; --bg-elev:#ffffff; --bg-elev2:#eef1f6; --border:#d7dde6; --text:#1a2230; --text-dim:#5b6675; --shadow:0 10px 30px rgba(20,30,50,.12); --link:#1d4fd8; --link-hover:#0e6b50; } /* Modo alto contraste (Fase D #21): paleta deliberadamente extrema (negro/blanco puro + acentos muy saturados) para maximizar legibilidad, independiente de claro/oscuro — se puede combinar con cualquiera de los dos. También en memoria durante la sesión (mismo criterio que arriba). */ body.high-contrast{ --bg:#000000; --bg-elev:#000000; --bg-elev2:#111111; --border:#ffffff; --text:#ffffff; --text-dim:#e8e8e8; --accent:#ffe14d; --accent2:#4dffea; --danger:#ff5c5c; --ok:#4dffb8; } body.high-contrast *{ text-shadow:none !important; } body.high-contrast .iconbtn, body.high-contrast .labelbtn, body.high-contrast button{ border-width:2px !important; } /* Temas adicionales (19 jul 2026, pedido de Ed: "más opciones de tema") — mismo mecanismo exacto que .theme-light de arriba (overrides de las variables CSS de :root sobre una clase en ), así que ningún selector nuevo hace falta en el resto de la hoja de estilos. Se pueden combinar con .high-contrast igual que los dos temas originales (high-contrast se aplica después en el cascade natural si el admin además lo activa, aunque en la práctica alto-contraste ya cubre ese caso de uso por sí solo). Ver applyThemePreferences()/admin.settings.theme* en app.js para la lista de valores válidos de themePreference. */ body.theme-sepia{ --bg:#f2e8d5; --bg-elev:#faf3e3; --bg-elev2:#ece0c8; --border:#d8c9a3; --text:#3a2f20; --text-dim:#7a6c53; --accent:#a8672b; --accent2:#7d8f4e; --shadow:0 10px 30px rgba(60,40,10,.14); --link:#8a4b14; --link-hover:#5f6f32; } body.theme-ocean{ --bg:#071a24; --bg-elev:#0d2733; --bg-elev2:#123545; --border:#1c4a5c; --text:#e3f4f7; --text-dim:#8bb6c2; --accent:#2fb8c6; --accent2:#5be0a8; --shadow:0 10px 30px rgba(0,0,0,.5); --link:#4fd3e0; --link-hover:#5be0a8; } body.theme-solarized{ --bg:#00212b; --bg-elev:#073642; --bg-elev2:#0c4453; --border:#155263; --text:#eee8d5; --text-dim:#93a1a1; --accent:#b58900; --accent2:#2aa198; --shadow:0 10px 30px rgba(0,0,0,.5); --link:#268bd2; --link-hover:#2aa198; } body.theme-rose{ --bg:#1c0f17; --bg-elev:#2a1620; --bg-elev2:#38202c; --border:#4d2c3a; --text:#f6e8ee; --text-dim:#b98fa0; --accent:#e0567e; --accent2:#e8a45c; --shadow:0 10px 30px rgba(0,0,0,.45); --link:#e0567e; --link-hover:#e8a45c; } /* Scrollbars modernos, sitio completo (14 jul 2026) — usa las mismas variables de tema que todo lo demás, así que se adapta solo entre oscuro/claro/alto-contraste sin reglas duplicadas. Firefox usa la versión corta (scrollbar-width/scrollbar-color); Chrome/Edge/Safari usan los pseudo-elementos ::-webkit-scrollbar*, que Firefox ignora. */ *{ scrollbar-width:thin; scrollbar-color:var(--border) var(--bg-elev2); } *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-track{ background:var(--bg-elev2); border-radius:8px; } *::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; border:2px solid var(--bg-elev2); } *::-webkit-scrollbar-thumb:hover{ background:var(--accent); } *::-webkit-scrollbar-corner{ background:var(--bg-elev2); } /* Navegación por teclado (Fase D #21): foco visible consistente en todo el sitio para quien navega con Tab en vez de mouse/touch — usa :focus-visible para no mostrar el anillo en clics de mouse (evita el "salto visual" que suele molestar), pero sí en foco por teclado. */ /* Navegación por teclado (Fase D #21): foco visible consistente en todo el sitio para quien navega con Tab en vez de mouse/touch — usa :focus-visible para no mostrar el anillo en clics de mouse (evita el "salto visual" que suele molestar), pero sí en foco por teclado. 22 jul 2026 (pedido de Ed, sección 6 del plan) — el color de este anillo usaba var(--accent) directo, el mismo que ya usan botones y pestañas; Ed lo percibía como "un azul fijo" porque nunca se podía cambiar aparte del resto. Ahora usa --outline-custom, una variable propia que cae en var(--accent) si Admin → Personalización → Visual no la personalizó (mismo comportamiento de hoy por defecto, cero cambio visual salvo que se configure explícitamente). Ver applyGlobalElementColors() en app.js. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .tab:focus-visible{ outline:2px solid var(--outline-custom, var(--accent)); outline-offset:2px; border-radius:4px; } /* 17 jul 2026 (Ed: "en iPhone y otros dispositivos algunos textos son difíciles de leer, especialmente los links") — causa real: el sitio nunca definía un color para enlaces en ningún lado, así que cualquier link "plano" (dentro del cuerpo de un artículo, "Ver video ↗", fuentes externas, etc.) caía en el color por defecto del navegador. El problema puntual: el color por defecto de un link YA VISITADO es un morado oscuro en la mayoría de navegadores (incluido iOS Safari), que sobre el fondo casi negro de este sitio (--bg) tiene contraste pésimo — cualquier fuente externa que el visitante ya hubiera abierto antes se volvía casi ilegible. Los anchors con clase .btn (que ya traen su propio color:#fff explícito) no se ven afectados — un selector de clase siempre gana contra este selector de elemento sin importar el orden. 22 jul 2026 (pedido de Ed, sección 6) — mismo criterio que el outline de arriba: --link-custom cae en var(--link) si no se personalizó. */ a{color:var(--link-custom, var(--link));} a:visited{color:var(--link-custom, var(--link));} a:hover, a:focus-visible{color:var(--link-hover);text-decoration-thickness:2px;} .pane-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--text-dim);font-size:13px;} .pane-loading .spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* Cargador de video de pantalla completa (14 jul 2026, opcional — ver SITE.settings.loader y assets/js/app.js, sección justo antes de init()). Se crea/destruye enteramente por JS (nunca vive en partials/app-shell.html) así que cuando está apagado no hay ni un solo nodo de este overlay en el DOM — cero costo. z-index por encima de todo lo demás en el sitio (incluido #walkme-overlay, el más alto anterior a 400). */ .site-loader{position:fixed;inset:0;z-index:999999;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:1;transition:opacity .65s ease;cursor:pointer;} .site-loader.fade-out{opacity:0;pointer-events:none;} .site-loader video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* 26 jul 2026 (Round 82, punto 8) — "Cargador de video" en modo "Network Canvas": el z-index baja de 999999 a uno por debajo de #topbar/menús flotantes (pero por encima del propio #network). 27 jul 2026 (nueva sesión, bug reportado por Ed — se veía a pantalla completa en Firefox/Opera de escritorio y en Chrome mobile) — ANTES esto dependía de un script en index.php que MEDÍA la altura real de #topbar en tiempo de ejecución y parcheaba top/height a mano (primero con reintentos fijos, después con ResizeObserver) — una carrera de timing contra layout/paint que no era 100% confiable en todos los navegadores. Fix real: index.php ya NO renderiza este bloque como hermano de #app (posición fija cubriendo el viewport entero) cuando el modo es "networkCanvas" — lo inyecta DENTRO de #content-area (que ya es `position:relative` y ya arranca exactamente debajo de #topbar por el propio layout flex-column de #app, sin necesitar ninguna medición). position:absolute acá (en vez de position:fixed, heredado de .site-loader arriba) es lo que hace que este bloque llene el espacio de ESE contenedor padre en vez del viewport entero — puro CSS, sin ninguna dependencia de timing de JS, así que el resultado es idéntico en cualquier navegador/dispositivo. */ .site-loader-canvas{position:absolute;z-index:15;} /* Respaldo si el video falla al cargar o el navegador bloquea la reproducción automática (p.ej. autoplay sin silenciar) — fondo oscuro liso en vez de una pantalla rota/en blanco; el texto (si hay) sigue mostrándose igual. */ .site-loader.site-loader-fallback{background:#0a0a0a;} /* 14 jul 2026 (v3, extendida v4) — apariencia configurable desde Admin → Configuración ("Cargador de video"): posición (arriba/centro/ abajo), color/opacidad de texto, color/opacidad de fondo, ancho del recuadro (% de pantalla), alineación del texto, tamaño de fuente y negrita. Los VALORES reales se calculan server-side (rcx_loader_config()/rcx_loader_tagline_style() en index.php) y se aplican vía style="" inline en el propio elemento — las reglas de acá son solo la estructura (position:absolute + centrado horizontal + box-sizing:border-box heredado del `*` global, para que el padding no se sume por fuera del max-width) y un respaldo visual que ya coincide con el default pedido por Ed (pegado al borde inferior, píldora semitransparente "ahumada" negra, texto blanco en negrita, más grande que el tamaño fijo anterior de 15px, ancho de hasta 90% de la pantalla) por si el inline style no llegara a aplicarse por algún motivo. position:absolute (antes: position:relative + centrado por el flex del padre) es lo que permite ubicar el texto arriba/centro/abajo de forma independiente del video de fondo. El div sigue siendo "shrink-to-fit" (ancho = lo que ocupe el texto, no el 90vw completo) — max-width acá es solo el TOPE que evita que un texto largo se corte antes de tiempo en una pantalla chica, o se estire absurdo en una grande (ver v4: taglineBoxWidthPercent, antes un max-width:560px fijo en px). */ /* width:max-content es necesario acá, no cosmético: sin él, un elemento absolutely positioned con left:50%+transform:translateX(-50%) (el truco de centrado) y width:auto usa un algoritmo de "shrink-to-fit" que — bug/particularidad conocida de CSS — calcula el "ancho disponible" tomando el offset de `left` como punto de partida (mitad del viewport acá), NO el ancho completo del contenedor. Resultado medido sin esta línea: en una pantalla de 360px con max-width:90vw (324px), el recuadro terminaba envolviendo el texto a ~206px de ancho — bastante menos de lo que max-width permitía, exactamente el problema que taglineBoxWidthPercent buscaba evitar. width:max-content fuerza el ancho intrínseco real del contenido (acotado igual por max-width), ignorando ese offset. */ .site-loader-tagline{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);width:max-content;z-index:1;color:#fff;background:rgba(0,0,0,.55);text-align:center;padding:14px 28px;font-size:26px;font-weight:700;line-height:1.35;text-shadow:0 2px 10px rgba(0,0,0,.6);max-width:90vw;border-radius:14px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);} /* 15 jul 2026 (Ed's punch list #11 — efectos de texto del tagline del cargador). Puro CSS a propósito: el loader se renderiza server-side (index.php) para evitar el FOUC corregido el 14 jul, así que la animación no puede depender de que JS termine de cargar/ejecutar. Clase asignada por rcx_loader_tagline_effect_class() en index.php (o por updateTaglinePreview() en assets/js/app.js para la vista previa del admin — mismas clases, mismo look). */ .tagline-fx-pulse{animation:tagline-fx-pulse 1.8s ease-in-out infinite;} @keyframes tagline-fx-pulse{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.06);}} .tagline-fx-fadeIn{animation:tagline-fx-fadein 1.4s ease-out both;} @keyframes tagline-fx-fadein{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}} .tagline-fx-bounce{animation:tagline-fx-bounce 1.6s ease-in-out infinite;} @keyframes tagline-fx-bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-10px);}} /* "typewriter" necesita un ancho fijo en unidades `ch` (dimensionado al texto vía la variable --tw-chars, calculada server-side en rcx_loader_tagline_effect_style()) y steps() en vez de una curva suave, para que se vea como texto apareciendo letra por letra en vez de un simple fundido/recorte. overflow:hidden + white-space:nowrap recortan el texto detrás del "cursor" de ancho creciente. */ .tagline-fx-typewriter{display:inline-block;overflow:hidden;white-space:nowrap;width:0;max-width:100%;animation:tagline-fx-typewriter 2s steps(var(--tw-chars,20),end) 1 forwards;} @keyframes tagline-fx-typewriter{from{width:0;}to{width:calc(var(--tw-chars,20) * 1ch);}} /* Nota: .site-loader-tagline sigue centrada con left:50%/ transform:translateX(-50%) mientras el ancho crece de 0 al valor final — el recuadro se expande simétricamente desde el centro a medida que aparecen letras, un comportamiento visual estándar y aceptado para este efecto (no un bug); el resto de los estilos inline (color/fondo/tamaño) los sigue calculando el mismo rcx_loader_tagline_style() de siempre, sin cambios. */ /* 27 jul 2026 (nueva sesión, items 2/3/4) — cargador nuevo de por-área (Articulos/Videos/Encuestas): a diferencia de .site-loader de arriba (a pantalla completa, fondo #000 fijo), este vive DENTRO de la vista real (#view-blog/#view-videos/#view-polls, ya position:absolute; inset:0 — ver esas reglas más abajo) y se retira por JS en "rcx:site-ready" (ver maybeShowAreaLoader() en assets/js/app.js). Temado con var(--bg) (no un color fijo) para que se vea bien en cualquiera de los temas de :root de arriba, y position:absolute (no fixed) porque el contenedor padre YA es position:absolute — llena ese contenedor por herencia de box model, sin medir nada. */ .site-area-loader{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:opacity .4s ease;} .site-area-loader.fade-out{opacity:0;pointer-events:none;} /* --- Biblioteca de tipos de cargador (item 4, ver rcx_loader_visual_html() en index.php y el mockup entregado a Ed) — mismas figuras que el mockup, temadas acá con las variables del sitio (var(--accent)/ var(--border)/var(--bg-elev2)) en vez de colores fijos. --- */ .lv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .lv-spinner-classic{width:48px;height:48px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--accent);animation:lv-spin .8s linear infinite;} .lv-spinner-dual{width:48px;height:48px;border-radius:50%;border:4px solid var(--accent2, var(--border));border-top-color:var(--accent);border-bottom-color:var(--accent);animation:lv-spin 1s linear infinite;} @keyframes lv-spin{to{transform:rotate(360deg);}} .lv-spinner-dots{display:flex;gap:8px;} .lv-spinner-dots span{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:lv-dots-bounce 1.1s ease-in-out infinite;} .lv-spinner-dots span:nth-child(2){animation-delay:.15s;} .lv-spinner-dots span:nth-child(3){animation-delay:.3s;} @keyframes lv-dots-bounce{0%,80%,100%{transform:translateY(0);opacity:.5;}40%{transform:translateY(-10px);opacity:1;}} .lv-bar-indeterminate,.lv-bar-striped{width:min(280px,70%);} .lv-bar-track{width:100%;height:8px;border-radius:999px;background:var(--bg-elev2);border:1px solid var(--border);overflow:hidden;} .lv-bar-indeterminate .lv-bar-fill{width:40%;height:100%;background:var(--accent);border-radius:999px;animation:lv-bar-slide 1.3s ease-in-out infinite;} @keyframes lv-bar-slide{0%{transform:translateX(-120%);}100%{transform:translateX(350%);}} .lv-bar-striped .lv-bar-fill{width:65%;height:100%;border-radius:999px; background-image:linear-gradient(45deg,var(--accent) 25%,transparent 25%,transparent 50%,var(--accent) 50%,var(--accent) 75%,transparent 75%,transparent); background-size:24px 24px;animation:lv-bar-stripes 1s linear infinite;} @keyframes lv-bar-stripes{from{background-position:0 0;}to{background-position:24px 0;}} .lv-bar-circular{width:52px;height:52px;animation:lv-spin 1.4s linear infinite;} .lv-bar-circular-track{fill:none;stroke:var(--border);stroke-width:3;} .lv-bar-circular-fill{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:80,200;} .lv-skeleton-card{width:min(280px,80%);display:flex;flex-direction:column;gap:10px;} .lv-sk-thumb{width:100%;height:140px;border-radius:12px;background:var(--bg-elev2);} .lv-sk-thumb,.lv-sk-line,.lv-sk-avatar{position:relative;overflow:hidden;} .lv-sk-thumb::after,.lv-sk-line::after,.lv-sk-avatar::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:lv-shimmer 1.4s ease-in-out infinite;} @keyframes lv-shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}} .lv-sk-line{height:12px;border-radius:6px;background:var(--bg-elev2);} .lv-sk-line-lg{width:80%;} .lv-sk-line-sm{width:50%;} .lv-skeleton-list{width:min(320px,85%);display:flex;flex-direction:column;gap:16px;} .lv-sk-row{display:flex;align-items:center;gap:12px;} .lv-sk-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-elev2);flex-shrink:0;} .lv-sk-row-lines{flex:1;display:flex;flex-direction:column;gap:8px;} .lv-image-icon{width:96px;height:96px;object-fit:contain;animation:lv-pulse 1.6s ease-in-out infinite;} .lv-image-bg{position:absolute;inset:0;background-size:cover;background-position:center;} @keyframes lv-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.92);}} .lv-gif{max-width:70%;max-height:70%;object-fit:contain;} /* --- item 6 (Ed): topbar/menús flotantes/burbuja de chat visibles pero inertes (atenuados, sin clic real) hasta que rcx:site-ready se dispara — ver initMenuLockUntilLoaded() en assets/js/app.js. opacity+grayscale en vez de pointer-events:none: el mouseover para el tooltip SÍ necesita seguir llegando a estos elementos; el bloqueo real del clic lo hace JS (capture:true + preventDefault), no CSS. --- */ body.rcx-menus-locked #topbar-actions, body.rcx-menus-locked .menu-group-stack, body.rcx-menus-locked #chat-widget-bubble{opacity:.4;filter:grayscale(65%);} body.rcx-menus-locked #topbar-actions, body.rcx-menus-locked #topbar-actions *, body.rcx-menus-locked .menu-group-stack, body.rcx-menus-locked .menu-group-stack *, body.rcx-menus-locked #chat-widget-bubble, body.rcx-menus-locked #chat-widget-bubble *{cursor:not-allowed !important;} .rcx-locked-tip{position:fixed;z-index:1000000;pointer-events:none;background:rgba(0,0,0,.85);color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;white-space:nowrap;} .rcx-locked-tip.show{opacity:1;transform:translateY(0);} *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;} #app{position:fixed;inset:0;display:flex;flex-direction:column;} #topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(180deg,var(--bg-elev),rgba(18,24,33,.9));border-bottom:1px solid var(--border);z-index:20;} #topbar h1{font-size:15px;font-weight:600;margin:0;white-space:nowrap;display:flex;align-items:center;gap:8px;} #topbar h1 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);} /* 17 jul 2026 (Ed) — el título ahora navega a home (ver el listener de #site-title en assets/js/app.js), así que necesita leerse como clickeable igual que cualquier otro control de la topbar. */ #topbar h1 #site-title{cursor:pointer;} #topbar h1 #site-title:hover{text-decoration:underline;} #topbar .spacer{flex:1;} /* 16 jul 2026 (pedido de Ed) — racimo de botones del topbar con scroll horizontal propio (mismo patrón que #admin-subnav, ver más abajo) para que en pantallas chicas ningún botón quede recortado fuera del viewport (ej. #btn-social). min-width:0 es necesario para que un hijo flex pueda encogerse por debajo de su ancho de contenido y active el overflow-x en vez de desbordar el #topbar. Los menús desplegables (#social-menu, #lang-menu, etc.) usan position:fixed, así que no los afecta el overflow de este contenedor. */ #topbar-actions{display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;flex-shrink:1;} #topbar-actions::-webkit-scrollbar{display:none;} .iconbtn{background:var(--bg-elev2);border:1px solid var(--border);color:var(--text);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:16px;transition:.15s;} .iconbtn:hover{border-color:var(--accent);color:var(--accent);} .iconbtn.active{background:var(--accent);color:#fff;border-color:var(--accent);} /* Botón de solo-icono, sin el "panel" (fondo/borde) del .iconbtn normal — usado por el botón de reloj junto a la consola de actividad reciente, que debe leerse como parte de esa píldora, no como un botón aparte. */ .bare-iconbtn{background:none;border:none;color:var(--text-dim);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:16px;border-radius:8px;transition:.15s;} .bare-iconbtn:hover{color:var(--accent);background:rgba(255,255,255,.06);} .labelbtn{background:var(--bg-elev2);border:1px solid var(--border);color:var(--text);height:38px;padding:0 12px;border-radius:10px;display:flex;align-items:center;gap:7px;justify-content:center;cursor:pointer;flex-shrink:0;font-size:13px;font-weight:600;transition:.15s;white-space:nowrap;} .labelbtn:hover{border-color:var(--accent);color:var(--accent);} .labelbtn.active{background:var(--accent);color:#fff;border-color:var(--accent);} .labelbtn .ico{font-size:15px;} @media (max-width:520px){ .labelbtn .lbl{display:none;} .labelbtn{width:38px;padding:0;} } /* 13 jul 2026 (pedido de Ed) — .btn/.btn.secondary/.btn.small existían solo dentro de #admin-main; en el sitio público (botón "← Volver al mapa", "Leer completo →"/"Leer en el sitio original →" de Artículos, barra Organizar, etc.) esos mismos botones se renderizaban SIN estilo alguno (blancos, con la tipografía/borde por defecto del navegador) — la causa real de que no parecieran "tarjetas clicables" modernas. */ .btn{display:inline-block;padding:10px 16px;border-radius:8px;border:none;font-weight:600;font-size:13px;cursor:pointer;background:var(--btn-custom, var(--accent));color:#fff;text-decoration:none;transition:.15s;} .btn:hover{background:#4577f0;} .btn.secondary{background:var(--bg-elev2);border:1px solid var(--border);color:var(--text);} .btn.secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-elev);} .btn.small{padding:6px 12px;font-size:12px;} #arrange-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#1e3a2f;border-bottom:1px solid #2f6b4f;color:#8fe0b8;font-size:13px;flex-wrap:wrap;} #arrange-bar .btn.small, #arrange-bar .btn.secondary.small{padding:6px 12px;font-size:12px;} /* 17 jul 2026 (Ed — controles de Mapa deben ocultarse fuera de la vista Mapa, ver claude/article_routes_navigation_plan.md punto 4): clase marcada en app-shell.html sobre los controles de la topbar que solo tienen sentido mirando el grafo (Mapa/Libre/Centrar/Agrupar/Capas). showContentLayer() en app.js agrega/quita "rcx-outside-map" en según la capa activa de #content-area. !important porque algunos de estos botones (#btn-arrange/#btn-reset-my-layout) ya tienen su propia lógica de display:none condicional (rol admin/disposición personal guardada) — esta regla solo debe GANAR cuando corresponde ocultar por sección, sin tocar ni pisar esa lógica existente cuando se vuelve al Mapa (no se toca ningún style inline, solo se agrega una regla CSS adicional que deja de aplicar al quitar la clase del body). #legend/#zoom-controls NO necesitan esta clase — viven dentro de #network, que ya se oculta entero al entrar a una sección (ver #content-area más abajo). */ body.rcx-outside-map .map-only{display:none !important;} /* 22 jul 2026 (bug reportado por Ed, Round 58, imagen 2) — #zoom-controls y #chat-widget-bubble compartían la misma esquina (right:16/20px, bottom:16/20px) — el chat bubble (z-index:150, círculo de 56px) tapaba los botones +/- en cualquier vista, y era más notorio en maximizado porque el grafo ocupa toda la pantalla. Se sube el offset inferior lo suficiente para despejar el bubble en todos los casos (mobile/web, normal/maximizado), y se agrega soporte de lado configurable (.side-left, ver applyZoomControlsSide() en app.js — Admin → Configuración). */ #zoom-controls{position:absolute;right:16px;bottom:92px;display:flex;flex-direction:column;gap:8px;z-index:15;} #zoom-controls.side-left{right:auto;left:16px;} #zoom-controls .iconbtn{width:42px;height:42px;font-size:20px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.35);} @media (max-width:520px){ #zoom-controls{right:10px;bottom:86px;} #zoom-controls.side-left{right:auto;left:10px;} } /* --- Buscador: fila propia debajo del topbar, alineado a la derecha, semitransparente hasta que se le da foco --- */ #searchbar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;pointer-events:none;} /* --- Agrupa la consola de actividad reciente y su botón "ver toda la actividad" (🕘) bien pegados entre sí (1px, a pedido de Ed 13 jul 2026), separados del buscador por el gap normal de la fila (arriba). --- */ #activity-cluster{display:flex;align-items:center;gap:1px;flex:1;min-width:0;max-width:560px;} /* --- Consola de actividad reciente (rota nodos/artículos/videos nuevos) --- */ /* 17 jul 2026 (Ed, punto 7) — causa real encontrada: esta caja no tenía una altura fija, así que su alto dependía de si el ítem rotado actual traía o no una segunda línea (.at-tag) además del texto — un ítem "más grande" (con tag) hacía crecer la caja, y como #searchbar-row es una fila normal del documento (no position:fixed), eso empujaba visiblemente el resto de la página hacia abajo/arriba en cada rotación del ticker (cada ~4.5s). height fija + .at-body como columna centrada (ver abajo) garantiza que la caja nunca cambie de tamaño sin importar cuánto contenido traiga el ítem actual. */ #activity-ticker{pointer-events:auto;flex:1;min-width:0;max-width:520px;height:44px;display:flex;align-items:center;gap:9px; background:rgba(26,34,48,.35);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08); border-radius:999px;padding:8px 16px 8px 12px;cursor:pointer;opacity:.8;transition:opacity .18s,background .18s,border-color .18s;overflow:hidden;} #legal-banner{display:none;align-items:center;gap:12px;padding:9px 16px;background:#3a2f14;border-bottom:1px solid #6b5420;color:#e8c97a;font-size:12.5px;line-height:1.4;flex-shrink:0;} #legal-banner.show{display:flex;} #legal-banner .txt{flex:1;} #legal-banner a{color:#f2d38a;text-decoration:underline;cursor:pointer;} #legal-banner button{background:none;border:1px solid #6b5420;color:#e8c97a;border-radius:8px;padding:3px 9px;font-size:12px;cursor:pointer;flex-shrink:0;} #legal-banner button:hover{background:#4a3d1c;} #site-footer{flex-shrink:0;padding:8px 16px;background:var(--bg-elev);border-top:1px solid var(--border);color:var(--text-dim);font-size:11px;line-height:1.5;text-align:center;} #site-footer a{color:var(--text-dim);text-decoration:underline;cursor:pointer;} /* 15 jul 2026 (Ed's punch list #10 — crédito/copyright configurable): bloque separado de #site-footer (aviso legal), más chico y con menos opacidad para quedar visualmente subordinado a ese aviso, siguiendo la práctica estándar de "el copyright va al pie del todo, en énfasis reducido". Controlado por renderCreditsUI() en app.js. */ #site-credit{flex-shrink:0;padding:4px 16px 8px;background:var(--bg-elev);color:var(--text-dim);opacity:.7;font-size:10px;line-height:1.4;text-align:center;} #cookie-consent-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-elev2);border-top:1px solid var(--border);color:var(--text);font-size:12.5px;line-height:1.4;box-shadow:0 -8px 24px rgba(0,0,0,.35);} #cookie-consent-banner.show{display:flex;} #cookie-consent-banner .txt{flex:1;} #cookie-consent-banner a{color:var(--accent);text-decoration:underline;cursor:pointer;} #cookie-consent-banner button{background:var(--accent);border:none;color:#04121f;border-radius:8px;padding:7px 16px;font-size:12.5px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap;} #cookie-consent-banner button:hover{opacity:.9;} @media (max-width:600px){ #cookie-consent-banner{flex-wrap:wrap;} #cookie-consent-banner button{width:100%;} } #walkme-overlay{display:none;position:fixed;inset:0;z-index:400;pointer-events:none;} #walkme-overlay.show{display:block;} #walkme-spotlight{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(5,8,12,.72);border:2px solid var(--accent);transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;pointer-events:none;} #walkme-card{position:fixed;width:280px;background:var(--bg-elev2);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5);padding:16px;pointer-events:auto;transition:top .25s ease,left .25s ease;} #walkme-card-title{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--text);} #walkme-card-text{font-size:12.5px;line-height:1.5;color:var(--text-dim);margin-bottom:12px;} #walkme-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;} #walkme-step-count{font-size:11px;color:var(--text-dim);flex-shrink:0;} #walkme-card-footer > div{display:flex;gap:6px;} .ra-author-tag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#e8c97a;background:#3a2f1440;border:1px solid #6b5420;padding:2px 8px;border-radius:999px;margin-bottom:6px;} .comment-agree{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--text-dim);line-height:1.4;margin:8px 0;cursor:pointer;} .comment-agree input{margin-top:2px;flex-shrink:0;} .comment-agree a{color:var(--text-dim);text-decoration:underline;cursor:pointer;} #activity-ticker:hover{opacity:1;background:var(--bg-elev2);border-color:var(--accent);} #activity-ticker.empty{cursor:default;} #activity-ticker .at-ico{flex-shrink:0;font-size:14px;line-height:1;} /* 17 jul 2026 (Ed, punto 7) — columna centrada dentro de la altura fija de #activity-ticker: cuando el ítem actual no trae .at-tag (solo una línea de texto), esta línea queda centrada verticalmente en la caja en vez de pegada arriba. */ #activity-ticker .at-body{min-width:0;flex:1;overflow:hidden;height:100%;display:flex;flex-direction:column;justify-content:center;} #activity-ticker .at-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent2);white-space:nowrap;} #activity-ticker .at-text{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @keyframes atFadeIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}} #activity-ticker .at-body.animate{animation:atFadeIn .3s ease;} @media (max-width:760px){ #activity-ticker{max-width:none;} } @media (max-width:520px){ #activity-ticker .at-tag{display:none;} } #search-wrap{position:relative;width:220px;max-width:60vw;flex-shrink:0;pointer-events:auto;transition:width .18s ease;} #search-wrap:focus-within{width:280px;} /* En pantallas chicas el buscador arranca más angosto para dejarle sitio a la consola de actividad (antes se la comía por completo — ver captura del reporte), y se agranda al enfocarlo (más incluso que en escritorio, ya que en focus la consola se oculta para cederle todo el espacio). */ #btn-activity-all{pointer-events:auto;flex-shrink:0;} @media (max-width:640px){ #search-wrap{width:132px;} #search-wrap:focus-within{width:min(76vw,320px);} /* 17 jul 2026 (Ed, bug reportado en mobile: el botón 🕘 no abría el popup) — root cause real: esta regla apuntaba a "#searchbar-row:focus-within", así que CUALQUIER elemento de la fila con foco la disparaba, incluido el propio botón — en mobile, tocar un