* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fondo: #0f1419;
  --panel: #1a2129;
  --borde: #2d3742;
  --texto: #f4f8fc;
  --texto-suave: #b7c2ce;
  --primario: #2f81f7;
  --verde: #3fb950;
  --rojo: #f85149;
  --amarillo: #d29922;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.45;
  min-height: 100vh;
}

.oculto { display: none !important; }

/* Login */
.login-caja {
  max-width: 340px;
  margin: 15vh auto;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 2rem;
}
.login-caja h1 { text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; }

/* Layout */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.2rem;
  border-bottom: 1px solid var(--borde);
}
header h1 { font-size: 1.2rem; }
.header-derecha { display: flex; gap: 0.6rem; align-items: center; }

nav {
  display: flex;
  gap: 0.3rem;
  padding: 0.35rem 1.2rem 0;
  border-bottom: 1px solid var(--borde);
}
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--texto-suave);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.tab.activa { color: var(--texto); border-bottom-color: var(--primario); }

main { padding: 0.7rem 1.2rem; max-width: 1600px; margin: 0 auto; }

.fila-paneles { display: flex; gap: 1rem; flex-wrap: wrap; }
.fila-paneles .panel { flex: 1 1 320px; }

/* Pestaña Operar en dos columnas: formulario + balances a la izquierda,
   tabla de operaciones a la derecha ocupando todo el alto disponible. */
.operar-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 1rem; align-items: start; }
.operar-grid .col-izq { display: flex; flex-direction: column; gap: 0.55rem; }
.operar-grid .col-izq .panel { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.operar-grid .panel { margin-bottom: 0; }
/* min-width: 0 evita que la tabla ancha ensanche la página: el sobrante
   se resuelve dentro del recuadro, no con scroll horizontal de página. */
.panel-operaciones { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 900px) {
  .operar-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.8rem;
}
.panel h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }

/* Formularios */
/* Formulario de nueva operación en 2 columnas: aprovecha el ancho de la
   pantalla y baja la altura para que la vista entre sin scroll. */
#form-operacion { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-items: end; }
#form-operacion .span2,
#form-operacion .info-ref,
#form-operacion .error { grid-column: 1 / -1; }

label { display: block; margin-bottom: 0.5rem; color: var(--texto-suave); font-size: 0.92rem; }
label.check { display: flex; align-items: center; gap: 0.5rem; color: var(--texto); font-size: 0.95rem; }
input[type="text"], input[type="password"], select {
  display: block;
  width: 100%;
  margin-top: 0.22rem;
  padding: 0.42rem 0.7rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  font-size: 0.95rem;
}
input:focus, select:focus { outline: none; border-color: var(--primario); }

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  background: var(--borde);
  color: var(--texto);
}
.btn-primario { background: var(--primario); color: #fff; }
.btn-borde { background: none; border: 1px solid var(--borde); }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-ok { background: var(--verde); color: #fff; }
.btn:hover { filter: brightness(1.15); }
.btn-chico { padding: 0.2rem 0.55rem; font-size: 0.8rem; }

.error { color: var(--rojo); margin-top: 0.6rem; font-size: 0.9rem; min-height: 1em; }
.msj { color: var(--verde); margin-top: 0.6rem; font-size: 0.9rem; min-height: 1em; }
.info-ref { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 0.45rem; }

/* Badge de modo */
.badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.badge.paper { background: rgba(63, 185, 80, 0.15); color: var(--verde); border: 1px solid var(--verde); }
.badge.real { background: rgba(248, 81, 73, 0.15); color: var(--rojo); border: 1px solid var(--rojo); }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
/* Alto acotado con scroll interno: el layout no depende de cuántas filas haya,
   así la vista entra en una pantalla de notebook sin scroll de página. */
/* La tabla de operaciones toma todo el alto de pantalla menos el chrome
   superior/inferior: muestra muchas filas y scrollea internamente si sobran. */
#tab-operar .tabla-scroll { max-height: calc(100vh - 185px); overflow-y: auto; }
#tab-auditoria .tabla-scroll { max-height: calc(100vh - 244px); overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.5rem 0.65rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
th { color: var(--texto-suave); font-weight: 700; }
/* Tabla de operaciones más compacta para que entre la columna Acciones. */
#tabla-operaciones { font-size: 0.83rem; }
#tabla-operaciones th, #tabla-operaciones td { padding: 0.32rem 0.34rem; }
.btn-icono { padding: 0.15rem 0.42rem; font-size: 0.95rem; line-height: 1.1; }
td.detalle { white-space: normal; word-break: break-word; font-family: ui-monospace, monospace; font-size: 0.85rem; }

.estado { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.estado.activa { background: rgba(47, 129, 247, 0.15); color: var(--primario); }
.estado.colocada { background: rgba(210, 153, 34, 0.15); color: var(--amarillo); }
.estado.ejecutada { background: rgba(63, 185, 80, 0.15); color: var(--verde); }
.estado.pausada, .estado.cancelada { background: rgba(139, 152, 165, 0.15); color: var(--texto-suave); }
.estado.error { background: rgba(248, 81, 73, 0.15); color: var(--rojo); }

.filtros { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.filtros input { width: auto; flex: 1 1 160px; margin-top: 0; }

#balances table { font-size: 0.9rem; }