/* ============================================================
   Manager Panel — Tema 2026
   Se carga DESPUÉS de manager_main.css y solo redefine apariencia.
   Ninguna clase ni id cambia: manager_main.js sigue funcionando igual.
   ============================================================ */

/* === Tokens: misma familia VSCode, más contraste y profundidad === */
:root,
[data-theme="dark"] {
  --mgr-bg:         #191919;
  --mgr-surface:    #202022;
  --mgr-surface-hi: #2a2a2e;
  --mgr-raised:     #252528;
  --mgr-border:     #323238;
  --mgr-border-hi:  #3e3e46;
  --mgr-text:       #d6d6d6;
  --mgr-text-hi:    #f2f2f2;
  --mgr-muted:      #9a9aa2;
  --mgr-faint:      #8a8a90;
  --mgr-accent:     #c586c0;
  --mgr-accent-hov: #d9a0d4;
  --mgr-accent-dim: rgba(197,134,192,.13);
  --mgr-on-accent:  #1c1c1e;
  --mgr-danger:     #f14c4c;
  --mgr-success:    #4ec9b0;
  --mgr-warn:       #dcdcaa;
  --mgr-blue:       #569cd6;
  --mgr-sidebar-w:  248px;
  --mgr-topbar-h:   56px;
  --mgr-rad:        8px;
  --mgr-rad-sm:     5px;
  --mgr-shadow:     0 24px 56px -18px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3);
}

[data-theme="light"] {
  --mgr-bg:         #f4f4f5;
  --mgr-surface:    #ffffff;
  --mgr-surface-hi: #ececee;
  --mgr-raised:     #f7f7f8;
  --mgr-border:     #dcdcdf;
  --mgr-border-hi:  #c4c4c9;
  --mgr-text:       #26262a;
  --mgr-text-hi:    #111114;
  --mgr-muted:      #5f5f68;
  --mgr-faint:      #6e6e77;
  --mgr-accent:     #8b3d96;
  --mgr-accent-hov: #6e2f78;
  --mgr-accent-dim: rgba(139,61,150,.09);
  --mgr-on-accent:  #ffffff;
  --mgr-danger:     #c72e2e;
  --mgr-success:    #0f7b6c;
  --mgr-warn:       #8a6100;
  --mgr-blue:       #1a5fb4;
  --mgr-shadow:     0 24px 56px -20px rgba(20,20,30,.28), 0 2px 8px rgba(20,20,30,.08);
}

.mgr-root, .mgr-login-page { background: var(--mgr-bg); }
.mgr-app { background: var(--mgr-bg); }

::selection { background: var(--mgr-accent-dim); color: var(--mgr-text-hi); }
.mgr-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.mgr-root ::-webkit-scrollbar-track { background: transparent; }
.mgr-root ::-webkit-scrollbar-thumb { background: #3a3a41; border-radius: 6px; border: 2px solid var(--mgr-bg); }
.mgr-root ::-webkit-scrollbar-thumb:hover { background: #4a4a52; }

/* ============================================================
   Sidebar
   ============================================================ */
.mgr-sidebar {
  width: var(--mgr-sidebar-w);
  border-right: 1px solid var(--mgr-border);
}

.mgr-sidebar-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
}

/* Marca con el rayo dentro de un cuadro de acento. El emoji del PHP se
   oculta y se sustituye por el cuadro (ver ::before). */
.mgr-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--mgr-text-hi);
  letter-spacing: -.01em;
  text-transform: none;
}
.mgr-sidebar-logo span { color: var(--mgr-accent); }

.mgr-nav { padding: 14px 10px; gap: 2px; }

/* Encabezado de segmento. Lo emite el layout como .mgr-nav-group-title */
.mgr-nav-group-title {
  font-family: var(--mgr-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--mgr-faint);
  text-transform: uppercase;
  padding: 16px 8px 7px;
}
.mgr-nav-group:first-child .mgr-nav-group-title { padding-top: 6px; }

.mgr-nav-item {
  gap: 11px;
  padding: 8px 11px;
  border-radius: var(--mgr-rad-sm);
  font-size: .845rem;
  color: var(--mgr-muted);
  transition: background .14s, color .14s;
}
.mgr-nav-item:hover { background: var(--mgr-surface-hi); color: var(--mgr-text-hi); }

.mgr-nav-item.active {
  background: var(--mgr-accent-dim);
  color: var(--mgr-text-hi);
  font-weight: 600;
  border-left: none;
  padding-left: 11px;
  box-shadow: inset 2px 0 0 var(--mgr-accent);
}
.mgr-nav-item.active .mgr-nav-icon { color: var(--mgr-accent); }

.mgr-nav-icon {
  display: grid;
  place-items: center;
  width: 18px;
  color: var(--mgr-faint);
  font-size: .95rem;
}
.mgr-nav-icon svg { width: 16px; height: 16px; }

/* Contador opcional a la derecha del botón */
.mgr-nav-badge {
  margin-left: auto;
  font-family: var(--mgr-mono);
  font-size: .63rem;
  font-weight: 700;
  color: var(--mgr-accent);
  background: var(--mgr-accent-dim);
  border-radius: 20px;
  padding: 1px 7px;
}

.mgr-sidebar-footer { padding: 12px 10px; }

.mgr-user-info {
  gap: 11px;
  padding: 9px;
  margin-bottom: 8px;
  background: var(--mgr-raised);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
}

.mgr-user-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--mgr-accent), #7d5f9c);
  color: var(--mgr-on-accent);
  font-size: .78rem;
}
/* Punto de "en línea" */
.mgr-user-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mgr-success);
  border: 2px solid var(--mgr-raised);
}

.mgr-user-name { font-size: .82rem; color: var(--mgr-text-hi); }
.mgr-user-rank { font-family: var(--mgr-mono); font-size: .66rem; letter-spacing: .04em; }

.mgr-logout-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  font-size: .81rem;
  padding: 8px 10px;
  transition: all .15s;
}
.mgr-logout-btn:hover {
  background: rgba(241,76,76,.1);
  border-color: rgba(241,76,76,.28);
  color: var(--mgr-danger);
}

/* ============================================================
   Topbar
   ============================================================ */
.mgr-topbar {
  height: var(--mgr-topbar-h);
  padding: 0 22px;
  gap: 18px;
  z-index: 20;
}

.mgr-topbar-left { gap: 11px; min-width: 0; }

.mgr-crumb {
  font-family: var(--mgr-mono);
  font-size: .72rem;
  color: var(--mgr-faint);
  letter-spacing: .04em;
  white-space: nowrap;
}
.mgr-crumb-sep { color: var(--mgr-faint); font-size: .8rem; }

.mgr-page-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--mgr-text-hi);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.mgr-topbar-actions { gap: 10px; min-width: 0; flex-shrink: 1; }

/* — Configuracion de acceso: la URL con el hueco editable en medio — */
.mgr-access-url {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-family: var(--mgr-mono);
  font-size: .85rem;
  color: var(--mgr-faint);
}
.mgr-access-url__fixed { white-space: nowrap; }
.mgr-access-url__slug {
  width: auto;
  flex: 0 1 220px;
  min-width: 120px;
  font-family: var(--mgr-mono);
  text-align: center;
}

/* — Modo mantenimiento: separador entre el interruptor y la programacion — */
.mgr-webcfg-sep {
  border: 0;
  border-top: 1px solid var(--mgr-border);
  margin: 16px 0;
}

/* — Identidad: favicon, icono y nombre de la marca — */

/* El favicon a los tamanos en que se ve de verdad: pestana y marcador. */
.mgr-icon-sizes {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  margin-bottom: 18px;
}
.mgr-icon-sizes > div { text-align: center; }
.mgr-icon-sizes img { display: block; margin: 0 auto 6px; }

.mgr-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.mgr-icon-prev img,
.mgr-icon-prev__mark {
  width: 46px;
  height: 46px;
}
/* Mismo distintivo que pinta la pagina cuando no hay icono subido. */
.mgr-icon-prev__mark {
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--mgr-accent), #8b5fa8);
}
/* El icono subido se enseña tal cual, igual que en la pagina. */
.mgr-icon-prev img {
  display: block;
  object-fit: contain;
}

.mgr-icon-remove {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--mgr-muted);
  cursor: pointer;
  white-space: nowrap;
  padding-top: 9px;
}
.mgr-icon-remove:hover { color: var(--mgr-danger); }

/* Los enlaces dentro de una nota al pie siguen el acento del panel, no el
   azul del navegador. */
.mgr-mon-sub a {
  color: var(--mgr-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mgr-mon-sub a:hover { color: var(--mgr-accent-hov); }

/* — Seleccion de plantilla de mantenimiento — */
.mgr-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.mgr-tpl {
  display: block;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  background: var(--mgr-raised);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mgr-tpl:hover { border-color: var(--mgr-border-hi); }
.mgr-tpl.is-active {
  border-color: var(--mgr-accent);
  box-shadow: 0 0 0 1px var(--mgr-accent);
}

/* La miniatura es un iframe encogido. El navegador aplica las media queries
   al ancho real del iframe, no al que se ve: 820px lo deja por encima del
   punto de ruptura movil, asi que se pinta como en un escritorio. Las
   medidas van emparejadas con la escala — 820x600 al 28% son 230x168 — para
   que la plantilla entre entera y no se recorte por ningun lado. */
.mgr-tpl__shot {
  display: block;
  position: relative;
  height: 168px;
  overflow: hidden;
  border-bottom: 1px solid var(--mgr-border);
  background: var(--mgr-bg);
}
.mgr-tpl__shot iframe {
  position: absolute;
  top: 0;
  left: 50%;
  width: 820px;
  height: 600px;
  border: 0;
  transform: translateX(-115px) scale(.28);
  transform-origin: 0 0;
  /* Es una foto, no algo con lo que se interactua. */
  pointer-events: none;
}

.mgr-tpl__foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
}
.mgr-tpl__name {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--mgr-text-hi);
}
.mgr-tpl__desc {
  display: block;
  font-size: .75rem;
  color: var(--mgr-faint);
  line-height: 1.5;
}

/* — Selector de idioma — */
.mgr-lang {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.mgr-lang form { margin: 0; display: flex; }
.mgr-lang__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-family: var(--mgr-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--mgr-faint);
  transition: background .15s, color .15s;
}
.mgr-lang__btn:hover { background: var(--mgr-raised); color: var(--mgr-text); }
.mgr-lang__btn.is-active {
  background: var(--mgr-accent);
  color: var(--mgr-on-accent);
}
.mgr-lang__btn.is-active:hover { background: var(--mgr-accent); }

/* El selector del login se estiliza en manager_main.css: esa pantalla no
   carga esta hoja. */

/* — Estado del servidor — */
.mgr-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--mgr-rad-sm);
  background: rgba(78,201,176,.09);
  border: 1px solid rgba(78,201,176,.25);
  font-family: var(--mgr-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--mgr-success);
  text-transform: uppercase;
}
.mgr-live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mgr-success);
  flex-shrink: 0;
}
.mgr-live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mgr-success);
  animation: mgrPulse 2.2s ease-out infinite;
}
@keyframes mgrPulse {
  0%   { transform: scale(.9);  opacity: .6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { opacity: 0; }
}

/* — Botones cuadrados de la topbar — */
.mgr-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  transition: all .15s;
}
.mgr-icon-btn:hover {
  color: var(--mgr-text-hi);
  border-color: var(--mgr-border-hi);
  background: var(--mgr-surface-hi);
}
.mgr-icon-btn.is-open {
  background: var(--mgr-accent-dim);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
}
.mgr-icon-btn__dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mgr-danger);
  border: 1.5px solid var(--mgr-surface);
}
.mgr-theme-btn { composes: none; }
.mgr-theme-btn:hover { color: var(--mgr-accent); border-color: var(--mgr-accent); background: var(--mgr-accent-dim); }

/* ============================================================
   Popovers (notificaciones y color del panel)
   ============================================================ */
.mgr-pop-wrap { position: relative; }

.mgr-pop {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 60;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  box-shadow: var(--mgr-shadow);
  overflow: hidden;
  transform-origin: top right;
  opacity: 0;
  transform: scale(.96) translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), visibility 0s .18s;
}
.mgr-pop.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), visibility 0s 0s;
}
.mgr-pop--notif { width: 352px; }
.mgr-pop--color { width: 296px; }

.mgr-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-pop-title {
  font-family: var(--mgr-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--mgr-accent);
  text-transform: uppercase;
}
.mgr-pop-body { max-height: 390px; overflow-y: auto; }
.mgr-pop-foot {
  padding: 10px 16px;
  background: var(--mgr-raised);
  border-top: 1px solid var(--mgr-border);
  text-align: center;
}
.mgr-pop-link {
  background: none;
  border: none;
  color: var(--mgr-accent);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.mgr-pop-text-btn {
  background: none;
  border: none;
  color: var(--mgr-faint);
  font-family: inherit;
  font-size: .73rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s;
}
.mgr-pop-text-btn:hover { color: var(--mgr-accent); }

/* — Notificación — */
.mgr-notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--mgr-border);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s;
}
.mgr-notif:hover { background: var(--mgr-surface-hi); }
.mgr-notif__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}
.mgr-notif__title {
  font-size: .83rem;
  font-weight: 600;
  color: var(--mgr-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgr-notif__ago { font-family: var(--mgr-mono); font-size: .62rem; color: var(--mgr-faint); flex-shrink: 0; }
.mgr-notif__body { display: block; font-size: .78rem; color: var(--mgr-muted); line-height: 1.55; margin-top: 3px; text-wrap: pretty; }
.mgr-notif__unread { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.mgr-notif__count {
  font-family: var(--mgr-mono);
  font-size: .63rem;
  font-weight: 700;
  color: var(--mgr-on-accent);
  background: var(--mgr-accent);
  border-radius: 20px;
  padding: 1px 8px;
}
/* Tonos por severidad */
.mgr-notif--danger  .mgr-notif__icon { color: var(--mgr-danger);  background: rgba(241,76,76,.13); }
.mgr-notif--warn    .mgr-notif__icon { color: var(--mgr-warn);    background: rgba(220,220,170,.13); }
.mgr-notif--success .mgr-notif__icon { color: var(--mgr-success); background: rgba(78,201,176,.13); }
.mgr-notif--accent  .mgr-notif__icon { color: var(--mgr-accent);  background: var(--mgr-accent-dim); }
.mgr-notif--danger.is-unread  { background: rgba(241,76,76,.05); }
.mgr-notif--warn.is-unread    { background: rgba(220,220,170,.05); }
.mgr-notif--success.is-unread { background: rgba(78,201,176,.05); }
.mgr-notif--accent.is-unread  { background: var(--mgr-accent-dim); }
.mgr-notif--danger  .mgr-notif__unread { background: var(--mgr-danger); }
.mgr-notif--warn    .mgr-notif__unread { background: var(--mgr-warn); }
.mgr-notif--success .mgr-notif__unread { background: var(--mgr-success); }
.mgr-notif--accent  .mgr-notif__unread { background: var(--mgr-accent); }

/* — Selector de color — */
.mgr-color-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  transition: all .15s;
}
.mgr-color-btn.is-open { background: var(--mgr-accent-dim); border-color: var(--mgr-accent); }
.mgr-color-btn__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mgr-accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.mgr-color-btn__caret { transition: transform .2s; }
.mgr-color-btn.is-open .mgr-color-btn__caret { transform: rotate(180deg); }

.mgr-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.mgr-swatch {
  position: relative;
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: var(--mgr-rad-sm);
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
.mgr-swatch:hover { transform: translateY(-2px); }
.mgr-swatch.is-active { border-color: var(--mgr-text-hi); }
.mgr-swatch__check { display: none; }
.mgr-swatch.is-active .mgr-swatch__check { display: grid; place-items: center; }

.mgr-color-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px;
  border-radius: var(--mgr-rad-sm);
  background: var(--mgr-bg);
  border: 1px solid var(--mgr-border);
  margin-bottom: 16px;
}

/* ============================================================
   Contenido — tarjetas, tablas y controles compartidos
   ============================================================ */
.mgr-content { padding: 24px 26px 40px; }

.mgr-page-head { margin-bottom: 18px; }
.mgr-page-head h1 {
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--mgr-text-hi);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.mgr-page-head p { font-family: var(--mgr-mono); font-size: .74rem; color: var(--mgr-muted); }

/* Tarjeta genérica: sustituye a .mgr-ban-section, .mgr-config-card y
   .mgr-email-card, que ahora comparten apariencia. */
.mgr-card,
.mgr-ban-section,
.mgr-config-card,
.mgr-email-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  overflow: hidden;
  margin-bottom: 16px;
}

.mgr-card__head,
.mgr-ban-section-header,
.mgr-config-card-header,
.mgr-email-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--mgr-raised);
  border-bottom: 1px solid var(--mgr-border);
  font-family: var(--mgr-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--mgr-accent);
  text-transform: uppercase;
}
.mgr-ban-section-title { font: inherit; color: inherit; display: flex; align-items: center; gap: 9px; }
.mgr-ban-section-icon { font-size: .95rem; }

.mgr-card__body,
.mgr-ban-form-body,
.mgr-email-body { padding: 18px 16px; }

/* Formularios */
.mgr-form-label,
.mgr-ban-field-label {
  display: block;
  font-family: var(--mgr-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mgr-form-input,
.mgr-form-textarea,
.mgr-input {
  padding: 9px 12px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border);
  background: var(--mgr-bg);
  color: var(--mgr-text);
  font-family: inherit;
  font-size: .85rem;
  transition: border-color .16s, box-shadow .16s;
}
.mgr-form-input:focus,
.mgr-form-textarea:focus,
.mgr-input:focus {
  border-color: var(--mgr-accent);
  box-shadow: 0 0 0 3px var(--mgr-accent-dim);
}
.mgr-form-input::placeholder, .mgr-form-textarea::placeholder { color: var(--mgr-faint); opacity: .65; }

/* Botones */
.mgr-btn,
.mgr-save-btn,
.mgr-btn-primary,
.mgr-rk-assign-btn,
.mgr-ban-wl-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: var(--mgr-rad-sm);
  border: none;
  background: var(--mgr-accent);
  color: var(--mgr-on-accent);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px var(--mgr-accent);
  transition: all .18s;
}
.mgr-btn:hover,
.mgr-save-btn:hover,
.mgr-btn-primary:hover,
.mgr-rk-assign-btn:hover { background: var(--mgr-accent-hov); transform: translateY(-1px); }

.mgr-btn--ghost,
.mgr-ban-search-btn,
.mgr-rk-remove-btn,
.mgr-preset-btn,
.mgr-sec-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border);
  background: var(--mgr-surface);
  color: var(--mgr-muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: all .18s;
}
.mgr-btn--ghost:hover,
.mgr-ban-search-btn:hover,
.mgr-preset-btn:hover { border-color: var(--mgr-border-hi); color: var(--mgr-text-hi); background: var(--mgr-surface-hi); transform: none; }

.mgr-btn--danger,
.mgr-ban-apply-btn {
  border: 1px solid rgba(241,76,76,.4);
  background: rgba(241,76,76,.12);
  color: var(--mgr-danger);
  box-shadow: none;
}
.mgr-btn--danger:hover,
.mgr-ban-apply-btn:hover { background: var(--mgr-danger); color: #fff; border-color: var(--mgr-danger); }

/* Chips seleccionables: presets de email, duraciones de ban, filtros */
.mgr-preset-btn.active,
.mgr-ban-dur-btn.active,
.mgr-ban-type-btn.active,
.mgr-mon-range-btn.active,
.mgr-chip.is-active {
  background: var(--mgr-accent-dim);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
  font-weight: 600;
}
.mgr-ban-dur-btn,
.mgr-ban-type-btn,
.mgr-mon-range-btn,
.mgr-chip {
  padding: 8px 15px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border);
  background: var(--mgr-surface);
  color: var(--mgr-muted);
  font-family: var(--mgr-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .16s;
}
.mgr-ban-dur-btn--perm { color: var(--mgr-danger); }
.mgr-ban-dur-btn--perm.active { background: rgba(241,76,76,.12); border-color: var(--mgr-danger); color: var(--mgr-danger); }

/* Toggle */
.mgr-toggle, .mgr-users-toggle { width: 42px; height: 23px; }
.mgr-toggle-slider, .mgr-users-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 23px;
  background: var(--mgr-border);
  cursor: pointer;
  transition: background .22s;
}
.mgr-toggle-slider::before, .mgr-users-toggle-track::before {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.mgr-toggle input:checked + .mgr-toggle-slider,
.mgr-users-toggle input:checked + .mgr-users-toggle-track { background: var(--mgr-accent); }
.mgr-toggle input:checked + .mgr-toggle-slider::before,
.mgr-users-toggle input:checked + .mgr-users-toggle-track::before { transform: translateX(19px); }

/* Tablas */
.mgr-table__head,
.mgr-users-table thead th,
.mgr-ban-table thead th,
.mgr-config-table th,
.mgr-sec-log-table th {
  background: var(--mgr-raised);
  font-family: var(--mgr-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-users-table td,
.mgr-ban-table td,
.mgr-config-table td,
.mgr-sec-log-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--mgr-border);
  font-size: .82rem;
  color: var(--mgr-text);
}
.mgr-users-row:hover td,
.mgr-ban-row:hover td { background: var(--mgr-surface-hi); }

/* Contenedor con scroll horizontal para tablas densas.
   min-width COMPARTIDO: si cada fila usara max-content, las de etiqueta
   larga resolverían pistas distintas y las columnas se desalinearían. */
.mgr-table-scroll { overflow-x: auto; }
.mgr-table-scroll > table { min-width: 760px; }

/* Avatares e insignias */
.mgr-users-avatar, .mgr-ban-avatar, .mgr-rk-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mgr-on-accent);
  background: linear-gradient(140deg, var(--mgr-accent), #7d5f9c);
}
.mgr-users-row--banned   .mgr-users-avatar { background: linear-gradient(140deg, #f14c4c, #8c2f2f); color: #fff; }
.mgr-users-row--inactive .mgr-users-avatar { background: linear-gradient(140deg, #5c5c63, #3a3a41); color: #fff; }

.mgr-users-badge, .mgr-ban-badge {
  display: inline-block;
  font-family: var(--mgr-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 3px 9px;
}
.mgr-users-badge--active   { color: var(--mgr-success); background: rgba(78,201,176,.11); border: 1px solid rgba(78,201,176,.28); }
.mgr-users-badge--ban,
.mgr-ban-badge--perm       { color: var(--mgr-danger);  background: rgba(241,76,76,.1);   border: 1px solid rgba(241,76,76,.3); }
.mgr-users-badge--inactive { color: var(--mgr-muted);   background: rgba(138,138,144,.1);  border: 1px solid var(--mgr-border); }
.mgr-ban-badge--timed      { color: var(--mgr-warn);    background: rgba(220,220,170,.11); border: 1px solid rgba(220,220,170,.28); }
.mgr-ban-badge--wl         { color: var(--mgr-success); background: rgba(78,201,176,.11); border: 1px solid rgba(78,201,176,.28); }

/* ============================================================
   Inicio
   ============================================================ */
.mgr-welcome-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--mgr-raised), var(--mgr-surface) 62%);
  border: 1px solid var(--mgr-border);
  border-left: 2px solid var(--mgr-accent);
  border-radius: var(--mgr-rad);
  padding: 24px 26px;
  margin-bottom: 20px;
}
.mgr-welcome-card::after {
  content: '';
  position: absolute;
  top: -70px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mgr-accent-dim), transparent 68%);
  pointer-events: none;
}
.mgr-welcome-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  font-size: 1.42rem;
  color: var(--mgr-text-hi);
  letter-spacing: -.02em;
  margin-bottom: 7px;
}
.mgr-welcome-meta { position: relative; font-family: var(--mgr-mono); font-size: .78rem; color: var(--mgr-muted); }
.mgr-rank-badge {
  font-family: var(--mgr-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--mgr-accent);
  background: var(--mgr-accent-dim);
  border: 1px solid var(--mgr-accent);
  border-radius: 4px;
  padding: 3px 9px;
  text-transform: uppercase;
  margin-left: 0;
}

/* Cifras planas (sin gráficas: viven en Monitoreo) */
.mgr-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 24px;
}
.mgr-stat-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 20px 22px;
  transition: border-color .25s, transform .25s cubic-bezier(.2,.8,.3,1);
}
.mgr-stat-card:hover { border-color: var(--mgr-border-hi); transform: translateY(-2px); }
.mgr-stat-value {
  font-family: var(--mgr-mono);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--mgr-text-hi);
  margin-bottom: 10px;
}
.mgr-stat-card--online .mgr-stat-value { color: var(--mgr-success); }
.mgr-stat-label {
  font-family: var(--mgr-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mgr-muted);
  text-transform: uppercase;
}
.mgr-stat-sub { font-size: .76rem; color: var(--mgr-faint); margin-top: 6px; }

/* Introducción del panel */
.mgr-intro-lead { max-width: 680px; margin-bottom: 20px; }
.mgr-intro-eyebrow {
  font-family: var(--mgr-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--mgr-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mgr-intro-lead h2 { font-size: 1.18rem; font-weight: 600; color: var(--mgr-text-hi); letter-spacing: -.015em; margin-bottom: 10px; }
.mgr-intro-lead p  { font-size: .9rem; color: var(--mgr-muted); line-height: 1.7; text-wrap: pretty; }

.mgr-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.mgr-intro-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, transform .25s cubic-bezier(.2,.8,.3,1);
}
.mgr-intro-card:hover { border-color: var(--mgr-accent); transform: translateY(-2px); }
.mgr-intro-card__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--mgr-accent-dim);
  color: var(--mgr-accent);
  flex-shrink: 0;
}
.mgr-intro-card__title { display: block; font-size: .92rem; font-weight: 600; color: var(--mgr-text-hi); margin-bottom: 5px; }
.mgr-intro-card__desc  { display: block; font-size: .82rem; color: var(--mgr-muted); line-height: 1.6; text-wrap: pretty; }

/* ============================================================
   Monitoreo
   ============================================================ */
.mgr-mon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 16px;
}
.mgr-mon-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 17px 0 0;
  overflow: hidden;
  transition: border-color .25s;
}
.mgr-mon-card:hover { border-color: var(--mgr-border-hi); }
.mgr-mon-card-top { display: block; padding: 0 19px; margin-bottom: 0; }
.mgr-mon-card-label {
  display: block;
  font-family: var(--mgr-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mgr-mon-value { font-family: var(--mgr-mono); font-size: 1.85rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.mgr-mon-unit  { font-family: var(--mgr-mono); font-size: .8rem; font-weight: 600; opacity: .7; }
.mgr-mon-sub   { padding: 0 19px; font-family: var(--mgr-mono); font-size: .68rem; color: var(--mgr-faint); }
.mgr-mon-chart-wrap { position: relative; height: 74px; margin-top: 6px; }

/* Ruler: línea, punto y lectura que siguen al cursor */
.mgr-mon-ruler-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-.5px);
  transition: left .09s linear, opacity .15s;
}
.mgr-mon-ruler-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--mgr-surface);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left .09s linear, top .09s linear, opacity .15s;
}
.mgr-mon-ruler-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 5;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--mgr-raised);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left .09s linear, opacity .15s;
}
.mgr-mon-chart-wrap.is-hovering .mgr-mon-ruler-line { opacity: .55; }
.mgr-mon-chart-wrap.is-hovering .mgr-mon-ruler-dot,
.mgr-mon-chart-wrap.is-hovering .mgr-mon-ruler-tip { opacity: 1; }
.mgr-mon-ruler-tip__value { display: block; font-family: var(--mgr-mono); font-size: .78rem; font-weight: 700; line-height: 1.2; }
.mgr-mon-ruler-tip__when  { display: block; font-family: var(--mgr-mono); font-size: .6rem; color: var(--mgr-faint); margin-top: 2px; }

/* Escala de la gráfica de barras */
.mgr-mon-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 74px;
  padding: 1px 0;
  flex-shrink: 0;
  text-align: right;
  min-width: 20px;
}
.mgr-mon-axis span { font-family: var(--mgr-mono); font-size: .58rem; color: var(--mgr-faint); line-height: 1; }

.mgr-mon-stats-bar {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 14px 8px;
  margin-bottom: 16px;
}
.mgr-mon-stat { flex: 1; min-width: 110px; gap: 5px; padding: 4px 14px; }
.mgr-mon-stat-val { font-family: var(--mgr-mono); font-size: 1.35rem; font-weight: 600; color: var(--mgr-text-hi); }
.mgr-mon-stat-label { font-family: var(--mgr-mono); font-size: .6rem; letter-spacing: .11em; }
.mgr-mon-stat-sep { display: none; }

.mgr-mon-logs { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 16px; margin-bottom: 16px; align-items: start; }

.mgr-mon-log-panel {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
}
.mgr-mon-log-header { padding: 9px 14px; background: var(--mgr-raised); }
.mgr-mon-log-title { font-family: var(--mgr-mono); font-size: .64rem; letter-spacing: .13em; }

.mgr-mon-log-tab {
  border-radius: 4px;
  font-family: var(--mgr-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 9px;
}
.mgr-mon-log-tab.active { background: var(--mgr-accent-dim); border-color: var(--mgr-accent); color: var(--mgr-accent); }

.mgr-mon-refresh-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--mgr-border);
  color: var(--mgr-faint);
}
.mgr-mon-refresh-btn:hover { color: var(--mgr-accent); border-color: var(--mgr-accent); }

/* Fila del log de peticiones: + latencia e IP */
.mgr-mon-log-entry {
  grid-template-columns: 66px 52px minmax(140px,1fr) 44px 56px 78px 108px;
  gap: 9px;
  padding: 6px 14px;
  font-size: .71rem;
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-mon-log-entry .ms--slow { color: var(--mgr-warn); }

.mgr-mon-log-err { border-left: 2px solid var(--mgr-danger); }

/* Server logs: consola sobre el fondo de la app */
.mgr-mon-slog-entries { background: var(--mgr-bg); padding: 8px 0; max-height: 290px; }
.mgr-mon-slog-line {
  display: block;
  padding: 4px 14px;
  font-family: var(--mgr-mono);
  font-size: .7rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 2px solid transparent;
  color: var(--mgr-text);
}
.mgr-mon-slog-line--ok   { border-left-color: var(--mgr-success); }
.mgr-mon-slog-line--warn { border-left-color: var(--mgr-warn); }
.mgr-mon-slog-line--err  { border-left-color: var(--mgr-danger); }
.mgr-mon-slog-line--dim  { color: var(--mgr-faint); }

.mgr-mon-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--mgr-raised);
  border-top: 1px solid var(--mgr-border);
  font-family: var(--mgr-mono);
  font-size: .68rem;
  color: var(--mgr-faint);
}

/* ============================================================
   Chat
   ============================================================ */
.mgr-chat-page { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 16px; align-items: start; }

.mgr-chat-queue,
.mgr-chat-thread {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  overflow: hidden;
}
.mgr-chat-thread { display: flex; flex-direction: column; height: 560px; }

.mgr-chat-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  background: var(--mgr-raised);
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-chat-queue__title {
  font-family: var(--mgr-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--mgr-accent);
  text-transform: uppercase;
}
.mgr-chat-queue__pending {
  font-family: var(--mgr-mono);
  font-size: .63rem;
  font-weight: 700;
  color: var(--mgr-warn);
  background: rgba(220,220,170,.12);
  border: 1px solid rgba(220,220,170,.28);
  border-radius: 20px;
  padding: 2px 9px;
}

/* Fila de la cola */
.mgr-chat-row { position: relative; }
.mgr-chat-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: none;
  border-bottom: 1px solid var(--mgr-border);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s;
}
.mgr-chat-item:hover { background: var(--mgr-surface-hi); }
.mgr-chat-item.is-active { background: var(--mgr-accent-dim); box-shadow: inset 2px 0 0 var(--mgr-accent); }
.mgr-chat-item.is-pinned { background: var(--mgr-accent-dim); }
.mgr-chat-item.is-pinned.is-active { box-shadow: inset 2px 0 0 var(--mgr-accent); }

.mgr-chat-tile {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--mgr-on-accent);
  background: linear-gradient(140deg, #5c5c63, #3a3a41);
}
.mgr-chat-item.is-pending .mgr-chat-tile { background: linear-gradient(140deg, var(--mgr-accent), #7d5f9c); }

.mgr-chat-pin { display: none; place-items: center; color: var(--mgr-accent); flex-shrink: 0; }
.mgr-chat-item.is-pinned .mgr-chat-pin { display: grid; }

.mgr-chat-name { font-size: .84rem; font-weight: 600; color: var(--mgr-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-chat-ago  { font-family: var(--mgr-mono); font-size: .66rem; color: var(--mgr-faint); flex-shrink: 0; }
.mgr-chat-item.is-pending .mgr-chat-ago { color: var(--mgr-warn); }
.mgr-chat-last { font-size: .76rem; color: var(--mgr-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-chat-unread {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--mgr-accent);
  color: var(--mgr-on-accent);
  font-family: var(--mgr-mono);
  font-size: .63rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Menú ⋯ de la conversación */
.mgr-chat-menu-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--mgr-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.mgr-chat-menu-btn:hover,
.mgr-chat-menu-btn.is-open { background: var(--mgr-surface-hi); color: var(--mgr-accent); }

.mgr-chat-menu {
  position: absolute;
  top: 38px;
  right: 12px;
  z-index: 30;
  width: 186px;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.7);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.95);
  transform-origin: top right;
  transition: opacity .15s, transform .15s;
}
.mgr-chat-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
.mgr-chat-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 13px;
  border: none;
  border-bottom: 1px solid var(--mgr-border);
  background: none;
  color: var(--mgr-text);
  font-family: inherit;
  font-size: .81rem;
  cursor: pointer;
  transition: background .14s;
}
.mgr-chat-menu button:last-child { border-bottom: none; }
.mgr-chat-menu button:hover { background: var(--mgr-surface-hi); }
.mgr-chat-menu .is-danger { color: var(--mgr-danger); }
.mgr-chat-menu .is-danger:hover { background: rgba(241,76,76,.1); }

/* Transcripción */
.mgr-chat-thread__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--mgr-raised);
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-chat-thread__name  { display: block; font-size: .88rem; font-weight: 600; color: var(--mgr-text-hi); }
.mgr-chat-thread__state { display: block; font-family: var(--mgr-mono); font-size: .68rem; color: var(--mgr-warn); }

.mgr-chat-log { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }

.mgr-chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mgr-chat-msg--out { align-items: flex-end; }
.mgr-chat-msg__wrap { display: flex; align-items: center; gap: 7px; max-width: 100%; flex-direction: row-reverse; }
.mgr-chat-msg--out .mgr-chat-msg__wrap { flex-direction: row; }

.mgr-chat-bubble {
  max-width: min(78%, 460px);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.55;
  background: var(--mgr-surface-hi);
  color: var(--mgr-text);
  border: 1px solid var(--mgr-border);
  border-bottom-left-radius: 5px;
}
.mgr-chat-msg--out .mgr-chat-bubble {
  background: var(--mgr-accent);
  color: var(--mgr-on-accent);
  border: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 5px;
}
.mgr-chat-msg__time { font-family: var(--mgr-mono); font-size: .63rem; color: var(--mgr-faint); padding: 0 4px; }

/* Eliminar mensaje */
.mgr-chat-msg__del {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--mgr-border);
  background: none;
  color: var(--mgr-faint);
  cursor: pointer;
  flex-shrink: 0;
  opacity: .45;
  transition: all .16s;
}
.mgr-chat-msg__del:hover { opacity: 1; border-color: var(--mgr-danger); color: var(--mgr-danger); }

.mgr-chat-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 16px;
  border-top: 1px solid var(--mgr-border);
  background: var(--mgr-raised);
}
.mgr-chat-composer__field { flex: 1; position: relative; }
.mgr-chat-composer textarea {
  width: 100%;
  resize: none;
  line-height: 1.5;
  padding: 9px 12px 22px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border);
  background: var(--mgr-bg);
  color: var(--mgr-text);
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  transition: border-color .16s;
}
.mgr-chat-composer textarea:focus { border-color: var(--mgr-accent); }
.mgr-chat-count { position: absolute; right: 11px; bottom: 9px; font-family: var(--mgr-mono); font-size: .63rem; color: var(--mgr-faint); }
.mgr-chat-send {
  padding: 9px 17px;
  border-radius: var(--mgr-rad-sm);
  border: none;
  background: var(--mgr-accent);
  color: var(--mgr-on-accent);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px var(--mgr-accent);
  transition: all .18s;
}
.mgr-chat-send:hover { background: var(--mgr-accent-hov); transform: translateY(-1px); }

.mgr-chat-placeholder, .mgr-chat-empty { padding: 34px 20px; text-align: center; font-size: .82rem; color: var(--mgr-faint); }

/* ============================================================
   Seguridad
   ============================================================ */
.mgr-sec-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 16px; }
.mgr-sec-stat-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 17px 19px;
  transition: border-color .25s;
}
.mgr-sec-stat-card:hover { border-color: var(--mgr-border-hi); }
.mgr-sec-stat-value { font-family: var(--mgr-mono); font-size: 1.85rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--mgr-text-hi); }
.mgr-sec-stat-card--danger .mgr-sec-stat-value { color: var(--mgr-danger); }
.mgr-sec-stat-card--warn   .mgr-sec-stat-value { color: var(--mgr-warn); }
.mgr-sec-stat-card--ok     .mgr-sec-stat-value { color: var(--mgr-success); }
.mgr-sec-stat-label {
  font-family: var(--mgr-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  margin-top: 8px;
}
.mgr-sec-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.mgr-sec-cfg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

/* Etiquetas de tipo y acción del log de seguridad */
.mgr-sec-type { font-family: var(--mgr-mono); font-size: .7rem; font-weight: 700; }
.mgr-sec-type--danger { color: var(--mgr-danger); }
.mgr-sec-type--warn   { color: var(--mgr-warn); }
.mgr-sec-action {
  display: inline-block;
  font-family: var(--mgr-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--mgr-muted);
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
}
.mgr-sec-action--ban      { color: var(--mgr-danger); background: rgba(241,76,76,.1); border-color: rgba(241,76,76,.26); }
.mgr-sec-action--throttle { color: var(--mgr-warn);   background: rgba(220,220,170,.1); border-color: rgba(220,220,170,.24); }

/* ============================================================
   Rangos y Config. de Menú
   ============================================================ */
.mgr-rk-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mgr-border);
  transition: background .12s;
}
.mgr-rk-user-row:hover { background: var(--mgr-surface-hi); }
.mgr-rk-username { display: block; font-size: .84rem; font-weight: 600; color: var(--mgr-text-hi); }
.mgr-rk-email    { display: block; font-family: var(--mgr-mono); font-size: .72rem; color: var(--mgr-faint); }
.mgr-rk-row-remove {
  padding: 6px 12px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border);
  background: none;
  color: var(--mgr-faint);
  font-family: inherit;
  font-size: .75rem;
  cursor: pointer;
  transition: all .16s;
}
.mgr-rk-row-remove:hover { border-color: var(--mgr-danger); color: var(--mgr-danger); background: rgba(241,76,76,.08); }

/* Ficha de rango en Crear Rangos */
.mgr-rank-chip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-family: var(--mgr-mono);
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mgr-rank-lock {
  font-family: var(--mgr-mono);
  font-size: .6rem;
  letter-spacing: .09em;
  color: var(--mgr-faint);
  text-transform: uppercase;
}
.mgr-rank-color-grid { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.mgr-rank-color {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  transition: transform .16s;
}
.mgr-rank-color:hover { transform: translateY(-2px); }
.mgr-rank-color.is-active { border-color: var(--mgr-text-hi); }

/* Segmentos del menú */
.mgr-seg-list { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.mgr-seg-tag {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border);
  background: var(--mgr-bg);
}
.mgr-seg-tag__label { font-size: .84rem; font-weight: 600; color: var(--mgr-text-hi); }
.mgr-seg-tag__meta  { display: block; font-family: var(--mgr-mono); font-size: .63rem; color: var(--mgr-faint); margin-top: 2px; }
.mgr-seg-order { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.mgr-seg-order button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 11px;
  border: none;
  background: none;
  padding: 0;
  color: var(--mgr-faint);
  cursor: pointer;
  transition: color .15s;
}
.mgr-seg-order button:hover:not(:disabled) { color: var(--mgr-accent); }
.mgr-seg-order button:disabled { color: color-mix(in srgb, var(--mgr-faint) 35%, transparent); cursor: not-allowed; }
.mgr-seg-remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--mgr-border);
  background: none;
  color: var(--mgr-faint);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  transition: all .15s;
}
.mgr-seg-remove:hover { border-color: var(--mgr-danger); color: var(--mgr-danger); }

/* Leyenda de rangos en la cabecera de la tabla de menú */
.mgr-rank-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.mgr-rank-legend span { font-family: var(--mgr-mono); font-size: .62rem; text-transform: none; letter-spacing: 0; }

.mgr-config-table input[type="checkbox"] { accent-color: var(--mgr-accent); }
.mgr-config-table th[title] { cursor: help; }

/* Aviso informativo */
.mgr-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--mgr-rad);
  background: var(--mgr-accent-dim);
  border: 1px solid var(--mgr-accent);
  margin-bottom: 16px;
  font-size: .83rem;
  color: var(--mgr-text);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Aviso con consecuencia, no informativo: se distingue del resto. Va
   detrás de .mgr-note a propósito — misma especificidad, gana el último. */
.mgr-note--warn {
  background: rgba(220,220,170,.08);
  border-color: var(--mgr-warn);
}
[data-theme="light"] .mgr-note--warn { background: rgba(138,97,0,.08); }

/* Enlaces dentro del contenido del panel.
   Sin esto se pintan con el azul/morado del navegador, que ignora el color
   elegido en Configuración del Panel y desentona con todo lo demás. Se
   declara aquí, junto a los avisos, y no por vista, para que cualquier
   enlace nuevo lo herede sin acordarse. */
/* :not(...) de los botones: un <a class="mgr-btn-primary"> ya trae su
   propio color de texto pensado para su propio fondo (mgr-on-accent sobre
   mgr-accent); sin la exclusión, esta regla —más específica por llevar
   también la etiqueta a— le gana y pinta el texto del mismo color que el
   fondo, dejándolo invisible. */
.mgr-note a:not(.mgr-btn):not(.mgr-btn-primary):not(.mgr-btn--ghost):not(.mgr-btn--danger),
.mgr-card__body a:not(.mgr-btn):not(.mgr-btn-primary):not(.mgr-btn--ghost):not(.mgr-btn--danger),
.mgr-users-table a:not(.mgr-btn):not(.mgr-btn-primary):not(.mgr-btn--ghost):not(.mgr-btn--danger) {
  color: var(--mgr-accent);
  text-decoration: none;
  font-weight: 600;
}

.mgr-note a:hover:not(.mgr-btn):not(.mgr-btn-primary):not(.mgr-btn--ghost):not(.mgr-btn--danger),
.mgr-card__body a:hover:not(.mgr-btn):not(.mgr-btn-primary):not(.mgr-btn--ghost):not(.mgr-btn--danger),
.mgr-users-table a:hover:not(.mgr-btn):not(.mgr-btn-primary):not(.mgr-btn--ghost):not(.mgr-btn--danger) { text-decoration: underline; }

.mgr-note a:focus-visible,
.mgr-card__body a:focus-visible,
.mgr-users-table a:focus-visible {
  outline: 2px solid var(--mgr-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Login
   ============================================================ */
.mgr-login-page { background: var(--mgr-bg); }
.mgr-login-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 40px 36px;
  box-shadow: var(--mgr-shadow);
}
.mgr-login-title { color: var(--mgr-text-hi); }
.mgr-login-sub   { color: var(--mgr-muted); }
.mgr-btn-primary { width: 100%; justify-content: center; margin-top: 8px; padding: 11px; }

/* — Config. de Menú: fila de un botón oculto — */
/* Atenuada para que se lea de un vistazo qué está fuera del menú. Los
   controles siguen activos: hay que poder configurar antes de mostrar. */
.mgr-menu-row.is-hidden-item > td { opacity: .48; }
.mgr-menu-row.is-hidden-item > td:nth-child(2) { opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .mgr-mon-logs { grid-template-columns: 1fr; }
  .mgr-chat-page { grid-template-columns: 1fr; }
  .mgr-chat-thread { height: 460px; }
}

/* ── Móvil: la barra lateral pasa a ser un cajón desplegable ──
   El bloque equivalente de manager_main.css se queda corto aquí: esta hoja
   carga después y su `.mgr-sidebar { width: 248px }` (sin media query, misma
   especificidad) gana al `width: 100%` de allí, así que el ancho hay que
   volver a declararlo. Se redeclara el bloque entero para tenerlo junto. */
@media (max-width: 768px) {
  .mgr-sidebar {
    position: fixed;
    top: var(--mgr-topbar-h);
    left: 0;
    right: 0;
    width: 100%;
    min-height: 0;
    height: calc(100vh - var(--mgr-topbar-h));
    height: calc(100dvh - var(--mgr-topbar-h));  /* sin la barra del navegador */
    z-index: 100;
    border-right: none;
    border-bottom: 1px solid var(--mgr-border);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* `visibility` queda fuera de la transición a propósito. El truco
       habitual (`visibility 0s .2s`) la deja pegada en `visible` si la
       anchura cruza el breakpoint a media animación — al girar el teléfono,
       por ejemplo — y entonces el menú es invisible pero sigue siendo
       tabulable. Se pierde el barrido de salida; se gana que cerrado
       signifique cerrado. */
    transition: transform .2s ease, opacity .18s ease;
  }
  .mgr-sidebar--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Su cabecera duplica lo que ya dice la topbar. */
  .mgr-sidebar-header { display: none; }

  .mgr-mobile-backdrop { top: var(--mgr-topbar-h); }

  /* La topbar se queda fija: el cajón cuelga de ella. */
  .mgr-topbar {
    position: sticky;
    top: 0;
    padding: 0 14px;
    gap: 10px;
  }
  .mgr-status-pill { display: none; }
  .mgr-content { padding: 18px 16px 32px; }
  .mgr-nav-item { padding: 12px 14px; font-size: .95rem; }

  /* Con el cajón abierto, el fondo no se desplaza. La clase la pone el JS
     en <html>, que es quien scrollea. */
  html.mgr-nav-open,
  html.mgr-nav-open .mgr-root { overflow: hidden; }
}

/* Pantallas estrechas: la topbar prioriza el botón de menú. */
@media (max-width: 480px) {
  .mgr-topbar { padding: 0 10px; gap: 6px; }
  .mgr-crumb, .mgr-crumb-sep { display: none; }
  .mgr-page-title { font-size: .92rem; }
  .mgr-content { padding: 16px 12px 28px; }
}

/* ============================================================
   Claude — consola de prueba
   Nada de burbujas de chat: es una sesión de Claude Code de verdad
   corriendo detrás, así que se ve como una — mono, fondo casi negro,
   los mismos tokens de color que ya usa el resto del panel.
   ============================================================ */
.mgr-claude-reset {
  background: none;
  border: none;
  color: var(--mgr-faint);
  font: inherit;
  cursor: pointer;
  padding: 3px 6px;
}
.mgr-claude-reset:hover { color: var(--mgr-danger); }

.mgr-claude-console {
  display: flex;
  flex-direction: column;
  background: var(--mgr-bg);
  border: 2px dashed transparent;
  border-radius: var(--mgr-rad);
  transition: border-color .12s, background .12s;
}
/* Arrastrando un archivo por encima: la consola entera es la zona de
   soltado, igual que en claude.ai — no hace falta acertarle a un recuadro
   chico. */
.mgr-claude-console--dragover {
  border-color: var(--mgr-accent);
  background: var(--mgr-accent-dim);
}

.mgr-claude-console__log {
  max-height: 440px;
  min-height: 160px;
  overflow-y: auto;
  padding: 14px 16px;
  font-family: var(--mgr-mono);
  font-size: .82rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mgr-claude-console__empty { margin: 0; color: var(--mgr-faint); }

.mgr-claude-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--mgr-text);
}
.mgr-claude-line--user { color: var(--mgr-text-hi); }
.mgr-claude-line--error { color: var(--mgr-danger); }
.mgr-claude-line--thinking { color: var(--mgr-muted); font-style: italic; }

.mgr-claude-caret { color: var(--mgr-accent); font-weight: 700; margin-right: 8px; }
.mgr-claude-mark  { color: var(--mgr-success); margin-right: 8px; display: inline-block; min-width: 1em; }

.mgr-claude-console__input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--mgr-border);
  background: var(--mgr-surface);
}

.mgr-claude-inputrow {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.mgr-claude-inputrow .mgr-claude-caret { padding-bottom: 8px; }

.mgr-claude-inputrow textarea {
  flex: 1;
  resize: none;
  max-height: 160px;
  border: none;
  background: none;
  outline: none;
  color: var(--mgr-text-hi);
  font-family: var(--mgr-mono);
  font-size: .84rem;
  line-height: 1.5;
  padding: 7px 0;
}
.mgr-claude-inputrow textarea::placeholder { color: var(--mgr-faint); }
.mgr-claude-inputrow textarea:disabled { opacity: .5; }

.mgr-claude-send,
.mgr-claude-attach {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border-hi);
  background: var(--mgr-raised);
  color: var(--mgr-accent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.mgr-claude-attach { color: var(--mgr-muted); font-size: .9rem; }
.mgr-claude-send:hover:not(:disabled),
.mgr-claude-attach:hover:not(:disabled) { background: var(--mgr-surface-hi); }
.mgr-claude-send:disabled,
.mgr-claude-attach:disabled { opacity: .4; cursor: default; }

.mgr-claude-chips {
  /* Arranca oculto por CSS; el JS lo pasa a flex por style.display en
     cuanto hay algo en la precarga (ver renderChips en claude_console.js). */
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tarjeta de vista previa: icono + nombre/peso + quitar. Antes de enviar,
   no después — es lo que se va a mandar, no un registro de lo ya mandado. */
.mgr-claude-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: var(--mgr-rad-sm);
  border: 1px solid var(--mgr-border-hi);
  background: var(--mgr-raised);
  font-family: var(--mgr-mono);
}
.mgr-claude-chip__icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }

.mgr-claude-chip__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.mgr-claude-chip__namerow {
  display: flex;
  min-width: 0;
  color: var(--mgr-text-hi);
  font-size: .74rem;
}
.mgr-claude-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* La extensión nunca se trunca: es la parte que dice qué tipo de archivo
   es, así que tiene que verse aunque el nombre sea largo. */
.mgr-claude-chip__ext { flex-shrink: 0; white-space: nowrap; }
.mgr-claude-chip__size { color: var(--mgr-faint); font-size: .64rem; }

.mgr-claude-chip button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--mgr-faint);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  padding: 0 2px;
  align-self: flex-start;
}
.mgr-claude-chip button:hover { color: var(--mgr-danger); }

@media (prefers-reduced-motion: reduce) {
  .mgr-root *, .mgr-login-page * { animation: none !important; transition: none !important; }
}