*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Tema oscuro (default) ────────────────────────────────────────── * Mismas variables en ambos temas -- el resto de la hoja de estilos * (y del JS que fija colores por codigo) nunca necesita saber en que * tema esta, solo usa var(--x). Aplica tanto sin atributo (:root, para * que nunca haya un instante sin tema definido) como con * data-theme="dark" explicito (para poder alternar de vuelta desde * claro). El atributo lo pone/quita theme-init (ver script inline en * el de index.html) y toggleTheme() en app.js. */ :root, [data-theme="dark"] { --bg: #0a0a0a; --bg2: #111111; --bg3: #181818; --bgnav: #1a1a1a; --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.13); --text: #e8e8e8; --muted: #555; --mono: 'Space Mono', monospace; --sans: 'DM Sans', sans-serif; --green: #00ff87; --green-dim: #00ff8733; --blue: #4d9fff; --blue-main: #0091ff; --blue-dim: #4d9fff22; --amber: #ffb830; --amber-dim: #ffb83022; --purple: #b87fff; --red: #ff4d4d; --red-dim: #ff4d4d22; } /* ── Tema claro ── mismos nombres de variable, valores ajustados para * buen contraste sobre fondo blanco (los acentos neon del tema oscuro * se ven lavados en claro, asi que se oscurecen/saturan un poco -- * misma paleta de acento que ya usa el panel de config_server, para * que ambas superficies del proyecto se sientan consistentes). */ [data-theme="light"] { --bg: #e5e5e5; --bg2: #e9e9e9; --bg3: #f1f5f9; --bgnav: #e7e7e7; --border: rgba(15,23,42,0.08); --border2: rgba(15,23,42,0.14); --text: #1e293b; --muted: #64748b; --mono: 'Space Mono', monospace; --sans: 'DM Sans', sans-serif; --green: #16a34a; --green-dim: #16a34a22; --blue: #2563eb; --blue-main: #137dcd; --blue-dim: #2563eb22; --amber: #d97706; --amber-dim: #d9770622; --purple: #7c3aed; --red: #dc2626; --red-dim: #dc262622; } body { font-family: var(--sans); background: var(--bgnav); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; /* Red de seguridad -- si algo en algun punto no cabe del todo en una * pantalla angosta, esto evita que fuerce scroll horizontal de TODA * la pagina (que es ademas lo que hacia que los toques cerca del * borde en movil fueran poco confiables -- un layout desbordado * confunde la deteccion de gestos del navegador). Preferible que algo * se recorte visualmente (senal clara de "hay que ajustar esto") a * que toda la pagina se pueda arrastrar de lado. */ overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; } /* ── Header ── */ header { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 56px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bgnav); backdrop-filter: blur(12px); z-index: 100; } .logo { display: flex; align-items: center; gap: 14px; } .logo-hex { width: 28px; height: 28px; flex-shrink: 0; } .logo-name { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .logo-version { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; } .logo-image { } /* ── Buscador global (topbar) ── */ .header-search { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; padding: 7px 12px; margin: 0 24px; border: 1px solid var(--border2); border-radius: 8px; background: var(--bg2); color: var(--muted); transition: border-color 0.15s; } .header-search:focus-within { border-color: var(--blue); color: var(--text); } .header-search svg { flex-shrink: 0; } .header-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-family: var(--sans); font-size: 12px; } .header-search input::placeholder { color: var(--muted); } .header-right { display: flex; align-items: center; gap: 20px; } .header-status { display: flex; align-items: center; gap: 20px; } /* Boton hamburguesa -- oculto en escritorio (#header-status ya se ve * completo ahi). Se muestra solo debajo del breakpoint movil, ver * media query mas abajo. */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); cursor: pointer; } .menu-toggle:hover { background: var(--bg3); } /* WS status — dot + label */ .ws-status { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s; } .ws-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transition: background 0.3s, box-shadow 0.3s; flex-shrink: 0; } .ws-status.online { color: var(--green); } .ws-status.online .ws-dot { background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 2s ease-in-out infinite; } .ws-status.error { color: var(--red); } .ws-status.error .ws-dot { background: var(--red); } .ws-status.connecting { color: var(--amber); } .ws-status.connecting .ws-dot { background: var(--amber); } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.35} } /* Latency chip */ .latency-chip { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; border: 1px solid var(--border); padding: 3px 9px; transition: border-color 0.3s, color 0.3s; } .latency-chip .lat-bar { display: flex; align-items: flex-end; gap: 2px; height: 10px; } .lat-bar span { width: 3px; background: var(--muted); border-radius: 1px; transition: height 0.4s ease, background 0.3s; } .latency-chip.good { color: var(--green); border-color: rgba(0,255,135,0.25); } .latency-chip.good .lat-bar span { background: var(--green); } .latency-chip.mid { color: var(--amber); border-color: rgba(255,184,48,0.25); } .latency-chip.mid .lat-bar span { background: var(--amber); } .latency-chip.bad { color: var(--red); border-color: rgba(255,77,77,0.25); } .latency-chip.bad .lat-bar span { background: var(--red); } .clock { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; } /* ── Boton de tema (claro/oscuro) ── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--bg3); } .theme-toggle svg { width: 16px; height: 16px; } /* Se muestra solo el icono que corresponde al tema ACTIVO -- el sol * indica "asi se ve ahorita" en claro, la luna lo mismo en oscuro * (convencion mas comun que "el icono representa a donde cambias" -- * ambas existen en distintos productos, esta es una eleccion, no un * estandar unico). */ [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ── Main ── */ main { max-width: 1440px; margin: 0 auto; padding: 28px; } /* ── Stats ── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 32px; } .stat { background: var(--bg); padding: 20px 24px; position: relative; overflow: hidden; } .stat::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--border); } .stat-n { font-family: var(--mono); font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 6px; transition: color 0.3s; } .stat-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; } /* ── Section label ── */ .section-label { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .section-label::after { content:''; flex:1; height:1px; background:var(--border); } /* ── Toolbar: busqueda / filtros / agrupar / cambio de vista ── */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .toolbar-group { display: flex; align-items: center; gap: 8px; } .search-input, .filter-select { font-family: var(--sans); font-size: 12px; color: var(--text); background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; padding: 7px 10px; outline: none; transition: border-color 0.15s; } .search-input { min-width: 180px; } .search-input:focus, .filter-select:focus { border-color: var(--blue); } .search-input::placeholder { color: var(--muted); } .filter-select { cursor: pointer; } .view-switch { display: flex; margin-left: auto; border: 1px solid var(--border2); border-radius: 6px; overflow: hidden; } .view-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--bg2); color: var(--muted); border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .view-btn + .view-btn { border-left: 1px solid var(--border2); } .view-btn:hover { background: var(--bg3); color: var(--text); } .view-btn.active { background: var(--blue-dim); color: var(--blue); } /* ── Tabla de datos ── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); } .data-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--bg2); } .data-table thead th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border2); white-space: nowrap; } .data-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; } /* Solo las filas GENUINAMENTE nuevas animan al entrar -- ver * renderPistonTable()/renderAqTable() en app.js, que comparan contra * los IDs que ya existian antes del refresco. Sin esto, como la tabla * se reconstruye entera en cada actualizacion de datos, TODAS las * filas volvian a animar cada vez (el efecto de "las filas se mueven" * que se reportó) -- aunque el contenido fuera identico al anterior. */ .data-table tbody tr.row-enter { animation: fadeIn 0.2s ease; } .data-table tbody tr:hover { background: var(--bg3); } .data-table tbody tr.offline { opacity: 0.45; } .data-table tbody tr:last-child { border-bottom: none; } .data-table td { padding: 9px 12px; vertical-align: middle; white-space: nowrap; } /* Mismo resumen binario que el border-top de los cards (ver * doorFullyLocked()/aqIsArmed()), pero como una franja a la izquierda * de la primera celda -- un no acepta border-left de forma * confiable en todos los navegadores, por eso va en el . */ .data-table tbody tr.lock-ok td:first-child, .data-table tbody tr.armed-ok td:first-child { border-left: 3px solid var(--green); } .data-table tbody tr.lock-bad td:first-child, .data-table tbody tr.armed-bad td:first-child { border-left: 3px solid var(--red); } .data-table tbody tr td:first-child { border-left: 3px solid transparent; font-weight: 700; font-family: var(--mono); letter-spacing: 0.05em; } .row-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .row-status-txt { text-transform: uppercase; } .row-actions { display: flex; align-items: center; gap: 6px; } .btn-sm { font-family: var(--mono); font-size: 10px; padding: 5px 9px; border: 1px solid; background: transparent; cursor: pointer; border-radius: 4px; transition: background 0.15s, color 0.15s; width:stretch; } .btn-sm:disabled { opacity: 0.25; cursor: not-allowed; } .row-gear { display: flex; align-items: center; justify-content: center; width: 80px; height: 26px; border-radius: 4px; border: 1px solid var(--border2); background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .row-gear:hover { background: var(--bg3); color: var(--text); } .data-table tbody tr.group-row td { background: var(--bg3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-left: none !important; } /* ── Grid ── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); } /* ── Card ── */ .card { background: var(--bg2); padding: 0; transition: background 0.2s, border-top-color 0.3s; position: relative; animation: fadeIn 0.2s ease; border-top: 3px solid var(--border2); } .card:hover { background: var(--bg3); } .card.offline { opacity: 0.45; } /* Puerta totalmente bloqueada (ver doorFullyLocked()) -- verde = si, * rojo = no. Deliberadamente el borde MAS visible/grande del card (a * diferencia de .sensor-row, que es discreto a proposito) porque esto * SI es el resumen final que se quiere ver de un vistazo. */ .card.lock-ok { border-top-color: var(--green); } .card.lock-bad { border-top-color: var(--red); } @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .card-id { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; } .pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid; margin-left:auto; } .pill-on { color: var(--green); border-color: var(--green); } .pill-off { color: var(--red); border-color: var(--red); } .card-body { padding: 18px; } /* Status row */ .status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg); } .status-icon { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background 0.3s, box-shadow 0.3s; } .status-txt { font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s; flex: 1; } /* Indicador del sensor inductivo (puerta emparejada) -- a proposito * mucho mas discreto que .status-row/.status-txt (16px, bold): aqui * el texto NO cambia de color con el estado (siempre --muted), solo * el puntito lo hace -- asi nunca compite visualmente con el estado * real de bloqueo del piston. */ .sensor-row { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 10px; border: 1px solid var(--border); } .sensor-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transition: background 0.3s; } .sensor-txt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); } /* Card latency mini-bar */ .card-lat { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.06em; display: flex; align-items: center; gap: 4px; } /* Metrics */ .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 16px; } .metric { background: var(--bg); padding: 10px 12px; } .metric-v { font-family: var(--mono); font-size: 10px; margin-top: 12px; letter-spacing: 0.05em; display: inline-flex; padding:0 0 0 7px; font-weight: 500; margin-right: 25px; } .metric-l { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 12px; letter-spacing: 0.05em; display: inline-flex; } /* Bar */ .bar-wrap { margin-bottom: 16px; } .bar-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; } .bar-track { height: 3px; background: var(--bg3); border: 1px solid var(--border); position: relative; } .bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--green); transition: width 0.4s ease; } .ts { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 12px; letter-spacing: 0.05em; } .ts-p { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 12px; letter-spacing: 0.05em; display: inline-flex; padding:0 15px; } /* Buttons — CERRAR=verde, ABRIR=rojo */ .btns { display: flex; gap: 6px; flex-wrap: wrap; } .btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid; background: transparent; cursor: pointer; transition: background 0.15s, color 0.15s; flex: 1; } .btn:disabled { opacity: 0.25; cursor: not-allowed; } /* CERRAR → verde (quinta rueda cerrada = seguro = verde) */ .btn-serv { color: var(--amber); border-color: var(--amber); } .btn-serv:hover:not(:disabled) { background: var(--amber); color: var(--bg); } /* CERRAR → verde (quinta rueda cerrada = seguro = verde) */ .btn-close { color: var(--green); border-color: var(--green); } .btn-close:hover:not(:disabled) { background: var(--green); color: var(--bg); } /* ABRIR → rojo (quinta rueda abierta = riesgo = rojo) */ .btn-open { color: var(--red); border-color: var(--red); } .btn-open:hover:not(:disabled) { background: var(--red); color: var(--bg); } .btn-cfg { color: var(--muted); border-color: var(--border2); } .btn-cfg:hover { background: var(--bg3); color: var(--text); } .btn-rst { color: var(--amber); border-color: rgba(255,184,48,0.4); } .btn-rst:hover:not(:disabled) { background: rgba(255,184,48,0.1); border-color: var(--amber); } /* Config panel */ .hub-section-box { display:flex; margin-top:30px; } .hub-section-col1 { padding-left:10px; width:50%; } .hub-section-col2 { padding-left:10px; width:50%; } .cfg { display: none; margin-top: 12px; padding: 14px; border: 1px solid var(--border); background: var(--bg); } .cfg.open { display: block; } .cfg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cfg-row:last-child { margin: 0; } .cfg-lbl { font-size: 11px; color: var(--muted); width:35%;} .cfg-row select, .cfg-row input[type=number] { font-family: var(--mono); font-size: 11px; background: var(--bg2); color: var(--text); border: 1px solid var(--border2); padding: 4px 8px; width: 150px; } .btn-sm { font-family: var(--mono); font-size: 10px; padding: 4px 10px; border: 1px solid var(--border2); background: transparent; color: var(--muted); cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; } .btn-sm:hover { background: var(--bg3); color: var(--text); } .cfg-row input:disabled, .cfg-row .btn-sm:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* Empty state */ .empty { grid-column: 1/-1; padding: 80px 20px; text-align: center; } .empty svg { opacity: 0.08; margin-bottom: 20px; } .empty h3 { font-family: var(--mono); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .empty p { font-size: 12px; color: var(--muted); } /* Toast */ #toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg2); border: 1px solid var(--border2); border-left: 3px solid var(--green); padding: 12px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 999; max-width: 300px; } #toast.show { opacity: 1; transform: translateY(0); } #toast.err { border-left-color: var(--red); } /* Status colors */ .s-closed { color: var(--green); } .s-closing { color: var(--amber); } .s-open { color: var(--red); } .s-opening { color: var(--purple); } .s-unknown { color: var(--muted); } /* ── Tabs ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; } .tab-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; padding: 12px 24px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--blue-main); border-bottom-color: var(--blue-main); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ── Aquiles cards ── */ .aq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); } .aq-card { background: var(--bg2); padding: 0; position: relative; animation: fadeIn 0.2s ease; transition: background 0.2s, border-top-color 0.3s; overflow: hidden; /* evita que el contenido expanda el card */ min-width: 0; border-top: 3px solid var(--border2); } .aq-card:hover { background: var(--bg3); } .aq-card.offline { opacity: 0.45; } /* Armado/desarmado (ver aqIsArmed() en app.js) -- mismo criterio visual * que .card.lock-ok/.lock-bad en los pistones: verde = armado, rojo = * cualquier otro estado (desconectado, esperando PIN, etc.) -- un * resumen binario de un vistazo, no un color por cada uno de los 5 * estados posibles (para eso ya esta el punto de estado individual). */ .aq-card.armed-ok { border-top-color: var(--green); } .aq-card.armed-bad { border-top-color: var(--red); } .aq-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .aq-id { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; } .aq-body { padding: 18px; } /* Estado ARMADO / DESCONECTADO */ .aq-state { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); background: var(--bg); margin-bottom: 16px; } .aq-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: background 0.3s, box-shadow 0.3s; } .aq-state-txt { font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; flex: 1; } .aq-armed { color: var(--green); } .aq-disconnected { color: var(--red); } .aq-auth-err { color: var(--amber); } .aq-pin1ok { color: var(--blue); } .aq-auth-ok { color: var(--green); } /* Panel de control PIN */ .aq-ctrl { margin-top: 4px; } .aq-ctrl-title { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; } .aq-actions { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .aq-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid; background: transparent; cursor: pointer; transition: background 0.15s, color 0.15s; flex: 1; } .aq-btn:disabled { opacity: 0.25; cursor: not-allowed; } .aq-btn-unlock { color: var(--amber); border-color: rgba(255,184,48,0.5); } .aq-btn-unlock:hover:not(:disabled) { background: rgba(255,184,48,0.1); border-color: var(--amber); } .aq-btn-lock { color: var(--green); border-color: rgba(0,255,135,0.4); } .aq-btn-lock:hover:not(:disabled) { background: rgba(0,255,135,0.07); border-color: var(--green); } .aq-btn-open { color: var(--red); border-color: rgba(255,48,48,0.5); } .aq-btn-open:hover:not(:disabled) { background: rgba(255,48,48,0.07); border-color: var(--red); } /* Formulario PIN */ .aq-pin-form { display: none; border: 1px solid var(--border); padding: 14px; background: var(--bg); margin-top: 4px; } .aq-pin-form.open { display: block; } .aq-pin-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .aq-pin-row:last-child { margin: 0; } .aq-pin-lbl { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; width: 44px; flex-shrink: 0; } .aq-pin-input { font-family: var(--mono); font-size: 16px; letter-spacing: 0.25em; background: var(--bg2); color: var(--text); border: 1px solid var(--border2); padding: 6px 10px; flex: 1; /* ocupa el espacio disponible sin desbordarse */ min-width: 0; /* permite que flex shrinkee correctamente */ text-align: center; } .aq-pin-input:focus { outline: none; border-color: var(--amber); } .aq-pin-status { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; width: 20px; /* solo para el checkmark */ flex-shrink: 0; } .aq-pin-status.ok { color: var(--green); } .aq-pin-status.err { color: var(--red); } .aq-confirm-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; width: 100%; padding: 9px; border: 1px solid var(--amber); background: transparent; color: var(--amber); cursor: pointer; margin-top: 10px; transition: background 0.15s; } .aq-confirm-btn:hover:not(:disabled) { background: rgba(255,184,48,0.1); } .aq-confirm-btn:disabled { opacity: 0.25; cursor: not-allowed; } /* err_code display */ .aq-errcode { font-family: var(--mono); font-size: 16px; color: var(--amber); letter-spacing: 0.08em; padding: 6px 10px; border: 1px solid rgba(255,184,48,0.25); background: var(--amber-dim); margin-bottom: 32px; display: block; } .aq-ts { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 12px; letter-spacing: 0.05em; } /* Aquiles stats bar */ .aq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 24px; } /* ── Botón de configuración/log en aq-head -- icono de engrane en vez * de texto "LOG": el modal detras ya cubre log Y configuracion (ver * pestana "Configuración" -- antes "Hub"), asi que un icono generico * de ajustes comunica mejor su contenido real que la palabra "LOG". */ .aq-log-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--border2); background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; margin-left: 8px; line-height: 0; } .aq-log-btn:hover { background: var(--bg3); color: var(--blue); border-color: var(--blue); } /* ── Modal overlay ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.15); backdrop-filter: blur(4px); z-index: 500; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: var(--bg2); border: 1px solid var(--border2); width: 100%; max-width: 880px; height: 80vh; display: flex; flex-direction: column; animation: fadeIn 0.18s ease; } .modal.modal-sm { max-width: 380px; height: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-title { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .modal-close { font-family: var(--mono); font-size: 16px; background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 8px; line-height: 1; } .modal-close:hover { color: var(--text); } /* Tabs del modal */ .modal-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-tab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; } .modal-tab:hover { color: var(--text); } .modal-tab.active { color: var(--green); border-bottom-color: var(--green); } .modal-body { flex: 1; overflow-y: auto; padding: 0; background:var(--bgnav); } /* Tabla de log */ .log-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; } .log-table th { text-align: left; padding: 10px 16px; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; } .log-table td { padding: 9px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } .log-table tr:last-child td { border-bottom: none; } .log-table tr:hover td { background: var(--bg3); } .log-state-pill { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border: 1px solid; white-space: nowrap; } .lp-0 { color: var(--red); border-color: var(--red); background: var(--red-dim); } .lp-1 { color: var(--green); border-color: var(--green); background: var(--green-dim); } .lp-3 { color: var(--blue); border-color: var(--blue); background: var(--blue-dim); } .lp-x { color: var(--muted); border-color: var(--border); } .log-reason { font-size: 9px; color: var(--muted); letter-spacing: 0.06em; } .log-reason.timeout { color: var(--red); } .log-reason.process { color: var(--green); } .log-reason.abandon { color: var(--amber); } /* Paginación */ .modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; } .pag-btns { display: flex; gap: 6px; } .pag-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; padding: 5px 12px; border: 1px solid var(--border2); background: transparent; color: var(--muted); cursor: pointer; text-transform: uppercase; } .pag-btn:hover:not(:disabled) { background: var(--bg3); color: var(--text); } .pag-btn:disabled { opacity: 0.3; cursor: not-allowed; } .log-loading { padding: 40px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; } .log-empty { padding: 40px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; } /* ── Filtros del modal ── */ .log-filters { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; background: var(--bg); } .log-filter-select { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; background: var(--bg2); color: var(--text); border: 1px solid var(--border2); padding: 5px 10px; cursor: pointer; flex: 1; min-width: 140px; } .log-filter-select:focus { outline: none; border-color: var(--blue); } .log-filter-label { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; align-self: center; white-space: nowrap; } .log-tz-badge { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.08em; border: 1px solid var(--border); padding: 3px 8px; align-self: center; white-space: nowrap; } /* ── Tab Hub del modal ── */ .hub-panel { padding: 16px 20px; } .hub-section-label { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; margin-top: 18px; display: flex; align-items: center; gap: 10px; } .hub-section-label::after { content:''; flex:1; height:1px; background:var(--border); } .hub-section-label:first-child { margin-top: 0; } .hub-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 4px; } .hub-metric { background: var(--bg); padding: 12px 14px; } .hub-metric-v { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .hub-metric-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .hub-relays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; } .relay-card { border: 1px solid var(--border2); background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 8px; } .relay-name { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .relay-pin { font-family: var(--mono); font-size: 10px; color: var(--blue); letter-spacing: 0.06em; } .relay-toggle { display: flex; gap: 4px; } .relay-btn { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0; border: 1px solid; background: transparent; cursor: pointer; flex: 1; transition: background 0.15s; } .relay-btn-on { color: var(--green); border-color: var(--green); } .relay-btn-on:hover { background: rgba(0,255,135,0.1); border-color: var(--green); } .relay-btn-off { color: var(--red); border-color: var(--red); } .relay-btn-off:hover { background: rgba(255,77,77,0.1); border-color: var(--red); } .relay-btn.active-on { background: rgba(0,255,135,0.15); border-color: var(--green); color: var(--green); } .relay-btn.active-off { background: rgba(255,77,77,0.15); border-color: var(--red); color: var(--red); } .hub-reboot-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; width: 30%; padding: 10px; border: 1px solid rgba(255,184,48,0.5); background: transparent; color: var(--amber); cursor: pointer; margin-top: 8px; margin-left:270px; transition: background 0.15s; } .hub-reboot-btn:hover { background: rgba(255,184,48,0.08); border-color: var(--amber); } /* ── Modo manual ── */ .manual-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border2); background: var(--bg); margin-bottom: 10px; } .manual-row-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text); } .manual-row-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; color: var(--muted); margin-top: 2px; } /* Toggle deslizante */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg3); border: 1px solid var(--border2); transition: background 0.2s, border-color 0.2s; } .toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: var(--muted); transition: transform 0.2s, background 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--green-dim); border-color: var(--green); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--green); box-shadow: 0 0 6px var(--green); } .toggle-switch input:disabled + .toggle-slider { opacity: 0.35; cursor: not-allowed; } /* Botones abrir/cerrar de modo manual -- press and hold */ .manual-controls { display: none; gap: 8px; margin-bottom: 14px; } .manual-controls.show { display: flex; } .manual-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 0; border: 1px solid; background: transparent; cursor: pointer; flex: 1; transition: background 0.1s, color 0.1s; user-select: none; -webkit-user-select: none; touch-action: none; } .manual-btn:disabled { opacity: 0.25; cursor: not-allowed; } .manual-btn-open { color: var(--red); border-color: var(--red); } .manual-btn-open.pressed { background: var(--red); color: var(--bg); } .manual-btn-close { color: var(--green); border-color: var(--green); } .manual-btn-close.pressed { background: var(--green); color: var(--bg); } .manual-active-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; display: none; } .manual-active-badge.show { display: block; } /* ═══════════════════════════════════════════════════════════════════ * ── Responsive ────────────────────────────────────────────────────── * Sin esto el dashboard nunca tuvo NINGUN @media -- estaba construido * a puro ancho de escritorio, sin ninguna adaptacion. En un telefono * (~360-411px de ancho) el header se desbordaba horizontalmente * (logo + buscador + latencia + estado WS + reloj + tema, todo en una * sola fila, mas ancho que la pantalla) forzando scroll horizontal de * TODA la pagina -- una experiencia rota, no solo fea. Los breakpoints * de abajo cubren tablet (900px) y telefono (600px) por separado * porque el header y las grillas de estadisticas necesitan puntos de * quiebre distintos para verse bien en cada tamaño. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { main { padding: 20px 16px; } /* 4 y 3 columnas fijas ya no caben comodo en tablet -- 2 columnas * mantiene los numeros legibles en vez de aplastarlos. */ .stats { grid-template-columns: repeat(2, 1fr); } .aq-stats { grid-template-columns: repeat(2, 1fr); } /* 340px minimo por card ya no deja ni una segunda columna en muchas * tablets -- 280px sigue siendo comodo para el contenido del card. */ .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .aq-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } @media (max-width: 640px) { header { padding: 0 14px; } /* La version debajo del nombre es lo primero que sobra cuando el * espacio aprieta -- el nombre + icono ya identifica la marca solo. */ .logo-version { display: none; } /* El buscador deja de tener un ancho maximo fijo y se estira para * ocupar el espacio que sobra entre el logo (ya angosto) y los * controles de la derecha (ya colapsados al boton de menu + tema). */ .header-search { flex: 1 1 auto; max-width: none; margin: 0 10px; } /* Colapsa latencia/estado-WS/reloj a un desplegable -- ver * toggleHeaderMenu() en app.js. Es la parte que de verdad resolvia * el desborde: esos tres elementos juntos son mas anchos que * cualquier telefono en orientacion vertical. */ .menu-toggle { display: flex; } .header-status { display: none; position: absolute; top: 52px; right: 14px; flex-direction: column; align-items: stretch; gap: 10px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px; box-shadow: 0 12px 28px rgba(0,0,0,0.35); z-index: 200; min-width: 180px; } .header-status.open { display: flex; } /* Dentro del desplegable, cada elemento se ve mejor a lo ancho * completo en vez de su tamaño compacto de la barra horizontal. */ .header-status .latency-chip, .header-status .ws-status { justify-content: center; } .header-status .theme-toggle { width: auto; height: auto; padding: 8px; align-self: stretch; } main { padding: 16px 12px; } .stats, .aq-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; } .stat { padding: 14px 10px; } .stat-n { font-size: 22px; } .grid, .aq-grid { grid-template-columns: 1fr; } /* La barra de herramientas (buscar-por-filtro/agrupar/vista) ya * envolvia (.toolbar ya tenia flex-wrap), pero los selects a ancho * fijo se veian angostos e incomodos para tocar -- que crezcan. */ .toolbar-group { flex: 1 1 auto; } .search-input, .filter-select { flex: 1 1 auto; min-width: 0; } .view-switch { margin-left: 0; flex: 0 0 auto; } .modal { height: 90vh; } .modal-tabs { flex-wrap: wrap; } } /* ---------------------------------------------------------------------- */ /* Login */ /* ---------------------------------------------------------------------- */ .login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text); font-family: var(--sans); } .login-card { width: 100%; max-width: 340px; padding: 32px 28px; margin: 16px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .login-title { font-size: 17px; font-weight: 500; margin: 0 0 20px; color: var(--text); } .login-label { display: block; font-size: 12px; font-family: var(--mono); color: var(--muted); margin: 14px 0 6px; } .login-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); font-family: var(--sans); font-size: 14px; } .login-input:focus { outline: none; border-color: var(--blue); } .login-error { margin-top: 14px; padding: 8px 10px; border-radius: 8px; background: var(--red-dim); color: var(--red); font-size: 13px; } .login-submit { width: 100%; margin-top: 20px; padding: 11px; border: none; border-radius: 8px; background: var(--blue-main); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; } .login-submit:hover { filter: brightness(1.08); } .login-submit:disabled { opacity: 0.6; cursor: default; } /* Badge de usuario + logout en el header del dashboard */ .user-badge { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .logout-btn { border: 1px solid var(--border2); background: var(--bg2); color: var(--text); border-radius: 8px; padding: 6px 8px; cursor: pointer; display: flex; align-items: center; } .logout-btn:hover { background: var(--bg3); color: var(--red); }