/* El monitor del bot 4 con la piel del monitor web de ProfitTrailer (Juan, 12-oct): oscuro, barra
   lateral con contadores, pildoras arriba, tarjetas con borde de color y tablas de ventas con la
   ganancia en una etiqueta. Los colores se midieron en la pagina de PT (getComputedStyle) y
   reemplazan los tokens de design/_estilo.css, que sigue dando la base (tablas, chips, celdas). */

:root, :root[data-theme]{
  color-scheme:dark;
  --background:#252d35;          /* el fondo del contenido de PT */
  --foreground:#e8eef2;          /* encabezados de tabla de PT */
  --card:#2b343d;
  --card-foreground:#e8eef2;
  --muted:#323c46;
  --muted-foreground:#98a6ad;    /* el texto de PT */
  --secondary:#323c46;
  --secondary-foreground:#e8eef2;
  --border:#3a4652;
  --input:#3a4652;
  --primary:#0070f2;             /* los contadores de la barra de PT */
  --primary-foreground:#fff;
  --accent:#323c46;
  --accent-foreground:#e8eef2;
  --ring:#39afd1;
  --destructive:#f1556c;
  --state-success:#1bb99a;
  --state-danger:#f1556c;
  --state-warning:#f9c851;
  --state-info:#39afd1;
  --state-neutral:#98a6ad;
  --state-progress:#39afd1;
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --naranja:#ff9900;             /* monedas y saldo en PT */
  --celeste:#39afd1;             /* valores y precios en PT */
  --lado:#28313a;
  --verde-etq:#0c8557;
  --rojo-etq:#dc3545;
  --radius:4px;
}
body{background:var(--background); color:var(--muted-foreground); font-family:var(--font-sans);
  font-size:14px; margin:0}

/* ----------------------------------------------------------- la estructura de PT */
.app{display:grid; grid-template-columns:210px minmax(0,1fr); min-height:100vh}
.lado{background:var(--lado); position:sticky; top:0; height:100vh; overflow-y:auto;
  border-right:1px solid var(--border)}
.marca{display:flex; align-items:baseline; gap:8px; padding:16px 20px 18px}
.marca b{color:var(--foreground); font-size:20px; font-weight:700; letter-spacing:-0.01em}
.modo{color:var(--naranja); font-size:12px; font-weight:700; text-transform:uppercase}
.lado nav{padding:0 10px 24px}
.sec{color:var(--foreground); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; margin:18px 12px 8px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px;
  border-radius:var(--radius); color:var(--muted-foreground); text-decoration:none; font-size:14.4px}
.nav:hover{color:var(--foreground)}
.nav.activo{background:var(--celeste); color:#fff}
.cnt{background:var(--primary); color:#fff; border-radius:999px; font-size:11.5px; font-weight:600;
  min-width:22px; padding:2px 7px; text-align:center; font-variant-numeric:tabular-nums}
.cnt.crit{background:var(--rojo-etq)}
.cnt.mute{background:var(--muted)}

.principal{display:flex; flex-direction:column; min-width:0}
.barra{display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--lado);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5}
.menu{background:none; border:0; color:var(--foreground); font-size:20px; cursor:pointer; padding:2px 6px}
.pildoras{display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0}
.pildora{border:1px solid var(--border); border-radius:var(--radius); padding:5px 10px; font-size:14px;
  background:var(--background); white-space:nowrap; font-variant-numeric:tabular-nums}
.derecha{display:flex; align-items:center; gap:10px}
.punto{width:12px; height:12px; border-radius:50%; background:var(--muted-foreground); display:inline-block}
.punto.ok{background:#3fd15b; box-shadow:0 0 0 3px color-mix(in srgb,#3fd15b 25%,transparent)}
.punto.crit{background:var(--rojo-etq)}
.contenido{padding:20px; flex:1}
.pie{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; padding:12px 20px; margin:0; max-width:none;
  border-top:1px solid var(--border); font-size:13.5px; background:var(--lado)}
.pie .izq{display:flex; gap:28px; flex-wrap:wrap}
.pie .der{margin-left:auto; display:flex; gap:16px; align-items:center}
.pie b{color:var(--naranja); font-weight:600}
.etq-pie{background:color-mix(in srgb,var(--state-success) 22%,transparent); color:var(--state-success);
  border-radius:var(--radius); padding:2px 7px; font-size:12px; font-weight:600}
.etq-pie.no{background:color-mix(in srgb,var(--state-danger) 20%,transparent); color:var(--state-danger)}

.vista{display:none}
.vista.activa{display:block}

/* ------------------------------------------------------------ tarjetas del panel */
.kpis{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-bottom:16px}
#tabla-resumen-pos th,#tabla-resumen-pos td{padding:9px 7px; font-size:12.5px}
#tabla-resumen-pos td:first-child{white-space:normal}
.kpi{background:var(--card); border:1px solid var(--border); border-top:3px solid var(--celeste);
  border-radius:var(--radius); padding:14px 14px 12px; min-width:0}
.kpi.naranja{border-top-color:var(--naranja)}
.kpi.verde{border-top-color:var(--state-success)}
.kpi.rojo{border-top-color:var(--state-danger)}
.kpi.amarillo{border-top-color:var(--state-warning)}
.kpi .k{color:var(--foreground); font-size:13px; font-weight:700; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .v{font-size:19px; font-weight:700; margin:8px 0 6px; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .s{font-size:12.5px; line-height:1.6}
.kpi .s br + *{display:inline}

.caja{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 14px 10px; margin-bottom:16px; min-width:0}
.titulo{color:var(--foreground); font-size:16px; font-weight:600; text-align:center; margin:2px 0 14px}
.titulo .p{color:var(--muted-foreground); font-weight:400; font-size:13px}
.titulo .hint{display:block; font-weight:400; margin-top:4px}
.fila3{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap:16px}
.ver-mas{text-align:center; margin:12px 0 4px}
.ver-mas a{color:var(--celeste); text-decoration:none; font-size:15px}
.grafico svg{width:100%; height:auto; max-height:230px; display:block; margin:0 auto}
.grafico text{fill:var(--muted-foreground); font-size:10px; font-family:var(--font-sans)}

/* ------------------------------------------------------------ tablas al estilo PT */
th{color:var(--foreground); text-transform:uppercase; font-size:12.5px; font-weight:700;
  border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--background) 60%,var(--card))}
td{border-bottom:1px solid rgba(152,166,173,.18); color:var(--muted-foreground)}
.sym{color:var(--naranja); font-weight:500}
.num,.mono,td.num,.cellv .val{font-family:var(--font-sans); font-variant-numeric:tabular-nums}
.cel{color:var(--celeste)}
.pos{color:var(--state-success)}
.neg{color:var(--state-danger)}
.etq{display:inline-block; border-radius:var(--radius); padding:3px 7px; font-size:11px; font-weight:700;
  color:#fff; background:var(--muted); font-variant-numeric:tabular-nums}
.etq.pos{background:var(--verde-etq); color:#fff}
.etq.neg{background:var(--rojo-etq); color:#fff}
.dos-lineas{line-height:1.6}
.dias{color:var(--muted-foreground)}

/* --------------------------------------------- lo que ya existia, con la piel nueva */
.h3{margin:18px 0 8px; font-size:12px; font-weight:700; color:var(--foreground);
  text-transform:uppercase; letter-spacing:.04em}
.lede{font-size:13px; line-height:1.55; margin:6px 2px 0; max-width:none}
.alerta{margin:0 0 16px; border:1px solid; border-radius:var(--radius); padding:12px 14px; font-size:13px}
.alerta b{display:block; margin-bottom:2px; color:var(--foreground)}
.alerta.crit{border-color:color-mix(in srgb,var(--state-danger) 45%,transparent);
  background:color-mix(in srgb,var(--state-danger) 12%,transparent)}
.alerta.warn{border-color:color-mix(in srgb,var(--state-warning) 45%,transparent);
  background:color-mix(in srgb,var(--state-warning) 12%,transparent)}
.live{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--border)}
.live::after{content:""; background:var(--card); grid-column:auto / -1}
.cellv .val{color:var(--foreground)}
.cellv.crit .val{color:var(--destructive)}
.cellv.warn .val{color:var(--state-warning)}
.cellv.mute .val{color:var(--muted-foreground)}
.resumen{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.resumen .item{border:1px solid var(--border); border-radius:var(--radius); padding:8px 11px;
  min-width:150px; flex:1 1 150px; max-width:260px}
.resumen .n{font-variant-numeric:tabular-nums; font-size:18px; font-weight:700; color:var(--foreground)}
.resumen .q{font-size:12px; font-weight:600; color:var(--foreground)}
.resumen .e{font-size:11.5px; margin-top:2px}
.resumen .item.si{border-color:color-mix(in srgb,var(--state-success) 55%,transparent)}
.resumen .item.obs{border-color:color-mix(in srgb,var(--state-info) 60%,transparent)}
.dos{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:24px}
.lista{list-style:none; margin:0; padding:0; font-size:13px}
.lista li{padding:8px 0; border-bottom:1px solid var(--border)}
.lista li:last-child{border-bottom:0}
.lista b{color:var(--foreground)}
.lista em{display:block; font-style:normal; font-size:12px}
.grupos{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px 24px; margin-top:8px}
.grupos table td{padding:7px 0; font-size:12.5px}
.grupos table td.r{padding-left:12px; color:var(--celeste)}
.grupos .k{font-size:12px; white-space:normal; word-break:break-word}
td.ww{white-space:normal; min-width:220px}
.alerta.en-panel{margin:12px 0 0}
.vacio{color:var(--muted-foreground); font-size:12.5px; padding:6px 0}
.prov{font-size:10.5px; color:var(--muted-foreground); font-weight:500; text-transform:none}
.nota-panel{margin:12px 2px 0}

@media (max-width:1100px){
  .fila3{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lado{position:fixed; left:0; top:0; width:230px; z-index:20; transform:translateX(-100%);
    transition:transform .2s}
  .app.menu-abierto .lado{transform:none}
  .dos{grid-template-columns:1fr}
  .contenido{padding:16px}
  .barra{padding:10px 16px; flex-wrap:wrap}
  .derecha{margin-left:auto}
  .pildoras{order:3; flex-basis:100%}
  .pildora{white-space:normal}
  .pie{padding:12px 16px}
}
@media (min-width:861px){
  .app.menu-cerrado{grid-template-columns:0 minmax(0,1fr)}
  .app.menu-cerrado .lado{visibility:hidden}
}
.tx-n{color:var(--naranja)}

/* ------------------------------------------- ingreso, crear la clave y cerrar sesion */
.salir{display:flex; align-items:center; gap:10px; min-width:0}
.salir .correo{font-size:13px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.salir button{background:transparent; color:var(--foreground); border-color:var(--border);
  padding:5px 10px; font-size:12.5px; border-radius:var(--radius); white-space:nowrap}
.salir button:hover{border-color:var(--celeste); color:var(--celeste)}
.acceso{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 16px}
.acceso .marca{padding:0 0 14px}
.acceso-caja{width:100%; max-width:380px; padding:22px 22px 20px; display:flex; flex-direction:column}
.acceso-caja .titulo{margin:0 0 12px}
.acceso-caja label{color:var(--foreground); font-size:13px; font-weight:600; margin:12px 0 6px}
.acceso-caja input:not([type=hidden]){width:100%; padding:9px 11px; font:inherit; font-size:14px;
  color:var(--foreground); background:var(--background); border:1px solid var(--input);
  border-radius:var(--radius)}
.acceso-caja input:focus{outline:2px solid var(--ring); outline-offset:1px}
.acceso-caja button{margin-top:20px; padding:10px 16px; font-size:14px; border-radius:var(--radius)}
.acceso-caja .hint{text-align:center; margin:0 0 4px; line-height:1.5}
.acceso-caja .hint b{color:var(--foreground); font-weight:600; word-break:break-all}
.acceso-error,.acceso-aviso{margin:8px 0 0; padding:9px 11px; border-radius:var(--radius); font-size:13px}
.acceso-error{color:var(--state-danger); border:1px solid color-mix(in srgb,var(--state-danger) 45%,transparent);
  background:color-mix(in srgb,var(--state-danger) 12%,transparent)}
.acceso-aviso{color:var(--state-success); border:1px solid color-mix(in srgb,var(--state-success) 45%,transparent);
  background:color-mix(in srgb,var(--state-success) 12%,transparent)}
.acceso-error:empty,.acceso-aviso:empty{display:none}
.acceso-texto{text-align:center; margin:4px 0 0; line-height:1.55}
@media (max-width:860px){
  .salir .correo{display:none}
}