/* CMS-Following web -- la misma paleta que sim_core.py (TORSA_STYLE_GUIDE v2.0).
   Si un color no esta ahi, no se usa. */
:root {
  --rojo: #EF0006; --rojo-hover: #CC0005; --blanco: #FFFFFF;
  --bg: #000000; --panel: #051C2C; --input: #0A2D45; --header: #021521;
  --borde: #4A7FA8; --sel: #264f78;
  --texto: #E0E0E0; --dim: #88A0B8;
  --ok: #00C853; --aviso: #FFB300;
  --ui: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: Consolas, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--texto); font: 13px var(--ui);
       display: flex; flex-direction: column; overflow: hidden; }
a { color: var(--dim); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.aviso { color: var(--aviso); }
.error { color: var(--rojo); min-height: 1.2em; }
.ok { color: var(--ok); }

/* -- cabecera y barra ------------------------------------------------- */
header { background: var(--header); height: 56px; display: flex;
         align-items: center; gap: 12px; padding: 0 20px; flex: none; }
header .logo { height: 34px; }
header h1 { font-size: 15px; margin: 0; color: var(--blanco); }
header .sub { color: var(--dim); }
header .version { margin-left: auto; font-family: var(--mono); font-size: 12px;
                  color: var(--dim); }
header .usuario { color: var(--dim); font-size: 12px; }
footer { background: var(--header); height: 44px; display: flex;
         align-items: center; gap: 8px; padding: 0 12px; flex: none; }
footer .estado { flex: 1; color: var(--dim); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
footer .autor { color: var(--dim); font-size: 11px; }

button { background: var(--input); color: var(--blanco); border: 0;
         padding: 6px 14px; font: 600 12px var(--ui); cursor: pointer;
         border-radius: 2px; }
button:hover { background: var(--sel); }
button.acento { background: var(--rojo); }
button.acento:hover { background: var(--rojo-hover); }
button:disabled { opacity: .5; cursor: default; }
input, select { background: var(--input); color: var(--blanco); border: 0;
                padding: 4px 6px; font: 12px var(--mono); border-radius: 2px; }
input[type=checkbox] { accent-color: var(--rojo); }
label.chk { color: var(--dim); display: inline-flex; align-items: center;
            gap: 4px; margin-right: 6px; white-space: nowrap; }

/* -- cuerpo ------------------------------------------------------------ */
main { flex: 1; display: flex; min-height: 0; padding: 8px; gap: 8px; }
#columna { width: 430px; flex: none; background: var(--panel);
           overflow-y: auto; padding: 0 0 12px; }
#columna h2 { color: var(--rojo); font-size: 12px; margin: 12px 12px 4px;
              text-transform: uppercase; }
#columna h2 .info { color: var(--dim); cursor: help; font-weight: normal; }
#columna .bloque { background: var(--panel); border: 1px solid var(--input);
                   margin: 4px 8px; padding: 4px 8px; }
#columna .bloque .l1 { display: flex; align-items: center; gap: 6px; }
#columna .chip { background: var(--input); color: var(--dim); font-size: 11px;
                 padding: 1px 6px; }
#columna .chip.pala { color: var(--aviso); }
#columna .nombre { color: var(--blanco); font-weight: 600; }
#columna .sem { font-size: 14px; }
#columna .pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }
#columna .pie { font-size: 11px; color: var(--dim); white-space: pre-wrap; }
#columna .nivel { font-weight: 700; }
#columna .sec-txt { margin: 4px 12px; font-family: var(--mono); font-size: 12px;
                    white-space: pre-wrap; color: var(--dim); }
#columna .acciones { margin: 4px 12px; display: flex; gap: 6px; flex-wrap: wrap; }

#derecha { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 6px; }
#mandos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
          color: var(--dim); }
#mandos .ayuda { font-size: 12px; }
#radar { flex: 1; min-height: 200px; border: 1px solid var(--borde);
         background: var(--bg); display: block; width: 100%; height: 100%;
         cursor: grab; }
#radar.arrastrando { cursor: grabbing; }
#radar-caja { flex: 1; min-height: 0; position: relative; }
#radar-caja canvas { position: absolute; inset: 0; }
table#pares { width: 100%; border-collapse: collapse; font: 12px var(--mono);
              background: var(--input); }
table#pares th { text-align: left; color: var(--dim); background: var(--panel);
                 font: 600 12px var(--ui); padding: 4px 8px; }
table#pares td { padding: 4px 8px; border-top: 1px solid var(--panel);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                 max-width: 420px; }

/* -- mini-pantallas -------------------------------------------------- */
.mini { border: 1px solid var(--borde); background: var(--panel); margin: 0 12px 6px; }
.mini .cab { padding: 3px 4px 0; font-weight: 600; font-size: 12px; }
.mini canvas { display: block; width: 100%; height: 132px; background: var(--bg);
               margin: 3px 0; }
.mini .msg { color: var(--aviso); font-size: 11px; padding: 0 4px 3px;
             white-space: pre-wrap; }

/* -- dialogo de seleccion --------------------------------------------- */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none;
        align-items: center; justify-content: center; z-index: 10; }
.velo.abierto { display: flex; }
.dialogo { width: 780px; max-width: 96vw; max-height: 92vh; background: var(--bg);
           border: 1px solid var(--borde); display: flex; flex-direction: column;
           padding: 12px; gap: 8px; }
.dialogo h2 { color: var(--rojo); font-size: 12px; margin: 4px 0 0;
              text-transform: uppercase; }
.dialogo .pie { display: flex; gap: 8px; justify-content: flex-end; }
.dialogo .campos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 10px;
                   align-items: center; }
.dialogo .campos label { display: contents; color: var(--texto); }
.dialogo pre { background: var(--panel); padding: 8px; margin: 0; color: var(--aviso); }
#dialogo-bd, #dialogo-nube { width: 640px; }
#dialogo .lista { flex: 1; overflow-y: auto; background: var(--panel);
                  border: 1px solid var(--borde); min-height: 160px; }
#dialogo .fila { display: flex; align-items: center; gap: 8px; padding: 3px 8px; }
#dialogo .fila .id { font-family: var(--mono); width: 60px; color: var(--blanco); }
#dialogo .fila .nom { width: 140px; }
#dialogo .fila .dice { color: var(--dim); }
#dialogo .fila .dice.aviso { color: var(--aviso); }

/* -- login ------------------------------------------------------------ */
body.login { align-items: center; justify-content: center; }
.caja-login { background: var(--panel); border: 1px solid var(--borde);
              padding: 28px 32px; width: 340px; display: flex;
              flex-direction: column; gap: 10px; }
.caja-login .logo { height: 40px; align-self: flex-start; }
.caja-login h1 { margin: 4px 0 0; font-size: 18px; color: var(--blanco); }
.caja-login label { display: flex; flex-direction: column; gap: 4px;
                    color: var(--dim); }
.caja-login input { padding: 7px 8px; }
.caja-login .pie { color: var(--dim); font-size: 11px; margin: 8px 0 0; }