/* Portal de servidores (WISP Cloud). Estética de WISP: mismos colores de marca, tema oscuro por defecto, menú
   lateral, tarjetas y tablas. El tema lo pone js/tema-boot.js en <html data-theme>. */

/* ===================================================================== tokens */
:root {
  --brand-navy: #292d59;
  --brand-sky: #00b1f4;
  --brand-orange: #f58633;
  --brand-grad: linear-gradient(180deg, #009ce7 0%, #1d63b0 45%, #1d2973 100%);
  --bg: #f1f5fa;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --border: #dde5ef;
  --border-strong: #c3cfdf;
  --text: #161a3a;
  --muted: #5f6b85;
  --accent: #0077b6;
  --accent-hover: #00639a;
  --accent-soft: #dcf1fb;
  --on-accent: #ffffff;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 14px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 12px 40px rgb(15 23 42 / 0.18);
  --radius: 10px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --side-w: 236px;
  /* Series de los gráficos */
  --serie-1: #0091d5;
  --serie-2: #e8741f;
  --serie-3: #7c4dff;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0b1030;
  --surface: #131a42;
  --surface-2: #19214f;
  --border: #252f66;
  --border-strong: #35427f;
  --text: #e6ebf6;
  --muted: #9aa6c8;
  --accent: #1590d4;
  --accent-hover: #2fa8ea;
  --accent-soft: #123a6e;
  --danger: #f87171;
  --danger-soft: #45191c;
  --ok: #4ade80;
  --ok-soft: #133a24;
  --warn: #fbbf24;
  --warn-soft: #3d2e0b;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
  --serie-1: #38c2f7;
  --serie-2: #f9a05c;
  --serie-3: #a78bfa;
  color-scheme: dark;
}
/* Logo (js/util.js logo()): letras en azul marino o blanco según el tema, nube y punto en celeste */
.logo-wisp .logo-t { stroke: var(--brand-navy); }
:root[data-theme='dark'] .logo-wisp .logo-t { stroke: #ffffff; }
.logo-wisp .logo-a { fill: var(--brand-sky); }
.logo-wisp .logo-c { stroke: var(--brand-sky); }
:root[data-theme='dark'] .logo-claro, :root:not([data-theme='dark']) .logo-oscuro { display: none !important; }

/* ===================================================================== base */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 17px; margin-bottom: 12px; }
h3 { font-size: 15px; }
p { margin: 0 0 8px; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.tenue { color: var(--muted); }
.ayuda { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.error { color: var(--danger); min-height: 1.2em; margin-top: 10px; font-size: 13.5px; }
.oculto { display: none !important; }
.angosto { max-width: 420px; }

/* ===================================================================== botones y formularios */
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
button:hover:not(:disabled), .boton:hover { background: var(--surface-2); border-color: var(--muted); text-decoration: none; }
button:disabled { opacity: .5; cursor: default; }
button.primario, .boton.primario { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primario:hover:not(:disabled), .boton.primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.peligro { color: var(--danger); }
button.peligro:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
button.chico { height: 30px; padding: 0 10px; font-size: 13px; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 7px 10px;
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
textarea { resize: vertical; min-height: 60px; }
input:focus, select:focus, textarea:focus, button:focus-visible, .boton:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
label { display: block; margin: 14px 0 5px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; height: 32px; font-size: 13px; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button.activo { background: var(--accent-soft); color: var(--accent); }

/* ===================================================================== ingreso */
.centro { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 40px; }
body:has(.centro) { background: var(--brand-grad) fixed; }
.tarjeta {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 30px 28px; width: min(400px, 100%);
}
.tarjeta.ancha { width: min(520px, 100%); }
.tarjeta .marca { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 22px; text-align: center; }
.tarjeta .marca .logo-wisp { width: 220px; height: auto; }
.tarjeta h1 { font-size: 21px; margin-bottom: 6px; }
.tarjeta form button.primario { width: 100%; height: 40px; margin-top: 20px; }
.tarjeta input[type=text], .tarjeta input[type=email], .tarjeta input[type=password] { height: 40px; }
.codigo-input { font-size: 22px !important; letter-spacing: 6px; text-align: center; font-family: var(--mono); }
/* Código del 2FA en 6 casillas (js/ingreso.js casillasCodigo) */
.casillas { display: flex; justify-content: center; gap: 8px; margin: 18px 0 4px; }
.casillas input { width: 46px; height: 56px !important; padding: 0; text-align: center; font: 600 26px var(--mono);
  border-radius: 10px; caret-color: var(--accent); }
.casillas input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.casillas input:disabled { opacity: .6; }
.casillas + .error { text-align: center; min-height: 20px; }
@media (max-width: 380px) { .casillas { gap: 5px; } .casillas input { width: 40px; height: 50px !important; } }
.secreto { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; word-break: break-all; text-align: center;
  font-size: 15px; letter-spacing: 1px; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr svg { width: 200px; height: 200px; border-radius: 8px; }
.pasos { padding-left: 20px; margin: 8px 0; }
.pasos li { margin: 6px 0; }
.recuperacion { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
.recuperacion span { background: var(--surface-2); border-radius: 6px; padding: 6px; text-align: center; font-family: var(--mono); }

/* ===================================================================== estructura: menú lateral */
.lateral {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 10; display: flex; flex-direction: column;
  gap: 10px; padding: 16px 10px 10px; background: var(--surface); border-right: 1px solid var(--border);
}
.lateral .marca { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; color: var(--text); }
.lateral .marca:hover { text-decoration: none; }
.lateral .marca .logo-wisp { width: 150px; height: auto; display: block; }
.lateral .marca img.icono { display: none; width: 34px; height: 34px; }
.lateral nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.lateral nav a, .lateral .usuario a, .lateral .usuario button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: auto; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 500; white-space: nowrap; width: 100%;
}
.lateral nav a:hover, .lateral .usuario a:hover, .lateral .usuario button:hover {
  background: var(--surface-2); color: var(--text); text-decoration: none;
}
.lateral nav a.activo, .lateral .usuario a.activo { background: var(--accent-soft); color: var(--accent); }
.lateral .ico { width: 20px; height: 20px; flex: none; display: grid; place-items: center; font-size: 16px; }
.lateral .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.lateral .usuario { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.lateral .quien { padding: 4px 10px 6px; line-height: 1.25; min-width: 0; }
.lateral .quien strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .quien small { color: var(--muted); font-size: 12px; }
#app.con-lateral { margin-left: var(--side-w); }
main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
@media (max-width: 899px) {
  :root { --side-w: 60px; }
  .lateral .etiqueta, .lateral .quien, .lateral .marca .logo-wisp { display: none; }
  .lateral .marca img.icono { display: block; }
  .lateral .marca { padding: 0 3px 8px; }
  main { padding: 20px 14px 50px; }
}

/* ===================================================================== páginas */
.encabezado { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.encabezado .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.encabezado .acciones select { width: auto; min-width: 200px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 16px; }
.panel .encabezado { margin-bottom: 12px; align-items: flex-start; }
.panel .encabezado h2 { margin: 0; }
.vacio { text-align: center; padding: 36px 16px; color: var(--muted); }
.desplazable { overflow-x: auto; }

/* ===================================================================== servidores */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.vm {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--text); transition: border-color .15s;
}
a.vm:hover { text-decoration: none; border-color: var(--accent); }
.vm .titulo { display: flex; align-items: center; gap: 8px; }
.vm .titulo h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm .titulo .estado { margin-left: auto; }
.recursos { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.recursos div small { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.estado.on { color: var(--ok); }
.estado.on::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.estado.off { color: var(--muted); }
.estado.susp { color: var(--warn); }
.estado.susp::before { background: var(--warn); }
.detalle { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.datos dt { color: var(--muted); font-size: 13.5px; }
.datos dd { margin: 0; word-break: break-word; }
.energia { display: flex; flex-direction: column; gap: 8px; }
.energia button { justify-content: flex-start; }
.energia .sep { border-top: 1px solid var(--border); margin: 4px 0; }
.energia select { margin-bottom: 4px; }
.barra-uso { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 3px; }
.barra-uso > i { display: block; height: 100%; background: var(--accent); }
.barra-uso.alto > i { background: var(--warn); }
.barra-uso.lleno > i { background: var(--danger); }

/* ===================================================================== tablas y chips */
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabla th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
  background: var(--surface-2); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: var(--surface-2); }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla td.fecha, .tabla td.num, .tabla th.num { white-space: nowrap; }
.tabla td.num, .tabla th.num { text-align: right; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.aviso { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.mal { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* ===================================================================== diálogos y avisos */
.fondo-modal {
  position: fixed; inset: 0; background: rgb(15 23 42 / .5); display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; overflow-y: auto; z-index: 20;
}
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: min(480px, 100%);
  box-shadow: var(--shadow-lg); }
.modal h2 { margin-bottom: 8px; }
.modal .botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.copiar { display: flex; gap: 6px; }
.copiar input { flex: 1; }
#avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex;
  flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso { background: #1e293b; color: #f8fafc; padding: 9px 16px; border-radius: 8px; box-shadow: var(--shadow-lg);
  font-size: 13.5px; max-width: min(520px, calc(100vw - 32px)); border-left: 4px solid var(--brand-sky); }
.aviso.mal { border-left-color: #f87171; }

/* ===================================================================== consola */
main.ancho { max-width: none; padding: 12px 16px 24px; }
.consola-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.consola-barra .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.consola-barra select { width: auto; }
.consola-pantalla {
  background: #000; border-radius: 8px; height: calc(100vh - 190px); min-height: 360px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.consola-pantalla .vacio { color: #ccc; }
body.consola-full .lateral, body.consola-full .consola-barra, body.consola-full main.ancho > .ayuda { display: none; }
body.consola-full #app.con-lateral { margin-left: 0; }
body.consola-full main.ancho { padding: 0; }
body.consola-full .consola-pantalla { position: fixed; inset: 0; height: 100vh; border-radius: 0; z-index: 40; }

/* ===================================================================== gráficos */
.graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; }
.grafico { margin-bottom: 0; }
.grafico h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.grafico h3 .valor { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
.grafico .lienzo { position: relative; }
.grafico svg { width: 100%; height: 170px; display: block; overflow: visible; }
.grafico .eje { stroke: var(--border); stroke-width: 1; }
.grafico .eje-texto { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
.grafico .linea { fill: none; stroke-width: 1.8; }
.grafico .area { stroke: none; opacity: .14; }
.grafico .s1 { stroke: var(--serie-1); } .grafico .area.s1 { fill: var(--serie-1); }
.grafico .s2 { stroke: var(--serie-2); } .grafico .area.s2 { fill: var(--serie-2); }
.grafico .s3 { stroke: var(--serie-3); } .grafico .area.s3 { fill: var(--serie-3); }
.grafico .guia { stroke: var(--muted); stroke-dasharray: 3 3; stroke-width: 1; }
.grafico .tip { position: absolute; top: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 9px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; z-index: 5; }
.leyenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; margin-bottom: 6px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.leyenda .s1 { background: var(--serie-1); } .leyenda .s2 { background: var(--serie-2); } .leyenda .s3 { background: var(--serie-3); }
.totales { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.total { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.total small { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.total strong { font-size: 19px; }

@media (max-width: 760px) {
  .detalle { grid-template-columns: 1fr; }
  .graficos { grid-template-columns: 1fr; }
  .encabezado .acciones { margin-left: 0; width: 100%; }
  .encabezado .acciones select { flex: 1; min-width: 0; }
}
.tabla td.ancho-barra { min-width: 160px; }
input[type=month] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 10px; }
.cliente-bloque { margin-bottom: 28px; }
.cliente-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cliente-titulo h2 { margin: 0; }
.cliente-titulo h2 a { color: var(--text); }
.cliente-titulo h2 a:hover { color: var(--accent); }

/* Grupo desplegable del menú (Clientes) */
.lateral details.grupo > summary {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted);
  font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; user-select: none;
}
.lateral details.grupo > summary::-webkit-details-marker { display: none; }
.lateral details.grupo > summary::after { content: '▸'; margin-left: auto; font-size: 11px; transition: transform .15s; }
.lateral details.grupo[open] > summary::after { transform: rotate(90deg); }
.lateral details.grupo > summary:hover { background: var(--surface-2); color: var(--text); }
.lateral details.grupo:has(a.activo):not([open]) > summary { background: var(--accent-soft); color: var(--accent); }
.lateral .grupo-lista { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 14px; padding-left: 8px;
  border-left: 1px solid var(--border); }
.lateral .grupo-lista a, .lateral .grupo-lista button {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  height: auto; width: 100%; justify-content: flex-start; overflow: hidden;
}
.lateral .grupo-lista a:hover, .lateral .grupo-lista button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.lateral .grupo-lista a.activo { background: var(--accent-soft); color: var(--accent); }
.lateral .grupo-lista .etiqueta { overflow: hidden; text-overflow: ellipsis; }
.lateral .ico.inicial { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent); }
@media (max-width: 899px) {
  .lateral details.grupo > summary::after { display: none; }
  .lateral .grupo-lista { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Torta (dona) */
.torta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.torta svg { width: 120px; height: 120px; flex: none; }
.torta .fondo { fill: none; stroke: var(--surface-2); }
.torta .parte { fill: none; }
.torta .parte.s1 { stroke: var(--serie-1); } .torta .parte.s2 { stroke: var(--serie-2); } .torta .parte.s3 { stroke: var(--serie-3); }
.torta .centro-texto { fill: var(--text); font-size: 5.4px; font-weight: 700; font-family: var(--font); }
.torta .centro-sub { fill: var(--muted); font-size: 3.2px; font-family: var(--font); }
.torta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.torta li i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.torta li i.s1 { background: var(--serie-1); } .torta li i.s2 { background: var(--serie-2); }
.torta li b { margin-left: 6px; }
.rend-arriba { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-bottom: 16px; }
@media (max-width: 760px) { .rend-arriba { grid-template-columns: 1fr; } }

/* Ruta de navegación como título (estilo Google Drive): tramos grandes, cada uno se puede tocar para volver */
h1.ruta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 24px; font-weight: 600; margin-left: -8px; }
h1.ruta a, h1.ruta span:not(.sep) { padding: 2px 8px; border-radius: 8px; color: var(--text); }
h1.ruta a { color: var(--muted); }
h1.ruta a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
h1.ruta .sep { color: var(--muted); font-weight: 400; font-size: 22px; padding: 0 2px; }
h1.ruta span:last-child { font-weight: 700; }
.encabezado h1.ruta + .estado, .encabezado h1.ruta + .tenue { margin-top: 4px; }
#c-ruta h1.ruta { font-size: 18px; }
#c-ruta h1.ruta .sep { font-size: 17px; }

/* Espacio en disco: una torta por partición */
.particiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 20px; }
.particion > .mono { margin-bottom: 6px; color: var(--muted); }
.torta.chica svg { width: 96px; height: 96px; }
.torta .parte.s-libre { stroke: var(--border-strong); }
.torta .parte.s-alto { stroke: var(--warn); }
.torta .parte.s-lleno { stroke: var(--danger); }
.torta li i.s-libre { background: var(--border-strong); }
.torta li i.s-alto { background: var(--warn); }
.torta li i.s-lleno { background: var(--danger); }

/* Tortas del rango (red, CPU, memoria, disco) y desgloses al tocarlas */
.tortas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.caja-torta { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.caja-torta h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 6px; }
.tocable { cursor: pointer; transition: background .15s, border-color .15s; }
.tocable:hover { background: var(--surface-2); border-color: var(--accent); }
.modal.ancho { width: min(760px, 100%); }
.modal h3.sub { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.modal .tortas { grid-template-columns: 1fr; }
.desglose { max-height: 45vh; overflow-y: auto; }
.barra-doble { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.barra-doble i { display: block; height: 5px; border-radius: 3px; }
.barra-doble i.s1 { background: var(--serie-1); } .barra-doble i.s2 { background: var(--serie-2); }
:root { --serie-4: #16a34a; --serie-5: #db2777; --serie-6: #0d9488; }
:root[data-theme='dark'] { --serie-4: #4ade80; --serie-5: #f472b6; --serie-6: #2dd4bf; }
.torta .parte.s4 { stroke: var(--serie-4); } .torta .parte.s5 { stroke: var(--serie-5); } .torta .parte.s6 { stroke: var(--serie-6); }
.torta li i.s3 { background: var(--serie-3); } .torta li i.s4 { background: var(--serie-4); }
.torta li i.s5 { background: var(--serie-5); } .torta li i.s6 { background: var(--serie-6); }
.particiones.tocable { padding: 6px; margin: -6px; border-radius: var(--radius); }

/* Botones con ícono (Actualizar, encendido) */
button.icono { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
button.icono.peligro { color: var(--danger); }
.iconos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Vista previa de la consola en el detalle del servidor */
.vista-previa { position: relative; aspect-ratio: 16 / 10; background: #000; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.vista-previa .vp-pantalla, .vista-previa .vp-pantalla > div { position: absolute; inset: 0; }
.vista-previa .vp-pantalla img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vista-previa .vp-texto { color: #9aa6c8; font-size: 13px; padding: 12px; text-align: center; }
.vista-previa .vp-tapa { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px; background: linear-gradient(transparent 60%, rgb(0 0 0 / .55)); opacity: 0; transition: opacity .15s; }
.vista-previa .vp-tapa span { color: #fff; font-weight: 600; font-size: 13px; }
.vista-previa.tocable:hover .vp-tapa { opacity: 1; }
.vista-previa.tocable:hover { border-color: var(--accent); background: #000; }

/* Tortas chicas de las particiones dentro de Datos */
.torta.mini { gap: 10px; }
.torta.mini svg { width: 64px; height: 64px; }
.torta.mini ul { font-size: 12.5px; gap: 2px; }
.datos .particiones { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px; margin: -4px; }

/* Tortas dentro de Datos */
.datos-tortas { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.datos-tortas > .ayuda { grid-column: 1 / -1; margin: 0; }
.datos a.particiones { color: inherit; display: inline-block; }
.datos a.particiones:hover { color: var(--accent); text-decoration: none; }

/* Íconos de la consola y menú flotante del 💿 */
.iconos .sep-v { width: 1px; background: var(--border); margin: 4px 2px; }
.menu-ancla { position: relative; display: inline-flex; }
.menu-flotante {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 280px; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.menu-flotante .menu-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 6px 8px 2px; }
.menu-flotante .menu-estado { padding: 4px 8px 6px; font-size: 13px; }
.menu-flotante .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu-flotante button { justify-content: flex-start; height: auto; padding: 7px 8px; border: 0; background: none; width: 100%;
  font-size: 13.5px; text-align: left; white-space: normal; }
.menu-flotante button .tenue { margin-left: auto; font-size: 12px; white-space: nowrap; }
.menu-flotante button:hover:not(:disabled) { background: var(--surface-2); }
.menu-flotante button.activo { background: var(--accent-soft); color: var(--accent); }
.datos-tortas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.datos-tortas .caja-torta { padding: 8px 10px; }
.datos-tortas .torta { flex-direction: column; align-items: center; gap: 8px; }
.datos-tortas .torta svg { width: 92px; height: 92px; }
.datos-tortas .torta ul { font-size: 12.5px; gap: 3px; align-self: stretch; }
@media (max-width: 1100px) { .datos-tortas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Íconos de encendido (SVG a color, mismo tamaño que el 💿) */
.ico-svg { width: 22px; height: 22px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico-svg .relleno { fill: currentColor; stroke: none; }
.ico-svg.verde { stroke: #22c55e; color: #22c55e; }
.ico-svg.ambar { stroke: #f59e0b; color: #f59e0b; }
.ico-svg.celeste { stroke: #0ea5e9; color: #0ea5e9; }
.ico-svg.rojo { stroke: #ef4444; color: #ef4444; }
button.icono:disabled .ico-svg { filter: grayscale(1); opacity: .6; }
button.icono:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-2); }
button.icono.peligro:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.datos .particiones.tocable { display: inline-block; padding: 4px 8px; margin: -4px -8px; }

/* Detalle del servidor (opción B): Datos | Tortas 2×2 | Consola, las tres de la misma altura */
.detalle3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 2fr); gap: 16px;
  align-items: stretch; margin-bottom: 16px; }
.detalle3 > .panel { margin-bottom: 0; display: flex; flex-direction: column; }
.col-tortas .datos-tortas { margin: 0; padding: 0; border: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center; gap: 10px; }
.col-tortas .datos-tortas .torta svg { width: 78px; height: 78px; }
.col-tortas .datos-tortas .caja-torta h3 { font-size: 11.5px; margin-bottom: 4px; }
.col-tortas .datos-tortas .torta ul { font-size: 12px; }
.col-consola .vista-previa { flex: 1; aspect-ratio: auto; min-height: 180px; }
@media (max-width: 1250px) {
  .detalle3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detalle3 .col-tortas { grid-column: 1 / -1; order: 3; }
  .col-tortas .datos-tortas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .detalle3 { grid-template-columns: minmax(0, 1fr); }
  .col-tortas .datos-tortas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Diseño A: Datos | Consola arriba (misma altura) y las 4 tortas en una fila propia debajo */
.detalle3.diseno-a { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.detalle3.diseno-a .col-tortas { grid-column: 1 / -1; order: 3; }
.detalle3.diseno-a .col-tortas .datos-tortas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.detalle3.diseno-a .col-tortas .torta { flex-direction: row; }
.detalle3.diseno-a .col-tortas .torta svg { width: 92px; height: 92px; }
@media (max-width: 1100px) { .detalle3.diseno-a .col-tortas .datos-tortas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .detalle3.diseno-a { grid-template-columns: minmax(0, 1fr); } }

/* Detalle del servidor: Datos (con las 4 tortas) | Consola + Snapshots, las dos columnas con la misma altura */
.detalle2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch;
  margin-bottom: 16px; }
.detalle2 > .panel { margin-bottom: 0; }
.col-derecha { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-derecha > .panel { margin-bottom: 0; }
.col-snaps { flex: 1; display: flex; flex-direction: column; }
.detalle2 .datos-tortas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .detalle2 .datos-tortas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .detalle2 { grid-template-columns: minmax(0, 1fr); } }

/* Snapshots compactos */
.snaps-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.snaps-cabeza h2 { margin: 0; }
ul.snaps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1;
  overflow-y: auto; max-height: 320px; }
ul.snaps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; }
ul.snaps li.actual { border-color: var(--ok); }
.snap-texto { flex: 1; min-width: 0; }
.snap-nombre { font-weight: 500; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; overflow: hidden; }
button.icono.chico-ico { width: 32px; height: 32px; font-size: 15px; flex: none; }
.vacio.chico { padding: 14px 8px; }

/* Vista previa sin bandas: proporción de la pantalla del servidor (la pone el JS), fondo negro */
.col-consola .vista-previa { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
.vista-previa .vp-pantalla > div { background: #000 !important; }
/* Snapshots más compactos */
.col-snaps { min-height: 0; padding: 14px 16px; }
.col-snaps h2 { font-size: 15px; }
.col-snaps .snaps-cabeza { margin-bottom: 6px; }
.col-snaps button.icono { width: 32px; height: 32px; font-size: 15px; }
ul.snaps { gap: 4px; max-height: 170px; margin-bottom: 6px; }
ul.snaps li { padding: 5px 8px; gap: 8px; }
ul.snaps .snap-nombre { font-size: 13px; }
ul.snaps .ayuda { font-size: 11.5px; margin-top: 1px; }
ul.snaps .chip { font-size: 11px; padding: 0 6px; }
button.icono.chico-ico { width: 28px; height: 28px; }
button.icono.chico-ico .ico-svg { width: 17px; height: 17px; }
.col-snaps > .ayuda { font-size: 11.5px; }
/* Snapshots: entran 10 sin scroll (renglones finos); si hay más, scroll */
ul.snaps { max-height: 440px; gap: 3px; }
ul.snaps li { padding: 4px 6px 4px 8px; gap: 4px; }
ul.snaps .snap-nombre { font-size: 12.5px; line-height: 1.3; }
ul.snaps .ayuda { font-size: 11px; line-height: 1.3; margin-top: 0; }
button.icono.chico-ico { width: 26px; height: 26px; }
button.icono.chico-ico .ico-svg { width: 15px; height: 15px; }

/* ===================================================================== consumo (js/consumo.js) */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifras .total .tenue { font-size: 12.5px; margin-top: 2px; }
.cifras .total .barra-uso { margin-top: 6px; }
@media (max-width: 1000px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cifras { grid-template-columns: 1fr; } }
.tabla td small.parte { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }

/* ===================================================================== sugerencias, problemas y buzón (js/mensajes.js) */
.lateral .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.lateral nav a { position: relative; }
@media (max-width: 899px) { .lateral .contador { position: absolute; top: 2px; right: 2px; margin: 0; } }
h2.sub { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.form-mensaje button.primario { margin-top: 14px; }
.adjuntos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.adjuntos .ayuda { margin: 0; }
.boton-archivo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin: 0; border-radius: 8px;
  border: 1px dashed var(--border-strong); color: var(--text); font-size: 13px; cursor: pointer; }
.boton-archivo:hover { background: var(--surface-2); }
.adjuntos-miniaturas { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.adjuntos-miniaturas:empty { display: none; }
.miniatura { position: relative; display: block; width: 96px; height: 72px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  font-size: 12px; background: rgb(0 0 0 / 0.6); color: #fff; border: 0; }
.imagen-grande { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 8px; }
.mensaje { margin-bottom: 12px; }
.mensaje-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.mensaje-texto { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 8px; }
.mensaje-respuesta { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 8px 12px;
  border-radius: 0 8px 8px 0; white-space: pre-wrap; margin-top: 8px; }
.mensaje-respuesta small { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.botones.izq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.novedades h2 { font-size: 20px; margin: 4px 0 10px; }
.novedades h3 { font-size: 16px; margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.novedades h3:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
.novedades h4 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.novedades ul { margin: 4px 0; padding-left: 20px; }
.novedades li { margin: 3px 0; }
.modal .novedades { max-height: 60vh; }

/* ===================================================================== ficha del cliente (js/ficha.js, js/mapa.js) */
.ficha-grilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 28px; }
@media (max-width: 860px) { .ficha-grilla { grid-template-columns: minmax(0, 1fr); } }
.ficha-grilla h3, .form-ficha h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
  margin: 18px 0 8px; }
.ficha-grilla > div > h3:first-child, .form-ficha > h3:first-child { margin-top: 0; }
.dato { margin-bottom: 8px; }
.dato small { display: block; color: var(--muted); font-size: 11.5px; }
.pre { white-space: pre-wrap; }
.contacto { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.contacto .medios { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.aviso-ficha { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.obligatorio { color: var(--danger); font-weight: 700; }
.form-ficha .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-ficha .campos label { margin-top: 8px; }
@media (max-width: 640px) { .form-ficha .campos { grid-template-columns: minmax(0, 1fr); } }
/* Grilla de 12 columnas: cada campo ocupa .cN columnas; .salto fuerza una línea nueva */
.form-ficha .campos12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; }
.form-ficha .campos12 label { margin-top: 6px; }
.campos12 .c2 { grid-column: span 2; }
.campos12 .c3 { grid-column: span 3; }
.campos12 .c4 { grid-column: span 4; }
.campos12 .c5 { grid-column: span 5; }
.campos12 .c6 { grid-column: span 6; }
.campos12 .c12 { grid-column: span 12; }
.campos12 .salto { grid-column: 1 / -1; height: 0; }
@media (max-width: 760px) { .campos12 > div { grid-column: 1 / -1 !important; } }
.form-ficha .mapa { margin-bottom: 4px; }
.form-ficha .contactos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
/* Cada contacto en dos líneas: rol, nombre, cargo y quitar / país, característica, número, correo y horario.
   El correo se queda con lo que sobra. */
.fila-contacto { display: grid; grid-template-columns: 104px 64px 118px minmax(0, 1fr) 110px 132px 30px; gap: 6px;
  align-items: center;
  grid-template-areas: "rol rol nombre nombre cargo cargo cargo" "pais area numero correo correo horario horario";
  padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.fila-contacto [name=rol] { grid-area: rol; }
.fila-contacto [name=nombre] { grid-area: nombre; }
.fila-contacto [name=cargo] { grid-area: cargo; margin-right: 36px; }
.fila-contacto .celular { display: contents; }
.fila-contacto [name=pais] { grid-area: pais; padding-left: 6px; padding-right: 2px; }
.fila-contacto [name=area] { grid-area: area; text-align: center; }
.fila-contacto [name=numero] { grid-area: numero; }
.fila-contacto [name=correo] { grid-area: correo; }
.fila-contacto .boton-horario { grid-area: horario; }
.fila-contacto [data-quitar] { grid-area: cargo; justify-self: end; width: 30px; padding: 0; }
.boton-horario { justify-content: flex-start; min-width: 0; height: 36px; font-weight: 400; overflow: hidden; }
.boton-horario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .fila-contacto { grid-template-columns: 104px 64px minmax(0, 1fr);
    grid-template-areas: "rol rol rol" "nombre nombre nombre" "cargo cargo cargo" "pais area numero" "correo correo correo"
      "horario horario horario"; }
}
.dias-horario { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.dia-horario { display: grid; grid-template-columns: 80px 1fr auto 1fr; gap: 8px; align-items: center; }
.dia-horario label { margin: 0; }
.dia-horario input[type=time] { width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 8px; }
.dia-horario.apagado input[type=time], .dia-horario.apagado span { opacity: .35; }
.acciones-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
/* isolation: las capas de Leaflet (z-index 400 a 1000) quedan adentro del mapa y no tapan diálogos ni el menú */
.mapa { isolation: isolate; height: 280px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; background: var(--surface-2); }
.mapa.chico { height: 190px; margin: 6px 0 4px; }
.mapa-error { display: grid; place-items: center; }
.pin-mapa span { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--brand-sky); border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.4); }
.leaflet-container a { color: var(--accent); }
.tarjeta.ancha.bienvenida { width: min(980px, 100%); }
.tarjeta.bienvenida .form-ficha button.primario { width: auto; }
button.link { height: auto; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 400; }
button.link:hover:not(:disabled) { background: none; text-decoration: underline; }
.centrado { text-align: center; }

/* ===================================================================== solicitudes de recursos (js/solicitudes.js) */
.opciones-solicitud { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.panel.opcion { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; margin: 0;
  transition: border-color .15s, transform .15s; }
a.panel.opcion:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.panel.opcion.deshabilitada { opacity: .55; }
.ico-grande { font-size: 30px; line-height: 1; }
.form-solicitud h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 20px 0 6px; }
.form-solicitud > h3:first-child { margin-top: 0; }
.form-solicitud .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 640px) { .form-solicitud .campos { grid-template-columns: minmax(0, 1fr); } }
input[type=number] { width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; }
.tabla.compacta { width: auto; min-width: 280px; margin: 6px 0; }
.tabla.compacta th { text-align: left; font-weight: 500; color: var(--muted); padding-right: 16px; }
.tabla.cambios input { width: 120px; }
.solicitud { margin-bottom: 12px; }
.sin-recursos { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ayuda.bien { color: var(--ok); }
.ayuda.mal { color: var(--danger); }