/* ============================================================================
   Tema compartido de Orbitix (v1.3.0) — un solo archivo: variables + componentes.
   Oscuro, IBM Plex Sans / IBM Plex Mono servidas desde la propia instancia (sin Google Fonts).
   Uso: <link rel="stylesheet" href="/tema-orbitix.css"> y las clases .o-* (o solo las variables --o-*).
   La marca de la instancia (logo y nombre) no vive aquí: la pantalla pone su logo con el mecanismo de marca de siempre.
   ========================================================================== */

/* ---------- fuentes locales ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ---------- variables ---------- */
:root {
  --o-fondo: #0B1020;
  --o-tarjeta: #131A2B;
  --o-hundido: #0E1526;
  --o-borde: #1F2940;
  --o-borde-fuerte: #2A3450;
  --o-texto: #E6EAF2;
  --o-texto-2: #9AA6BD;
  --o-enlace: #7CC0FF;
  --o-accion: #2F7FD8;
  --o-accion-hover: #3B8DE6;
  --o-verde: #34D399;
  --o-ambar: #FBBF24;
  --o-rojo: #F87171;
  --o-peligro-fondo: #2A1219;
  --o-peligro-borde: #5B2330;
  --o-blanco: #FFFFFF;                           /* texto sobre un color sólido (botones, chips) */
  --o-violeta: #A78BFA;
  --o-violeta-fondo: rgba(167, 139, 250, .14);
  --o-accion-fondo: rgba(47, 127, 216, .16);
  --o-velo: rgba(0, 0, 0, .6);                    /* fondo oscurecido detrás de un modal */
  --o-verde-fondo: rgba(52, 211, 153, .12);
  --o-ambar-fondo: rgba(251, 191, 36, .12);
  --o-rojo-fondo: rgba(248, 113, 113, .12);
  --o-r-tarjeta: 16px;
  --o-r-cuadro: 12px;
  --o-r-boton: 10px;
  --o-alto-boton: 42px;
  --o-fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --o-mono: 'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;
  /* sombras: escala chica/mediana/grande + la de tarjeta de siempre (--o-sombra, sin cambios, para no
     romper a quien ya la use) y un anillo de foco/selección sin blur, para estados "activo" tipo .conteo.activo. */
  --o-sombra-chica: 0 1px 2px rgba(0, 0, 0, .18);
  --o-sombra-media: 0 4px 12px rgba(0, 0, 0, .22);
  --o-sombra-grande: 0 12px 32px rgba(0, 0, 0, .32);
  --o-sombra: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px rgba(0, 0, 0, .25);
  --o-anillo: 0 0 0 2px rgba(47, 127, 216, .35);
  /* espaciado: escala de 4px (misma unidad que ya se usaba a ojo en gap/padding por todo el archivo). */
  --o-esp-1: 4px;
  --o-esp-2: 8px;
  --o-esp-3: 12px;
  --o-esp-4: 16px;
  --o-esp-5: 20px;
  --o-esp-6: 24px;
}

/* ---------- base ---------- */
.o-tema, .o-tema body { margin: 0; }
body.o-tema { background: var(--o-fondo); color: var(--o-texto); font-family: var(--o-fuente); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.o-tema *, .o-tema *::before, .o-tema *::after { box-sizing: border-box; }
.o-tema a { color: var(--o-enlace); text-decoration: none; }
.o-tema a:hover { text-decoration: underline; }
.o-tema h1, .o-tema h2, .o-tema h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.o-tema h1 { font-size: 22px; } .o-tema h2 { font-size: 17px; } .o-tema h3 { font-size: 14px; color: var(--o-texto-2); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.o-tema :focus-visible { outline: 2px solid var(--o-enlace); outline-offset: 2px; }
.o-num, .o-ip, .o-tema code, .o-tema .o-mono { font-family: var(--o-mono); font-variant-numeric: tabular-nums; }
.o-suave { color: var(--o-texto-2); }
.o-chico { font-size: 12.5px; }
.o-oculto { display: none !important; }

/* ---------- estructura ---------- */
.o-barra { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--o-tarjeta); border-bottom: 1px solid var(--o-borde); position: sticky; top: 0; z-index: 20; }
.o-barra .header-logo, .o-barra .marca-logo { font-weight: 600; font-size: 18px; letter-spacing: .02em; color: var(--o-texto); max-height: 34px; }
.o-barra .marca-logo { height: 36px; width: auto; background: #fff; padding: 3px 8px; border-radius: 8px; object-fit: contain; }   /* el logo de la instancia (imagen con fondo claro) se respeta tal cual, sobre una cinta blanca */
.o-barra .o-espacio { flex: 1; }
.o-contenedor { max-width: 1320px; margin: 0 auto; padding: 20px; }
.o-fila { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.o-sep { height: 1px; background: var(--o-borde); border: 0; margin: 14px 0; }
.o-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.o-cols--inv { grid-template-columns: 340px minmax(0, 1fr); }
@media (max-width: 980px) { .o-cols, .o-cols--inv { grid-template-columns: minmax(0, 1fr); } }

/* ---------- tarjetas ---------- */
.o-card { background: var(--o-tarjeta); border: 1px solid var(--o-borde); border-radius: var(--o-r-tarjeta); padding: 18px; box-shadow: var(--o-sombra); }
.o-card--click { cursor: pointer; transition: border-color .15s, transform .15s; }
.o-card--click:hover { border-color: var(--o-borde-fuerte); transform: translateY(-1px); }
.o-card--click:focus-visible { outline: 2px solid var(--o-enlace); }
.o-hundido { background: var(--o-hundido); border: 1px solid var(--o-borde); border-radius: var(--o-r-cuadro); padding: 12px 14px; }
.o-card__titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.o-peligro { background: var(--o-peligro-fondo); border: 1px solid var(--o-peligro-borde); border-radius: var(--o-r-cuadro); padding: 12px 14px; }

/* ---------- indicadores ---------- */
.o-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .o-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o-kpi { background: var(--o-tarjeta); border: 1px solid var(--o-borde); border-radius: var(--o-r-cuadro); padding: 14px 16px; }
.o-kpi__etiqueta { font-size: 12.5px; color: var(--o-texto-2); }
.o-kpi__valor { font-family: var(--o-mono); font-size: 28px; font-weight: 500; margin-top: 4px; }
.o-kpi--rojo .o-kpi__valor { color: var(--o-rojo); } .o-kpi--verde .o-kpi__valor { color: var(--o-verde); } .o-kpi--ambar .o-kpi__valor { color: var(--o-ambar); }

/* ---------- botones ---------- */
.o-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--o-alto-boton); padding: 0 16px; border-radius: var(--o-r-boton); border: 1px solid transparent; background: var(--o-accion); color: #fff; font: 500 14px var(--o-fuente); cursor: pointer; text-decoration: none; }
.o-btn:hover { background: var(--o-accion-hover); text-decoration: none; }
.o-btn--sec { background: transparent; border-color: var(--o-borde-fuerte); color: var(--o-texto); }
.o-btn--sec:hover { background: var(--o-hundido); }
.o-btn--peligro { background: var(--o-peligro-fondo); border-color: var(--o-peligro-borde); color: var(--o-rojo); }
.o-btn--peligro:hover { background: #351720; }
.o-btn[disabled], .o-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; pointer-events: auto; }
.o-btn[disabled]:hover { background: inherit; }
.o-btn--sec[disabled]:hover { background: transparent; }
.o-btn--peligro[disabled]:hover { background: var(--o-peligro-fondo); }
.o-btn--bloque { width: 100%; }

/* ---------- formularios ---------- */
.o-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.o-campo label { font-size: 13px; color: var(--o-texto-2); }
.o-input, .o-select { min-height: var(--o-alto-boton); background: var(--o-hundido); border: 1px solid var(--o-borde-fuerte); border-radius: var(--o-r-boton); color: var(--o-texto); padding: 0 12px; font: 400 15px var(--o-fuente); width: 100%; }
.o-input.o-mono, .o-input--ip { font-family: var(--o-mono); }
.o-input::placeholder { color: #66728C; }
.o-check { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.o-check input { width: 18px; height: 18px; accent-color: var(--o-accion); }

/* ---------- píldoras y barras ---------- */
.o-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--o-hundido); border: 1px solid var(--o-borde-fuerte); color: var(--o-texto-2); white-space: nowrap; }
.o-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.o-pill--verde { color: var(--o-verde); background: var(--o-verde-fondo); border-color: rgba(52, 211, 153, .35); }
.o-pill--ambar { color: var(--o-ambar); background: var(--o-ambar-fondo); border-color: rgba(251, 191, 36, .35); }
.o-pill--rojo { color: var(--o-rojo); background: var(--o-rojo-fondo); border-color: rgba(248, 113, 113, .35); }
.o-pill--sin-punto::before { display: none; }
.o-bar { height: 8px; border-radius: 999px; background: var(--o-hundido); border: 1px solid var(--o-borde); overflow: hidden; }
.o-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--o-verde); }
.o-bar--ambar > i { background: var(--o-ambar); } .o-bar--rojo > i { background: var(--o-rojo); }

/* ---------- puertos PON ---------- */
.o-pons { display: grid; grid-template-columns: repeat(auto-fill, minmax(11px, 1fr)); gap: 4px; }
.o-pons--chico { grid-template-columns: repeat(auto-fill, 14px); }
.o-pon-punto { width: 100%; aspect-ratio: 1; min-width: 11px; border-radius: 3px; background: #26304A; }
.o-pon-punto.verde, .o-pon.verde { --o-c: var(--o-verde); } .o-pon-punto.ambar, .o-pon.ambar { --o-c: var(--o-ambar); } .o-pon-punto.rojo, .o-pon.rojo { --o-c: var(--o-rojo); } .o-pon-punto.vacio, .o-pon.vacio { --o-c: #3A4664; }
.o-pon-punto { background: var(--o-c, #26304A); }
.o-pon-punto.vacio { opacity: .35; }
.o-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .o-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o-pon { background: var(--o-hundido); border: 1px solid var(--o-borde); border-left: 4px solid var(--o-c, #3A4664); border-radius: var(--o-r-cuadro); padding: 10px 12px; text-align: left; color: inherit; font: inherit; cursor: pointer; min-height: 88px; }
.o-pon:hover { border-color: var(--o-borde-fuerte); border-left-color: var(--o-c, #3A4664); }
.o-pon[aria-pressed="true"] { outline: 2px solid var(--o-enlace); outline-offset: 0; }
.o-pon__titulo { font-weight: 600; font-size: 14px; }
.o-pon__cuenta { font-family: var(--o-mono); font-size: 13px; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.o-pon__cuenta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--o-c, #3A4664); }
.o-pon__barrios { font-size: 12px; color: var(--o-texto-2); margin-top: 6px; display: flex; gap: 5px; align-items: flex-start; }
.o-pon__barrios svg { flex: none; width: 13px; height: 13px; margin-top: 1px; }

/* ---------- tablas y listas ---------- */
.o-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.o-tabla th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--o-texto-2); padding: 8px 10px; border-bottom: 1px solid var(--o-borde-fuerte); }
.o-tabla td { padding: 10px; border-bottom: 1px solid var(--o-borde); vertical-align: top; }
.o-tabla tr:last-child td { border-bottom: 0; }
.o-envuelve-tabla { overflow-x: auto; }
.o-evento { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--o-borde); font-size: 14px; }
.o-evento:last-child { border-bottom: 0; }
.o-evento__punto { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--o-ambar); }
.o-evento--alta .o-evento__punto { background: var(--o-rojo); } .o-evento--baja .o-evento__punto { background: var(--o-texto-2); }

/* ---------- asistente (pasos) ---------- */
.o-pasos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.o-paso { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--o-hundido); border: 1px solid var(--o-borde); color: var(--o-texto-2); font-size: 13px; }
.o-paso b { font-family: var(--o-mono); font-weight: 500; }
.o-paso--activo { color: var(--o-texto); border-color: var(--o-accion); background: rgba(47, 127, 216, .14); }
.o-paso--hecho { color: var(--o-verde); }
.o-check-ok { color: var(--o-verde); } .o-check-mal { color: var(--o-rojo); } .o-check-aviso { color: var(--o-ambar); }

/* ---------- contraste con la paleta de cada instalación (solo color) ----------
   Los botones que la marca pinta con --brand-oscuro o --brand-acento deben verse sobre el tema oscuro con CUALQUIER paleta:
   el oscuro se aclara un poco (y lleva un aro fino), el dorado/naranja lleva texto oscuro en vez de blanco. */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  [style*="background:var(--brand-oscuro)"] {
    background: color-mix(in srgb, var(--brand-oscuro) 80%, white) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-oscuro) 45%, white);
  }
  .sidebar .nav-sep, .sidebar .s-sub { color: color-mix(in srgb, var(--brand-oscuro) 15%, white) !important; }
  .sidebar .nav-item:not(.active):not(:hover) { color: color-mix(in srgb, var(--brand-oscuro) 8%, white) !important; }
}
[style*="background:var(--brand-acento)"] { color: var(--o-fondo) !important; }
/* el logotipo de imagen de la instalación puede traer letras oscuras: sobre tarjetas oscuras va con fondo claro */
.marca-logo[src*="/marca/logo/transparente"] { background: var(--o-blanco); border-radius: 10px; box-shadow: 0 0 0 8px var(--o-blanco); }

/* texto oscuro sobre los rellenos claros del tema (menta, salmón, celeste, lila, ámbar, gris): el blanco no se lee; alcanza también lo que el JavaScript pinta en vivo */
[style*="background:var(--o-verde)"],
[style*="background: var(--o-verde)"],
[style*="background:var(--o-rojo)"],
[style*="background: var(--o-rojo)"],
[style*="background:var(--o-enlace)"],
[style*="background: var(--o-enlace)"],
[style*="background:var(--o-violeta)"],
[style*="background: var(--o-violeta)"],
[style*="background:var(--o-ambar)"],
[style*="background: var(--o-ambar)"],
[style*="background:var(--o-texto-2)"],
[style*="background: var(--o-texto-2)"] { color: var(--o-fondo) !important; }