/* ==========================================================================
   components.css — piezas reutilizables de UI: campanita de notificaciones,
   tablas, selector de columnas, insignias/pills, métricas, toolbars, mensajes,
   login, migas de pan del detalle de ONU y la tarjeta de aprovisionamiento WAN.
   ========================================================================== */

/* --- campanita de notificaciones (topbar) --- */
.notification-wrapper { position:relative; margin-left:auto; }
.glass-bell-btn {
  position:relative; width:40px; height:40px; padding:0; border-radius:12px; font-size:1.05rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--glass-bg); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
}
.glass-bell-btn:hover { border-color:rgba(56,189,248,.4); }
.bell-badge {
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#ef4444; color:#fff; font-size:.64rem; font-weight:700;
  border:2px solid #0f172a; box-shadow:0 0 10px rgba(239,68,68,.75);
}
.glass-dropdown {
  position:absolute; top:calc(100% + 10px); right:0; width:328px; max-width:calc(100vw - 40px);
  z-index:1000;
  background:rgba(15,23,42,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 50px -12px rgba(0,0,0,.65);
}
.dropdown-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:650; font-size:.86rem;
}
.dropdown-header button { padding:4px 10px; font-size:.72rem; }
.dropdown-body { max-height:340px; overflow-y:auto; padding:6px; }
.notif-item { padding:10px 12px; border-radius:10px; }
.notif-item + .notif-item { margin-top:2px; }
.notif-item:hover { background:rgba(255,255,255,.04); }
.notif-item.unread { border-left:3px solid var(--accent); background:rgba(56,189,248,.06); }
/* aviso de actualización de versión: destacado ámbar por encima del resto */
.notif-item.notif-update { border-left:3px solid #fbbf24; background:rgba(251,191,36,.12); }
.notif-item.notif-update b { color:#fde68a; }
.notif-tag {
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#0f172a; background:#fbbf24; vertical-align:1px;
}
.notif-item b { display:block; font-size:.82rem; margin-bottom:3px; }
.notif-item p { margin:0; font-size:.76rem; color:var(--muted); line-height:1.45; }
.notif-item time { display:block; margin-top:6px; font-size:.68rem; color:var(--muted); opacity:.75; }
.notif-empty { padding:22px 14px; text-align:center; color:var(--muted); font-size:.8rem; }

/* --- tablas --- */
.table-wrap { overflow:auto; margin-bottom:8px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.06); }
th { color:var(--muted); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; background:rgba(255,255,255,.02); }
tbody tr:hover { background:rgba(255,255,255,.03); }
tr:last-child td { border-bottom:none; }

/* --- tabla compacta (listado de ONUs) --- */
.table-sm th, .table-sm td { padding:7px 10px; white-space:nowrap; }
.table-sm td.act { display:flex; gap:4px; align-items:center; }
button.btn-icon {
  padding:4px 8px; font-size:.75rem; line-height:1.1; border-radius:8px;
}

/* --- selector de columnas de la tabla de ONUs --- */
/* La barra de filtros de "Dispositivos" y su selector se elevan sobre la tabla:
   `.glass-card` crea un stacking context propio (backdrop-filter), así que sin
   esto el menú desplegable quedaría pintado DEBAJO de la tarjeta de la tabla. */
#devices-list-view .toolbar { position:relative; z-index:1050; overflow:visible; }
.col-picker { position:relative; display:inline-block; }
.col-picker-menu {
  position:absolute; z-index:1050; top:calc(100% + 6px); left:0; right:auto; min-width:220px;
  padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:#0b1120; box-shadow:0 18px 48px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:2px; max-height:60vh; overflow:auto;
}
.col-picker-menu label {
  display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px;
  font-size:.82rem; cursor:pointer; white-space:nowrap;
}
.col-picker-menu label:hover { background:rgba(255,255,255,.06); }
.col-picker-menu input { width:auto; padding:0; margin:0; }
.col-picker-menu .cp-reset {
  margin-top:4px; padding:5px 8px; font-size:.75rem; text-align:center;
}

/* Barra de búsqueda de la flota: crece para ocupar el espacio libre del toolbar. */
#devSearch { flex:1 1 260px; min-width:200px; max-width:440px; }
#devSearch::-webkit-search-cancel-button { cursor:pointer; }

/* --- insignias con resplandor --- */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:600; border:1px solid rgba(255,255,255,.15); }
.pill.ONLINE, .pill.ACTIVE, .pill.admin { color:#bbf7d0; border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.12); box-shadow:0 0 12px rgba(74,222,128,.3); }
.pill.OFFLINE, .pill.SUSPENDED { color:#fecaca; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.12); box-shadow:0 0 12px rgba(248,113,113,.3); }
.pill.UNPROVISIONED, .pill.operador { color:#fde68a; border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.12); box-shadow:0 0 12px rgba(251,191,36,.25); }

.hb { display:inline-block; padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:600; border:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.hb.eth { color:#7dd3fc; border-color:rgba(125,211,252,.5); box-shadow:0 0 10px rgba(125,211,252,.22); }
.hb.w24 { color:#86efac; border-color:rgba(74,222,128,.5); box-shadow:0 0 10px rgba(74,222,128,.22); }
.hb.w5 { color:#d8b4fe; border-color:rgba(192,132,252,.5); box-shadow:0 0 10px rgba(192,132,252,.22); }
.hb.wifi, .hb.unk { color:var(--muted); }

/* --- métricas (neumorfismo) --- */
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:14px 0; }
.metric {
  padding:14px 16px; border-radius:14px;
  background:linear-gradient(145deg, rgba(15,23,42,.6), rgba(30,41,59,.45));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:-6px -6px 14px rgba(255,255,255,.02), 6px 6px 16px rgba(0,0,0,.35);
}
.metric b { display:block; font-size:1.35rem; font-weight:700; }
.metric span { color:var(--muted); font-size:.78rem; }

.row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin:12px 0; }
.row > label { display:flex; flex-direction:column; gap:5px; font-size:.8rem; color:var(--muted); }
.band-card { border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px 16px; margin:12px 0; background:rgba(2,6,23,.4); }
.band-card h4 { margin:0 0 8px; font-size:.95rem; }

/* --- filtros / toolbars --- */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:12px 14px; margin-bottom:16px; }
.toolbar:not(.glass-card) { background:rgba(30,41,59,.5); border:1px solid rgba(255,255,255,.06); border-radius:14px; }

/* --- barra de paginación (pie de tabla) --- */
.pager { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 14px; margin-bottom:16px; }
.pager-btns { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.pager-btns button { padding:5px 10px; font-size:.78rem; border-radius:8px; min-width:34px; }
.pager-btns button.active { background:var(--accent); color:#0f172a; font-weight:700; border-color:transparent; }
.pager-btns button:disabled { opacity:.4; cursor:not-allowed; }
.pager-btns .pager-gap { color:var(--muted); padding:0 4px; }
#customersSearchInput { flex:1 1 260px; min-width:200px; max-width:440px; }

.msg { padding:11px 14px; border-radius:12px; margin:12px 0; border:1px solid; backdrop-filter:blur(6px); }
.msg.ok { border-color:rgba(74,222,128,.4); color:#bbf7d0; background:rgba(74,222,128,.08); }
.msg.err { border-color:rgba(248,113,113,.4); color:#fecaca; background:rgba(248,113,113,.08); }
.msg.warn { border-color:rgba(251,191,36,.45); color:#fde68a; background:rgba(251,191,36,.1); }

/* Campo destacado que revela una API Key en claro (una sola vez): tipografía
   monoespaciada + borde ámbar, para que el valor a copiar salte a la vista. */
.key-reveal-input {
  flex:1; min-width:0; font-family:ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  border:1px solid rgba(251,191,36,.5); background:rgba(251,191,36,.08); color:#fde68a;
}
.muted { color:var(--muted); }
a.link { color:var(--accent); cursor:pointer; text-decoration:none; }
a.link:hover { text-decoration:underline; }
a.ip-link { color:var(--accent); text-decoration:none; font-weight:600; border-bottom:1px dashed rgba(56,189,248,.5); }
a.ip-link:hover { border-bottom-style:solid; }
a.ip-link .ext-ico { font-size:.72em; opacity:.75; margin-left:2px; }
h2 { font-size:1rem; margin:20px 0 10px; }
section > .toolbar:first-child, section > h2:first-child, section > p:first-child { margin-top:0; }

/* --- navegación SPA a detalle de ONU (migas de pan) --- */
.detail-crumbs { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.btn-back {
  display:inline-flex; align-items:center; gap:7px; font-weight:600;
  border-color:rgba(56,189,248,.35); color:#e0f2fe; background:rgba(56,189,248,.08);
}
.btn-back:hover { border-color:var(--accent); box-shadow:0 0 14px rgba(56,189,248,.3); }
.detail-crumbs .crumb-sep { color:var(--muted); opacity:.7; }
.detail-crumbs .crumb-current { color:var(--muted); font-size:.86rem; }
tbody tr.row-link { cursor:pointer; }
tbody tr.row-link:hover { background:rgba(56,189,248,.07); }

/* --- login --- */
#loginView { max-width:380px; margin:13vh auto; padding:28px; }
#loginView h1 { margin:0 0 4px; font-size:1.3rem; }
#loginView label { display:block; margin-top:14px; font-size:.85rem; color:var(--muted); }
#loginView input { width:100%; margin-top:5px; }

/* --- Aprovisionamiento WAN --- */
.wan-prov .row { margin:9px 0; }
.wan-prov input, .wan-prov select { padding:7px 9px; }
.wan-prov .prov-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:600;
  color:#bbf7d0; border:1px solid rgba(74,222,128,.5); background:rgba(74,222,128,.12); box-shadow:0 0 12px rgba(74,222,128,.25); }
.wan-prov .btn-wan { background:linear-gradient(135deg, rgba(56,189,248,.9), rgba(129,140,248,.9)); color:#04222f;
  border:1px solid rgba(255,255,255,.25); font-weight:700; box-shadow:0 8px 20px rgba(56,189,248,.3); }

/* --- botón glass genérico --- */
.glass-btn { background:linear-gradient(135deg, rgba(56,189,248,.9), rgba(129,140,248,.9)); color:#04222f;
  border:1px solid rgba(255,255,255,.25); font-weight:700; white-space:nowrap; box-shadow:0 6px 16px rgba(56,189,248,.3); }
.glass-btn:disabled { opacity:.7; cursor:progress; }
.model-scan-row { margin:10px 0 4px; padding:10px 12px; border-radius:12px;
  background:rgba(129,140,248,.08); border:1px solid rgba(129,140,248,.25); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.model-scan-row label { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--muted); }

/* --- Ajustes › Integraciones / Telegram (tarjetas de configuración) --- */
.settings-card { padding:18px 20px; margin-top:16px; }
.settings-card:first-of-type { margin-top:0; }
.settings-card-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.settings-card-head h2 { margin:0; }
.settings-card > p { margin:4px 0 12px; }
.settings-events { display:flex; flex-direction:column; gap:10px; }
.event-toggle {
  display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:#e2e8f0;
  cursor:pointer;
}
.event-toggle input { width:auto; padding:0; margin:0; }
.event-toggle:has(input:disabled) { cursor:not-allowed; color:var(--muted); }
.settings-card input:disabled, .settings-card button:disabled {
  opacity:.55; cursor:not-allowed;
}

/* --- vistas placeholder --- */
.placeholder { text-align:center; padding:56px 30px; margin-top:18px; }
.placeholder .ph-icon { width:54px; height:54px; margin:0 auto 16px; color:var(--accent); opacity:.7; }
.placeholder h2 { font-size:1.2rem; margin:0 0 8px; }
.placeholder p { color:var(--muted); max-width:460px; margin:0 auto; }
.placeholder .nav-badge { display:inline-block; margin-top:16px; font-size:.72rem; }