, arriba de la sección "Dispositivos", que sigue intacta debajo. La topbar global (plugins/notificaciones/idioma/ usuario) es un elemento aparte (.global-topbar) y no se toca acá. ── */ .panel-hero { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; margin-bottom: 20px; } /* Título + subtítulo del panel viven en la topbar global (ver .global-topbar-panel-title más abajo) — solo se muestran en la sección Inicio, alternado por switchSection(). */ .global-topbar-panel-title { display: flex; flex-direction: column; justify-content: center; margin-left: 16px; min-width: 0; line-height: 1.2; } .global-topbar-panel-title h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; } .global-topbar-panel-title p { font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-hero-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--border); } .panel-status-pill { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); cursor: default; } .panel-status-pill.panel-status-blink { cursor: pointer; animation: panelStatusBlink 1.1s ease-in-out infinite; } /* Punto discreto (sin parpadeo, no es una emergencia) que indica que hay una actualización disponible aunque el sistema esté sano -- así el indicador sigue siendo visible/clickeable sin pintar todo el pill de "error". */ .panel-status-pill.panel-status-has-update { cursor: pointer; } .panel-status-pill.panel-status-has-update::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card-bg); } @keyframes panelStatusBlink { 0%, 100% { border-color: #ef4444; box-shadow: 0 0 0 rgba(239, 68, 68, 0); } 50% { border-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.55); } } @media (prefers-reduced-motion: reduce) { .panel-status-pill.panel-status-blink { animation: none; border-color: #ef4444; } } .panel-status-popup { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 260px; max-width: 320px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); padding: 6px; display: flex; flex-direction: column; gap: 2px; cursor: default; animation: none; } .panel-status-popup-header { padding: 8px 10px 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .panel-status-popup-item { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); } .panel-status-popup-item:hover { background: rgba(239, 68, 68, 0.12); } .panel-status-popup-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 0.78rem; text-align: left; cursor: pointer; } .panel-status-popup-item-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-status-popup-item img, .panel-status-popup-item svg, .panel-status-popup-update img, .panel-status-popup-update svg { flex-shrink: 0; width: 16px; height: 16px; } .panel-status-popup-dismiss { flex-shrink: 0; width: 22px; height: 22px; margin-right: 6px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; } .panel-status-popup-dismiss:hover { background: rgba(239, 68, 68, 0.18); color: #ef4444; } .panel-status-popup-update { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 10px; border: none; border-top: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font-size: 0.78rem; text-align: left; cursor: pointer; } .panel-status-popup-update:hover { background: rgba(var(--accent-rgb), 0.12); } .panel-status-popup-update-badge { margin-left: auto; flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); } .panel-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb), 0.7); flex-shrink: 0; } .panel-status-pill.panel-status-warning .panel-status-dot { background: var(--orange); box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); } .panel-status-pill.panel-status-error .panel-status-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); } .panel-status-text { font-size: 0.78rem; font-weight: 700; color: var(--text); } .panel-clock { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); } .panel-clock-text { display: flex; flex-direction: column; line-height: 1.25; } .panel-clock-text strong { font-size: 0.82rem; color: var(--text); } .panel-clock-text span { font-size: 0.64rem; text-transform: capitalize; } /* Ocultar-al-pasar-el-mouse (opcional, ver Configuración > Apariencia y UI/UX): truco de grid-template-rows 1fr→0fr para animar una altura que no se puede fijar de antemano (el contenido cambia de tamaño según cuántos dispositivos/trabajos haya). Sin JS de por medio en la animación misma, solo togglea la clase .collapsed. */ .panel-hero-collapsible { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.32s ease; } .panel-hero-collapsible.collapsed { grid-template-rows: 0fr; } .panel-hero-collapsible-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 12px; } /* Vive fuera de .panel-hero-collapsible a propósito -- si estuviera adentro desaparecería junto con el resto del contenido al colapsar (overflow: hidden + grid-template-rows: 0fr) y no habría forma de volver a expandirlo con el mouse. */ .panel-hero-toggle-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 18px; margin: -9px 0 8px; padding: 0; border: none; border-radius: 0 0 10px 10px; /* Semitransparente de verdad (no un color fijo) -- color-mix con la variable del tema activo hace que se vea bien en los 5 temas sin hardcodear ningún valor. Amarillo/--orange a propósito: marca visualmente el control que colapsa/expande el panel superior. */ background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--text-secondary); cursor: pointer; position: relative; z-index: 2; transition: background 0.15s ease, color 0.15s ease; } .panel-hero-toggle-btn:hover { background: color-mix(in srgb, var(--orange) 32%, transparent); color: var(--text); } .panel-hero-toggle-btn svg { transition: transform 0.32s ease; /* Abierto (estado por defecto, sin .collapsed) = flecha hacia arriba. */ transform: rotate(180deg); } .panel-hero-collapsible.collapsed ~ .panel-hero-toggle-btn svg { /* Cerrado = flecha hacia abajo (forma original del SVG, sin rotar). */ transform: rotate(0deg); } .panel-row { display: grid; gap: 12px; } /* Grid único del hero (antes dos filas independientes, panel-row-3 + panel-row-2): "Dispositivos conectados" va apilada debajo de "Estado del sistema", "Red y conectividad" apilada debajo de "Rendimiento del host", y "Trabajos en curso" ocupa las 2 filas como columna alta a la derecha -- layout pedido explícitamente por el usuario sobre una captura de la app. */ .panel-hero-grid { grid-template-columns: 1.1fr 1fr 1.3fr; grid-template-rows: auto auto; grid-template-areas: "estado host trabajos" "dispositivos red trabajos"; } .panel-card-pos-estado { grid-area: estado; } .panel-card-pos-host { grid-area: host; } .panel-card-pos-dispositivos { grid-area: dispositivos; } .panel-card-pos-red { grid-area: red; } .panel-card-pos-trabajos { grid-area: trabajos; display: flex; flex-direction: column; min-height: 0; } .panel-card-pos-trabajos .panel-jobs-list { flex: 1; max-height: none; } .panel-row-bottom { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .panel-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; min-width: 0; } /* Las fichas del panel superior colapsable usan un tono distinto a --card-bg (el mismo que usan las tarjetas de dispositivos más abajo) para que se lea como un panel aparte, no como parte de la grilla. */ .panel-hero-collapsible-inner .panel-card { background: var(--panel-bg); } .panel-card-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 12px; } .panel-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .panel-card-header .panel-card-title { margin-bottom: 0; } .panel-see-all-btn { border: none; background: transparent; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: background 0.15s ease, color 0.15s ease; } .panel-see-all-btn:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } /* Estado del sistema — logo hexagonal a la izquierda, filas ícono+label/valor apiladas a la derecha (íconos y valores en verde acento, como el resto de la ficha; solo el valor de "Salud del sistema" cambia de color si hay advertencias/errores). */ .panel-health-body { display: flex; align-items: center; gap: 18px; } .panel-health-logo { flex-shrink: 0; width: 78px; } .panel-health-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.35)); } .panel-info-grid { display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 0; } .panel-info-row { display: flex; align-items: center; gap: 10px; } .panel-info-row svg { flex-shrink: 0; color: var(--accent); } .panel-info-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .panel-info-row-label { font-size: 0.72rem; color: var(--text-muted); } .panel-info-row-value { font-size: 0.9rem; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-info-row-value-warning { color: var(--orange); } .panel-info-row-value-error { color: #ef4444; } /* Red y conectividad — grilla 2x2 (etiqueta arriba, valor grande debajo), sin íconos por celda, con una línea divisoria entre las dos filas. */ .panel-network-wifi-icon { color: var(--accent); flex-shrink: 0; } .panel-network-grid { display: flex; flex-direction: column; } .panel-network-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 0; } .panel-network-row:first-child { border-bottom: 1px solid rgba(148, 163, 184, 0.15); } .panel-network-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .panel-network-label { font-size: 0.78rem; color: var(--text-muted); } .panel-network-value { font-size: 1.3rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Gauges (Rendimiento del host) — mismo lenguaje visual que antes en la topbar (anillo SVG con stroke-dashoffset), reutilizado acá. */ .panel-host-gauges { display: flex; align-items: center; justify-content: space-around; gap: 8px; padding-top: 4px; } .panel-load-chart { position: relative; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.15); height: 56px; } .panel-load-chart:empty { display: none; } .panel-load-chart-svg { width: 100%; height: 100%; display: block; overflow: visible; } .panel-load-chart-line { fill: none; stroke: var(--green-dark); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .panel-load-chart-area { fill: rgba(var(--green-rgb), 0.14); stroke: none; } .panel-load-chart-empty { position: absolute; inset: 10px 0 0 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--text-muted); } .panel-load-chart-avg { position: absolute; right: 0; bottom: 2px; font-size: 0.68rem; color: var(--text-muted); } .panel-load-chart-avg strong { color: var(--text); font-weight: 700; } .panel-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; } .panel-gauge-ring { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; } .panel-gauge-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; } .panel-gauge-ring .gauge-value { position: relative; font-size: 1.3rem; font-weight: 800; color: var(--text); } .panel-gauge-label { display: flex; align-items: center; gap: 5px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .panel-gauge-sub { font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; } .gauge-track { fill: none; stroke: rgba(148, 163, 184, 0.2); stroke-width: 8; } .gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.4s ease; } .gauge-fill-cpu { stroke: var(--green-dark); } .gauge-fill-mem { stroke: var(--orange); } .gauge-fill-disk { stroke: var(--purple); } .panel-empty-state { padding: 20px 0; text-align: center; font-size: 0.78rem; color: var(--text-muted); } /* Dispositivos conectados */ .panel-devices-row { display: grid; grid-template-columns: repeat(4, 1fr); } .panel-device-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-left: 1px solid rgba(148, 163, 184, 0.18); } .panel-device-tile:first-child { border-left: none; } .panel-device-tile-soon { opacity: 0.5; } .panel-device-icon { color: var(--accent); margin-bottom: 2px; } .panel-device-icon-img { width: 26px; height: 26px; object-fit: contain; display: block; } .panel-device-tile strong { font-size: 1.56rem; font-weight: 800; color: var(--text); } .panel-device-tile > span { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } /* Trabajos en curso */ .panel-jobs-list { display: flex; flex-direction: column; gap: 10px; max-height: 190px; overflow-y: auto; } .panel-job-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon info progress" "icon meta meta" "camera camera camera"; column-gap: 10px; row-gap: 4px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--panel-bg); border: 1px solid var(--border); align-items: center; } /* Miniatura de la cámara vinculada al dispositivo de este trabajo (ver camera-card.js) -- solo existe en el HTML cuando el trabajo trae device_type/device_id Y esa máquina tiene una cámara vinculada, así que la fila de abajo no ocupa espacio en el caso común (sin cámara). */ .panel-job-camera { grid-area: camera; } .panel-job-camera:empty { display: none; } .panel-job-camera .cam-live-wrap { max-height: 90px; } .panel-job-icon { grid-area: icon; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .panel-job-icon-laser { background: rgba(var(--purple-rgb), 0.14); color: var(--purple); } .panel-job-icon-cnc { background: rgba(245, 158, 11, 0.14); color: var(--orange); } .panel-job-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; } .panel-job-info strong { font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-job-info span { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-job-progress-ring { grid-area: progress; position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--green-dark) calc(var(--panel-job-progress, 0) * 1%), var(--border) 0); flex-shrink: 0; } .panel-job-progress-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel-bg); } .panel-job-progress-ring span { position: relative; font-size: 0.58rem; font-weight: 800; color: var(--text); } .panel-job-meta { grid-area: meta; display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.66rem; color: var(--text-muted); } .panel-job-meta strong { color: var(--text); margin-left: 3px; } .panel-job-state { text-transform: capitalize; } /* Fila inferior: alertas / ambiente / consumo / mantenimiento */ .panel-row-bottom .panel-card { padding: 14px 16px; } .panel-alerts-row { display: grid; grid-template-columns: repeat(3, 1fr); } .panel-alert-tile { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 6px 8px; border-left: 1px solid rgba(148, 163, 184, 0.18); } .panel-alert-tile:first-child { border-left: none; } .panel-alert-tile svg { color: var(--text-muted); flex-shrink: 0; } .panel-alert-icon-img { width: 29px; height: 29px; object-fit: contain; display: block; flex-shrink: 0; } .panel-alert-tile-text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; min-width: 0; } .panel-alert-tile strong { font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1.15; } .panel-alert-tile span { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; } .panel-alert-tile-error svg, .panel-alert-tile-error span { color: #ef4444; } .panel-alert-tile-warning svg, .panel-alert-tile-warning span { color: var(--orange); } .panel-alert-tile-info svg, .panel-alert-tile-info span { color: var(--accent); } /* Con 3 columnas iguales, etiquetas como "Advertencias"/"Informativas" (o sus equivalentes en otros idiomas) con white-space:nowrap no entran en el ancho disponible de un teléfono y se cortan/desbordan. Se apila en una lista vertical, igual que el resto de las tarjetas del panel a este ancho. */ @media (max-width: 560px) { .panel-alerts-row { grid-template-columns: 1fr; } .panel-alert-tile { justify-content: flex-start; border-left: none; border-top: 1px solid rgba(148, 163, 184, 0.18); padding: 10px 4px; } .panel-alert-tile:first-child { border-top: none; } .panel-alert-tile-text { align-items: flex-start; text-align: left; } .panel-alert-tile span { white-space: normal; } } .panel-card-mini { display: flex; align-items: center; gap: 12px; } .panel-mini-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .panel-mini-icon-power { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .panel-mini-icon-maintenance { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .panel-mini-icon-img { width: 24px; height: 24px; object-fit: contain; display: block; } .panel-mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .panel-mini-text span { font-size: 0.64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .panel-mini-text strong { font-size: 0.95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 640px; background: var(--surface); border: 1px solid rgba(0, 0, 0, 0.08); padding: 12px 18px; border-radius: var(--radius-md); } body.dark .topbar-search, body.green .topbar-search { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.08); } .search-icon { color: var(--text-muted); flex-shrink: 0; } .topbar-search input { width: 100%; border: none; outline: none; background: transparent; color: var(--text); font-size: 0.92rem; } .topbar-search input::placeholder { color: #aaa; } body.dark .topbar-search input::placeholder, body.green .topbar-search input::placeholder { color: #9ca3af; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: none; border-radius: var(--radius-sm); transition: opacity 0.15s ease; } .btn-icon:hover { opacity: 0.85; } /* ── View Sections ── */ .view-section { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto; } .page-header { padding: 32px 32px 16px; border-bottom: 1px solid #f0f0f0; } .page-header h1 { font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--text); } .main-content { flex: 1; min-height: 0; overflow-y: auto; padding: 0; } .console-macros-main { display: flex; flex-direction: column; overflow: hidden; } .console-macros-topbar { display: flex; gap: 20px; flex-shrink: 0; padding: 24px 32px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .console-macros-header.page-header { flex: 1; min-width: 0; padding: 0; border-bottom: none; } .console-macros-split { display: flex; flex-direction: row; align-items: stretch; flex: 1; min-height: 0; gap: 20px; padding: 0 32px 24px; } .console-macros-half { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .console-printer-picker { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; } .printer-picker-card { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08); background: var(--card-bg); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .printer-picker-card-status { margin-left: auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #22c55e; flex-shrink: 0; } .printer-picker-card.offline .printer-picker-card-status { color: var(--text-muted); } .printer-picker-card.offline { opacity: 0.55; } .printer-picker-card.offline svg { color: var(--text-muted); } .printer-picker-card svg { color: #22c55e; flex-shrink: 0; } .printer-picker-card:hover { border-color: rgba(34, 197, 94, 0.35); } .printer-picker-card.active { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.5); color: #22c55e; } .console-card { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; } .console-macros-half .console-log { flex: 1; min-height: 100px; height: auto; } .models-full-section { padding: 32px; } .models-page-content { padding: 24px 32px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .models-view-controls { display: flex; gap: 8px; } .models-page-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) 0.9fr; grid-template-rows: minmax(0, 1fr); gap: 24px; flex: 1; min-height: 0; } .models-table-panel { background: linear-gradient(160deg, rgba(74, 93, 46, 0.22) 0%, rgba(54, 69, 34, 0.16) 55%, rgba(34, 43, 21, 0.15) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.08); overflow: hidden; border: 1px solid rgba(107, 124, 68, 0.28); display: flex; flex-direction: column; min-height: 0; } .gcode-table-panel-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; zoom: 1; } /* ── Biblioteca: mismo lenguaje visual de la galería de plugins ── */ #models-section, #gcode-section { --library-surface: rgba(15, 23, 42, 0.76); --library-surface-strong: rgba(15, 23, 42, 0.9); --library-surface-soft: rgba(30, 41, 59, 0.58); --library-border: rgba(var(--accent-rgb), 0.3); } #models-section { --gcode-line: rgba(34, 197, 94, 0.38); --gcode-accent-rgb: 34, 197, 94; --gcode-surface: color-mix(in srgb, var(--card-bg) 92%, transparent); --gcode-surface-soft: color-mix(in srgb, var(--card-bg) 78%, transparent); } .models-modern-preview .preview-card-inner { min-height: calc(100vh - 126px); } .models-modern-preview .preview-card-header { display: flex; align-items: center; justify-content: space-between; } .models-modern-preview .preview-expand-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--gcode-line); border-radius: 8px; background: rgba(var(--accent-rgb), .08); color: var(--accent); cursor: pointer; } .models-modern-preview .preview-favorite-btn { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); font-size: 1.35rem; cursor: pointer; } .models-modern-preview .preview-favorite-btn.active { color: #fbbf24; } .models-preview-description { margin: 8px 0 15px; color: var(--text-muted); font-size: .72rem; line-height: 1.45; } .models-preview-stage { position: relative; flex: 1; min-height: 390px; margin: 4px 0 14px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 12px; overflow: hidden; background: rgba(2, 12, 16, .35); } .models-preview-stage .preview-image { position: absolute; inset: 0; min-height: 0; border-radius: 0; background-image: linear-gradient(rgba(var(--accent-rgb), .06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .06) 1px, transparent 1px) !important; background-size: 32px 32px !important; } .models-modern-preview .preview-file-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; } .models-modern-preview .preview-file-actions .btn-file-action { min-width: 0; justify-content: center; padding: 7px 8px; font-size: .65rem; } .models-modern-preview .preview-file-actions .btn-file-action:disabled, .gcode-modern-preview .preview-file-actions .btn-file-action:disabled { opacity: 0.35; cursor: not-allowed; } .models-goto-printer { width: 100%; justify-content: center; margin-top: 10px; } .models-modern-table .model-format-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 8px; background: rgba(var(--accent-rgb), .08); color: var(--accent); font-size: .62rem; font-weight: 800; } @media (max-width: 560px) { .models-modern-preview .preview-file-actions { grid-template-columns: 1fr 1fr; } } body.light #models-section, body.light #gcode-section { /* Antes blanco puro fijo -- pensado para el viejo tema claro blanco; con Desert (fondo/tarjetas color arena) quedaba una tarjeta blanca desentonando del resto. color-mix toma el tono de tarjeta real del tema activo. */ --library-surface: color-mix(in srgb, var(--card-bg) 82%, transparent); --library-surface-strong: color-mix(in srgb, var(--card-bg) 94%, transparent); --library-surface-soft: color-mix(in srgb, var(--card-bg) 68%, transparent); } #models-section .models-page-content, #gcode-section .models-page-content { padding: 28px 32px 40px; } #models-section .models-page-layout, #gcode-section .models-page-layout { gap: 18px; } #models-section .models-table-panel, #gcode-section .models-table-panel, #models-section .models-preview-card, #gcode-section .gcode-preview-card { border: 1px solid var(--library-border); background: radial-gradient(circle at 88% 5%, rgba(var(--accent-rgb), 0.1), transparent 34%), var(--library-surface); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #models-section .models-table-panel:hover, #gcode-section .models-table-panel:hover, #models-section .models-preview-card:hover, #gcode-section .gcode-preview-card:hover { border-color: rgba(var(--accent-rgb), 0.46); } .library-page-eyebrow { display: block; margin-bottom: 7px; color: var(--accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; } #models-section .models-list-header, #gcode-section .models-list-header { padding: 22px 24px 16px; border-bottom-color: rgba(148, 163, 184, 0.14); } #models-section .models-list-header h2, #gcode-section .models-list-header h2 { font-size: 1.55rem; } #models-section .models-list-header p, #gcode-section .models-list-header p { color: var(--text-muted); line-height: 1.5; } #models-section .models-list-actions .badge, #gcode-section .models-list-actions .badge { padding: 7px 11px; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); text-shadow: none; } #models-section .section-search, #gcode-section .section-search { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 11px; background: var(--library-surface-strong); } #models-section .section-search:focus-within, #gcode-section .section-search:focus-within { border-color: rgba(var(--accent-rgb), 0.68); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); } #models-section .btn-icon-dark, #gcode-section .btn-icon-dark, #models-section .btn-view-toggle, #gcode-section .btn-view-toggle { border-color: rgba(var(--accent-rgb), 0.32); background: rgba(var(--accent-rgb), 0.09); color: var(--accent); } #models-section .btn-icon-dark:hover, #gcode-section .btn-icon-dark:hover, #models-section .btn-view-toggle:hover, #gcode-section .btn-view-toggle:hover, #models-section .btn-view-toggle-active, #gcode-section .btn-view-toggle-active { border-color: rgba(var(--accent-rgb), 0.58); background: rgba(var(--accent-rgb), 0.2); color: var(--accent-hover); } #models-section .models-breadcrumb-row, #gcode-section .models-breadcrumb-row { padding: 11px 24px; border-bottom-color: rgba(148, 163, 184, 0.13); } #models-section .models-table thead, #gcode-section .models-table thead { background: rgba(148, 163, 184, 0.07); } #models-section .models-table tbody tr, #gcode-section .models-table tbody tr { border-bottom-color: rgba(148, 163, 184, 0.11); } #models-section .models-table tbody tr:hover, #models-section .models-table tbody tr.selected, #gcode-section .models-table tbody tr:hover, #gcode-section .models-table tbody tr.selected { background: rgba(var(--accent-rgb), 0.12); } #models-section .models-table td.model-name svg.green-bg, #gcode-section .models-table td.model-name svg.green-bg { background: linear-gradient(135deg, var(--accent-active), var(--accent)); } #models-section .models-table td.model-name svg.folder-icon, #gcode-section .models-table td.model-name svg.folder-icon { color: var(--accent); } #models-section .models-preview-card, #gcode-section .gcode-preview-card { padding: 22px; } #models-section .preview-image, #gcode-section .gcode-preview-scene, #gcode-section .preview-meta-grid div { border: 1px solid rgba(148, 163, 184, 0.16); background: var(--library-surface-strong); } #models-section .preview-label, #gcode-section .preview-label, #models-section .preview-meta-row svg { color: var(--accent); } #models-section .preview-expand-btn, #gcode-section .preview-expand-btn, #models-section .btn-file-action:not(.btn-file-action-danger), #gcode-section .btn-file-action:not(.btn-file-action-danger) { border-color: rgba(var(--accent-rgb), 0.34); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); } #models-section .btn-file-action:not(.btn-file-action-danger):hover, #gcode-section .btn-file-action:not(.btn-file-action-danger):hover { border-color: rgba(var(--accent-rgb), 0.58); background: rgba(var(--accent-rgb), 0.2); color: var(--accent-hover); } #models-section .preview-tip-card { border-color: rgba(var(--accent-rgb), 0.28); background: rgba(var(--accent-rgb), 0.09); } @media (max-width: 980px) { #models-section .models-page-content, #gcode-section .models-page-content { padding: 20px 16px 32px; } } .models-list-header { display: flex; flex-direction: column; gap: 16px; padding: 28px 32px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); } .models-list-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .models-list-header h2 { margin: 0; font-size: 1.4rem; } .models-list-header p { margin: 8px 0 0; color: var(--text-muted); } .models-list-actions { display: flex; flex-wrap: wrap; gap: 8px; } .models-list-controls { display: flex; align-items: center; gap: 16px; } .models-list-controls .section-search { max-width: none; } .models-breadcrumb-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 32px; font-size: 0.82rem; color: var(--text-muted); border-bottom: 1px solid rgba(148, 163, 184, 0.15); } .bulk-actions-bar { display: flex; align-items: center; gap: 10px; padding: 10px 32px; background: rgba(34, 197, 94, 0.08); border-bottom: 1px solid rgba(34, 197, 94, 0.2); } .bulk-actions-bar #models-bulk-count, .bulk-actions-bar #gcode-bulk-count { font-size: 0.82rem; font-weight: 700; color: var(--green-dark); margin-right: 4px; } .bulk-actions-clear-btn { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; text-decoration: underline; } .bulk-actions-clear-btn:hover { color: var(--text); } .row-select-checkbox, .select-all-checkbox { width: 16px; height: 16px; cursor: pointer; } .models-table th.select-col, .models-table td.select-col { width: 36px; padding-right: 0; } .breadcrumb-label { margin-right: 4px; } .breadcrumb-segment { background: none; border: none; padding: 2px 4px; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; border-radius: 6px; } .breadcrumb-segment:hover { color: var(--green-dark); background: rgba(34, 197, 94, 0.1); } .breadcrumb-segment:last-child { color: var(--text); font-weight: 600; } .breadcrumb-sep { color: var(--text-muted); margin: 0 2px; } .folder-actions-cell { text-align: right; white-space: nowrap; } .folder-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(148, 163, 184, 0.12); color: var(--text-muted); margin-left: 6px; transition: background 0.15s ease, color 0.15s ease; } .folder-action-btn:hover { color: var(--text); background: rgba(148, 163, 184, 0.25); } .folder-action-btn[data-action="rename"] { background: rgba(34, 197, 94, 0.12); color: #22c55e; } .folder-action-btn[data-action="rename"]:hover { background: rgba(34, 197, 94, 0.22); color: #16a34a; } .folder-action-btn[data-action="delete"] { background: rgba(239, 68, 68, 0.12); color: #ef4444; } .folder-action-btn[data-action="delete"]:hover { background: rgba(239, 68, 68, 0.22); color: #dc2626; } .uploading-row { opacity: 0.7; pointer-events: none; } .uploading-info { display: flex; flex-direction: column; gap: 6px; flex: 1; } .upload-progress-track { height: 6px; max-width: 260px; background: rgba(148, 163, 184, 0.25); border-radius: 999px; overflow: hidden; } .upload-progress-fill { height: 100%; background: var(--green-dark); border-radius: 999px; transition: width 0.2s ease; } .laser-sd-upload-progress { position: relative; height: 20px; max-width: none; margin: 0 0 14px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); } .laser-sd-upload-progress .upload-progress-fill { background: #22c55e; } .upload-progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .badge { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.78rem; font-weight: 600; } .badge-alt { background: var(--green); } .models-table-wrapper { flex: 1; min-height: 0; overflow-x: auto; overflow-y: auto; } .models-table { width: 100%; border-collapse: collapse; min-width: 720px; } .models-table thead { background: rgba(148, 163, 184, 0.08); } .models-table th, .models-table td { padding: 18px 20px; text-align: left; font-size: 0.95rem; color: var(--text); } .models-table th { color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .models-table tbody tr { border-bottom: 1px solid rgba(148, 163, 184, 0.12); transition: background 0.2s ease; cursor: pointer; } .models-table tbody tr:hover, .models-table tbody tr.selected { background: rgba(34, 197, 94, 0.1); } .models-table td { color: var(--text); } .models-table td.model-name { display: flex; align-items: center; gap: 14px; } .models-table td.model-name svg { width: 44px; height: 44px; border-radius: 14px; padding: 10px; color: #fff; flex-shrink: 0; } .models-table td.model-name svg.green-bg { background: linear-gradient(135deg, var(--green-dark), var(--green)); } .models-table td.model-name svg.orange-bg { background: linear-gradient(135deg, #fbbf24, var(--orange)); } .cnc-files-thumb { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: #081410; } .models-table tr.folder-row { cursor: pointer; } .models-table tr.folder-row .model-name { padding-left: 20px; } .models-table td.model-name svg.folder-icon { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; color: var(--orange); } .folder-file-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); color: var(--text-muted); font-size: 0.68rem; font-weight: 600; } .models-table td .tag-pill { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); color: var(--text); font-size: 0.78rem; font-weight: 600; } .models-preview-card { position: relative; background-color: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,0.20); border: 1px solid rgba(var(--accent-rgb), 0.3); min-height: fit-content; overflow: hidden; color: var(--text); } .models-preview-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('../img/motif-circuit.svg'); background-repeat: repeat; background-size: 220px 220px; filter: invert(1); opacity: 0.1; } .models-preview-card .preview-card-inner { position: relative; z-index: 1; } .preview-card-inner { display: flex; flex-direction: column; gap: 18px; } .gcode-preview-card .preview-card-inner { flex: 1; min-height: 0; } .preview-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .preview-label { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(34, 197, 94, 0.14); color: var(--green-dark); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; } .preview-card-header h2 { margin: 0; font-size: 1.5rem; } .model-preview-box { display: grid; gap: 18px; } .preview-image { min-height: 260px; border-radius: 28px; background: linear-gradient(180deg, var(--panel-bg) 0%, var(--card-bg) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .preview-image.gcode-mode { background: #081410; } .preview-image canvas { width: 100% !important; height: 100% !important; display: block; position: absolute; inset: 0; } .preview-image-placeholder { color: var(--text); font-size: 5rem; font-weight: 700; opacity: 0.18; } .models-preview-card .preview-label { display: inline-block; padding: 0; border-radius: 0; background: none; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .models-preview-card .preview-card-header h2 { color: var(--text); margin-top: 4px; } .preview-expand-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .preview-expand-btn:hover { background: rgba(var(--accent-rgb), 0.22); } .preview-title-row { display: flex; align-items: center; gap: 8px; } .preview-title-row h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-type-pill { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .preview-favorite-btn { flex-shrink: 0; width: 28px; height: 28px; border: none; background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s ease; } .preview-favorite-btn:hover { color: rgba(250, 204, 21, 0.6); } .preview-favorite-btn.active { color: #facc15; } .preview-favorite-btn.active svg { fill: #facc15; } .preview-meta-rows { display: flex; flex-direction: column; gap: 6px; } .preview-meta-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); } .preview-meta-row svg { color: var(--accent); flex-shrink: 0; } .preview-meta-row strong { color: var(--text); font-weight: 600; } .models-preview-card .preview-file-actions { display: flex; flex-direction: column; gap: 8px; flex-wrap: nowrap; } .preview-file-actions-row { display: flex; gap: 8px; } .preview-file-actions-row .btn-file-action { flex: 1; justify-content: center; } .preview-file-actions-full { justify-content: center; width: 100%; } .preview-goto-printer-btn { border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.1); color: #60a5fa; } .preview-goto-printer-btn:hover { background: rgba(96, 165, 250, 0.2); border-color: rgba(96, 165, 250, 0.5); color: #60a5fa; } .preview-tip-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius-md); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25); } .preview-tip-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); display: flex; align-items: center; justify-content: center; } .preview-tip-text strong { display: block; color: var(--accent); font-size: 0.85rem; margin-bottom: 4px; } .preview-tip-text p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary); } .settings-grid { column-count: 2; column-gap: 20px; margin: 24px 0 0; } .settings-layout { display: flex; align-items: flex-start; gap: 20px; padding: 24px 32px 32px; } .settings-general-card { flex: 1; min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; } .devices-subtitle { color: #22c55e; } body.light .devices-subtitle { color: #57534e; } body.dark .devices-subtitle { color: #d1d5db; } .settings-right-col { flex: 1.6; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .settings-row-pair { display: flex; align-items: stretch; gap: 20px; order: 2; } .settings-row-pair > .settings-card { flex: 1; min-width: 0; margin-bottom: 0; } .settings-right-col > .settings-card { margin-bottom: 0; } .settings-grid .settings-card { break-inside: avoid; margin-bottom: 20px; } .settings-card { background: var(--panel-bg); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); } body.dark .settings-card, body.green .settings-card { border-color: rgba(255, 255, 255, 0.08); } .usb-ports-settings-card { /* Antes navy fijo -- se me había pasado en la primera pasada. Con var(--text-muted) ya oscuro en Desert, texto oscuro sobre un fondo que seguía oscuro quedaba invisible. */ background: color-mix(in srgb, var(--card-bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); order: 1; } .settings-card h2 { margin: 0 0 10px; font-size: 1.05rem; } .settings-card p { margin: 0 0 16px; color: var(--text-muted); line-height: 1.5; font-size: 0.82rem; } /* ── System stats (impresora modal) ── */ .modal-content.printer-modal-content { max-width: 1294px; width: 99%; height: auto; max-height: 97vh; overflow: hidden; transition: background 0.2s ease; } .printer-error-banner { margin: 0 24px; padding: 16px 20px; border-radius: var(--radius-lg); background: rgba(127, 29, 29, 0.55); border: 1px solid rgba(248, 113, 113, 0.35); color: #fecaca; } .printer-error-banner-header { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #f87171; margin-bottom: 10px; } .printer-error-banner-message { margin: 0 0 14px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.78rem; line-height: 1.5; color: #fca5a5; white-space: pre-wrap; word-break: break-word; } .printer-error-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; } .printer-error-banner .btn-file-action-danger { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; } .printer-error-banner .btn-file-action-danger:hover { background: rgba(239, 68, 68, 0.28); } .modal-body.printer-modal-body { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 6px; padding: 6px; overflow-y: auto; } .printer-modal-column { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; } /* Lista de archivos + fila de acciones necesitan más ancho que una columna de 1/3 -- ocupa el ancho completo de la grilla en la fila donde caiga, sin importar en qué posición del customizer quede reordenada. */ .printer-modal-column[data-module="configfiles"] { grid-column: 1 / -1; } #printer-modal-toolhead, #printer-modal-temperatures, #printer-modal-queue, #printer-modal-configfiles { display: flex; flex-direction: column; flex: 1; min-height: 0; } .printer-modal-column .temp-card { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; } .printer-modal-column .temp-card-body { flex: 1; min-height: 0; overflow-y: auto; } .printer-modal-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 20px 24px; background: rgba(2, 6, 16, 0.55); backdrop-filter: blur(6px); } .printer-modal-topbar-identity { display: flex; align-items: center; gap: 16px; min-width: 0; } @media (max-width: 860px) { .modal-body.printer-modal-body { grid-template-columns: 1fr; } .printer-modal-topbar { grid-template-columns: 1fr; align-items: start; } } .printer-modal-topbar img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; } .printer-modal-topbar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .printer-modal-topbar-info h2 { margin: 0; font-size: 1.15rem; } .printer-modal-topbar-mcu { flex-shrink: 0; justify-self: center; min-width: 0; } .printer-modal-topbar-mcu .system-stats-block-title { font-size: 0.7rem; margin-bottom: 6px; } .printer-modal-topbar-mcu .system-stats-body-mcu-only { max-width: none; margin: 0; } .printer-modal-topbar-mcu .system-stats-rows { flex-direction: row; flex-wrap: wrap; gap: 14px; } .printer-modal-topbar-mcu .system-stats-row { flex-direction: column; gap: 2px; font-size: 0.68rem; text-align: center; } .printer-modal-topbar-mcu .system-stats-row strong { text-align: center; font-size: 0.78rem; } /* Botón de engranaje que abre "Personalizar Módulos", junto al cierre (X) del modal de impresora. Reusa .modal-close (tamaño/posición/hover) pero necesita mayor especificidad (dos clases) para ganarle a los estilos base de .modal-close definidos más abajo en la hoja. */ .modal-close.printer-modal-settings-btn { right: 76px; background: var(--panel-bg); color: var(--text); border: 1px solid var(--border); } /* ── "Personalizar Módulos": editor de módulos del modal de impresora ── */ .module-customizer-modal-content { width: 92%; max-width: 760px; height: auto; max-height: 90vh; padding: 32px 28px; overflow-y: auto; display: flex; flex-direction: column; text-align: left; } .module-customizer-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 22px; } .module-customizer-header h2 { margin: 0; font-size: 1.25rem; color: var(--text); } .module-customizer-subtitle { margin: 0; font-size: 0.88rem; color: var(--text-muted); } .module-customizer-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; } .module-customizer-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--panel-bg); color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease; } .module-customizer-tab:hover { color: var(--text); border-color: rgba(var(--green-rgb), 0.4); } .module-customizer-tab.active { border-color: var(--green); color: var(--green-dark); background: rgba(var(--green-rgb), 0.1); box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.4), 0 0 16px rgba(var(--green-rgb), 0.35); } .module-customizer-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; } @media (max-width: 700px) { .module-customizer-groups { grid-template-columns: 1fr; } } .module-customizer-group { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--panel-bg); } .module-customizer-group-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; } .module-customizer-group-available .module-customizer-group-header h3 { color: var(--green-dark); } .module-customizer-group-extra .module-customizer-group-header h3 { color: var(--purple); } .module-customizer-group-header p { margin: 2px 0 0; font-size: 0.76rem; color: var(--text-muted); } .module-customizer-list { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .module-customizer-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card-bg); user-select: none; } .module-customizer-row-dragging { border-color: var(--green); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); opacity: 0.96; } .module-customizer-row-locked { opacity: 0.85; } .module-customizer-row-handle { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); cursor: grab; touch-action: none; } .module-customizer-row-handle:active { cursor: grabbing; } .module-customizer-row-handle-disabled { color: var(--border); cursor: not-allowed; } .module-customizer-row-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--text-secondary); } .module-customizer-row-label { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .module-customizer-row-toggle { display: flex; align-items: center; flex-shrink: 0; } .module-customizer-checkbox { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--green); } .module-customizer-checkbox-green { accent-color: var(--green); } .module-customizer-checkbox-purple { accent-color: var(--purple); } .module-customizer-row-lock { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); } .module-customizer-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .module-customizer-reset-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--green); background: transparent; color: var(--green-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .module-customizer-reset-btn:hover { background: rgba(var(--green-rgb), 0.12); } .module-customizer-reset-hint { margin: 0; font-size: 0.74rem; color: var(--text-muted); } /* ── Página de Configuración unificada (Configuración + Ayuda fusionadas): grupos de tarjetas creados por el usuario, armados en tiempo real por applySettingsModulesLayout() en app.js. Reemplaza el layout fijo de 2 columnas que tenía .settings-layout (retirado) — acá el número de grupos y qué tarjeta va en cada uno lo decide el usuario desde "Personalizar". ── */ .settings-modules-groups { display: flex; flex-direction: column; gap: 28px; padding: 24px 32px 32px; } .settings-module-group-title-row { margin-bottom: 14px; } .settings-module-group-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); } .settings-module-group-body { column-count: 2; column-gap: 20px; } .settings-module-group-body > .settings-card { break-inside: avoid; margin-bottom: 20px; } .settings-modules-pool { display: none; } .settings-module-hidden-by-user { display: none !important; } @media (max-width: 900px) { .settings-module-group-body { column-count: 1; } } /* ── Ayuda: layout en grid (como .plugins-grid, línea ~4549) en vez del masonry por columnas de arriba. Se scopea con el id real del contenedor (#help-modules-groups) para no tocar #settings-modules-groups ni ninguna otra página que reuse .settings-module-group-body/.settings-card — solo afecta a Ayuda. auto-fill/minmax ya es responsive por sí solo (baja a 1 columna en pantallas angostas), no hace falta un @media extra. ── */ #help-modules-groups .settings-module-group-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } #help-modules-groups .settings-module-group-body > .help-card { margin-bottom: 0; } /* ── Editor "Personalizar Página de Configuración": grupos dinámicos ── */ .settings-module-customizer-modal-content { max-width: 620px; } .settings-module-customizer-groups { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .settings-module-customizer-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .settings-module-customizer-group-name-input { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 8px; font-size: 0.95rem; font-weight: 700; font-family: inherit; color: var(--text); } .settings-module-customizer-group-name-input:hover { border-color: var(--border); } .settings-module-customizer-group-name-input:focus { border-color: var(--green); background: var(--card-bg); outline: none; } .settings-module-customizer-group-delete-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .settings-module-customizer-group-delete-btn:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); } .settings-module-customizer-list { min-height: 46px; } .settings-module-customizer-list-hint { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1.5px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 0.78rem; text-align: center; padding: 8px; pointer-events: none; } .settings-module-customizer-add-group-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: var(--radius-md); border: 1.5px dashed var(--border); background: transparent; color: var(--text-secondary); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; margin-bottom: 22px; } .settings-module-customizer-add-group-btn:hover { border-color: var(--green); color: var(--green-dark); background: rgba(var(--green-rgb), 0.08); } .system-stats-body { display: grid; grid-template-columns: 1fr 1fr auto; gap: 28px; align-items: start; } .system-stats-block-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .system-stats-block-title svg { color: var(--green-dark); flex-shrink: 0; } .system-stats-block-title small { font-weight: 500; color: var(--text-muted); } .system-stats-rows { display: flex; flex-direction: column; gap: 10px; } .system-stats-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; } .system-stats-row span { color: var(--text-muted); } .system-stats-row strong { color: var(--text); text-align: right; } .system-stats-body-mcu-only { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; } .system-stats-body-mcu-only .system-stats-block-title { justify-content: center; } @media (max-width: 900px) { .system-stats-body { grid-template-columns: 1fr; } } .temp-card { border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--card-bg) 55%, transparent); border: 1px solid rgba(255, 255, 255, 0.08); } .temp-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.06); color: var(--text); font-weight: 700; } .temp-card-header-left { display: flex; align-items: center; gap: 8px; } .temp-card-header-actions { display: flex; align-items: center; gap: 8px; } .temp-preset-pill, .temp-cool-pill { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; padding: 6px 10px; border: none; border-radius: 999px; cursor: pointer; transition: opacity 0.15s ease; } .temp-preset-pill { background: rgba(34, 197, 94, 0.16); color: #22c55e; } .temp-cool-pill { background: rgba(96, 165, 250, 0.16); color: #60a5fa; } .temp-preset-pill:hover, .temp-cool-pill:hover { opacity: 0.8; } .temp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: var(--text); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .temp-icon-btn:hover { background: rgba(255, 255, 255, 0.18); } .temp-icon-btn.collapsed svg { transform: rotate(-90deg); } .temp-card-body { padding: 12px 14px 14px; display: grid; gap: 12px; } .config-actions-row { display: flex; flex-wrap: wrap; gap: 8px; } .config-file-list { display: flex; flex-direction: column; gap: 6px; min-height: 80px; max-height: 280px; overflow-y: auto; } .config-file-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .config-file-row:hover { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent); } .config-file-row-name { flex: 1; min-width: 0; font-size: 0.85rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .config-file-row-size { flex-shrink: 0; font-size: 0.75rem; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .temp-table { display: grid; gap: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 10px 12px; } .temp-table-head { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .temp-table-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr; align-items: center; font-size: 0.85rem; padding: 4px 0; } .temp-row-name { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; } .temp-row-icon { display: inline-flex; } .temp-row-state, .temp-row-current { color: var(--text-muted); } .temp-state-arrow { font-size: 0.7rem; } .temp-state-arrow-up { color: #f59e0b; } .temp-state-arrow-down { color: #60a5fa; } .temp-target-input-wrap { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 4px 8px; width: fit-content; } .temp-target-input { width: 44px; border: none; background: transparent; color: var(--text); font-size: 0.85rem; text-align: right; } .temp-target-input:focus { outline: none; } .temp-target-unit { color: var(--text-muted); font-size: 0.78rem; } .temp-presets-fields { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; } .temp-presets-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .temp-presets-field label { font-size: 0.88rem; color: var(--text); font-weight: 600; } /* ── Mini-tema de la ficha de Temperaturas: ámbar al precalentar, frío al enfriar ── */ .temp-card-warm { background: linear-gradient(160deg, rgba(194, 101, 12, 0.55) 0%, rgba(154, 68, 12, 0.6) 55%, rgba(87, 38, 8, 0.65) 100%); transition: background 0.5s ease; } .temp-card-cool { background: linear-gradient(160deg, rgba(96, 165, 250, 0.22) 0%, rgba(59, 110, 200, 0.22) 55%, rgba(15, 23, 42, 0.5) 100%); transition: background 0.5s ease; } .temp-card-warm .temp-card-header, .temp-card-cool .temp-card-header { background: rgba(255, 255, 255, 0.08); } .temp-card-warm .temp-card-header-left, .temp-card-warm .temp-row-name, .temp-card-warm .temp-row-state, .temp-card-warm .temp-row-current, .temp-card-warm .temp-table-head, .temp-card-warm .temp-target-unit, .temp-card-warm .toolhead-position-mode { color: #ffedd5; } .temp-card-cool .temp-card-header-left, .temp-card-cool .temp-row-name, .temp-card-cool .temp-row-state, .temp-card-cool .temp-row-current, .temp-card-cool .temp-table-head, .temp-card-cool .temp-target-unit, .temp-card-cool .toolhead-position-mode { color: #dbeafe; } .temp-card-warm .temp-table, .temp-card-warm .temp-target-input-wrap, .temp-card-warm .temp-chart-wrap, .temp-card-warm .temp-icon-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(251, 146, 60, 0.35); } .temp-card-cool .temp-table, .temp-card-cool .temp-target-input-wrap, .temp-card-cool .temp-chart-wrap, .temp-card-cool .temp-icon-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(96, 165, 250, 0.35); } .temp-card-warm .temp-target-input { color: #ffedd5; } .temp-card-cool .temp-target-input { color: #dbeafe; } .temp-card-warm .temp-preset-pill { background: rgba(251, 146, 60, 0.35); color: #fff7ed; } .temp-card-warm .temp-cool-pill { background: rgba(255, 255, 255, 0.14); color: #ffedd5; } .temp-card-cool .temp-cool-pill { background: rgba(96, 165, 250, 0.35); color: #eff6ff; } .temp-card-cool .temp-preset-pill { background: rgba(255, 255, 255, 0.14); color: #dbeafe; } .temp-chart-wrap { height: 160px; background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 8px; } .temp-chart-wrap canvas { width: 100%; height: 100%; display: block; } /* ── Toolhead card (impresora) — diseño propio, fiel a la referencia ── */ .toolhead-card { position: relative; max-height: calc(100vh - 64px); overflow-y: auto; overflow-x: hidden; } .laser-column > .toolhead-card { flex: 1; min-height: 0; max-height: none; } .laser-card.toolhead-card { /* Antes un navy fijo (rgba(15,23,42,...)), que solo combinaba bien con el tema oscuro original -- con temas claros/desert se veía un recuadro azul oscuro pegado encima del fondo. color-mix con --card-bg sigue siendo un vidrio translúcido pero tomando el color de tarjeta del tema activo. */ background: color-mix(in srgb, var(--card-bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .temp-card.toolhead-card { background: color-mix(in srgb, var(--card-bg) 55%, transparent); border-color: rgba(34, 197, 94, 0.35); } .toolhead-card .temp-card-header { background: transparent; position: relative; overflow: hidden; } .toolhead-card .temp-card-header-left, .toolhead-card .temp-card-header-actions { position: relative; z-index: 1; color: #fff; } .toolhead-card .temp-icon-btn { background: rgba(255, 255, 255, 0.16); color: #fff; } .toolhead-card .temp-icon-btn:hover { background: rgba(255, 255, 255, 0.26); } .toolhead-card .temp-card-body { color: #fff; } /* Compatibilidad con el patrón de encabezado .card-header-std (fichas del láser) */ .toolhead-card .card-header-std { position: relative; overflow: hidden; margin: -20px -20px 16px; padding: 16px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .toolhead-card .card-header-std-icon, .toolhead-card .card-header-std-title { position: relative; z-index: 1; color: #fff; } .toolhead-card .card-collapse-toggle { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.16); color: #fff; } .toolhead-card .card-collapse-toggle:hover { background: rgba(255, 255, 255, 0.26); } .toolhead-card, .toolhead-card .laser-jog-steps-label, .toolhead-card .laser-fire-label, .toolhead-card .laser-metrics span { color: #fff; } .toolhead-card .laser-jog-layout { background: rgba(15, 15, 35, 0.28); border-color: rgba(255, 255, 255, 0.12); } .toolhead-card .laser-jog-side { border-left-color: rgba(255, 255, 255, 0.15); } .toolhead-card .laser-jog-btn { background: rgba(15, 15, 35, 0.32); border-color: rgba(34, 197, 94, 0.2); color: #4ade80; } .toolhead-card .laser-jog-btn:hover { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.55); color: #22c55e; } .toolhead-card .laser-jog-slot-home { background: rgba(34, 197, 94, 0.28); border-color: #22c55e; color: #22c55e; } .toolhead-card .laser-step-btn { background: rgba(15, 15, 35, 0.32); border-color: transparent; color: rgba(255, 255, 255, 0.75); } .toolhead-card .laser-step-btn.active { background: rgba(255, 255, 255, 0.18); border-color: transparent; color: #fff; } .toolhead-card .laser-jog-actions .btn-file-action { background: rgba(15, 15, 35, 0.32); border-color: rgba(255, 255, 255, 0.12); color: #fff; } .toolhead-card .laser-jog-actions .btn-file-action:hover { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.4); } .toolhead-position-mode { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); } .toolhead-position-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .toolhead-position-field { display: flex; flex-direction: column; gap: 4px; } .toolhead-position-field-top { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; } .toolhead-position-letter { font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); } .toolhead-position-target { font-size: 0.68rem; color: rgba(255, 255, 255, 0.6); } .toolhead-position-box { padding: 10px 10px; background: rgba(15, 15, 35, 0.4); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: var(--radius-md); text-align: center; } .toolhead-position-value { font-size: 1.3rem; font-weight: 700; color: #4ade80; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .toolhead-jog-row { display: flex; align-items: center; gap: 7px; } .toolhead-jog-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 8px; background: rgba(15, 15, 35, 0.4); color: #4ade80; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .toolhead-jog-btn:hover { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.7); color: #fff; } .toolhead-jog-col { display: flex; flex-direction: column; gap: 6px; } .toolhead-jog-actions { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .toolhead-home-all-btn, .toolhead-motors-off-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: none; border-radius: 8px; color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s ease; } .toolhead-motors-off-btn { width: 44px; flex-shrink: 0; background: rgba(217, 114, 15, 0.22); border: 1px solid rgba(217, 114, 15, 0.6); color: #fb923c; } .toolhead-motors-off-btn:hover { background: rgba(217, 114, 15, 0.34); } .toolhead-home-all-btn { background: #16a34a; } .toolhead-home-all-btn:hover { background: #15803d; } .toolhead-axis-home-row { display: flex; gap: 7px; } .toolhead-axis-home-row button { flex: 1; height: 34px; font-size: 0.88rem; border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 8px; background: rgba(15, 15, 35, 0.4); color: #4ade80; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .toolhead-axis-home-row button:hover { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.7); color: #fff; } .toolhead-steps-row { display: flex; background: rgba(15, 15, 35, 0.32); border-radius: var(--radius-md); overflow: hidden; } .toolhead-step-btn { flex: 1; padding: 7px 0; border: none; background: transparent; color: rgba(255, 255, 255, 0.75); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .toolhead-step-btn.active { background: rgba(255, 255, 255, 0.18); color: #fff; } .toolhead-zoffset-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); } .toolhead-zoffset-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .toolhead-zoffset-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: none; border-radius: 8px; background: rgba(15, 15, 35, 0.32); color: #fff; font-size: 0.76rem; cursor: pointer; transition: background 0.15s ease; } .toolhead-zoffset-btn:hover { background: rgba(15, 15, 35, 0.5); } .toolhead-speed-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); } .toolhead-speed-badge { display: flex; align-items: center; gap: 4px; background: rgba(15, 15, 35, 0.32); border-radius: 8px; padding: 4px 10px; font-weight: 700; color: #fff; } .toolhead-speed-slider-row { display: flex; align-items: center; gap: 10px; } .toolhead-speed-slider-row button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border: none; border-radius: 50%; background: rgba(15, 15, 35, 0.32); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; } .toolhead-speed-slider-row input[type="range"] { flex: 1; accent-color: #22c55e; } .toolhead-speed-ticks { display: flex; justify-content: space-between; padding: 0 34px; margin-top: 2px; font-size: 0.66rem; color: rgba(255, 255, 255, 0.4); } @media (max-width: 520px) { .temp-table-head, .temp-table-row { grid-template-columns: 1.4fr 0.6fr 0.7fr 1fr; font-size: 0.78rem; } } .console-card { margin: 0 32px 32px; background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; overflow: hidden; } .console-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .console-font-size-toggle { display: flex; gap: 4px; } .console-font-size-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--text-muted); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .console-font-size-btn:hover { background: rgba(34, 197, 94, 0.14); } .console-font-size-btn.active { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.4); color: #22c55e; } .console-log.font-sm { font-size: 0.7rem; } .console-log.font-lg { font-size: 0.98rem; } .console-toolbar .settings-select { flex: 1; } .console-log { height: 420px; overflow-y: auto; padding: 14px 16px; background: color-mix(in srgb, var(--card-bg) 40%, transparent); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.82rem; display: flex; flex-direction: column; gap: 4px; } .console-line { display: flex; gap: 10px; color: var(--text); } .console-line-time { color: var(--text-muted); flex-shrink: 0; } .console-line-command { color: #22c55e; } .console-line-message { white-space: pre-wrap; word-break: break-word; } .console-line-level-warning .console-line-message { color: var(--orange); } .console-line-level-error .console-line-message { color: #ef4444; } .console-input-row { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .console-input-row input { flex: 1; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(0, 0, 0, 0.08); background: var(--bg); color: var(--text); font-family: inherit; } .macros-toolbar { margin: 0 32px 16px; max-width: 320px; } .macros-grid { margin: 0; flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); align-content: start; gap: 10px; min-width: 0; } .macro-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 12px 8px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08); background: color-mix(in srgb, var(--card-bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--text); font-size: 0.76rem; font-weight: 600; text-align: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .macro-btn svg { color: #22c55e; } .macro-btn-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .macro-btn-description { display: none; font-size: 0.72rem; font-weight: 500; line-height: 1.4; color: var(--text); } .macro-btn:hover { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.4); transform: translateY(-2px); } .macro-btn:hover .macro-btn-face { display: none; } .macro-btn:hover .macro-btn-description { display: block; } /* En touch no existe :hover real (algunos navegadores lo "pegan" tras el primer tap y otros nunca lo disparan) — sin esto la descripción del macro quedaba inalcanzable en mobile, mostrando solo el ícono sin explicación. Se muestra siempre la descripción en vez del ícono en dispositivos sin hover, que es la información útil cuando no se puede pasar el mouse. */ @media (hover: none) { .macro-btn-face { display: none; } .macro-btn-description { display: block; } } .macro-btn.running { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.4); } .macro-btn:disabled { opacity: 0.6; cursor: default; transform: none; } /* ── Recomendación de pantalla completa ── */ .fullscreen-recommendation { position: fixed; z-index: 12000; top: 10px; left: 50%; display: flex; width: min(690px, calc(100vw - 28px)); align-items: center; gap: 11px; padding: 10px 11px 10px 13px; border: 1px solid rgba(168,85,247,.55); border-radius: 13px; background: rgba(12,18,31,.96); box-shadow: 0 15px 45px rgba(0,0,0,.42), 0 0 20px rgba(168,85,247,.12); transform: translateX(-50%); backdrop-filter: blur(12px); } .fullscreen-recommendation-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 9px; background: rgba(168,85,247,.18); color: #c084fc; } .fullscreen-recommendation > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; } .fullscreen-recommendation strong { color: #f8fafc; font-size: .78rem; } .fullscreen-recommendation small { margin-top: 2px; color: var(--text-muted); font-size: .66rem; } .fullscreen-recommendation-action { padding: 8px 11px; border: 1px solid rgba(168,85,247,.55); border-radius: 8px; background: rgba(126,34,206,.25); color: #e9d5ff; font-weight: 700; white-space: nowrap; cursor: pointer; } .fullscreen-recommendation-action:hover { background: rgba(126,34,206,.45); } .fullscreen-recommendation-close { width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; } @media (max-width: 620px) { .fullscreen-recommendation small { display: none; } .fullscreen-recommendation-action { font-size: .66rem; } } /* ── Galería de plugins ── */ .plugins-main { min-height: 100%; padding: 28px 32px 40px; } .plugins-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .plugins-page-eyebrow { color: #a855f7; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; } .plugins-page-header h1 { margin: 5px 0 6px; color: var(--text); font-size: 1.8rem; } .plugins-page-header p { margin: 0; color: var(--text-muted); } .plugins-installed-counter { display: flex; min-width: 112px; align-items: baseline; justify-content: center; gap: 7px; padding: 12px 16px; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 14px; background: rgba(88, 28, 135, 0.18); } .plugins-installed-counter strong { color: #d8b4fe; font-size: 1.35rem; } .plugins-installed-counter span { color: var(--text-muted); font-size: 0.76rem; } .plugins-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .plugins-search { display: flex; width: min(390px, 100%); align-items: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 11px; background: color-mix(in srgb, var(--card-bg) 68%, transparent); color: var(--text-muted); } .plugins-search:focus-within { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); } .plugins-search input { width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent; color: var(--text); } .plugins-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; } .plugins-filter-chip { padding: 8px 12px; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 999px; background: color-mix(in srgb, var(--card-bg) 55%, transparent); color: var(--text-muted); cursor: pointer; } .plugins-filter-chip:hover, .plugins-filter-chip.active { border-color: rgba(168, 85, 247, 0.55); background: rgba(126, 34, 206, 0.2); color: #e9d5ff; } .plugins-featured { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.7fr); gap: 20px; overflow: hidden; margin-bottom: 22px; padding: 24px; border: 1px solid rgba(168, 85, 247, 0.38); border-radius: 18px; /* Antes un navy/morado sólido fijo -- no seguía el tema (se quedaba oscuro incluso en Desert). El brillo morado decorativo usa --purple (varía por tema); la superficie base ahora sale de --card-bg. */ background: radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--purple) 20%, transparent), transparent 34%), color-mix(in srgb, var(--card-bg) 90%, transparent); } /* El plugin trae su propia imagen: va de fondo de toda la tarjeta, con un degradado encima (mismo --card-bg de siempre) para que el texto de la izquierda siga siendo legible sobre la foto. */ .plugins-featured.has-banner-image { background-image: linear-gradient(100deg, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 88%, transparent) 32%, color-mix(in srgb, var(--card-bg) 35%, transparent) 60%, transparent 88%), var(--plugins-featured-image); background-repeat: no-repeat; background-position: center right; background-size: cover; } .plugins-featured-copy { position: relative; z-index: 1; } .plugins-featured-label { display: inline-flex; margin-bottom: 12px; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 20%, transparent); color: var(--purple); font-size: 0.68rem; font-weight: 800; } .plugins-featured h2 { margin: 0 0 8px; color: var(--text); font-size: 1.45rem; } .plugins-featured p { max-width: 650px; margin: 0 0 16px; color: var(--text-muted); line-height: 1.55; } .plugins-featured-visual { display: grid; place-items: center; } .plugins-featured-icon { display: grid; width: 118px; height: 118px; place-items: center; border: 1px solid color-mix(in srgb, var(--purple) 35%, transparent); border-radius: 30px; background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple); transform: rotate(-5deg); } .plugins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } .plugin-card { display: flex; min-width: 0; flex-direction: column; padding: 17px; border: 1px solid rgba(148, 163, 184, 0.17); border-radius: 15px; background: color-mix(in srgb, var(--card-bg) 72%, transparent); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; cursor: pointer; } .plugin-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--plugin-accent) 55%, transparent); background: color-mix(in srgb, var(--card-bg) 88%, transparent); } .plugin-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .plugin-card-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid color-mix(in srgb, var(--plugin-accent) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--plugin-accent) 15%, transparent); color: var(--plugin-accent); } .plugin-card-status { padding: 4px 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: var(--text-muted); font-size: 0.65rem; font-weight: 700; } .plugin-card-status.is-installed { background: rgba(34, 197, 94, 0.14); color: var(--green); } .plugin-card h3 { margin: 14px 0 3px; color: var(--text); font-size: 1rem; } .plugin-card-publisher { color: var(--text-muted); font-size: 0.68rem; } .plugin-card-description { flex: 1; margin: 11px 0 13px; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; } .plugin-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } .plugin-card-tag { padding: 4px 7px; border-radius: 6px; background: rgba(148, 163, 184, 0.09); color: var(--text-muted); font-size: 0.64rem; } .plugin-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.12); } .plugin-card-meta { min-width: 0; color: var(--text-muted); font-size: 0.66rem; } .plugin-card-actions { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: flex-end; gap: 8px; } .plugin-card-actions.has-update { width: 100%; } .plugin-card-actions.has-update > button { flex: 1 1 0; min-width: 0; } .plugin-install-btn { min-width: 96px; padding: 8px 12px; border: 1px solid var(--plugin-accent); border-radius: 9px; background: color-mix(in srgb, var(--plugin-accent) 18%, transparent); color: var(--plugin-accent); font-weight: 750; cursor: pointer; } .plugin-install-btn:hover:not(:disabled) { background: var(--plugin-accent); color: #fff; } .plugin-install-btn.is-installed { border-color: rgba(239, 68, 68, 0.45); background: rgba(127, 29, 29, 0.15); color: #fca5a5; } .plugin-install-btn:disabled { border-color: rgba(148, 163, 184, 0.16); background: rgba(148, 163, 184, 0.07); color: var(--text-muted); cursor: not-allowed; } .plugin-update-btn { min-width: 88px; padding: 8px 12px; border: 1px solid var(--orange); border-radius: 9px; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); font-weight: 750; cursor: pointer; } .plugin-update-btn:hover:not(:disabled) { background: var(--orange); color: #fff; } .plugin-update-btn:disabled { border-color: rgba(148, 163, 184, 0.16); background: rgba(148, 163, 184, 0.07); color: var(--text-muted); cursor: not-allowed; } .plugins-loading, .plugins-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--text-muted); } .plugins-empty { display: flex; flex-direction: column; gap: 5px; } .plugins-empty strong { color: var(--text); } @media (max-width: 760px) { .plugins-main { padding: 20px 16px 32px; } .plugins-page-header, .plugins-toolbar { align-items: stretch; flex-direction: column; } .plugins-installed-counter { align-self: flex-start; } .plugins-featured { grid-template-columns: 1fr; } .plugins-featured-visual { display: none; } } /* ── Editor G-Code ── */ .gcode-editor-main { display: flex; flex-direction: column; gap: 18px; height: 100%; padding: 24px 32px; } .gcode-editor-card { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(168, 85, 247, 0.35); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--card-bg) 68%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .gcode-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .gcode-editor-file-meta { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .gcode-editor-file-meta strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; } .gcode-editor-file-meta span { color: var(--text-muted); font-size: 0.72rem; } .gcode-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; } .gcode-editor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); flex: 1; min-height: 0; gap: 12px; padding: 12px; background: rgba(2, 6, 23, 0.52); } #gcode-editor-textarea { width: 100%; min-height: 420px; resize: none; padding: 18px; border: 0; outline: 0; background: rgba(2, 6, 23, 0.72); color: #d1fae5; caret-color: #a855f7; font: 500 0.86rem/1.55 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; tab-size: 4; } .gcode-analysis-card { min-width: 0; overflow: auto; padding: 18px; border: 1px solid rgba(34, 197, 94, 0.28); border-radius: 14px; background: linear-gradient(155deg, rgba(6, 78, 59, 0.28), rgba(15, 23, 42, 0.94) 52%); } .gcode-analysis-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .gcode-analysis-eyebrow { color: #34d399; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; } .gcode-analysis-header h2 { margin: 3px 0 0; color: var(--text); font-size: 1rem; } .gcode-type-badge { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: #cbd5e1; font-size: 0.68rem; font-weight: 800; } .gcode-type-badge.is-laser { border-color: rgba(168, 85, 247, 0.55); background: rgba(126, 34, 206, 0.22); color: #d8b4fe; } .gcode-type-badge.is-print3d { border-color: rgba(59, 130, 246, 0.55); background: rgba(37, 99, 235, 0.2); color: #bfdbfe; } .gcode-type-badge.is-cnc { border-color: rgba(245, 158, 11, 0.55); background: rgba(180, 83, 9, 0.2); color: #fde68a; } .gcode-analysis-summary { margin: 0 0 14px; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; } .gcode-analysis-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gcode-analysis-item { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; background: color-mix(in srgb, var(--card-bg) 62%, transparent); } .gcode-analysis-item.is-wide { grid-column: 1 / -1; } .gcode-analysis-item span { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 0.66rem; } .gcode-analysis-item strong { display: block; overflow: hidden; color: #e2e8f0; font-size: 0.76rem; text-overflow: ellipsis; } .gcode-analysis-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .gcode-analysis-signal { padding: 4px 7px; border-radius: 999px; background: rgba(34, 197, 94, 0.1); color: #86efac; font-size: 0.65rem; } #gcode-editor-textarea::placeholder { color: var(--text-muted); } @media (max-width: 700px) { .gcode-editor-main { padding: 16px; } .gcode-editor-toolbar { align-items: stretch; flex-direction: column; } } @media (max-width: 1050px) { .gcode-editor-workspace { grid-template-columns: 1fr; overflow: auto; } #gcode-editor-textarea { min-height: 480px; } .gcode-analysis-card { overflow: visible; } } .laser-card { margin: 0 32px 20px; padding: 20px; background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 4px solid var(--green-dark); } /* ── Ficha de conexión + ficha de movimiento: acento naranja cuando el dispositivo seleccionado es un CNC (en vez del verde de láser) ── */ #laser-connection-card.theme-cnc, .toolhead-card.theme-cnc { border-left-color: var(--orange); } #laser-connection-card.theme-cnc .laser-status-dot.online { background: var(--orange); } .toolhead-card.theme-cnc .laser-console-prompt, .toolhead-card.theme-cnc #laser-console-active-name { color: var(--orange); } .toolhead-card.theme-cnc #laser-console-log .console-line-command { color: var(--orange); } .toolhead-card.theme-cnc .laser-metrics div { background: rgba(245, 158, 11, 0.12); } .laser-columns { display: flex; gap: 20px; align-items: flex-start; margin: 24px 32px 20px 16px; height: calc(100% - 44px); } /* Columna de Conexión/Cola/Consola a la derecha, Movimiento del cabezal a la izquierda — invertido a pedido, sin reordenar el HTML. La de Conexión/Cola/Consola se estira para llenar la pantalla (la consola absorbe el espacio sobrante); Movimiento del cabezal solo se ajusta a su propio contenido, sin estirarse para igualar a la otra columna. */ .laser-columns > .laser-column:first-child { order: 2; align-self: stretch; min-height: 0; } .laser-columns > .laser-column:last-child { order: 1; } .laser-column { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; } .laser-card-half { min-width: 0; margin: 0; } .laser-card-compact { /* Antes zoom:0.7 -- dejaba estos títulos/botones notablemente más chicos que el resto de la app (nav, dashboard, etc). Sin zoom, coherente con el pedido de tamaño uniforme; el card ya scrollea solo si el contenido no entra. */ } .laser-card-translucent { background: color-mix(in srgb, var(--card-bg) 55%, transparent); backdrop-filter: blur(6px); } /* Antes esta clase pintaba toda la tarjeta de un morado sólido fijo (var(--purple) casi no cambia entre los 4 temas), lo que la dejaba fuera de estilo frente al resto de tarjetas oscuras con acento de color (ej. .cnc-card). Ahora usa el mismo fondo oscuro que .laser-card y solo el borde izquierdo queda en morado; los textos/filas internas ya heredan los estilos base (var(--text), etc.), pensados para fondo oscuro, así que no hace falta forzarlos acá. */ .laser-card-accent { border-left-color: var(--purple); } @media (max-width: 860px) { .laser-columns { flex-direction: column; } } .laser-status-row { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); } .laser-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex-shrink: 0; } .laser-status-dot.online { background: #22c55e; } .laser-state-pill { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: var(--text-muted); } .laser-state-pill.state-run { background: rgba(34, 197, 94, 0.16); color: #22c55e; } .laser-state-pill.state-hold, .laser-state-pill.state-paused { background: rgba(245, 158, 11, 0.16); color: #f59e0b; } .laser-state-pill.state-alarm { background: rgba(239, 68, 68, 0.16); color: #ef4444; } .laser-illustration { display: flex; align-items: center; justify-content: center; margin-top: 16px; border-radius: var(--radius-md); overflow: hidden; background: rgba(255, 255, 255, 0.04); } .laser-illustration img { width: 100%; max-width: 360px; height: auto; object-fit: contain; } .laser-illustration.offline img { opacity: 0.4; filter: grayscale(0.9); } .laser-hub-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .laser-hub-tabs { flex: 1; min-width: 0; } .laser-hub-panel { display: flex; flex-direction: column; gap: 14px; } .laser-host-row { display: flex; align-items: center; gap: 8px; } .laser-host-row .settings-select { flex: 1; font-size: 0.8rem; padding: 8px 10px; } .laser-connection-header { display: flex; align-items: flex-start; gap: 14px; } .laser-connection-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .laser-connection-mode { font-size: 0.78rem; color: var(--text-muted); } .laser-illustration-compact { position: relative; margin-top: 0; flex-shrink: 0; width: 42%; max-width: 138px; cursor: pointer; } .laser-illustration-compact img { max-width: 100%; } .laser-illustration-settings-badge { position: absolute; bottom: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(245, 158, 11, 0.28); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.5); pointer-events: none; animation: laserSettingsBadgeBlink 2.6s ease-in-out infinite; } @keyframes laserSettingsBadgeBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .laser-info-compact { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; align-content: start; margin-top: 14px; } .laser-info-compact-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .laser-info-compact-row span { color: var(--text); flex-shrink: 0; } .laser-info-compact-row strong { color: #22c55e; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; text-align: right; word-break: break-word; min-width: 0; } .laser-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .laser-metrics-single { grid-template-columns: minmax(0, 1fr); } .laser-workarea-stats-row { display: flex; gap: 10px; margin-top: 12px; } .laser-workarea-position { flex: 1; min-width: 0; background: rgba(34, 197, 94, 0.1); border-radius: var(--radius-md); padding: 12px 14px; } .laser-workarea-position span { display: block; color: var(--text-muted); font-size: 0.78rem; } .laser-workarea-position strong { display: block; margin-top: 6px; color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-move-to { margin: 0; } .laser-move-to-fields { display: flex; gap: 7px; margin-top: 6px; } .laser-coordinate-field { display: flex; align-items: center; flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid rgba(34, 197, 94, 0.22); border-radius: 8px; background: color-mix(in srgb, var(--card-bg) 42%, transparent); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .laser-coordinate-field:focus-within { border-color: rgba(34, 197, 94, 0.65); background: color-mix(in srgb, var(--card-bg) 62%, transparent); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1); } .laser-coordinate-field b { flex: 0 0 auto; color: #4ade80; font-size: 0.76rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-coordinate-field input { width: 100%; min-width: 0; padding: 0 0 0 6px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 0.78rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; -moz-appearance: textfield; appearance: textfield; } .laser-coordinate-field input::placeholder { color: color-mix(in srgb, var(--text-muted) 72%, transparent); } .laser-coordinate-field input::-webkit-inner-spin-button, .laser-coordinate-field input::-webkit-outer-spin-button { margin: 0; appearance: none; } .laser-metrics div { background: rgba(34, 197, 94, 0.1); border-radius: var(--radius-md); padding: 12px 14px; } .laser-metrics span { display: block; color: var(--text-muted); font-size: 0.78rem; } .laser-metrics strong { display: block; margin-top: 6px; color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } /* ── Consola del láser acoplada al fondo de la ficha de movimiento ── */ #laser-console-card { display: flex; flex-direction: column; } .laser-console-dock { display: flex; flex-direction: column; gap: 8px; } #laser-console-card .laser-console-dock .console-log { height: 220px; } .laser-console-dock-header { display: flex; align-items: center; gap: 8px; } .laser-console-dock-header h3 { flex: 1; min-width: 0; } .laser-console-dock-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .laser-console-prompt { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; color: #22c55e; font-weight: 700; } #laser-console-active-name { color: #22c55e; } .laser-console-dock .console-log { height: 140px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08); } .laser-console-dock .console-input-row { padding: 0; border-top: none; } .laser-job-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #laser-job-controls-panel { flex-direction: column; width: 100%; margin-top: 8px; } #laser-job-controls-panel .btn-file-action { width: 100%; justify-content: center; padding: 6px 10px; font-size: 0.76rem; } #laser-job-progress-panel { width: 100%; margin-top: 8px; } #laser-job-progress-panel span { font-size: 0.7rem; } .laser-job-toolbar .settings-select { flex: 1; min-width: 200px; } .laser-job-progress { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .laser-job-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .laser-job-progress-fill { height: 100%; background: #22c55e; width: 0%; transition: width 0.3s ease; } .laser-job-progress span { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } .laser-job-error { margin: 12px 0 0; color: #ef4444; font-size: 0.85rem; } .laser-job-top-row { display: flex; align-items: center; gap: 12px; } .laser-job-top-row #laser-job-controls-panel { flex: 0 0 88px; margin-top: 0; } .laser-job-info-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .laser-job-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-md); border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(0, 0, 0, 0.25); overflow: hidden; } .laser-job-thumb img, .laser-job-thumb svg { width: 100%; height: 100%; object-fit: cover; } .laser-job-info-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .laser-job-info-filename { font-size: 0.9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .laser-job-info-times { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.72rem; color: var(--text-muted); } .laser-job-info-times span { display: inline-flex; align-items: center; gap: 5px; } .laser-job-info-times strong { color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-job-stats-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .laser-job-stat { flex: 1; min-width: 110px; display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.72rem; } .laser-job-stat svg { color: #22c55e; flex-shrink: 0; } .laser-job-stat strong { margin-left: auto; color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } /* Panel compacto visible solo durante una grabación administrada por NOPAL. */ .laser-jog-quadrant-job { padding: 10px; } .laser-job-layout { display: grid; grid-template-columns: 104px minmax(0, 1fr) 170px; gap: 10px; min-height: 150px; } .laser-job-actions-column, .laser-job-main, .laser-job-preview { min-width: 0; border: 1px solid rgba(34, 197, 94, 0.2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--card-bg) 34%, transparent); } .laser-job-actions-column { display: flex; flex-direction: column; gap: 8px; padding: 8px; } .laser-job-actions-column #laser-job-controls-panel { flex: 0 0 auto; gap: 8px; margin: 0; } .laser-job-actions-column #laser-job-controls-panel .btn-file-action { min-height: 34px; padding: 6px 8px; } .laser-job-lines-stat { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .laser-job-lines-stat strong { margin: 6px 0 0 auto; } .laser-job-main { display: flex; flex-direction: column; padding: 12px; } .laser-job-main .laser-job-info-row:not([hidden]) { display: block; } .laser-job-main #laser-job-progress-panel { margin-top: auto; } .laser-job-main .laser-job-stats-row { margin-top: 10px; } .laser-job-preview { padding: 8px; overflow: hidden; } .laser-job-preview .laser-job-thumb { width: 100%; height: 100%; min-height: 132px; } @media (max-width: 700px) { .laser-job-layout { grid-template-columns: 96px minmax(0, 1fr); } .laser-job-preview { grid-column: 1 / -1; min-height: 160px; } } .laser-card-title { margin: 0 0 16px; font-size: 1.05rem; font-weight: 700; color: var(--text); } /* ── Encabezado estándar de ficha: ícono + título + [extras] + contraer ── */ .card-header-std { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .card-header-std-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #22c55e; } .laser-connection-machine-title { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-header-std-title { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .laser-gamepad-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: none; border-radius: 999px; background: rgba(148, 163, 184, 0.14); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; font-family: inherit; flex-shrink: 0; cursor: pointer; transition: background 0.15s ease; } .devices-subcard .laser-gamepad-badge { margin-top: 10px; } .laser-gamepad-badge:hover { background: rgba(148, 163, 184, 0.24); } .laser-gamepad-badge.connected { background: rgba(34, 197, 94, 0.16); color: #22c55e; } .laser-gamepad-badge.connected:hover { background: rgba(34, 197, 94, 0.26); } .modal-content.laser-gamepad-modal-content { width: 94%; max-width: 1280px; height: auto; max-height: 92vh; overflow-y: auto; padding: 32px; gap: 20px; display: flex; flex-direction: column; border-radius: 24px; color: var(--text); } .laser-gamepad-close-btn { top: 24px; right: 24px; } .laser-gamepad-header { display: flex; align-items: center; gap: 16px; } .laser-gamepad-header-text { flex: 1; min-width: 0; } .laser-gamepad-header-text h2 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; } .laser-gamepad-header-text p { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); } .laser-gamepad-select { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.08); color: #4ade80; font-size: 0.82rem; font-weight: 600; cursor: default; } .laser-gamepad-columns { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 20px; align-items: stretch; } .laser-gamepad-panel { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(34, 197, 94, 0.22); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; min-height: 0; } .laser-gamepad-panel-header { display: grid; grid-template-columns: 1fr 100px 100px; gap: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4ade80; margin-bottom: 14px; } .laser-gamepad-panel-header-single { display: flex; align-items: center; gap: 8px; } .laser-gamepad-map-list { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; } .laser-gamepad-map-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-md); border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.05); } .laser-gamepad-map-row-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: #fff; } .laser-gamepad-map-row-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; border: 1px solid; background: transparent; } .laser-gamepad-map-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(34, 197, 94, 0.14); color: #4ade80; flex-shrink: 0; } .laser-gamepad-map-state { display: flex; align-items: center; gap: 6px; width: 100px; flex-shrink: 0; font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); } .laser-gamepad-map-state-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; } .laser-gamepad-map-state-dot.assigned { background: #22c55e; box-shadow: 0 0 5px 1px rgba(34, 197, 94, 0.7); } .laser-gamepad-assign-btn { width: 100px; padding: 6px 0; border-radius: 8px; border: 1px solid rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.14); color: #4ade80; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; } .laser-gamepad-assign-btn:hover { background: rgba(34, 197, 94, 0.2); } .laser-gamepad-assign-btn.listening { background: rgba(245, 158, 11, 0.22); border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; } /* ── Vista de consola: réplica esquemática del pendant físico ── */ .laser-gamepad-console { position: relative; background-color: rgba(6, 15, 10, 0.78); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at 30% 20%, rgba(34, 197, 94, 0.1) 0%, transparent 60%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg); padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .lgc-buttons-col { display: flex; flex-direction: column; gap: 22px; } .lgc-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); } .lgc-screw-tl { top: 10px; left: 10px; } .lgc-screw-tr { top: 10px; right: 10px; } .lgc-screw-bl { bottom: 10px; left: 10px; } .lgc-screw-br { bottom: 10px; right: 10px; } .lgc-row { display: flex; justify-content: center; gap: 26px; } .lgc-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; } .lgc-btn-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(34, 197, 94, 0.85); background: rgba(34, 197, 94, 0.22); color: #eafff1; box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .lgc-btn-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.92); text-align: center; } .lgc-btn.assigned .lgc-btn-icon { border-color: #22c55e; background: rgba(34, 197, 94, 0.32); color: #eafff1; box-shadow: 0 0 16px 3px rgba(34, 197, 94, 0.65); } .lgc-btn.pressed .lgc-btn-icon { border-color: #4ade80; background: rgba(74, 222, 128, 0.5); color: #fff; box-shadow: 0 0 20px 6px rgba(74, 222, 128, 0.85); transform: scale(1.08); } .lgc-btn.assigned .lgc-btn-label { color: #4ade80; } .lgc-btn-unassignable .lgc-btn-icon { opacity: 0.35; cursor: default; } .lgc-btn-unassignable .lgc-btn-label { opacity: 0.35; } .lgc-dpad { display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; } .lgc-dpad-z-col { display: flex; flex-direction: column; gap: 16px; } .lgc-dpad-ring { position: relative; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(34, 197, 94, 0.5); background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%); } .lgc-dpad-arrow { position: absolute; display: flex; align-items: center; justify-content: center; color: #22c55e; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6)); } .lgc-dpad-arrow-up { top: 10px; left: 50%; transform: translateX(-50%); } .lgc-dpad-arrow-down { bottom: 10px; left: 50%; transform: translateX(-50%); } .lgc-dpad-arrow-left { left: 10px; top: 50%; transform: translateY(-50%); } .lgc-dpad-arrow-right { right: 10px; top: 50%; transform: translateY(-50%); } .lgc-dpad-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(34, 197, 94, 0.65); background: rgba(34, 197, 94, 0.16); cursor: default; transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .lgc-dpad-btn.assigned { border-color: #22c55e; background: rgba(34, 197, 94, 0.4); box-shadow: 0 0 14px 3px rgba(34, 197, 94, 0.6); } .lgc-dpad-btn.pressed { border-color: #4ade80; background: rgba(74, 222, 128, 0.6); box-shadow: 0 0 22px 6px rgba(74, 222, 128, 0.85); } .lgc-dpad-up { top: 54px; left: 50%; transform: translateX(-50%); } .lgc-dpad-down { bottom: 54px; left: 50%; transform: translateX(-50%); } .lgc-dpad-left { left: 54px; top: 50%; transform: translateY(-50%); } .lgc-dpad-right { right: 54px; top: 50%; transform: translateY(-50%); } .lgc-dpad-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(34, 197, 94, 0.9); } .laser-gamepad-legend { display: flex; justify-content: center; gap: 20px; margin-top: 14px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); } .laser-gamepad-legend span { display: inline-flex; align-items: center; gap: 6px; } .laser-gamepad-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); } .laser-gamepad-legend-dot.assigned { background: #22c55e; box-shadow: 0 0 5px 1px rgba(34, 197, 94, 0.7); } .laser-gamepad-info-box { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; } .laser-gamepad-info-box svg { flex-shrink: 0; color: #4ade80; margin-top: 1px; } .laser-gamepad-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } @media (max-width: 900px) { .laser-gamepad-columns { grid-template-columns: 1fr; } } .card-header-std-extras { display: flex; align-items: center; gap: 8px; } .card-header-std-note { flex-shrink: 0; font-size: 0.75rem; color: var(--text-muted); } .laser-card-accent .card-header-std-note { color: rgba(255, 255, 255, 0.75); } .card-collapse-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, transform 0.2s ease; } .card-collapse-toggle:hover { background: rgba(255, 255, 255, 0.16); } .card-collapse-toggle svg { transition: transform 0.2s ease; } .card-collapse-toggle.collapsed svg { transform: rotate(-90deg); } .laser-card-accent .card-header-std-title { color: #fff; } .laser-card-accent .card-collapse-toggle { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); } .card-collapsible.collapsed > *:not(.card-header-std) { display: none; } /* La ficha de Conexión ahora es un hub con pestañas (Conexión/Cámara/ Consola/Cola) -- al contraerse solo se ven la barra de pestañas y el botón de expandir, el contenido de la pestaña activa se oculta. */ #laser-connection-card.collapsed > .laser-hub-header { display: flex; } #laser-connection-card.collapsed > .laser-connection-toggle-row { display: flex; } .laser-connection-toggle-row { display: flex; justify-content: center; margin: 4px -20px -20px; padding-bottom: 4px; } .laser-connection-toggle-btn { width: 20px; height: 20px; border-radius: 6px; background: transparent; color: var(--green-dark); } .laser-connection-toggle-btn:hover { background: transparent; } .laser-connection-toggle-btn svg { transform: rotate(180deg); } .laser-connection-toggle-btn.collapsed svg { transform: rotate(0deg); } .laser-jog-layout { display: grid; /* Los controles manuales tienen un ancho real de 208px. Esta pista incluye sus 14px de padding a cada lado y deja todo el espacio restante al mapa, evitando franjas vacías alrededor del jog pad. */ grid-template-columns: fit-content(236px) minmax(0, 1fr); grid-template-areas: "manual workarea" "controls workarea" "job job"; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; } .laser-jog-quadrant-manual { grid-area: manual; } .laser-jog-quadrant-workarea { grid-area: workarea; } .laser-jog-quadrant-controls { grid-area: controls; align-self: start; } .laser-jog-quadrant-job { grid-area: job; } @media (max-width: 700px) { .laser-jog-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "manual" "controls" "workarea" "job"; grid-template-rows: auto; } .laser-jog-quadrant-job.laser-jog-quadrant-job-full { grid-column: 1; } } /* Cuando hay un trabajo activo, "Controles de máquina" se oculta (ver renderLaserJob en app.js) y este cuadrante pasa a ocupar las dos columnas de su fila en vez de quedar a la mitad. */ .laser-jog-quadrant-job.laser-jog-quadrant-job-full { grid-column: 1 / -1; } .laser-jog-quadrant { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: var(--radius-lg); min-width: 0; } .laser-jog-quadrant-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .laser-jog-quadrant-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .laser-jog-quadrant-header .laser-jog-quadrant-title { margin: 0; } .laser-jog-quadrant-manual .laser-jog-cross-col { margin: 0 auto; } .laser-jog-quadrant-manual { align-self: start; height: fit-content; } .laser-jog-quadrant-manual .laser-fire-power, .laser-jog-quadrant-manual .laser-jog-steps-block { width: 208px; margin: 0 auto; } .laser-jog-quadrant-manual .laser-fire-power-row, .laser-jog-quadrant-manual .laser-jog-steps { width: 100%; } .laser-jog-quadrant-manual .laser-fire-power .laser-power-presets, .laser-jog-quadrant-manual .laser-jog-steps { flex: 1; min-width: 0; } .laser-jog-quadrant-manual .laser-fire-power .laser-power-presets .laser-step-btn, .laser-jog-quadrant-manual .laser-jog-steps .laser-step-btn { flex: 1; } .laser-jog-cross-col { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; } .laser-jog-steps-block { display: flex; flex-direction: column; gap: 6px; } .laser-jog-pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); grid-template-areas: "nw yplus ne" "xminus home xplus" "sw yminus se"; gap: 8px; } .laser-jog-slot-nw { grid-area: nw; } .laser-jog-slot-yplus { grid-area: yplus; } .laser-jog-slot-ne { grid-area: ne; } .laser-jog-slot-xminus { grid-area: xminus; } .laser-jog-slot-home { grid-area: home; } .laser-jog-slot-xplus { grid-area: xplus; } .laser-jog-slot-sw { grid-area: sw; } .laser-jog-slot-yminus { grid-area: yminus; } .laser-jog-slot-se { grid-area: se; } .laser-jog-btn { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(34, 197, 94, 0.22); border-radius: 18px; background: rgba(255, 255, 255, 0.03); color: #4ade80; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .laser-jog-btn:hover { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.55); color: #22c55e; transform: translateY(-1px); } .laser-jog-btn:active { transform: scale(0.94); } .laser-jog-slot-home { background: rgba(34, 197, 94, 0.22); color: #22c55e; border-color: #22c55e; box-shadow: 0 0 16px 2px rgba(34, 197, 94, 0.4); } .laser-jog-btn:disabled { opacity: 0.35; cursor: default; transform: none !important; background: rgba(255, 255, 255, 0.03) !important; color: var(--text-muted) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; } .laser-jog-side { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; } .laser-bed-map-viewport { position: relative; flex: 1; min-height: 220px; display: flex; overflow: auto; padding-left: 34px; padding-bottom: 22px; } .laser-bed-map-axis { position: absolute; z-index: 2; color: var(--text-muted); font-size: 0.62rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; pointer-events: none; } .laser-bed-map-axis-y { top: 0; bottom: 22px; left: 0; width: 30px; display: flex; flex-direction: column-reverse; justify-content: space-between; } .laser-bed-map-axis-x { left: 34px; right: 0; bottom: 0; height: 18px; display: flex; justify-content: space-between; } .laser-bed-map-axis span { white-space: nowrap; } .laser-bed-map { position: relative; width: 100%; max-width: none; flex: 1; aspect-ratio: 1 / 1; cursor: crosshair; zoom: var(--bed-zoom, 1); background-color: rgba(255, 255, 255, 0.03); background-image: repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.18) 0, rgba(34, 197, 94, 0.18) 1px, transparent 1px, transparent 20%), repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.18) 0, rgba(34, 197, 94, 0.18) 1px, transparent 1px, transparent 20%); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 0; overflow: hidden; } .laser-bed-map-zoom-controls { position: absolute; right: 12px; bottom: 34px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px; border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 9px; background: rgba(6, 20, 14, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .laser-bed-map-zoom-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.1); color: #22c55e; cursor: pointer; transition: background 0.15s ease; } .laser-bed-map-zoom-btn svg { width: 16px; height: 16px; } .laser-bed-map-zoom-btn:hover { background: rgba(34, 197, 94, 0.2); } .laser-bed-map-zoom-btn.active { background: #22c55e; color: #06140e; box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.5); } .laser-bed-map-zoom-label { min-width: 44px; text-align: center; font-size: 0.82rem; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-bed-map-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } #laser-bed-map-trace-line { stroke: #22c55e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.6)); } .laser-bed-map-dot { --laser-marker-color: #22c55e; position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--laser-marker-color); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--laser-marker-color) 55%, transparent); transform: translate(-50%, 50%); transition: left 0.3s ease, bottom 0.3s ease, background 0.2s ease; } .laser-bed-map-dot.shape-cross { width: 12px; height: 12px; background: transparent; border-radius: 0; box-shadow: none; } .laser-bed-map-dot.shape-cross::before, .laser-bed-map-dot.shape-cross::after { content: ''; position: absolute; background: var(--laser-marker-color); box-shadow: 0 0 4px 1px color-mix(in srgb, var(--laser-marker-color) 55%, transparent); } .laser-bed-map-dot.shape-cross::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } .laser-bed-map-dot.shape-cross::after { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .laser-bed-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 0.62rem; color: var(--text-muted); } .laser-bed-map-dims { font-size: 0.76rem; font-weight: 700; color: #22c55e; text-align: right; white-space: nowrap; } .laser-bed-map-hover-coords { position: absolute; bottom: 4px; left: 6px; z-index: 2; font-size: 0.72rem; font-weight: 600; color: #22c55e; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); pointer-events: none; } .laser-jog-z { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .laser-jog-z-label { font-weight: 800; color: var(--text-muted); background: rgba(255, 255, 255, 0.03); } .laser-jog-z-btn { width: 60px; height: 42px; } .laser-jog-steps-label { font-size: 0.72rem; color: var(--text-muted); } .laser-jog-steps { display: flex; gap: 6px; } .laser-step-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 0.82rem; cursor: pointer; } .laser-step-btn.active { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.4); color: #22c55e; font-weight: 700; } /* ── Ficha CNC dedicada ("NOPAL CNC") ── */ .cnc-main { display: flex; flex-direction: column; gap: 16px; padding: 20px 32px; } .cnc-topbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 18px; background: var(--card-bg); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--radius-lg); } .cnc-topbar-brand { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; flex-shrink: 0; } .cnc-state-pill { padding: 3px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; background: rgba(34, 197, 94, 0.16); color: #22c55e; } .cnc-state-pill.state-alarm { background: rgba(239, 68, 68, 0.18); color: #ef4444; } .cnc-state-pill.state-run { background: rgba(245, 158, 11, 0.18); color: var(--orange); } .cnc-topbar-selectors { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; } .cnc-topbar-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); } .cnc-topbar-field select { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 0.82rem; font-weight: 600; min-width: 140px; } .cnc-topbar-icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cnc-topbar-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(245, 158, 11, 0.18); color: var(--orange); font-size: 0.72rem; font-weight: 800; } .cnc-main-layout { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: 16px; align-items: start; } .cnc-left-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cnc-right-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cnc-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--card-bg); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius-lg); min-width: 0; } .cnc-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cnc-card-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; color: var(--orange); } .cnc-card-header-actions { display: flex; gap: 6px; } .cnc-position-table { width: 100%; border-collapse: collapse; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-position-table th, .cnc-position-table td { padding: 4px 6px; text-align: right; } .cnc-position-table thead th { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; } .cnc-position-table tbody th { text-align: left; color: var(--text-muted); font-weight: 700; } .cnc-position-table tbody td { font-size: 1.05rem; font-weight: 700; color: var(--text); } .cnc-position-table tbody td:last-child { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; } .cnc-feed-spindle-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--text-muted); padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .cnc-feed-spindle-row strong { color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-pin-row { display: flex; flex-wrap: wrap; gap: 6px; } .cnc-pin-pill { padding: 4px 9px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text-muted); } .cnc-pin-pill.active { border-color: #ef4444; background: rgba(239, 68, 68, 0.18); color: #ef4444; } .cnc-job-file-row { display: flex; align-items: center; gap: 10px; color: var(--orange); } .cnc-job-file-row div { display: flex; flex-direction: column; gap: 2px; } .cnc-job-file-row strong { color: var(--text); font-size: 0.88rem; } .cnc-job-file-row span { font-size: 0.68rem; color: var(--text-muted); } .cnc-job-progress-row { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-job-progress-row .laser-job-progress-bar { flex: 1; } .cnc-job-buttons-row { display: flex; gap: 6px; flex-wrap: wrap; } .cnc-job-buttons-row .btn-file-action, .cnc-job-buttons-row .laser-step-btn { flex: 1; justify-content: center; text-align: center; } .cnc-override-block { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .cnc-override-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .cnc-override-row { display: flex; align-items: center; gap: 6px; } .cnc-override-row .laser-step-btn { flex: 1; text-align: center; } .cnc-override-value { min-width: 46px; text-align: center; font-weight: 700; color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-zero-row { display: flex; gap: 8px; } .cnc-shift-row { display: flex; flex-direction: column; gap: 6px; } .cnc-shift-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cnc-shift-inputs label { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-muted); } .cnc-shift-inputs input[type="number"] { width: 64px; padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--text); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-shift-auto { margin-left: auto; } .cnc-spindle-cw-row { display: flex; gap: 6px; } .cnc-spindle-mode-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--text-muted); font-weight: 700; font-size: 0.8rem; cursor: pointer; } .cnc-spindle-mode-btn.active { border-color: #22c55e; background: rgba(34, 197, 94, 0.18); color: #22c55e; } .cnc-rpm-row { display: flex; align-items: baseline; gap: 8px; } .cnc-rpm-row input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 0.95rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-rpm-row span { font-size: 0.72rem; color: var(--text-muted); } .cnc-rpm-presets { display: flex; gap: 6px; } .cnc-rpm-presets .laser-step-btn { flex: 1; text-align: center; } .cnc-jog-card { align-items: center; text-align: center; } .cnc-jog-card .cnc-card-header { width: 100%; } .cnc-feed-mode-row { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 0.7rem; color: var(--text-muted); } .cnc-feed-mode-group, .cnc-rapid-group { display: flex; gap: 6px; } .cnc-feed-mode-group .laser-step-btn, .cnc-rapid-group .laser-step-btn { flex: 1; text-align: center; } .cnc-jog-steps { display: flex; gap: 6px; } .cnc-jog-pad-row { display: flex; align-items: center; gap: 14px; } .cnc-jog-z-col { display: flex; flex-direction: column; gap: 6px; } .cnc-jog-steps-z { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .cnc-jog-steps-z .laser-step-btn { padding: 3px 6px; font-size: 0.75rem; } .cnc-stop-btn { width: 46px; height: 46px; border-radius: 10px; border: none; background: #ef4444; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); } .cnc-stop-btn:hover { background: #dc2626; } .cnc-rapid-row { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 0.7rem; color: var(--text-muted); } .cnc-files-card { gap: 10px; } .cnc-files-search { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 0.82rem; } .cnc-files-table-wrap { max-height: 340px; overflow-y: auto; } .cnc-files-table th, .cnc-files-table td { font-size: 0.78rem; } .cnc-files-row { cursor: pointer; } .cnc-files-row-actions { display: flex; gap: 4px; justify-content: flex-end; } .cnc-footer-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px; background: var(--card-bg); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius-lg); font-size: 0.76rem; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .cnc-footer-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; } .cnc-footer-dot.online { background: #22c55e; } .cnc-footer-sep { opacity: 0.4; } .cnc-footer-spacer { flex: 1; } .cnc-footer-bar strong { color: var(--text); } .cnc-footer-stop-btn { flex-shrink: 0; } /* Modo Simple/Avanzado del panel CNC — ver applyCncDashboardMode() en app.js. Simple es el estado por defecto (sin atributo o cualquier valor distinto de "advanced"): los controles semi-pro quedan ocultos hasta que el usuario active el modo Avanzado en Configuración. */ body:not([data-cnc-mode="advanced"]) .cnc-advanced-only { display: none; } /* Perfil de máquina CNC — ver applyCncMachineProfile() en app.js. Router (con husillo real) es el default; en plotter (lápiz/marcador) no aplica RPM, dirección de husillo ni sonda montada en husillo. */ body[data-cnc-profile="plotter"] .cnc-router-only { display: none; } /* Firmware de la placa CNC/láser activa — ver refreshCncStatus()/ renderLaserStatus() en app.js, que escriben este atributo con el "firmware" que devuelve /api/laser/status ("fluidnc" por defecto, "marlin" para placas dadas de alta como Marlin). Los controles exclusivos de GRBL (desbloquear $X, WCS G54-G59, overrides de feed/spindle en tiempo real, pines de límite) no existen en Marlin y se ocultan. La fila con las temperaturas de extrusor/cama (caso híbrido: placa Marlin con hotend) usa el criterio inverso, .marlin-only, oculta salvo firmware="marlin". */ body[data-machine-firmware="marlin"] .grbl-only { display: none; } body:not([data-machine-firmware="marlin"]) .cnc-marlin-only { display: none; } @media (max-width: 1100px) { .cnc-main-layout { grid-template-columns: 1fr; } } /* ── Visor CNC: pestañas VISOR / 3D VIEW / SIMULATION ── */ .cnc-viewer-card { padding: 0; overflow: hidden; min-height: 480px; flex: 1; } .cnc-viewer-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .cnc-viewer-tab { background: none; border: none; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; padding: 8px 12px 10px; cursor: pointer; border-bottom: 2px solid transparent; } .cnc-viewer-tab.active { color: var(--green-dark); border-bottom-color: var(--green-dark); } .cnc-viewer-panels { position: relative; flex: 1; min-height: 420px; display: flex; } .cnc-viewer-panel { display: none; width: 100%; height: 100%; } .cnc-viewer-panel.active { display: flex; } .cnc-visor-canvas-wrap { position: relative; flex: 1; background: #081410; } .cnc-visor-canvas { position: absolute; inset: 0; } .cnc-visor-origin-marker { /* Antes tenía top/left fijos (decorativo, siempre arriba-izquierda sin importar dónde estuviera X0/Y0 real) — ahora la posición la calcula updateOriginMarker() en cada frame vía transform: translate(), acá solo queda position:absolute como base para ese transform. */ position: absolute; top: 0; left: 0; pointer-events: none; } .cnc-visor-coords { position: absolute; top: 12px; right: 12px; display: flex; gap: 12px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.78rem; background: rgba(0, 0, 0, 0.4); padding: 6px 12px; border-radius: 8px; pointer-events: none; } .cnc-visor-nav-col { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; } .cnc-visor-legend { position: absolute; bottom: 12px; right: 12px; max-width: 220px; background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 10px 12px; } .cnc-visor-legend-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.76rem; color: var(--text); } .cnc-visor-legend-list li { display: flex; align-items: center; gap: 8px; } .cnc-visor-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .cnc-visor-swatch-rapid { background: rgba(255, 255, 255, 0.35); } .cnc-visor-swatch-cut { background: var(--orange); } .cnc-visor-swatch-selected { background: #fbbf24; } .cnc-visor-empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.85rem; } .cnc-viewer-soon { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-muted); padding: 20px; max-width: 320px; } /* ── Asistente guiado CNC ── */ .modal-content.cnc-wizard-modal-content { width: 90%; max-width: 460px; height: auto; max-height: 85vh; overflow-y: auto; padding: 28px; gap: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; } .cnc-wizard-steps-indicator { display: flex; gap: 8px; margin-bottom: 6px; } .cnc-wizard-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } .cnc-wizard-step-dot.active { background: var(--green-dark); } .cnc-wizard-step-dot.done { background: rgba(34, 197, 94, 0.5); } .cnc-wizard-step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cnc-wizard-step-title { font-weight: 700; font-size: 1rem; color: var(--text); margin: 0; } .cnc-wizard-step-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0; } .cnc-wizard-file-list { width: 100%; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; text-align: left; } .cnc-wizard-file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent; } .cnc-wizard-file-row:hover { background: rgba(255, 255, 255, 0.09); } .cnc-wizard-file-row.selected { border-color: var(--green-dark); background: rgba(34, 197, 94, 0.1); } .cnc-wizard-zero-btn { width: 100%; justify-content: center; } .cnc-wizard-unlock-row { display: flex; align-items: center; gap: 10px; } .cnc-wizard-fit-outer { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 8px; } .cnc-wizard-fit-inner { position: absolute; background: rgba(245, 158, 11, 0.35); border: 1px solid #f59e0b; border-radius: 2px; } .cnc-wizard-fit-inner.overflow { background: rgba(239, 68, 68, 0.35); border-color: #ef4444; } .cnc-wizard-fit-text { font-size: 0.85rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; color: var(--text); margin: 0; } .cnc-wizard-fit-ack { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); text-align: left; } /* ── Asistente de configuración del CNC ── */ .cnc-setup-wizard-modal-content { max-width: 520px; } .cnc-setup-subsection { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .cnc-setup-subsection-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); text-align: left; } .cnc-setup-zero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cnc-setup-zero-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--text-muted); font-size: 0.72rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .cnc-setup-zero-btn:hover { background: rgba(255, 255, 255, 0.07); } .cnc-setup-zero-btn.active { border-color: var(--green-dark); background: rgba(34, 197, 94, 0.1); color: var(--text); } .cnc-setup-zero-dot { position: relative; width: 34px; height: 24px; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 3px; } .cnc-setup-zero-btn.active .cnc-setup-zero-dot { border-color: rgba(34, 197, 94, 0.5); } .cnc-setup-zero-dot::after { content: ''; position: absolute; left: var(--dot-x); top: var(--dot-y); width: 6px; height: 6px; border-radius: 50%; background: var(--green-dark); transform: translate(-50%, -50%); } .cnc-setup-zero-z-switch { width: 100%; } .cnc-setup-maxz-field { width: 100%; max-width: 220px; } .cnc-setup-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; width: 100%; } .cnc-setup-type-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--text-muted); font-size: 0.75rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .cnc-setup-type-card:hover { background: rgba(255, 255, 255, 0.07); } .cnc-setup-type-card.active { border-color: var(--green-dark); background: rgba(34, 197, 94, 0.1); color: var(--text); } .cnc-setup-followup { width: 100%; margin-top: 4px; } .cnc-setup-dim-row { display: flex; align-items: center; gap: 6px; } .cnc-setup-dim-row input { flex: 1; min-width: 0; } .cnc-setup-summary-list { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; } .cnc-setup-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cnc-setup-summary-row span:first-child { color: var(--text-muted); } .cnc-setup-summary-row strong { color: var(--text); text-align: right; } .cnc-viewer-soon strong { color: var(--text); font-size: 0.95rem; } .cnc-viewer-soon p { margin: 0; font-size: 0.8rem; } .laser-jog-actions { margin-top: 0; } .laser-jog-cross-col .laser-jog-actions .btn-file-action { width: 100%; } .laser-jog-controls-row { display: flex; gap: 10px; flex-wrap: wrap; } .laser-fire-group { flex: 1; min-width: 140px; display: flex; } .laser-fire-btn-wide, .laser-air-btn-wide { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); cursor: pointer; font-size: 0.85rem; font-weight: 700; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .laser-fire-btn-wide { border: 1px solid rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.12); color: #f87171; } .laser-fire-btn-wide:hover { background: rgba(239, 68, 68, 0.2); } .laser-fire-btn-wide.active { border-color: #22c55e; background: rgba(34, 197, 94, 0.2); color: #4ade80; box-shadow: 0 0 16px 2px rgba(34, 197, 94, 0.35); animation: laserFirePulse 1.2s ease-in-out infinite; } .laser-spindle-btn-wide { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.12); color: var(--orange); } .laser-spindle-btn-wide.active { border-color: var(--orange); background: rgba(245, 158, 11, 0.22); color: #fbbf24; box-shadow: 0 0 16px 2px rgba(245, 158, 11, 0.35); animation: none; } @keyframes laserFirePulse { 0%, 100% { box-shadow: 0 0 16px 2px rgba(34, 197, 94, 0.35); } 50% { box-shadow: 0 0 22px 5px rgba(34, 197, 94, 0.2); } } .laser-air-btn-wide { border: 1px solid rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.14); color: #22c55e; } .laser-air-btn-wide:hover { background: rgba(34, 197, 94, 0.22); } .laser-air-btn-wide.active { box-shadow: 0 0 16px 2px rgba(34, 197, 94, 0.35); animation: laserAirPulse 1.2s ease-in-out infinite; } @keyframes laserAirPulse { 0%, 100% { box-shadow: 0 0 16px 2px rgba(34, 197, 94, 0.35); } 50% { box-shadow: 0 0 22px 5px rgba(34, 197, 94, 0.2); } } .laser-fire-label { font-size: 0.8rem; font-weight: 700; } .laser-fire-power { display: flex; flex-direction: column; gap: 6px; } .laser-fire-power label { font-size: 0.72rem; color: var(--text-muted); } .laser-fire-power-row { display: flex; align-items: center; gap: 8px; } .laser-fire-power input { width: 72px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--text); padding: 8px 10px; font-size: 0.85rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-power-presets { display: flex; gap: 6px; flex: 1; } .laser-power-presets .laser-step-btn { flex: 1; text-align: center; } .laser-card-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .laser-card-header-row .laser-card-title { margin-bottom: 0; } .laser-card-header-row .btn-icon-dark { width: 36px; height: 36px; flex-shrink: 0; } .laser-card-subtitle { margin: -10px 0 16px; color: var(--text-muted); font-size: 0.85rem; } .modal-content.laser-settings-modal-content { width: 92%; max-width: 640px; height: auto; max-height: 85vh; padding: 28px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .laser-settings-modal-header h2 { margin: 0 0 6px; } /* ── Memoria (SD) del hub del láser -- réplica visual de la referencia del usuario, construida sobre tokens y clases ya existentes en NOPAL (.card-header-std/.card-collapsible ya genéricos, .gcode-library-search/ .gcode-select-control/.gcode-toolbar-action/.gcode-primary-action/ .gcode-view-switch ya definidos para la barra de la biblioteca de G-code -- misma apariencia, sin duplicar reglas). Ver renderSdRows/ applySdListFilters en app.js. ── */ .laser-sd-body { display: flex; flex-direction: column; gap: 14px; } .laser-sd-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; } .laser-sd-breadcrumb .breadcrumb-segment { min-height: 26px; padding: 0 10px; font-size: 0.68rem; } .laser-sd-search-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .laser-sd-search { flex: 1; min-width: 180px; } .laser-sd-type-control select, .laser-sd-sort-control select { max-width: 130px; } .laser-sd-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .laser-sd-upload-label { cursor: pointer; } .laser-sd-more-wrap { margin-left: auto; } .laser-sd-more-menu-library { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .laser-sd-more-menu-library .settings-select { width: 100%; } .laser-sd-columns-head, .laser-sd-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 150px; align-items: center; gap: 12px; } .laser-sd-columns-head { padding: 0 12px; color: var(--text-muted); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .laser-sd-col-size, .laser-sd-col-modified { text-align: left; } .laser-sd-list { display: flex; flex-direction: column; gap: 6px; min-height: 120px; max-height: 420px; overflow-y: auto; } .laser-sd-row { padding: 10px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: 10px; transition: background 0.15s ease, border-color 0.15s ease; } .laser-sd-row:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(var(--accent-rgb), 0.25); } .laser-sd-row-name-col { display: flex; align-items: center; gap: 10px; min-width: 0; } .laser-sd-row-icon { color: #22c55e; flex-shrink: 0; } .laser-sd-row-name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .laser-sd-row-name { color: var(--text); font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .laser-sd-row-name:hover { color: #22c55e; } .laser-sd-row-meta { font-size: 0.68rem; color: var(--text-muted); } .laser-sd-row-size, .laser-sd-row-modified { flex-shrink: 0; font-size: 0.75rem; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-sd-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .laser-sd-preview-btn.is-disabled { opacity: 0.4; pointer-events: none; } .laser-sd-row-menu-wrap { position: relative; flex-shrink: 0; } .laser-sd-row-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; display: flex; flex-direction: column; min-width: 150px; padding: 4px; background: #1f2937; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .laser-sd-row-menu-item { padding: 8px 10px; border: none; border-radius: 6px; background: transparent; color: #f8fafc; font-size: 0.82rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s ease; } .laser-sd-row-menu-item:hover { background: rgba(255, 255, 255, 0.1); } .laser-sd-row-menu-item-danger { color: #f87171; } /* Formatear SD -- ámbar, no rojo: no es "cancelar/eliminar algo puntual", es una acción de sistema poco frecuente que además no está confirmada contra el firmware (ver laserSdFormatConfirm1). */ .laser-sd-row-menu-item-amber { color: #f59e0b; } .laser-sd-more-menu-divider { height: 1px; margin: 4px 2px; background: rgba(255, 255, 255, 0.1); } /* Buscador: "×" para limpiar (ver laser-sd-search-clear-btn en app.js). */ .laser-sd-search-clear-btn { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--text-muted); cursor: pointer; } .laser-sd-search-clear-btn:not([hidden]) { display: inline-flex; } .laser-sd-search-clear-btn:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); } /* Fila recién subida (ver highlightSdRecentFile en app.js) -- confirmación visual de "esto es lo que se acaba de mandar", pedido explícito del usuario para el flujo de "Enviar desde biblioteca". */ .laser-sd-row.is-recent { border-color: rgba(34, 197, 94, 0.6); background: rgba(34, 197, 94, 0.12); transition: background 1.8s ease, border-color 1.8s ease; } /* Popup "Enviar desde biblioteca" (ver #laser-sd-library-modal en index.html). */ .laser-sd-library-modal-content { width: min(460px, 92vw); max-height: 80vh; display: flex; flex-direction: column; } .laser-sd-library-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; margin: 4px 0 10px; } .laser-sd-library-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; } .laser-sd-library-row:hover { background: rgba(255, 255, 255, 0.06); } .laser-sd-library-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; accent-color: #22c55e; cursor: pointer; } .laser-sd-library-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--text); } .laser-sd-library-progress { margin-bottom: 12px; } .laser-sd-library-progress-label { margin-bottom: 6px; font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Vista cuadrícula: mismos datos, tarjetas en vez de filas -- se pierde el header de columnas (no aplica a una grilla) y tamaño/modificado pasan a texto chico dentro de la tarjeta en vez de columnas propias. */ .laser-sd-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 480px; } .laser-sd-list-grid .laser-sd-row { grid-template-columns: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; text-align: center; } .laser-sd-list-grid .laser-sd-row-name-col { flex-direction: column; gap: 6px; } .laser-sd-list-grid .laser-sd-row-icon { width: 30px; height: 30px; } .laser-sd-list-grid .laser-sd-row-name { white-space: normal; text-align: center; } .laser-sd-list-grid .laser-sd-row-size, .laser-sd-list-grid .laser-sd-row-modified { font-size: 0.66rem; } .laser-sd-list-grid .laser-sd-row-actions { justify-content: center; } .laser-sd-capacity-bar { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.72rem; color: var(--text-muted); } .laser-sd-capacity-count, .laser-sd-capacity-used, .laser-sd-capacity-pct { flex-shrink: 0; white-space: nowrap; } .laser-sd-capacity-track { flex: 1; min-width: 60px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .laser-sd-capacity-fill { height: 100%; border-radius: 999px; background: #22c55e; transition: width 0.2s ease; } .laser-settings-field { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .laser-name-row { display: flex; gap: 8px; margin-top: 6px; } .laser-name-row input { flex: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: var(--bg); color: var(--text); padding: 8px 12px; font-size: 0.9rem; } .laser-settings-header-row { display: flex; align-items: center; justify-content: space-between; } .laser-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; } .laser-settings-item { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .laser-settings-item-row { display: flex; align-items: center; gap: 8px; } .laser-settings-item-label { flex-shrink: 0; width: 48px; font-size: 0.72rem; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-settings-item-hint { margin: 0; font-size: 0.68rem; line-height: 1.4; color: #f59e0b; } .laser-settings-item input { flex: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: var(--bg); color: var(--text); padding: 5px 8px; font-size: 0.82rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .laser-settings-item.saved input { border-color: rgba(34, 197, 94, 0.6); } .theme-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .theme-option-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(16, 24, 40, 0.08); background: rgba(255, 255, 255, 0.06); color: var(--text); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; text-align: left; } .theme-option-card:hover, .theme-option-card.active { transform: translateY(-2px); border-color: var(--accent); background: rgba(255, 255, 255, 0.16); } .theme-option-title { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; } .theme-option-logo { flex-shrink: 0; } .theme-option-swatches { display: flex; gap: 5px; } .theme-option-swatch { width: 16px; height: 16px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } /* ── NOPAL Style: la tarjeta pasó de