/* Panel de CSN Private: consola de operaciones sobria. Sin JavaScript ni estilos en linea (CSP). */
:root {
  --fondo: #0a0c0f;
  --capa: rgba(9, 11, 14, 0.61);
  --panel: rgba(18, 21, 26, 0.92);
  --panel-2: rgba(26, 30, 36, 0.92);
  --linea: #2a3038;
  --linea-suave: #20252c;
  --texto: #d9dee4;
  --tenue: #8a929c;
  --claro: #f3f5f7;
  --acento: #d9a93f;
  --acento-texto: #17130a;
  --bien: #6cbf84;
  --mal: #ec6a5e;
  --cuidado: #e0a84a;
  --info: #7aa6d6;
  --mas: rgba(108, 191, 132, 0.13);
  --menos: rgba(236, 106, 94, 0.13);
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--fondo); }
body {
  margin: 0; min-height: 100vh; color: var(--texto);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* fondo del launcher (ya desenfocado) con una capa oscura plana encima */
  background: linear-gradient(var(--capa), var(--capa)), url("fondo.jpg") center / cover no-repeat fixed, var(--fondo);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; color: var(--claro); letter-spacing: -0.01em; }
h2 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.06em; }
p { margin: 0 0 10px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
code { color: var(--claro); }
ul { margin: 0 0 10px; padding-left: 18px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ marco */
.marco { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: relative; background: rgba(8, 10, 13, 0.9); border-right: 1px solid var(--linea-suave); padding: 18px 0;
  display: flex; flex-direction: column; }
.marca { display: block; padding: 0 20px 18px; color: var(--claro); }
.marca:hover { text-decoration: none; }
.marca strong { display: block; font-size: 15px; letter-spacing: 0.01em; }
.marca small { color: var(--tenue); font-size: 12px; }
.nav { display: flex; flex-direction: column; border-top: 1px solid var(--linea-suave); padding-top: 10px; }
.nav a { color: var(--tenue); padding: 7px 20px; border-left: 2px solid transparent; }
.nav a:hover { color: var(--claro); text-decoration: none; background: rgba(255, 255, 255, 0.03); }
.nav a.activo { color: var(--claro); border-left-color: var(--acento); background: rgba(255, 255, 255, 0.04); }
.nav-sep { border-top: 1px solid var(--linea-suave); margin: 10px 0; }
.lateral-pie { margin-top: auto; padding: 14px 20px 0; color: var(--tenue); font-size: 12px; }

.columna { min-width: 0; display: flex; flex-direction: column; }
.barra { display: flex; align-items: center; gap: 18px; padding: 10px 28px; border-bottom: 1px solid var(--linea-suave);
  background: rgba(8, 10, 13, 0.6); font-size: 13px; color: var(--tenue); flex-wrap: wrap; }
.barra .hora { margin-right: auto; }
.barra .hora strong { color: var(--texto); font-weight: 500; }
.barra form { margin: 0; display: flex; align-items: center; gap: 12px; }
.barra .quien { color: var(--texto); }
.franja { padding: 8px 28px; border-bottom: 1px solid var(--linea-suave); background: rgba(217, 169, 63, 0.08);
  font-size: 13px; }
.contenido { padding: 24px 28px 40px; max-width: 1240px; width: 100%; }

.menu-casilla, .menu-boton { display: none; }

/* sin sesion (entrar, errores) */
.solo-marco { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; }
.solo-marca { color: var(--claro); text-align: center; margin-bottom: 18px; }
.solo-marca strong { display: block; font-size: 18px; letter-spacing: 0.02em; }
.solo-marca small { color: var(--tenue); }
.solo-contenido { width: 100%; max-width: 380px; }
.solo-pie { color: var(--tenue); font-size: 12px; margin-top: 18px; }

/* ----------------------------------------------------------------- bloques */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--linea-suave); }
.cabecera p { margin: 0; color: var(--tenue); }
.bloque { background: var(--panel); border: 1px solid var(--linea); border-radius: 4px; padding: 16px 18px;
  margin-bottom: 16px; }
.bloque > h2:first-child { margin-top: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rejilla .bloque { margin-bottom: 0; }
.ancho-total { grid-column: 1 / -1; }
.cifra { font-size: 28px; font-weight: 600; color: var(--claro); line-height: 1.2; margin: 2px 0 6px;
  font-variant-numeric: tabular-nums; }
.dato { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0 0 10px; font-size: 13px; }
.dato dt { color: var(--tenue); }
.dato dd { margin: 0; color: var(--texto); }
.seccion { margin: 26px 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.seccion h2 { margin: 0; }

.tenue { color: var(--tenue); }
.chico { font-size: 12.5px; }
.claro { color: var(--claro); }
.bien { color: var(--bien); }
.mal, .error { color: var(--mal); }
.cuidado { color: var(--cuidado); }
.info { color: var(--info); }
.partir { overflow-wrap: anywhere; }
.sin-partir { white-space: nowrap; }

.nota { border-left: 2px solid var(--linea); padding: 6px 12px; margin: 0 0 14px; color: var(--texto);
  background: rgba(255, 255, 255, 0.02); }
.nota.mal { border-left-color: var(--mal); }
.nota.bien { border-left-color: var(--bien); }
.nota.cuidado { border-left-color: var(--cuidado); }
.nota p:last-child, .nota ul:last-child { margin-bottom: 0; }

/* medidor fino (disco y RAM); el ancho va por clase porque la CSP prohibe style="" */
.medidor { margin-bottom: 12px; }
.medidor-cabeza { display: flex; justify-content: space-between; font-size: 13px; }
.pista { height: 4px; background: var(--linea-suave); margin: 5px 0 4px; }
.relleno { height: 4px; background: var(--tenue); }
.relleno.medio { background: var(--cuidado); }
.relleno.alto { background: var(--mal); }
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; }
.w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; }
.w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; }
.w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; }
.w100 { width: 100%; }

/* ------------------------------------------------------------- formularios */
label { display: block; margin: 0 0 12px; }
.etiqueta { display: block; font-size: 12.5px; color: var(--tenue); margin-bottom: 4px; }
input, select, textarea, button, .boton {
  font: inherit; color: var(--texto); background: rgba(8, 10, 13, 0.75); border: 1px solid var(--linea);
  border-radius: 3px; padding: 6px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); }
label input:not([type=checkbox]):not([type=radio]), label select { width: 100%; }
button, .boton { display: inline-block; cursor: pointer; background: var(--panel-2); color: var(--texto);
  line-height: 1.4; white-space: nowrap; }
button:hover, .boton:hover { border-color: #46505c; color: var(--claro); text-decoration: none; }
.principal { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); font-weight: 600; }
.principal:hover { background: #e6b850; border-color: #e6b850; color: var(--acento-texto); }
.peligro { border-color: rgba(236, 106, 94, 0.55); color: var(--mal); }
.peligro:hover { border-color: var(--mal); color: #ff8a80; }
button.peligro.lleno { background: #b8433a; border-color: #b8433a; color: #fff; }
.pequeno { padding: 3px 9px; font-size: 12.5px; }
.ancho { width: 100%; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.enlinea { display: inline; margin: 0; }
.casilla { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; }
.casilla input { margin-top: 3px; flex: 0 0 auto; width: auto; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 18px; margin: 4px 0 12px; }
.casillas .casilla { margin: 0 0 6px; }
.casillas code { color: var(--tenue); font-size: 11.5px; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros label { margin: 0; min-width: 150px; }
.filtros .crece { flex: 1; }
.filtros .estrecho { min-width: 90px; max-width: 110px; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.columnas .bloque { margin-bottom: 0; }
fieldset { border: 0; padding: 0; margin: 0; }

/* ------------------------------------------------------------------ tablas */
.tabla { overflow-x: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 4px;
  margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
th { font-size: 11.5px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.02); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.acc { text-align: right; white-space: nowrap; }
tr.fallo td { color: var(--mal); }
tr.actual td:first-child { box-shadow: inset 2px 0 0 var(--acento); }
.compacta td { padding: 5px 12px; font-size: 13px; }

/* ------------------------------------------------- registros, editor, diff */
.salida { background: rgba(5, 6, 8, 0.92); border: 1px solid var(--linea); border-radius: 4px; margin-bottom: 16px; }
.salida-cabeza { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 7px 12px;
  border-bottom: 1px solid var(--linea-suave); font-size: 12.5px; color: var(--tenue); }
.salida-cabeza strong { color: var(--texto); font-weight: 500; font-family: var(--mono); }
pre.registro, pre.diff { margin: 0; padding: 10px 12px; overflow: auto; max-height: 68vh;
  font: 12.5px/1.5 var(--mono); white-space: pre; color: #c9d1d9; }
pre.diff span { display: block; }
pre.diff .mas { background: var(--mas); color: #a6e3b5; }
pre.diff .menos { background: var(--menos); color: #ffb3ab; }
pre.diff .trozo { color: var(--info); }
textarea { display: block; width: 100%; min-height: 62vh; resize: vertical; border: 0; border-radius: 0;
  background: transparent; font: 12.5px/1.5 var(--mono); tab-size: 4; padding: 10px 12px; color: #c9d1d9; }
.editor-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--linea-suave); }

progress { width: 100%; height: 6px; appearance: none; border: 0; background: var(--linea-suave); margin: 8px 0; }
progress::-webkit-progress-bar { background: var(--linea-suave); }
progress::-webkit-progress-value { background: var(--acento); }
progress::-moz-progress-bar { background: var(--acento); }

/* ------------------------------------------------------------------ movil */
@media (max-width: 860px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--linea-suave); }
  .marca { padding: 0 16px; display: inline-block; }
  .menu-boton { display: inline-block; position: absolute; right: 16px; top: 12px; cursor: pointer;
    border: 1px solid var(--linea); border-radius: 3px; padding: 3px 10px; color: var(--texto); font-size: 13px; }
  .nav, .lateral-pie { display: none; }
  .menu-casilla:checked ~ .lateral .nav { display: flex; margin-top: 10px; }
  .barra, .contenido, .franja { padding-left: 16px; padding-right: 16px; }
  .contenido { padding-top: 18px; }
}

/* ---------------------------------------- diccionario, CSV, IDs, en vivo */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; flex-wrap: wrap; }
.pestanas a { color: var(--tenue); padding: 7px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--claro); text-decoration: none; }
.pestanas a.activo { color: var(--claro); border-bottom-color: var(--acento); }
.paginas { display: flex; gap: 14px; align-items: center; margin: 0 0 10px; font-size: 13px; color: var(--tenue); flex-wrap: wrap; }
.tabla-alta { max-height: 70vh; overflow: auto; }
.tabla-csv { max-height: 72vh; overflow: auto; }
.tabla-csv table { width: max-content; min-width: 100%; }
.tabla-csv th, .tabla-alta th { position: sticky; top: 0; z-index: 1; background: #1b1f25; white-space: nowrap;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tabla-csv td { padding: 4px 10px; font-size: 12.5px; white-space: nowrap; max-width: 360px; overflow: hidden;
  text-overflow: ellipsis; border-right: 1px solid var(--linea-suave); }
.tabla-csv tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
.tabla-csv tbody tr:hover td { background: rgba(217, 169, 63, 0.06); }
th.col-id { color: var(--acento); }
.id-nombre { display: block; color: var(--tenue); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11.5px; }
pre.diff .id-nota { display: inline; color: var(--tenue); background: none; }
details { margin: 0 0 10px; }
summary { cursor: pointer; color: var(--texto); margin-bottom: 8px; }
summary:hover { color: var(--claro); }
.oculto-sin-js { display: none; }
.enlinea-casilla { display: inline-flex; margin: 0 0 0 14px; color: var(--texto); }
.titulo-comando { font-size: 14px; font-weight: 600; color: var(--claro); margin: 0 0 4px; }
.titulo-comando code { font-weight: 400; margin-left: 6px; }

/* ------------------------------------- barra, idiomas, ayuda, guiado, diccionario */
.estado-barra { white-space: nowrap; }
.estado-barra .punto { font-size: 11px; }
.estado-online { color: var(--bien); }
.estado-offline { color: var(--mal); }
.estado-unknown { color: var(--tenue); }
.idiomas { font-size: 12.5px; color: var(--tenue); white-space: nowrap; }
.idiomas strong { color: var(--texto); font-weight: 500; }
.solo-pie .idiomas { font-size: 13px; }
details.ayuda { margin: -6px 0 16px; border-left: 2px solid var(--linea); padding: 2px 0 2px 12px; }
details.ayuda > summary { color: var(--acento); font-size: 13px; }
.ayuda-cuerpo { max-width: 860px; font-size: 13.5px; }
.ayuda-cuerpo h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); margin: 14px 0 6px; }
.ayuda-cuerpo ol, .ayuda-cuerpo ul { padding-left: 20px; margin: 0 0 8px; }
.ayuda-ejemplo { margin: 8px 0 4px; }
.migas { font-size: 13px; margin: 0 0 14px; color: var(--tenue); }
.borrador { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.borrador p { margin: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.campos label { margin-bottom: 10px; }
.campos .casilla { align-self: end; }
textarea.corto { min-height: 0; height: auto; border: 1px solid var(--linea); border-radius: 3px; background: rgba(8, 10, 13, 0.75); }
.selector-lista { display: flex; gap: 6px; margin-top: 6px; }
.selector-lista input { flex: 1; min-width: 0; }
.seccion-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
th.sel, td.sel { width: 28px; }
details.agregar { margin-top: 12px; }
.mover { margin-top: 10px; }
button[disabled] { opacity: 0.45; cursor: default; }
.dic-marco { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
.dic-lateral { display: flex; flex-direction: column; font-size: 13px; max-height: 80vh; overflow: auto;
  border-right: 1px solid var(--linea-suave); padding-right: 8px; }
.dic-lateral a { color: var(--texto); padding: 3px 8px; border-left: 2px solid transparent; }
.dic-lateral a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.03); }
.dic-lateral a.activo { border-left-color: var(--acento); background: rgba(255, 255, 255, 0.04); }
.dic-lateral .dic-sub { padding-left: 20px; color: var(--tenue); }
.dic-lateral .dic-sub.activo { color: var(--claro); }
.dic-titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); margin: 14px 8px 4px; }
.dic-titulo:first-child { margin-top: 0; }
.dic-grupo { font-size: 12px; color: var(--tenue); padding: 6px 8px 2px; }
.dic-filtro { margin-bottom: 8px; }
.grado { display: inline-block; font-size: 11.5px; padding: 0 6px; border: 1px solid var(--linea); border-radius: 3px;
  color: var(--tenue); white-space: nowrap; }
.grado.g1 { color: #b9c0c8; }
.grado.g2 { color: #7fc48f; border-color: rgba(127, 196, 143, 0.4); }
.grado.g3 { color: #7aa6d6; border-color: rgba(122, 166, 214, 0.4); }
.grado.g4 { color: #b48ee0; border-color: rgba(180, 142, 224, 0.4); }
.grado.g5 { color: #e0a84a; border-color: rgba(224, 168, 74, 0.45); }
.grado.g6 { color: #ec6a5e; border-color: rgba(236, 106, 94, 0.45); }
.grado.g7 { color: #d9a93f; }
.grado.g8 { color: #f0d27a; border-color: rgba(240, 210, 122, 0.55); }
@media (max-width: 860px) {
  .dic-marco { grid-template-columns: 1fr; }
  .dic-lateral { max-height: none; border-right: 0; }
}

/* ------------------------------------------------ tablero, graficas, apariencia */
svg.grafica { display: block; width: 100%; height: auto; margin: 4px 0 10px; }
svg.grafica text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.g-rejilla { stroke: var(--linea-suave); stroke-width: 1; }
.g-eje { fill: var(--tenue); font-size: 11px; }
.g-vacio { fill: var(--tenue); font-size: 13px; }
.g-linea { fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linejoin: round; }
.g-linea-punto { fill: var(--acento); }
.g-punto { fill: transparent; stroke: none; }
.g-punto:hover { fill: var(--acento); }
.g-barra.s1, .g-ley.s1 { fill: var(--acento); background: var(--acento); }
.g-barra.s2, .g-ley.s2 { fill: var(--info); background: var(--info); }
.g-barra.s3, .g-ley.s3 { fill: var(--bien); background: var(--bien); }
.g-barra:hover { opacity: 0.8; }
.g-arriba, .g-ley.g-arriba { fill: var(--bien); background: var(--bien); }
.g-caido, .g-ley.g-caido { fill: var(--mal); background: var(--mal); }
.g-sin, .g-ley.g-sin { fill: var(--linea-suave); background: var(--linea-suave); }
.g-ley { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 12px; vertical-align: middle; }
.leyenda .g-ley:first-child { margin-left: 0; }
.leyenda { color: var(--tenue); }
.lista-widgets { padding-left: 20px; }
.lista-widgets li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--linea-suave); }
.lista-enlaces li { padding: 3px 0; }
pre.registro.corto { max-height: 260px; }
.subir-fondo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
input[type=range] { width: 100%; padding: 0; }

/* ------------------------------------------------------------ editor de noticias */
.nv-marco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.nv-izq { min-width: 0; }
.nv-der { position: sticky; top: 12px; min-width: 0; }
.nv-vista { display: block; width: 100%; height: calc(100vh - 90px); min-height: 520px; border: 1px solid var(--linea);
  border-radius: 4px; background: #06100e; }
.nv-vista-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.nv-vista-barra .nv-clic { margin: 0; }
.nv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-chip { display: inline-block; padding: 5px 12px; border: 1px dashed var(--linea); border-radius: 3px; color: var(--texto);
  background: var(--panel-2); cursor: grab; user-select: none; font-size: 13px; }
.nv-chip:hover { border-color: var(--acento); text-decoration: none; color: var(--claro); }
.nv-chip.k-new, .nv-kind.k-new { background: #1fd69f; color: #04120d; border-color: #1fd69f; }
.nv-chip.k-fix, .nv-kind.k-fix { background: #2a6fdb; color: #fff; border-color: #2a6fdb; }
.nv-chip.k-change, .nv-kind.k-change { background: #26413a; color: #eef3f1; border-color: #26413a; }
.nv-kind { display: inline-block; min-width: 58px; padding: 0 6px; text-align: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; border-radius: 2px; flex: 0 0 auto; }
.nv-lista { list-style: none; margin: 0; padding: 0; }
.nv-sub { margin: 0 0 10px 18px; }
.nv-item { border-top: 1px solid var(--linea-suave); }
.nv-item:first-child { border-top: 0; }
.nv-fila { display: flex; align-items: center; gap: 8px; padding: 6px 2px; flex-wrap: wrap; }
.nv-asa { color: var(--tenue); cursor: grab; user-select: none; }
.nv-nombre { font-weight: 600; color: var(--claro); }
.nv-texto { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.nv-acciones { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.nv-botones button, .nv-mover-a button, .nv-mover-a select { padding: 2px 7px; font-size: 12px; }
.nv-mover-a select { width: auto; }
.nv-hijos { padding: 0 0 8px 22px; }
.nv-sub-titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); margin: 8px 0 4px; }
.nv-vacio { padding: 6px 2px; }
.nv-mini { width: 40px; height: 32px; object-fit: contain; background: #0a1713; border: 1px solid var(--linea-suave); }
.nv-etiqueta { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; }
.nv-estado { flex: 0 0 auto; }
.nv-arrastrando { opacity: 0.45; }
.nv-antes { box-shadow: inset 0 3px 0 var(--acento); }
.nv-despues { box-shadow: inset 0 -3px 0 var(--acento); }
.nv-dentro { outline: 2px dashed var(--acento); outline-offset: -2px; }
.nv-editor { border-color: var(--acento); }
.nv-ancho { grid-column: 1 / -1; }
.nv-color { width: 64px; height: 34px; padding: 2px; }
.nv-imagen-elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; align-items: start; }
.nv-miniatura { margin: 0 0 10px; }
.nv-miniatura img { display: block; max-width: 100%; max-height: 120px; background: #0a1713; border: 1px solid var(--linea-suave); }
.nv-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.nv-foto { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.nv-foto img { display: block; width: 100%; height: 130px; object-fit: contain; background: #0a1713; }
.nv-foto figcaption { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.nv-sin-uso { border-style: dashed; }
/* vista del launcher (una ventana Tk: se imita con texto, sin imagenes) */
.nv-lanzador { background: #0d1117; }
.nv-l-titular { font-size: 22px; font-weight: 700; color: var(--claro); margin: 4px 0 2px; }
.nv-l-sub { color: var(--tenue); font-size: 12px; margin: 0 0 12px; }
.nv-l-tarjeta { border: 1px solid var(--linea); padding: 10px 14px; margin-bottom: 14px; }
.nv-l-pestanas { border-bottom: 1px solid var(--linea-suave); padding-bottom: 6px; }
.nv-l-pestanas strong { border-bottom: 3px solid #f2c94c; }
.nv-l-filas { list-style: none; padding: 0; margin: 0; }
.nv-l-filas li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.nv-l-texto { border-top: 1px solid var(--linea-suave); padding-top: 8px; }
.nv-l-t { font-size: 15px; font-weight: 700; color: var(--claro); margin: 0; }
.nv-l-dato { color: #f2c94c; font-size: 11.5px; font-weight: 700; margin: 0 0 4px; }
@media (max-width: 1100px) {
  .nv-marco { grid-template-columns: 1fr; }
  .nv-der { position: static; }
  .nv-vista { height: 70vh; }
}
.nv-editor textarea { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); padding: 6px 10px; }
.dic-grados { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; flex-basis: 100%; }
.dic-grados legend { padding: 0; margin-bottom: 4px; }
.filtros .dic-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; margin: 0; cursor: pointer; }
.filtros .dic-chip input { width: auto; margin: 0; }
.dic-paginas { display: flex; gap: 14px; align-items: center; margin: 6px 0; }
/* notas compartidas */
.nota-form label { display: block; margin-bottom: 10px; }
.nota-form textarea.corto { min-height: 120px; }
.nota-etqs { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nota-etqs legend { padding: 0; margin-bottom: 4px; }
.nota-form .nota-etq { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.nota-form .nota-etq input, .nota-form .casilla input { width: auto; }
.nota-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.nota-lista .bloque { margin-bottom: 0; }
.nota-tarjeta.fijada { border-color: var(--acento); }
.nota-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nota-cab h2 { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.nota-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.nota-pin { font-size: 11px; color: var(--acento); border: 1px solid var(--acento); border-radius: 3px; padding: 0 5px; vertical-align: middle; }
.nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 10px; }
.nota-etqs-ver { margin: 0 0 6px; }
.nota-etqs-ver a:hover { text-decoration: none; }
.nota-pie { margin: 0; }
.etq { display: inline-block; font-size: 12px; padding: 0 7px; border-radius: 10px; border: 1px solid currentColor; }
.etq-c1 { color: #e0b54d; } .etq-c2 { color: #7fc48f; } .etq-c3 { color: #7aa6d6; } .etq-c4 { color: #b48ee0; }
.etq-c5 { color: #e07a70; } .etq-c6 { color: #e59a52; } .etq-c7 { color: #5cc4bd; } .etq-c8 { color: #a9b1ba; }

/* ------------------------------------------------ usuarios: permisos e invitaciones */
.apilado > .bloque { margin-bottom: 16px; }
.categoria-permisos { border-top: 1px solid var(--linea-suave); padding: 10px 0 4px; margin: 0; }
.categoria-permisos legend { display: flex; gap: 8px; align-items: center; padding: 0; margin-bottom: 6px; font-size: 14px; }
.categoria-permisos legend .claro { margin-right: 6px; }
.permiso { margin: 0 0 10px; }
.permiso code, .lista-permisos code { color: var(--tenue); font-size: 11.5px; }
.detalle { display: block; font-size: 12.5px; margin-top: 2px; }
.marca-peligro { display: inline-block; font-size: 11px; color: var(--mal); border: 1px solid rgba(236, 106, 94, 0.55);
  border-radius: 3px; padding: 0 5px; margin-left: 4px; }
.presets-permisos { margin: 4px 0 10px; }
.presets-permisos li { padding: 3px 0; }
.categoria-titulo { font-size: 13px; margin: 12px 0 4px; color: var(--claro); }
.lista-permisos li { padding: 3px 0 6px; }
.resumen-permisos { display: block; }
.codigo-invitacion { font-size: 20px; letter-spacing: 2px; color: var(--acento); margin-right: 10px; }
.enlaces-entrar { margin-top: 12px; text-align: center; }

/* ------------------------------------------------ graficas configurables */
.g-parcial, .g-ley.g-parcial { fill: var(--cuidado); background: var(--cuidado); }
.g-subtitulo { font-weight: 400; color: var(--tenue); font-size: 12.5px; margin-left: 6px; }
.controles-graficas { margin-bottom: 14px; }
.controles-graficas .casillas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ajustes-widget { margin: 6px 0 2px 0; }
.ajustes-widget label { min-width: 110px; }

/* Launcher: imagenes del launcher y del juego (web_launcher.py) */
.ln-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ln-cab h2 { margin: 0 0 4px; }
.ln-cab p { margin: 0 0 4px; }
.ln-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 10px; }
.ln-figura { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ln-img { display: block; max-width: 100%; height: auto; background: #050608; border: 1px solid var(--linea-suave); }
.ln-fuente { margin-top: 10px; }
.ln-datos { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 12.5px; }
.ln-datos dt { color: var(--tenue); }
.ln-datos dd { margin: 0; min-width: 0; }
.ln-marca { display: inline-block; font-size: 11px; border: 1px solid; border-radius: 3px; padding: 0 5px; font-weight: 400; }
.ln-pendiente { color: var(--cuidado); border-color: var(--cuidado); }
.ln-publicada { color: var(--bien); border-color: var(--bien); }
.ln-aviso { border-color: var(--cuidado); }
.ln-pasos li { margin-bottom: 8px; }
.ln-pasos code { overflow-wrap: anywhere; }
.ln-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ln-foto { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--linea-suave); border-radius: 4px; }
.ln-foto.ln-actual { border-color: var(--bien); }
.ln-foto figcaption { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ln-posiciones { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.ln-posiciones .casilla { margin: 0; }

/* ------------------------------------------- jugadores: pais (bandera) y filtros */
.filtros-jugadores .crece { flex: 1 1 100%; }                 /* la busqueda en su fila; debajo, los filtros */
.filtros-jugadores label:not(.crece) { flex: 1 1 150px; min-width: 0; }
.filtros-jugadores label.orden { flex-grow: 1.6; }
.filtros-jugadores .acciones { flex: 0 0 auto; }
.filtros-jugadores label.por-pagina { flex: 0 1 110px; }
.paginas .numeros { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.paginas .numeros strong { color: var(--texto); font-weight: 600; }
.pais { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: help;
  font-family: var(--mono); font-size: 12px; }
.bandera { display: block; width: 20px; height: 15px; flex: 0 0 auto; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); }
.ip-pais { display: flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1.7; }

/* ---------------------------------- consola: pestanas por grupo, tarjetas y selectores (static/consola.js) */
/* Sin JavaScript: todos los grupos uno debajo de otro (las pestanas son enlaces a cada grupo). Con JavaScript
   (.con-js): solo el grupo activo; al filtrar, todos los que tienen coincidencias. */
.consola-salida { margin-bottom: 22px; border-color: #3a424d; }
.consola-salida .salida-cabeza { align-items: center; }
.consola-salida .salida-cabeza strong { overflow-wrap: anywhere; }
.salida-notas { padding: 8px 12px 0; margin: 0; }
.salida-notas p { margin: 0 0 8px; }
.consola-salida .tabla { margin: 8px 12px 12px; }
pre.consola-pre { max-height: 50vh; border-top: 1px solid var(--linea-suave); }
.consola-barra { display: flex; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--linea);
  margin-bottom: 16px; }
.consola-pestanas { border-bottom: 0; margin: 0; flex: 1 1 auto; min-width: 0; }
.consola-pestanas a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.consola-pestanas .cuenta { font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 9px; color: var(--tenue);
  background: rgba(255, 255, 255, 0.06); font-variant-numeric: tabular-nums; }
.consola-pestanas a.activo .cuenta { background: rgba(217, 169, 63, 0.18); color: var(--acento); }
.consola-pestanas a.vacia { opacity: 0.45; }
.consola-filtro { margin: 0 0 7px; flex: 0 1 260px; min-width: 180px; }
.consola-filtro input { width: 100%; }
.consola-grupo-titulo { margin: 22px 0 10px; }
.consola-grupo:first-of-type .consola-grupo-titulo { margin-top: 4px; }
.consola.con-js .consola-grupo, .consola.con-js .consola-grupo-titulo { display: none; }
.consola.con-js .consola-grupo.activa { display: block; }
.consola.con-js.filtrando .consola-grupo, .consola.con-js.filtrando .consola-grupo-titulo { display: block; }
.consola.con-js.filtrando .consola-objetos, .consola.con-js.filtrando .consola-objetos + .tabla { display: none; }
.consola .consola-grupo.sin-coincidencias, .consola .tarjeta-comando.no-coincide { display: none; }
.consola.con-js.filtrando .consola-grupo.sin-coincidencias { display: none; }
.consola.filtrando .consola-pestanas a.activo { color: var(--tenue); border-bottom-color: transparent; }
.tarjetas-comando { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px;
  margin-bottom: 16px; align-items: start; }
.tarjeta-comando { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-left: 3px solid var(--linea); }
.tarjeta-peligro { border-left-color: rgba(236, 106, 94, 0.6); }
.tarjeta-error { border-color: var(--mal); }
.tc-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.tc-cabeza .titulo-comando { margin: 0; }
.tc-orden { font-size: 11.5px; color: var(--tenue); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linea-suave);
  border-radius: 3px; padding: 0 6px; }
.tc-marcas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.tc-marca { font-size: 11px; border: 1px solid var(--linea); border-radius: 3px; padding: 0 6px; color: var(--tenue); }
.tc-marca.peligro { border-color: rgba(236, 106, 94, 0.55); color: var(--mal); }
.tc-marca.info { border-color: rgba(122, 166, 214, 0.5); color: var(--info); }
.tc-texto { margin: 0; }
.tc-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px 12px;
  align-items: end; }
.campo-ayuda { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
.campo { min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
/* sin las casillas: con width 100 % la de «Force parts» (dentro de un .campo) ocupaba toda la fila y su texto se
   iba a la derecha, una palabra por linea (dueno, 9 oct. 2026) */
.campo input:not([type=checkbox]):not([type=radio]), .campo select { width: 100%; }
.casilla input[type=checkbox], .casilla input[type=radio] { width: auto; padding: 0; }
.casilla > span { flex: 1 1 auto; min-width: 0; }
.campo .mal { margin: 4px 0 0; }
.tc-pie { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.tc-pie .chico { margin-right: auto; }
.consola-objetos { margin-top: 4px; }
.tarjeta-libre { max-width: 760px; }
/* selector de jugador u objeto (lista bajo el campo) */
.selc { position: relative; }
.selc-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px); min-width: min(300px, 86vw);
  background: #12161b; border: 1px solid #3a424d; border-radius: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
.selc-cabeza input { width: auto; margin: 0; }
.selc-cabeza { margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--linea-suave); font-size: 12.5px; cursor: pointer; }
.selc-lista { list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; }
.selc-lista:empty { display: none; }
.selc-grupo { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); }
.selc-opcion { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.selc-opcion:hover, .selc-opcion.marcada { background: rgba(217, 169, 63, 0.12); }
.selc-opcion.marcada { box-shadow: inset 2px 0 0 var(--acento); }
.sj-punto { font-size: 9px; color: #46505c; align-self: center; }
.sj-punto.en-linea { color: var(--bien); }
.sj-id { color: var(--acento); min-width: 3.2em; }
.sj-apodo { color: var(--claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sj-cuenta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; font-size: 12px; }
.sj-nivel { margin-left: auto; white-space: nowrap; font-size: 12px; }
.selc-estado { margin: 0; padding: 0 10px; }
.selc-estado:not(:empty) { padding: 7px 10px; }
.selc-elegido { margin: 4px 0 0; color: var(--bien); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .consola-filtro { flex: 1 1 100%; margin-bottom: 10px; }
  .tarjeta-comando { padding: 12px 13px; }
  .consola-pestanas a { padding: 6px 10px; }
}

/* Events (eventos.html, eventos_editar.html, static/eventos.js) */
.evento-fila { border-top: 1px solid var(--linea-suave); padding-top: 10px; margin-top: 10px; }
.evento-fila legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.evento.con-js .evento-fila-vacia { display: none; }
.evento [hidden] { display: none !important; }    /* .campo-ayuda y .nota llevan display: block */
.evento.con-js .ev-sin-js { display: none; }
.ev-equivale { font-weight: 600; }
.ev-parte { display: flex; gap: 6px; }
.ev-parte select { min-width: 0; }
.ev-parte .ev-familia { flex: 2; }
.ev-parte .ev-grado { flex: 1; }
.ev-info { margin: 4px 0 0; }
/* resumen en vivo al pie del formulario (sustituye al confirm() del navegador) */
.ev-resumen { border-left: 3px solid var(--bien); }
.ev-resumen ul { margin: 0; padding-left: 18px; }
.ev-resumen li { margin: 2px 0; }
.ev-resumen li.ev-resumen-objeto { font-weight: 600; }
.ev-aplicar-ya { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }