/* Estilos UI del Editor de Autoría Layout de Dashboard / Aplicación de Escritorio Web */ :root { --primary: #2563eb; --primary-hover: #1d4ed8; --bg-dark: #0f172a; --bg-panel: #ffffff; --bg-canvas: #f1f5f9; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --danger: #ef4444; --danger-hover: #dc2626; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; } body.editor-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--bg-canvas); color: var(--text-main); } /* Header Navbar */ .editor-header { background-color: var(--bg-dark); color: white; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10; } .logo { font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 10px;} .logo-img { height: 26px; width: auto; object-fit: contain; } /* nowrap: sin esto, al apretarse la cabecera el texto de los botones parte en dos líneas y la barra se descuadra entera (pasó al añadir "Tutorial"). */ .header-actions { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; } .header-actions .btn { white-space: nowrap; } .logo { min-width: 0; } /* Botones genéricos */ .btn { padding: 0.6rem 1rem; border: none; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s, transform 0.1s; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .btn:active { transform: scale(0.97); } /* Foco visible unificado. Antes cada control resolvía el foco por su cuenta (o lo dejaba en el anillo por defecto del navegador, distinto en cada uno): con una sola regla el recorrido con el teclado se ve igual en toda la app. :focus-visible = solo al navegar con teclado, no al hacer clic con el ratón. */ .btn:focus-visible, .btn-split:focus-visible, .btn-paint-bucket:focus-visible, .btn-add-interaction:focus-visible, .upload-btn:focus-within, .finish-select:focus-visible, .hotspot-item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; } /* Sobre el fondo oscuro de la cabecera, el azul de marca no se ve: anillo claro */ .editor-header .btn:focus-visible { outline-color: #93c5fd; } /* Deshabilitado: además de atenuarlo, el cursor lo dice */ .btn:disabled { cursor: not-allowed; } /* Deshacer/Rehacer: se ENCIENDEN en azul en cuanto hay algo que deshacer. Con el gris de la cabecera pasaban desapercibidos y parecían decorativos; el cambio de color avisa de que ahí hay una acción disponible. */ #btn-undo:not(:disabled), #btn-redo:not(:disabled) { background: var(--primary); } #btn-undo:not(:disabled):hover, #btn-redo:not(:disabled):hover { background: var(--primary-hover); } .btn-icon { padding: 0.6rem 0.7rem; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-hover); } .btn-secondary { background: #334155; color: white; } .btn-secondary:hover { background: #475569; } /* La taza va en AMARILLO de marca para destacar en la barra superior (el resto de iconos son grises). En hover, fondo ámbar cálido + taza blanca. */ .btn-donar { color: #FFC83D; } .btn-donar:hover { background: #b45309; color: #fff; } .btn-preview { background: #0d9488; color: white; } .btn-preview:hover { background: #0f766e; } .btn-preview:disabled:hover { background: #0d9488; } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: var(--danger-hover); } /* Layout de Paneles */ .editor-main { display: flex; flex: 1; overflow: hidden; } /* Primer contacto a UNA columna: sin modelo cargado, la barra derecha y la sección "Info del Módulo" no aportan nada y abrumaban — se ocultan hasta que haya modelo. La clase .sin-modelo la gestiona updateButtonStates. */ body.sin-modelo .sidebar-right { display: none; } body.sin-modelo details.panel-section[data-seccion="info"] { display: none; } @media (prefers-reduced-motion: no-preference) { body:not(.sin-modelo) .sidebar-right { animation: panel-aparecer 0.25s ease; } } @keyframes panel-aparecer { from { opacity: 0; } } .sidebar-left, .sidebar-right { width: 320px; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; z-index: 5; box-shadow: 2px 0 8px rgba(0,0,0,0.02); } .sidebar-right { border-right: none; border-left: 1px solid var(--border); box-shadow: -2px 0 8px rgba(0,0,0,0.02); } .panel-section { padding: 1.5rem; border-bottom: 1px solid var(--border); } .panel-section h3 { font-size: 0.72rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.5rem; } /* Secciones plegables de la barra lateral. Con el modelo cargado, la columna izquierda acumulaba casi TRES pantallas de herramientas apiladas (1472 px de scroll oculto en un portátil de 1366×768): para llegar a "Color de materiales" había que pasar por delante de todo lo demás. Ahora cada bloque se pliega, y se recuerda plegado o no en la sesión. */ details.panel-section { padding: 0; } details.panel-section > summary { list-style: none; cursor: pointer; user-select: none; padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.15s; } details.panel-section > summary::-webkit-details-marker { display: none; } details.panel-section > summary:hover { background: #f8fafc; color: var(--text-main); } details.panel-section > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; } /* Flecha que gira al abrir: la única pista de que el bloque se puede plegar */ details.panel-section > summary .chevron { margin-left: auto; transition: transform 0.2s; flex-shrink: 0; opacity: 0.6; } details.panel-section[open] > summary .chevron { transform: rotate(90deg); } .panel-section-body { padding: 0 1.5rem 1.5rem; } /* Pista corta bajo el título: dice para qué sirve el bloque, no cómo se usa */ .seccion-pista { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 1rem; } .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--primary); color: white; border-radius: 50%; font-size: 0.65rem; font-weight: 800; flex-shrink: 0; letter-spacing: 0; text-transform: none; } /* Componente de Subida de Archivos */ .upload-btn { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100%; text-align: center; padding: 1.25rem 1rem 1rem; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 10px; cursor: pointer; transition: all 0.2s; } .upload-btn:hover { background: #f0f7ff; border-color: var(--primary); } .upload-icon { color: var(--primary); opacity: 0.6; transition: opacity 0.2s, transform 0.2s; } .upload-btn:hover .upload-icon { opacity: 1; transform: translateY(-2px); } .upload-btn-text { font-size: 0.85rem; font-weight: 600; color: var(--primary); } .upload-btn-hint { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; letter-spacing: 0.02em; } .file-name { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.75rem; text-align: center; word-break: break-all;} .header-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.15); margin: 0 0.125rem; flex-shrink: 0; } .help-text { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.5; background: #fffbeb; padding: 10px; border-radius: 6px; border-left: 3px solid #f59e0b;} /* Viewport Central (model-viewer) */ .viewport { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%); } model-viewer { width: 100%; height: 100%; outline: none; } .empty-state-overlay { position: absolute; color: var(--text-muted); font-weight: 500; max-width: 460px; text-align: center; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .empty-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); line-height: 1.3; } .empty-sub { font-size: 0.9rem; line-height: 1.5; } .empty-cta { margin-top: 0.5rem; } /* "Volver al catálogo" sobre un modelo ya cargado: se muestra como una pantalla modal (fondo atenuado a pantalla completa + tarjeta blanca centrada), para que el catálogo tape el modelo en vez de flotar encima medio transparente. */ .catalogo-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(238, 241, 245, 0.92); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .empty-state-overlay.modal-catalogo { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 41; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); padding: 1.8rem 1.5rem 1.4rem; max-height: 90vh; overflow-y: auto; } .btn-cerrar-catalogo { position: absolute; top: 0.6rem; right: 0.6rem; display: inline-flex; align-items: center; gap: 0.3rem; background: #eef1f5; color: var(--text-main); border: none; padding: 0.35rem 0.6rem; border-radius: 8px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .btn-cerrar-catalogo:hover { background: #e2e6eb; } .btn-cerrar-catalogo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* El mejor argumento de la herramienta, dicho en pequeño: gratis y en local */ .empty-nota { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.9rem; } .empty-nota a { color: var(--primary); font-weight: 600; } /* Nota "Gratis, sin registro…": recuadro amarillo pastel, sutil y con aire. Menos pie de página, más aviso amable. Se centra con margin auto + fit-content. */ .nota-gratis { display: flex; align-items: center; gap: 0.65rem; width: fit-content; max-width: 460px; margin: 2rem auto 0; padding: 0.8rem 1.15rem; background: #FFF8E1; border: 1px solid #F3E0A6; border-radius: 14px; color: #6b5300; font-size: 0.8rem; line-height: 1.45; text-align: left; } .nota-gratis svg { flex: 0 0 auto; color: #E0A800; } .nota-gratis a { color: #b45309; font-weight: 700; text-decoration: underline; } .nota-gratis a:hover { color: #92400e; } /* Catálogo de figuras del estado vacío: una tarjeta-miniatura por figura. */ .catalogo-figuras { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.3rem; } .figura-card { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 96px; padding: 0.45rem 0.3rem; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .figura-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,0.15); transform: translateY(-2px); } .figura-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .figura-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: var(--bg-canvas); } .figura-label { font-size: 0.78rem; font-weight: 600; color: var(--text-main); } /* Enlace-acción en texto (astronauta de ejemplo): parece enlace, no botón. */ .link-btn { background: none; border: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; } .link-btn:hover { color: var(--primary-hover); } .link-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; } /* ── Donación ─────────────────────────────────────────────────────────────── Aviso post-exportación: confirma la descarga y pide el café. Vive donde el toast (esquina inferior centrada) porque lo SUSTITUYE en ese momento. */ .donar-aviso { position: fixed; bottom: 4.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; max-width: min(620px, calc(100vw - 2rem)); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 2.5rem 0.9rem 1.2rem; box-shadow: 0 12px 30px rgba(15,23,42,0.25); z-index: 999; } .donar-aviso[hidden] { display: none; } .donar-aviso p { font-size: 0.86rem; line-height: 1.5; color: var(--text-main); } .donar-cta { white-space: nowrap; font-size: 0.84rem; } .donar-cerrar { position: absolute; top: 0.3rem; right: 0.4rem; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.85rem; padding: 0.3rem; line-height: 1; } .donar-cerrar:hover { color: var(--text-main); } .donar-cerrar:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; border-radius: 4px; } /* Controles flotantes del visor (vista inicial del módulo) */ .viewport-tools { position: absolute; bottom: 1rem; right: 1rem; display: flex; gap: 0.4rem; z-index: 4; } .viewport-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; font-size: 0.78rem; font-weight: 600; background: rgba(255,255,255,0.95); color: var(--text-main); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,0.10); transition: all 0.2s; backdrop-filter: blur(4px); } .viewport-btn:hover { background: #fff; border-color: var(--primary); color: var(--primary); } .viewport-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .viewport-btn-sec { color: var(--text-muted); } /* Cuando ya hay una vista fijada, el botón lo dice de un vistazo */ .viewport-btn.fijada { background: #eff6ff; border-color: var(--primary); color: var(--primary); } /* ── Ayuda de navegación de cámara ────────────────────────────────────────── Chip arriba a la derecha del visor (abajo vive "Fijar esta vista") que despliega la chuleta de gestos. Se abre sola la primera vez que se carga un modelo y queda siempre a mano. */ .cam-ayuda { position: absolute; top: 1rem; right: 1rem; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; } .cam-ayuda-panel { width: 265px; background: rgba(255,255,255,0.97); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 0.95rem; box-shadow: 0 6px 18px rgba(15,23,42,0.16); font-size: 0.8rem; color: var(--text-main); backdrop-filter: blur(4px); text-align: left; } .cam-ayuda-lista { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .cam-ayuda-nota { color: var(--text-muted); font-size: 0.74rem; line-height: 1.45; margin-top: 0.5rem; } /* El chip marca cuándo la chuleta está abierta (mismo lenguaje que .fijada) */ #btn-cam-ayuda[aria-expanded="true"] { background: #eff6ff; border-color: var(--primary); color: var(--primary); } /* Formularios del Panel Derecho */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-main); } .form-group input, .form-group textarea { width: 100%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 0.9rem; background: #f8fafc; transition: all 0.2s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } /* Cerrar la edición de un punto (vuelve el menú de "Añadir interacción") */ .btn-cerrar-punto { margin-left: auto; width: 24px; height: 24px; flex-shrink: 0; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--text-muted); font-size: 0.9rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; } .btn-cerrar-punto:hover { background: #fee2e2; border-color: #fecaca; color: var(--danger-hover); } .btn-cerrar-punto:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; } /* Lista de puntos vacía: en vez de un hueco mudo, qué hacer para llenarla */ .lista-vacia { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; padding: 0.85rem; background: #f8fafc; border: 1px dashed var(--border); border-radius: 8px; } /* Editor de texto con formato (explicación de cada punto) */ .editor-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; gap: 0.5rem; } .editor-label-row label { margin-bottom: 0; } .btn-html-toggle { font-size: 0.68rem; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0.2rem 0.45rem; background: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: all 0.15s; } .btn-html-toggle:hover { background: #e2e8f0; color: var(--text-main); } .btn-html-toggle[aria-pressed="true"] { background: var(--bg-dark); color: #fff; border-color: var(--bg-dark); } .btn-html-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .rich-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 0.3rem; background: #f8fafc; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; } .rich-btn { min-width: 25px; height: 27px; padding: 0 0.2rem; font-size: 0.78rem; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--text-main); transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; } .rich-btn:hover { background: #e2e8f0; } .rich-btn.activo { background: #dbeafe; border-color: var(--primary); color: var(--primary); } .rich-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .rich-sep { width: 1px; height: 16px; background: var(--border); margin: 0 1px; } .rich-editor { min-height: 130px; max-height: 320px; overflow-y: auto; padding: 0.65rem; border: 1px solid #cbd5e1; border-radius: 0 0 6px 6px; background: #f8fafc; font-size: 0.9rem; line-height: 1.55; color: var(--text-main); transition: all 0.2s; } .rich-editor:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } /* Marcador de campo vacío: contenteditable no admite placeholder nativo */ .rich-editor:empty::before { content: attr(data-placeholder); color: #94a3b8; } .rich-editor h3 { font-size: 1rem; margin: 0.4rem 0; } .rich-editor ul, .rich-editor ol { margin: 0.3rem 0 0.3rem 1.3rem; } .rich-editor li { margin-bottom: 0.15rem; } .rich-editor a { color: var(--primary); } .rich-editor p { margin-bottom: 0.4rem; } /* Lo incrustado (vídeos, iframes) no se manipula aquí: se marca y se deja quieto */ .rich-editor iframe { max-width: 100%; pointer-events: none; border: 2px dashed #cbd5e1; } .editor-pista { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.4; } /* Hotspots Renderizados en el Editor */ .hotspot { display: block; width: 26px; height: 26px; border-radius: 50%; background-color: var(--primary); border: none; box-shadow: 0 0 0 4px rgba(37,99,235,0.3); cursor: pointer; transition: 0.2s; } .hotspot.selected { background-color: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,0.3); transform: scale(1.1);} .hotspot-annotation { color: white; font-size: 13px; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Lista Lateral de Hotspots */ /* La columna derecha son DOS zonas con scroll propio, no una sola lista larga. Antes, .list-section era flex:1 dentro de un