seguía calculando su ancho como
tabla (columnas fantasma a la derecha y scroll vacío). En móvil la
tabla y el tbody son bloques al ancho de la tarjeta. */
.logs-table, .logs-table tbody,
.ops-table.is-futuros, .ops-table.is-futuros tbody,
.ops-table.is-spot, .ops-table.is-spot tbody,
.ops-table.is-exchanges, .ops-table.is-exchanges tbody { display: block; width: 100%; }
.table-card { overflow-x: hidden; }
/* Cada evento en dos filas: hora · bot · nivel · categoría / mensaje. */
.logs-table thead { display: none; }
.logs-table tbody tr {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-areas:
"when bot level cat"
"msg msg msg msg";
gap: 4px 10px;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.logs-table tbody tr:last-child { border-bottom: none; }
.logs-table tbody td { display: block; padding: 0; border: 0; }
.logs-table tbody td:nth-child(1) { grid-area: when; font-size: 11px; }
.logs-table tbody td:nth-child(2) { grid-area: bot; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-table tbody td:nth-child(3) { grid-area: level; }
.logs-table tbody td:nth-child(4) { grid-area: cat; }
.logs-table tbody td:nth-child(5) { grid-area: msg; font-size: 12.5px; line-height: 1.45; }
.logs-card { max-height: none; }
}
.form-notice.is-ok {
background: var(--long-soft); border-color: rgba(49, 199, 106, 0.3); color: var(--text);
}
.badge { background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.badge-muted { color: var(--text-muted); margin-left: 6px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-running { background: var(--accent); }
.status-stopped { background: var(--text-muted); }
.status-error { background: var(--danger); }
.status-pill { display: inline-flex; align-items: center; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.status-pill .status-dot { margin-right: 6px; }
.status-pill-running { background: var(--long-soft); color: var(--long); }
.status-pill-stopped { background: rgba(139,141,152,0.12); color: var(--text-muted); }
.status-pill-error { background: var(--short-soft); color: var(--danger-on-tint); }
.status-pill-info { background: rgba(139,141,152,0.12); color: var(--text-muted); }
.status-pill-warning { background: var(--warn-soft); color: var(--warn); }
.status-warning { background: var(--warn); }
.exchange-logo { width: 15px; height: 15px; border-radius: 50%; object-fit: contain; background: #fff; padding: 1px; }
.direction-long { color: var(--accent); font-weight: 700; }
.direction-short { color: var(--danger); font-weight: 700; }
.direction-neutral { color: var(--text-muted); }
.error { color: var(--danger-on-tint); font-size: 13px; }
/* La fila de error pertenece a la fila del bot de arriba: sin borde entre las
dos, fondo teñido, texto legible (no rojo sobre granate). */
.error-row {
color: var(--text); font-size: 12px; line-height: 1.5;
background: var(--short-soft); font-family: var(--font-num);
border-left: 2px solid var(--short) !important; /* 2px: marca, no banda */
padding-left: 14px !important;
}
.data-table tbody tr:has(+ .error-row-tr) td { border-bottom: none; }
/* Number inputs: no spinner arrows anywhere — every numeric field here is
typed, never stepped, and the arrows only crowd the field and invite
accidental single-unit changes to trading parameters. Keyboard arrows and
form validation are unaffected; this is purely the visual control. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* ---------------------------------------------------------------------------
Compact multi-column forms (bot edit, connection edit).
Scoped to .form-columns on purpose: the global label/input rules above set
the comfortable spacing short forms like login want, and those should keep
it. The bot form is ~30 fields across 8 fieldsets, where that same spacing
turns into a lot of scrolling.
--------------------------------------------------------------------------- */
.form-columns { gap: 12px; margin-bottom: 12px; }
.form-columns fieldset { padding: 10px 14px 12px; }
.form-columns legend { font-size: 12px; }
.form-columns label { margin: 10px 0 3px; font-size: 12px; line-height: 1.3; }
/* The first control already sits right under the legend. */
.form-columns fieldset > label:first-of-type { margin-top: 2px; }
.form-columns input,
.form-columns select { padding: 6px 9px; font-size: 13px; border-radius: 5px; }
.form-columns .hint { font-size: 12px; line-height: 1.35; margin: 2px 0 8px; }
.form-columns .hint-inline { font-size: 11px; line-height: 1.3; display: block; margin-top: 3px; }
.form-columns .muted { font-size: 12px; margin: 2px 0; }
.form-columns details { margin-top: 6px; }
.form-columns details summary { font-size: 12px; }
/* Preview table inside the notional-multiplier row. */
.form-columns .data-table th,
.form-columns .data-table td { padding: 6px 8px; font-size: 12px; }
.form-columns .data-table th { font-size: 11px; }
/* ===========================================================================
Pantallas sin sesión: login, recuperar y restablecer contraseña.
Estas tres son las únicas que usan .auth-* y eran las únicas que usaban
.card / .centered-card, así que el cascarón se rehízo completo sin tocar
ninguna pantalla autenticada.
La composición es una sola placa centrada sobre el fondo casi negro, con
la marca apoyada en una línea que cruza el ancho — el eje de precio que
el bot cotiza. Es la misma marca del favicon y el mismo tratamiento en
versalitas espaciadas del .topnav-brand, para que entrar y estar dentro
se sientan el mismo producto.
--------------------------------------------------------------------------- */
/* --- Superficies que dibuja el navegador, no nosotros ---------------------
Selección, cursor de texto y autocompletado vienen con estilos de fábrica
que no pertenecen a ningún sistema de diseño. En una pantalla oscura el
autofill de Chrome es el peor: pinta el campo de blanco y deja el texto
ilegible. Se tiñen desde la paleta. */
::selection { background: var(--accent-soft); color: var(--text); }
body { caret-color: var(--accent); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
/* box-shadow interior en vez de background: es lo único que Chrome no
sobrescribe en el estado de autocompletado. */
-webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
-webkit-text-fill-color: var(--text);
caret-color: var(--accent);
}
.body-auth {
/* El fondo se extiende más allá del contenido cuando la placa es corta. */
min-height: 100vh;
}
.body-auth .content { max-width: none; margin: 0; padding: 0; }
.auth {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px 56px;
overflow: hidden;
}
/* Luz ambiental detrás de la marca: la placa no flota en un vacío plano.
Muy baja opacidad — se nota si se quita, no si está. */
.auth-aura {
position: absolute;
top: 50%;
left: 50%;
width: 620px;
max-width: 140vw;
height: 420px;
/* Anclada al bloque de contenido, no al borde superior: centrada cerca
de la marca, para que se lea como luz emitida por ella y no como una
mancha suelta arriba de la pantalla. */
transform: translate(-50%, -88%);
background: radial-gradient(50% 50% at 50% 50%, rgba(236, 232, 220, 0.05), rgba(236, 232, 220, 0) 68%);
pointer-events: none;
}
.auth-inner {
position: relative;
width: 100%;
max-width: 400px;
/* Centro óptico por encima del geométrico: una placa centrada a 50%
se lee caída. */
margin-bottom: 4vh;
}
/* --- Marca ---------------------------------------------------------------- */
.auth-lockup {
display: flex;
align-items: center;
gap: 14px;
/* Más arriba: el bot ocupa el espacio entre la marca y la placa. */
margin-bottom: 8px;
}
.auth-rule {
flex: 1;
height: 1px;
min-width: 12px;
background: linear-gradient(to right, rgba(38, 40, 50, 0), var(--border));
}
.auth-rule:last-child {
background: linear-gradient(to left, rgba(38, 40, 50, 0), var(--border));
}
.auth-mark { display: block; flex: none; }
.auth-wordmark {
flex: none;
margin: 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text);
white-space: nowrap;
}
/* --- Placa ---------------------------------------------------------------- */
.auth-plate {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 28px 30px;
box-shadow: var(--shadow-plate);
}
.auth-plate h1 {
font-size: 16px;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
text-align: center;
}
/* El texto de apoyo pertenece al título, no al campo que sigue: pegado
arriba, separado abajo. */
.auth-lede {
color: var(--text-muted);
font-size: 13px;
line-height: 1.5;
margin: 8px 0 0;
}
.auth-form { margin-top: 24px; }
.auth-form label {
margin: 0 0 7px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-muted);
}
.auth-field + .auth-field { margin-top: 18px; }
.auth-field input {
padding: 11px 12px;
border-radius: 8px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field input::placeholder { color: var(--placeholder); }
.auth-field input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Campo de contraseña con botón de ver/ocultar dentro del marco. */
.pw-field { position: relative; }
.pw-field input { padding-right: 44px; }
.pw-toggle {
position: absolute;
right: 4px;
bottom: 4px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: none;
border-radius: 6px;
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.pw-toggle:hover { color: var(--text); background: var(--hover); }
.pw-toggle svg { display: block; }
/* Aviso de mayúsculas: sólo aparece con Bloq Mayús activo. Es funcional —
es la causa más común de una contraseña correcta rechazada. */
.pw-caps {
display: flex;
align-items: center;
gap: 6px;
margin-top: 7px;
font-size: 12px;
color: var(--warning);
}
.pw-caps[hidden] { display: none; }
/* --- Requisitos en vivo (primer arranque y restablecer) ------------------- */
.auth-reqs {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.auth-reqs li {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
transition: color 0.15s ease;
}
.auth-reqs li.met { color: var(--accent); }
.auth-reqs .req-dot {
flex: none;
width: 12px;
height: 12px;
/* Anillo apagado, no currentColor: a tamano de radio y con el color del
texto, un circulo hueco se lee como control seleccionable. */
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
position: relative;
}
/* La palomita se dibuja con dos bordes rotados: sin glifo Unicode haciendo
de icono, y sin cargar un SVG por viñeta. */
.auth-reqs li.met .req-dot { background: var(--accent); border-color: var(--accent); }
.auth-reqs li.met .req-dot::after {
content: "";
position: absolute;
left: 3.5px;
top: 1px;
width: 3px;
height: 5.5px;
border: solid #06110a;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
/* --- Error ---------------------------------------------------------------- */
.auth-error {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 20px;
padding: 11px 13px;
background: rgba(239, 68, 68, 0.09);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
color: var(--danger-on-tint);
font-size: 13px;
line-height: 1.45;
}
.auth-error svg { flex: none; margin-top: 1px; }
/* --- Acciones ------------------------------------------------------------- */
.auth-submit {
width: 100%;
margin-top: 22px;
padding: 11px 16px;
border-radius: 8px;
font-size: 14px;
}
.auth-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.auth-actions { display: flex; gap: 10px; margin-top: 22px; }
.auth-actions .btn-secondary,
.auth-actions .btn-primary { flex: 1; text-align: center; padding: 11px 16px; border-radius: 8px; }
.auth-foot { margin: 18px 0 0; text-align: center; font-size: 13px; }
@media (max-width: 760px) {
.auth-foot-sep { display: none; }
.auth-foot a { display: block; margin: 8px auto 0; width: fit-content; }
}
.auth-foot a {
color: var(--text-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.auth-foot a:hover { color: var(--text); border-bottom-color: var(--border); }
/* --- El bot de la puerta ---------------------------------------------------
Cabeza en perspectiva (rotateX/Y desde auth.js), manos que suben a tapar
los ojos al escribir la contraseña y "asoman" de vez en cuando. Todo son
transforms: nada re-maqueta la placa. */
.auth-bot {
display: flex;
justify-content: center;
/* Medio cuerpo: la placa (z-index 1) tapa el torso y las manos en
reposo, así que el bot se lee asomado por detrás de ella. */
margin: 0 0 -62px;
position: relative;
z-index: 0;
perspective: 420px;
}
.auth-plate { position: relative; z-index: 1; }
.auth-bot-svg { overflow: visible; }
.bot-head {
transform-origin: 70px 56px;
transition: transform 0.25s var(--ease-out);
transform-style: preserve-3d;
}
.bot-neck { fill: var(--bot-metal-dark); }
/* Plata: el gris de las superficies se perdía contra el fondo. */
.auth-bot { --bot-metal: #b9bcc6; --bot-metal-edge: #e3e5ea; --bot-metal-dark: #8e919c; }
.bot-stroke { stroke: var(--bot-metal-dark); stroke-width: 2; }
.bot-antenna { fill: var(--long); }
.bot-shell { fill: var(--bot-metal); stroke: var(--bot-metal-edge); stroke-width: 1.5; }
.bot-face { fill: #1a1c24; stroke: var(--bot-metal-dark); stroke-width: 1; }
.bot-sclera { fill: var(--primary); }
.bot-pupil { fill: var(--bg); transition: transform 0.12s ease-out, r 0.2s ease; }
.bot-mouth { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; transition: d 0.3s ease; }
/* Tema claro: --primary es hueso y se pierde sobre la cara plateada. */
:root[data-theme="light"] .bot-mouth { stroke: #ffffff; stroke-width: 2.2; }
.bot-eye { transform-origin: center; transition: transform 0.25s var(--ease-out); }
.bot-limb { fill: var(--bot-metal-dark); stroke: var(--bot-metal-edge); stroke-width: 1.5; }
.bot-hand { fill: var(--bot-metal); stroke: var(--bot-metal-edge); stroke-width: 1.5; }
/* Cada brazo gira desde su hombro (coordenadas del viewBox). En reposo
cuelga hacia abajo, tras la placa; al taparse rota ~165° y la mano cae
justo sobre su ojo (hombro (40,100) → ojo (56,47); simétrico a la derecha).
Espiando: el derecho baja unos grados y deja ver medio ojo. */
.bot-arm {
transform-box: view-box;
transition: transform 0.38s var(--ease-out);
}
.bot-arm-l { transform-origin: 40px 100px; transform: rotate(10deg); }
.bot-arm-r { transform-origin: 100px 100px; transform: rotate(-10deg); }
.auth-bot.is-covering .bot-arm-l { transform: rotate(-164deg); }
.auth-bot.is-covering .bot-arm-r { transform: rotate(164deg); }
.auth-bot.is-covering.is-peeking .bot-arm-r { transform: rotate(140deg); }
/* Los brazos suben desde el torso (oculto tras la placa) hasta los ojos, que
ya asoman por encima: no hace falta traer el bot al frente, y hacerlo
pintaba el torso sobre el título de la placa. */
.auth-bot.is-covering.is-peeking .bot-eye-r { transform: scaleY(0.55); }
/* Contraseña visible: manos abajo y ojos como platos. */
.auth-bot.is-shocked .bot-eye { transform: scale(1.25); }
.auth-bot.is-shocked .bot-pupil { r: 2.4; }
.auth-bot.is-shocked .bot-mouth { d: path("M64 60 Q70 68 76 60"); }
@media (prefers-reduced-motion: reduce) {
.bot-head, .bot-arm, .bot-eye, .bot-pupil { transition: none; }
}
/* --- Un solo momento de entrada ------------------------------------------
La línea se abre desde la marca hacia los bordes, el trazo del gráfico se
dibuja solo, y la placa se asienta. Ocurre una vez al cargar; no hay nada
animado después. */
@keyframes auth-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes auth-plate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes auth-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes auth-fade-in { from { opacity: 0; } to { opacity: 1; } }
.auth-rule { transform-origin: right center; animation: auth-rule-in 0.7s var(--ease-out) both; }
.auth-rule:last-child { transform-origin: left center; }
.auth-wordmark { animation: auth-fade-in 0.6s var(--ease-out) 0.15s both; }
.auth-mark { color: var(--text); }
.auth-mark .mark-line { stroke-dasharray: 40; stroke-dashoffset: 40; animation: auth-draw 0.8s var(--ease-out) 0.2s both; }
.auth-mark .mark-ring { animation: auth-fade-in 0.6s var(--ease-out) both; }
.auth-plate { animation: auth-plate-in 0.6s var(--ease-out) 0.12s both; }
.auth-foot { animation: auth-fade-in 0.6s var(--ease-out) 0.35s both; }
@media (prefers-reduced-motion: reduce) {
.auth-rule, .auth-wordmark, .auth-mark .mark-line,
.auth-mark .mark-ring, .auth-plate, .auth-foot { animation: none; }
.auth-mark .mark-line { stroke-dasharray: none; }
}
@media (max-width: 420px) {
.auth { padding: 28px 16px 40px; }
.auth-plate { padding: 22px 20px 24px; }
.auth-plate h1 { font-size: 20px; }
.auth-inner { margin-bottom: 0; }
}
/* Alto reducido (laptop corta, navegador con muchas barras): el centrado
vertical deja de tener sentido y la placa debe poder desplazarse. */
@media (max-height: 640px) {
.auth { justify-content: flex-start; padding-top: 32px; }
.auth-inner { margin-bottom: 0; }
}
/* ===========================================================================
Pantallas de operacion (Bots, Exchanges, Logs, Telegram).
Modo operativo: la meta es completar una tarea, no admirar la pantalla.
Todo lo de aqui es densidad legible y jerarquia correcta; la marca vive en
los detalles, no en adornos que compitan con los datos.
--------------------------------------------------------------------------- */
/* --- Barra de scroll -------------------------------------------------------
.table-card desplaza horizontalmente cuando la tabla de bots no cabe, asi
que su barra es parte de la interfaz y no puede seguir siendo la gris de
fabrica sobre un tema oscuro. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
/* --- Cifras tabulares ------------------------------------------------------
Sin esto, "15.00" y "7.50" no alinean sus puntos decimales y comparar una
columna de numeros obliga a leerlos uno por uno en vez de barrerlos. */
.num, .data-table .num, .logs-table td:first-child {
font-variant-numeric: tabular-nums;
}
.num { text-align: right; }
/* --- Encabezado de pagina -------------------------------------------------- */
.page-header { align-items: flex-start; }
.page-header h1 { margin: 0; }
.page-title-group { display: flex; flex-direction: column; gap: 5px; }
.page-lede { margin: 0; color: var(--text-muted); font-size: 13px; }
.page-lede .sep { opacity: 0.45; margin: 0 7px; }
/* --- Iconos dentro de pildoras de estado ------------------------------------
Reemplazan los emoji que habia antes: un glifo Unicode se dibuja distinto en
cada sistema operativo y no comparte grosor de trazo con los iconos del nav. */
.status-pill svg { flex: none; margin-right: 6px; }
/* --- Estado vacio ----------------------------------------------------------
Una linea gris diciendo "no hay nada" describe el problema y abandona al
usuario ahi mismo. Estas pantallas empiezan vacias de verdad, asi que el
estado vacio es la primera pantalla real del producto: dice que falta y
lleva al siguiente paso. */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 54px 24px 58px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
.empty-state .empty-mark { color: var(--text-muted); opacity: 0.55; margin-bottom: 16px; }
.empty-state h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.empty-state p {
margin: 0 0 20px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.55;
max-width: 44ch;
}
.empty-state p:last-child { margin-bottom: 0; }
/* --- Jerarquia de acciones de fila -----------------------------------------
Estaba invertida: "Detener" (pausa reversible) era rojo solido y "Eliminar"
(irreversible) era un contorno tenue. Detener conserva presencia con ambar
—es una accion consecuente sobre dinero en vivo— y el rojo queda reservado
para lo que no se puede deshacer. */
.btn-action.warning { color: var(--warn); border-color: rgba(240, 169, 58, 0.4); }
.btn-action.warning:hover { background: var(--warn-soft); border-color: var(--warn); }
/* --- Logs ------------------------------------------------------------------
Hasta 200 filas. Con el encabezado fijo dentro de su propio contenedor, la
columna que estas leyendo sigue teniendo nombre despues de la fila 30. */
.logs-card { max-height: calc(100vh - 230px); overflow: auto; }
.logs-table thead th {
position: sticky;
top: 0;
z-index: 1;
/* Opaco a proposito: el rgba del encabezado normal dejaria ver las filas
pasando por debajo. */
background: var(--surface-2);
}
.logs-table td:first-child { white-space: nowrap; color: var(--text-muted); }
.logs-table td:last-child { line-height: 1.5; }
/* --- Pares clave/valor (Telegram) ------------------------------------------ */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.kv dt { color: var(--text-muted); font-size: 13px; }
.kv dd { margin: 0; font-size: 13px; }
.kv dd.mono {
/* Monoespaciada aqui porque son valores que se comparan caracter por
caracter contra el servidor, no por parecer tecnico. */
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
}
.kv dd.unset { color: var(--text-muted); font-style: italic; }
@media (max-width: 560px) {
.page-header { flex-direction: column; gap: 14px; }
/* Actividad: el botón Vaciar se queda a la derecha del título, en la
misma línea, en vez de bajar debajo. */
.page-header.page-header-inline { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.kv { grid-template-columns: 1fr; gap: 3px 0; }
.kv dd { margin-bottom: 10px; }
}
/* Nombres de archivo y valores literales dentro de texto corrido. */
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
background: var(--input-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
color: var(--text);
}
.error-row svg { vertical-align: -2px; margin-right: 7px; }
/* --- Correcciones de la ronda de revision --------------------------------- */
.error-row { text-align: left; }
/* La nota quedaba pegada a la lista y se leia como una cuarta fila de ella. */
.kv-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
/* Tres opciones no necesitan todo el ancho del fieldset. */
.select-narrow { max-width: 320px; }
/* El nav se apilaba verticalmente en ventanas angostas porque los enlaces y
los iconos competian por la misma fila. Bajo 760px el titulo pasa a su
propia linea y los enlaces se reparten el ancho completo. */
@media (max-width: 760px) {
.topnav { padding: 12px 16px; gap: 10px; }
.topnav-brand { order: -1; flex: 1 1 100%; text-align: center; margin-right: 0; }
.topnav-side.topnav-right { flex: 1 1 100%; justify-content: space-between; gap: 6px; }
.topnav-links { display: flex; flex-wrap: nowrap; gap: 2px; }
.topnav-links a { margin-right: 0; }
/* Móvil: solo iconos, con el mismo tamaño de toque que los demás. */
.topnav-links .nav-label { display: none; }
.topnav-links .nav-link { width: 32px; height: 32px; padding: 0; justify-content: center; }
.content { padding: 20px 16px; }
}
/* --- Filtro por nivel en /logs ---------------------------------------------
Control segmentado. Comparte el radio y el grosor de borde de .btn-action
para que se lea como parte del mismo sistema y no como un widget pegado. */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: transparent;
color: var(--text-muted);
font-family: inherit;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { color: var(--text); border-color: var(--text-muted); }
.filter-chip.is-active {
background: var(--hover-strong);
border-color: var(--text-muted);
color: var(--text);
}
.filter-count {
/* Tabulares: el ancho del chip no baila al cambiar de 9 a 10. */
font-variant-numeric: tabular-nums;
font-size: 12px;
color: var(--text-muted);
background: var(--hover);
border-radius: 999px;
padding: 1px 6px;
min-width: 20px;
text-align: center;
}
.filter-chip.is-active .filter-count { color: var(--text); background: var(--hover-strong); }
/* Un nivel sin eventos sigue siendo pulsable: apagarlo del todo esconderia
el dato de que ese nivel existe y esta en cero. */
.filter-chip.is-empty { opacity: 0.5; }
/* Al seleccionarlo recupera opacidad plena: si no, el chip activo es el mas
apagado de la barra y se pierde cual esta aplicado. */
.filter-chip.is-empty.is-active { opacity: 1; }
.filter-empty {
margin: 0;
padding: 28px 16px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.filter-empty[hidden] { display: none; }
/* ===========================================================================
Ficha de edicion de bot.
Es el formulario mas largo del panel y el unico que puede cambiar el
comportamiento de dinero en vivo. El trabajo aqui es que se note que estas
editando algo consecuente, sin volverlo mas lento de llenar.
--------------------------------------------------------------------------- */
/* --- Campos bloqueados -----------------------------------------------------
No habia NINGUNA regla :disabled. Con el bot corriendo, nombre, conexion,
simbolo y direccion quedan bloqueados y se veian exactamente igual que los
editables: descubrias que no se podia escribir al intentarlo. */
input:disabled,
select:disabled {
background: var(--disabled-bg);
border-color: var(--border);
color: var(--text-muted);
cursor: not-allowed;
}
/* La etiqueta acompana al campo: si el control esta apagado, su nombre
tambien, para que el par completo se lea como bloqueado. */
.form-columns fieldset:has(input:disabled) label,
.form-columns fieldset:has(select:disabled) label { color: var(--placeholder); }
/* --- Orientacion dentro de un formulario de ocho fichas --------------------
Un borde tenue marca en cual estas escribiendo. */
fieldset:focus-within { border-color: var(--border-strong); }
/* .form-columns pone .hint-inline en display:block, lo que dentro de un